/* ---------- Tokens ---------- */
:root {
  --night: #000;
  --night-2: #0d0d0d;
  --gold: #fff;
  --gold-soft: #fff;
  --text: #e9e9e9;
  --muted: #8b8b8b;
  --velvet: #111;
  --velvet-dark: #000;
  --paper: #f4f3ef;
  --ink: #161616;
  --serif: "Cormorant Garamond", Georgia, serif;
  --hand: "Caveat", "Segoe Script", cursive;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--text);
  font: 400 1.2rem/1.55 var(--serif);
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3 { font-weight: 400; line-height: 1.15; margin: 0; }

.eyebrow {
  margin: 0 0 0.4rem;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ---------- Background stars ---------- */
#starfield { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#starfield i, .stardust i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

/* ---------- Gate: the closed curtain ---------- */
.gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; overflow: hidden; }
.curtain {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), transparent 30%, rgba(0,0,0,0.45)),
    repeating-linear-gradient(90deg, var(--velvet-dark) 0 6px, var(--velvet) 22px, #8e1a2c 30px, var(--velvet) 38px, var(--velvet-dark) 54px);
  transition: transform 2.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.curtain.left { left: 0; transform-origin: left; }
.curtain.right { right: 0; transform-origin: right; }
.valance {
  position: absolute; top: 0; left: 0; right: 0; height: 56px;
  background: radial-gradient(ellipse at 50% 0, #8e1a2c 0 60%, transparent 61%) 0 0 / 120px 70px repeat-x, var(--velvet-dark);
  border-bottom: 3px solid var(--gold);
  transition: transform 2.4s ease-in;
}
.gate.open .curtain.left { transform: translateX(-100%) scaleX(0.6); }
.gate.open .curtain.right { transform: translateX(100%) scaleX(0.6); }
.gate.open .valance { transform: translateY(-120%); }
.gate.open { pointer-events: none; }

.gate-card {
  position: relative;
  width: min(440px, 100%);
  padding: 2rem 1.5rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--gold);
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 6px;
  transition: opacity 0.6s, transform 0.6s;
}
.gate-card h1 { font-size: 2.2rem; color: var(--gold-soft); }
.gate-card .riddle { font-style: italic; margin: 1rem 0 1.4rem; }
.gate-card input {
  width: 100%; padding: 0.6rem 0.8rem;
  font: inherit; text-align: center; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--gold);
  outline: none;
}
.gate-card button {
  margin-top: 1.2rem; padding: 0.55rem 1.4rem;
  background: var(--gold); color: var(--night); border: 0; letter-spacing: 0.05em;
}
.gate-card.busy button { opacity: 0.6; }
.gate-card .wrong { min-height: 1.5em; margin: 1rem 0 0; color: var(--gold-soft); font-style: italic; }
.gate-card .hints { list-style: none; padding: 0; margin: 0.5rem 0 0; color: var(--muted); font-size: 1rem; }
.gate-card .hints li::before { content: "✦ "; color: var(--gold); }
.gate-card.gone { opacity: 0; transform: translateY(-20px); }
.shake { animation: shake 0.45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Chapters ---------- */
#stage { max-width: 900px; margin: 0 auto; padding: 1rem 16px 5rem; }
.chapter { animation: fade-up 0.9s both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
.chapter-head { text-align: center; margin: 1.5rem auto 1.5rem; max-width: 620px; }
.chapter-head h2 { font-size: clamp(2rem, 6vw, 3rem); color: var(--gold-soft); }
.chapter-head .intro { color: var(--text); opacity: 0.9; }

.reveal {
  max-width: 620px; margin: 1rem auto; text-align: center; font-style: italic;
  opacity: 0; transform: translateY(8px); transition: opacity 1s, transform 1s;
}
.reveal.shown { opacity: 1; transform: none; }
.reveal.done { color: var(--gold-soft); }
.reveal.note { padding: 0.8rem 1rem; border-left: 2px solid var(--gold); text-align: left; background: rgba(255,255,255,0.03); }

.continue {
  display: block; margin: 2.5rem auto 0; padding: 0.7rem 1.6rem;
  background: none; border: 1px solid var(--gold); color: var(--gold);
  letter-spacing: 0.05em;
  opacity: 0; transition: opacity 1s, background 0.3s, color 0.3s;
}
.continue.shown { opacity: 1; }
.continue:hover { background: var(--gold); color: var(--night); }

.icon-btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(0, 0, 0, 0.9); color: var(--gold);
}
#music { position: fixed; right: 16px; bottom: 16px; z-index: 6; }
#music.playing { background: var(--gold); color: var(--night); }

/* ---------- Overture ---------- */
.overture { text-align: center; padding: 18vh 0 0; }
.overture h1 { font-size: clamp(3rem, 12vw, 5.5rem); color: var(--gold-soft); font-style: italic; }
.overture .lead { max-width: 560px; margin: 1.5rem auto 0; font-size: 1.35rem; }

/* ---------- Act I: sky ---------- */
.sky-wrap { position: relative; width: min(100%, 78vh); margin: 0 auto; }
.sky-chart { display: block; width: 100%; aspect-ratio: 1; touch-action: manipulation; cursor: crosshair; }
.sky-label {
  position: absolute; margin: 0; transform: translate(-50%, -150%);
  padding: 0.1rem 0.5rem; font-size: 0.95rem; white-space: nowrap; pointer-events: none;
  background: rgba(0, 0, 0, 0.95); border: 1px solid rgba(255, 255, 255, 0.5);
}
.sky-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; margin-top: 0.5rem; color: var(--muted); font-size: 1rem; }
.sky-controls input[type=range] { width: 180px; accent-color: var(--gold); vertical-align: middle; }
.sky-controls input[type=checkbox] { accent-color: var(--gold); }
.sky-caption { text-align: center; color: var(--muted); font-size: 1rem; }
.sky-caption .found { color: var(--gold); }

