/* Fonts — self-hosted (Latin + Cyrillic), nothing is loaded from other sites. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/cg-cyr-400i.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/cg-cyr-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/marck-script-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/marck-script-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --night-1: #14061f;
  --night-2: #2a0f3f;
  --night-3: #5b1a4b;
  --rose: #ff6b9a;
  --rose-deep: #e23c76;
  --gold: #f7d99a;
  --gold-deep: #d9a85a;
  --ink: #fff1f6;
  --ink-soft: #f3cfe0;
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --script: 'Marck Script', 'Segoe Script', 'Brush Script MT', cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(120% 90% at 50% 110%, var(--night-3) 0%, var(--night-2) 42%, var(--night-1) 100%);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#sky { z-index: 0; }
#fx { z-index: 30; pointer-events: none; }

/* ---------- stage & scenes ---------- */
#stage { position: fixed; inset: 0; z-index: 10; }
.scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(56px, env(safe-area-inset-top)) 26px max(38px, env(safe-area-inset-bottom));
  text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985);
  transition: opacity 1.1s ease, transform 1.1s ease, visibility 0s linear 1.1s;
}
.scene.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.scene { justify-content: flex-start; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
/* spacers centre the content when there is room and let it scroll when there is not */
.scene::before, .scene::after { content: ''; flex: 1 0 0; }
.scene > * { max-width: 560px; flex-shrink: 0; }
@media (max-height: 560px) {
  .ring { width: 84px !important; margin-bottom: 0 !important; }
  .lineBox { min-height: 6em !important; }
  .hint { margin-top: 12px; }
}

.script { font-family: var(--script); font-weight: 400; color: var(--gold); text-shadow: 0 0 28px rgba(255, 190, 120, .45), 0 2px 12px rgba(0,0,0,.35); line-height: 1.15; }
.title { font-size: clamp(38px, 11vw, 64px); margin: 0 0 6px; }
.subtitle { font-size: clamp(19px, 5vw, 24px); font-style: italic; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.5; }

/* one line at a time */
.lineBox { min-height: 9.5em; display: flex; align-items: center; justify-content: center; }
.line {
  font-style: italic; font-weight: 400;
  font-size: clamp(24px, 6.6vw, 34px); line-height: 1.5; color: var(--ink);
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
  opacity: 0; filter: blur(8px); transform: translateY(10px);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease;
}
.line.show { opacity: 1; filter: blur(0); transform: none; }
.line.big { font-family: var(--script); font-style: normal; color: var(--gold); font-size: clamp(44px, 13vw, 70px); }
.hint { margin-top: 26px; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,231,240,.5); opacity: 0; transition: opacity 1s; }
.hint.show { opacity: 1; }

.dots { display: flex; gap: 9px; margin-top: 22px; height: 12px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background .6s, transform .6s; }
.dots i.on { background: var(--rose); transform: scale(1.35); box-shadow: 0 0 10px var(--rose); }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: .02em;
  color: #2b0a1c; padding: 15px 34px; border-radius: 999px;
  background: linear-gradient(135deg, #ffe3ae 0%, var(--gold) 45%, #ffb7cd 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 10px 34px rgba(255, 107, 154, .45), 0 0 44px rgba(247, 217, 154, .35);
  transition: transform .25s ease, box-shadow .25s ease, opacity .8s ease;
}
.btn:active { transform: scale(.96); }
.btn.ghost { color: var(--ink); background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; backdrop-filter: blur(6px); }
.btn.pulse { animation: beat 1.6s ease-in-out infinite; }
.btn.hidden { opacity: 0; pointer-events: none; }
.btnRow { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.chip {
  appearance: none; border: 1px solid rgba(255,255,255,.28); background: rgba(20, 6, 31, .45); color: var(--ink);
  font-family: var(--serif); font-size: 17px; letter-spacing: .08em; min-width: 44px; height: 38px; border-radius: 999px; padding: 0 14px; cursor: pointer; backdrop-filter: blur(6px);
}
.corner { position: fixed; top: max(14px, env(safe-area-inset-top)); z-index: 40; }
.corner-left { left: 14px; } .corner-right { right: 14px; }
.chip[hidden] { display: none; }
.chip.off { opacity: .5; text-decoration: line-through; }

.spark { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

@keyframes beat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.06); } 28% { transform: scale(1); } 42% { transform: scale(1.045); } 70% { transform: scale(1); } }

