/* =========================================================
   Евгения · художник фактуры — КАРКАС v2
   Мобильный первым. Слом миров — визуальный приём, скролл свободный.
   ========================================================= */

/* ---------- 1. Токены каркаса ---------- */
:root{
  /* типографическая шкала */
  --f-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --f-text: "Golos Text", system-ui, -apple-system, sans-serif;

  --t-opening: clamp(1.45rem, 6.2vw, 3rem);
  --t-title:   clamp(2.4rem, 11vw, 5.4rem);
  --t-lead:    clamp(1.05rem, 4.3vw, 1.45rem);
  --t-body:    clamp(0.98rem, 3.6vw, 1.06rem);
  --t-small:   clamp(0.78rem, 3vw, 0.86rem);
  --t-eyebrow: 0.72rem;

  /* ритм */
  --pad-x: clamp(18px, 5.5vw, 76px);
  --sec-pad-y: clamp(84px, 13vh, 190px);
  --gap: clamp(20px, 4vw, 40px);
  --maxw: 1480px;

  /* нить */
  --thread-w: 3.6;
  --tear: 30px;

  /* цвета интерфейса — переключаются JS на границе миров */
  --ui-ink: #23201C;      /* мир под шапкой */
  --ui-accent: #B4862F;
  --ui-bg: #EDE8DF;
  --rail-ink: #23201C;    /* мир на середине экрана */
  --rail-accent: #B4862F;

  --dur: 0.3s;
}
@media (min-width: 980px){
  :root{ --thread-w: 5.4; --tear: 54px; --dur: 0.55s; }
}

/* ---------- 2. Сброс ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  overflow-x: clip;              /* не hidden: hidden ломает sticky ниже по странице */
  scroll-behavior: auto;         /* никакого «плавного» нативного скролла поверх Lenis */
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  overflow-x: clip;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.55;
  transition: background-color .12s linear;   /* слом должен быть резким */
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
::selection{ background: var(--ui-accent); color:#fff; }

/* Lenis (десктоп): минимально необходимое, без плагинов */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- 3. Шапка ---------- */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding: 14px var(--pad-x);
  color: var(--ui-ink);
  font-size: var(--t-small);
  transition: color .12s linear;
  mix-blend-mode: normal;
  pointer-events:none;
}
.hdr > *{ pointer-events:auto; }
/* мягкая подложка цвета текущего мира — чтобы шапка читалась поверх картин */
.hdr::before{
  content:""; position:absolute; z-index:-1;
  left:0; right:0; top:0; height: 190%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ui-bg) 88%, transparent), transparent);
}
.hdr__mark{ display:flex; align-items:baseline; gap:.45em; letter-spacing:.01em; }
.hdr__name{ font-family: var(--f-display); font-weight:600; letter-spacing:-.02em; font-size:.94em; }
.hdr__dot{ opacity:.55; }
.hdr__role{ opacity:.72; }
.hdr__cta{
  border-bottom:1px solid currentColor; padding-bottom:2px;
  color: var(--ui-accent); font-weight:500;
}
@media (max-width: 439px){ .hdr__role, .hdr__dot{ display:none; } }

/* ---------- 4. Индикатор блоков ---------- */
.rail{
  position: fixed; z-index:18;
  right: 0; top:50%; transform: translateY(-50%);
  padding: 0 clamp(8px, 1.6vw, 22px) 0 0;
  pointer-events:none;
}
.rail__list{ display:flex; flex-direction:column; gap: clamp(10px, 1.7vh, 18px); align-items:flex-end; }
.rail__item{
  pointer-events:auto;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  color: var(--rail-ink); opacity:.42;
  font-size:.7rem; letter-spacing:.14em; text-transform:lowercase;
  transition: opacity .18s linear, color .18s linear;
}
.rail__item i{ display:block; width:14px; height:1.5px; background: currentColor; transition: width .2s ease, background-color .18s linear; }
.rail__item span{ display:none; }
.rail__item.is-active{ opacity:1; color: var(--rail-accent); }
.rail__item.is-active i{ width:26px; }
.rail__item.is-active span{ display:block; }
@media (min-width: 980px){
  .rail__item span{ display:block; }
  .rail__item{ opacity:.34; }
  .rail__item:hover{ opacity:.8; }
  .rail__item.is-active span{ font-weight:500; }
}

