:root {
  --bg0: #0d0409;
  --bg1: #170610;
  --rose: #ff5c93;
  --rose2: #ffa3c4;
  --peach: #ff9a7b;
  --lilac: #b98bff;
  --gold: #f5cf96;
  --cream: #fff5f0;
  --muted: rgba(255, 245, 240, .6);
  --faint: rgba(255, 245, 240, .38);
  --card: rgba(38, 12, 30, .5);
  --line: rgba(255, 255, 255, .1);
  --grad: linear-gradient(135deg, #ff5c93 0%, #ff8a80 55%, #ffb77a 100%);
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .9, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--bg0); }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  color: var(--cream);
  background: var(--bg0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
}
textarea, input, dd, .letter-text { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; position: relative; }

/* ---------- aurora background ---------- */
.aurora { position: fixed; inset: -20%; z-index: -2; overflow: hidden; filter: blur(60px) saturate(1.2); pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 60vmax; height: 60vmax; left: -10%; top: -15%; background: radial-gradient(circle, #b3155a 0%, transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 55vmax; height: 55vmax; right: -15%; top: 20%; background: radial-gradient(circle, #5b1d9e 0%, transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 50vmax; height: 50vmax; left: 10%; bottom: -25%; background: radial-gradient(circle, #d2553f 0%, transparent 65%); opacity: .35; animation: drift3 28s ease-in-out infinite alternate; }
.aurora i:nth-child(4) { width: 35vmax; height: 35vmax; right: 5%; bottom: 5%; background: radial-gradient(circle, #ff4f8b 0%, transparent 65%); opacity: .3; animation: drift1 22s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(18vw, 22vh) scale(1.25); } }
@keyframes drift2 { to { transform: translate(-22vw, -12vh) scale(.85); } }
@keyframes drift3 { to { transform: translate(14vw, -26vh) scale(1.15); } }
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0, 0, 0, .55)); }

#bg, #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#bg { z-index: 0; }
#fx { z-index: 50; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--safe-t) + 12px) 22px 14px;
  background: linear-gradient(to bottom, rgba(13, 4, 9, .85) 40%, rgba(13, 4, 9, 0));
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.top-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 auto 9px; max-width: 600px; font-weight: 700; }
#stepCount { color: var(--faint); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); max-width: 600px; margin: 0 auto; position: relative; }
.bar i {
  display: block; height: 100%; width: 0; border-radius: 4px; position: relative;
  background: linear-gradient(90deg, var(--gold), var(--rose), var(--lilac));
  background-size: 200% 100%; animation: flow 4s linear infinite;
  transition: width .8s var(--ease);
}
.bar i::after { content: ''; position: absolute; right: -4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px var(--rose); }
@keyframes flow { to { background-position: -200% 0; } }

/* ---------- layout & transitions ---------- */
.app { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: 6px 16px calc(var(--safe-b) + 130px); }
.view { animation: viewIn .7s var(--ease) backwards; }
.view.leave { animation: viewOut .22s ease-in both; }
@keyframes viewIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 40px)) scale(.98); filter: blur(8px); } }
@keyframes viewOut { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -40px)) scale(.98); filter: blur(8px); } }

.step-head > *, .block, .sum-sec, .opt, .row, .center-screen > *, .gate > * { animation: rise .7s var(--ease) backwards; }
.step-head > :nth-child(1) { animation-delay: .05s; }
.step-head > :nth-child(2) { animation-delay: .1s; }
.step-head > :nth-child(3) { animation-delay: .15s; }
.step-head > :nth-child(4) { animation-delay: .2s; }
.block, .sum-sec { animation-delay: calc(.2s + var(--i, 0) * .08s); }
.opt { animation-delay: calc(.3s + var(--i, 0) * .035s); animation-duration: .55s; }
.row { animation-delay: calc(.25s + var(--i, 0) * .04s); }
.center-screen > :nth-child(n), .gate > :nth-child(n) { animation-delay: calc(var(--d, 0) * 1s); }
.center-screen > :nth-child(2), .gate > :nth-child(2) { --d: .1; }
.center-screen > :nth-child(3), .gate > :nth-child(3) { --d: .2; }
.center-screen > :nth-child(4), .gate > :nth-child(4) { --d: .3; }
.center-screen > :nth-child(5), .gate > :nth-child(5) { --d: .4; }
.center-screen > :nth-child(6) { --d: .5; }
.center-screen > :nth-child(7) { --d: .6; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }

body[data-kind="intro"] .top, body[data-kind="intro"] .nav,
body[data-kind="gate"] .top, body[data-kind="gate"] .nav,
body[data-kind="interlude"] .top, body[data-kind="interlude"] .nav,
body[data-kind="done"] .top, body[data-kind="done"] .nav { opacity: 0; pointer-events: none; transform: translateY(-12px); }
body[data-kind="intro"] .nav, body[data-kind="gate"] .nav, body[data-kind="interlude"] .nav, body[data-kind="done"] .nav { transform: translateY(24px); }
body:not([data-kind="form"]):not([data-kind="summary"]) .app { padding-top: calc(var(--safe-t) + 16px); padding-bottom: calc(var(--safe-b) + 30px); }

/* ---------- typography ---------- */
.eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; font-weight: 700; }
.center { text-align: center; }
h1, h2 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.02; letter-spacing: -.015em; }
h1 { font-size: clamp(42px, 11.5vw, 60px); }
h2 {
  font-size: clamp(42px, 12vw, 58px);
  background: linear-gradient(100deg, var(--cream) 0%, var(--cream) 35%, var(--rose2) 50%, var(--cream) 65%, var(--cream) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .7s var(--ease) .15s backwards, shimmer 6s ease-in-out 1s infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 50%, 100% { background-position: -150% 0; } }
h3 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.005em; }
.sub { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 12px 0 0; }
.narrow { max-width: 340px; margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.5; }

/* ---------- glass card ---------- */
.block, .sum-sec, .level-card {
  position: relative;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 35%, rgba(255, 255, 255, .02) 65%, rgba(255, 92, 147, .35)) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9);
}

/* ---------- step ---------- */
.step-head { padding: 18px 6px 22px; }
.step-emoji { font-size: 54px; line-height: 1; margin-bottom: 16px; display: inline-block; filter: drop-shadow(0 10px 24px rgba(255, 92, 147, .5)); }
.step-emoji { animation: rise .7s var(--ease) backwards, float 4.5s ease-in-out 1s infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-5deg); } }

.block { padding: 20px 16px 16px; margin-bottom: 14px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 0 4px; }
.hint { font-size: 11px; color: var(--faint); white-space: nowrap; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

/* ---------- options ---------- */
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 540px) { .opts { grid-template-columns: repeat(3, 1fr); } }
.opt {
  text-align: left; overflow: hidden;
  display: flex; flex-direction: column; gap: 7px;
  min-height: 92px; padding: 15px 14px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .35s var(--spring), background .3s, border-color .3s, box-shadow .4s;
}
.opt:active { transform: scale(.94); }
.opt-e { font-size: 28px; line-height: 1; transition: transform .4s var(--spring); }
.opt-t { font-size: 15px; font-weight: 700; line-height: 1.25; }
.opt-d { font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: -3px; }
.opt::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 92, 147, .45), transparent 60%), radial-gradient(90% 90% at 100% 100%, rgba(185, 139, 255, .3), transparent 60%);
}
.opt > * { position: relative; }
.opt::after {
  content: '✓'; position: absolute; top: 11px; right: 11px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #3a0620;
  background: linear-gradient(135deg, #fff, var(--rose2));
  transform: scale(0) rotate(-90deg); transition: transform .45s var(--spring);
  box-shadow: 0 0 14px rgba(255, 163, 196, .8);
}
.opt.on { border-color: rgba(255, 140, 180, .7); box-shadow: 0 14px 34px -14px rgba(255, 92, 147, .95), inset 0 1px 0 rgba(255, 255, 255, .15); }
.opt.on::before { opacity: 1; }
.opt.on::after { transform: scale(1) rotate(0); }
.opt.on .opt-e { transform: scale(1.18) rotate(-6deg); }

.ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255, 255, 255, .35); pointer-events: none; animation: ripple .7s ease-out forwards; }
@keyframes ripple { to { transform: scale(40); opacity: 0; } }

