/* ============================================================================
   sections.css, художнє оформлення кожної секції «нескінченного плаката».
   ========================================================================== */

/* --- Спільні заголовки секцій ---------------------------------------- */
.section-head { margin-bottom: var(--space-l); position: relative; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head .h-l { position: relative; display: inline-block; }
.section-head .h-l::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.22em; height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q96 1.5 198 6 Q104 15 2 8 Z' fill='%23D9A94B'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.9;
}
.section-lead { color: var(--ink-soft); font-size: var(--step-1); max-width: 52ch; margin-top: var(--space-xs); }
.section-head.center .section-lead { margin-inline: auto; }
.wrap-wide { width: var(--container-wide); margin-inline: auto; }

/* --- Точкова навігація ------------------------------------------------ */
.dotnav { position: fixed; right: 18px; top: 50%; translate: 0 -50%; z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: 12px; }
.dotnav a { width: 12px; height: 12px; display: grid; place-items: center; position: relative; }
.dotnav a span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong);
  transition: transform .3s var(--ease-out), background .3s; }
.dotnav a:hover span, .dotnav a.active span { background: var(--raspberry); transform: scale(1.7); }
.dotnav a::after { content: attr(data-label); position: absolute; right: 22px; top: 50%; translate: 0 -50%;
  font-family: var(--font-hand); font-size: 1.05rem; color: var(--raspberry); background: var(--surface);
  padding: 2px 10px; border-radius: 100px; box-shadow: var(--shadow-s); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.dotnav a:hover::after { opacity: 1; }
@media (max-width: 900px) { .dotnav { display: none; } }

/* ==================== HERO ==================== */
.hero { min-height: 100svh; display: grid; align-items: center; padding-block: var(--space-2xl); overflow: hidden; }
.hero__halo { position: absolute; inset: -20% -10% auto; height: 120%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-rose), transparent 70%); filter: blur(10px); opacity: .8; }
.hero__balloons { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.balloon { position: absolute; will-change: transform;
  filter: drop-shadow(0 14px 16px oklch(0.4 0.12 356 / 0.22));
  animation: balloon-float var(--d, 8s) var(--ease-soft) infinite; animation-delay: var(--delay, 0s); }
.balloon svg { width: 100%; height: auto; display: block; }
@keyframes balloon-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-26px) rotate(calc(var(--r, 0deg) * -0.6)); }
}
@media (max-width: 720px) { .balloon--3, .balloon--5 { display: none; } .balloon { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .balloon { animation: none; } }
.hero__inner { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: var(--space-m); }
.hero__kicker { font-size: var(--step-2); }
.hero__title { display: grid; justify-items: center; gap: 0.1em; line-height: 0.9; }
.hero__l1 { font-size: var(--step-5); display: inline-flex; align-items: baseline; gap: 0.25em; }
.hero__two { position: relative; font-size: 1.35em; color: var(--raspberry);
  text-shadow: 0.06em 0.06em 0 var(--gold); }
.hero__l2 { font-size: var(--step-3); color: var(--rose); rotate: -3deg; }
.hero__l3 { font-size: clamp(3.6rem, 2rem + 9vw, 8rem); color: var(--ink);
  display: inline-flex; align-items: flex-start; }
.hero__forever { font-size: 0.42em; color: var(--gold-deep); translate: 0.1em -0.2em; }
.hero__sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; }
.scrollcue { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; z-index: 3;
  display: grid; justify-items: center; gap: 4px; color: var(--raspberry); text-decoration: none; font-size: 1.1rem; }
.scrollcue__arrow { font-size: 1.4rem; animation: bob 1.8s var(--ease-soft) infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }

/* ==================== ЛІЧИЛЬНИКИ ==================== */
.livetime { margin: var(--space-m) auto var(--space-l); display: grid; justify-items: center; gap: 6px; }
.livetime__days { display: inline-flex; align-items: baseline; gap: 0.3em; }
.livetime__days .heavy { font-size: var(--step-mega); line-height: 0.8; color: var(--raspberry);
  text-shadow: 0.04em 0.05em 0 var(--surface-warm); }
.livetime__days em { font-family: var(--font-hand); font-style: normal; font-size: var(--step-3); color: var(--rose); }
.livetime__units { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.unit { display: grid; justify-items: center; gap: 2px; background: var(--surface); border-radius: 16px;
  padding: 10px 18px; min-width: 96px; box-shadow: var(--shadow-s), inset 0 1px 0 oklch(1 0 0 / 0.8);
  border: 1.5px solid oklch(1 0 0 / 0.6); }
.unit b { font-family: var(--font-heavy); font-weight: 700; font-size: var(--step-1); color: var(--raspberry);
  font-variant-numeric: tabular-nums; line-height: 1; }
.unit span { font-family: var(--font-hand); font-size: var(--step-0); color: var(--ink-muted); }
.unit--live b { color: var(--rose-bright); }
.unit--live { animation: unit-pulse 1s steps(1) infinite; }
@keyframes unit-pulse { 50% { box-shadow: 0 0 0 3px var(--glow-rose), var(--shadow-s); } }
.livetime__since { font-size: var(--step-1); color: var(--ink-muted); }

.counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-s);
  max-width: 1000px; margin-inline: auto; }
