/* ZAGORY NATURE UI v1 — public site only */
:root{
  --zg-nature-gold:#d2a35f;
  --zg-nature-gold-bright:#e8c27e;
  --zg-nature-sand:#f4eee3;
  --zg-nature-stone:#171612;
  --zg-nature-forest:#172019;
  --zg-nature-ease:cubic-bezier(.2,.78,.2,1);
}

body[data-theme="noir"]{
  background-color:#0c0d0b;
  background-image:
    radial-gradient(circle at 50% -12%,rgba(210,163,95,.12),transparent 34rem),
    url("/assets/zagory-topography.svg");
  background-position:center top,center top;
  background-size:auto,720px 720px;
  background-attachment:scroll,fixed;
}

body[data-theme="noir"] main{
  position:relative;
  isolation:isolate;
}

body[data-theme="noir"] .topbar{
  border-bottom-color:rgba(210,163,95,.16);
}

body[data-theme="noir"] .topbar.light,
body[data-theme="noir"] .topbar.scrolled{
  background:linear-gradient(180deg,rgba(12,13,11,.96),rgba(17,16,14,.88));
  border-bottom-color:rgba(210,163,95,.2);
  box-shadow:0 14px 44px rgba(0,0,0,.18);
  backdrop-filter:blur(22px) saturate(1.08);
}

body[data-theme="noir"] .brand-small img{
  filter:drop-shadow(0 8px 22px rgba(210,163,95,.16));
  transition:filter .35s ease,transform .35s var(--zg-nature-ease);
}

@media (hover:hover) and (pointer:fine){
  body[data-theme="noir"] .brand-small:hover img{
    filter:drop-shadow(0 10px 28px rgba(210,163,95,.3));
    transform:translateY(-1px);
  }
}

body[data-theme="noir"] .nav a{
  transition:color .24s ease,opacity .24s ease,transform .24s ease;
}

body[data-theme="noir"] .nav a:not(.pill)::after{
  bottom:-9px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(210,163,95,.18),var(--zg-nature-gold-bright),rgba(210,163,95,.2));
  box-shadow:0 0 18px rgba(210,163,95,.28);
}

body[data-theme="noir"] .nav .pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--zg-nature-sand);
  border-color:rgba(210,163,95,.58);
  background:rgba(14,14,12,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.12);
}

body[data-theme="noir"] .nav .pill::after{
  content:"→";
  color:var(--zg-nature-gold-bright);
  font-size:18px;
  line-height:1;
  transition:transform .28s var(--zg-nature-ease);
}

@media (hover:hover) and (pointer:fine){
  body[data-theme="noir"] .nav a:not(.pill):hover{
    color:var(--zg-nature-gold-bright);
  }
  body[data-theme="noir"] .nav .pill:hover{
    color:#11100e;
    border-color:var(--zg-nature-gold-bright);
    background:linear-gradient(135deg,#bf8e49,#e7bd73);
    box-shadow:0 16px 38px rgba(210,163,95,.2);
  }
  body[data-theme="noir"] .nav .pill:hover::after{
    color:#11100e;
    transform:translateX(4px);
  }
}

body[data-theme="noir"] .page-hero{
  background-color:#11120f;
  background-image:
    linear-gradient(180deg,rgba(10,11,9,.18),rgba(10,11,9,.78)),
    url("/assets/zagory-ridge.svg"),
    url("/assets/zagory-topography.svg");
  background-position:center,center bottom,center;
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:cover,100% clamp(130px,18vw,250px),720px 720px;
  border-bottom-color:rgba(210,163,95,.2);
}

body[data-theme="noir"] .page-title{
  color:#f7f1e6;
  text-shadow:0 16px 40px rgba(0,0,0,.34);
}

body[data-theme="noir"] .page-title::after{
  content:"";
  display:block;
  width:min(170px,38vw);
  height:2px;
  margin-top:22px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--zg-nature-gold-bright),rgba(210,163,95,.06));
  box-shadow:0 0 24px rgba(210,163,95,.2);
}

body[data-theme="noir"] .page-sub{
  color:#d2c6b4;
  text-shadow:0 8px 28px rgba(0,0,0,.24);
}

body[data-theme="noir"]:not([data-page="account"]) main>.page-hero+.section{
  background-image:
    linear-gradient(180deg,rgba(12,13,11,.5),rgba(12,13,11,.06) 240px),
    url("/assets/zagory-topography.svg");
  background-position:center top,center top;
  background-repeat:no-repeat,repeat;
  background-size:100% 320px,720px 720px;
}

