@import url('fonts.css');

/* ============================================================
   Артур и Флора — 11 лет
   Дорога длиною в одиннадцать лет
   ============================================================ */

:root{
  --ink:        #04060c;
  --ink-2:      #080c16;
  --ink-3:      #0d1220;

  --gold:       #e9bd77;
  --gold-hi:    #f7dcae;
  --gold-deep:  #b8873f;

  --rose:       #d07a86;
  --rose-deep:  #8e4a55;

  --paper:      #f4efe6;
  --muted:      rgba(244,239,230,.58);
  --faint:      rgba(244,239,230,.30);
  --hair:       rgba(244,239,230,.14);

  --serif: 'Cormorant', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --gut: clamp(1.5rem, 5vw, 5rem);
  --measure: 34rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .55vw + .88rem, 1.15rem);
  line-height:1.78;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; height:100vh; }

::selection{ background:var(--gold-deep); color:var(--ink); }

img,video{ max-width:100%; display:block; }

/* ---------- фоновая 3D-сцена ---------- */

#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  opacity:0;
  transition:opacity 1.6s ease 0.2s;
}
#bg.is-ready{ opacity:1; }

/* мягкая виньетка поверх сцены — сажает 3D в глубину */
.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 32%, rgba(4,6,12,.55) 72%, rgba(4,6,12,.9) 100%);
}

/* тонкая плёнка зерна — убирает «цифровую» стерильность */
.grain{
  position:fixed;
  inset:-50%;
  z-index:2;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-2%,1.5%) }
  40%{ transform:translate(1.5%,-2%) }
  60%{ transform:translate(-1%,-1.5%) }
  80%{ transform:translate(2%,1%) }
}

/* ---------- каркас повествования ---------- */

#story{
  position:relative;
  z-index:3;
}

.chapter{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:14svh var(--gut);
}

.chapter--tall{ min-height:150svh; }
.chapter--center{ justify-content:center; text-align:center; }
.chapter--right{ justify-content:flex-end; }

.inner{
  width:100%;
  max-width:var(--measure);
  position:relative;
}
.chapter--center .inner{ max-width:44rem; }
.chapter--wide .inner{ max-width:62rem; }

/* ---------- типографика ---------- */

.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.6rem;
  opacity:.85;
}
.eyebrow--rose{ color:var(--rose); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0 0 1.6rem;
  color:var(--paper);
}

h1{ font-size:clamp(4rem, 17vw, 13rem); line-height:.9; letter-spacing:-.03em; }
h2{ font-size:clamp(2.4rem, 6.4vw, 5rem); }
h3{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }

.lede{
  font-family:var(--serif);
  font-size:clamp(1.35rem, 2.4vw, 2rem);
  line-height:1.42;
  font-weight:300;
  color:var(--paper);
  margin:0 0 1.4rem;
}

p{ margin:0 0 1.15rem; color:var(--muted); }
p:last-child{ margin-bottom:0; }

p strong{
  color:var(--paper);
  font-weight:400;
}

em{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.12em;
  color:var(--gold-hi);
}

.whisper{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.1rem, 1.9vw, 1.45rem);
  line-height:1.5;
  color:var(--gold);
  opacity:.9;
  margin-top:2.2rem;
}

.rule{
  width:3.5rem;
  height:1px;
  background:var(--gold-deep);
  border:0;
  margin:2.6rem 0;
  opacity:.6;
}
.chapter--center .rule{ margin-inline:auto; }

/* ---------- анимация появления (управляется JS) ---------- */

.rise{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  will-change:opacity, transform, filter;
}

/* ---------- пролог ---------- */

.prologue{
  min-height:100svh;
  justify-content:center;
  text-align:center;
}

.prologue h1{
  background:linear-gradient(178deg, var(--gold-hi) 8%, var(--gold) 42%, var(--gold-deep) 96%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-bottom:.08em;
}

.dates{
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:300;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 3.5rem;
  padding-left:.42em;
}

.names{
  font-family:var(--serif);
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:2.6rem;
  padding-left:.3em;
}

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:5svh;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--faint);
  z-index:4;
}
.scroll-cue span{ padding-left:.3em; }
.scroll-cue i{
  display:block;
  width:1px;
  height:3.2rem;
  background:linear-gradient(var(--gold-deep), transparent);
  animation:cue 2.6s ease-in-out infinite;
  transform-origin:top;
}
@keyframes cue{
  0%,100%{ transform:scaleY(.28); opacity:.35 }
  50%    { transform:scaleY(1);   opacity:1 }
}

