/* =========================================================
   Ашот & Анна — приглашение
   Стиль: Modern Editorial Romance / Quiet Luxury / Fashion
   Палитра: тёплый светло-серый · графит · приглушённое вино
   Без скруглений. Типографика — главный герой.

   Шрифтовая система (кириллица-safe):
     --display  Playfair Display  — заголовки, имена, цифры
     --serif    Cormorant Garamond — основной текст + курсивные акценты
     --script   Pinyon Script      — ТОЛЬКО латиница (точечно)
   ========================================================= */

:root{
  --paper:    #e7e3db;   /* тёплый светло-серый фон */
  --paper-2:  #ddd7cc;   /* чуть глубже — карточки, конверт */
  --paper-3:  #efeae0;   /* светлее бумаги — письмо, paper-card */
  --ink:      #17120f;   /* почти чёрный */
  --ink-soft: #4d473f;   /* приглушённый текст */
  --ink-mute: #8b8378;   /* подписи */
  --wine:     #861c28;   /* сложный приглушённый красный */
  --wine-deep:#6e1620;
  --thread:   #A80306;   /* декоративная нить — как в референсе Сайтмейкер */
  --thread-alt:#B30E0B;
  --cream:    #ece5d8;   /* текст на вине */
  --cream-mute: rgba(236,229,216,.62);

  --hair:       rgba(23,18,15,.18);
  --hair-strong:rgba(23,18,15,.42);
  --hair-light: rgba(236,229,216,.30);

  --display:"Playfair Display", "Times New Roman", serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --script:"Pinyon Script", cursive;
  --num:"Lora", Georgia, serif;   /* ровные малоконтрастные цифры — даты, счётчик */

  /* единая весовая сетка — без экстремально тонких на кириллице */
  --w-body:    400;   /* основной текст */
  --w-med:     500;   /* подзаголовки, цифры */
  --w-display: 600;   /* заголовки */
  --w-bold:    700;   /* самый крупный display-акцент */

  --pad: clamp(22px, 6vw, 56px);
  --maxw: 680px;

  /* движение: мягкий выход + «оседание» */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
}
/* Плавность скролла обеспечивает JS (Lenis) либо переходы по якорям в app.js.
   CSS scroll-behavior:smooth НЕ включаем — вместе с Lenis он даёт рваный скролл. */
html{ scroll-behavior:auto; }
html.scroll-locked,
html.scroll-locked body{
  overflow:hidden;
  overscroll-behavior:none;
}
html.scroll-locked #intro,
html.scroll-locked #intro *{
  touch-action:manipulation;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, не hidden: hidden заставляет body стать вторым скролл-контейнером и
     конфликтует с Lenis (рваный скролл). clip обрезает по X без скролла. */
  overflow-x:clip;
  overscroll-behavior-y:none;
  padding-left:env(safe-area-inset-left, 0);
  padding-right:env(safe-area-inset-right, 0);
}

/* Без JS / до инициализации — контент виден, интро скрыто */
html:not(.js) .reveal,
html:not(.js) .stagger > *{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}
html:not(.js) #intro,
html:not(.js) #letter-scene{ display:none !important; }
html:not(.js) main.ed{ display:block !important; }

/* ====================== ФОНОВЫЕ ЛИСТЬЯ ====================== */
.ambient-leaves{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
  opacity:0;
  transition:opacity 1.2s var(--ease-out);
}
.ambient-leaves.is-active{ opacity:0.62; }
.ambient-leaves.is-paused .ambient-leaf{
  animation-play-state:paused !important;
}

.ambient-leaf{
  position:absolute;
  top:0;
  left:var(--x);
  width:var(--leaf-w);
  color:rgba(168,22,27,0.22);
  transform:translate3d(0,-12vh,0);
  animation:leafDrift var(--dur) var(--delay) linear infinite;
  will-change:transform;
}
.ambient-leaf svg{
  display:block;
  width:100%;
  height:auto;
  filter:blur(.15px);
}

@keyframes leafDrift{
  0%{
    transform:translate3d(0,-12vh,0) rotate(var(--rot-start)) scale(.82);
    opacity:0;
  }
  6%{ opacity:1; }
  22%{
    transform:translate3d(calc(var(--sway) * -0.9), 22vh, 0)
               rotate(calc(var(--rot-start) + 48deg)) scale(.96);
  }
  48%{
    transform:translate3d(var(--sway), 48vh, 0)
               rotate(calc(var(--rot-start) + 112deg)) scale(1);
  }
  74%{
    transform:translate3d(calc(var(--sway) * -0.45), 74vh, 0)
               rotate(calc(var(--rot-start) + 168deg)) scale(.94);
  }
  94%{ opacity:.55; }
  100%{
    transform:translate3d(calc(var(--sway) * 0.25), 112vh, 0)
               rotate(var(--rot-end)) scale(.88);
    opacity:0;
  }
}