.stat { position: relative; background: var(--surface); border-radius: var(--radius);
  padding: 1.4rem 1.2rem; box-shadow: var(--shadow-m); display: grid; gap: 2px; justify-items: center; text-align: center;
  border: 1.5px solid oklch(1 0 0 / 0.7); }
.stat:nth-child(3n) { rotate: -2deg; } .stat:nth-child(3n+1) { rotate: 1.5deg; } .stat:nth-child(4n) { rotate: -1deg; }
.stat__emoji { font-size: 1.8rem; }
.stat__num { font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-3); color: var(--raspberry);
  line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--step-0); color: var(--ink); font-weight: 700; }
.stat__hint { font-family: var(--font-hand); font-size: 1rem; color: var(--ink-muted); }
.stat--wide { grid-column: span 2; background: var(--surface-warm); }
@media (max-width: 520px) { .stat--wide { grid-column: span 1; } }

/* ==================== МАГІЯ ЧИСЛА 2 ==================== */
.magic__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-s); align-items: stretch; }
.frag { background: var(--surface); border-radius: var(--radius-l); padding: clamp(1.3rem, 1rem + 1.5vw, 2.1rem);
  box-shadow: var(--shadow-m), inset 0 1.5px 0 oklch(1 0 0 / 0.6); grid-column: span 3;
  display: grid; gap: 5px; align-content: start; border: 1.5px solid oklch(1 0 0 / 0.6);
  position: relative; overflow-wrap: anywhere; }
.frag__n { font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-3); color: var(--rose); line-height: 0.85; }
.frag__label { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.frag__text { color: var(--ink-soft); font-size: var(--step-0); max-width: 42ch; }
/* асиметрія, кілька фрагментів на всю ширину */
.frag:nth-child(1) { grid-column: 1 / -1; background: var(--wine); color: var(--cream-ink); }
.frag:nth-child(1) .frag__n { color: var(--gold); font-size: var(--step-4); }
.frag:nth-child(1) .frag__label { font-size: var(--step-2); }
.frag:nth-child(1) .frag__label, .frag:nth-child(1) .frag__text { color: var(--cream-ink); }
.frag:nth-child(5) { background: var(--surface-warm); }
.frag:nth-child(8) { grid-column: 1 / -1; background: var(--raspberry); color: #fff; text-align: center; justify-items: center; }
.frag:nth-child(8) .frag__n { color: var(--gold); }
.frag:nth-child(8) .frag__label { font-size: var(--step-2); }
.frag:nth-child(8) .frag__label, .frag:nth-child(8) .frag__text { color: #fff; }
@media (max-width: 700px) {
  .magic__grid { grid-template-columns: 1fr; }
  .frag, .frag:nth-child(n) { grid-column: 1 / -1; }
}

/* ==================== ХРОНІКА ==================== */
.chronicle__track { display: flex; gap: var(--space-m); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--space-m) max(4vw, calc((100vw - var(--container)) / 2)) var(--space-l);
  scrollbar-width: thin; }
.chapter { scroll-snap-align: center; flex: 0 0 min(86vw, 420px); background: var(--surface);
  border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: 1.6rem 1.6rem 1.2rem;
  display: grid; gap: var(--space-s); position: relative; border: 1.5px solid oklch(1 0 0 / 0.6); }
.chapter:nth-child(even) { rotate: 1.2deg; } .chapter:nth-child(odd) { rotate: -1.2deg; }
.chapter__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1ch; }
.chapter__month { font-family: var(--font-hand); font-size: var(--step-1); color: var(--raspberry); font-weight: 700; }
.chapter__no { font-family: var(--font-heavy); font-weight: 800; color: var(--surface-warm);
  font-size: var(--step-3); line-height: 1; -webkit-text-stroke: 1.5px var(--rose); color: transparent; }
.chapter__photo { aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--surface-warm), var(--bg-deep)); }
.chapter__photo img, .chapter__photo video { width: 100%; height: 100%; object-fit: cover; }
.chapter__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); }
.chapter__verse { font-family: var(--font-hand); font-size: var(--step-1); color: var(--ink-soft); white-space: pre-line; line-height: 1.35; }
.chapter__moment { font-size: var(--step--1); color: var(--ink-muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.chronicle__hint { text-align: center; color: var(--ink-muted); font-family: var(--font-hand); font-size: var(--step-1); }

/* ==================== КАЛЕНДАР ==================== */
.calendar { max-width: 760px; margin-inline: auto; background: var(--surface); border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); padding: clamp(1.2rem,1rem+2vw,2.4rem); border: 1.5px solid oklch(1 0 0 / 0.6); }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-bottom: var(--space-s); }
.cal__nav { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--tint-rose);
  color: var(--raspberry); font-size: 1.4rem; cursor: pointer; transition: background .2s, transform .2s; }