/* ---------- Act II: contest ---------- */
.candles { display: flex; justify-content: center; gap: 1.8rem; margin: 1rem 0 2rem; }
.candle { position: relative; width: 10px; height: 46px; background: linear-gradient(#f6efe2, #cfc3a8); border-radius: 2px; }
.candle i {
  position: absolute; left: 50%; bottom: 100%; width: 10px; height: 18px; margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6c8, #f2b33b 60%, transparent 70%);
  opacity: 0; transform: scale(0.3); transition: opacity 0.6s, transform 0.6s;
}
.candle.lit i { opacity: 1; transform: none; animation: flicker 1.8s infinite alternate; }
.candle.lit { box-shadow: 0 -30px 40px -10px rgba(242, 179, 59, 0.45); }
@keyframes flicker { to { transform: scale(0.92, 1.06) rotate(2deg); } }
.question { max-width: 560px; margin: 0 auto; text-align: center; animation: fade-up 0.6s both; }
.question .q { font-size: 1.45rem; }
.options { display: grid; gap: 0.6rem; }
.options button {
  padding: 0.7rem 1rem; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255, 255, 255, 0.4); transition: background 0.3s, border-color 0.3s;
}
.options button:hover:not(:disabled) { border-color: var(--gold); }
.options button.right { background: rgba(255, 255, 255, 0.2); border-color: var(--gold); }
.options button.wrong { opacity: 0.4; text-decoration: line-through; }
.question .reply { min-height: 1.6em; font-style: italic; color: var(--gold-soft); }

/* ---------- Act III: Van Gogh ---------- */
.starry { display: block; width: 100%; height: clamp(180px, 34vw, 320px); border: 1px solid rgba(255, 255, 255, 0.4); }
.puzzle {
  --size: min(100%, 480px);
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px;
  width: var(--size); aspect-ratio: 1; margin: 1.5rem auto 0;
  transition: gap 0.8s;
}
.tile {
  border: 0; padding: 0;
  background-size: calc(var(--n) * 100%) calc(var(--n) * 100%);
  transition: transform 0.2s, outline-color 0.2s;
  outline: 2px solid transparent; outline-offset: -2px;
}
.tile.picked { outline-color: #fff; transform: scale(0.95); }
.puzzle.solved { gap: 0; box-shadow: 0 0 60px rgba(255, 255, 255, 0.35); }
.puzzle-help { text-align: center; color: var(--muted); font-size: 1rem; }

/* ---------- Act IV: orbit ---------- */
.orbit-chart { display: block; width: min(100%, 78vh); aspect-ratio: 1; margin: 0 auto; touch-action: none; cursor: grab; }
.orbit-chart:active { cursor: grabbing; }
.orbit-info { text-align: center; }
.orbit-date { margin: 0; font-size: 1.5rem; color: var(--gold-soft); }
.orbit-km { margin: 0; color: var(--muted); }
.play { margin-top: 0.8rem; padding: 0.4rem 1.1rem; background: none; border: 1px solid var(--gold); color: var(--gold); }
.milestone-note { max-width: 560px; min-height: 3em; margin: 1rem auto 0; text-align: center; font-style: italic; }
.milestone-note strong { color: var(--gold); font-style: normal; }

/* ---------- Act V: memories ---------- */
.polaroids { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.8rem; padding: 0.5rem; }
.polaroid {
  display: flex; flex-direction: column; padding: 0.7rem 0.7rem 0.5rem;
  background: var(--paper); color: var(--ink); border: 0; text-align: center;
  transform: rotate(var(--tilt)); box-shadow: 0 10px 30px rgba(0,0,0,0.16); transition: transform 0.3s;
}
.polaroid:hover { transform: rotate(0) scale(1.04); }
.polaroid .photo {
  aspect-ratio: 1; background: linear-gradient(135deg, #1b3a8c, #6d0f1f) center / cover;
}
.polaroid .caption { margin-top: 0.5rem; font: 500 1.5rem/1.1 var(--hand); }
.polaroid .date { font-size: 0.85rem; opacity: 0.6; }
.lightbox {
  max-width: min(720px, calc(100% - 32px)); padding: 3rem 1rem 1rem; border: 1px solid var(--gold);
  background: var(--night-2); color: var(--text);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.75); }
.lightbox img { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; }
.lightbox .caption { color: var(--gold); text-align: center; }
.lightbox .close { position: absolute; top: 8px; right: 8px; }

/* ---------- Finale: letter ---------- */
.envelope {
  position: relative; width: min(360px, 100%); aspect-ratio: 1.6; margin: 2rem auto;
  background: linear-gradient(160deg, #efe4cc, #d9c9a6); box-shadow: 0 20px 50px rgba(0,0,0,0.16);
  transition: transform 0.9s, opacity 0.9s;
}
.envelope .flap {
  position: absolute; inset: 0 0 auto; height: 60%;
  background: linear-gradient(#e3d5b6, #cdbb94); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transition: transform 0.8s;
}
.envelope .seal {
  position: absolute; left: 50%; top: 60%; width: 64px; height: 64px; margin: -32px;
  border-radius: 50%; border: 0; font-size: 1.6rem; color: var(--gold-soft);
  background: radial-gradient(circle at 35% 35%, #b3283d, #6d0f1f 70%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.16); animation: pulse 2.4s infinite;
}
@keyframes pulse { 50% { transform: scale(1.08); } }
.envelope.opened .flap { transform: rotateX(180deg); }
.envelope.opened { transform: translateY(30px); opacity: 0; }
.letter {
  max-width: 640px; margin: 1rem auto; padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--paper); color: var(--ink); font: 500 1.6rem/1.45 var(--hand);
  box-shadow: 0 20px 60px rgba(0,0,0,0.16);
  opacity: 0; transform: translateY(30px); transition: opacity 1.4s, transform 1.4s;
}
.letter.shown { opacity: 1; transform: none; }
.letter .signature { text-align: right; margin-top: 2rem; }
.gift {
  max-width: 560px; margin: 2rem auto 0; padding: 2rem 1.5rem; text-align: center;
  border: 1px solid var(--gold); outline: 1px solid rgba(255, 255, 255, 0.35); outline-offset: 6px;
  opacity: 0; transform: scale(0.95); transition: opacity 1s, transform 1s;
}
.gift.shown { opacity: 1; transform: none; }
.gift h3 { font-size: 2rem; color: var(--gold-soft); }
.stardust { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 8; }
.stardust i {
  top: -5%; background: none; color: var(--gold); font-style: normal;
  animation: fall 3.5s ease-in forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
}

/* ---------- Gate without the theatre (version 2) ---------- */
.gate.plain .curtain, .gate.plain .valance { display: none; }
.gate.plain { background: var(--night); }
.gate.plain.open { opacity: 0; transition: opacity 1.6s; }

/* ---------- Riddles ---------- */
.riddle-count { text-align: center; color: var(--muted); font-size: 1rem; margin: 0; }
.riddle-card { max-width: 560px; margin: 1rem auto; text-align: center; animation: fade-up 0.6s both; }
.riddle-card .q { font-size: 1.5rem; font-style: italic; }
.riddle-card input {
  width: 100%; padding: 0.6rem 0.8rem; font: inherit; text-align: center; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--gold); outline: none;
}
.riddle-card button[type=submit], .riddle-card .skip {
  margin-top: 1rem; padding: 0.5rem 1.3rem; background: var(--gold); color: var(--night); border: 0;
}
.riddle-card .skip { background: none; color: var(--muted); border: 1px solid var(--muted); margin-left: 0.5rem; }
.riddle-card .hint { min-height: 1.5em; margin: 1rem 0 0; font-style: italic; color: var(--gold-soft); }
.slips { max-width: 560px; margin: 1.5rem auto 0; display: grid; gap: 0.8rem; }
.slip {
  margin: 0; padding: 0.9rem 1.1rem; background: var(--paper); color: var(--ink);
  font: 500 1.4rem/1.35 var(--hand); box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  opacity: 0; transform: translateY(10px) rotate(-1deg); transition: opacity 0.9s, transform 0.9s;
}
.slip:nth-child(even) { transform: translateY(10px) rotate(1deg); }
.slip.shown { opacity: 1; transform: rotate(-0.8deg); }
.slip.shown:nth-child(even) { transform: rotate(0.8deg); }

/* ---------- Reasons ---------- */
.reason-count { text-align: center; color: var(--muted); font-size: 1rem; margin: 0 0 1rem; }
.reason-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 0.6rem; max-width: 640px; margin: 0 auto; }
.reason {
  aspect-ratio: 1; display: grid; place-items: center; font-size: 1.1rem;
  background: radial-gradient(circle at 35% 35%, #b3283d, var(--velvet) 70%);
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: var(--gold-soft);
  transition: transform 0.2s, background 0.4s;
}
.reason:hover { transform: scale(1.08); }
.reason.open { background: rgba(255, 255, 255, 0.18); color: var(--gold); }
.reason-open {
  max-width: 560px; min-height: 4.5em; margin: 1.5rem auto 0; padding: 1rem 1.2rem; text-align: center;
  font: 500 1.6rem/1.35 var(--hand); color: var(--gold-soft);
}
.reason-open.pop { animation: fade-up 0.5s both; }

/* ---------- Thoughts: one quiet page at a time ---------- */
.thought { max-width: 620px; margin: 2rem auto; text-align: center; animation: fade-up 0.9s both; }
.thought-text { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-style: italic; line-height: 1.45; margin: 0 0 1.6rem; }
.thought-ask { display: block; text-align: left; color: var(--gold-soft); font-style: italic; margin-bottom: 1.4rem; }
.thought-ask textarea {
  display: block; width: 100%; margin-top: 0.6rem; padding: 0.8rem 1rem; resize: vertical;
  background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--gold-soft); border-radius: 8px;
  font: 1.15rem/1.5 "Caveat", cursive;
}
.thought .continue:disabled { opacity: 0; pointer-events: none; }


/* ---------- Countdown: small and quiet, top right ---------- */
#timer {
  position: fixed; top: 0; left: 0; right: 0; z-index: 7; height: 1.9rem; box-sizing: border-box;
  padding: 0.35rem 16px 0; text-align: right; background: var(--night);
  color: var(--gold); font-size: 1rem; font-variant-numeric: tabular-nums; pointer-events: none;
}
#timer small { color: var(--muted); font-size: 0.8em; }

/* ---------- Daily entries ---------- */
.days { max-width: 620px; margin: 2rem auto; display: grid; gap: 1.4rem; }
.day { padding: 1.4rem 1.6rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.day.today { border-color: var(--gold); background: rgba(255, 255, 255, 0.08); animation: fade-up 0.8s both; }
.day h3 { margin: 0.3rem 0 0.6rem; font-size: 1.6rem; color: var(--gold-soft); }
.day p { margin: 0.4rem 0 0; font-size: 1.25rem; line-height: 1.5; }
.day .eyebrow { margin: 0; }
.day img { width: 100%; border-radius: 6px; margin: 0.6rem 0; }
.days-next { text-align: center; color: var(--muted); font-style: italic; }


/* ---------- Clean: black, white type, almost no ornament ---------- */
#starfield { display: none; }
.logo {
  --s: 84px; position: relative; width: var(--s); height: var(--s); margin: 0 auto 1.8rem;
  border: calc(var(--s) * 0.05) solid #fff; border-radius: 50%;
}
.logo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; }
.overture .logo { --s: 112px; margin-bottom: 2.4rem; }
.gate-card { border: 0; outline: 0; background: none; padding: 2rem 1.5rem; }
.gate-card h1 { font-size: 1.4rem; font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; }
.gate-card input, .riddle-card input { border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
.gate-card button, .riddle-card button[type=submit] { background: #fff; color: #000; border-radius: 0; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; }
.chapter-head h2, .overture h1 { font-weight: 300; font-style: normal; letter-spacing: 0.05em; }
.eyebrow { letter-spacing: 0.35em; font-size: 0.75rem; color: var(--muted); }
.continue { border-color: rgba(255, 255, 255, 0.7); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; }
.continue:hover { background: #fff; color: #000; }
.reveal.note { background: none; border-left: 1px solid rgba(255, 255, 255, 0.6); }
.reveal.done { color: var(--text); }

/* the timer: just numbers, top right */
#timer { position: fixed; top: 0; right: 0; z-index: 7; padding: 0.7rem 16px; color: var(--muted); font-size: 0.95rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; pointer-events: none; }

/* list of acts on the first page */
.menu { display: grid; gap: 0.2rem; justify-items: center; margin-top: 3rem; }
.menu button { background: none; border: 0; padding: 0.5rem 1rem; font-size: 1.35rem; letter-spacing: 0.06em; color: var(--text); }
.menu button:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.menu button.done { color: var(--muted); }

.gate.plain { background: #000; }
.hearts i { color: #fff; text-shadow: none; }
.thought-ask textarea { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); }
.sky-chart { border-radius: 0; }
.sky-label { background: #000; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.polaroid .photo { background: linear-gradient(135deg, #2a2a2a, #111) center / cover; }
.lightbox { background: #0d0d0d; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
.envelope .seal { background: radial-gradient(circle at 35% 35%, #2b2b2b, #000 70%); font-size: 0; color: transparent; }
.envelope .seal::before { content: ""; position: absolute; inset: 30%; border: 2px solid #fff; border-radius: 50%; }
.envelope .seal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; background: #fff; border-radius: 50%; }
.envelope { background: linear-gradient(160deg, #f4f3ef, #dcdad2); }
.envelope .flap { background: linear-gradient(#e9e7df, #cfcdc4); }

/* Sky chart stays blurred until the right time is set; hearts when it is. */
.sky-chart { transition: filter 1.4s ease; }
.sky-chart.veiled { filter: blur(9px) brightness(0.55); }
.sky-hint { text-align: center; min-height: 1.4em; margin: 0.6rem 0 0; color: var(--muted); }
.sky-wrap { position: relative; }
.hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hearts i { position: absolute; bottom: -2rem; font-style: normal; opacity: 0; animation: heart-rise 4s ease-out forwards; }
@keyframes heart-rise {
  0% { bottom: -2rem; transform: scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { bottom: 100%; transform: translateX(20px) scale(1.1); opacity: 0; }
}

.hearts.screen { position: fixed; inset: 0; z-index: 9; }

/* The hearts are the point of the page: keep their duration even with reduced motion. */
.hearts i { animation-duration: var(--d, 4s) !important; animation-delay: 0s; }

/* Gates: no button, only a blinking cursor. Enter sends. */
.gate-card button[type=submit] { display: none; }
.gate-card input { border: 0; font-size: 1.8rem; caret-color: #fff; letter-spacing: 0.05em; padding: 0.4rem; }

/* Second gate: one huge word */
.gate.second .logo { display: none; }
.gate.second .gate-card { width: 100%; }
.gate.second h1 {
  font-size: clamp(4.5rem, 24vw, 13rem); font-weight: 600; letter-spacing: 0.04em; line-height: 1;
  color: #fff; text-shadow: 0 0 40px rgba(255, 255, 255, 0.35);
  animation: pop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.gate.second input { margin-top: 2rem; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }