/* ═══════════════════════════════════════════════════════════════════
   For my Hazel — red velvet, gold foil.
   Type / radius / motion follow the playnext "penguin" design system:
   Fredoka (display) + Plus Jakarta Sans (body), fixed px scale,
   soft rounded radii, ease-out standard / expo emphasized.
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── palette: red velvet cake ───────────────────────────────────── */
  --velvet:      #7B0F23;
  --velvet-deep: #4A0716;
  --velvet-dark: #2B0510;
  --crimson:     #C41E3A;
  --rose:        #FF4D6D;
  --gold:        #E8B44A;
  --gold-pale:   #F7DFA5;
  --cream:       #FFF0E6;
  --cream-dim:   rgba(255,240,230,.68);

  /* ── type (DS: two families, fixed scale) ───────────────────────── */
  --display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --t-display: 60px;  --t-h1: 32px;  --t-h2: 28px;  --t-h3: 24px;
  --t-h4: 20px;       --t-h5: 18px;  --t-h6: 16px;
  --t-bodyLg: 18px;   --t-body: 16px; --t-bodySm: 14px;
  --t-caption: 13px;  --t-micro: 12px;

  /* ── radius (DS) ────────────────────────────────────────────────── */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 9999px;

  /* ── motion (DS) ────────────────────────────────────────────────── */
  --e-standard: cubic-bezier(0.25, 1, 0.5, 1);
  --e-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 120ms; --d-base: 180ms; --d-slow: 240ms; --d-moment: 400ms;

  --pad: 32px;
  --measure: 60ch;
}
@media (min-width: 900px) { :root { --pad: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--cream);
  background: var(--velvet-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* velvet ground: deep pool + the diagonal nap of the fabric */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: radial-gradient(120% 85% at 50% -10%, var(--velvet) 0%, var(--velvet-deep) 45%, var(--velvet-dark) 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; opacity: .5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(65deg,  rgba(0,0,0,.10)       0 3px, transparent 3px 9px);
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 600;
  line-height: 1.08; letter-spacing: -.01em; margin: 0;
}
p { margin: 0; }
em { font-style: normal; color: var(--gold); }

/* gold foil — display only, used sparingly */
.foil, .hero__title em, .curtain__title em {
  background: linear-gradient(175deg, var(--gold-pale) 8%, var(--gold) 45%, #C08B2C 65%, var(--gold-pale) 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* utility/eyebrow role — body face, tracked out (keeps the 2-family cap) */
.eyebrow {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--cream-dim); margin: 0 0 12px;
}
.eyebrow--gold { color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-xs); }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  font-family: var(--body); font-size: var(--t-h6); font-weight: 700;
  padding: 14px 32px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid rgba(232,180,74,.55);
  background: rgba(255,240,230,.1);
  color: var(--cream);
  transition: transform var(--d-base) var(--e-emphasized),
              box-shadow var(--d-base) var(--e-standard),
              background var(--d-base) var(--e-standard);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.btn--gold {
  border: none; color: var(--velvet-dark);
  background: linear-gradient(170deg, var(--gold-pale), var(--gold) 55%, #C08B2C);
  box-shadow: 0 8px 28px rgba(232,180,74,.3), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ═══ CURTAIN ══════════════════════════════════════════════════════ */
.curtain { position: fixed; inset: 0; z-index: 1300; overflow: hidden; }
.curtain__panel {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background: repeating-linear-gradient(90deg,
    #5E0C1B 0px, #8A1228 26px, #A81730 46px, #8A1228 66px, #5E0C1B 92px);
  box-shadow: inset 0 0 120px rgba(0,0,0,.7), 0 0 60px rgba(0,0,0,.6);
  transition: transform 1.5s var(--e-emphasized);
}
.curtain__panel--l { left: 0; }
.curtain__panel--r { right: 0; }
.curtain__panel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(90deg, transparent, rgba(232,180,74,.6));
}
.curtain__panel--l::after { right: 0; }
.curtain__panel--r::after { left: 0; transform: scaleX(-1); }

.curtain__center {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; padding: var(--pad);
  transition: opacity var(--d-slow) var(--e-standard), transform 800ms var(--e-standard);
}
.curtain__title {
  font-size: 46px; font-weight: 700; line-height: 1.15;
  margin-bottom: 28px; letter-spacing: 0;
  filter: drop-shadow(0 6px 26px rgba(0,0,0,.6));
  animation: wiggle 5s ease-in-out infinite;
}
.curtain__title em { font-weight: 700; }
@media (min-width: 600px) { .curtain__title { font-size: 68px; } }
@keyframes wiggle { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* the heart that beats next to her name */
.beat { display: inline-block; animation: beat 1.3s var(--e-standard) infinite; }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.28); }
  30% { transform: scale(1); }
  45% { transform: scale(1.18); }
}

/* little hearts drifting up above the title */
.hearts { display: flex; justify-content: center; gap: 14px; margin-bottom: 10px; }
.hearts span {
  font-size: 20px; opacity: 0;
  animation: floaty 3.6s ease-in-out infinite;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.hearts span:nth-child(1) { animation-delay: 0s;   font-size: 16px; }
.hearts span:nth-child(2) { animation-delay: .45s; }
.hearts span:nth-child(3) { animation-delay: .9s;  font-size: 24px; }
.hearts span:nth-child(4) { animation-delay: 1.35s; }
.hearts span:nth-child(5) { animation-delay: 1.8s; font-size: 17px; }
@keyframes floaty {
  0%   { opacity: 0; transform: translateY(10px) scale(.8) rotate(-8deg); }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px) scale(1.05) rotate(8deg); }
}

.curtain.is-open { pointer-events: none; }
.curtain.is-open .curtain__panel--l { transform: translateX(-101%) scaleX(1.15); }
.curtain.is-open .curtain__panel--r { transform: translateX(101%)  scaleX(1.15); }
.curtain.is-open .curtain__center { opacity: 0; transform: scale(.92); }
.curtain.is-gone { display: none; }

/* ═══ GATE ═════════════════════════════════════════════════════════ */
.gate {
  position: fixed; inset: 0; z-index: 1400; display: grid; place-content: center;
  text-align: center; padding: var(--pad); background: var(--velvet-dark);
}
.gate[hidden] { display: none; }
.gate__card { max-width: 30rem; }
.gate__title { font-size: var(--t-h1); margin-bottom: 12px; }
.gate__note { color: var(--cream-dim); margin-bottom: 32px; }

/* ═══ SITE + ACTS ══════════════════════════════════════════════════ */
.site { opacity: 0; transition: opacity 600ms var(--e-standard) 200ms; }
.site.is-live { opacity: 1; }

.act {
  position: relative; min-height: 100svh;
  display: grid; align-content: safe center; justify-items: center; gap: 24px;
  padding: 72px var(--pad); text-align: center;
}
.act__head { max-width: var(--measure); }
.act__title { font-size: var(--t-h1); }
@media (min-width: 600px) { .act__title { font-size: 40px; } }

.act + .act::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(86%, 900px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,180,74,.42), transparent);
}