.cal__nav:hover { background: var(--rose); color: #fff; transform: scale(1.08); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.cal__title { text-align: center; }
.cal__month { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); }
.cal__verse { font-family: var(--font-hand); font-size: var(--step-0); color: var(--ink-muted); max-width: 30ch; margin: 2px auto 0; }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal__dow span { text-align: center; font-size: var(--step--1); color: var(--ink-muted); font-weight: 700; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { aspect-ratio: 1; border-radius: 12px; border: none; background: var(--bg-deep); color: var(--ink-soft);
  font-weight: 700; font-size: var(--step--1); cursor: pointer; position: relative; display: grid; place-items: center;
  transition: transform .2s var(--ease-out), background .2s; font-variant-numeric: tabular-nums; }
.day:hover { transform: scale(1.12); z-index: 2; }
.day.empty { visibility: hidden; }
.day.out { opacity: .25; cursor: not-allowed; }
.day.has { background: var(--rose); color: #fff; box-shadow: var(--shadow-s); }
.day.today { outline: 3px solid var(--gold); outline-offset: 1px; }
.day.start::before, .day.anniv::before { content: "💗"; position: absolute; bottom: -2px; left: 3px; font-size: .6rem; }
.cal__legend { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; margin-top: var(--space-m);
  font-size: var(--step--1); color: var(--ink-muted); }
.cal__legend span { display: inline-flex; align-items: center; gap: 5px; }
.dotc { width: 14px; height: 14px; border-radius: 5px; display: inline-block; }

/* ==================== МАПА (ілюстрована) ==================== */
.worldmap__stage { position: relative; aspect-ratio: 4 / 3; max-width: 900px; margin-inline: auto;
  background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-l), inset 0 0 40px oklch(0.7 0.08 350 / 0.15);
  overflow: hidden; border: 1.5px solid oklch(1 0 0 / 0.6); }
.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pins { position: absolute; inset: 0; }
.pin { position: absolute; translate: -50% -100%; display: grid; justify-items: center; gap: 2px;
  background: none; border: none; cursor: pointer; z-index: 3; }
.pin__dot { width: 20px; height: 20px; border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: radial-gradient(circle at 35% 30%, #FF9CB4, var(--raspberry));
  box-shadow: var(--shadow-m), inset -1px -2px 3px oklch(0.4 0.1 356 / 0.4); position: relative;
  transition: transform .3s var(--ease-out); }
.pin__dot::after { content: ""; position: absolute; inset: 6px; background: var(--surface); border-radius: 50%; }
.pin__pulse { position: absolute; top: 0; left: 50%; translate: -50% -2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--glow-rose); animation: pulse 2.4s var(--ease-soft) infinite; }
@keyframes pulse { 0%{ transform: scale(.6); opacity: .8;} 100%{ transform: scale(3); opacity: 0;} }
.pin__label { font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; color: var(--wine);
  background: var(--surface); padding: 1px 9px; border-radius: 100px; box-shadow: var(--shadow-s); white-space: nowrap;
  transition: background .25s, color .25s; }
.pin:hover .pin__dot, .pin.active .pin__dot { transform: scale(1.28) rotate(-45deg) translateY(-2px); }
.pin.active .pin__label { background: var(--raspberry); color: #fff; }
.map-info { max-width: 900px; margin: var(--space-s) auto 0; background: var(--wine); color: var(--cream-ink);
  border-radius: var(--radius); padding: 1rem 1.3rem; box-shadow: var(--shadow-m); min-height: 3.8em;
  display: grid; align-content: center; text-align: center; }
.map-info h4 { font-family: var(--font-display); color: var(--gold); font-size: var(--step-1); margin-bottom: 3px; }
.map-info p { font-size: var(--step-0); color: var(--cream-ink); max-width: 60ch; margin-inline: auto; }
.map-info__hint { color: var(--cream-ink); font-size: var(--step-1); opacity: .85; }
@media (max-width: 560px) { .pin__label { font-size: 0.8rem; padding: 1px 6px; } .pin__dot { width: 17px; height: 17px; } }

/* ==================== ФЛЕШ-КАРТКИ ==================== */
.flashcards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-m); }
.flip { background: none; border: none; padding: 0; cursor: pointer; perspective: 1200px; aspect-ratio: 3 / 4;
  font: inherit; position: relative; display: block; width: 100%; }
.flip__inner { position: absolute; inset: 0; transition: transform .7s var(--ease-out); transform-style: preserve-3d; }
.flip.flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-l);
  display: grid; align-content: center; justify-items: center; gap: 8px; padding: 1.4rem; text-align: center;
  box-shadow: var(--shadow-m); border: 1.5px solid oklch(1 0 0 / 0.5); }