/* едва заметная бумажная фактура поверх всей сцены (film grain) */
body::after{
  content:"";
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{display:block;max-width:100%;}
::selection{background:var(--wine);color:var(--cream);}

button{font-family:inherit;}
a{color:inherit;text-decoration:none;}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:2000;
  padding:12px 18px;
  background:var(--wine);
  color:var(--cream);
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.skip-link:focus{
  left:calc(12px + env(safe-area-inset-left, 0));
  top:calc(12px + env(safe-area-inset-top, 0));
  width:auto;
  height:auto;
  overflow:visible;
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* ч/б фотографии — ключевой приём */
image-slot.bw::part(image){
  filter:grayscale(1) contrast(1.04) brightness(.99);
}
image-slot{
  border-radius:0 !important;
  transform:translate3d(0, var(--parallax-y, 0), 0);
}

/* ====================== ОБЩИЕ ТИПО-КЛАССЫ ====================== */
.display{ font-family:var(--display); font-weight:var(--w-display); font-optical-sizing:auto; }

/* ровные (lining) и моноширинные (tabular) цифры — даты, счётчик, календарь.
   Playfair по умолчанию даёт «старостильные» цифры разной высоты (6 выше 5
   и т.п.); это приводит их к единой высоте и фиксированной ширине. */
.big-date, .count-num, .cal-grid, .hero-date, .tl-time, .venue-addr, .env-letter-sub, .figure-tag{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
}

.kicker{
  display:inline-block;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:var(--w-med);
}

.sec-index{
  display:block;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--wine);
  font-weight:var(--w-display);
  margin-bottom:26px;
}
.sec-index.light{ color:var(--cream); opacity:.8; }

/* «Рукописные» акценты на русском — теперь курсив серифа (кириллица-safe).
   Pinyon Script остаётся только там, где текст латиницей (.hero-script и т.п.). */
.script-accent{
  font-family:var(--display);
  font-style:italic;
  font-weight:var(--w-med);
  color:var(--wine);
  font-size:clamp(40px, 10vw, 64px);
  line-height:1.02;
  letter-spacing:.005em;
  margin:0;
}
.script-accent.small{ font-size:clamp(30px,7.5vw,42px); }
.band--wine .script-accent{ color:var(--cream); }

.word-big{
  font-family:var(--display);
  font-weight:var(--w-display);
  font-size:clamp(40px, 12vw, 88px);
  line-height:.96;
  letter-spacing:-.005em;
  margin:0;
  text-transform:uppercase;
}

.lead{
  font-family:var(--serif);
  font-size:clamp(18px,4.6vw,21px);
  line-height:1.62;
  color:var(--ink-soft);
  font-weight:var(--w-body);
  max-width:34ch;
  margin:22px 0 0;
}
.center .lead{ margin-left:auto; margin-right:auto; }
.lead.light{ color:var(--cream); }

.mute{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-mute);
  margin:0;
}
.mute.light{ color:var(--cream-mute); }

/* ====================== REVEAL ====================== */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out), filter 1.05s var(--ease-out);
  filter:blur(4px);
}
.reveal.in{ opacity:1; transform:none; filter:none; }
.d1{ transition-delay:.12s; } .d2{ transition-delay:.26s; }
.d3{ transition-delay:.40s; } .d4{ transition-delay:.54s; }

/* ====================== ЛЕЙАУТ-СЕКЦИИ ====================== */
.ed{ width:100%; position:relative; z-index:1; }
.ed > section, .ed > footer{ position:relative; z-index:1; }
.ed > section > *, .ed > footer > *{ position:relative; z-index:1; }

/* красная нить — цвет и поведение как в референсе */
.flow-line{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:visible;
}
.flow-line path{
  stroke:var(--thread);
  opacity:.48;
  fill:none;
}

.band{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,16vw,120px) var(--pad);
}
.band.center{ text-align:center; }

/* полноширинные винные сцены — с мягким заходом/выходом, чтобы не обрывались */
.band--wine{
  max-width:none;
  background:var(--wine);
  color:var(--cream);
  position:relative;
}
.band--wine::before,
.band--wine::after{
  content:""; position:absolute; left:0; right:0; height:64px; pointer-events:none;
}
.band--wine::before{ top:0;    background:linear-gradient(var(--wine-deep), transparent); opacity:.5; }
.band--wine::after{  bottom:0; background:linear-gradient(transparent, var(--wine-deep)); opacity:.5; }
.band--wine > *{ position:relative; max-width:var(--maxw); margin-left:auto; margin-right:auto; }

/* ====================== INTRO / КОНВЕРТ ====================== */
#intro{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:rgba(231,227,219,0.52);
  transition:opacity 1s var(--ease-out), visibility 1s, background-color 1s;
}
@supports (backdrop-filter: blur(3px)){
  #intro{
    background:rgba(231,227,219,0.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
}
#intro.gone{ opacity:0; visibility:hidden; pointer-events:none; }

.env-wrap{
  display:flex; flex-direction:column; align-items:center; gap:30px; padding:24px;
  position:relative; z-index:1;
}

.env{
  position:relative;
  width:min(82vw,360px);
  height:min(53vw,232px);
  background:transparent;
  border:0; padding:0; cursor:pointer;
  perspective:1700px;
  transform-style:preserve-3d;
  animation:envIn 1.1s var(--ease-out) both;
  touch-action:manipulation;
}
.env:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:6px;
}
@keyframes envIn{
  from{ opacity:0; transform:translateY(16px) scale(.94) rotate(-1.5deg); }
  to{   opacity:1; transform:none; }
}

/* тень-подложка под конвертом, «дышит» при открытии */
.env::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-8%; height:26px;
  background:radial-gradient(ellipse at center, rgba(23,18,15,.20), transparent 72%);
  filter:blur(7px);
  transition:transform 1.2s var(--ease-out), opacity 1.2s var(--ease-out);
  z-index:0;
}
/* лёгкое «дыхание» тени, пока конверт ждёт клика — трогает только blur,
   не transform/opacity, чтобы не спорить с hover-переходом ниже */
@keyframes envShadowBreath{ 0%,100%{ filter:blur(7px); } 50%{ filter:blur(9.5px); } }
.env:not(.opening)::after{ animation:envShadowBreath 4.2s ease-in-out infinite; }
@media (hover:hover) and (pointer:fine){
  .env:not(.opening):hover .env-seal{ transform:translate(-50%,-50%) scale(1.045); }
  .env:not(.opening):hover .env-flap{ filter:brightness(1.012); }
  .env:not(.opening):hover::after{ transform:translateY(2px) scaleX(1.04); opacity:.78; }
}

.env-letter{
  position:absolute; left:9%; right:9%; top:15%; bottom:15%;
  background:linear-gradient(168deg, #f4efe5 0%, #ece6da 100%);
  border:1px solid var(--hair-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; z-index:1;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 1px 2px rgba(23,18,15,.05);
  /* письмо выезжает ПОСЛЕ того, как клапан полностью раскрылся (z-index не меняем:
     письмо остаётся ЗА лицевой стенкой конверта, поэтому нижняя часть прячется
     в кармане, а наружу выходит только верх — как настоящее письмо из конверта) */
  transition:transform 1s var(--ease-out) .8s, box-shadow 1s var(--ease-out) .8s;
}
.env-letter::before{
  content:""; position:absolute; inset:6px;
  border:1px solid var(--hair); pointer-events:none;
}
.env-mono{ font-family:var(--display); font-weight:var(--w-display); font-size:18px; letter-spacing:.22em; }
.env-mono i{ color:var(--wine); font-style:italic; }
/* имена в конверте — кириллица → курсив серифа (Pinyon тут не работает) */
.env-letter-script{ font-family:var(--display); font-style:italic; font-weight:var(--w-med); color:var(--wine); font-size:30px; line-height:1; }
.env-letter-sub{ font-family:var(--serif); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-soft); }

.env-body{
  position:absolute; inset:0;
  background:linear-gradient(158deg, #e2dcd0 0%, #d9d2c5 58%, #d3ccbe 100%);
  border:1px solid var(--hair-strong);
  clip-path:polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  z-index:3;
}
/* диагональные швы конверта — тонкие тени от V-сгиба */
.env-body::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(23,18,15,.10) 50%, transparent calc(50% + .6px)) left  / 50% 100% no-repeat,
    linear-gradient(to bottom left,  transparent calc(50% - .6px), rgba(23,18,15,.10) 50%, transparent calc(50% + .6px)) right / 50% 100% no-repeat;
  pointer-events:none;
}
.env-flap{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #eae4d8 0%, #ddd6c9 100%);
  border:1px solid var(--hair-strong);
  clip-path:polygon(0 0, 100% 0, 50% 58%);
  transform-origin:top center;
  /* клапан открывается во второй фазе */
  transition:transform .95s var(--ease-out) .2s, filter .95s var(--ease-out) .2s;
  z-index:4;
  backface-visibility:hidden;
  box-shadow:0 1px 1px rgba(23,18,15,.04);
}
/* печатные имена на лицевой стороне конверта */
.env-front{
  position:absolute; left:0; right:0; bottom:13%; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none;
  transition:opacity .45s var(--ease);
}
.env-front-names{
  font-family:var(--display); font-style:italic; font-weight:var(--w-med);
  font-size:21px; line-height:1; color:var(--wine);
}
.env-front-line{
  font-family:var(--serif); font-size:9px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ink-mute);
}
.env-seal{
  position:absolute; left:50%; top:58%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #a8323d 0%, var(--wine) 46%, var(--wine-deep) 100%);
  display:grid; place-items:center;
  z-index:5;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.18),
    inset 0 -3px 7px rgba(40,6,10,.34),
    0 4px 11px rgba(110,22,32,.34);
  /* печать снимается первой */
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.env-seal::before{
  content:""; position:absolute; inset:5px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
}
/* сердце нарисовано SVG-path'ом (как .cal-heart), а не символом эмодзи —
   на iOS системный эмодзи-шрифт игнорирует CSS color и красит его в свой
   собственный градиент, разный на разных платформах */
.env-seal svg{ width:19px; height:auto; fill:#f1dccb; filter:drop-shadow(0 1px 1px rgba(40,6,10,.4)); }

/* ----- сцена открытия: печать трескается и снимается → клапан раскрывается → письмо выходит наружу ----- */
.env.opening .env-front{ opacity:0; }
/* печать сперва слегка «раздувается» (трещит), затем улетает вверх — вместо
   плоского линейного перехода это даёт более тактильное, «настоящее» ощущение */
@keyframes sealCrack{
  0%{   transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1; }
  24%{  transform:translate(-50%,-50%) scale(1.14) rotate(-4deg); opacity:1; }
  100%{ transform:translate(-50%,-150%) scale(.46) rotate(-9deg); opacity:0; }
}
.env.opening .env-seal{ animation:sealCrack .62s var(--ease-out) both; }
.env.opening .env-flap{ transform:rotateX(-184deg); filter:brightness(.88); }
.env.opening .env-letter{ transform:translateY(-122%) scale(1.04) rotate(-1.1deg); box-shadow:0 30px 56px rgba(23,18,15,.22); }
.env.opening::after{ transform:translateY(6px) scaleX(1.3); opacity:.42; animation:none; }

.env-hint{
  font-family:var(--serif);
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-soft);
  animation:hintPulse 2.4s ease-in-out infinite;
}
html.music-loading .env-hint{
  animation:musicPulse 1.1s ease-in-out infinite;
  color:var(--wine);
}
@keyframes musicPulse{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.03); }
}
@keyframes hintPulse{ 0%,100%{opacity:.45;} 50%{opacity:.95;} }

/* ====================== ПИСЬМО ВО ВЕСЬ ЭКРАН ====================== */
#letter-scene{
  position:fixed; inset:0; z-index:1001;
  display:grid; place-items:center;
  padding:clamp(20px,6vw,56px);
  padding-top:calc(clamp(20px,6vw,56px) + env(safe-area-inset-top, 0));
  padding-bottom:calc(clamp(20px,6vw,56px) + env(safe-area-inset-bottom, 0));
  background:rgba(231,227,219,0.55);
  opacity:0; visibility:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y;
  transition:opacity .6s var(--ease-out), visibility .6s, transform .9s var(--ease-out);
}
@supports (backdrop-filter: blur(3px)){
  #letter-scene{
    background:rgba(231,227,219,0.45);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
}
#letter-scene.show{ opacity:1; visibility:visible; }
#letter-scene.leaving{ opacity:0; transform:translateY(-9%); }

.paper-sheet{
  position:relative;
  width:min(92vw,560px);
  max-height:86vh; overflow:auto;
  background:var(--paper-3);
  border:1px solid var(--hair);
  box-shadow:0 30px 80px rgba(23,18,15,.18);
  padding:clamp(38px,8vw,66px) clamp(26px,7vw,56px);
  text-align:center;
  /* мягкий заход листа (раньше — GSAP Flip-морф; теперь чистый CSS + печать текста) */
  opacity:0; transform:translateY(26px) scale(.972);
  transition:opacity .65s var(--ease-out), transform .9s var(--ease-out);
}
#letter-scene.show .paper-sheet{ opacity:1; transform:none; }
#letter-scene.leaving .paper-sheet{ transition:opacity .5s var(--ease-out), transform .6s var(--ease-out); transform:translateY(-14px) scale(.99); }
.paper-sheet::before{ content:""; position:absolute; inset:10px; border:1px solid var(--hair); pointer-events:none; }
.ls-kicker{
  display:block; font-family:var(--serif); font-size:12px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--wine); margin-bottom:22px;
}
.ls-title{
  font-family:var(--display); font-weight:var(--w-display);
  font-size:clamp(30px,8vw,52px); line-height:1.06; letter-spacing:-.005em;
  margin:0 0 24px; color:var(--ink);
}
.ls-body{
  font-family:var(--serif); font-size:clamp(17px,4.4vw,20px); line-height:1.85;
  color:var(--ink-soft); max-width:40ch; margin:0 auto;
}
.ls-body p{ margin:0 0 14px; }
.ls-sign{
  display:block; font-family:var(--display); font-style:italic; font-weight:var(--w-med);
  font-size:clamp(26px,6.5vw,38px); color:var(--wine); margin-top:28px;
}
.ls-continue{
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:clamp(28px,7vw,46px);
  background:none; border:0; cursor:pointer;
  font-family:var(--serif); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .3s, gap .3s, opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
/* появляется только когда письмо «дописано» */
.ls-continue.tw-hidden{ opacity:0; transform:translateY(8px); pointer-events:none; }

/* ----- эффект «письмо пишется в реальном времени» ----- */
.tw-c{ opacity:0; position:relative; }
.tw-c.on{ opacity:1; }
/* Курсор — абсолютно спозиционированный псевдоэлемент ПОСЛЕДНЕГО показанного
   символа, а не отдельный элемент в потоке текста. Он вынут из flow (position:
   absolute), поэтому никак не участвует в переносе строк — раньше отдельный
   <span> курсора (даже нулевой ширины) был атомарной inline-рамкой, и на
   границе переноса строки браузер иногда переносил его вместе со следующим
   символом раньше времени, из-за чего строка визуально «дёргалась». */
.tw-c.tw-cursor::after{
  content:""; position:absolute; left:100%; bottom:.02em;
  width:2px; height:.92em; background:var(--wine); border-radius:1px;
  animation:twBlink .82s steps(1,end) infinite;
}
@keyframes twBlink{ 0%,50%{opacity:1;} 51%,100%{opacity:0;} }
@media (prefers-reduced-motion: reduce){
  .tw-c{ opacity:1; }
  .tw-c.tw-cursor::after{ display:none; }
}
.ls-continue svg{ color:var(--wine); animation:cueUp 1.8s ease-in-out infinite; }
.ls-continue:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:4px;
}
@media (hover:hover) and (pointer:fine){
  .ls-continue:hover{ color:var(--wine); gap:12px; }
}
@keyframes cueUp{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }

/* ====================== МУЗЫКА ====================== */
.music-toggle{
  position:fixed;
  top:calc(18px + env(safe-area-inset-top, 0));
  right:calc(18px + env(safe-area-inset-right, 0));
  z-index:900;
  width:42px; height:42px;
  background:rgba(231,227,219,.92);
  border:1px solid var(--hair);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .3s, transform .3s var(--ease-out);
}
@supports (backdrop-filter: blur(8px)){
  .music-toggle{
    background:rgba(231,227,219,.7);
    backdrop-filter:blur(8px);
  }
}
.music-toggle[hidden]{ display:none !important; }
.music-toggle:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:2px;
}
.music-toggle:hover{ border-color:var(--wine); transform:translateY(-1px); }
.music-toggle .bars{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.music-toggle .bars i{ width:2px; height:5px; background:var(--wine); transition:height .2s; }
.music-toggle.playing .bars i{ animation:eq .9s ease-in-out infinite; }
.music-toggle.playing .bars i:nth-child(2){ animation-delay:.15s; }
.music-toggle.playing .bars i:nth-child(3){ animation-delay:.3s; }
.music-toggle.playing .bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{height:4px;} 50%{height:15px;} }

/* ====================== HERO ====================== */
.hero{
  min-height:100vh;
  min-height:100svh;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(40px,9vh,72px) var(--pad) clamp(28px,6vh,48px);
  display:flex; flex-direction:column;
}
.hero-head{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.hero-script{ font-family:var(--script); color:var(--wine); font-size:clamp(30px,9vw,46px); line-height:1; }

.hero-names{
  position:relative; z-index:3;
  text-align:center;
  font-size:clamp(58px, 19vw, 130px);
  line-height:.9;
  letter-spacing:-.004em;
  /* имя стоит с воздухом НАД фото — без наезда на лица пары */
  margin:clamp(14px,3vh,26px) 0 clamp(16px,3.4vw,32px);
  font-weight:var(--w-med);
  text-transform:uppercase;
}
.hero-names .amp{
  display:block;
  font-style:italic;
  font-weight:var(--w-body);
  color:var(--wine);
  font-size:.42em;
  letter-spacing:0;
  text-transform:none;
  margin:.02em 0;
}

.hero-figure{ position:relative; margin:0; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.hero-figure image-slot{ display:block; width:100%; flex:1 1 auto; min-height:clamp(280px,46vh,520px); }
.figure-tag{
  font-family:var(--serif); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:12px; text-align:right;
}
.band--wine .figure-tag{ color:var(--cream-mute); }

/* hero: дата + место — единая подпись слева снизу, поверх кинематографичного
   затемнения. Стопкой (дата над местом) — никогда не сталкиваются и читаются
   на любом кадре. */
.hero-figure::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:clamp(116px,30vw,200px);
  background:linear-gradient(rgba(23,18,15,0), rgba(23,18,15,.5));
  z-index:2; pointer-events:none;
}
.hero-figure .hero-date{
  position:absolute; left:clamp(14px,4vw,20px); bottom:clamp(36px,9.4vw,48px); z-index:3;
  font-family:var(--num); font-weight:var(--w-med);
  font-size:clamp(19px,5vw,26px); letter-spacing:.14em; color:var(--cream);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.hero-figure .figure-tag{
  position:absolute; left:clamp(14px,4vw,20px); bottom:clamp(14px,3.6vw,20px); right:auto;
  margin:0; z-index:3; text-align:left;
  color:var(--cream-mute); text-shadow:0 1px 10px rgba(0,0,0,.5);
}

.hero-foot{
  display:flex; align-items:flex-end; justify-content:center;
  margin-top:clamp(20px,4.5vh,30px);
}
.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:0; padding:8px 4px; cursor:pointer;
  font-family:var(--serif); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
  transition:color .3s, gap .3s;
}
.scroll-cue:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:4px;
}
@media (hover:hover) and (pointer:fine){
  .scroll-cue:hover{ color:var(--wine); gap:12px; }
}
.scroll-cue svg{ color:var(--wine); animation:cueMove 1.8s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }

/* ====================== ПИСЬМО / ОБРАЩЕНИЕ ====================== */
.letter{
  font-family:var(--serif);
  font-size:clamp(17px,4.4vw,19px);
  line-height:1.92;
  color:var(--ink-soft);
  margin-top:38px;
  max-width:40ch;
  letter-spacing:.01em;
}
.band.center .letter{ margin-left:auto; margin-right:auto; }
.letter p{ margin:0 0 16px; }
.letter.light{ color:var(--cream); }
.letter-sign{ color:var(--wine); margin-top:26px; font-style:italic; }
.band--wine .letter-sign{ color:var(--cream); }

/* ====================== ДАТА / КАЛЕНДАРЬ / СЧЁТЧИК ====================== */
.big-date{
  font-family:var(--num);
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,3.4vw,26px);
  font-size:clamp(44px,14vw,88px);
  line-height:1;
  letter-spacing:.01em;
  margin:18px 0 6px;
  font-weight:var(--w-med);
  font-variant-numeric:lining-nums tabular-nums;
}
/* строгий тонкий разделитель вместо диагональных слэшей */
.bd-sep{ width:1px; height:.6em; background:var(--wine); opacity:.5; display:inline-block; align-self:center; }

/* календарь как карточка-бумага */
.cal{
  max-width:340px; margin:40px auto 0;
  background:var(--paper-3);
  border:1px solid var(--hair);
  padding:26px 24px;
  box-shadow:0 12px 30px rgba(23,18,15,.05);
}
.cal-month{
  font-family:var(--serif); font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:18px;
}
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:10px 4px;
  font-family:var(--num); font-size:15px; font-weight:var(--w-body);
}
.cal-grid .wd{ font-family:var(--serif); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.cal-grid span{ display:grid; place-items:center; height:26px; }
.day-on{ position:relative; color:var(--wine); font-weight:var(--w-bold); }
.cal-heart{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46px; height:42px; fill:none; stroke:var(--wine); stroke-width:3;
  opacity:.5; pointer-events:none;
  animation:heartBeat 3.4s ease-in-out infinite;
}
@keyframes heartBeat{ 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5;} 50%{transform:translate(-50%,-50%) scale(1.12);opacity:.75;} }

.count{
  display:flex; justify-content:center; align-items:flex-start;
  flex-wrap:wrap;
  gap:0;
  row-gap:12px;
  margin-top:26px;
}
.count-cell{
  flex:1 1 64px; min-width:64px; max-width:96px;
  padding:0 clamp(6px,2.5vw,18px);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border-right:1px solid var(--hair);
}
.count-cell:last-child{ border-right:0; }
.count-num{
  font-family:var(--num); font-weight:var(--w-med); font-size:clamp(32px,9vw,46px);
  line-height:1; color:var(--ink);
}
.count-lbl{ font-family:var(--serif); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute); }
.count-cell.bump .count-num{ animation:bump .55s var(--ease); }
@keyframes bump{ 0%{transform:translateY(-7px);opacity:.3;} 100%{transform:none;opacity:1;} }

.script-accent.small{ margin-top:52px; }

/* ====================== ПРОГРАММА / ТАЙМЛАЙН ====================== */
.band--prog{ position:relative; }
.prog-sub{ display:block; margin:6px 0 4px; }

.timeline{
  position:relative;
  margin-top:38px;
  padding-left:30px;
  display:flex; flex-direction:column; gap:clamp(28px,6vw,38px);
}
/* вертикальная ось «рисуется» сверху вниз, когда блок входит в кадр */
.timeline::before{
  content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:1px;
  background:var(--wine);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.3s var(--ease-out);
}
.timeline.in::before{ transform:scaleY(1); }

.tl-item{ position:relative; display:flex; align-items:baseline; gap:18px; transition:transform .4s var(--ease-out); }
.tl-item::before{
  content:""; position:absolute; left:-34px; top:.5em;
  width:9px; height:9px; background:var(--paper); border:1px solid var(--wine);
  transform:rotate(45deg);
  transition:transform .45s var(--ease-out), background .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .tl-item:hover{ transform:translateX(5px); }
  .tl-item:hover::before{ transform:rotate(45deg) scale(1.45); background:var(--wine); box-shadow:0 0 0 5px rgba(134,28,40,.12); }
}
.tl-time{ font-family:var(--num); font-weight:var(--w-med); font-size:clamp(24px,6.4vw,32px); color:var(--ink); min-width:92px; }
.tl-desc{ font-family:var(--serif); font-size:clamp(16px,4.4vw,19px); color:var(--ink-soft); letter-spacing:.02em; }