body[data-theme="noir"] .section-title{
  color:#f5eee2;
  text-wrap:balance;
}

body[data-theme="noir"] .section-title::after{
  content:"";
  display:block;
  width:106px;
  height:1px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--zg-nature-gold),rgba(210,163,95,0));
  box-shadow:24px 0 18px rgba(210,163,95,.14);
}

body[data-theme="noir"] .card{
  background:linear-gradient(155deg,rgba(29,27,23,.97),rgba(15,15,13,.985));
  border-color:rgba(210,163,95,.24);
  box-shadow:0 22px 68px rgba(0,0,0,.29),inset 0 1px 0 rgba(255,255,255,.035);
  transform:translateZ(0);
  transition:transform .42s var(--zg-nature-ease),box-shadow .42s ease,border-color .42s ease;
}

body[data-theme="noir"] .card h3,
body[data-theme="noir"] .card h3 a{
  color:#f4eee3;
}

body[data-theme="noir"] .card p{
  color:#cfc4b4;
}

body[data-theme="noir"] .card-media{
  background-color:#151713;
}

body[data-theme="noir"] .card-img{
  transition:transform .95s var(--zg-nature-ease),filter .42s ease,opacity .35s ease;
  filter:saturate(1.02) contrast(1.035) brightness(.94);
}

@media (hover:hover) and (pointer:fine){
  body[data-theme="noir"] .card:hover{
    transform:translateY(-7px);
    border-color:rgba(232,194,126,.58);
    box-shadow:0 34px 92px rgba(0,0,0,.46),0 0 0 1px rgba(210,163,95,.08),0 0 38px rgba(210,163,95,.08);
  }
  body[data-theme="noir"] .card:hover .card-img{
    transform:scale(1.05);
    filter:saturate(1.09) contrast(1.045) brightness(1.01);
  }
}

body[data-theme="noir"] .card-meta{
  gap:9px;
}

body[data-theme="noir"] .card-meta .tag:not(.sold-tag){
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  color:#dbcfbd;
  border-color:rgba(210,163,95,.34);
  background:rgba(8,9,8,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.12);
  backdrop-filter:blur(12px);
}

body[data-theme="noir"] .card-meta .tag:not(.sold-tag)::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border:2px solid var(--zg-nature-gold-bright);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(210,163,95,.1),0 0 14px rgba(210,163,95,.2);
}

body[data-theme="noir"] .card-meta .tag:nth-child(2):not(.sold-tag){
  color:#efd39f;
  border-color:rgba(232,194,126,.48);
}

body[data-theme="noir"] .filter-btn{
  color:#d9cdbb;
  border-color:rgba(210,163,95,.27);
  background:rgba(15,16,13,.64);
  backdrop-filter:blur(12px);
}

