/* ==========================================================================
   Happy Birthday, Intan  -  core stylesheet
   goth black + soft pink + blood-red bows + bone white
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --ink: #0b0709;
  --coal: #17111a;
  --plum: #2a1630;
  --pink: #ff8fc7;
  --blush: #ffc2df;
  --blood: #c1123f;
  --bone: #f4eee8;
  --muted: #9b8a99;

  --font-goth: 'Pirata One', 'UnifrakturMaguntia', Georgia, serif;
  --font-horror: 'Creepster', 'Pirata One', cursive;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-type: 'Special Elite', 'Courier New', monospace;
  --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --gutter: max(20px, var(--safe-l), var(--safe-r));
  --maxw: 760px;

  --glow-bone: 0 0 1px rgba(255, 255, 255, .7), 0 0 14px rgba(255, 143, 199, .38), 0 0 40px rgba(193, 18, 63, .32);
  --glow-pink: 0 0 3px #fff2f8, 0 0 10px var(--pink), 0 0 24px var(--pink), 0 0 54px rgba(255, 143, 199, .55);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .25  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.1875rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

body.is-locked,
body.is-gated,
body.is-lightbox {
  overflow: hidden;
  overscroll-behavior: none;
}

body:not(.is-open) #main { display: none; }

img, svg, video, canvas { max-width: 100%; }
[data-art] > svg { display: block; width: 100%; height: 100%; overflow: visible; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:focus { outline: none; }
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px dashed var(--pink);
  outline-offset: 4px;
  border-radius: 6px;
}

a { color: var(--blush); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

::selection { background: var(--blood); color: var(--bone); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px; text-align: center;
  background: var(--ink); color: var(--blush);
  font-family: var(--font-type);
}

/* ---------- 3. Film grain + vignette (page-wide) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
body::after {
  content: "";
  position: fixed;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  z-index: 45;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .075;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-4%, 3%, 0); }
  33%  { transform: translate3d(3%, -5%, 0); }
  50%  { transform: translate3d(-6%, -2%, 0); }
  67%  { transform: translate3d(5%, 4%, 0); }
  83%  { transform: translate3d(-2%, 6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- 4. Canvases from effects.js (fallback positioning) ---------- */
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }

/* ---------- 5. Shared type & components ---------- */
.kicker {
  font-family: var(--font-type);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
  opacity: .9;
}

.section {
  --sec-bg: rgba(23, 12, 26, .5);
  --sec-glow: rgba(42, 22, 48, .5);
  --seam: 120px;
  position: relative;
  padding-block: clamp(84px, 16vw, 150px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  text-align: center;
  overflow: hidden;
}
/* Every section paints its own colour (--sec-bg) and a soft glow (--sec-glow).
   The top and bottom 120px fade out to the page ink, so no two sections ever
   meet on a hard edge. Guest css files set these two variables, not background. */
#main > .section {
  background:
    radial-gradient(ellipse 90% 40% at 50% 50%, var(--sec-glow), transparent 72%),
    linear-gradient(180deg, transparent 0, var(--sec-bg) var(--seam), var(--sec-bg) calc(100% - var(--seam)), transparent 100%);
}
@supports (overflow: clip) {
  .section { overflow: clip; }
}

.section-head {
  max-width: 620px;
  margin: 0 auto clamp(34px, 8vw, 56px);
}
.section-head .kicker { margin-bottom: .9rem; }

.section-title {
  font-family: var(--font-goth);
  font-size: clamp(2.55rem, 11.5vw, 4.75rem);
  line-height: 1;
  color: var(--bone);
  letter-spacing: .01em;
  text-wrap: balance;
}

.section-lede {
  margin-top: 1rem;
  font-style: italic;
  font-size: clamp(1.15rem, 4.6vw, 1.35rem);
  color: rgba(244, 238, 232, .78);
  text-wrap: pretty;
}

/* guest sections: "guest 1 of 3" */
.guest-kicker {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  color: var(--guest-accent, var(--pink));
  font-size: .78rem;
  letter-spacing: .24em;
}
.guest-kicker::before,
.guest-kicker::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.guest-section .section-head { position: relative; z-index: 2; }

/* Interludes: the calm lines between the guests (hype.js fades them in) */
.interlude {
  --il: rgba(255, 143, 199, .45);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(190px, 32vh, 280px);
  padding-block: clamp(28px, 7vw, 56px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  text-align: center;
}
.interlude.il-clown { --il: rgba(244, 238, 232, .38); }
.interlude.il-olivia { --il: rgba(196, 166, 255, .5); }
.interlude.il-barca { --il: rgba(237, 187, 0, .45); }
.interlude-mark {
  position: relative;
  width: min(72%, 400px);
  height: 40px;
  margin-bottom: .9rem;
}
.interlude-mark::before,
.interlude-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 32px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--il));
}
.interlude-mark::before { left: 0; }
.interlude-mark::after { right: 0; transform: scaleX(-1); }
.interlude-mark svg {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
.interlude-line {
  max-width: 20em;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(1.65rem, 7.2vw, 2.2rem);
  line-height: 1.15;
  color: var(--blush);
  text-wrap: balance;
}
/* a marquee ribbon already separates these, so skip the little bow line */
.hype-ribbons + .section > .divider { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .7rem 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 143, 199, .55);
  background: linear-gradient(180deg, rgba(52, 26, 58, .92), rgba(23, 17, 26, .92));
  color: var(--bone);
  font-family: var(--font-type);
  font-size: 1rem;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 194, 223, .12), 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease-spring), box-shadow .3s, border-color .3s, background .3s, opacity .3s;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: scale(.95); }
.btn.ghost {
  background: rgba(11, 7, 9, .35);
  border-color: rgba(244, 238, 232, .22);
  box-shadow: none;
}
.btn.is-active {
  border-color: var(--pink);
  animation: btnPulse 1.4s ease-in-out infinite;
}
.btn[disabled] { opacity: .55; pointer-events: none; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 143, 199, .55), 0 10px 26px rgba(0, 0, 0, .45); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 143, 199, 0), 0 10px 26px rgba(0, 0, 0, .45); }
}

/* Divider with a little blood-red bow (sits fully inside the section so the bow isn't clipped) */
.divider {
  position: absolute;
  top: 4px; left: 50%;
  width: min(78%, 520px);
  height: 30px;
  transform: translateX(-50%);
  pointer-events: none;
}
.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 34px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 143, 199, .45));
}
.divider::before { left: 0; }
.divider::after { right: 0; transform: scaleX(-1); }
.divider > span {
  position: absolute;
  left: 50%; top: 50%;
  width: 50px; height: 30px;
  transform: translate(-50%, -50%);
}

/* Corner webs */
.corner-web {
  position: absolute;
  top: var(--safe-t);
  width: clamp(92px, 28vw, 180px);
  aspect-ratio: 1 / 1;
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}
.corner-web.tl { left: 0; }
.corner-web.tr { right: 0; transform: scaleX(-1); }