/* ── ACT I hero ───────────────────────────────────────────────────── */
.hero__flower { width: min(64vmin, 340px); filter: drop-shadow(0 24px 50px rgba(0,0,0,.55)); }
.flower { width: 100%; height: auto; display: block; cursor: pointer; }
.flower__initials { fill: var(--gold-pale); font-family: var(--display); font-weight: 700; letter-spacing: 1px; }
.flower__name { fill: var(--gold); font-family: var(--body); font-weight: 700; opacity: .9; }
/* head grows from nothing, then the whole plant rocks forever */
.flower__bloom { transform-box: fill-box; transform-origin: center;
  animation: bloom 1.5s ease-out both; }
.flower__disc { opacity: 0; animation: pop 700ms var(--e-emphasized) 900ms forwards; }
.flower__sway { transform-box: fill-box; transform-origin: bottom center;
  animation: sway 7s ease-in-out 1.5s infinite; }
@keyframes bloom { from { transform: scale(0) rotate(-60deg); } to { transform: scale(1) rotate(0deg); } }
@keyframes pop   { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes sway  { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.hero__title { font-size: 38px; }
@media (min-width: 600px) { .hero__title { font-size: var(--t-display); } }
.hero__sub { color: var(--cream-dim); max-width: 40ch; font-size: var(--t-bodyLg); }
.scroll-cue {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--cream-dim);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 50% { transform: translateY(7px); opacity: .45; } }

/* ── ACT II stage cards ───────────────────────────────────────────── */
.card--stage {
  display: grid; align-content: center; gap: 12px; text-align: left;
  padding: 24px;
}
.card--stage .tl__list li { font-size: var(--t-bodySm); line-height: 1.5; }
.tl__when {
  display: block; font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px;
}
.tl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl__list li { position: relative; padding-left: 18px; font-size: var(--t-body); }
.tl__list li::before {
  content: "·"; position: absolute; left: 0; top: -.15em;
  color: var(--gold); font-size: 1.6em; line-height: 1;
}
.tl__list li.tl__punch {
  font-family: var(--display); font-weight: 600; font-size: var(--t-h4);
  color: var(--gold-pale); margin-top: 8px;
}
.tl__list li.tl__punch::before { content: "♥"; font-size: .7em; top: .3em; }

/* ── SWIPER — one card per screen, mobile-first ───────────────────── */
.swiper { width: 100%; display: grid; justify-items: center; gap: 24px; }
.swiper__track {
  display: flex; align-items: center; gap: 16px; width: 100vw;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 8px calc((100vw - min(80vw, 460px)) / 2);
}
.swiper__track::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 min(80vw, 460px); scroll-snap-align: center; margin: 0;
  border-radius: var(--r-lg);
  border: 1px solid rgba(232,180,74,.3);
  background: rgba(255,240,230,.06);
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
  opacity: .45; transform: scale(.94);
  transition: transform var(--d-slow) var(--e-emphasized),
              opacity var(--d-slow) var(--e-standard),
              border-color var(--d-slow) var(--e-standard);
}
.card.is-active { opacity: 1; transform: none; border-color: rgba(232,180,74,.55); }