/* ---------- глава-выдох: одна фраза на пустом экране ---------- */

.breath{
  min-height:118svh;
  justify-content:center;
  text-align:center;
}
.breath .line{
  font-family:var(--serif);
  font-size:clamp(2.2rem, 7vw, 5.6rem);
  line-height:1.14;
  font-weight:300;
  color:var(--paper);
  margin:0;
  letter-spacing:-.02em;
}
.breath .attrib{
  margin-top:3rem;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- дети ---------- */

.kids{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:clamp(1.5rem, 3.5vw, 3rem);
  margin-top:3.5rem;
}

.kid{
  position:relative;
  padding-top:2.4rem;
  border-top:1px solid var(--hair);
}
.kid::before{
  content:'';
  position:absolute;
  top:-3.5px;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 14px 3px rgba(233,189,119,.55);
}
.kid__name{
  font-family:var(--serif);
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight:300;
  line-height:1;
  margin:0 0 .7rem;
  color:var(--paper);
}
.kid__date{
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:.8;
  margin:0 0 .9rem;
}
.kid__note{
  font-size:.95rem;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}

/* ---------- медиа-слоты (фото/видео появятся сюда) ---------- */

.media{
  position:relative;
  margin:3rem 0 0;
  border-radius:2px;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--hair);
}
.media img,.media video{
  width:100%;
  height:auto;
  display:block;
}
.media--placeholder{
  aspect-ratio:3/2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
}
.media--placeholder::after{
  content:attr(data-hint);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--faint);
  max-width:22rem;
  line-height:2;
}
.media__caption{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--muted);
  margin-top:1rem;
}

/* ---------- песня ---------- */

.player{
  display:inline-flex;
  align-items:center;
  gap:1.2rem;
  margin-top:2.8rem;
  padding:.85rem 1.9rem .85rem .95rem;
  border:1px solid var(--hair);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  color:var(--paper);
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:border-color .5s, background .5s, transform .5s;
}
.player:hover{
  border-color:var(--gold-deep);
  background:rgba(233,189,119,.05);
}
.player__ico{
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  border:1px solid var(--gold-deep);
  display:grid;
  place-items:center;
  flex:none;
  color:var(--gold);
  font-size:.8rem;
}
.player.is-playing .player__ico{
  background:var(--gold);
  color:var(--ink);
  box-shadow:0 0 26px rgba(233,189,119,.4);
}

/* ---------- письмо ---------- */

.letter{
  min-height:auto;
  padding-block:22svh;
}
.letter .inner{ max-width:36rem; }
.letter__body{
  font-family:var(--serif);
  font-size:clamp(1.22rem, 1.9vw, 1.6rem);
  line-height:1.72;
  color:var(--paper);
}
.letter__body p{
  color:rgba(244,239,230,.86);
  margin-bottom:1.5rem;
}
.letter__salute{
  font-family:var(--serif);
  font-size:clamp(2.4rem,6vw,4rem);
  color:var(--gold);
  margin:0 0 2.5rem;
  line-height:1;
}
.letter__sign{
  margin-top:3.5rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  color:var(--gold);
}

/* ---------- финал: мишка ---------- */

.bear{
  min-height:100svh;
  justify-content:center;
  text-align:center;
}
.bear .media{ max-width:26rem; margin-inline:auto; }
.bear .line{
  font-family:var(--serif);
  font-size:clamp(1.8rem, 4.6vw, 3.2rem);
  font-weight:300;
  color:var(--paper);
  margin:2.8rem 0 0;
  line-height:1.2;
}

/* ---------- подвал ---------- */

.end{
  padding:10svh var(--gut) 12svh;
  text-align:center;
  position:relative;
  z-index:3;
}
.end p{
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--faint);
  padding-left:.3em;
}

/* ---------- звук: тумблер в углу ---------- */

.sound{
  position:fixed;
  right:clamp(1rem,2.4vw,2.2rem);
  top:clamp(1rem,2.4vw,2.2rem);
  z-index:20;
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.55rem 1.05rem;
  border:1px solid var(--hair);
  border-radius:999px;
  background:rgba(4,6,12,.5);
  backdrop-filter:blur(10px);
  color:var(--muted);
  font-size:.63rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .4s, border-color .4s;
}
.sound:hover{ color:var(--paper); border-color:var(--gold-deep); }
.sound__bars{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:.8rem;
}
.sound__bars i{
  width:2px;
  height:25%;
  background:var(--gold);
  transition:height .3s;
}
.sound.is-on .sound__bars i{ animation:eq .9s ease-in-out infinite; }
.sound.is-on .sound__bars i:nth-child(2){ animation-delay:.15s }
.sound.is-on .sound__bars i:nth-child(3){ animation-delay:.3s }
.sound.is-on .sound__bars i:nth-child(4){ animation-delay:.45s }
@keyframes eq{
  0%,100%{ height:25% }
  50%    { height:100% }
}

/* ---------- индикатор пути ---------- */

.progress{
  position:fixed;
  left:clamp(1rem,2.4vw,2.2rem);
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  opacity:0;
  transition:opacity .8s;
}
.progress.is-visible{ opacity:1; }
.progress__year{
  font-family:var(--serif);
  font-size:.85rem;
  letter-spacing:.14em;
  color:var(--gold);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  opacity:.75;
}
.progress__track{
  width:1px;
  height:28svh;
  background:var(--hair);
  position:relative;
}
.progress__fill{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0;
  background:linear-gradient(var(--gold), var(--rose));
}

/* ---------- заставка ---------- */

.boot{
  position:fixed;
  inset:0;
  z-index:60;
  background:var(--ink);
  display:grid;
  place-items:center;
  transition:opacity 1.1s ease, visibility 1.1s;
}
.boot.is-gone{ opacity:0; visibility:hidden; }
.boot__dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 30px 6px rgba(233,189,119,.4);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(.6); opacity:.35 }
  50%    { transform:scale(1.5); opacity:1 }
}

/* ---------- мобильные ---------- */

@media (max-width:760px){
  :root{ --measure:100%; }
  .chapter{ padding-block:12svh; }
  .chapter--right{ justify-content:flex-start; }
  .progress{ display:none; }
  .kids{ grid-template-columns:1fr 1fr; gap:1.8rem 1.4rem; }
  .grain{ opacity:.03; }
}

@media (max-width:420px){
  .kids{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .scroll-cue i{ animation:none; }
  .rise{ opacity:1; transform:none; filter:none; }
}

/* ============================================================
   Читаемость поверх светящейся нити.
   Не подложка и не рамка — только глубина за буквами,
   чтобы текст держался, когда за ним проходит свет.
   ============================================================ */

h1, h2, h3,
.breath .line,
.letter__salute,
.letter__sign,
.bear .line,
.lede,
.whisper,
p, .kid__name, .kid__note, .dates, .names, .eyebrow, .attrib{
  text-shadow:
    0 1px 24px rgba(4,6,12,.92),
    0 0 56px rgba(4,6,12,.72);
}

.breath .line,
.bear .line,
h1{
  text-shadow:
    0 1px 30px rgba(4,6,12,.96),
    0 0 70px rgba(4,6,12,.85),
    0 0 120px rgba(4,6,12,.6);
}

/* прологу тень ни к чему — она глушит золотой градиент в «Джан» */
.prologue h1{ text-shadow:none; }

/* ============================================================
   Свадебная галерея.
   Ритм повторяет исходный коллаж — два широких кадра, три
   квадратных, два широких, — но без белых рамок и с воздухом.
   ============================================================ */

.media--gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(.4rem, 1vw, .8rem);
  background:transparent;
  border:0;
  overflow:visible;
}

.media--gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:3px;
  border:1px solid rgba(233,189,119,.14);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  cursor:zoom-in;
  transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s, border-color .6s;
}
.media--gallery img:hover{
  transform:translateY(-4px);
  border-color:rgba(233,189,119,.4);
  box-shadow:0 18px 60px rgba(0,0,0,.6), 0 0 70px rgba(233,189,119,.1);
}

.media--gallery img:nth-child(1),
.media--gallery img:nth-child(2),
.media--gallery img:nth-child(6),
.media--gallery img:nth-child(7){ grid-column:span 3; }

.media--gallery img:nth-child(3),
.media--gallery img:nth-child(4),
.media--gallery img:nth-child(5){ grid-column:span 2; }

@media (max-width:760px){
  .media--gallery{ grid-template-columns:repeat(2, 1fr); }
  .media--gallery img:nth-child(n){ grid-column:span 1; }
  .media--gallery img:nth-child(7){ grid-column:span 2; }
}

/* ============================================================
   Переписка в комментариях — их настоящие слова,
   набранные так, чтобы читались как разговор, а не как чат
   ============================================================ */

