@import url('fonts.css');

/* ═══════════════════════════════════════════════════════════════════
   Палитра взята со сливово-фиолетовых референсов: фон не чёрный,
   а глубокий сливовый — на нём розовое свечение выглядит тёплым,
   а не кислотным.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:        #0b0416;
  --plum:      #2a1140;
  --plum-deep: #170a26;
  --ink:       #f8eef7;
  --ink-soft:  rgba(248,238,247,.74);
  --ink-faint: rgba(248,238,247,.46);
  --rose:      #f5a8cf;
  --rose-hot:  #ff5ea3;
  --lilac:     #c79bf2;
  --cream:     #ffeaf5;
  --edge:      rgba(233,178,255,.20);

  --card: linear-gradient(168deg, rgba(58,25,88,.90), rgba(23,10,38,.96));
  --shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 70px rgba(255,94,163,.10);

  --hand: 'Caveat', 'Segoe Script', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.22,.85,.26,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; overflow:hidden; background:var(--bg); }
body{
  font-family:var(--ui); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
button{ font:inherit; color:inherit; }

/* ─── сцена ─────────────────────────────────────────────────────── */
#sky{ position:fixed; inset:0; display:block; z-index:0; touch-action:none; cursor:grab; }
#sky.grabbing{ cursor:grabbing; }

#flash{
  position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0;
  background:radial-gradient(58% 58% at 50% 50%, #fff 0%, #ffb3dc 32%, rgba(255,94,163,0) 72%);
}

/* ─── надстрочная метка «— маленький подарок —» ─────────────────── */
.eyebrow{
  font-family:var(--ui); font-size:10px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase;
  color:rgba(245,168,207,.68);
  display:flex; align-items:center; justify-content:center; gap:.9em;
}
.eyebrow::before, .eyebrow::after{
  content:''; width:26px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,168,207,.5));
}
.eyebrow::after{ background:linear-gradient(90deg, rgba(245,168,207,.5), transparent); }

/* ─── карточка ──────────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}

.btn{
  display:inline-block; border:none; cursor:pointer;
  padding:13px 28px; border-radius:999px;
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:#2a0a1c;
  background:linear-gradient(135deg, #ffd0e6, #f5a8cf 55%, #e07fb8);
  box-shadow:0 12px 30px rgba(255,94,163,.30), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(255,94,163,.42), inset 0 1px 0 rgba(255,255,255,.7); }
.btn:active{ transform:translateY(0) scale(.975); }
.btn.ghost{
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--edge); box-shadow:none;
}
.btn.ghost:hover{ color:var(--ink); border-color:rgba(233,178,255,.4); box-shadow:none; }

/* ═══════════════════════════════════════════════════════════════════
   ЭКРАН 1 — КОРОБКА
   Настоящая коробка из шести граней на CSS 3D: крышка отдельная,
   при открытии она приподнимается, накреняется и улетает.
   ═══════════════════════════════════════════════════════════════════ */
#intro{
  position:fixed; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:34px; padding:28px;
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
/* visibility, а не только pointer-events: у вложенной карточки стоит
   pointer-events:auto, и она продолжала ловить нажатия сквозь весь
   свиток, хотя её уже не видно. */
#intro.gone{
  opacity:0; transform:scale(1.35); pointer-events:none; visibility:hidden;
  transition:opacity 1s var(--ease), transform 1s var(--ease), visibility 0s linear 1s;
}
#intro > .eyebrow, .tap-hint{ transition:opacity .5s ease; }
#intro.opened > .eyebrow, #intro.opened .tap-hint{ opacity:0; }

.gift-stage{
  --w:  min(40vw, 164px);
  --lw: calc(var(--w) * 1.09);
  --sd: calc(var(--w) * 0.155);
  position:relative;
  width:var(--w); height:var(--w);
  /* коробка в перспективе выше своего блока: добавляем воздух,
     иначе подсказка снизу попадает под её нижнюю грань */
  margin:calc(var(--sd) * 2) 0 calc(var(--w) * 0.34);
  perspective:820px; perspective-origin:50% 46%;
}

.gift{
  position:absolute; inset:0;
  transform-style:preserve-3d; cursor:pointer;
  transform:rotateX(-14deg) rotateY(-28deg);
  animation:giftFloat 6.5s ease-in-out infinite;
  transition:transform 1.15s var(--ease);
}
.gift.open{ animation:none; transform:rotateX(-14deg) rotateY(-28deg) translateY(18px) scale(.9); }

/* Грани коробки. Лента не отдельные элементы, а часть заливки грани —
   так она не дерётся с гранями за глубину. */
.gift .f{
  position:absolute; inset:0; border:1px solid rgba(255,214,236,.22);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 8px), rgba(255,248,252,.96) calc(50% - 8px),
                    rgba(255,214,236,.96) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(158deg, #ffa5cd, #e0609f 56%, #a83570);
}
.gift .f.front { transform:translateZ(calc(var(--w) / 2)); }
.gift .f.back  { transform:rotateY(180deg) translateZ(calc(var(--w) / 2)); filter:brightness(.48); }
.gift .f.left  { transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); filter:brightness(.70); }
.gift .f.right { transform:rotateY(90deg)  translateZ(calc(var(--w) / 2)); filter:brightness(.87); }
.gift .f.bottom{ transform:rotateX(-90deg) translateZ(calc(var(--w) / 2)); filter:brightness(.32);
                 background-image:linear-gradient(158deg, #7d2a55, #4a1533); }

/* Крышка — самостоятельная коробочка чуть шире основной, поэтому
   при открытии её можно снять целиком. */
.gift .lid{
  position:absolute;
  width:var(--lw); height:var(--sd);
  left:calc((var(--w) - var(--lw)) / 2);
  top:calc(var(--sd) * -1);
  transform-style:preserve-3d;
  transition:transform 1.15s var(--ease), opacity .9s ease .35s;
}
.gift.open .lid{
  transform:translateY(calc(var(--w) * -0.95)) rotateZ(-17deg) rotateX(24deg);
  opacity:0;
}
.gift .skirt{
  position:absolute; inset:0; border:1px solid rgba(255,214,236,.24);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 8px), rgba(255,248,252,.96) calc(50% - 8px),
                    rgba(255,214,236,.96) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(180deg, #ffc2df, #e878ae);
}
.gift .skirt.front{ transform:translateZ(calc(var(--lw) / 2)); }
.gift .skirt.back { transform:rotateY(180deg) translateZ(calc(var(--lw) / 2)); filter:brightness(.48); }
.gift .skirt.left { transform:rotateY(-90deg) translateZ(calc(var(--lw) / 2)); filter:brightness(.70); }
.gift .skirt.right{ transform:rotateY(90deg)  translateZ(calc(var(--lw) / 2)); filter:brightness(.87); }

.gift .cap{
  position:absolute; left:0; top:50%;
  width:var(--lw); height:var(--lw);
  margin-top:calc(var(--lw) / -2);
  transform:rotateX(90deg) translateZ(calc(var(--sd) / 2));
  border:1px solid rgba(255,230,244,.28);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 8px), rgba(255,250,253,.98) calc(50% - 8px),
                    rgba(255,222,240,.98) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(0deg,  transparent calc(50% - 8px), rgba(255,250,253,.98) calc(50% - 8px),
                    rgba(255,222,240,.98) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(148deg, #ffd6e9, #ffa5cd 58%, #e0609f);
}

.gift .glow{
  position:absolute; left:50%; top:56%; width:240%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,94,163,.32), rgba(255,94,163,0) 62%);
  animation:breathe 4.6s ease-in-out infinite;
}

/* Бант живёт вне 3D-сцены: так он всегда повёрнут к зрителю
   и не искажается вместе с крышкой. */
.gift-stage .bow{
  position:absolute; left:47%; top:-2%;
  transform:translate(-50%,-50%) rotate(-6deg);
  font-size:calc(var(--w) * 0.36); line-height:1;
  pointer-events:none;
  filter:drop-shadow(0 4px 18px rgba(255,120,185,.75));
  transition:transform 1.1s var(--ease), opacity .8s ease .3s;
}
#gift.open ~ .bow{
  transform:translate(-50%,-50%) translateY(calc(var(--w) * -0.9)) rotate(-26deg);
  opacity:0;
}

.tap-hint{
  font-family:var(--ui); font-size:11px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--ink-faint); animation:blink 3s ease-in-out infinite;
}