/* ====================== МЕСТО ====================== */
.loc-head{ display:flex; flex-direction:column; gap:8px; }
.loc-head .word-big{ color:var(--ink); }
.loc-ru{ font-family:var(--serif); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); }

.venue-figure{ margin:34px 0 0; }
.venue-figure image-slot{ display:block; width:100%; height:clamp(280px,60vw,420px); }

.venue-info{ margin-top:26px; }
.venue-name{ margin:0; }
.venue-addr{ font-family:var(--display); font-weight:var(--w-med); font-size:clamp(20px,5.4vw,26px); margin:10px 0 4px; }
.venue-note{ font-family:var(--serif); font-size:14px; letter-spacing:.04em; color:var(--ink-mute); margin:0; }

.venue-actions{ display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:26px; }

/* editorial-ссылка вместо «кнопки UI» */
.link-act{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:8px 0; cursor:pointer;
  font-family:var(--serif); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  transition:color .3s, border-color .3s, gap .3s;
}
.link-act svg{ color:var(--wine); transition:transform .3s var(--ease); }
.link-act:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .link-act:hover{ color:var(--wine); border-color:var(--wine); }
  .link-act:hover svg{ transform:translateX(5px); }
}

/* ====================== ДРЕСС-КОД ====================== */
.swatches{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:0; margin-top:36px; margin-bottom:16px; }
.swatch{
  flex:1 1 0; min-width:54px; position:relative;
  transition:transform .4s var(--ease-out), z-index 0s;
}
/* цветная плашка — отдельным блоком, подпись остаётся в потоке под ней,
   поэтому больше не наезжает на следующий текст (было: i позиционировался
   absolute ниже .swatch, вылезая за пределы контейнера .swatches) */
.swatch::before{
  content:""; display:block; height:78px;
  background:var(--c);
  outline:1px solid var(--hair);
}
@media (hover:hover) and (pointer:fine){
  .swatch:hover{ transform:translateY(-6px); z-index:2; }
}
.swatch i{
  display:block; margin-top:9px;
  font-family:var(--serif); font-style:normal; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  text-align:center; color:var(--ink-mute);
}

.looks{ margin-top:64px; }
.look-cap{
  font-family:var(--serif); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--wine); margin:0 0 16px;
}
.look-cap + .look-cap{ margin-top:0; }
.looks .look-row + .look-cap{ margin-top:34px; }
.look-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.look-row image-slot{ display:block; width:100%; height:clamp(200px,54vw,300px); }

.looks + .mute{ margin-top:28px; }

/* ====================== ПОЖЕЛАНИЯ / ФОТО ====================== */
.polas{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; }
.pola{ margin:0; transition:transform .45s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .pola:hover{ transform:translateY(-5px); }
}
.pola image-slot{ display:block; width:100%; height:clamp(200px,52vw,280px); }
.pola figcaption{
  font-family:var(--script); font-size:24px; color:var(--cream); margin-top:8px; text-align:center;
}

/* ====================== RSVP ФОРМА ====================== */
.form{ max-width:420px; margin:40px auto 0; text-align:left; }
.field{ margin-bottom:32px; }
.field label{
  display:block; font-family:var(--serif); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:12px;
}
.field input[type=text],
.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair-strong);
  padding:10px 0; font-family:var(--serif); font-size:18px; color:var(--ink);
  border-radius:0; outline:none; transition:border-color .3s;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-mute); }
.field input[type=text]:focus,
.field textarea:focus{ border-color:var(--wine); }
.field textarea{ resize:vertical; min-height:64px; line-height:1.5; }
/* чуть крупнее и плотнее обычного поля — комментарий читают в первую очередь */
#rsvp-comment{ font-size:21px; font-weight:var(--w-med); }
.field input.invalid,
.field textarea.invalid{ border-color:var(--wine); }

.err{ display:none; margin-top:8px; font-family:var(--serif); font-size:12px; letter-spacing:.06em; color:var(--wine); }
.err.show{ display:block; }

/* динамические поля доп. гостей — появляются под "Ваше имя и фамилия" по
   степпену "количество персон" (гость 1 — уже то самое поле), ранее
   введённые значения сохраняются. Пустой контейнер без детей не даёт
   отступа, поэтому при guestCount=1 тут ничего не занимает места. */
.guest-name-field{ margin-bottom:32px; }
.guest-name-field label{
  display:block; font-family:var(--serif); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:8px;
}

