/* A quiet, rose-lit love letter. All original copy and interactions remain. */
:root {
  --bg: #130d16;
  --ink: #fff4ec;
  --muted: #cfb9c6;
  --muted-2: #b49aa9;
  --pink-soft: #ffc6d5;
  --line: rgba(255, 211, 219, .20);
  --ease: cubic-bezier(.2,.75,.25,1);
}
body { background: radial-gradient(ellipse at 50% 38%, #35202f 0%, #1d1220 45%, #100c15 100%); }
body::before { background: radial-gradient(circle, #cc698b 0%, transparent 68%); opacity: .24; width: 90vw; left: -40vw; top: -30vh; }
body::after { background: radial-gradient(circle, #b88c58 0%, transparent 68%); opacity: .17; right: -35vw; bottom: -30vh; }
.ambient { opacity: .16; filter: blur(75px); animation: roseLight 19s ease-in-out infinite alternate; }
.ambient-one { background: #df779f; top: 15%; left: 65%; }
.ambient-two { background: #a785b5; bottom: 5%; left: -15%; animation-delay: -9s; }
.vignette { background: radial-gradient(ellipse, transparent 25%, rgba(8,5,12,.42)); }
#starfield { opacity: .48; }
.experience::before { content: ''; position: absolute; inset: 22px; border: 1px solid rgba(244,194,205,.15); border-radius: 3px; pointer-events: none; z-index: 4; }
.experience::after { content: ''; position: absolute; width: 5px; height: 5px; background: #e9b6c8; transform: rotate(45deg); top: 20px; left: calc(50% - 3px); box-shadow: 0 0 18px #e9b6c8; pointer-events: none; z-index: 5; }
.screen { padding: max(48px, env(safe-area-inset-top)) 36px max(48px, env(safe-area-inset-bottom)); overflow-y: auto; min-height: 100%; }
.screen-inner.narrow { width: min(100%, 740px); }
h1, h2 { font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-weight: 400; letter-spacing: -.045em; line-height: 1.08; text-shadow: 0 6px 50px rgba(245,159,185,.12); }
h1 { font-size: clamp(3rem, 7.8vw, 6.2rem); max-width: 12ch; }
#story-title { font-size: clamp(2.65rem, 6.8vw, 5.4rem); max-width: 16ch; }
.question-title { font-size: clamp(2.9rem, 7.8vw, 6rem); max-width: 13ch; }
.yes-title { font-size: clamp(2.6rem, 6.7vw, 5.2rem); max-width: 15ch; }
.eyebrow { color: #e2b1c4; font-size: .64rem; letter-spacing: .30em; font-weight: 500; margin-bottom: 26px; }
.eyebrow::before { content: ''; display: block; margin: 0 auto 26px; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #e0acbc, transparent); }
#screen-intro .screen-inner::before { content: ''; display: block; width: 52px; height: 52px; margin: 0 auto 34px; border: 1px solid #ddb0c0; border-radius: 50% 50% 4px 50%; transform: rotate(45deg); background: radial-gradient(circle at 30% 30%, rgba(255,208,220,.12), transparent); box-shadow: 0 0 55px rgba(236,141,177,.14), inset 0 0 24px rgba(236,141,177,.06); }
.body-copy { font-size: clamp(1rem, 2.8vw, 1.2rem); line-height: 1.8; max-width: 28rem; margin-top: 28px; }
.button { font-size: .86rem; letter-spacing: .03em; font-weight: 600; }
.button-secondary { min-width: 156px; min-height: 54px; margin-top: 36px; border-color: rgba(245,192,207,.3); background: linear-gradient(120deg, rgba(255,210,224,.12), rgba(255,210,224,.03)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 35px rgba(0,0,0,.15); }
.button-secondary:hover { background: rgba(248,192,211,.16); border-color: #c88fa7; }
.button-yes { color: #442133; background: linear-gradient(125deg, #ffe6da, #edafc6 65%, #db99be); box-shadow: 0 10px 45px rgba(235,144,180,.28), inset 0 1px rgba(255,255,255,.65); }
.button-yes:hover { box-shadow: 0 14px 60px rgba(235,144,180,.4); }
.button-no { color: #d5bdc9; background: rgba(255,220,232,.035); border-color: rgba(255,220,232,.17); }
.button-stage { margin-top: 28px; }
.glass-card { background: linear-gradient(145deg, rgba(255,217,230,.07), rgba(255,217,230,.015)); border-color: rgba(255,211,225,.19); border-radius: 8px; }
.heart-orbit { width: 100px; height: 100px; margin-bottom: 26px; }
.heart-core { font-size: 2.6rem; color: #f9b9ce; animation: tenderPulse 3.2s ease-in-out infinite; }
.orbit { border-color: rgba(250,185,206,.28); inset: 7px; }
.orbit-two { inset: -5px; border-style: dashed; border-color: rgba(250,185,206,.16); animation: orbitTurn 45s linear infinite; }
.celebration-screen::before { width: min(95vw, 800px); background: radial-gradient(circle, rgba(234,136,178,.17), rgba(211,159,122,.04) 45%, transparent 70%); }
.celebration-content .eyebrow::before { display: none; }
.date-line { display: table; border: 1px solid rgba(247,192,209,.2); padding: 10px 20px; border-radius: 30px; font-size: .8rem; font-weight: 500; letter-spacing: .12em; margin-top: 28px; }
.love-line { font-size: clamp(2.1rem, 5vw, 3rem); color: #f3c0d0; margin-top: 24px; }
.screenshot-line { font-size: .78rem; line-height: 1.7; margin-top: 24px; }
.screen.is-active .eyebrow { animation: letterReveal 950ms var(--ease) both; }
.screen.is-active h1, .screen.is-active h2 { animation: letterReveal 1200ms var(--ease) 100ms both; }
.screen.is-active .body-copy, .screen.is-active .date-line { animation: letterReveal 1100ms var(--ease) 250ms both; }
.screen.is-active .button-secondary, .screen.is-active .button-stage, .screen.is-active .love-line { animation: letterReveal 1100ms var(--ease) 350ms both; }
@keyframes letterReveal { from { opacity: 0; translate: 0 18px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes roseLight { from { transform: translate(-8%, -8%) scale(.9); } to { transform: translate(14%, 12%) scale(1.25); } }
@keyframes tenderPulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 15px #b7688b); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 26px #d187a6); } }
@keyframes orbitTurn { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .experience::before { inset: 14px; }
  .experience::after { top: 12px; }
  .screen { padding-left: 30px; padding-right: 30px; }
  h1 { font-size: clamp(2.6rem, 10.6vw, 3.9rem); }
  #story-title { font-size: clamp(2.35rem, 9.3vw, 3.4rem); }
  .question-title { font-size: clamp(2.55rem, 10.5vw, 3.8rem); }
  .yes-title { font-size: clamp(2.25rem, 9vw, 3.4rem); }
  .body-copy { font-size: .97rem; }
  .eyebrow { font-size: .58rem; letter-spacing: .25em; }
}
@media (max-height: 740px) {
  #screen-intro .screen-inner::before { width: 38px; height: 38px; margin-bottom: 23px; }
  .heart-orbit { width: 66px; height: 66px; margin-bottom: 18px; }
  .eyebrow { margin-bottom: 18px; }
  .eyebrow::before { margin-bottom: 18px; }
  .date-line { margin-top: 20px; }
  .love-line, .screenshot-line { margin-top: 16px; }
  .button-stage { height: 174px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen *, .ambient { animation: none !important; }
}