/* Gentle bob used by lots of art wrappers */
.bob { width: 100%; height: 100%; animation: bob 5.5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -8px, 0) rotate(-1deg); }
}

/* ---------- 6. Scroll reveal ---------- */
/* opacity + transform only: both run on the compositor, so big animated
   blocks (hero stage, cake, cards, VHS frame) don't stutter while scrolling */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 44px, 0) scale(.96);
  transition:
    opacity 1s var(--ease-out) var(--d, 0s),
    transform 1.15s var(--ease-out) var(--d, 0s);
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---------- 7. LOCK (countdown) ---------- */
#lock {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-t)) var(--gutter) calc(24px + var(--safe-b));
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(255, 143, 199, .12), transparent 70%),
    radial-gradient(ellipse at 50% 35%, #2a1630 0%, #150d18 48%, #0b0709 85%);
  transition: opacity 1.1s var(--ease-in-out), visibility 1.1s;
}
#lock::after {
  content: "";
  position: absolute; inset: -10%;
  background-image: var(--grain);
  opacity: .08;
  pointer-events: none;
  animation: grain 1.2s steps(6) infinite;
}
#lock.is-leaving { opacity: 0; visibility: hidden; }

.lock-fog,
.gate-fog {
  position: absolute;
  left: -30%; right: -30%; bottom: -12%;
  height: 45%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 55% at 30% 70%, rgba(244, 238, 232, .07), transparent 70%),
    radial-gradient(ellipse 45% 50% at 70% 80%, rgba(255, 143, 199, .07), transparent 70%);
  filter: blur(8px);
  animation: fogDrift 18s ease-in-out infinite alternate;
}
@keyframes fogDrift {
  from { transform: translate3d(-6%, 0, 0); }
  to   { transform: translate3d(6%, -3%, 0); }
}

.lock-inner { position: relative; z-index: 2; max-width: 460px; }
.lock-coffin-wrap {
  position: relative;
  width: clamp(96px, 30vw, 140px);
  aspect-ratio: 60 / 100;
  margin: 0 auto 1.4rem;
}
.lock-coffin { width: 100%; height: 100%; animation: bob 6s ease-in-out infinite; }
.lock-coffin-glow {
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 199, .32), transparent 62%);
  animation: breathe 3.6s ease-in-out infinite;
}
#lock.is-opening .lock-coffin-glow { animation: none; opacity: 1; transform: scale(1.8); transition: transform 1.2s var(--ease-out); }
@keyframes breathe {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50%      { opacity: 1; transform: scale(1.08); }
}

.lock-title {
  margin: .5rem 0 .6rem;
  font-family: var(--font-goth);
  font-size: clamp(2.6rem, 13vw, 4.4rem);
  line-height: 1;
  color: var(--bone);
}
.lock-sub { font-style: italic; font-size: 1.2rem; color: rgba(244, 238, 232, .8); }
.lock-sub span { color: var(--blush); }

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 1.8rem auto 1.4rem;
}
.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(58px, 17vw, 78px);
  padding: .65rem .35rem .5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 143, 199, .28);
  background: linear-gradient(180deg, rgba(42, 22, 48, .85), rgba(11, 7, 9, .85));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .6), 0 0 16px rgba(255, 143, 199, .08);
}
.cd-num {
  font-family: var(--font-type);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.cd-lab {
  margin-top: .2rem;
  font-family: var(--font-type);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cd-sep {
  padding-top: .9rem;
  font-family: var(--font-type);
  font-size: 1.4rem;
  color: var(--pink);
  opacity: .6;
  animation: blink 1s steps(2) infinite;
}
.lock-foot { font-family: var(--font-type); font-size: .9rem; color: var(--muted); letter-spacing: .06em; }
@keyframes blink { 50% { opacity: .1; } }

/* ---------- 8. GATE ---------- */
#gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--safe-t)) var(--gutter) calc(20px + var(--safe-b));
  text-align: center;
  overflow: hidden;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 70% 42% at 50% 62%, rgba(193, 18, 63, .2), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 42%, #2a1630 0%, #160d19 50%, #0b0709 88%);
  transition: opacity .9s var(--ease-in-out), visibility .9s;
}
#gate::after {
  content: "";
  position: absolute; inset: -10%;
  background-image: var(--grain);
  opacity: .09;
  pointer-events: none;
  animation: grain 1.2s steps(6) infinite;
}
#gate::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 85% at 50% 50%, transparent 50%, rgba(0, 0, 0, .7) 100%);
  z-index: 1;
}
#gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
#gate.is-leaving .gate-inner { animation: none; transform: scale(1.08); }

.gate-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  transition: transform .9s var(--ease-in-out);
  animation: gateIn 1.6s var(--ease-out) both;
}
@keyframes gateIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

.gate-kicker {
  font-family: var(--font-type);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.gate-title {
  margin: .35rem 0 clamp(18px, 5vh, 40px);
  font-family: var(--font-goth);
  font-size: clamp(3rem, 15vw, 5.6rem);
  line-height: 1;
  color: var(--bone);
}
.gate-title span { color: var(--blush); }

.gate-altar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, 2vw, 16px);
}
.gate-candle {
  position: relative;
  flex: 0 0 auto;
  width: clamp(26px, 8.5vw, 46px);
  aspect-ratio: 60 / 160;
  margin-bottom: 4px;
}
.gate-candle .candle-art { width: 100%; height: 100%; position: relative; z-index: 1; }
.gate-candle.c2, .gate-candle.c3 { width: clamp(20px, 6.6vw, 36px); }
.gate-candle.c1 { transform: translateY(-2px); }
.gate-candle .halo {
  position: absolute;
  left: 50%; top: -6%;
  width: 260%;
  aspect-ratio: 1;
  transform: translate(-50%, -30%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 140, .38) 0%, rgba(255, 143, 199, .16) 38%, transparent 68%);
  animation: halo 2.3s ease-in-out infinite;
  pointer-events: none;
}
.gate-candle.c2 .halo { animation-duration: 1.9s; animation-delay: -.6s; }
.gate-candle.c3 .halo { animation-duration: 2.7s; animation-delay: -1.1s; }
.gate-candle.c4 .halo { animation-duration: 2.1s; animation-delay: -.3s; }
@keyframes halo {
  0%, 100% { opacity: .75; transform: translate(-50%, -30%) scale(1); }
  30%      { opacity: .55; transform: translate(-50%, -30%) scale(.93); }
  55%      { opacity: 1;   transform: translate(-50%, -30%) scale(1.06); }
  80%      { opacity: .68; transform: translate(-50%, -30%) scale(.97); }
}

/* the seal */
.seal {
  position: relative;
  flex: 0 0 auto;
  width: clamp(140px, 44vw, 210px);
  aspect-ratio: 1 / 1;
  margin: 0 clamp(4px, 2vw, 14px);
  border-radius: 50%;
  animation: sealPulse 2.8s ease-in-out infinite;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .55);
}
.seal-art, .seal-half, .seal-crack, .seal-flash, .seal-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.seal-ring {
  border-radius: 50%;
  border: 2px solid rgba(255, 143, 199, .55);
  animation: ring 2.8s var(--ease-out) infinite;
}
.seal-half { opacity: 0; }
.seal-half.l { clip-path: polygon(0 0, 50% 0, 50% 11.25%, 46.25% 28.75%, 53.75% 38.75%, 43.75% 52.5%, 52.5% 63.75%, 47.5% 77.5%, 51.25% 91.25%, 51.25% 100%, 0 100%); }
.seal-half.r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 51.25% 100%, 51.25% 91.25%, 47.5% 77.5%, 52.5% 63.75%, 43.75% 52.5%, 53.75% 38.75%, 46.25% 28.75%, 50% 11.25%); }
.seal-crack {
  opacity: 0;
  fill: none;
  stroke: #ffe3f1;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--pink)) drop-shadow(0 0 10px var(--pink));
}
.seal-crack path { stroke-dasharray: 220; stroke-dashoffset: 220; }
.seal-flash {
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 240, 248, .95) 0%, rgba(255, 143, 199, .6) 30%, transparent 65%);
}
.seal:active:not(.is-cracking) { transform: scale(.96); }

.seal.is-cracking { animation: sealShake .5s linear both; }
.seal.is-cracking .seal-ring { animation: none; opacity: 0; }
.seal.is-cracking .seal-crack { opacity: 1; }
.seal.is-cracking .seal-crack path { animation: crackDraw .45s var(--ease-out) forwards; }
.seal.is-cracking .seal-crack path:nth-child(2),
.seal.is-cracking .seal-crack path:nth-child(3) { animation-delay: .18s; }

.seal.is-split { animation: none; }
.seal.is-split .seal-art,
.seal.is-split .seal-crack { opacity: 0; transition: opacity .1s; }
.seal.is-split .seal-half { opacity: 1; }
.seal.is-split .seal-half.l { animation: splitL 1s cubic-bezier(.3, .05, .5, 1) forwards; }
.seal.is-split .seal-half.r { animation: splitR 1s cubic-bezier(.3, .05, .5, 1) forwards; }
.seal.is-split .seal-flash { animation: flash .9s var(--ease-out) forwards; }

@keyframes sealPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes ring {
  0%   { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes sealShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-3px, 1px) rotate(-2deg); }
  30% { transform: translate(3px, -1px) rotate(2deg); }
  45% { transform: translate(-2px, 2px) rotate(-1.5deg); }
  60% { transform: translate(2px, -2px) rotate(1.5deg); }
  80% { transform: translate(-1px, 1px) rotate(-.5deg); }
}
@keyframes crackDraw { to { stroke-dashoffset: 0; } }
@keyframes splitL {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(-46%, 34%) rotate(-32deg); opacity: 0; }
}
@keyframes splitR {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(46%, 30%) rotate(30deg); opacity: 0; }
}
@keyframes flash {
  0%   { opacity: 0; transform: scale(.3); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(3.2); }
}

.gate-hint {
  margin-top: clamp(22px, 5vh, 42px);
  font-family: var(--font-type);
  font-size: 1rem;
  letter-spacing: .14em;
  color: var(--pink);
  animation: hint 2.4s ease-in-out infinite;
}
.gate-sound {
  margin-top: .7rem;
  font-family: var(--font-type);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--muted);
}
@keyframes hint {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* ---------- 10. HERO ---------- */
#main { position: relative; z-index: 1; }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(78px + var(--safe-t));
  padding-bottom: calc(40px + var(--safe-b));
}
#main > .hero {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(42, 22, 48, .95), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 70%, rgba(193, 18, 63, .14), transparent 70%);
}
.hero-moon {
  position: absolute;
  top: calc(58px + var(--safe-t));
  right: 13%;
  width: clamp(44px, 12vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -14px 6px 0 0 var(--bone);
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 8px rgba(255, 194, 223, .3));
  opacity: .8;
}

.hero-copy { position: relative; z-index: 2; max-width: 680px; }
.hero-date { margin-bottom: .6rem; }
.hero-title {
  font-family: var(--font-goth);
  font-size: clamp(3.4rem, 17.5vw, 7.6rem);
  line-height: .92;
  color: var(--bone);
  letter-spacing: .005em;
}
.hero-name {
  display: block;
  margin: .45rem auto .35rem;
  padding: .2rem .4rem;
  min-height: 44px;
  font-family: var(--font-goth);
  font-size: clamp(2.05rem, 10.2vw, 4.2rem);
  line-height: 1.04;
  color: #ffd6ea;
  text-shadow: var(--glow-pink);
  text-wrap: balance;
  user-select: none;
  -webkit-user-select: none;
}
.hero-name span { display: inline-block; }
.hero-name.is-snapped span { animation: snapGlitch .6s steps(2) 1; }
@keyframes snapGlitch {
  0%   { transform: translate(0, 0); text-shadow: var(--glow-pink); }
  20%  { transform: translate(-3px, 1px); text-shadow: 3px 0 var(--blood), -3px 0 #7fe7ff, var(--glow-pink); }
  40%  { transform: translate(3px, -1px); text-shadow: -4px 0 var(--blood), 4px 0 #7fe7ff; }
  60%  { transform: translate(-2px, 0); opacity: .4; }
  80%  { transform: translate(1px, 1px); opacity: 1; }
  100% { transform: translate(0, 0); text-shadow: var(--glow-pink); }
}
.hero-sub {
  font-style: italic;
  font-size: clamp(1.25rem, 5.2vw, 1.6rem);
  color: var(--blush);
}
.hero-sub .heart { font-style: normal; font-size: .85em; }

.hero-stage {
  position: relative;
  width: min(100%, 520px);
  height: clamp(250px, 80vw, 430px);
  margin-top: clamp(10px, 3vh, 28px);
}
.hero-glow {
  position: absolute;
  left: 50%; bottom: 6%;
  width: 90%;
  height: 70%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 143, 199, .22), transparent 65%);
  animation: breathe 5s ease-in-out infinite;
}
.hero-floor {
  position: absolute;
  left: 50%; bottom: 3%;
  width: 70%;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%);
  z-index: 1;
}
.hero-girl {
  position: absolute;
  left: 50%; bottom: 4%;
  width: 56%;
  aspect-ratio: 200 / 260;
  transform: translateX(-50%);
  z-index: 3;
}
.hero-girl .bob { animation-duration: 6s; }
.hero-kitty {
  position: absolute;
  bottom: 5%;
  width: 29%;
  aspect-ratio: 200 / 170;
  z-index: 4;
}
.hero-kitty.left { left: 0; transform: rotate(-9deg); }
.hero-kitty.right { right: 0; transform: rotate(9deg); }
.hero-kitty.left .bob { animation-delay: -1.8s; }
.hero-kitty.right .bob { animation-delay: -3.4s; }

.hero-bat { position: absolute; aspect-ratio: 2 / 1; z-index: 2; }
.hero-bat.bat-a { top: 3%; left: 8%; width: 19%; animation: flyA 9s ease-in-out infinite; }
.hero-bat.bat-b { top: 16%; right: 5%; width: 15%; animation: flyB 11s ease-in-out infinite; }
.hero-bat.bat-c { top: 0; left: 55%; width: 10%; animation: flyA 13s ease-in-out infinite reverse; opacity: .8; }
.hero-bat .bob { animation-duration: 1.6s; }
@keyframes flyA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  33%      { transform: translate3d(14px, -10px, 0) rotate(4deg); }
  66%      { transform: translate3d(-8px, 6px, 0) rotate(-2deg); }
}
@keyframes flyB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); }
  40%      { transform: translate3d(-16px, 8px, 0) rotate(-4deg); }
  75%      { transform: translate3d(6px, -12px, 0) rotate(6deg); }
}

.scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: clamp(26px, 5vh, 44px);
  padding: .4rem 1rem;
  font-family: var(--font-type);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.scroll-arrow {
  width: 14px; height: 14px;
  border-right: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  transform: rotate(45deg);
  animation: arrow 1.8s ease-in-out infinite;
}
@keyframes arrow {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; }
  50%      { transform: translateY(7px) rotate(45deg); opacity: 1; }
}

/* ---------- 11. CAKE ---------- */
#cake { --sec-glow: rgba(42, 22, 48, .75); }
.cake-wrap {
  position: relative;
  width: min(86vw, 380px);
  margin: 0 auto;
}
.cake-halo {
  position: absolute;
  left: 50%; top: 42%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 140, .2), rgba(255, 143, 199, .1) 40%, transparent 68%);
  transition: opacity 1.6s var(--ease-in-out);
  animation: breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}
.cake-wrap.is-dark .cake-halo { opacity: .15; }
.cake-art {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* a soft static shadow + pink glow under the cake (cheaper than a filter over the animated flames) */
.cake-plate {
  position: relative;
  z-index: 0;
  width: 78%;
  height: 22px;
  margin: -18px auto 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 62%),
    radial-gradient(ellipse, rgba(255, 143, 199, .22), transparent 70%);
}

/* candles (from Art.cake) */
.cake-art .candle .flame { transition: opacity .35s ease, visibility 0s .35s; }
.cake-art .candle.is-out .flame {
  opacity: 0 !important;
  visibility: hidden !important;
}
.cake-art .candle .smoke { pointer-events: none; }
.cake-art .candle.is-out .smoke {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: smokeRise 2.6s ease-out forwards;
}
@keyframes smokeRise {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.6); }
  15%  { opacity: .85; }
  55%  { opacity: .5;  transform: translate(3px, -14px) scale(1.15); }
  100% { opacity: 0;   transform: translate(-4px, -30px) scale(1.5); }
}
.cake-art .candle.is-relit .flame { transition: opacity .35s ease; animation: relight .5s var(--ease-spring); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes relight {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* emoji fallback cake (only if art.js is missing) */
.fallback-cake { position: relative; display: grid; place-items: center; height: 100%; font-size: 9rem; line-height: 1; }
.fallback-cake .candles { position: absolute; top: 6%; display: flex; gap: 2.2rem; font-size: 2rem; }
.fallback-cake .candle { position: relative; }
.fallback-cake .smoke { position: absolute; left: 50%; top: -10px; width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 238, 232, .5); opacity: 0; }
.fallback-cake .flame { display: block; min-height: 1.2em; }
.fallback-cake .candle::after { content: ""; display: block; width: 8px; height: 34px; margin: 0 auto; border-radius: 2px; background: var(--bone); }

/* lights-flicker fallback (only if effects.js is missing) */
body.is-flickering #main { animation: pageFlicker .9s steps(1) 1; }
@keyframes pageFlicker {
  0%, 22%, 48%, 100% { opacity: 1; }
  10%, 35%, 60%      { opacity: .15; }
  70%                { opacity: .6; }
}

.cake-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
}
.cake-status {
  font-family: var(--font-type);
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--blush);
}

.wish-granted {
  margin-top: 2rem;
  animation: wishIn 1.4s var(--ease-out) both;
}
.wish-main {
  font-family: var(--font-goth);
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1;
  color: #ffd6ea;
}
.wish-aside {
  margin-top: .45rem;
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(244, 238, 232, .8);
}
@keyframes wishIn {
  0%   { opacity: 0; transform: scale(.85); filter: blur(8px); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ---------- 12. MONTHS ---------- */
.coffins {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 3vw, 22px) clamp(6px, 2.4vw, 20px);
  max-width: 560px;
  margin: 0 auto;
}
.coffin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.coffin-art {
  position: relative;
  width: 100%;
  max-width: 72px;
  aspect-ratio: 60 / 100;
  transform: translateY(8px) scale(.94);
  transition: transform .8s var(--ease-spring), filter .8s;
  filter: saturate(.6) brightness(.8);
}
.coffin-art > span { position: absolute; inset: 0; display: block; transition: opacity .9s var(--ease-in-out); }
.coffin-art > .on { opacity: 0; }
/* static pink glow behind a lit coffin (a filter here would re-blur every frame) */
.coffin-art::before {
  content: "";
  position: absolute;
  left: 50%; top: 45%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 199, .3), transparent 60%);
  opacity: 0;
  transition: opacity .9s var(--ease-in-out);
  pointer-events: none;
}
.coffin.is-lit .coffin-art { transform: none; filter: none; }
.coffin.is-lit .coffin-art::before { opacity: 1; }
.coffin.is-lit .coffin-art > .on { opacity: 1; }
.coffin.is-lit .coffin-art > .off { opacity: 0; }
.coffin-num {
  font-family: var(--font-type);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .6s;
}
.coffin.is-lit .coffin-num { color: var(--blush); }

.coffin.is-yours { grid-column: auto; }
.coffin.is-yours.is-lit .coffin-art {
  animation: yours 2.2s ease-in-out infinite;
}
.coffin.is-yours::before {
  content: "";
  position: absolute;
  left: 50%; top: 32%;
  width: 180%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 199, .45), transparent 65%);
  opacity: 0;
  transition: opacity 1.2s, transform 1.2s var(--ease-out);
  pointer-events: none;
}
.coffin.is-yours.is-lit::before { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: breathe 2.2s ease-in-out infinite; }
@keyframes yours {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.yours-label {
  grid-column: 1 / -1;
  justify-self: end;
  position: relative;
  margin-top: .2rem;
  padding: .45rem .9rem;
  font-family: var(--font-type);
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--pink);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-spring);
}
.yours-label::before {
  content: "";
  position: absolute;
  top: -6px;
  right: calc(var(--arrow-x, 28px));
  width: 12px; height: 12px;
  background: var(--pink);
  transform: rotate(45deg);
  border-radius: 2px;
}
.yours-label.is-on { opacity: 1; transform: none; }

.together {
  margin: clamp(40px, 9vw, 64px) auto 0;
  max-width: 360px;
  padding: 1.4rem 1.2rem 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 143, 199, .25);
  background: linear-gradient(180deg, rgba(42, 22, 48, .6), rgba(11, 7, 9, .6));
}
.together-num {
  font-family: var(--font-goth);
  font-size: clamp(3.4rem, 16vw, 5rem);
  line-height: 1;
  color: #ffd6ea;
  font-variant-numeric: tabular-nums;
}
.together-lab { font-style: italic; font-size: 1.3rem; color: var(--bone); }
.together-clock {
  margin-top: .3rem;
  font-family: var(--font-type);
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 13. LETTER ---------- */
#letter { --sec-glow: rgba(42, 22, 48, .6); }
.envelope-stage {
  position: relative;
  width: min(88vw, 420px);
  margin: 0 auto;
  transition: opacity .55s var(--ease-in-out), transform .55s var(--ease-in-out);
}
.envelope-stage.is-gone { opacity: 0; transform: translateY(24px) scale(.94); pointer-events: none; }
.envelope {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 300 / 200;
  margin-top: 40px;
  animation: envFloat 4.5s ease-in-out infinite;
}
.envelope-art { position: absolute; inset: 0; z-index: 2; display: block; }
.envelope-shadow {
  position: absolute;
  left: 8%; right: 8%; bottom: -18px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .75), transparent 70%);
  z-index: 0;
}
.envelope-seal {
  position: absolute;
  left: 50%; top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -42%);
  z-index: 3;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
  transition: transform .6s var(--ease-in-out), opacity .45s;
}
.envelope .flap {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transition: transform .75s var(--ease-in-out);
}
.envelope-peek {
  position: absolute;
  left: 9%; right: 9%;
  top: 12%; height: 76%;
  z-index: 1;
  display: block;
  padding: 12% 10%;
  border-radius: 4px;
  background: var(--bone);
  background-image: var(--paper-noise);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .35);
  transform: translateY(0);
  transition: transform 1s var(--ease-out) .45s;
}
.envelope-peek span {
  display: block;
  height: 5px;
  margin-bottom: 9px;
  border-radius: 3px;
  background: rgba(11, 7, 9, .18);
}
.envelope-peek span:nth-child(2) { width: 80%; }
.envelope-peek span:nth-child(3) { width: 55%; }

.envelope.is-open { animation: none; }
.envelope.is-open .flap { transform: scaleY(-1); }
.envelope.is-open .envelope-seal { transform: translate(-50%, -160%) rotate(-24deg) scale(.7); opacity: 0; }
.envelope.is-open .envelope-peek { transform: translateY(-58%); z-index: 1; }
@keyframes envFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

.letter-paper {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(46px, 11vw, 70px) clamp(22px, 7vw, 56px) clamp(40px, 9vw, 60px);
  text-align: left;
  color: #231a1f;
  background-color: #f3ebe1;
  background-image:
    var(--paper-noise),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(120, 84, 60, .16) 100%);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 26px 54px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(0, 0, 0, .25);
  transform-origin: 50% 0%;
  animation: unfold 1.2s var(--ease-out) both;
}
@keyframes unfold {
  0%   { opacity: 0; transform: perspective(900px) translateY(40px) rotateX(-28deg) scaleY(.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.paper-bow {
  position: absolute;
  top: -16px; left: 50%;
  width: 84px; height: 50px;
  transform: translateX(-50%) rotate(-4deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}
.letter-date {
  margin-bottom: 1rem;
  text-align: right;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  line-height: 1.2;
  color: rgba(35, 26, 31, .62);
}

/* handwriting that "inks in" one paragraph at a time */
.letter-body p {
  margin: 0 0 .7em;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(1.4rem, 6.2vw, 1.7rem);
  line-height: 1.42;
  color: #241a20;
  overflow-wrap: break-word;
  opacity: 0;
  filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, rgba(0, 0, 0, 0) 60%);
  mask-image: linear-gradient(90deg, #000 40%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition:
    opacity .9s ease,
    filter 1.3s ease,
    -webkit-mask-position 1.7s cubic-bezier(.33, .1, .3, 1),
    mask-position 1.7s cubic-bezier(.33, .1, .3, 1);
}
.letter-body p.is-written {
  opacity: 1;
  filter: none;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.letter-body p.is-instant { transition-duration: .45s; }
.letter-body p:first-child {
  font-weight: 700;
  font-size: clamp(1.85rem, 8vw, 2.3rem);
  line-height: 1.15;
  color: #8f0c2f;
}
.letter-body p:last-child { margin-bottom: 0; }

.letter-end {
  position: relative;
  margin-top: 1.4rem;
  padding-right: 90px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.letter-end.is-on { opacity: 1; transform: none; }
.letter-signoff {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 6vw, 1.6rem);
  line-height: 1.3;
  color: #2a1f25;
}
.letter-from {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2rem, 8.5vw, 2.5rem);
  line-height: 1.1;
  color: #8f0c2f;
}
.letter-stamp {
  position: absolute;
  right: -6px; bottom: -14px;
  width: 76px; height: 76px;
  transform: rotate(-14deg) scale(1.6);
  opacity: 0;
  transition: transform .5s var(--ease-spring) .5s, opacity .3s .5s;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}
.letter-end.is-on .letter-stamp { transform: rotate(-14deg) scale(1); opacity: .95; }
.letter-skip {
  margin-top: 1.4rem;
  text-align: center;
  font-family: var(--font-type);
  font-size: .95rem;
  letter-spacing: .06em;
  color: rgba(35, 26, 31, .74);
  transition: opacity .6s;
}
.letter-skip.is-hidden { opacity: 0; }

/* ---------- 14. REASONS (tarot) ---------- */
.tarot-shell { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.tarot-rail {
  --card-w: min(70vw, 270px);
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 26px calc(50% - var(--card-w) / 2) 34px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(50% - var(--card-w) / 2);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tarot-rail::-webkit-scrollbar { display: none; }

.tarot {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  aspect-ratio: 3 / 5;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  perspective: 1200px;
  -webkit-perspective: 1200px;
  text-align: center;
  transition: transform .5s var(--ease-out);
}
.tarot:active { transform: scale(.98); }
.tarot-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.3, 1.25, .45, 1);
}
.tarot.is-flipped .tarot-inner { transform: rotateY(180deg); }
.tarot-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 14px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 143, 199, .22);
}
.tarot-front {
  background: #120b14;
  transform: rotateY(0deg);
}
.tarot-front > span { position: absolute; inset: 0; display: block; }
.tarot-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 194, 223, .16) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: sheen 5s ease-in-out infinite;
  pointer-events: none;
}
.tarot:nth-child(3n+2) .tarot-front::after { animation-delay: -1.7s; }
.tarot:nth-child(3n) .tarot-front::after { animation-delay: -3.3s; }
@keyframes sheen {
  0%, 60%, 100% { background-position: 120% 0; }
  30%           { background-position: -20% 0; }
}
.tarot-back {
  transform: rotateY(180deg);
  justify-content: center;
  padding: 1.3rem 1.1rem;
  color: #1d151a;
  background-color: #f2e9df;
  background-image:
    var(--paper-noise),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 80, 60, .22) 100%);
}
.tarot-back::before,
.tarot-back::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.tarot-back::before {
  inset: 9px;
  border: 1.5px solid rgba(29, 21, 26, .75);
  border-radius: 9px;
}
.tarot-back::after {
  inset: 14px;
  border: 1px solid rgba(193, 18, 63, .45);
  border-radius: 6px;
}
.tarot-num {
  font-family: var(--font-goth);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--blood);
}
.tarot-bow { width: 58px; height: 35px; margin: .45rem 0 .5rem; }
.tarot-title {
  font-family: var(--font-goth);
  font-size: clamp(1.55rem, 7vw, 1.95rem);
  line-height: 1.05;
  color: #140d11;
  text-wrap: balance;
  margin-bottom: .6rem;
}
.tarot-text {
  font-style: italic;
  font-size: clamp(1.05rem, 4.5vw, 1.18rem);
  line-height: 1.35;
  color: #2a1f25;
  text-wrap: pretty;
}

.rail-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px; height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 143, 199, .4);
  background: rgba(11, 7, 9, .7);
  color: var(--pink);
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: opacity .3s, transform .2s;
}
.rail-btn:active { transform: scale(.92); }
.rail-btn.prev { left: max(6px, var(--safe-l)); }
.rail-btn.next { right: max(6px, var(--safe-r)); }
.rail-btn[disabled] { opacity: 0; pointer-events: none; }

.tarot-count {
  font-family: var(--font-type);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--blush);
}
.tarot-count span { color: var(--bone); }
.tarot-hint {
  margin-top: .45rem;
  font-family: var(--font-type);
  font-size: .95rem;
  letter-spacing: .08em;
  color: rgba(244, 238, 232, .72);
}

/* ---------- 15. PHOTOS ---------- */
.polaroids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 5vw, 34px) clamp(14px, 4vw, 30px);
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 4px;
}
.polaroid-slot { display: block; min-width: 0; }
.polaroid {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 9px 0;
  background: #f5f0ea;
  background-image: var(--paper-noise);
  border-radius: 2px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .2);
  transform: rotate(var(--r, -2deg));
  transition: transform .5s var(--ease-spring), box-shadow .5s;
}
.polaroid:active { transform: rotate(0deg) scale(1.03); }
.polaroid-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #1a1218;
  filter: contrast(1.04) saturate(.92) sepia(.06);
}
.polaroid-cap {
  display: block;
  min-height: 2.8em;
  padding: .45rem .15rem .55rem;
  font-family: var(--font-type);
  font-size: .82rem;
  line-height: 1.25;
  color: #2a1f25;
  overflow-wrap: anywhere;
}
.polaroid-tape {
  position: absolute;
  top: -11px; left: 50%;
  width: 62px; height: 22px;
  transform: translateX(-50%) rotate(calc(var(--r, -2deg) * -2));
  background: rgba(255, 143, 199, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(60px + var(--safe-t)) var(--gutter) calc(40px + var(--safe-b));
  background: rgba(8, 5, 7, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fadeIn .35s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lb-figure {
  margin: 0;
  max-width: min(92vw, 720px);
  padding: 12px 12px 0;
  background: #f5f0ea;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
  animation: lbIn .5s var(--ease-spring) both;
}
@keyframes lbIn { from { transform: scale(.85) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lb-figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  max-height: calc(100svh - 220px);
  margin: 0 auto;
  object-fit: contain;
}
.lb-figure figcaption {
  padding: .7rem .2rem .9rem;
  text-align: center;
  font-family: var(--font-type);
  font-size: 1rem;
  color: #2a1f25;
}
.lb-close, .lb-nav {
  position: absolute;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 7, 9, .7);
  border: 1px solid rgba(255, 143, 199, .4);
  color: var(--bone);
  font-size: 1.8rem;
  line-height: 1;
}
.lb-close { top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
.lb-nav { top: 50%; margin-top: -24px; }
.lb-nav.prev { left: calc(8px + var(--safe-l)); }
.lb-nav.next { right: calc(8px + var(--safe-r)); }

/* ---------- 16. CLOWN (black & white + red, VHS) ---------- */
.clown-section {
  --sec-bg: rgba(21, 21, 21, .96);
  --sec-glow: rgba(255, 255, 255, .06);
  --guest-accent: #ff5a74;
  color: #eeeeee;
}
/* starting colours for the other two guests (olivia.css / barca.css can change them) */
.olivia-section {
  --sec-bg: rgba(31, 14, 52, .94);
  --sec-glow: rgba(180, 140, 255, .16);
  --guest-accent: #d9c2ff;
}
.barca-section {
  --sec-bg: rgba(11, 31, 77, .95);
  --sec-glow: rgba(0, 77, 152, .32);
  --guest-accent: #edbb00;
}
/* (the page-wide grain on body::after already covers this section) */
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  container-type: size;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .14) 2px 3px);
}
.scanlines::after {
  --band: 90px;
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--band));
  height: var(--band);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .035), transparent);
  will-change: transform;
  animation: roll 7s linear infinite;
}
/* moves with transform (compositor only), never with top. 100cqh = the
   height of the box the band rolls through. Browsers without container
   units just keep the faint band parked out of sight. */
@keyframes roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(100cqh + var(--band)), 0); }
}
.clown-section .kicker { color: var(--guest-accent); }
.clown-section .section-title { color: #f2f2f2; }
.clown-section .section-lede { color: rgba(238, 238, 238, .72); }
.clown-section .section-head { position: relative; z-index: 2; }

/* above the section scanlines (z 4): the frame has its own, and the present + hint stay crisp */
.clown-stage {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 6px;
}

/* the little VHS frame holding the Art the Clown GIFs (from Tenor) */
.clown-frame {
  position: relative;
  z-index: 1;
  width: min(88vw, 360px);
  max-width: 100%;
  margin: 0 auto;
  transition: opacity .6s ease;
}
.clown-frame.is-gone { opacity: 0; pointer-events: none; }
.vhs {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1.5px solid rgba(244, 238, 232, .8);
  border-radius: 10px;
  background: #0d0d0d;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .5), 0 22px 44px rgba(0, 0, 0, .6);
  -webkit-tap-highlight-color: transparent;
}
@supports not (aspect-ratio: 1 / 1) {
  .vhs { height: 0; padding-bottom: 100%; }
}
.vhs::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: var(--grain);
  opacity: .14;
  animation: grain 1s steps(5) infinite;
  pointer-events: none;
}
.vhs-gif {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  opacity: 0;
  transition: opacity .9s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.vhs-gif.is-on.is-loaded { opacity: 1; }
.vhs-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  container-type: size;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .2) 2px 3px);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .55);
}
.vhs-lines::after {
  --band: 60px;
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--band));
  height: var(--band);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .05), transparent);
  will-change: transform;
  animation: roll 6s linear infinite;
}
.vhs-rec,
.vhs-date {
  position: absolute;
  z-index: 3;
  font-family: var(--font-type);
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .12em;
  color: rgba(244, 238, 232, .88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  pointer-events: none;
}
.vhs-rec {
  top: 11px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vhs-rec i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blood);
  animation: blink 1.4s steps(2) infinite;
}
.vhs-date { right: 12px; bottom: 11px; }

/* the present sits under the frame */
.present-spot {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(14px, 4vw, 24px);
}
.present {
  position: relative;
  display: block;
}
.clown-present {
  width: clamp(116px, 36vw, 150px);
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7));
  animation: nudge 3.2s ease-in-out infinite 2s;
}
.present-art { position: absolute; inset: 0; display: block; }
.present .lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .9s cubic-bezier(.2, 1.4, .4, 1), opacity .9s;
}
.clown-present.is-open { animation: none; }
.clown-present.is-open.is-poked { animation: poke .5s var(--ease-spring); }
@keyframes poke {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(.92) rotate(-3deg); }
  70%      { transform: scale(1.04) rotate(2deg); }
}
.clown-present.is-open .lid { transform: translate(-22%, -62%) rotate(-38deg); opacity: 0; transition-duration: 1.2s; }
@keyframes nudge {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(-4deg) translateY(-3px); }
  88% { transform: rotate(4deg); }
  92% { transform: rotate(-2deg); }
  96% { transform: rotate(1deg); }
}
.present-hint {
  margin-top: .5rem;
  font-family: var(--font-type);
  font-size: .95rem;
  line-height: 1.3;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .88);
  animation: hintSoft 2.4s ease-in-out infinite;
  transition: opacity .4s;
  pointer-events: none;
}
.present-hint.is-hidden { opacity: 0; animation: none; }
@keyframes hintSoft {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

.balloons { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.balloon {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: clamp(44px, 13vw, 60px);
  aspect-ratio: 60 / 140;
  opacity: 0;
  animation: balloonUp 3.6s var(--ease-out) forwards;
  animation-delay: var(--delay, 0s);
}
.balloon > span {
  display: block;
  width: 100%; height: 100%;
  transform-origin: 50% 100%;
  animation: balloonBob 3.2s ease-in-out infinite;
  animation-delay: var(--bob, 0s);
}
@keyframes balloonUp {
  0%   { opacity: 0; transform: translate3d(-50%, 40%, 0) scale(.4); }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(calc(-50% + var(--dx, 0px)), var(--rise, -250px), 0) scale(1); }
}
@keyframes balloonBob {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-6px); }
}

.clown-note {
  position: relative;
  z-index: 5;
  max-width: 460px;
  margin: 2rem auto 0;
  padding: 1.3rem 1.3rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid var(--blood);
  background: rgba(0, 0, 0, .55);
  text-align: left;
  animation: noteIn .9s var(--ease-out) both;
}
@keyframes noteIn {
  0%   { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
.clown-message {
  font-family: var(--font-type);
  font-size: clamp(1.02rem, 4.4vw, 1.15rem);
  line-height: 1.6;
  color: #f2f2f2;
}
.clown-sig {
  margin-top: .7rem;
  text-align: right;
  font-family: var(--font-horror);
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--blood);
}

/* ---------- 17. FINALE ---------- */
.finale {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(40px + var(--safe-b));
  --sec-bg: rgba(24, 10, 22, .6);
  --sec-glow: rgba(255, 143, 199, .1);
}
/* the last section only fades in at the top: its bottom is the end of the page */
#main > .finale {
  background:
    radial-gradient(ellipse 90% 40% at 50% 55%, var(--sec-glow), transparent 72%),
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(193, 18, 63, .16), transparent 70%),
    linear-gradient(180deg, transparent 0, var(--sec-bg) var(--seam), var(--sec-bg) 100%);
}
.finale-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 194, 223, .8), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(244, 238, 232, .7), transparent),
    radial-gradient(1.5px 1.5px at 46% 22%, rgba(255, 143, 199, .7), transparent),
    radial-gradient(1px 1px at 64% 12%, rgba(244, 238, 232, .8), transparent),
    radial-gradient(2px 2px at 80% 26%, rgba(255, 194, 223, .7), transparent),
    radial-gradient(1px 1px at 90% 8%, rgba(244, 238, 232, .6), transparent),
    radial-gradient(1.5px 1.5px at 8% 40%, rgba(244, 238, 232, .5), transparent),
    radial-gradient(1px 1px at 94% 44%, rgba(255, 143, 199, .6), transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.finale-line {
  font-family: var(--font-goth);
  font-size: clamp(3.5rem, 18vw, 8rem);
  line-height: .95;
  color: #ffd6ea;
  text-wrap: balance;
}
.finale-line span { display: inline-block; }
.finale.is-lit .finale-line span { animation: heartbeatText 1.6s ease-in-out 3; }
@keyframes heartbeatText {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.06); }
  20% { transform: scale(.99); }
  30% { transform: scale(1.04); }
}
.finale-sub {
  margin-top: 1rem;
  max-width: 440px;
  font-style: italic;
  font-size: clamp(1.25rem, 5.2vw, 1.55rem);
  color: var(--bone);
  text-wrap: balance;
}
/* the guest wall: Art, Olivia and Messi all came */
.guest-wall {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px 12px;
  width: min(100%, 440px);
  margin: 0 auto clamp(40px, 9vw, 60px);
  padding: 14px 6px 0;
}
.guest-wall .guest-polaroid {
  justify-self: center;
  width: 100%;
  max-width: 200px;
  transform: rotate(var(--r, -3deg));
}
.guest-wall .g-art { --r: -5deg; }
.guest-wall .g-olivia { --r: 4deg; margin-top: 18px; }
/* Messi sits under the other two, close but never on top of their captions */
.guest-wall .g-barca {
  --r: -2deg;
  grid-column: 1 / -1;
  z-index: 3;
  width: 56%;
  max-width: 210px;
  margin-top: 8px;
}
.guest-wall .guest-polaroid .gif-polaroid-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35em;
  padding: .3rem .1rem .45rem;
  font-size: clamp(1.1rem, 4.7vw, 1.4rem);
  line-height: 1.02;
  text-wrap: balance;
}
.guest-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 3;
  width: 60px;
  height: 20px;
  transform: translateX(-50%) rotate(-5deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  opacity: .9;
  pointer-events: none;
}
.g-art .guest-tape { background: repeating-linear-gradient(90deg, rgba(244, 238, 232, .9) 0 6px, rgba(193, 18, 63, .9) 6px 12px); }
.g-olivia .guest-tape { background: rgba(196, 166, 255, .85); transform: translateX(-50%) rotate(6deg); }
.g-barca .guest-tape { background: repeating-linear-gradient(90deg, #004d98 0 8px, #a50044 8px 16px); }
.guest-wall .finale-kitty { grid-column: 1 / -1; justify-self: center; }
.guest-wall .finale-bat { width: 20%; }
.guest-wall .finale-bat.b1 { left: -3%; top: -6%; }
.guest-wall .finale-bat.b2 { right: -3%; left: auto; top: 52%; }
.gif-polaroid {
  position: relative;
  z-index: 2;
  width: min(220px, 62vw);
  margin: 0;
  padding: 10px 10px 0;
  background-color: #f5f0ea;
  background-image: var(--paper-noise);
  border-radius: 2px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .2);
  transform: rotate(-4deg);
  transition: opacity .6s ease;
}
.gif-polaroid.is-gone { opacity: 0; }
.gif-polaroid-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #140d12;
}
@supports not (aspect-ratio: 1 / 1) {
  .gif-polaroid-box { height: 0; padding-bottom: 100%; }
}
.gif-polaroid-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.gif-polaroid-img.is-loaded { opacity: 1; }
.gif-polaroid-cap {
  display: block;
  padding: .4rem .2rem .55rem;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #2a1f25;
  text-align: center;
}
.finale-kitty {
  width: min(56%, 190px);
  aspect-ratio: 200 / 170;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 143, 199, .2), transparent);
}
.finale-bat {
  position: absolute;
  z-index: 1;
  width: 22%;
  aspect-ratio: 2 / 1;
  pointer-events: none;
}
.finale-bat.b1 { left: 0; top: 4%; animation: flyA 8s ease-in-out infinite; }
.finale-bat.b2 { right: 0; top: 34%; animation: flyB 10s ease-in-out infinite; }
.finale-bat .bob { animation-duration: 1.4s; }
.finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.site-footer {
  margin-top: clamp(48px, 10vh, 90px);
  font-family: var(--font-type);
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--muted);
}
.site-footer span[data-cfg] { color: var(--blush); }
.foot-heart {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: .15em;
  vertical-align: -.16em;
  filter: drop-shadow(0 0 4px rgba(255, 143, 199, .45));
}