.card--letter {
  display: grid; align-content: center; gap: 20px; text-align: left;
  min-height: 46svh; padding: 32px;
}
.card__lead {
  font-family: var(--display); font-weight: 500; line-height: 1.35;
  font-size: var(--t-h3); color: var(--gold-pale);
}
.card__sign { font-size: var(--t-micro); font-weight: 700; letter-spacing: .22em;
  color: var(--gold); text-align: right; }

/* memes are just the image, edge to edge. The card hugs the picture
   instead of using the fixed card width, so portrait and landscape
   memes both sit cleanly and never overflow the screen. */
.card--meme {
  flex: 0 0 auto; max-width: 84vw;
  padding: 0; overflow: hidden; align-self: center;
  display: grid; place-items: center;
}
.card__media {
  display: grid; place-items: center; min-height: 52svh; border-radius: var(--r-sm);
  background: rgba(0,0,0,.22); border: 1px solid rgba(232,180,74,.16);
  color: var(--cream-dim); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
/* when the card holds a real image instead of the placeholder box */
img.card__media, video.card__media {
  display: block; min-height: 0;
  width: auto; max-width: 100%;
  height: auto; max-height: 60svh;      /* keeps tall memes on screen */
  border: none; border-radius: 0; background: none;
}
.card--meme figcaption { margin-top: 12px; color: var(--cream-dim); font-size: var(--t-bodySm); }

.swiper__bar { display: flex; align-items: center; gap: 16px; }
.nav {
  width: 44px; height: 44px; border-radius: var(--r-pill); cursor: pointer;
  display: grid; place-items: center; font-size: var(--t-h3); line-height: 1;
  font-family: var(--body); color: var(--gold); background: rgba(255,240,230,.06);
  border: 1px solid rgba(232,180,74,.35);
  transition: background var(--d-base) var(--e-standard),
              transform var(--d-base) var(--e-emphasized), opacity var(--d-base);
}
.nav:hover { background: rgba(232,180,74,.18); transform: scale(1.08); }
.nav:disabled { opacity: .25; cursor: default; transform: none; }

.dots { display: flex; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: rgba(255,240,230,.25);
  cursor: pointer; transition: background var(--d-slow), width var(--d-slow) var(--e-emphasized); }
.dots i.on { background: var(--gold); width: 24px; }

.swipe-hint {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  transition: opacity var(--d-slow);
}
.swipe-hint::after { content: " →"; display: inline-block; animation: nudge 1.5s ease-in-out infinite; }
.swipe-hint.is-done { opacity: 0; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* ── FOOTER ───────────────────────────────────────────────────────── */
.foot { display: grid; justify-items: center; gap: 16px;
  padding: 64px var(--pad) 80px; text-align: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--r-pill); font-size: var(--t-bodySm);
  border: 1px solid rgba(232,180,74,.3); background: rgba(255,240,230,.05); color: var(--cream-dim);
}
.chip[hidden] { display: none; }
.chip b { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
/* ── live countdown: a little wall calendar that ticks ────────────── */
.countdown { display: grid; justify-items: center; gap: 14px; margin: 8px 0; }

.cal {
  position: relative; width: 148px; padding: 0 0 12px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,240,230,.12), rgba(255,240,230,.05));
  border: 1px solid rgba(232,180,74,.42);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,240,230,.18);
  overflow: hidden;
}
/* the crimson binding strip, with two ring holes */
.cal__top {
  height: 22px; background: linear-gradient(180deg, var(--crimson), #8A1228);
  display: flex; align-items: center; justify-content: center; gap: 34px;
  border-bottom: 1px solid rgba(0,0,0,.3);
}
.cal__top i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--velvet-dark); box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
}
.cal__num {
  display: block; padding-top: 8px;
  font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 18px rgba(232,180,74,.35);
}
.cal__label {
  display: block; margin-top: 2px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--cream-dim);
}
/* the page flips over when the day count changes */
.cal__num.is-flip { animation: flip 620ms var(--e-emphasized); }
@keyframes flip {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  60%  { transform: rotateX(12deg);  opacity: 1; }
  100% { transform: rotateX(0);      opacity: 1; }
}