/* ---------- 5. Атмосфера и нить ---------- */
.fx{
  position: fixed; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none;
}
.thread{
  position:absolute; top:0; left:0; z-index:3;
  width:100%; height:0;
  overflow: visible;
  pointer-events:none;
}
.thread__base{
  stroke: url(#goldStroke);
  stroke-width: var(--thread-w);
  stroke-linecap: round; stroke-linejoin: round;
}
.thread__halo{
  stroke: #E8B94F; stroke-opacity:.20;
  stroke-width: calc(var(--thread-w) * 3.1);
  stroke-linecap: round; stroke-linejoin: round;
}
.thread__glint{
  stroke: #FFF8E2; stroke-opacity:.9;
  stroke-width: calc(var(--thread-w) * .5);
  stroke-linecap: round;
  stroke-dasharray: 2 30;
  animation: glint 2.4s linear infinite;
}
@keyframes glint{ to{ stroke-dashoffset: -32; } }
.thread__knots .knot{ fill:#F0CE73; opacity:0; }
.thread__sparks circle{ fill:#FFEFC0; }
#threadHeadPulse{ transform-origin: 0 0; }
#threadHeadPulse.is-flash{ animation: flash .5s ease-out; }
@keyframes flash{
  0%{ transform: scale(1); }
  22%{ transform: scale(2.1); }
  100%{ transform: scale(1); }
}

/* ---------- 6. Секция-мир ---------- */
.sec{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--sec-pad-y) 0 calc(var(--sec-pad-y) * .78);
  color: var(--ink);
  isolation: auto;
}
.sec__world{
  position:absolute; inset:0; z-index:0;
  background: var(--bg);
}
/* «вторая» краска мира — мягкое поле, чтобы фон не был плоской заливкой */
.sec__world::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 65% at var(--glow-x, 22%) var(--glow-y, 18%), var(--bg-2) 0%, transparent 62%);
  opacity: var(--glow-o, .85);
}
.sec__inner{
  position: relative;
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: var(--pad-x);
  display:grid;
  gap: var(--gap);
}

/* заголовочный блок */
.sec__head{ position:relative; z-index:4; }
.opening{
  font-family: var(--f-display); font-weight:300;
  font-size: var(--t-opening); line-height:1.14; letter-spacing:-.03em;
  margin-bottom: clamp(56px, 12vh, 150px);
  max-width: 18ch;
}
.eyebrow{
  font-size: var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase;
  color: var(--ink-soft); font-weight:500;
  display:flex; align-items:center; gap:.9em;
  margin-bottom: .9em;
}
.eyebrow__num{ color: var(--accent); font-family: var(--f-display); font-weight:600; letter-spacing:.06em; }
.sec__title{
  font-family: var(--f-display); font-weight:600;
  font-size: var(--t-title); line-height:.94; letter-spacing:-.045em;
}
/* сквозной авторский жест: мазок мастихина под заголовком */
.stroke{ display:block; width: clamp(140px, 42vw, 320px); height:auto; margin-top:.7em; fill: var(--accent); opacity:.9; }
.stroke--2{ width: clamp(110px, 33vw, 260px); opacity:.8; }
.stroke--3{ width: clamp(170px, 52vw, 380px); opacity:.75; }

/* картина */
.plate{ position:relative; z-index:1; }
.plate img{ width:100%; height:auto; box-shadow: var(--plate-shadow, 0 26px 60px -34px rgba(0,0,0,.55)); }
.plate figcaption{
  margin-top: .85em;
  font-size: var(--t-small); color: var(--ink-soft);
  letter-spacing:.03em;
  display:flex; flex-wrap:wrap; gap:.6em; align-items:baseline;
}
.tag{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:2px; padding:.18em .5em; opacity:.6;
}

/* история */
.story{ position:relative; z-index:4; max-width: 38ch; }
.story__lead{ font-size: var(--t-lead); line-height:1.35; letter-spacing:-.01em; }
.story__note{ margin-top:1em; color: var(--ink-soft); }
.story__meta{
  margin-top:1.4em; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-soft); opacity:.8;
}

/* стопка доп. кадров внахлёст */
.stack{ position:relative; z-index:1; display:flex; align-items:flex-start; }
.frame{ position:relative; width:46%; }
.frame img{ width:100%; height:auto; border-radius:2px; box-shadow: var(--frame-shadow, 0 18px 40px -24px rgba(0,0,0,.6)); }
.frame--a{ transform: rotate(-1.6deg); }
.frame--b{ margin-left:-9%; margin-top:14%; transform: rotate(1.9deg); }

/* ---------- 7. Раскладка: мобильный / десктоп ---------- */
.sec__inner{ grid-template-columns: 1fr; }
.stack{ margin-top: -14%; padding-left: 6%; }

@media (min-width: 980px){
  .sec__inner{
    padding-right: clamp(112px, 10vw, 176px);   /* полоса под индикатор блоков */
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(20px, 2.4vw, 44px);
    row-gap: clamp(28px, 4vh, 64px);
    align-items:start;
  }
  .sec__head{ grid-column: 1 / 10; grid-row: 1; }
  .plate{ grid-column: 1 / 8;  grid-row: 2; }
  .story{ grid-column: 8 / 13; grid-row: 2; padding-top: clamp(24px, 7vh, 90px); padding-left: clamp(16px, 2.6vw, 48px); }
  .stack{ grid-column: 7 / 13; grid-row: 3; margin-top: clamp(-260px, -18vh, -110px); padding-left:0; justify-self:end; width: 78%; }

  /* зеркальный вариант каркаса: сетка та же, стороны меняются местами */
  .sec--mirror .plate{ grid-column: 6 / 13; }
  .sec--mirror .story{ grid-column: 1 / 6; padding-left:0; padding-right: clamp(16px, 2.6vw, 48px); }
  .sec--mirror .stack{ grid-column: 1 / 7; justify-self:start; }
  .sec--mirror .sec__head{ grid-column: 3 / 13; text-align:right; }
  .sec--mirror .eyebrow{ justify-content:flex-end; }
  .sec--mirror .stroke{ margin-left:auto; }
}

/* ---------- 8. Палитры миров ---------- */
.sec--air{
  --bg:#EDE8DF; --bg-2:#F7F3EA; --ink:#23201C; --ink-soft:#6B6055; --accent:#B4862F;
  --glow-x:64%; --glow-y:12%;
  --particle-kind: dust; --particle-color: #B9AB93; --particle-density: .55; --particle-speed: .30; --particle-alpha: .55; --particle-blend: normal;
}
.sec--drive{
  --bg:#0B0909; --bg-2:#241010; --ink:#F4EDE6; --ink-soft:#A2938A; --accent:#E23B2E;
  --glow-x:30%; --glow-y:76%;
  --plate-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
  --frame-shadow: 0 20px 44px -24px rgba(0,0,0,.9);
  --particle-kind: spark; --particle-color: #FF6A38; --particle-density: 1.15; --particle-speed: 1.5; --particle-alpha: .8; --particle-blend: lighter;
}
.sec--words{
  --bg:#EFF0EC; --bg-2:#FBFBF8; --ink:#17161A; --ink-soft:#61606A; --accent:#E2465F;
  --glow-x:78%; --glow-y:30%;
  --particle-kind: crumb; --particle-color: #B9B7AC; --particle-density: .7; --particle-speed: .22; --particle-alpha: .55; --particle-blend: normal;
}
.sec--wild{
  --bg:#D5DEC7; --bg-2:#E7EDDC; --ink:#16240F; --ink-soft:#4C6142; --accent:#3F6A22;
  --glow-x:20%; --glow-y:22%;
  --particle-kind: leaf; --particle-color: #6E8C4A; --particle-density: .75; --particle-speed: .6; --particle-alpha: .5; --particle-blend: normal;
}
.sec--deep{
  --bg:#140F1D; --bg-2:#2C1F42; --ink:#EDE7F5; --ink-soft:#9C90B4; --accent:#C8A64B;
  --glow-x:70%; --glow-y:64%;
  --plate-shadow: 0 30px 70px -30px rgba(0,0,0,.95);
  --frame-shadow: 0 20px 44px -24px rgba(0,0,0,.95);
  --particle-kind: star; --particle-color: #D9CEF3; --particle-density: 1.0; --particle-speed: .28; --particle-alpha: .75; --particle-blend: lighter;
}
.sec--warm{
  --bg:#E9D9BC; --bg-2:#F6EBD4; --ink:#2A2016; --ink-soft:#6E5A41; --accent:#A8721B;
  --glow-x:34%; --glow-y:14%;
  --particle-kind: gold; --particle-color: #C08D25; --particle-density: .55; --particle-speed: .3; --particle-alpha: .5; --particle-blend: normal;
}
.sec--offer{
  --bg:#1D1610; --bg-2:#3A2A18; --ink:#F2E7D5; --ink-soft:#A8967D; --accent:#D8A84A;
  --glow-x:50%; --glow-y:88%;
  --particle-kind: gold; --particle-color: #D8A84A; --particle-density: .6; --particle-speed: .3; --particle-alpha: .6; --particle-blend: lighter;
}

/* ---------- 9. Слом миров ---------- */
/* базовый слом — жёсткая цветовая граница (её даёт сама смена --bg).
   Один фигурный слом на весь сайт: рваный край на входе в «Драйв». */
.sec--drive{
  margin-top: calc(var(--tear) * -1);
  padding-top: calc(var(--sec-pad-y) + var(--tear));
}
.sec--drive .sec__world{
  clip-path: polygon(
    0 calc(var(--tear) * .74),
    3%  calc(var(--tear) * .22),  7%  calc(var(--tear) * .61),  11% calc(var(--tear) * .12),
    16% calc(var(--tear) * .83),  19% calc(var(--tear) * .34),  25% calc(var(--tear) * .55),
    28% calc(var(--tear) * .05),  34% calc(var(--tear) * .72),  41% calc(var(--tear) * .28),
    45% calc(var(--tear) * .92),  49% calc(var(--tear) * .41),  56% calc(var(--tear) * .14),
    61% calc(var(--tear) * .68),  66% calc(var(--tear) * .31),  72% calc(var(--tear) * .88),
    76% calc(var(--tear) * .19),  83% calc(var(--tear) * .58),  88% calc(var(--tear) * .09),
    93% calc(var(--tear) * .77),  97% calc(var(--tear) * .36), 100% calc(var(--tear) * .63),
    100% 100%, 0 100%
  );
}
/* волосок золота ровно по границе миров: дорисовывается при входе секции в кадр */
.sec + .sec .sec__world::before{
  content:""; position:absolute; z-index:1;
  top:0; left: var(--pad-x); right: var(--pad-x);
  height:1px; background: var(--accent); opacity:.5;
  transform: scaleX(0); transform-origin: left center;
}
.sec--drive .sec__world::before{ display:none; }   /* там слом — рваный край */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec + .sec .sec__world::before{
      animation: hair 1s linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 18%;
    }
  }
}
@keyframes hair{ to{ transform: scaleX(1); } }

/* ---------- 10. Заявка ---------- */
.sec--offer{ min-height: auto; }
.offer{ position:relative; z-index:4; max-width: 46ch; }
.offer__price{
  font-family: var(--f-display); font-weight:600;
  font-size: clamp(1.7rem, 7vw, 2.9rem); letter-spacing:-.03em;
  color: var(--accent);
  margin-bottom:.6em;
}
.offer__facts li{
  padding: .55em 0 .55em 1.1em; position:relative;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.offer__facts li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:6px; height:1px; background: var(--accent);
}
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  margin-top: 1.8em;
  padding: .95em 1.5em;
  border-radius: 999px;
  background: var(--accent); color:#1A1206;
  font-weight:500; letter-spacing:.01em;
  transition: transform .18s ease, background-color .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--ghost{
  background: transparent; color: var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  border-radius: 999px; margin-top:1.4em;
}
.offer__hint{ margin-top:1.1em; color: var(--ink-soft); font-size: var(--t-small); max-width:34ch; }

.fform{ position:relative; z-index:4; max-width: 34ch; }
.fform__title{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-soft);
  margin-bottom:1.2em;
}
.fld{ display:block; margin-bottom:1.1em; }
.fld span{ display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:.35em; }
.fld input{
  width:100%; background:transparent; border:0; border-bottom:1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius:0; padding:.5em 0; outline:none;
}
.fld input:focus{ border-bottom-color: var(--accent); }
.fform__status{ margin-top:1em; font-size: var(--t-small); color: var(--accent); min-height:1.4em; }

@media (min-width: 980px){
  .sec__inner--offer{ align-items:start; }
  .sec__inner--offer .sec__head{ grid-column: 1 / 8; grid-row:1; }
  .offer{ grid-column: 1 / 7; grid-row: 2; }
  .fform{ grid-column: 8 / 12; grid-row: 2; }
}

/* ---------- 11. Подвал ---------- */
.foot{
  position:relative; z-index:4;
  background:#0F0B07; color:#8D7F6C;
  padding: clamp(40px, 8vh, 90px) var(--pad-x);
  font-size: var(--t-small);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- 12. Ревилы ---------- */
/* простое — нативным CSS scroll-driven; JS-фолбек только там, где не поддержано */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-in{ opacity:1; transform:none; transition: opacity var(--dur) ease-out, transform var(--dur) ease-out; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{ animation: rise 1s linear both; animation-timeline: view(); animation-range: entry 6% cover 26%; }
  }
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- 13. Спокойный режим ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
  .sec + .sec .sec__inner::before{ transform: scaleX(1); animation:none !important; }
  .thread__glint{ animation:none; stroke-dasharray:none; stroke-opacity:.35; }
  .fx{ display:none; }
}