.shake { animation: shake .45s ease !important; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- slider ---------- */
.slider { padding: 4px 4px 0; }
.slider-val { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; min-height: 54px; }
.sv-e { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 16px rgba(255, 92, 147, .5)); }
.sv-t { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.slider-val.bump .sv-e { animation: pop .45s var(--spring); }
@keyframes pop { 40% { transform: scale(1.35) rotate(-10deg); } }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; margin: 0; --p: 50%; }
.range::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--gold), var(--rose) var(--p), rgba(255, 255, 255, .1) var(--p)); }
.range::-moz-range-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--gold), var(--rose) var(--p), rgba(255, 255, 255, .1) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffe3ee); border: 0; box-shadow: 0 0 0 6px rgba(255, 92, 147, .35), 0 6px 20px rgba(255, 92, 147, .9); }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(255, 92, 147, .35); }
.ticks { display: flex; justify-content: space-between; margin-top: 6px; }
.ticks button { font-size: 22px; padding: 6px; opacity: .3; filter: grayscale(.6); transition: all .35s var(--spring); }
.ticks button.on { opacity: 1; filter: none; transform: scale(1.3) translateY(-2px); }

/* ---------- text ---------- */
textarea, .gate-input {
  width: 100%;
  font: 16px/1.5 var(--sans); /* 16px — iPhone не зумит при фокусе */
  color: var(--cream);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 16px;
  transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance: none;
}
textarea { resize: none; overflow: hidden; min-height: 56px; }
textarea::placeholder, .gate-input::placeholder { color: var(--faint); }
textarea:focus, .gate-input:focus { outline: none; background: rgba(0, 0, 0, .35); border-color: rgba(255, 140, 180, .7); box-shadow: 0 0 0 4px rgba(255, 92, 147, .16), 0 10px 30px -10px rgba(255, 92, 147, .5); }

/* ---------- pills: this-or-that / who ---------- */
.tot, .who { display: flex; flex-direction: column; gap: 10px; }
.tot .row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pill {
  min-height: 54px; padding: 10px 8px; border-radius: 18px; font-size: 15px; font-weight: 700; overflow: hidden;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  transition: all .4s var(--spring);
}
.pill:active { transform: scale(.93); }
.pill.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 10px 26px -8px rgba(255, 92, 147, .95); transform: scale(1.02); }
.row.answered .pill:not(.on) { opacity: .4; transform: scale(.96); }
.tot-or { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 18px; }
.who .row { padding: 12px 2px 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.who .row:first-child { border-top: 0; padding-top: 0; }
.who-q { margin: 0 4px 10px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.who-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.who-btns .pill { min-height: 46px; font-size: 14px; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; padding: 17px 22px; font-weight: 800; font-size: 16px; letter-spacing: .01em; overflow: hidden; transition: transform .3s var(--spring), opacity .25s, box-shadow .3s; }
.btn:active { transform: scale(.95); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 14px 34px -12px rgba(255, 92, 147, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 50%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: sheen 3.6s ease-in-out 1.2s infinite;
}
@keyframes sheen { 0% { left: -60%; } 30%, 100% { left: 130%; } }
.btn.ghost { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn.big { width: 100%; padding: 19px; font-size: 17px; margin-top: 24px; }
.link { color: var(--rose2); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 163, 196, .35); padding: 8px; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 30px 16px calc(var(--safe-b) + 12px);
  background: linear-gradient(to top, rgba(13, 4, 9, .95) 45%, rgba(13, 4, 9, 0));
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
@media (min-width: 640px) { .nav { padding-inline: calc(50% - 300px); } }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 104px); z-index: 60;
  transform: translate(-50%, 20px) scale(.95); opacity: 0; pointer-events: none;
  background: rgba(40, 12, 30, .92); border: 1px solid var(--line); border-radius: 18px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 13px 20px; font-size: 14px; font-weight: 600; width: max-content; max-width: 88vw; text-align: center;
  transition: all .45s var(--spring);
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- gate ---------- */
.gate { min-height: calc(100dvh - var(--safe-t) - 50px); display: flex; flex-direction: column; justify-content: center; padding: 0 8px; }
.gate h1 { font-size: clamp(38px, 10.5vw, 54px); margin-bottom: 30px; }
.lock { position: relative; width: 120px; height: 120px; margin: 0 auto 30px; display: grid; place-items: center; }
.lock-ring {
  position: absolute; inset: 0; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, var(--rose), var(--gold), var(--lilac), var(--rose));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 6s linear infinite;
}
.lock::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 92, 147, .35), rgba(255, 92, 147, 0) 70%); animation: breathe 3s ease-in-out infinite; }
.lock-ico { font-size: 50px; position: relative; transition: transform .6s var(--spring); }
.lock.open .lock-ico { transform: scale(1.25) rotate(-12deg); }
.lock.open .lock-ring { animation-duration: .8s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.2); opacity: .6; } }
.gate-form { display: flex; flex-direction: column; }
.gate-input { text-align: center; font-size: 20px; padding: 18px; border-radius: 22px; font-weight: 600; }
.gate-form .btn.big { margin-top: 14px; }
.gate-msg { min-height: 24px; text-align: center; margin: 16px 0 0; font-weight: 700; transition: color .3s; }
.gate-msg.bad { color: var(--rose2); }
.gate-msg.ok { color: var(--gold); font-family: var(--serif); font-size: 26px; }