/* карточка-поздравление, поднимается из коробки */
.letter{
  position:absolute; left:50%; top:50%;
  width:min(90vw, 380px);
  transform:translate(-50%,-38%) scale(.86); opacity:0; pointer-events:none;
  transition:opacity .9s ease .55s, transform 1.1s var(--ease) .55s;
}
.letter.show{ transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.letter .card{ padding:34px 26px 30px; text-align:center; }
.letter h1{
  margin:16px 0 10px;
  font-family:var(--hand); font-weight:600;
  font-size:clamp(34px, 9.5vw, 50px); line-height:1.06;
  color:var(--cream);
  text-shadow:0 0 34px rgba(255,94,163,.42);
}
.letter .sub{
  margin:0 0 26px; font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   ГЛАВЫ
   Один длинный свиток поверх галактики. Каждая глава занимает экран
   целиком: одна мысль на экран, много воздуха. Камера в это время
   переезжает по вселенной — прокрутка ведёт её.
   ═══════════════════════════════════════════════════════════════════ */
#scroll::-webkit-scrollbar{ width:0; height:0; }
#scroll{
  scrollbar-width:none;
  position:fixed; inset:0; z-index:4;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  opacity:0; transition:opacity 1.8s ease;
  /* Прокрутка встаёт по главам: без этого одним махом пальца можно
     проскочить через целую главу и не заметить её. */
  scroll-snap-type:y mandatory;
}
#scroll.hidden{ display:none; }
#scroll.show{ opacity:1; }

.chapter{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:clamp(22px, 5vh, 44px);
  padding:calc(9vh + env(safe-area-inset-top)) 22px calc(12vh + env(safe-area-inset-bottom));
  /* stop:always — палец не может перепрыгнуть главу за один жест */
  scroll-snap-align:start;
  scroll-snap-stop:always;
  text-align:center;
}

/* Заголовок стоит сверху, а не по центру: в середине кадра живёт
   галактика, и текст поверх неё не читается. Сверху же под текст
   подложена мягкая тень — тогда он разборчив на любом фоне. */
.chapter::before{
  content:''; position:absolute; left:0; right:0; top:0; height:34%;
  background:linear-gradient(180deg, rgba(9,3,18,.88), rgba(9,3,18,.46) 46%, rgba(9,3,18,0));
  pointer-events:none;
}
.chapter > *{ position:relative; }

/* Первая глава — только заголовок: середину кадра занимает сама галактика */
#ch-galaxy{ justify-content:flex-start; }

/* В письме текст идёт до самого низа, поэтому подложка растянута на
   всю главу: сердце за ней видно, но читать не мешает. */
#ch-letter::before{
  height:100%;
  background:linear-gradient(180deg, rgba(9,3,18,.90), rgba(9,3,18,.76) 38%, rgba(9,3,18,.62));
}

/* В главе с галактикой пальцем можно поворачивать вид,
   но вертикальный жест по-прежнему листает страницу. */
#ch-galaxy{ touch-action:pan-y; }

.ch-head{
  display:flex; flex-direction:column; align-items:center; gap:13px;
  max-width:520px;
  opacity:0; transform:translateY(22px);
  transition:opacity 1.2s ease, transform 1.2s var(--ease);
}
.chapter.in .ch-head{ opacity:1; transform:none; }

.ch-title{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(27px, 7.2vw, 40px); line-height:1.16;
  color:var(--cream); text-shadow:0 0 34px rgba(255,94,163,.34);
}
.ch-title.hand{
  font-family:var(--hand); font-style:normal; font-weight:600;
  font-size:clamp(34px, 9vw, 48px); line-height:1.05;
}
.ch-hint{
  margin:0; font-family:var(--ui); font-size:10px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
}
.ch-caption{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink-soft);
  opacity:0; transition:opacity 1.4s ease .4s;
}
.chapter.in .ch-caption{ opacity:1; }

/* стрелка «листай дальше» — только на первой главе */
.scroll-cue{
  position:absolute; left:50%; bottom:max(28px, env(safe-area-inset-bottom));
  z-index:1;
  width:20px; height:20px; margin-left:-10px;
  border-right:1.5px solid rgba(245,168,207,.55);
  border-bottom:1.5px solid rgba(245,168,207,.55);
  transform:rotate(45deg);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{ opacity:.25; transform:rotate(45deg) translate(-4px,-4px); }
  50%    { opacity:.85; transform:rotate(45deg) translate(2px,2px); }
}

/* ─── букет ─────────────────────────────────────────────────────── */
.bouquet{
  position:relative;
  width:min(90vw, 400px); aspect-ratio:1 / 0.92;
  opacity:0; transform:translateY(26px) scale(.96);
  transition:opacity 1.1s ease .25s, transform 1.2s var(--ease) .25s;
}
.chapter.in .bouquet{ opacity:1; transform:none; }

.bouquet svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bouquet .stem{
  fill:none; stroke:rgba(168,226,196,.32); stroke-width:1.1; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.4s var(--ease);
}
.chapter.in .bouquet .stem{ stroke-dashoffset:0; transition-delay:calc(.35s + var(--i) * .09s); }

