* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --red: #7b1830;
  --deep-red: #4d0d1d;
  --red-2: #a92f4e;
  --hot-pink: #f08ba0;
  --pink: #ffb8c6;
  --cream: #fff4dc;
  --paper: #fff9ed;
  --gold: #e9b85f;
  --yellow: #ffd36e;
  --ink: #2c1018;
  --white: #fffdf8;
  --shadow: 0 18px 45px rgba(35, 5, 13, .30);
}

html {
  min-height: 100%;
  background: var(--deep-red);
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at 15% 15%, rgba(240,139,160,.22), transparent 24%),
    radial-gradient(circle at 90% 75%, rgba(233,184,95,.15), transparent 25%),
    var(--deep-red);
}


/* =========================================================
   EXPERIENCE STAGE SYSTEM
   One screen at a time — the pages are layers, not a long document.
   ========================================================= */

.experience {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 74px 18px 42px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 25px, 0) rotate(.4deg);
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22,1,.36,1),
    visibility .55s;
  overflow-x: hidden;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) rotate(0);
  z-index: 5;
}

.screen.exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -22px, 0) rotate(-.4deg);
  z-index: 4;
}

.screen-inner {
  position: relative;
  z-index: 5;
  width: min(100%, 640px);
  margin: 0 auto;
  text-align: center;
}

.centered {
  margin-left: auto;
  margin-right: auto;
}

/* Never allow any stage to create horizontal page movement. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 699px) {
  .screen {
    width: 100%;
    padding: 70px 16px 38px;
  }

  .screen-inner {
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-title,
  .section-title,
  .riddle-card,
  .answer-form,
  .letter-wrap,
  .btwus-card,
  .how-it-works {
    max-width: 100%;
  }

  .title-line {
    max-width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 390px) {
  .screen {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* A deliberately imperfect paper/noise layer */
.texture {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Moving love PNGs behind the experience */
.love-rain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.love-float {
  position: absolute;
  width: clamp(48px, 10vw, 105px);
  height: auto;
  opacity: .30;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.12));
  will-change: transform;
}

.love-1 { left: 4%; top: 8%; animation: driftOne 11s ease-in-out infinite; }
.love-2 { right: 7%; top: 14%; width: clamp(42px, 8vw, 85px); animation: driftTwo 13s ease-in-out infinite; }
.love-3 { left: 11%; bottom: 10%; width: clamp(55px, 11vw, 115px); animation: driftThree 15s ease-in-out infinite; }
.love-4 { right: 12%; bottom: 17%; width: clamp(42px, 8vw, 80px); animation: driftFour 10s ease-in-out infinite; }
.love-5 { left: 36%; top: 5%; width: clamp(35px, 7vw, 70px); opacity: .16; animation: driftTwo 16s ease-in-out infinite reverse; }
.love-6 { right: 34%; bottom: 6%; width: clamp(40px, 7vw, 72px); opacity: .17; animation: driftOne 14s ease-in-out infinite reverse; }
.love-7 { left: -2%; top: 48%; width: clamp(60px, 12vw, 125px); opacity: .14; animation: driftFour 18s ease-in-out infinite; }
.love-8 { right: -1%; top: 57%; width: clamp(55px, 11vw, 110px); opacity: .15; animation: driftThree 17s ease-in-out infinite reverse; }

.love-spark {
  position: absolute;
  color: var(--yellow);
  font-size: clamp(1rem, 4vw, 2.4rem);
  opacity: .75;
  text-shadow: 0 0 18px rgba(255,211,110,.25);
}
.spark-1 { left: 22%; top: 25%; animation: sparkle 2.4s ease-in-out infinite; }
.spark-2 { right: 21%; top: 37%; animation: sparkle 3s ease-in-out infinite .4s; }
.spark-3 { right: 28%; bottom: 21%; animation: sparkle 2.7s ease-in-out infinite .8s; }