.flip__front { background: linear-gradient(160deg, var(--rose-bright), var(--raspberry)); color: #fff; }
.flip__word { font-family: var(--font-display); font-size: var(--step-2); }
.flip__ipa { font-family: var(--font-body); font-size: var(--step-0); opacity: .9; }
.flip__hint { position: absolute; bottom: 12px; font-size: var(--step--1); opacity: .8; font-family: var(--font-hand); }
.flip__back { background: var(--surface); color: var(--ink); transform: rotateY(180deg); }
.flip__tag { position: absolute; top: 12px; }
.flip__def { font-family: var(--font-hand); font-size: var(--step-1); color: var(--ink-soft); line-height: 1.3; }

/* ==================== ЖУРНАЛ, ЩО ГОРТАЄТЬСЯ ==================== */
.lookbook { background: linear-gradient(180deg, var(--bg), var(--bg-deep)); }
.magazine { max-width: 470px; margin-inline: auto; }
.mag__book { position: relative; perspective: 2200px; aspect-ratio: 3 / 4; }
.mag__book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; z-index: 60;
  pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.2), transparent); border-radius: 6px 0 0 6px; }
.mag__page { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(0.2, 0.7, 0.2, 1); backface-visibility: hidden; border-radius: 6px;
  overflow: hidden; box-shadow: var(--shadow-l); cursor: pointer; background: var(--surface); isolation: isolate;
  will-change: transform; }
.mag__page.flipped { transform: rotateY(-180deg); }
/* тінь-згин під час гортання */
.mag__page::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 30%); transition: opacity .5s; }
.mag__page.flipped::before { opacity: 1; }
.mag-photo { position: absolute; inset: 0; }
.mag-photo img, .mag-photo .slot-img { width: 100%; height: 100%; object-fit: cover; }
.mag-cover { background: #140a0f; color: #fff; }
.mag-cover .ph { color: #fff; } .mag-cover .ph small { color: rgba(255,255,255,.7); }
.mag-cover::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 30%, transparent 52%, rgba(0,0,0,.72)); }
.mag-cover__mast { position: absolute; top: 16px; left: 0; right: 0; z-index: 2; text-align: center;
  font-size: clamp(2.6rem, 1.5rem + 7vw, 4.4rem); line-height: .9; color: #fff; letter-spacing: .02em; mix-blend-mode: screen; }
.mag-cover__word { position: absolute; top: 4.5rem; left: 0; right: 0; z-index: 2; text-align: center;
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .42em; color: var(--gold); text-indent: .42em; }
.mag-cover__issue { position: absolute; top: 6.3rem; left: 0; right: 0; z-index: 2; text-align: center;
  font-size: .66rem; letter-spacing: .3em; color: rgba(255,255,255,.75); }
.mag-cover__lines { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; display: grid; gap: 6px; }
.mag-cover__lines h3 { font-family: var(--font-display); font-size: var(--step-2); color: #fff; }
.mag-cover__lines span { font-size: var(--step-1); color: var(--gold); }
.mag-cover__flip { position: absolute; right: 16px; bottom: 96px; z-index: 3; color: #fff; opacity: .85; font-size: var(--step-1); }
.mag-content::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 48%, rgba(0,0,0,.66)); }
.mag-content__text { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; gap: 6px; }
.mag-kicker { font-size: .68rem; letter-spacing: .25em; color: var(--gold); }
.mag-headline { font-family: var(--font-display); font-size: var(--step-2); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.mag-num { position: absolute; top: 12px; right: 14px; z-index: 2; font-family: var(--font-heavy); font-weight: 800;
  color: #fff; opacity: .55; font-size: var(--step-1); }
.mag__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-m); margin-top: var(--space-m); }
.mag__btn { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--tint-rose); color: var(--raspberry);
  font-size: 1.8rem; cursor: pointer; box-shadow: var(--shadow-m); transition: transform .2s, background .2s; }
