/* ============================================================
   Brian's 40th — "Opening Night"
   Chalkboard poster behind a black velvet curtain.
   ============================================================ */

:root {
  /* surfaces — near-black chalkboard (neutral, matches the printed invite) */
  --board:        oklch(14% 0.003 260);
  --board-deep:   oklch(10% 0.003 260);
  --velvet-dark:  oklch(9%  0.005 265);
  --velvet-mid:   oklch(14% 0.006 265);
  --velvet-lite:  oklch(20% 0.008 265);

  /* inks */
  --chalk:        oklch(93% 0.012 85);
  --chalk-dim:    oklch(74% 0.014 85);
  --chalk-faint:  oklch(63% 0.012 80);
  --line:         oklch(35% 0.012 80);
  --red:          oklch(54% 0.185 27);
  --red-bright:   oklch(62% 0.195 27);
  --red-shadow:   oklch(36% 0.130 27);
  --gold:         oklch(76% 0.115 88);
  --gold-deep:    oklch(63% 0.115 84);
  --gold-dark:    oklch(42% 0.090 80);

  /* type */
  --f-script: 'Kaushan Script', 'Brush Script MT', cursive;
  --f-num:    'Anton', 'Arial Narrow', sans-serif;
  --f-slab:   'Graduate', 'Rockwell', serif;
  --f-sans:   'Oswald', 'Arial Narrow', sans-serif;

  /* space — 4pt scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 96px;

  /* motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-curtain:   cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--board);
  color: var(--chalk);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65; /* light-on-dark: extra leading */
  min-height: 100dvh;
}

body.curtained { overflow: hidden; }

h1, h2, h3, p, fieldset, figure { margin: 0; padding: 0; }
fieldset { border: 0; }

/* the hidden attribute must beat display:flex/grid on the same element */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

a { color: var(--gold); }

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

/* ---------- atmosphere layers ---------- */

.vignette {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 40;
  background: radial-gradient(ellipse 130% 100% at 50% 38%,
              transparent 55%, oklch(4% 0.003 260 / 0.5) 100%);
}

.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.13;
  mix-blend-mode: overlay;
}

/* ============================================================
   THE CURTAIN
   ============================================================ */

#stage {
  position: fixed; inset: 0;
  z-index: 100;
  cursor: pointer;
  background: var(--board-deep);
  -webkit-tap-highlight-color: transparent;
}

#stage.open { pointer-events: none; }

.spotlight {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 34%,
              oklch(95% 0.06 90 / 0.16), transparent 58%);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out-quint) 300ms;
}
#stage.open .spotlight { opacity: 1; }

.curtain {
  position: absolute; top: 0; bottom: 0;
  width: 50.5%;
  overflow: hidden;
  transition: transform 1700ms var(--ease-curtain) 120ms;
  will-change: transform;
}
.curtain--left  { left: 0;  z-index: 2; }
.curtain--right { right: 0; z-index: 1; }

#stage.open .curtain--left  { transform: translateX(-104%); }
#stage.open .curtain--right { transform: translateX(104%); }

.fabric {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      oklch(8% 0.012 70 / 0.55) 0%, transparent 16%,
      transparent 72%, oklch(8% 0.012 70 / 0.5) 100%),
    repeating-linear-gradient(90deg,
      var(--velvet-dark) 0px,
      var(--velvet-mid)  26px,
      var(--velvet-lite) 50px,
      var(--velvet-mid)  74px,
      var(--velvet-dark) 100px);
  transform-origin: 50% 0;
  animation: sway 7s var(--ease-in-out) infinite alternate;
}
.curtain--right .fabric { animation-delay: -3.5s; }

@keyframes sway {
  from { transform: translateX(-3px) skewX(0.15deg); }
  to   { transform: translateX(3px)  skewX(-0.15deg); }
}

/* gold embroidery — one copy per panel, clipped by the panel,
   both aligned to the viewport so the text splits down the middle.
   lifted above the fabric so nothing darkens the gold at the seam */