/* Opening is intentionally BIG and loud */
.eyebrow {
  display: inline-block;
  padding: 7px 11px;
  color: var(--deep-red);
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.3;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.gold-line {
  width: 65px;
  height: 4px;
  margin: 20px auto 18px;
  background: var(--gold);
  border: 1px solid var(--ink);
  transform: rotate(3deg);
}

.hero-title,
.section-title {
  color: var(--cream);
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  line-height: .78;
  text-shadow:
    4px 4px 0 var(--red-2),
    7px 7px 0 rgba(0,0,0,.18);
}

.hero-title {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: clamp(4rem, 15vw, 9.5rem);
  letter-spacing: -.055em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}

.title-line {
  display: block;
  width: 100%;
  min-height: .78em;
  text-align: center;
  white-space: nowrap;
}

.typing-caret {
  display: inline-block;
  margin-left: 2px;
  color: var(--pink);
  font-family: Inter, sans-serif;
  font-size: .45em;
  font-weight: 500;
  animation: blink .7s steps(1) infinite;
}

.hero-subtitle {
  max-width: 350px;
  margin: 27px auto 0;
  color: var(--pink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.05;
}

.intro-copy,
.section-intro,
.gift-intro,
.unlock-copy {
  color: var(--cream);
  font-size: .82rem;
  line-height: 1.8;
}

.intro-copy {
  margin: 25px auto 29px;
}

.primary-button,
.secondary-button {
  min-height: 55px;
  border: 2px solid var(--ink);
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 14px 10px 16px 11px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .68rem;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease;
}

.primary-button {
  background: var(--pink);
  color: var(--deep-red);
  box-shadow: 5px 5px 0 var(--ink);
}

.primary-button:hover,
.primary-button:focus-visible {
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 8px 8px 0 var(--ink);
}

.primary-button:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.primary-button span {
  color: var(--red);
  font-size: 1.1rem;
}

.secondary-button {
  background: var(--cream);
  color: var(--deep-red);
  box-shadow: 4px 4px 0 var(--ink);
}

.tiny-note {
  margin-top: 20px;
  color: var(--pink);
  font-family: "Cormorant Garamond", serif;
  font-size: .95rem;
  font-style: italic;
}

/* Riddle */
.section-title {
  font-size: clamp(4rem, 19vw, 7.5rem);
}

.section-intro {
  margin-top: 22px;
}

.riddle-card {
  position: relative;
  width: min(100%, 500px);
  margin: 27px auto 24px;
  padding: 33px 22px 28px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--pink);
  transform: rotate(.8deg);
}

.riddle-card::after {
  content: "hmmm...";
  position: absolute;
  right: 12px;
  top: -17px;
  padding: 4px 8px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-style: italic;
  transform: rotate(5deg);
}

.quote-mark {
  position: absolute;
  top: -10px;
  left: 12px;
  color: var(--red-2);
  font-family: "Cormorant Garamond", serif;
  font-size: 5rem;
  line-height: 1;
}

.riddle-text {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.27rem;
  font-weight: 600;
  line-height: 1.35;
}

.riddle-question {
  margin-top: 22px;
  color: var(--red);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  font-weight: 800;
}

.answer-form {
  width: min(100%, 440px);
  margin: 0 auto;
}

.answer-form input {
  width: 100%;
  height: 58px;
  margin-bottom: 13px;
  padding: 0 16px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  outline: none;
  background: var(--white);
  color: var(--deep-red);
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 600;
  box-shadow: 4px 4px 0 var(--pink);
}

.answer-form input:focus {
  box-shadow: 7px 7px 0 var(--gold);
}

.answer-form .primary-button {
  width: 100%;
}

.feedback {
  min-height: 34px;
  margin-top: 13px;
  color: var(--pink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.feedback.shake {
  animation: shake .4s ease;
}

/* Unlock */
.unlock .screen-inner::before {
  content: "♥";
  position: absolute;
  left: 3%;
  top: -5%;
  color: var(--pink);
  font-size: 2.5rem;
  transform: rotate(-15deg);
}

.unlock-symbol {
  width: 75px;
  height: 75px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  color: var(--deep-red);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 5px 5px 0 var(--pink);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5rem;
  animation: heartbeat 1.2s ease-in-out infinite;
}

.unlock-copy {
  margin-top: 25px;
}

.personal-line {
  min-height: 28px;
  margin: 15px 0 28px;
  color: var(--pink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
}

/* Music */
.music-toggle {
  position: fixed;
  z-index: 50;
  top: max(15px, env(safe-area-inset-top));
  right: 15px;
  min-height: 39px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--yellow);
  color: var(--deep-red);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.music-toggle.playing {
  background: var(--pink);
  animation: musicBounce .8s ease-in-out infinite alternate;
}

/* Envelope */
.letter-envelope {
  position: relative;
  width: min(84vw, 440px);
  height: 260px;
  margin: 0 auto 24px;
  background: var(--red-2);
  border: 3px solid var(--ink);
  box-shadow: 9px 9px 0 var(--pink);
  overflow: hidden;
  transform: rotate(-1deg);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.letter-envelope::before,
.letter-envelope::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.letter-envelope::before {
  left: 0;
  border-width: 130px 220px 0 0;
  border-color: #8f2441 transparent transparent transparent;
}

.letter-envelope::after {
  right: 0;
  border-width: 0 220px 130px 0;
  border-color: transparent #69162b transparent transparent;
}

.envelope-flap {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 220px solid transparent;
  border-right: 220px solid transparent;
  border-top: 145px solid #a92f4e;
  transform-origin: top center;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}

.envelope-paper {
  position: absolute;
  z-index: 3;
  left: 8%;
  right: 8%;
  bottom: 11px;
  height: 185px;
  padding-top: 62px;
  background: var(--cream);
  color: var(--red);
  border: 2px solid var(--ink);
  font-family: "Cormorant Garamond", serif;
  box-shadow: 0 8px 25px rgba(39,35,38,.2);
}

.envelope-paper span,
.envelope-paper strong {
  display: block;
}

.envelope-paper span {
  font-size: 1rem;
}

.envelope-paper strong {
  margin-top: 4px;
  font-size: 1.7rem;
}

.letter-envelope.open {
  transform: translateY(-28px) rotate(1deg);
}

.letter-envelope.open .envelope-flap {
  transform: rotateX(180deg);
}

.letter-wrap {
  display: none;
  width: min(100%, 570px);
  margin: 0 auto;
  animation: paperPop .75s cubic-bezier(.22,1,.36,1) both;
}

.letter-wrap.visible {
  display: block;
}

.letter-paper {
  position: relative;
  padding: 36px 24px 34px;
  color: var(--ink);
  background:
    linear-gradient(rgba(255,249,237,.95), rgba(255,249,237,.95)),
    var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--gold);
  text-align: left;
  transform: rotate(-.5deg);
}

.letter-paper::before {
  content: "♡";
  position: absolute;
  top: 13px;
  right: 18px;
  color: var(--red-2);
  font-size: 1.6rem;
}

.letter-kicker {
  color: var(--red-2);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.letter-paper h2 {
  margin-top: 12px;
  color: var(--red);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 11vw, 3.7rem);
  font-weight: 700;
  line-height: .88;
}

.letter-body {
  min-height: 230px;
  margin-top: 28px;
  color: #40131f;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
}

.letter-body p {
  margin-bottom: 17px;
}

.letter-body .highlight {
  color: var(--red-2);
  font-weight: 800;
}

.typing-cursor {
  display: inline-block;
  margin-top: -15px;
  color: var(--red-2);
  font-family: monospace;
  font-weight: 900;
  animation: blink .7s steps(1) infinite;
}

.letter-signoff {
  margin-top: 25px;
  color: #77515a;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
}

.letter-signoff strong {
  display: block;
  margin-top: 3px;
  color: var(--red);
  font-size: 1.55rem;
}

.letter-open-button {
  margin-top: 10px;
}

.continue-letter {
  margin-top: 23px;
}

/* Gift */
.gift-inner {
  padding-top: 3vh;
}

.gift-inner .section-title {
  font-size: clamp(4rem, 18vw, 7rem);
}

.gift-intro {
  margin: 25px auto 30px;
}

.btwus-card {
  position: relative;
  width: min(100%, 455px);
  margin: 0 auto 38px;
  padding: 29px 22px 25px;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--pink);
  text-align: left;
  transform: rotate(.7deg);
}

.btwus-card::after {
  content: "OURS ♡";
  position: absolute;
  right: -7px;
  top: -19px;
  padding: 5px 8px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  color: var(--deep-red);
  font-size: .58rem;
  font-weight: 900;
  transform: rotate(5deg);
}

.btwus-mark {
  color: var(--red);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.7rem;
  font-weight: 700;
}

.btwus-mark span {
  color: var(--red-2);
}

.card-label {
  margin-top: 20px;
  color: #805764;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.code-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}

.code-row code {
  flex: 1;
  color: var(--red);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .13em;
  word-break: break-all;
}

.copy-button {
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 8px 11px;
  background: var(--pink);
  color: var(--deep-red);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.code-status {
  min-height: 17px;
  margin-top: 9px;
  color: var(--red-2);
  font-size: .68rem;
}

.how-it-works {
  width: min(100%, 455px);
  margin: 0 auto 33px;
  padding: 22px 19px;
  border: 2px dashed var(--pink);
  background: rgba(123,24,48,.35);
  text-align: left;
}

.how-it-works h3 {
  color: var(--cream);
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.how-subtitle {
  margin: 4px 0 17px;
  color: var(--pink);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
}

.how-it-works ol {
  list-style: none;
}

.how-it-works li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,244,220,.22);
}

.how-it-works li span {
  color: var(--yellow);
  font-size: .62rem;
  font-weight: 900;
}

.how-it-works li p {
  color: var(--cream);
  font-size: .77rem;
  line-height: 1.45;
}

.how-it-works li strong {
  color: var(--pink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
}

.home-step {
  border-bottom: 0 !important;
}

.final-button {
  width: min(100%, 455px);
  background: var(--yellow);
}

.closing-line {
  margin-top: 21px;
  color: var(--pink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.reveal {
  animation: fadeUp .8s cubic-bezier(.22,1,.36,1) both;
}

.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .25s; }
.delay-4 { animation-delay: .34s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px) rotate(1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  15% { transform: scale(1.13); }
  30% { transform: scale(1); }
  45% { transform: scale(1.08); }
}

@keyframes musicBounce {
  from { transform: rotate(-3deg) scale(1); }
  to { transform: rotate(3deg) scale(1.04); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@keyframes paperPop {
  from { opacity: 0; transform: translateY(35px) rotate(-2deg) scale(.96); }
  to { opacity: 1; transform: translateY(0) rotate(-.5deg) scale(1); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (min-width: 700px) {
  .screen { padding: 90px 40px 65px; }
  .hero-title { font-size: clamp(6rem, 11vw, 10rem); }
  .riddle-card { padding: 42px 45px 35px; }
  .letter-paper { padding: 45px 52px 42px; }
  .letter-body { font-size: 1.3rem; }
  .floating-word { font-size: 8rem; }
}

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


@keyframes driftOne {
  0%,100% { transform: translate3d(0,0,0) rotate(-12deg); }
  50% { transform: translate3d(20px,-35px,0) rotate(8deg); }
}
@keyframes driftTwo {
  0%,100% { transform: translate3d(0,0,0) rotate(8deg); }
  50% { transform: translate3d(-28px,28px,0) rotate(-13deg); }
}
@keyframes driftThree {
  0%,100% { transform: translate3d(0,0,0) rotate(-5deg); }
  50% { transform: translate3d(35px,-22px,0) rotate(12deg); }
}
@keyframes driftFour {
  0%,100% { transform: translate3d(0,0,0) rotate(14deg); }
  50% { transform: translate3d(-20px,-30px,0) rotate(-5deg); }
}
@keyframes sparkle {
  0%,100% { opacity: .25; transform: scale(.8) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
}


/* ===== LOVE MOTION POLISH ===== */
.love-float{transform-origin:center;opacity:.28;mix-blend-mode:screen}
.love-1{animation:loveFloatOne 9s ease-in-out infinite}.love-2{animation:loveFloatTwo 12s ease-in-out infinite}
.love-3{animation:loveFloatThree 14s ease-in-out infinite}.love-4{animation:loveFloatFour 10s ease-in-out infinite}
.love-5{animation:loveFloatTwo 15s ease-in-out infinite reverse}.love-6{animation:loveFloatOne 13s ease-in-out infinite reverse}
.love-7{animation:loveFloatFour 17s ease-in-out infinite}.love-8{animation:loveFloatThree 16s ease-in-out infinite reverse}
@keyframes loveFloatOne{0%,100%{transform:translate3d(-4px,4px,0) rotate(-12deg) scale(.95)}50%{transform:translate3d(25px,-34px,0) rotate(10deg) scale(1.06)}}
@keyframes loveFloatTwo{0%,100%{transform:translate3d(0,0,0) rotate(8deg)}50%{transform:translate3d(-30px,24px,0) rotate(-16deg) scale(.9)}}
@keyframes loveFloatThree{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(34px,-24px,0) rotate(14deg) scale(1.08)}}
@keyframes loveFloatFour{0%,100%{transform:translate3d(0,0,0) rotate(14deg)}50%{transform:translate3d(-24px,-32px,0) rotate(-8deg) scale(.92)}}

/* ===== DRAMATIC FOREVER & A DAY ===== */
.forever-stage{position:relative;width:min(100%,600px);min-height:330px;display:grid;place-items:center;margin:-10px auto 0;isolation:isolate}
.forever-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg) scale(.8);width:130%;color:rgba(255,184,198,.07);font-family:"Cormorant Garamond",serif;font-size:clamp(5rem,23vw,11rem);font-weight:700;line-height:.7;letter-spacing:-.07em;white-space:nowrap;opacity:0}
.forever-title{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;margin:0;line-height:.72}
.forever-word,.and-word,.day-word{display:block;opacity:0;transform:translateY(35px) scale(.88) rotate(2deg);filter:blur(8px)}
.forever-word{color:var(--cream);font-size:clamp(5rem,23vw,10rem);text-shadow:7px 8px 0 var(--red-2),0 0 35px rgba(255,211,110,.18)}
.and-word{margin-top:5px;color:var(--yellow);font-size:clamp(2.3rem,11vw,4.8rem);font-style:italic;font-weight:600;text-shadow:3px 3px 0 var(--ink)}
.day-word{color:var(--pink);font-size:clamp(4.2rem,20vw,8.5rem);text-shadow:6px 7px 0 var(--red-2)}
.reveal-now .forever-ghost{animation:ghostForever 1.8s cubic-bezier(.22,1,.36,1) both}
.reveal-now .forever-word{animation:foreverDrop .9s .05s cubic-bezier(.16,1,.3,1) both}
.reveal-now .and-word{animation:andFloat .7s .55s cubic-bezier(.16,1,.3,1) both}
.reveal-now .day-word{animation:dayDrop 1s .78s cubic-bezier(.16,1,.3,1) both}
.forever-sparkle{position:absolute;z-index:3;color:var(--yellow);font-size:clamp(1.4rem,5vw,3rem);opacity:0;text-shadow:0 0 20px rgba(255,211,110,.6)}
.reveal-now .sparkle-a{left:9%;top:22%;animation:sparklePop .7s .35s ease-out both}
.reveal-now .sparkle-b{right:7%;top:34%;animation:sparklePop .7s .65s ease-out both}
.reveal-now .sparkle-c{right:18%;bottom:7%;animation:sparklePop .7s 1s ease-out both,heartPulse 1.5s 1.3s ease-in-out infinite}
.heart-burst{position:absolute;inset:50%;z-index:4;width:1px;height:1px;pointer-events:none}
.heart-burst span{position:absolute;left:-8px;top:-8px;color:var(--pink);font-size:clamp(1rem,4vw,1.8rem);text-shadow:0 0 14px rgba(255,184,198,.6);animation:heartBurst 1.35s calc(var(--i)*45ms) cubic-bezier(.12,.7,.25,1) both}
@keyframes ghostForever{0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(.7)}35%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}}
@keyframes foreverDrop{0%{opacity:0;transform:translateY(65px) scale(.72) rotate(-6deg);filter:blur(12px)}70%{opacity:1;transform:translateY(-5px) scale(1.04) rotate(1deg);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}}
@keyframes andFloat{0%{opacity:0;transform:translateY(-12px) rotate(-10deg) scale(.5);filter:blur(6px)}100%{opacity:1;transform:translateY(0) rotate(-3deg) scale(1);filter:blur(0)}}
@keyframes dayDrop{0%{opacity:0;transform:translateY(-25px) scale(.78) rotate(5deg);filter:blur(10px)}70%{opacity:1;transform:translateY(4px) scale(1.04) rotate(-1deg);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}}
@keyframes sparklePop{0%{opacity:0;transform:scale(0) rotate(-40deg)}70%{opacity:1;transform:scale(1.3) rotate(15deg)}100%{opacity:.85;transform:scale(1) rotate(0)}}
@keyframes heartBurst{0%{opacity:0;transform:rotate(var(--angle)) translateX(0) scale(.2)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(clamp(70px,22vw,145px)) scale(1)}}
@keyframes heartPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.25);opacity:1}}

/* ===== LETTER AS A GIFT WITH A BOW ===== */
.letter-package{position:relative;width:min(84vw,440px);margin:0 auto 24px;padding-top:26px}
.letter-package .letter-envelope{width:100%;margin:0}
.ribbon{position:absolute;z-index:7;background:var(--pink);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(44,16,24,.25);pointer-events:none}
.ribbon-horizontal{left:0;right:0;top:50%;height:30px;transform:translateY(-50%)}
.ribbon-vertical{top:0;bottom:0;left:50%;width:30px;transform:translateX(-50%)}
.bow{position:absolute;z-index:12;top:-3px;left:50%;width:130px;height:76px;transform:translateX(-50%) rotate(-3deg);transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.bow-loop{position:absolute;top:8px;width:58px;height:43px;background:var(--pink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--deep-red)}
.bow-left{left:3px;border-radius:70% 25% 65% 30%;transform:rotate(13deg)}.bow-right{right:3px;border-radius:25% 70% 30% 65%;transform:rotate(-13deg)}
.bow-knot{position:absolute;z-index:3;left:50%;top:22px;width:31px;height:31px;transform:translateX(-50%);border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--deep-red)}
.bow-tail{position:absolute;top:43px;width:37px;height:42px;background:var(--pink);border:3px solid var(--ink);clip-path:polygon(0 0,100% 0,72% 100%,50% 78%,28% 100%)}
.bow-tail-left{left:23px;transform:rotate(16deg)}.bow-tail-right{right:23px;transform:rotate(-16deg)}
.letter-package.opened .bow{opacity:0;transform:translate(-50%,-65px) scale(.65) rotate(12deg)}
.letter-package.opened .ribbon-horizontal{transform:translateY(-50%) scaleX(.65);opacity:0;transition:.45s ease}
.letter-package.opened .ribbon-vertical{transform:translateX(-50%) scaleY(.5);opacity:0;transition:.45s ease}
.letter-package.opened .letter-envelope{transform:translateY(-28px) rotate(1deg)}
.letter-package.opened .envelope-flap{transform:rotateX(180deg)}
.letter-package.opened .envelope-paper{animation:paperRise .9s .25s cubic-bezier(.22,1,.36,1) both}
@keyframes paperRise{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-35px) scale(1.02)}100%{transform:translateY(-4px) scale(1)}}

/* ===== TYPING POLISH ===== */
.riddle-caret{display:inline-block;margin-left:2px;color:var(--red-2);font-family:monospace;font-weight:900;animation:blink .65s steps(1) infinite}
.typed-riddle-line{display:inline}
@media(max-width:699px){.forever-stage{min-height:300px}.forever-ghost{width:145%}.forever-word{font-size:clamp(4.5rem,22vw,7.8rem)}.day-word{font-size:clamp(4rem,20vw,7.2rem)}.letter-package{width:min(86vw,420px)}.bow{transform:translateX(-50%) scale(.9) rotate(-3deg);transform-origin:top center}}