.mag__btn:hover:not(:disabled) { background: var(--rose); color: #fff; transform: scale(1.08); }
.mag__btn:disabled { opacity: .3; cursor: not-allowed; }
.mag__count { font-size: var(--step-1); color: var(--ink-muted); min-width: 64px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .mag__page { transition: none; } }

/* ==================== ДОГОВІР ==================== */
.contract__paper { max-width: 720px; margin-inline: auto; background: var(--paper-note);
  background-image: radial-gradient(oklch(0.6 0.08 80 / 0.06) 1px, transparent 1px); background-size: 22px 22px;
  border-radius: 6px; box-shadow: var(--shadow-l), inset 0 0 60px oklch(0.6 0.1 80 / 0.12);
  padding: clamp(1.6rem, 1rem + 4vw, 3.4rem); position: relative; color: #3a2a20;
  border: 1px solid oklch(0.7 0.06 80 / 0.4); rotate: -0.6deg; }
.contract__paper::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid oklch(0.55 0.08 60 / 0.3); border-radius: 4px; pointer-events: none; }
.contract__no { font-family: var(--font-body); letter-spacing: .3em; font-size: var(--step--1); color: #8a5a2a; text-align: center; }
.contract__title { font-family: var(--font-display); font-size: var(--step-2); text-align: center; color: #3a2a20; margin: 4px 0 2px; }
.contract__preamble { text-align: center; font-size: var(--step--1); color: #6b4a2a; max-width: 46ch; margin: 0 auto var(--space-s); }
.contract__parties { display: grid; gap: 4px; margin-bottom: var(--space-s); font-size: var(--step-0); font-weight: 600; }
.contract__clauses { display: grid; gap: 10px; counter-reset: c; margin-bottom: var(--space-m); }
.contract__clauses li { list-style: none; position: relative; padding-left: 2.4em; font-size: var(--step-0); line-height: 1.5; }
.contract__clauses li::before { counter-increment: c; content: counter(c) "."; position: absolute; left: 0;
  font-family: var(--font-display); font-size: var(--step-1); color: #a4442a; font-weight: 700; }
.contract__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-m); }
.contract__signs { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 1rem + 3vw, 3rem); }
.contract__sign { display: grid; gap: 6px; justify-items: center; }
.contract__sig { display: inline-flex; align-items: center; gap: 6px; justify-content: center; min-width: 160px; min-height: 1.5em;
  font-family: var(--font-hand); font-weight: 700; font-size: var(--step-2); color: #7a2a2a;
  border-bottom: 2px solid #6b4a2a; padding: 0 10px 5px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--hw) - 2%), transparent calc(var(--hw) + 2%));
  mask-image: linear-gradient(90deg, #000 calc(var(--hw) - 2%), transparent calc(var(--hw) + 2%)); }
.contract__sig.writing { animation: sig-write 1.4s var(--ease-out) forwards; }
@keyframes sig-write { from { --hw: 0%; } to { --hw: 100%; } }
.ink-heart { width: 0.9em; height: 0.9em; display: inline-block; }
.contract__sub { font-size: var(--step--1); color: #6b4a2a; }
.wax { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; position: relative; rotate: 8deg;
  background: radial-gradient(circle at 35% 30%, var(--rose-bright), var(--raspberry-deep));
  box-shadow: 0 8px 18px rgba(120,20,50,.5), inset 0 -6px 12px rgba(0,0,0,.28), inset 0 4px 8px rgba(255,255,255,.28); }
.wax::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255,255,255,.5); border-radius: 50%; }
.wax svg { width: 40px; height: 38px; }
.contract__gatehint { color: #a4442a; font-size: var(--step-1); margin-bottom: 10px; }
.contract.signed .contract__gatehint { color: #5c7a2a; }
.contract.nudge .contract__paper { animation: shake .45s var(--ease-soft); }
.contract__actions { text-align: center; margin-top: var(--space-m); }
.contract.signed .contract__paper { rotate: 0deg; }
.stamp { position: absolute; top: 40px; right: 30px; z-index: 4; font-family: var(--font-heavy); font-weight: 800;
  font-size: var(--step-2); color: #b0203f; border: 5px solid #b0203f; border-radius: 10px; padding: 6px 14px; rotate: -14deg;
  opacity: 0; scale: 1.6; transition: opacity .5s, scale .5s var(--ease-out); text-transform: uppercase; letter-spacing: .05em; mix-blend-mode: multiply; }
.contract.signed .stamp { opacity: .9; scale: 1; }

/* ==================== СКРАПБУК ==================== */
.scrapbook { background: linear-gradient(180deg, var(--bg-deep), var(--bg)); }
.scrapbook__board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-l);
  padding-block: var(--space-s); }
.scrap { position: relative; padding-top: 18px; }
.scrap:nth-child(3n) { rotate: 2deg; } .scrap:nth-child(3n+1) { rotate: -2.5deg; } .scrap:nth-child(3n+2) { rotate: 1deg; }
.scrap .polaroid { transition: transform .4s var(--ease-out); }
.scrap:hover .polaroid { transform: rotate(-1deg) scale(1.03); z-index: 3; }
.scrap__note { font-family: var(--font-hand); font-size: var(--step-1); color: var(--ink-soft); text-align: center; margin-top: 10px; }

/* ==================== ФІНАЛ ==================== */
.finale { background: radial-gradient(closest-side, var(--surface-warm), var(--bg)); }
.finale__mailbox { display: inline-grid; justify-items: center; gap: 4px; cursor: pointer; margin-bottom: var(--space-l);
  color: var(--raspberry); }
.finale__env { font-size: 3.4rem; transition: transform .3s var(--ease-out); animation: bob 2.6s var(--ease-soft) infinite; }
.finale__mailbox:hover .finale__env { transform: scale(1.15) rotate(-6deg); }
.finale__big { font-size: var(--step-5); color: var(--ink); white-space: pre-line; line-height: 1.05; }
.finale__small { font-size: var(--step-2); color: var(--raspberry); white-space: pre-line; margin-top: var(--space-m); }
.finale__ps { font-size: var(--step-0); color: var(--ink-muted); max-width: 44ch; margin: var(--space-m) auto 0; }
.finale__sign { font-size: var(--step-3); color: var(--rose); margin-top: var(--space-l); }

/* ==================== АУДІОПЛЕЄР ==================== */
.player { position: fixed; left: 18px; bottom: 18px; z-index: var(--z-player); display: flex; align-items: center; gap: 0; }
.player__disc { width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer; position: relative; flex: 0 0 auto;
  background: repeating-radial-gradient(circle at 50% 50%, #241019 0 1.6px, #3a2130 1.6px 3.2px);
  box-shadow: var(--shadow-l), inset 0 0 10px rgba(0,0,0,.55); display: grid; place-items: center; overflow: hidden; }
.player__disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 3;
  background: linear-gradient(125deg, rgba(255,255,255,.24), transparent 44%); }
.player__disc::after { content: ""; position: absolute; width: 42px; height: 42px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 40% 34%, var(--rose-bright), var(--raspberry));
  box-shadow: 0 0 0 2px #241019, inset 0 -3px 5px rgba(0,0,0,.3); }
.player.playing .player__disc { animation: spin 4.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.player__label { position: relative; z-index: 2; font-size: .56rem; color: #fff; text-align: center; line-height: 1;
  font-weight: 800; letter-spacing: .02em; }
.player__panel { max-width: 0; overflow: hidden; transition: max-width .5s var(--ease-out), padding .5s; white-space: nowrap;
  background: var(--surface); border-radius: 0 100px 100px 0; box-shadow: var(--shadow-m); align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; margin-left: -34px; padding-left: 34px; }
.player:hover .player__panel, .player.open .player__panel { max-width: 260px; padding-right: 16px; }
.player__track { font-size: var(--step-0); color: var(--raspberry); font-weight: 700; padding-top: 2px; }
.player__controls { display: flex; align-items: center; gap: 8px; }
.player__btn { border: none; background: var(--tint-rose); color: var(--raspberry); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.player__seek { width: 120px; accent-color: var(--raspberry); }
@media (max-width: 560px) { .player__panel { display: none; } }

/* ==================== SOS ==================== */
.sos { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-player); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; opacity: .5; transition: opacity .3s; }
.sos:hover { opacity: 1; }
.sos__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rose);
  box-shadow: 0 0 0 0 var(--glow-rose); animation: sos-pulse 2.6s var(--ease-soft) infinite; }
@keyframes sos-pulse { 0%{ box-shadow: 0 0 0 0 var(--glow-rose);} 70%{ box-shadow: 0 0 0 12px transparent;} 100%{ box-shadow: 0 0 0 0 transparent;} }
.sos__text { font-size: 1.1rem; color: var(--raspberry); max-width: 0; overflow: hidden; transition: max-width .3s; white-space: nowrap; }
.sos:hover .sos__text { max-width: 90px; }

/* ==================== ЛАЙТБОКС ==================== */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; grid-template-rows: 1fr auto;
  place-items: center; background: oklch(0.2 0.06 356 / 0.86); backdrop-filter: blur(6px); padding: 4vh 4vw; gap: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox__stage { max-width: min(92vw, 900px); max-height: 78vh; display: grid; place-items: center; grid-row: 1; }
.lightbox__stage img, .lightbox__stage video { max-width: 100%; max-height: 78vh; border-radius: var(--radius);
  box-shadow: var(--shadow-l); background: #000; }
.lightbox__cap { grid-row: 2; color: #fff; font-size: var(--step-1); text-align: center; }
.lightbox__close { position: fixed; top: 16px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--surface); color: var(--ink); font-size: 1.3rem; cursor: pointer; box-shadow: var(--shadow-m); }
.lightbox__nav { position: fixed; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--surface); color: var(--raspberry); font-size: 1.8rem; cursor: pointer; box-shadow: var(--shadow-m); }
.lightbox__prev { left: 14px; } .lightbox__next { right: 14px; }

/* ==================== МОДАЛКА ЛИСТА ==================== */
.letter-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  background: oklch(0.2 0.06 356 / 0.7); backdrop-filter: blur(5px); padding: 6vw; }
.letter-modal[hidden] { display: none; }
.letter-card { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-l); max-width: 440px;
  padding: 2.4rem 2rem 2rem; text-align: center; display: grid; gap: var(--space-m); justify-items: center; position: relative;
  border: 1.5px solid oklch(1 0 0 / 0.6); animation: pop-in .5s var(--ease-out); }