/* ---------- gate (sealed letter) ---------- */
.envelope { position: relative; width: min(78vw, 330px); aspect-ratio: 1.45; margin: 4px 0 22px; filter: drop-shadow(0 22px 40px rgba(0,0,0,.5)); animation: floaty 5s ease-in-out infinite; }
.envelope .body { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(160deg, #fbe6ee, #f3c4d6); }
.envelope .flap { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(180deg, #fff2f6, #f4cfdd); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 10px 10px 0 0; box-shadow: 0 6px 12px rgba(0,0,0,.12); }
.envelope .seal { position: absolute; left: 50%; top: 54%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7fa6, var(--rose-deep) 62%, #9c1b4c); box-shadow: 0 6px 14px rgba(150, 20, 70, .55), 0 0 30px rgba(255,107,154,.6); display: grid; place-items: center; animation: beat 2s ease-in-out infinite; }
.envelope .seal svg { width: 56%; height: 56%; fill: #ffe3ee; filter: drop-shadow(0 1px 1px rgba(90,0,40,.5)); }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }

/* ---------- counter ---------- */
.count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 6px; width: min(92vw, 460px); }
.count div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 14px 4px 10px; backdrop-filter: blur(6px); }
.count b { display: block; font-size: clamp(30px, 9vw, 44px); font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; }
.count span { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- photos ---------- */
.frame { position: relative; width: min(90vw, 460px); height: min(52vh, 460px); margin: 14px 0 6px; transform: rotate(-1deg); }
.frame img {
  position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
  border-radius: 14px; box-shadow: 0 0 0 5px rgba(255,255,255,.92), 0 0 0 6px rgba(255,255,255,.4), 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; transition: opacity 1.4s ease;
}
.frame img.show { opacity: 1; }
.caption { min-height: 1.6em; font-style: italic; font-size: 22px; color: var(--ink-soft); margin-top: 16px; }

/* ---------- the question ---------- */
.ring { width: min(46vw, 190px); margin: 0 auto 6px; filter: drop-shadow(0 0 26px rgba(255, 220, 160, .55)); animation: floaty 4.4s ease-in-out infinite; }
.ask { font-size: clamp(36px, 10.5vw, 60px); margin: 6px 0 4px; }
.ask.typing::after { content: '|'; margin-left: 2px; animation: blink 1s steps(1) infinite; color: var(--rose); }
@keyframes blink { 50% { opacity: 0; } }
.tw { opacity: 0; transition: opacity 1.4s ease; }
.tw.show { opacity: 1; }

/* ---------- yes ---------- */
.yesTitle { font-size: clamp(46px, 14vw, 84px); margin: 0 0 8px; }
.yesText { font-style: italic; font-size: clamp(21px, 5.6vw, 27px); line-height: 1.55; margin: 8px 0 0; }
.sign { margin-top: 20px; font-size: clamp(34px, 10vw, 48px); }
.note { font-size: 15px; color: rgba(255,231,240,.6); margin-top: 14px; min-height: 1.4em; }

@media (max-height: 640px) {
  .lineBox { min-height: 7em; }
  .envelope { width: min(58vw, 250px); margin-bottom: 12px; }
  .ring { width: min(34vw, 130px); }
}
@media (prefers-reduced-motion: reduce) {
  .envelope, .ring, .btn.pulse, .seal { animation: none; }
  .scene, .line { transition-duration: .01s; }
}

/* ---------- poem ---------- */
.poemBox { min-height: 11em; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.stanza { opacity: 0; transition: opacity .7s ease; }
.stanza.show { opacity: 1; }
.pline {
  font-style: italic; font-weight: 400; font-size: clamp(22px, 6vw, 30px); line-height: 1.5; color: var(--ink);
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
  opacity: 0; filter: blur(6px); transform: translateY(8px);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}
.stanza.show .pline { opacity: 1; filter: blur(0); transform: none; }
@media (max-height: 560px) { .poemBox { min-height: 7em; } }

/* ---------- "call me" button ---------- */
.callWrap { margin-top: 26px; }
.callBtn {
  position: relative; display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: #2b0a1c;
  padding: 12px 30px 12px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #ffe9b8 0%, var(--gold) 40%, #ff9ec4 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 12px 40px rgba(255, 107, 154, .55), 0 0 60px rgba(247, 217, 154, .45);
  animation: beat 1.8s ease-in-out infinite;
  transition: transform .2s ease;
}
.callBtn:active { transform: scale(.96); }
.callBtn::before, .callBtn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 158, 196, .8);
  animation: ripple 2.4s ease-out infinite; pointer-events: none;
}
.callBtn::after { animation-delay: 1.2s; }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35, 1.7); opacity: 0; } }
.callIcon {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #ff8fb1, var(--rose-deep));
  box-shadow: 0 6px 18px rgba(226, 60, 118, .55), inset 0 0 0 1px rgba(255,255,255,.35);
}
.callIcon svg { width: 28px; height: 28px; fill: #fff; transform-origin: 50% 50%; animation: ring 1.8s ease-in-out infinite; }
@keyframes ring { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-16deg); } 68% { transform: rotate(14deg); } 76% { transform: rotate(-12deg); } 84% { transform: rotate(10deg); } 92% { transform: rotate(-4deg); } }
.callText { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.callText b { font-size: clamp(21px, 6vw, 26px); font-weight: 500; letter-spacing: .01em; }
.callText i { font-size: clamp(15px, 4vw, 17px); opacity: .8; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .callBtn, .callBtn::before, .callBtn::after, .callIcon svg { animation: none; } }