.countdown__text { max-width: 30ch; color: var(--cream); font-size: var(--t-bodySm); }
/* the live h/m/s readout, so you can watch it move */
.countdown__tick {
  font-family: var(--display); font-weight: 500; font-size: var(--t-h6);
  color: var(--gold-pale); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.countdown__tick s { text-decoration: none; font-size: .7em; opacity: .55; margin-left: 1px; }
.countdown__tick em { font-style: normal; color: var(--gold); animation: pip 1s steps(2) infinite; }
@keyframes pip { 50% { opacity: .55; } }
.receipt { display: flex; align-items: baseline; gap: 8px; width: min(100%, 340px);
  font-size: var(--t-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cream-dim); }
.receipt__dots { flex: 1; border-bottom: 1px dotted rgba(255,240,230,.3); }
.receipt b { color: var(--gold); }
.foot__fine { font-size: var(--t-micro); letter-spacing: .08em; color: rgba(255,240,230,.35); }

/* ═══ NICKNAME DARTS — pet-names in little vessels ════════════════ */
.dart {
  position: fixed; z-index: 1100; pointer-events: none;
  width: max-content; max-width: 60vw;
  display: grid; place-items: center; text-align: center;
  font-family: var(--body); font-weight: 700; font-size: var(--t-bodySm);
  white-space: nowrap; will-change: transform, opacity; transform-origin: center;
}
.dart--pill, .dart--rect, .dart--circle, .dart--ticket, .dart--tag {
  color: var(--cream);
  border: 1px solid rgba(232,180,74,.5);
  background: linear-gradient(165deg, rgba(123,15,35,.94), rgba(74,7,22,.94));
  box-shadow: 0 6px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,240,230,.16);
}
.dart--pill   { padding: 10px 20px; border-radius: var(--r-pill); }
.dart--rect   { padding: 10px 18px; border-radius: var(--r-sm); }
.dart--tag    { padding: 10px 18px; border-radius: var(--r-sm) var(--r-pill) var(--r-pill) var(--r-sm); }
.dart--circle { width: 116px; height: 116px; border-radius: 50%; padding: 8px;
                font-size: var(--t-caption); line-height: 1.25; white-space: normal; }
.dart--ticket {
  padding: 10px 20px; border-radius: var(--r-xs);
  border-style: dashed; color: var(--gold-pale);
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
}

/* ═══ CONFETTI ════════════════════════════════════════════════════ */
.confetti-cv { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }

/* ═══ WHISPER TOAST ═══════════════════════════════════════════════ */
.whisper {
  position: fixed; left: 50%; bottom: 88px; z-index: 1400;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 14px 24px; border-radius: var(--r-pill);
  border: 1px solid rgba(232,180,74,.45);
  background: rgba(43,5,16,.94); color: var(--gold-pale);
  font-family: var(--display); font-weight: 500; font-size: var(--t-h6);
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  transition: opacity var(--d-slow) var(--e-standard), transform var(--d-slow) var(--e-emphasized);
}
.whisper.show { opacity: 1; transform: translate(-50%, 0); }

.goldfish { position: fixed; top: 32%; left: -90px; z-index: 1000; width: 66px;
  pointer-events: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }

/* ═══ SCROLL REVEAL ═══════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity var(--d-moment) var(--e-standard), transform var(--d-moment) var(--e-emphasized); }
.reveal.in { opacity: 1; transform: none; }

/* ═══ RESPONSIVE ══════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .swiper__track { padding-inline: calc((100vw - min(58vw, 520px)) / 2); }
  .card { flex-basis: min(58vw, 520px); }
  .card--meme { flex-basis: auto; max-width: 58vw; }   /* still hugs its image */
}

/* ═══ REDUCED MOTION ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .flower__bloom, .flower__disc, .flower__sway, .scroll-cue,
  .curtain__title, .beat, .hearts span,
  .cal__num, .countdown__tick em { animation: none !important; opacity: 1 !important; transform: none !important; }
  .swipe-hint::after { animation: none !important; }
  .curtain__panel { transition-duration: var(--d-slow); }
}