@keyframes pop-in { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.letter-card__wax { font-size: 2.6rem; margin-top: -3.4rem; background: var(--surface); border-radius: 50%; padding: 6px 10px; box-shadow: var(--shadow-s); }
.letter-card__text { font-size: var(--step-2); color: var(--ink); line-height: 1.35; }

/* ==================== ТОСТ ==================== */
.toast { position: fixed; left: 50%; bottom: 88px; translate: -50% 20px; z-index: var(--z-toast); opacity: 0;
  background: var(--wine); color: var(--cream-ink); padding: .8em 1.4em; border-radius: 100px; box-shadow: var(--shadow-l);
  font-weight: 600; transition: opacity .35s var(--ease-out), translate .35s var(--ease-out); max-width: 90vw; text-align: center; }
.toast[hidden] { display: none; }
.toast.show { opacity: 1; translate: -50% 0; }

/* --- Клас, який GSAP додає для reveal (контент видимий за замовчуванням) --- */
.will-reveal { will-change: transform, opacity; }

/* ==================== ЗАМОК «ТІЛЬКИ ДЛЯ НАС ДВОХ» ==================== */
.gate { position: fixed; inset: 0; z-index: var(--z-toast); display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--surface-warm), var(--bg-deep)); padding: 6vw;
  transition: opacity .6s var(--ease-out), visibility .6s; }