body[data-theme="noir"] .filter-btn.active{
  color:#11100e;
  border-color:var(--zg-nature-gold-bright);
  background:linear-gradient(135deg,#bd8b48,#e4b970);
  box-shadow:0 13px 30px rgba(210,163,95,.18);
}

body[data-theme="noir"] .card .btn,
body[data-theme="noir"] .btn.gold{
  gap:12px;
  color:#11100e;
  border-color:#d5a65f;
  background:linear-gradient(135deg,#bd8a47,#e5ba71);
  box-shadow:0 14px 34px rgba(210,163,95,.16),inset 0 1px 0 rgba(255,255,255,.22);
  font-weight:650;
  transition:transform .28s var(--zg-nature-ease),box-shadow .28s ease,filter .28s ease;
}

body[data-theme="noir"] .card .btn:not(.disabled)::after,
body[data-theme="noir"] .btn.gold:not(.disabled)::after{
  content:"→";
  display:inline-block;
  font-size:18px;
  line-height:1;
  transition:transform .28s var(--zg-nature-ease);
}

@media (hover:hover) and (pointer:fine){
  body[data-theme="noir"] .card .btn:hover,
  body[data-theme="noir"] .btn.gold:hover{
    transform:translateY(-2px);
    filter:saturate(1.06) brightness(1.04);
    box-shadow:0 20px 46px rgba(210,163,95,.24),inset 0 1px 0 rgba(255,255,255,.26);
  }
  body[data-theme="noir"] .card .btn:hover::after,
  body[data-theme="noir"] .btn.gold:hover::after{
    transform:translateX(5px);
  }
}

body[data-theme="noir"] .btn:active,
body[data-theme="noir"] .filter-btn:active{
  transform:translateY(1px) scale(.99);
}

body[data-theme="noir"] .footer{
  border-top-color:rgba(210,163,95,.2);
  background-color:#0b0c0a;
  background-image:
    linear-gradient(180deg,rgba(11,12,10,.9),rgba(11,12,10,.98)),
    url("/assets/zagory-topography.svg");
  background-size:auto,720px 720px;
}

@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  body[data-theme="noir"] .reveal{
    opacity:0;
    transform:translateY(28px) scale(.992);
    filter:blur(3px);
    transition:
      opacity .72s ease var(--reveal-delay,0ms),
      transform .82s var(--zg-nature-ease) var(--reveal-delay,0ms),
      filter .72s ease var(--reveal-delay,0ms);
  }
  body[data-theme="noir"] .reveal.is-visible{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@media (max-width:900px){
  body[data-theme="noir"]{
    background-size:auto,520px 520px;
    background-attachment:scroll,scroll;
  }
  body[data-theme="noir"] .page-hero{
    background-size:cover,150% 150px,520px 520px;
  }
  body[data-theme="noir"] .topbar .nav .pill::after{
    margin-left:auto;
  }
}

@media (max-width:760px){
  body[data-theme="noir"] .page-title::after{
    width:108px;
    margin-top:16px;
  }
  body[data-theme="noir"] .card{
    border-color:rgba(210,163,95,.2);
    box-shadow:0 18px 48px rgba(0,0,0,.28);
  }
  body[data-theme="noir"] .card-meta .tag:not(.sold-tag){
    min-height:31px;
    gap:7px;
  }
  body[data-theme="noir"] .card-meta .tag:not(.sold-tag)::before{
    width:6px;
    height:6px;
    flex-basis:6px;
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-theme="noir"] .brand-small img,
  body[data-theme="noir"] .nav a,
  body[data-theme="noir"] .nav .pill::after,
  body[data-theme="noir"] .card,
  body[data-theme="noir"] .card-img,
  body[data-theme="noir"] .card .btn,
  body[data-theme="noir"] .btn.gold,
  body[data-theme="noir"] .card .btn::after,
  body[data-theme="noir"] .btn.gold::after{
    transition:none!important;
  }
}

/* ZAGORY NATURE UI v2 — photographic mountain background */

body[data-theme="noir"] {
  background-color:#080a08;
  background-image:
    linear-gradient(180deg,rgba(5,7,5,.80),rgba(7,8,6,.93)),
    url("/assets/zagory-topography.svg"),
    url("/uploads/2026-06/mpwelwaf-b653a8a6-zagory_slide_3_1600x900.webp");
  background-position:center,center top,center 48%;
  background-size:cover,620px 620px,cover;
  background-repeat:no-repeat,repeat,no-repeat;
  background-attachment:fixed,fixed,fixed;
  background-blend-mode:normal,soft-light,normal;
}

body[data-theme="noir"] .topbar.light,
body[data-theme="noir"] .topbar.scrolled {
  background-color:#0a0b09;
  background-image:
    linear-gradient(90deg,rgba(8,9,7,.94),rgba(10,11,9,.80),rgba(8,9,7,.94)),
    url("/uploads/2026-06/mpwelwaf-b653a8a6-zagory_slide_3_1600x900.webp");
  background-position:center,center 44%;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  border-bottom-color:rgba(210,163,95,.28);
}

body[data-theme="noir"] .page-hero {
  background-color:#0b0c0a;
  background-image:
    linear-gradient(180deg,rgba(7,8,6,.48),rgba(7,8,6,.88)),
    url("/assets/zagory-topography.svg"),
    url("/uploads/2026-06/mpwelwaf-b653a8a6-zagory_slide_3_1600x900.webp");
  background-position:center,center,center 48%;
  background-size:cover,620px 620px,cover;
  background-repeat:no-repeat,repeat,no-repeat;
  background-blend-mode:normal,soft-light,normal;
  box-shadow:inset 0 -70px 90px rgba(5,6,5,.42);
}

body[data-theme="noir"]:not([data-page="account"]) main>.page-hero+.section {
  background-color:#090a08;
  background-image:
    linear-gradient(180deg,rgba(7,8,6,.70),rgba(8,9,7,.91)),
    url("/assets/zagory-topography.svg"),
    url("/uploads/2026-06/mpwelwaf-b653a8a6-zagory_slide_3_1600x900.webp");
  background-position:center top,center top,center 48%;
  background-size:cover,620px 620px,cover;
  background-repeat:no-repeat,repeat,no-repeat;
  background-attachment:scroll,scroll,fixed;
  background-blend-mode:normal,soft-light,normal;
}

body[data-theme="noir"] .card {
  background:linear-gradient(155deg,rgba(29,27,23,.955),rgba(14,14,12,.975));
  border-color:rgba(210,163,95,.30);
  box-shadow:
    0 24px 76px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.045);
}

body[data-theme="noir"] .footer {
  background-color:#090a08;
  background-image:
    linear-gradient(180deg,rgba(8,9,7,.90),rgba(7,8,6,.97)),
    url("/assets/zagory-topography.svg"),
    url("/uploads/2026-06/mpwelwaf-b653a8a6-zagory_slide_3_1600x900.webp");
  background-position:center,center,center 58%;
  background-size:cover,620px 620px,cover;
  background-repeat:no-repeat,repeat,no-repeat;
  background-blend-mode:normal,soft-light,normal;
}

@media (max-width:900px) {
  body[data-theme="noir"] {
    background-position:center,center top,center;
    background-size:cover,460px 460px,auto 100vh;
    background-attachment:scroll,scroll,scroll;
  }

  body[data-theme="noir"] .page-hero {
    background-size:cover,460px 460px,auto 100%;
    background-position:center,center,center;
  }

  body[data-theme="noir"]:not([data-page="account"]) main>.page-hero+.section {
    background-size:cover,460px 460px,auto 100%;
    background-position:center top,center top,center top;
    background-attachment:scroll,scroll,scroll;
  }
}

/* ZAGORY NATURE UI v3 - approved cinematic background */

/* Единый утверждённый фон сайта */
body[data-theme="noir"] {
  background-color: #080906 !important;
  background-image:
    linear-gradient(180deg, rgba(5,6,4,.08) 0%, rgba(5,6,4,.20) 55%, rgba(5,6,4,.34) 100%),
    url("/assets/zagory-nature-background-v1.webp") !important;
  background-position: center top, center top !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
  background-blend-mode: normal !important;
}

/* Шапка — прозрачная, чтобы за ней читались горы */
body[data-theme="noir"] .topbar.light,
body[data-theme="noir"] .topbar.scrolled {
  background-color: rgba(7,8,6,.78) !important;
  background-image: none !important;
  border-bottom-color: rgba(203,155,70,.20) !important;
  backdrop-filter: blur(15px) saturate(110%);
  -webkit-backdrop-filter: blur(15px) saturate(110%);
}

/* Убираем прежний силуэт, топографию и фотографию */
body[data-theme="noir"] .page-hero {
  background-color: rgba(7,8,6,.08) !important;
  background-image:
    linear-gradient(180deg, rgba(7,8,6,.12), rgba(7,8,6,.40)) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
  box-shadow:
    inset 0 -70px 90px rgba(5,6,4,.36),
    0 1px 0 rgba(203,155,70,.16) !important;
}

body[data-theme="noir"]:not([data-page="account"]) main > .page-hero + .section {
  background-color: rgba(7,8,6,.10) !important;
  background-image:
    linear-gradient(180deg, rgba(7,8,6,.06), rgba(7,8,6,.24)) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
}

body[data-theme="noir"] .footer {
  background-color: rgba(6,7,5,.82) !important;
  background-image:
    linear-gradient(180deg, rgba(7,8,6,.42), rgba(5,6,4,.92)) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
}

/* На телефоне фон не дёргается при прокрутке */
@media (max-width: 900px) {
  body[data-theme="noir"] {
    background-attachment: scroll, scroll !important;
    background-size: cover, auto 100vh !important;
  }
}

/* ZAGORY NATURE UI v4 - mobile portrait background */

@media (max-width: 900px) {
  body[data-theme="noir"] {
    background-color: #080906 !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(5,6,4,.04) 0%,
        rgba(5,6,4,.12) 45%,
        rgba(5,6,4,.28) 100%
      ),
      url("/assets/zagory-nature-background-mobile-v1.webp") !important;

    background-position:
      center top,
      center top !important;

    background-size:
      100% 100vh,
      auto 100vh !important;

    background-size:
      100% 100svh,
      auto 100svh !important;

    background-repeat:
      no-repeat,
      no-repeat !important;

    background-attachment:
      scroll,
      scroll !important;

    background-blend-mode: normal !important;
  }

  body[data-theme="noir"] .page-hero {
    background-color: transparent !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(6,7,5,.08),
        rgba(6,7,5,.32)
      ) !important;
  }

  body[data-theme="noir"]:not([data-page="account"]) main > .page-hero + .section {
    background-color: rgba(7,8,6,.08) !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(7,8,6,.04),
        rgba(7,8,6,.18)
      ) !important;
  }
}