.talk{
  margin-top:2.6rem;
  padding-left:1.4rem;
  border-left:1px solid var(--hair);
}

.talk__line{
  font-size:1rem;
  line-height:1.62;
  color:var(--muted);
  margin:0 0 1.05rem;
}
.talk__line:last-child{ margin-bottom:0; }

.talk__line b{
  display:block;
  font-family:var(--sans);
  font-weight:400;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:.72;
  margin-bottom:.3rem;
}
.talk__line--her b{ color:var(--rose); }

/* Вертикальный скриншот — это документ, вклеенный в ночную страницу.
   Он должен читаться как подлинник, но не выжигать глаза: приглушаем,
   даём тёплую рамку и тень, а при наведении отдаём полную яркость. */
.media--tall{
  max-width:24rem;
  border:0;
  background:transparent;
  overflow:visible;
}
.media--tall.media--placeholder{
  aspect-ratio:2/3;
  border:1px solid var(--hair);
  background:var(--ink-2);
}
.media--tall img{
  border-radius:4px;
  border:1px solid rgba(233,189,119,.22);
  box-shadow:
    0 2px 10px rgba(0,0,0,.5),
    0 24px 70px rgba(0,0,0,.55),
    0 0 90px rgba(233,189,119,.07);
  transition:filter .7s ease, box-shadow .7s ease, transform .7s ease;
}
.media--doc img{
  filter:saturate(.72) brightness(.82) contrast(1.04);
  cursor:zoom-in;
}
.media--doc img:hover{
  filter:saturate(.95) brightness(.98);
}
.media--tall img:hover{
  box-shadow:
    0 2px 10px rgba(0,0,0,.5),
    0 30px 90px rgba(0,0,0,.6),
    0 0 120px rgba(233,189,119,.14);
  transform:translateY(-3px);
}

@media (max-width:760px){
  .media--tall{ max-width:100%; }
}

/* длинная цитата дышит иначе, чем короткий выдох в две-три строки */
.breath--quote .inner{ max-width:56rem; }
.breath--quote .line{
  font-size:clamp(1.7rem, 4.2vw, 3.5rem);
  line-height:1.24;
}

/* ============================================================
   Просмотр скриншота во весь экран.
   Живёт прямо в <body>: внутри #story свой слой,
   и оттуда никакой z-index не поднимет картинку над затемнением.
   ============================================================ */

.lightbox{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:start center;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:3vh 3vw;
  background:rgba(4,6,12,.94);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility .45s;
  cursor:zoom-out;
}
.lightbox.is-open{ opacity:1; visibility:visible; }

/* переписка длинная — её можно пролистать целиком, а не подгонять под экран */
.lightbox img{
  width:min(100%, 44rem);
  max-width:100%;
  height:auto;
  border-radius:4px;
  border:1px solid rgba(233,189,119,.25);
  box-shadow:0 30px 100px rgba(0,0,0,.7);
  transform:scale(.96);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.lightbox.is-open img{ transform:scale(1); }

.lightbox__hint{
  position:fixed;
  bottom:2.4vh;
  left:50%;
  transform:translateX(-50%);
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--faint);
  padding-left:.26em;
}

/* на телефоне длинный скриншот листается вертикально */
@media (max-width:760px){
  .lightbox{ padding:0; }
  .lightbox img{ width:100%; border-radius:0; border:0; }
}

/* Запасная ссылка на песню: показывается, только если mp3 не нашёлся.
   Тогда кнопка уступает ей место — плеера нет, но песню всё равно можно послушать. */
.player__alt{
  display:none;
  margin-top:2.4rem;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(233,189,119,.3);
  padding-bottom:.4rem;
  transition:color .4s, border-color .4s;
}
.player__alt:hover{
  color:var(--gold-hi);
  border-color:var(--gold);
}
.player__alt.is-shown{ display:inline-block; }
.player.is-gone{ display:none; }

/* ============================================================
   Видео с предложения. Оно тёмное, ночное и снято на телефон
   в 2015-м — не пытаемся сделать вид, что это кино,
   но даём ему достойную оправу.
   ============================================================ */

.media video{
  width:100%;
  height:auto;
  display:block;
  background:#000;
  border-radius:3px;
}

.media--film{
  max-width:38rem;
  border:1px solid rgba(233,189,119,.18);
  box-shadow:
    0 2px 12px rgba(0,0,0,.5),
    0 26px 80px rgba(0,0,0,.5),
    0 0 100px rgba(233,189,119,.06);
}