.embroidery {
  z-index: 1;
  position: absolute; top: 0; height: 100%;
  width: 100vw;
  display: grid; place-content: center;
  text-align: center;
  padding-bottom: 8dvh;
}
.curtain--left  .embroidery { left: 0; }
.curtain--right .embroidery { right: 0; }

.emb-eyebrow {
  font-family: var(--f-slab);
  font-size: clamp(0.68rem, 2.6vw, 0.95rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* optical: balance tracking on centered caps */
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-md);
}

.emb-num {
  font-family: var(--f-num);
  font-size: clamp(11rem, 55vw, 28rem);
  line-height: 0.86;
  color: var(--gold);
  letter-spacing: 0.02em;
  text-shadow:
    0 2px 0 oklch(88% 0.09 92 / 0.35),
    0 -2px 2px oklch(20% 0.05 80 / 0.9),
    0 10px 26px oklch(8% 0.012 70 / 0.55);
}

.emb-th {
  font-size: 0.3em;
  vertical-align: 1.25em;
  letter-spacing: 0.06em;
  margin-left: 0.05em;
  color: var(--gold);
}

.emb-ornament {
  margin-top: var(--space-lg);
  height: 10px;
  background:
    radial-gradient(circle 5px at 50% 50%, var(--gold-deep) 4px, transparent 5px),
    linear-gradient(var(--gold-dark), var(--gold-dark)) 50% 50% / 140px 1px no-repeat;
}

.valance {
  position: absolute; top: 0; left: -2%; right: -2%;
  height: 12dvh; min-height: 72px;
  z-index: 3;
  background:
    linear-gradient(180deg, var(--velvet-lite), var(--velvet-mid) 60%, var(--velvet-dark))
      top left / 100% calc(100% - 28px) no-repeat,
    radial-gradient(circle 30px at 34px 0, var(--velvet-dark) 24px, var(--gold-dark) 25px, var(--gold-dark) 27.5px, transparent 28.5px)
      bottom left / 68px 30px repeat-x;
  filter: drop-shadow(0 10px 14px oklch(8% 0.012 70 / 0.55));
  transition: transform 900ms var(--ease-curtain) 500ms;
}
#stage.open .valance { transform: translateY(-115%); }

.stage-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: max(28px, env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 4;
  text-align: center;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--gold-deep);
  animation: hint-pulse 2.4s var(--ease-in-out) infinite alternate;
  transition: opacity 300ms;
}
#stage.open .stage-hint { opacity: 0; animation: none; }

@keyframes hint-pulse {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* ============================================================
   THE POSTER
   ============================================================ */

main { position: relative; z-index: 10; }

.poster {
  max-width: 44rem;
  margin: clamp(12px, 3vw, 28px) auto;
  padding: var(--space-3xl) clamp(20px, 6vw, 56px) var(--space-2xl);
  border: 1px solid oklch(70% 0.012 85 / 0.4);
  outline: 1px solid oklch(70% 0.012 85 / 0.16);
  outline-offset: 6px;
}

@media (max-width: 480px) {
  .poster { margin: 10px; outline-offset: 4px; padding-top: var(--space-2xl); }
}

/* ---------- hero ---------- */

.hero { text-align: center; }

.eyebrow {
  font-size: clamp(0.72rem, 2.8vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.hero-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 2vw, 16px);
  margin-top: var(--space-md);
  color: var(--chalk);
  position: relative;
  z-index: 2;
}

.script-name {
  font-family: var(--f-script);
  font-size: clamp(3.4rem, 15vw, 6.8rem);
  line-height: 1.1;
  transform: rotate(-3deg);
  text-shadow: 3px 3px 0 var(--red-shadow);
  padding-right: 0.15em; /* Kaushan's final flourish clips otherwise */
}

.burst {
  width: clamp(22px, 6vw, 40px);
  height: auto;
  color: var(--red);
  flex: none;
}
.burst--r { transform: scaleX(-1); }

.hero-num {
  font-family: var(--f-num);
  font-size: clamp(11rem, 56vw, 14rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--chalk);
  margin-top: calc(-1 * var(--space-sm));
  text-shadow: 5px 5px 0 oklch(10% 0.02 75 / 0.7);
}

.ord {
  font-size: 0.2em;
  letter-spacing: 0.08em;
  vertical-align: 2.6em;
  margin-left: 0.08em;
  border-bottom: 5px double var(--red);
  padding-bottom: 0.12em;
}

.hero-bday {
  font-family: var(--f-script);
  font-size: clamp(3.8rem, 17vw, 7.6rem);
  line-height: 1.05;
  color: var(--chalk);
  transform: rotate(-4deg);
  margin-top: calc(-1 * var(--space-xl));
  text-shadow: 3px 3px 0 var(--red-shadow);
  padding-right: 0.15em;
  position: relative;
  z-index: 2;
}

.flourish {
  width: clamp(200px, 62vw, 340px);
  height: auto;
  color: var(--red);
  margin-top: var(--space-xs);
}

.hero-sub { margin-top: var(--space-xl); }

.sub-a {
  font-family: var(--f-slab);
  font-size: clamp(0.95rem, 4vw, 1.3rem);
  color: var(--chalk);
}

.sub-lig {
  font-family: var(--f-slab);
  font-size: clamp(1.7rem, 8vw, 3rem);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-transform: uppercase;
  color: var(--chalk);
  margin-top: var(--space-xs);
}

.sub-party-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.pline { width: clamp(36px, 12vw, 72px); height: 3px; background: var(--red); }

.sub-party {
  font-family: var(--f-script);
  font-size: clamp(2rem, 9vw, 3.2rem);
  color: var(--red-bright);
  transform: rotate(-3deg);
  padding: 0 0.1em 0.15em 0;
}

/* ---------- details ---------- */

.details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  text-align: center;
}

.detail + .detail { border-left: 1px solid var(--line); }

.detail { padding: var(--space-sm) var(--space-sm) 0; }

.detail-icon { width: 46px; height: 46px; color: var(--red-bright); }

.detail h2 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-top: var(--space-sm);
}

.detail p {
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.5;
  margin-top: var(--space-sm);
  text-wrap: balance;
}

.detail .addr { font-weight: 300; font-size: 0.92em; color: var(--chalk-dim); }

@media (max-width: 560px) {
  .details { grid-template-columns: 1fr; gap: var(--space-xl); }
  .detail + .detail { border-left: 0; padding-top: var(--space-xl); border-top: 2px dotted oklch(42% 0.012 80); }
}

.cal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 2px dotted oklch(42% 0.012 80);
}

/* ---------- section chrome ---------- */

.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  white-space: nowrap;
  font-family: var(--f-slab);
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--chalk);
  text-align: center;
  margin-bottom: var(--space-xl);
}
.section-head::before, .section-head::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}

.script-accent {
  font-family: var(--f-script);
  color: var(--red-bright);
  transform: rotate(-2deg);
}

section.countdown, section.where, section.rsvp { margin-top: var(--space-3xl); }

/* scroll-in reveal */
.section-observe {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out-quint), transform 700ms var(--ease-out-quint);
}
.section-observe.in { opacity: 1; transform: none; }

/* ---------- countdown ---------- */

.cd {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 18px);
}

.cd-unit { display: grid; justify-items: center; gap: var(--space-xs); }

.cd-num {
  font-family: var(--f-num);
  font-size: clamp(2.5rem, 11vw, 4.4rem);
  line-height: 1;
  color: var(--chalk);
  min-width: 2.1ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cd-sep {
  font-family: var(--f-num);
  font-size: clamp(2rem, 9vw, 3.6rem);
  line-height: 1.15;
  color: var(--red);
}

.cd-label {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.cd-done {
  text-align: center;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  margin-top: var(--space-lg);
}

/* ---------- map ---------- */

.where { text-align: center; }

.where-venue {
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--chalk-dim);
  margin-bottom: var(--space-lg);
}

.map-frame {
  position: relative;
  background: oklch(96% 0.008 90);
  padding: 8px 8px 16px;
  transform: rotate(-1.2deg);
  box-shadow: 0 18px 36px -16px oklch(8% 0.012 70 / 0.75);
}

.map-frame::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 18px; height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--red-bright), var(--red) 55%, var(--red-shadow));
  box-shadow: 0 3px 5px oklch(8% 0.012 70 / 0.5);
}

.map-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  filter: saturate(0.82) contrast(0.96);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ---------- buttons ---------- */

.btn {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms, transform 100ms;
}
.btn:active { transform: translateY(1px); }

.btn--ghost {
  color: var(--gold);
  background: transparent;
  border: 1px solid oklch(55% 0.08 86 / 0.7);
}
@media (hover: hover) {
  .btn--ghost:hover { border-color: var(--gold); background: oklch(76% 0.115 88 / 0.09); }
}

.btn--gold {
  width: 100%;
  color: oklch(20% 0.05 80);
  background: var(--gold);
  border: 1px solid var(--gold);
  font-size: 1.02rem;
  padding: 16px 24px;
}
@media (hover: hover) {
  .btn--gold:hover { background: oklch(81% 0.11 90); border-color: oklch(81% 0.11 90); }
}
.btn--gold:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* ---------- rsvp ---------- */

.rsvp { max-width: 30rem; margin-inline: auto; }

/* ---------- gated content (revealed with the invite code) ---------- */

.detail .loc-locked {
  font-size: 1rem;
  color: var(--chalk-faint);
  font-style: italic;
}

.where-locked {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0 var(--space-lg);
}
.where-lock-icon { width: 42px; height: 42px; color: var(--gold-deep); }
.where-locked p { color: var(--chalk-dim); max-width: 34ch; margin-inline: auto; }
.where-locked .btn { width: auto; }

/* ---------- invite-code gate ---------- */

.gate { max-width: 27rem; margin-inline: auto; text-align: center; }

.gate-key {
  width: 40px; height: 40px;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.gate-lead {
  font-size: clamp(2rem, 8vw, 2.8rem);
  margin-bottom: var(--space-xs);
}

.gate-sub {
  color: var(--chalk-dim);
  margin-bottom: var(--space-lg);
}

.gate-row { display: flex; gap: var(--space-sm); }

.gate-row input {
  flex: 1;
  min-width: 0;
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gate-row input::placeholder { text-transform: none; letter-spacing: 0.05em; }

.gate-btn { width: auto; flex: none; }

.gate-err { margin-top: var(--space-md); text-align: center; }

@media (max-width: 400px) {
  .gate-row { flex-direction: column; }
  .gate-btn { width: 100%; }
}

.rsvp-ask {
  text-align: center;
  font-size: clamp(2rem, 8.5vw, 2.9rem);
  margin-bottom: var(--space-xl);
}

#rsvp-form { display: grid; gap: var(--space-lg); }

.field label, .field legend {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin-bottom: var(--space-sm);
}
.field small { text-transform: none; letter-spacing: 0.05em; color: var(--chalk-faint); }

input[type="text"], textarea {
  width: 100%;
  background: oklch(12% 0.003 260);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--chalk);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1.05rem;
  padding: 12px 16px;
}
input[type="text"]::placeholder, textarea::placeholder { color: var(--chalk-faint); }
textarea { resize: vertical; min-height: 5.5rem; }

input[aria-invalid="true"], .field--attend[data-invalid] .chip span { border-color: var(--red-bright); }

.field-err, .form-err {
  color: var(--red-bright);
  font-weight: 400;
  font-size: 0.92rem;
  margin-top: var(--space-sm);
}
.form-err { text-align: center; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 400px) { .chips { grid-template-columns: 1fr; } }

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 52px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms, color 150ms, background-color 150ms;
}

.chip span::before {
  content: "✶";
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 150ms;
}

.chip input:checked + span {
  border-color: var(--gold);
  color: var(--gold);
  background: oklch(76% 0.115 88 / 0.07);
}
.chip input:checked + span::before { opacity: 1; }

.chip input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.stepper {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
}

.step {
  width: 52px; height: 52px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--chalk);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
@media (hover: hover) { .step:hover { border-color: var(--gold-deep); } }
.step:disabled { opacity: 0.35; cursor: default; }

.stepper output {
  font-family: var(--f-num);
  font-size: 1.9rem;
  min-width: 3ch;
  display: grid;
  place-content: center;
  color: var(--chalk);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.nojs-note { text-align: center; color: var(--chalk-dim); font-size: 1.05rem; }

.rsvp-done { text-align: center; padding: var(--space-xl) 0; }
.done-headline { font-size: clamp(2.4rem, 10vw, 3.4rem); }
.done-sub { margin-top: var(--space-md); color: var(--chalk-dim); font-size: 1.05rem; }

/* ---------- footer ---------- */

.foot { margin-top: var(--space-3xl); text-align: center; }

.foot-vibes {
  font-family: var(--f-slab);
  font-size: clamp(0.82rem, 3.4vw, 1.05rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--chalk);
}
.foot-vibes .star { color: var(--red-bright); margin: 0 0.4em; }

.ribbon {
  margin: var(--space-lg) auto 0;
  max-width: 36rem;
  transform: rotate(-0.6deg);
}
.ribbon p {
  font-family: var(--f-slab);
  font-size: clamp(0.95rem, 4vw, 1.3rem);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-transform: uppercase;
  color: oklch(94% 0.02 60);
  background: var(--red);
  padding: 16px clamp(28px, 8vw, 48px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
}
.ribbon-40 { color: oklch(93% 0.06 90); }

.foot-small {
  margin-top: var(--space-xl);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--chalk-faint);
}

/* ============================================================
   ENTRANCES
   ============================================================ */

.reveal { opacity: 0; }

body.revealed .reveal {
  animation: rise 800ms var(--ease-out-quint) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* hero title — held hidden while the curtains part, then performs its
   entrance in full view once they've opened (JS adds .curtains-open ~1.5s
   in). each line lands on its own beat; the "40" stamps in for impact. */
.hero-name, .hero-num, .hero-bday { opacity: 0; }

body.curtains-open .hero-name {
  animation: name-sweep 1060ms var(--ease-out-quint) 80ms both;
}
body.curtains-open .hero-num {
  animation: num-stamp 980ms var(--ease-out-quint) 400ms both;
}
body.curtains-open .hero-bday {
  animation: bday-sweep 1100ms var(--ease-out-quint) 720ms both;
}

@keyframes name-sweep {
  from { opacity: 0; transform: translateY(38px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes num-stamp {
  from { opacity: 0; transform: scale(1.28); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bday-sweep {
  from { opacity: 0; transform: translateY(48px) rotate(-4deg) scale(0.88); }
  to   { opacity: 1; transform: rotate(-4deg) scale(1); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fabric { animation: none; }
  .stage-hint { animation: none; opacity: 0.9; }
  .curtain, .valance { transition: none; }
  #stage { transition: opacity 400ms ease-out; }
  #stage.open { opacity: 0; }
  #stage.open .curtain--left, #stage.open .curtain--right { transform: none; }
  #stage.open .valance { transform: none; }
  .reveal, body.revealed .reveal { animation: none; opacity: 1; }
  .hero-name, .hero-num, .hero-bday,
  body.curtains-open .hero-name, body.curtains-open .hero-num, body.curtains-open .hero-bday {
    animation: none; opacity: 1;
  }
  .section-observe { opacity: 1; transform: none; transition: none; }
}