/* ---------- 19. Music toggle + toast ---------- */
#music-toggle {
  position: fixed;
  top: calc(12px + var(--safe-t));
  right: calc(12px + var(--safe-r));
  z-index: 70;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 143, 199, .45);
  background: rgba(11, 7, 9, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--pink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  animation: fadeIn .8s ease backwards;
  transition: transform .25s var(--ease-spring), opacity .2s ease, border-color .3s, color .3s;
}
/* moves out of the way when something she reads or taps is under it (main.js) */
#music-toggle.is-left { right: auto; left: calc(12px + var(--safe-l)); }
#music-toggle.is-hop { opacity: 0; pointer-events: none; }
#music-toggle.is-soft { opacity: .34; transform: scale(.84); }
#music-toggle.is-tucked { opacity: .2; transform: scale(.7); pointer-events: none; }
#music-toggle:active { transform: scale(.9); }
#music-toggle .mt-note {
  position: relative;
  font-size: 1.35rem;
  line-height: 1;
  transition: opacity .3s;
}
#music-toggle .mt-bars {
  position: absolute;
  bottom: 9px;
  left: 50%;
  display: flex;
  gap: 2px;
  transform: translateX(-50%);
  height: 8px;
  align-items: flex-end;
}
#music-toggle .mt-bars i {
  display: block;
  width: 2px;
  height: 3px;
  background: var(--pink);
  border-radius: 1px;
  opacity: 0;
}
#music-toggle.is-playing .mt-note { transform: translateY(-4px); }
#music-toggle.is-playing .mt-bars i { opacity: .85; animation: eq .8s ease-in-out infinite alternate; }
#music-toggle.is-playing .mt-bars i:nth-child(2) { animation-delay: -.3s; animation-duration: .6s; }
#music-toggle.is-playing .mt-bars i:nth-child(3) { animation-delay: -.5s; animation-duration: .9s; }
@keyframes eq { from { height: 2px; } to { height: 8px; } }
#music-toggle:not(.is-playing) { color: var(--muted); border-color: rgba(244, 238, 232, .2); }
#music-toggle:not(.is-playing) .mt-note::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  top: 50%;
  height: 2px;
  background: currentColor;
  transform: rotate(-40deg);
  border-radius: 1px;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--safe-b));
  z-index: 80;
  max-width: calc(100% - 40px);
  padding: .75rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 143, 199, .45);
  background: rgba(17, 11, 20, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--bone);
  font-family: var(--font-type);
  font-size: .95rem;
  letter-spacing: .03em;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translate(-50%, 20px) scale(.96);
  transition: opacity .35s ease, transform .45s var(--ease-spring);
  pointer-events: none;
}
#toast.is-show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- 20. Emoji fallbacks (only if art.js failed) ---------- */
.art-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(1.5rem, 8vw, 3rem);
  line-height: 1;
}

/* ---------- 21. Larger screens ---------- */
@media (min-width: 560px) {
  .polaroids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  body { font-size: 1.25rem; }
  .hero-stage { height: 440px; }
}
@media (min-width: 1000px) {
  .tarot-shell { margin: 0 auto; max-width: 1180px; }
  .tarot-rail {
    --card-w: 200px;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    padding: 20px 0 36px;
    scroll-snap-type: none;
    gap: 22px;
  }
  .rail-btn { display: none; }
  .tarot-hint { display: none; }
  .tarot-title { font-size: 1.45rem; }
  .tarot-text { font-size: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--pink); }
  .tarot:hover { transform: translateY(-6px); }
  .polaroid:hover { transform: rotate(0deg) scale(1.03); }
}

/* Short landscape phones: keep the gate compact */
@media (max-height: 520px) and (orientation: landscape) {
  .gate-title { font-size: 2.6rem; margin-bottom: 10px; }
  .seal { width: 120px; }
  .gate-hint { margin-top: 12px; }
  .corner-web { width: 80px; }
}

/* Very narrow phones */
@media (max-width: 350px) {
  .gate-candle.c1, .gate-candle.c4 { display: none; }
  .cd-cell { min-width: 52px; }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  body::after, #gate::after, #lock::after, .vhs::before, .scanlines::after, .vhs-lines::after { animation: none !important; }
}