.gate[hidden] { display: none; }
.gate.hide { opacity: 0; visibility: hidden; }
.gate__card { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
  padding: clamp(1.8rem, 1rem + 4vw, 3rem); max-width: 430px; width: 100%; text-align: center;
  display: grid; gap: var(--space-s); justify-items: center; border: 1.5px solid oklch(1 0 0 / 0.6); }
.gate__heart { font-size: 3rem; animation: ph-beat 1.6s var(--ease-soft) infinite; }
.gate__title { font-size: var(--step-3); color: var(--ink); }
.gate__sub { font-size: var(--step-1); color: var(--raspberry); }
.gate__form { display: grid; gap: var(--space-s); width: 100%; justify-items: center; }
.gate__input { font-family: var(--font-body); font-size: var(--step-2); text-align: center; letter-spacing: .15em;
  width: 100%; padding: .55em .7em; border-radius: var(--radius); border: 2px solid var(--line-strong);
  background: var(--bg); color: var(--ink); }
.gate__input:focus-visible { outline: 3px solid var(--gold); border-color: var(--raspberry); }
.gate__hint { font-size: var(--step-0); color: var(--ink-muted); min-height: 1.4em; max-width: 32ch; }
html.gated, html.gated body { overflow: hidden; height: 100%; }
@keyframes shake { 10%,90%{ transform: translateX(-2px) } 30%,70%{ transform: translateX(6px) } 50%{ transform: translateX(-9px) } }
.gate__card.shake { animation: shake .5s var(--ease-soft); }

/* ==================== ПАСХАЛКА «АНГЛІЙСЬКА» ==================== */
.egg-line { font-size: var(--step-1); color: var(--ink-muted); margin-top: 10px; }
.egg-eng { font: inherit; color: var(--raspberry); background: none; border: none; cursor: pointer;
  padding: 0 3px; border-bottom: 2px dashed var(--raspberry); }
.egg-eng:hover { background: var(--tint-rose); border-radius: 4px; }
.egg { display: grid; gap: 10px; text-align: left; font-family: var(--font-body); }
.egg__title { font-size: var(--step-2); color: var(--raspberry); text-align: center; }
.egg__intro { font-family: var(--font-hand); font-size: var(--step-1); color: var(--ink-soft); text-align: center; }
.egg__list { display: grid; gap: 8px; font-size: var(--step-0); color: var(--ink); }
.egg__list span { display: block; padding: 8px 12px; background: var(--bg-deep); border-radius: 10px; }
.egg__list b { color: var(--raspberry); }

/* ==================== РУКОПИСНИЙ ТЕКСТ (пишеться в реальному часі) ==================== */
@property --hw { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
.handwrite-wrap { position: relative; display: inline-block; --hw: 100%; }
.handwrite {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--hw) - 1.5%), transparent calc(var(--hw) + 1.5%));
  mask-image: linear-gradient(90deg, #000 calc(var(--hw) - 1.5%), transparent calc(var(--hw) + 1.5%));
}
.hw-nib { position: absolute; top: 10%; bottom: 10%; left: var(--hw); width: 3px; margin-left: -1.5px;
  background: var(--raspberry); border-radius: 3px; box-shadow: 0 0 10px 3px var(--glow-rose);
  opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .handwrite { -webkit-mask-image: none; mask-image: none; } .hw-nib { display: none; } }

/* ==================== ПРО НЕЇ ==================== */
.her__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-m); align-items: start; }
.trait { position: relative; background: var(--surface); border-radius: var(--radius-l); padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-m), inset 0 1.5px 0 oklch(1 0 0 / 0.7); border: 1.5px solid oklch(1 0 0 / 0.6);
  display: grid; gap: 6px; }
.trait:nth-child(3n) { rotate: -1.3deg; } .trait:nth-child(3n+1) { rotate: 1deg; }
.trait:nth-child(1) { background: linear-gradient(160deg, var(--surface-warm), var(--surface)); }
.mark-heart { width: 26px; height: 24px; filter: drop-shadow(0 2px 3px oklch(0.5 0.15 356 / 0.3)); }
.trait__title { font-size: var(--step-1); color: var(--ink); }
.trait__text { font-size: var(--step-0); color: var(--ink-soft); }

/* ==================== СТІКЕРИ-СТРІЧКА ==================== */
.sticker-strip { margin-top: var(--space-l); }
.sticker-strip__label { font-size: var(--step-1); color: var(--ink-muted); text-align: center; margin-bottom: var(--space-s); }
.sticker-strip__row { display: flex; flex-wrap: wrap; gap: var(--space-m); justify-content: center; }
.sticker-photo { flex: 0 0 auto; width: clamp(118px, 30vw, 166px); rotate: var(--rot, 0deg);
  transition: transform .35s var(--ease-out); }
.sticker-photo:hover { transform: rotate(0deg) scale(1.05); z-index: 2; }
.polaroid--sm { padding: 8px 8px 30px; }
.polaroid--sm .cap { bottom: 8px; font-size: var(--step-0); }

/* ==================== ТЕКСТУРИ / ОБ'ЄМ (плюш · глянець · бабл) ==================== */
.btn { box-shadow: var(--shadow-m), inset 0 1.5px 0 oklch(1 0 0 / 0.4); }
.btn:hover { box-shadow: var(--shadow-l), inset 0 1.5px 0 oklch(1 0 0 / 0.4); }
.stat { box-shadow: var(--shadow-m), inset 0 2px 0 oklch(1 0 0 / 0.7), inset 0 -8px 16px oklch(0.7 0.1 350 / 0.12); }
.flip__front { box-shadow: var(--shadow-m), inset 0 3px 10px oklch(1 0 0 / 0.28), inset 0 -10px 20px oklch(0.4 0.12 5 / 0.28); }
.hero__two, .livetime__days .heavy { text-shadow: 0.03em 0.05em 0 var(--gold), 0.06em 0.09em 0 oklch(0.6 0.12 350 / 0.25); }
.frag:nth-child(8), .flip__front, .btn { background-blend-mode: overlay; }

/* ==================== ПОЛИЧКА НАГОРОД ==================== */
.awards { background: linear-gradient(180deg, var(--bg-deep), var(--bg)); }
.awards__shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-l) var(--space-m); }
.award { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 4px;
  transition: transform .35s var(--ease-out); }
.award:hover { transform: translateY(-4px); }
.award:hover .award__icon { transform: scale(1.08) rotate(-2deg); }
.award__for { font-family: var(--font-hand); font-size: var(--step-1); color: var(--ink-soft); line-height: 1.2; max-width: 22ch;
  min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; animation: award-float 4s var(--ease-soft) infinite; }
@keyframes award-float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.award__pedestal { position: relative; width: 100%; display: grid; justify-items: center; padding-bottom: 14px; }
.award__pedestal::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 12px; border-radius: 4px;
  background: linear-gradient(180deg, #E7C08A, #9a6f3e); box-shadow: 0 8px 14px oklch(0.4 0.09 60 / 0.35), inset 0 1px 0 rgba(255,255,255,.4); }
.award__icon { position: relative; z-index: 2; width: 74px; height: 74px;
  filter: drop-shadow(0 6px 8px oklch(0.5 0.12 70 / 0.4)) drop-shadow(0 0 10px oklch(0.85 0.14 90 / 0.5));
  transition: transform .35s var(--ease-out); }
.award__icon svg { width: 100%; height: 100%; display: block; }
.award__shine { position: absolute; z-index: 3; top: 4px; left: 50%; width: 62%; height: 62%; translate: -50% 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.9) 48%, transparent 66%);
  mix-blend-mode: screen; opacity: 0; animation: award-glint 3.6s ease-in-out infinite; }
@keyframes award-glint { 0%,72%,100%{ opacity: 0; } 82%{ opacity: .95; } }
.award:nth-child(2n) .award__shine { animation-delay: 1.3s; }
.award:nth-child(3n) .award__shine { animation-delay: 2.2s; }
.award__plate { background: linear-gradient(180deg, #3a2a20, #241811); border-radius: 8px; padding: 5px 14px;
  box-shadow: var(--shadow-s), inset 0 1px 0 rgba(255,255,255,.12); border: 1px solid #C99A3B; }
.award__plate span { font-size: var(--step-0); color: #E7C270; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .award__for, .award__shine { animation: none; } }