/*
 * Aakhri Sawaal — One Question. Your Answer. (Boyfriend Day family.)
 * Ink navy, candle gold for the question, one rose heart for continuity.
 * Fraunces for the words that matter, Inter for everything else.
 */
:root {
  --navy: #101820;
  --navy-2: #172330;
  --gold: #F2D16B;
  --gold-soft: #E8C766;
  --rose: #E0457B;
  --cream: #F7EFE0;
  --muted: rgba(247, 239, 224, .62);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(22px, 6vw, 44px);
  --t: 350ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--cream);
  background: radial-gradient(110% 80% at 50% 35%, var(--navy-2) 0%, var(--navy) 65%);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.as-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= candlelight ================= */
.as-candles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.as-candles i {
  position: absolute; width: 90px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 209, 107, .5), rgba(242, 209, 107, 0));
  filter: blur(6px); opacity: .5; animation: as-flicker 3.4s ease-in-out infinite;
}
.as-candles i:nth-child(1) { left: 6%; top: 18%; animation-delay: -.4s; }
.as-candles i:nth-child(2) { left: 78%; top: 8%; transform: scale(.7); animation-delay: -1.3s; }
.as-candles i:nth-child(3) { left: 86%; top: 52%; transform: scale(1.2); animation-delay: -2.1s; }
.as-candles i:nth-child(4) { left: 14%; top: 70%; transform: scale(.8); animation-delay: -.9s; }
.as-candles i:nth-child(5) { left: 48%; top: 4%; transform: scale(.5); animation-delay: -2.6s; }
.as-candles i:nth-child(6) { left: 60%; top: 84%; transform: scale(.9); animation-delay: -1.7s; }
.as-candles i:nth-child(7) { left: 30%; top: 40%; transform: scale(.45); opacity: .3; animation-delay: -3s; }
@keyframes as-flicker { 0%, 100% { opacity: .42; } 30% { opacity: .58; } 55% { opacity: .38; } 75% { opacity: .52; } }

/* ================= the stage + cards ================= */
.as-stage { position: relative; min-height: 100vh; min-height: 100svh; }
.as-card {
  position: absolute; inset: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 72px var(--gutter) 88px;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.as-card[hidden] { display: none; }
.as-card.is-enter { opacity: 0; transform: translateY(18px); }
.as-card.is-leave { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.as-card.is-back-enter { opacity: 0; transform: translateY(-14px); }
.as-card.is-back-leave { opacity: 0; transform: translateY(18px); pointer-events: none; }
.as-card--line, .as-card--heart { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.as-card--reply, .as-card--question, .as-card--sent { position: relative; }

.as-hey { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.3rem; color: var(--gold); }
.as-line {
  margin: 0; max-width: 16ch; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1.15;
  color: var(--cream); text-wrap: balance; overflow-wrap: anywhere; font-variation-settings: 'opsz' 144;
}
.as-tap {
  position: absolute; bottom: max(40px, env(safe-area-inset-bottom)); left: 0; right: 0;
  font-size: .66rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--muted);
  animation: as-pulse 2.2s ease-in-out infinite;
}
@keyframes as-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* the heartbeat */
.as-beat { width: 96px; height: 96px; }
.as-beat__heart { width: 100%; height: 100%; overflow: visible; }
.as-beat__heart path { fill: var(--rose); filter: drop-shadow(0 0 18px rgba(224, 69, 123, .55)); }
.as-card--heart:not([hidden]) .as-beat__heart { animation: as-beat 1.2s var(--ease) both; transform-origin: 50% 55%; }
@keyframes as-beat { 0% { transform: scale(.6); opacity: 0; } 20% { transform: scale(1.08); opacity: 1; } 34% { transform: scale(.94); } 50% { transform: scale(1.16); } 72% { transform: scale(.98); } 100% { transform: scale(1); opacity: 1; } }
.as-beat--still { width: 64px; height: 64px; margin-bottom: 18px; }

/* the question */
.as-q {
  margin: 0; max-width: 15ch; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.5rem, 11vw, 5rem); line-height: 1.06; letter-spacing: -.01em; color: var(--gold);
  text-shadow: 0 0 30px rgba(242, 209, 107, .18); text-wrap: balance; overflow-wrap: anywhere;
  font-variation-settings: 'opsz' 144;
}
.as-signed { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.35rem; color: var(--cream); }
.as-song {
  display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 0; padding: 9px 16px; border-radius: 999px;
  background: rgba(242, 209, 107, .08); border: 1px solid rgba(242, 209, 107, .25);
  color: var(--cream); text-decoration: none; font-size: .9rem;
}
.as-song span { color: var(--gold); }
.as-song small { color: var(--muted); font-size: .7rem; letter-spacing: .08em; }

/* inline song player — YouTube links play right here, never a redirect */
.as-songwrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; width: 100%; }
.as-song--head { margin: 0; }
.as-song--head small { display: none; }
.as-songplay {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 420px;
  aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(242, 209, 107, .25); border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, #1A2430 0%, #101820 70%);
}
.as-songplay__frame, .as-songplay .song-play__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.as-songplay__frame iframe, .as-songplay .song-play__frame iframe { width: 100%; height: 100%; border: 0; }
.as-songplay__cue { position: relative; z-index: 1; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.as-songplay.is-playing .as-songplay__cue, .as-songplay.is-playing .song-play__cue { display: none; }

/* buttons */
.as-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; margin-top: 36px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .2s var(--ease), background .2s;
}
.as-btn:active { transform: scale(.97); }
.as-btn--gold { background: var(--gold); color: var(--navy); box-shadow: 0 16px 36px -18px rgba(242, 209, 107, .7); }
.as-btn--wa { width: 100%; margin-top: 20px; background: #25D366; color: #06301A; }
.as-btn--wa svg { width: 22px; height: 22px; }
.as-btn--wa svg path { fill: currentColor; }
.as-btn--ghost { width: 100%; margin-top: 12px; background: transparent; color: var(--cream); border: 1px dashed rgba(242, 209, 107, .45); font-weight: 500; font-size: .92rem; }
.as-link { appearance: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; }

/* the reply */
.as-card--reply { justify-content: flex-start; padding-top: max(64px, 10vh); }
.as-reply__q { margin: 0 0 6px; max-width: 30ch; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold); opacity: .85; }
.as-card--reply h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 8vw, 2.8rem); color: var(--cream); }
.as-form { width: 100%; max-width: 440px; text-align: left; }
.as-form textarea {
  width: 100%; min-height: 128px; resize: vertical; padding: 16px 18px; border-radius: 16px;
  background: rgba(247, 239, 224, .06); border: 1px solid rgba(242, 209, 107, .28); color: var(--cream);
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.5;
}
.as-form textarea::placeholder { color: rgba(247, 239, 224, .4); font-style: italic; }
.as-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 209, 107, .2); }
.as-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.as-quick button {
  appearance: none; border: 1px solid rgba(242, 209, 107, .3); background: rgba(242, 209, 107, .06); color: var(--cream);
  border-radius: 999px; padding: 8px 14px; min-height: 38px; cursor: pointer; font-size: .88rem;
}
.as-photo { margin-top: 6px; }
.as-frame { margin: 14px 0 0; text-align: center; }
.as-frame img { width: 100%; border-radius: 10px; box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .8); }
.as-frame figcaption { margin-top: 6px; }
.as-note { margin: 8px 0 0; font-size: .82rem; color: var(--muted); min-height: 1em; }
.as-error { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(224, 69, 123, .15); color: #FFD3E0; font-size: .9rem; }
.as-private { margin: 14px 0 0; font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.5; }

/* sent */
.as-card--sent h2 { text-wrap: balance; margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.6rem); color: var(--gold); }
.as-card--sent p { margin: 0 0 14px; max-width: 30ch; color: var(--muted); line-height: 1.55; }

.as-foot {
  position: fixed; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; text-align: center; pointer-events: none;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 239, 224, .38);
}
.as-foot a { pointer-events: auto; color: rgba(242, 209, 107, .7); text-decoration: none; }
body.as-scroll .as-foot { position: static; padding: 8px 0 20px; }

@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* focus moved here by script (headings, the promise, the sheet) — no ring */
[tabindex="-1"]:focus { outline: none; }