/* ---------- intro / envelope ---------- */
.intro { min-height: calc(100dvh - var(--safe-t) - 50px); display: grid; place-items: center; position: relative; }
.env-stage { display: flex; flex-direction: column; align-items: center; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.envelope { position: relative; width: min(330px, 84vw); aspect-ratio: 1.55; margin: 24px 0 30px; perspective: 900px; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)); animation: float 5s ease-in-out infinite; }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; border-radius: 16px; }
.env-back { background: linear-gradient(160deg, #8e1f52, #4f0d2f); }
.env-letter {
  position: absolute; left: 7%; right: 7%; top: 8%; height: 84%;
  background: linear-gradient(#fffaf6, #fbe6de); border-radius: 10px;
  display: grid; place-items: start center; padding-top: 14%;
  font-family: var(--serif); font-style: italic; font-size: 24px; color: #8e1f52;
  transition: transform 1s var(--ease) .45s;
}
.env-front { background: linear-gradient(165deg, #b8336f, #761544); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 45%, transparent 60%); background-size: 250% 100%; animation: shimmer 5s ease-in-out infinite; }
.env-flap {
  background: linear-gradient(180deg, #cc4383, #93235a);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  transform-origin: top; transition: transform .7s cubic-bezier(.5, 0, .3, 1); z-index: 3;
}
.seal {
  position: absolute; left: 50%; top: 58%; z-index: 4;
  width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px; color: #ffd9b0;
  background: radial-gradient(circle at 35% 30%, #ea4f63, #8f0f2b 72%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .3), inset 0 2px 4px rgba(255, 255, 255, .3);
  animation: pulse 2s ease-in-out infinite;
  transition: transform .45s var(--spring), opacity .4s;
}
.seal::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 163, 196, .6); animation: ringOut 2s ease-out infinite; }
@keyframes ringOut { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.07); } }
.tap-hint { color: var(--muted); font-size: 14px; letter-spacing: .08em; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.opening .seal { transform: scale(0) rotate(120deg); opacity: 0; animation: none; }
.opening .env-flap { transform: rotateX(180deg); z-index: 0; }
.opening .env-letter { transform: translateY(-50%); }
.opening .envelope { animation: none; }
.opening .tap-hint { opacity: 0; animation: none; }

.letter-full {
  position: absolute; inset: 0; margin: auto; height: fit-content; width: 100%;
  background: linear-gradient(170deg, #fffbf8, #fbe7e0);
  color: #4a1030; border-radius: 30px; padding: 36px 26px 26px;
  box-shadow: 0 50px 90px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 0 80px -20px rgba(255, 92, 147, .5);
  opacity: 0; transform: translateY(50px) scale(.92) rotateX(12deg); pointer-events: none;
  transition: opacity .9s var(--ease), transform 1s var(--ease);
  -webkit-user-select: text; user-select: text;
}
.letter-full::before { content: '❦'; position: absolute; top: 16px; right: 24px; font-size: 28px; color: #d88aa5; }
.letter-full .eyebrow { color: #b8466f; }
.letter-full h1 { color: #6d1540; font-style: italic; }
.letter-text { font-family: var(--serif); font-size: 22px; line-height: 1.45; margin: 16px 0 14px; min-height: 8em; }
.letter-text::after { content: '|'; color: #d05f8a; animation: blink .8s steps(1) infinite; margin-left: 1px; }
.typed .letter-text::after { display: none; }
.when { display: inline-block; font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: 99px; background: rgba(184, 70, 111, .1); color: #8e1f52; margin: 0 0 14px; }
.pill-when { background: rgba(255, 255, 255, .07); color: var(--gold); border: 1px solid var(--line); margin-top: 8px; }
.sign { font-family: var(--serif); font-style: italic; font-size: 23px; text-align: right; margin: 0; color: #9b2f5c; }
.letter-full .cta { opacity: 0; transform: translateY(10px); transition: all .6s var(--ease); pointer-events: none; }
.typed .cta { opacity: 1; transform: none; pointer-events: auto; }
.read .env-stage { opacity: 0; transform: scale(.8) translateY(-40px); pointer-events: none; position: absolute; }
.read .letter-full { opacity: 1; transform: none; pointer-events: auto; position: relative; }

/* ---------- summary ---------- */
.receipt { display: flex; flex-direction: column; gap: 12px; }
.sum-sec { padding: 18px 20px; }
.sum-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sum-head h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; }
dl { margin: 0; }
dt { font-size: 12px; color: var(--faint); margin-top: 12px; letter-spacing: .02em; font-weight: 600; }
dd { margin: 3px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ---------- interlude & done ---------- */
.center-screen { min-height: calc(100dvh - var(--safe-t) - 50px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 20px 4px; }
.center-screen h1 { margin-bottom: 4px; }
.badge-orb {
  width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 24px;
  background: var(--grad); box-shadow: 0 0 0 10px rgba(255, 92, 147, .12), 0 0 0 22px rgba(255, 92, 147, .06), 0 20px 60px -10px rgba(255, 92, 147, .9);
  font-size: 50px; font-weight: 900; color: #fff;
}
.badge-orb span { animation: pop .8s var(--spring) .4s both; }
.level-card { width: 100%; margin-top: 28px; padding: 26px 20px 20px; text-align: left; overflow: hidden; }
.level-card h3 { font-family: var(--serif); font-size: 28px; font-weight: 600; margin: 10px 0 8px; }
.level-card .btn.big { margin-top: 18px; }
.level-tag { display: inline-block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; padding: 6px 12px; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--peach)); color: #3a0620; }
.center-screen > .link { margin-top: 18px; }
.bar-cta { display: block; text-decoration: none; text-align: center; max-width: 360px; }

.big-heart { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 20px; }
.big-heart span { font-size: 104px; line-height: 1; color: var(--rose); text-shadow: 0 0 60px rgba(255, 92, 147, .9); animation: beat 1.3s ease-in-out infinite; position: relative; }
.big-heart i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 92, 147, .5); animation: ringOut 2.6s ease-out infinite; }
.big-heart i + i { animation-delay: 1.3s; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.countdown { display: flex; gap: 10px; margin: 10px 0 14px; }
.cd { width: 70px; padding: 12px 0; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); display: flex; flex-direction: column; }
.cd b { font-family: var(--serif); font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cd span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}