.flower{
  position:absolute; border:none; background:none; cursor:pointer; padding:0;
  transform:translate(-50%,-50%) scale(.3); opacity:0;
  line-height:1; filter:drop-shadow(0 0 16px rgba(255,140,205,.6));
  transition:transform .8s var(--ease), opacity .7s ease, filter .35s ease;
}
.chapter.in .flower{
  opacity:1; transform:translate(-50%,-50%) scale(1);
  transition-delay:calc(.75s + var(--i) * .10s);
}
.flower:hover{ filter:drop-shadow(0 0 24px rgba(255,160,215,.95)); }
.flower.picked{ animation:flowerPop .7s var(--ease); }
@keyframes flowerPop{
  40%{ transform:translate(-50%,-50%) scale(1.28) rotate(-8deg); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}

.note-panel{
  width:min(90vw, 400px); min-height:96px;
  display:flex; align-items:center; justify-content:center;
  padding:20px 22px; border-radius:20px;
  background:linear-gradient(168deg, rgba(58,25,88,.72), rgba(23,10,38,.80));
  border:1px solid var(--edge);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease, transform .6s var(--ease);
}
.note-panel.show{ opacity:1; transform:none; }
.note-panel p{
  margin:0; font-family:var(--serif); font-size:16.5px; line-height:1.6;
  color:var(--ink-soft);
}

/* ─── альбом ────────────────────────────────────────────────────── */
.album{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:15px;
  width:min(92vw, 470px);
}
.album .frame{
  position:relative; padding:0; border:none; cursor:pointer;
  background:linear-gradient(170deg, #fdf4f8, #f0dfea);
  border-radius:4px; overflow:visible;
  box-shadow:0 16px 34px rgba(0,0,0,.48);
  padding:8px 8px 0;
  opacity:0; transform:translateY(22px) rotate(0deg);
  transition:opacity .8s ease, transform .8s var(--ease), box-shadow .35s ease;
}
.chapter.in .album .frame{
  opacity:1; transform:translateY(0) rotate(var(--tilt));
  transition-delay:calc(.3s + var(--i) * .08s);
}
.album .frame:hover{ box-shadow:0 22px 44px rgba(0,0,0,.6), 0 0 30px rgba(255,94,163,.2); }
.album .frame:active{ transform:translateY(0) rotate(var(--tilt)) scale(.97); }

.album .shot{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(150deg, #4a1c56, #230d33);
}
.album .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.album .shot .fallback{
  position:absolute; inset:0; display:grid; place-items:center; font-size:38px;
  filter:drop-shadow(0 0 14px rgba(255,94,163,.55));
}
/* значок из папки icons/ — наклейкой на уголке снимка */
.album .sticker{
  position:absolute; right:-9px; top:-11px;
  width:var(--sticker, 46px); height:var(--sticker, 46px);
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(255,94,163,.7));
}
.album .cap{
  font-family:var(--hand); font-size:17px; color:#7a3059;
  padding:7px 4px 10px; line-height:1.1;
}
.album .frame.read .shot{ filter:saturate(.75) brightness(.86); }

#dots{ display:flex; gap:9px; }
#dots i{
  width:11px; height:11px; display:block;
  background:rgba(245,168,207,.20);
  clip-path:path('M5.5 10.5 C1 7 0 4.5 1.4 2.4 C2.7.5 5 .9 5.5 2.4 C6 .9 8.3.5 9.6 2.4 C11 4.5 10 7 5.5 10.5Z');
  transition:background .6s var(--ease), transform .6s var(--ease), filter .6s ease;
}
#dots i.on{
  background:var(--rose-hot); transform:scale(1.3);
  filter:drop-shadow(0 0 8px rgba(255,94,163,.9));
}

/* ─── счётчик ───────────────────────────────────────────────────── */
.counter{
  display:flex; gap:clamp(14px, 5vw, 30px); align-items:flex-start;
  opacity:0; transform:translateY(18px);
  transition:opacity 1.1s ease .3s, transform 1.1s var(--ease) .3s;
}
.chapter.in .counter{ opacity:1; transform:none; }
.counter .unit{ display:flex; flex-direction:column; align-items:center; gap:7px; min-width:58px; }
.counter .num{
  font-family:var(--serif); font-size:clamp(34px, 11vw, 58px); line-height:1;
  color:var(--cream); font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(255,94,163,.38);
}
.counter .lab{
  font-family:var(--ui); font-size:9.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}

/* ─── письмо ────────────────────────────────────────────────────── */
.chapter.wide{ justify-content:flex-start; padding-top:calc(16vh + env(safe-area-inset-top)); }
.letter-body{ width:min(93vw, 560px); text-align:left; }
.letter-body p{
  margin:0 0 19px; font-family:var(--serif); font-size:17.5px; line-height:1.82;
  color:var(--ink-soft);
  opacity:0; transform:translateY(14px);
  transition:opacity 1.2s ease, transform 1.2s var(--ease);
}
.letter-body p.in{ opacity:1; transform:none; }
.sign{
  width:min(93vw, 560px); margin:8px 0 0; text-align:right;
  font-family:var(--hand); font-size:28px; color:var(--rose);
  opacity:0; transition:opacity 1.4s ease;
}
.sign.in{ opacity:1; }

/* ═══════════════════════════════════════════════════════════════════
   ОКНА
   ═══════════════════════════════════════════════════════════════════ */
.overlay{
  position:fixed; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(9,3,18,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.overlay > .card{
  transform:translateY(28px) scale(.94);
  transition:transform .6s var(--ease);
  max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
}
.overlay.show > .card{ transform:none; }
.overlay > .card::-webkit-scrollbar{ width:0; }

/* ─── полароид ──────────────────────────────────────────────────── */
#memory > .card{ width:min(90vw, 372px); padding:22px 20px 26px; text-align:center; }

.polaroid{
  background:linear-gradient(170deg, #fdf4f8, #f2e2ec);
  padding:11px 11px 0;
  border-radius:5px;
  box-shadow:0 22px 48px rgba(0,0,0,.55), 0 0 40px rgba(255,94,163,.14);
  transform:rotate(-1.6deg);
  margin:0 auto 20px;
  width:min(78vw, 292px);
  transition:transform .7s var(--ease);
}
.overlay.show .polaroid{ transform:rotate(1.4deg); }

.polaroid .shot{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(150deg, #4a1c56, #230d33);
  border-radius:2px;
}
.polaroid .shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transform:scale(1.07);
  transition:opacity .8s ease, transform 8s linear;
}
.overlay.show .polaroid .shot img.ok{ opacity:1; transform:scale(1); }
.polaroid .fallback{
  position:absolute; inset:0; display:grid; place-items:center; font-size:58px;
  filter:drop-shadow(0 0 18px rgba(255,94,163,.55));
}
.polaroid .fallback.hide{ display:none; }
.polaroid .note{
  font-family:var(--hand); font-size:21px; color:#7a3059;
  padding:9px 6px 13px; min-height:44px; line-height:1.1;
}

#memory .date{
  font-family:var(--ui); font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(245,168,207,.62); margin-bottom:8px;
}
#memory h3{
  margin:0 0 12px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:27px; color:var(--cream);
}
#memory p{
  margin:0 0 24px; font-family:var(--serif); font-size:17px; line-height:1.62;
  color:var(--ink-soft); text-align:left;
}

/* ═══════════════════════════════════════════════════════════════════
   БЕЗ WEBGL2 — остаётся свиток с главами на спокойном фоне
   ═══════════════════════════════════════════════════════════════════ */
body.no-gl #sky{
  background:radial-gradient(125% 95% at 50% 18%, #4a2170, #180a2a 52%, #0b0416 100%);
}
body.no-gl .scroll-cue{ opacity:.5; }

/* ═══════════════════════════════════════════════════════════════════
   ЛЕПЕСТКИ — тонкий слой поверх всего, как на референсах
   ═══════════════════════════════════════════════════════════════════ */
#petals{ position:fixed; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
#petals span{
  position:absolute; display:block; top:-8vh;
  background-repeat:no-repeat; background-size:contain;
  will-change:transform; opacity:0;
  animation:petalFall linear infinite;
}

@keyframes petalFall{
  0%   { transform:translate3d(0,-10vh,0) rotate(0deg);      opacity:0; }
  8%   { opacity:var(--peak); }
  92%  { opacity:var(--peak); }
  100% { transform:translate3d(var(--drift),112vh,0) rotate(var(--spin)); opacity:0; }
}
@keyframes giftFloat{ 0%,100%{ transform:rotateX(-14deg) rotateY(-28deg) translateY(-7px); }
                      50%    { transform:rotateX(-14deg) rotateY(-20deg) translateY(9px); } }
@keyframes breathe{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
                    50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.09); } }
@keyframes blink{ 0%,100%{ opacity:.35 } 50%{ opacity:.9 } }

@media (prefers-reduced-motion: reduce){
  .gift{ animation:none; }
  #petals{ display:none; }
  .gift .glow{ animation:none; }
}