.qty{ display:inline-flex; align-items:stretch; border:1px solid var(--hair-strong); }
.qty button{
  width:46px; background:transparent; border:0; cursor:pointer;
  font-family:var(--display); font-size:22px; color:var(--ink); line-height:1;
  transition:color .25s, transform .12s var(--ease-out);
}
.qty button:hover{ color:var(--wine); }
.qty button:active{ transform:scale(.82); color:var(--wine); }
.qty input{
  width:58px; text-align:center; border:0; border-left:1px solid var(--hair-strong); border-right:1px solid var(--hair-strong);
  background:transparent; font-family:var(--display); font-size:20px; color:var(--ink);
  -moz-appearance:textfield; outline:none;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.choice{ display:flex; flex-direction:column; gap:14px; }
.choice label{
  display:flex; align-items:center; gap:12px; cursor:pointer; margin:0;
  font-family:var(--serif); font-size:17px; letter-spacing:.02em; text-transform:none; color:var(--ink-soft);
  transition:color .25s;
}
.choice label:hover{ color:var(--ink); }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice .dot{ width:13px; height:13px; border:1px solid var(--hair-strong); flex:0 0 auto; transition:all .2s; }
.choice input:checked + .dot{ background:var(--wine); border-color:var(--wine); box-shadow:inset 0 0 0 3px var(--paper); animation:dotPop .34s var(--ease-out); }
@keyframes dotPop{ 0%{transform:scale(.5);} 58%{transform:scale(1.2);} 100%{transform:scale(1);} }
.choice input:focus-visible + .dot{ outline:2px solid var(--wine); outline-offset:2px; }

.btn-ed{
  display:inline-block; width:100%; margin-top:8px;
  background:var(--wine); color:var(--cream); border:1px solid var(--wine);
  padding:18px 24px; cursor:pointer; border-radius:0;
  font-family:var(--serif); font-size:14px; letter-spacing:.28em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), transform .25s var(--ease-out);
}
.btn-ed:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .btn-ed:hover{ background:transparent; color:var(--wine); }
}
.btn-ed:active{ transform:translateY(1px); }
.btn-ed:disabled{ opacity:.6; cursor:default; }

.form-status{ margin-top:16px; font-family:var(--serif); font-size:14px; text-align:center; color:var(--ink-soft); }
.form-status.error{ color:var(--wine); }

.rsvp-success{ display:none; margin-top:30px; }
.rsvp-success.show{ display:block; animation:fadeUp .8s var(--ease-out); }
.success-heart{ transform-origin:center; animation:heartbeat 2.6s var(--ease) .6s infinite; }
.success-heart svg{ width:32px; height:auto; fill:var(--wine); }
@keyframes fadeUp{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }
@keyframes heartbeat{ 0%,16%,100%{transform:scale(1);} 7%{transform:scale(1.15);} 12%{transform:scale(1.03);} }

/* новые микровзаимодействия уважают prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .qty button:active{ transform:none; }
  .choice input:checked + .dot{ animation:none; }
  .success-heart{ animation:none; }
}


/* ====================== FOOTER ====================== */
.footer{
  text-align:center;
  padding:clamp(70px,16vw,120px) var(--pad) clamp(50px,12vw,80px);
  border-top:1px solid var(--hair);
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.footer .heart svg{ width:22px; height:auto; fill:var(--wine); }
.footer-names{
  font-size:clamp(30px,9vw,48px); letter-spacing:.04em; text-transform:uppercase;
  margin-top:6px;
}

/* ====================== ДЕКСТОП ====================== */
@media (min-width:760px){
  .swatch::before{ height:96px; }
  .look-row image-slot{ height:340px; }
  .venue-figure image-slot{ height:440px; }
  .pola image-slot{ height:340px; }

  /* hero чуть несимметричнее на десктопе: шапка и имя по левому краю */
  .hero-head{ align-items:flex-start; text-align:left; }
  .hero-names{ text-align:left; }
}

/* ====================== reduce motion ====================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal,
  .stagger > *{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  image-slot{ transform:none !important; --parallax-y:0px !important; }
  .ambient-leaves{ display:none !important; }
  .ambient-leaf{ animation:none !important; will-change:auto; }
  .flow-line path{ stroke-dashoffset:0 !important; opacity:.35; }
  .env{ animation:none !important; }
  .env-letter, .env-flap, .env-seal, .env::after{ transition:none !important; }
  .env-seal, .env::after{ animation:none !important; }
  #letter-scene{ transition:opacity .25s linear !important; }
  .timeline::before{ transform:none !important; }
  .scroll-cue svg, .env-hint, .music-toggle.playing .bars i, .cal-heart, .ls-continue svg{ animation:none !important; }
  html.music-loading .env-hint{ animation:none !important; }
}

/* Узкие экраны */
@media (max-width:420px){
  .swatches{
    flex-wrap:nowrap;
    justify-content:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:10px;
  }
  .swatches::-webkit-scrollbar{ display:none; }
  .swatch{ flex:0 0 54px; min-width:54px; }
  /* плотнее трекинг — длинные подписи («КАРАМЕЛЬ») умещаются под своим цветом */
  .swatch i{ font-size:9px; letter-spacing:.03em; }
  .cal{ padding:20px 16px; }
  .cal-grid{ gap:8px 2px; font-size:14px; }
}