@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@400;500;600;700&display=swap');


/* =========================
   GLOBAL STYLES
========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #280611;
  color: #fff;
}

body {
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}


/* =========================
   FLOATING HEARTS
========================= */

.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.heart {
  position: absolute;
  bottom: -40px;
  color: #ffd9e5;
  font-size: 18px;
  opacity: 0.12;
  animation: floatUp linear forwards;
}


/* =========================
   SCREEN LAYOUT
========================= */

.screen {
  position: relative;
  z-index: 1;

  min-height: 100svh;
  width: 100%;
  max-width: 520px;

  margin: auto;
  padding: 54px 24px 40px;

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.screen.active {
  display: flex;
  animation: enter 0.65s ease both;
}


/* =========================
   TYPOGRAPHY
========================= */

.eyebrow {
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  opacity: 0.65;
}

.screen h1,
.screen h2 {
  margin: 0 0 20px;

  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 0.95;
}

.screen h1 {
  font-size: clamp(52px, 15vw, 76px);
}

.screen h1 span,
.screen h2 span {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  color: #ffd7e2;
}

.screen h2 {
  font-size: clamp(39px, 11vw, 58px);
}

.lead {
  max-width: 340px;
  margin: 0 auto 28px;

  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  line-height: 1.25;
  color: #f8dfe7;
}

.lead small {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.65;
}

.birthday-heading {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  line-height: 1.15;
  font-weight: 600;
  color: #fff8f3;
  text-align: center;
}

.birthday-heading span {
  display: inline-block;
  margin-top: 8px;
  font-family: 'Great Vibes', cursive;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  color: #f7c6d5;
}
/* =========================
   BUTTONS
========================= */

.primary,
.ghost {
  border: 0;

  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;

  cursor: pointer;
  transition: 0.2s;
}

.primary {
  padding: 16px 25px;

  background: #a9284e;
  color: white;

  border-radius: 999px;
  box-shadow: 0 10px 30px #0004;
}

.primary:active {
  transform: scale(0.96);
}

.ghost {
  padding: 15px;
  background: none;
  color: #f8cbd7;
}

.tiny {
  margin-top: 14px;
  font-size: 11px;
  opacity: 0.75;
}

.hidden {
  display: none !important;
}


/* =========================
   CODE CARD
========================= */

.code-card {
  width: 100%;
  max-width: 360px;

  padding: 25px;

  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 28px;

  backdrop-filter: blur(12px);
}

.lock {
  margin-bottom: 12px;

  font-family: "Parisienne";
  font-size: 45px;
  color: #ffd4df;
}

.code-card input {
  width: 100%;
  padding: 15px;

  background: #16030b;
  color: #fff;

  border: 1px solid #ffffff30;
  border-radius: 14px;

  text-align: center;
  font-size: 16px;
  outline: none;
}

.code-card input:focus {
  border-color: #e887a3;
}

.hint {
  margin: 17px 8px 20px;

  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  line-height: 1.2;
  color: #f4d9e1;
}


/* =========================
   CAKE SECTION
========================= */

.cake-wrap {
  position: relative;

  width: 290px;
  height: 290px;

  margin: 4px auto 20px;
}

.glow {
  position: absolute;

  width: 170px;
  height: 170px;

  top: 15px;
  left: 60px;

  border-radius: 50%;
  background: #ffbf69;

  filter: blur(40px);
  opacity: 0.16;
}

.cake {
  position: absolute;

  left: 25px;
  right: 25px;
  bottom: 20px;

  height: 205px;
}

.plate {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 18px;

  background: #f9e6e9;
  border-radius: 50%;
  box-shadow: 0 5px 10px #0005;
}

.cake-base {
  position: absolute;

  left: 28px;
  right: 28px;
  bottom: 12px;

  height: 58px;

  background: linear-gradient(#b74765, #792039);
  border-radius: 8px 8px 22px 22px;
}

.cake-body {
  position: absolute;

  left: 36px;
  right: 36px;
  bottom: 57px;

  height: 58px;

  background: linear-gradient(#f5c1c9, #d96c83);
  border-radius: 12px 12px 20px 20px;
}

.icing {
  position: absolute;

  left: 34px;
  right: 34px;
  bottom: 105px;

  height: 25px;

  background: #fff0f2;
  border-radius: 50% 50% 35% 35%;
  box-shadow: 0 5px 0 #e49aa9;
}

.candle {
  position: absolute;
  z-index: 4;

  left: 50%;
  bottom: 127px;

  width: 14px;
  height: 65px;

  transform: translateX(-50%);

  background: repeating-linear-gradient(
    135deg,
    #fff 0 8px,
    #d75c7b 8px 13px
  );

  border-radius: 6px;
  cursor: pointer;
}

.flame {
  position: absolute;

  top: -29px;
  left: 50%;

  width: 20px;
  height: 29px;

  transform: translateX(-50%);
  rotate: 45deg;

  background: #ffcf68;
  border-radius: 50% 50% 50% 0;

  box-shadow: 0 0 25px #ffbd57;
  animation: flicker 0.45s infinite alternate;
}

.smoke {
  position: absolute;

  top: -27px;
  left: 50%;

  width: 10px;
  height: 10px;

  border-radius: 50%;
  opacity: 0;

  background: #ddd;
  filter: blur(3px);
}

.candle.out .flame {
  display: none;
}

.candle.out .smoke {
  opacity: 0.5;
  animation: smoke 1.6s ease-out forwards;
}

.cake-wrap.out .glow {
  opacity: 0.05;
}


/* =========================
   ROMANTIC LETTER
========================= */

.paper-card {
  width: 100%;
  max-width: 390px;

  margin-bottom: 25px;
  padding: 34px 28px;

  background: #fff4ed;
  color: #4b1726;

  border-radius: 4px 4px 22px 4px;
  box-shadow: 0 20px 50px #0005;

  transform: rotate(-1deg);
}

.paper-card .eyebrow {
  color: #9b5266;
}

.paper-card h2 {
  margin-bottom: 4px;
  font-size: 34px;
  color: #9d294a;
}

.letter {
  text-align: left;

  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  line-height: 1.35;
}

.letter p {
  margin: 0 0 13px;
}

.signature {
  font-family: "Parisienne", cursive;
  font-size: 25px !important;
  text-align: right;
}


/* =========================
   SCRATCH CARD
========================= */
.scratch-card {
  position: relative;
  width: min(100%, 340px);
  min-height: 220px;
  margin: 28px auto 16px;
  overflow: hidden;
  border-radius: 22px;
  background: #fff8f3;
  box-shadow: 0 15px 35px rgba(70, 12, 35, 0.18);
  touch-action: none;
}

.scratch-message {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
  color: #6f1838;
  background:
    radial-gradient(circle at top left, rgba(244, 185, 202, 0.45), transparent 45%),
    #fff8f3;
}

.scratch-message p {
  margin: 0 0 18px;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  line-height: 1.7;
}

.scratch-message span {
  font-family: 'Great Vibes', cursive;
  font-size: 1.8rem;
}

#scratchCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.scratch-instruction {
  font-size: 0.85rem;
  color: rgba(255, 248, 243, 0.75);
  text-align: center;
}

.hidden {
  display: none !important;
}

/* =========================
   PLAYLIST
========================= */

.playlist {
  width: 100%;
  max-width: 390px;

  margin: 5px 0 18px;
}

.track {
  width: 100%;

  display: grid;
  grid-template-columns: 40px 1fr 38px;
  align-items: center;

  margin-bottom: 9px;
  padding: 14px 12px;

  background: #ffffff0b;
  color: white;

  border: 1px solid #ffffff14;
  border-radius: 16px;

  text-align: left;
  cursor: pointer;
}

.track-no {
  font-family: "Cormorant Garamond";
  font-size: 20px;
  opacity: 0.55;
}

.track b,
.track small {
  display: block;
}

.track b {
  font-size: 13px;
}

.track small {
  margin-top: 3px;
  font-size: 10px;
  opacity: 0.55;
}

.play {
  text-align: center;
  color: #ffc6d4;
}

audio {
  width: 100%;
  max-width: 390px;
  height: 34px;

  margin: 0 0 20px;
  opacity: 0.75;
}


/* =========================
   BIRTHDAY CARD
========================= */
.birthday-card {
  position: relative;
  width: min(100%, 380px);
  height: 300px;
  margin: 28px auto;
  overflow: hidden;
  border-radius: 22px;
  background: #f8eadf;
  color: #541a2a;
  box-shadow: 0 15px 35px rgba(70, 12, 35, 0.2);
  touch-action: none;
}

.card-inside {
  position: absolute;
  inset: 0;
  padding: 25px;
  text-align: left;
  font-family: "Cormorant Garamond", serif;
  overflow: auto;
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}

.card-inside.letter-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scratch-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.envelope-reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #f8eadf;
  color: #6f1838;
  cursor: pointer;
  outline: none;
}

.envelope-reveal p {
  margin: 0;
  padding: 0 20px;
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  text-align: center;
}

.envelope {
  position: relative;
  width: 190px;
  height: 125px;
  background: #d98aa0;
  border: 2px solid #b96580;
  border-radius: 5px;
  box-shadow: 0 14px 25px rgba(70, 12, 35, 0.18);
  perspective: 600px;
}

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

.envelope::before {
  left: 0;
  border-width: 0 0 78px 94px;
  border-color: transparent transparent #efb2c2 transparent;
}

.envelope::after {
  right: 0;
  border-width: 78px 0 0 94px;
  border-color: transparent transparent transparent #c87591;
}

.envelope-flap {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 4;
  width: 190px;
  height: 92px;
  background: #e9a7b9;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.65s ease;
  backface-visibility: hidden;
}

.envelope-paper {
  position: absolute;
  left: 25px;
  bottom: 8px;
  z-index: 1;
  width: 140px;
  height: 95px;
  background: #fff8f1;
  color: #a9284e;
  display: grid;
  place-items: center;
  font-family: "Parisienne", cursive;
  font-size: 35px;
  transition: transform 0.8s ease;
}

.envelope-heart {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff4ed;
  font-size: 35px;
  transition: opacity 0.3s ease;
}

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

.envelope-reveal.open .envelope-paper {
  transform: translateY(-70px);
}

.envelope-reveal.open .envelope-heart {
  opacity: 0;
}

.envelope-reveal.letter-opened {
  background: transparent;
  pointer-events: none;
}

.envelope-reveal.letter-opened .envelope,
.envelope-reveal.letter-opened p {
  opacity: 0;
  transition: opacity 0.4s ease;
}


/* =========================
   FINAL SCREEN
========================= */

.final {
  padding-bottom: 70px;
}

.final-heart {
  margin-bottom: 15px;

  font-family: "Parisienne";
  font-size: 70px;
  color: #ffc9d6;

  text-shadow: 0 0 35px #ff9db8;
  animation: pulse 2s infinite;
}

.final h1 {
  font-size: 60px;
}

.final-text {
  max-width: 350px;

  font-family: "Cormorant Garamond";
  font-size: 21px;
  line-height: 1.3;
  color: #f6dce4;
}

.final .signature {
  margin-top: 5px;

  font-family: "Parisienne";
  font-size: 32px;
}

.final-hearts {
  margin-top: 30px;

  color: #ffb7c9;
  letter-spacing: 7px;

  animation: pulse 2s infinite;
}


/* =========================
   OPENING SCREEN
========================= */

.opening-screen {
  isolation: isolate;
}

.romantic-art {
  position: relative;

  width: 125px;
  height: 125px;

  display: grid;
  place-items: center;

  margin-bottom: 25px;

  border-radius: 50%;

  color: #ffd4df;
  font-family: "Cormorant Garamond", serif;
  font-size: 72px;

  text-shadow: 0 0 30px #ff9fbd;
  animation: openingFloat 5s ease-in-out infinite;
}

.romantic-art::before {
  content: "";

  position: absolute;
  inset: 0;

  border: 1px solid #ffd5e32d;
  border-radius: 50%;

  box-shadow: 0 0 45px #ff9db815;
}

.romantic-art::after {
  content: "✦  ♡  ✦";

  position: absolute;
  inset: -22px;

  display: grid;
  place-items: center;

  font-size: 14px;
  color: #ffd6e2;
  letter-spacing: 25px;
}

.opening-screen h1 {
  font-size: clamp(45px, 13vw, 70px);
  letter-spacing: -0.025em;
}

.opening-screen h1 span {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.02em;
  color: #fff0f4;
}

.opening-subtitle {
  margin: 0 0 7px;

  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  color: #f7dce5;
}

.opening-question {
  margin: 0 0 28px;

  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  color: #dba5b7;
}

.opening-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.enter-label {
  margin: 0 0 14px;

  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  color: #f3d7e0;
}


/* =========================
   BUTTERFLIES
========================= */

.butterfly {
  position: absolute;
  bottom: -50px;

  color: #f8c4d5;
  font-size: 22px;
  opacity: 0.22;

  animation: butterflyDrift linear forwards;
  filter: drop-shadow(0 0 8px #ffb1c633);
}


/* =========================
   ANIMATIONS
========================= */

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes floatUp {
  to {
    transform: translateY(-110vh) rotate(25deg);
    opacity: 0;
  }
}

@keyframes flicker {
  to {
    transform: translateX(-50%) scale(0.88) rotate(45deg);
  }
}

@keyframes smoke {
  to {
    transform: translate(-50%, -65px) scale(3);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    transform: scale(1.06);
  }
}

@keyframes shake {
  25% {
    transform: translateX(-7px);
  }

  50% {
    transform: translateX(7px);
  }

  75% {
    transform: translateX(-4px);
  }
}

@keyframes openingFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes butterflyDrift {
  0% {
    transform: translate(0, 0) rotate(-8deg) scale(0.8);
    opacity: 0;
  }

  10% {
    opacity: 0.25;
  }

  50% {
    transform: translate(45px, -55vh) rotate(12deg) scale(1);
  }

  100% {
    transform: translate(-35px, -115vh) rotate(-10deg) scale(0.7);
    opacity: 0;
  }
}


/* =========================
   DESKTOP BACKGROUND
========================= */

@media (min-width: 700px) {
  body {
    background: radial-gradient(
      circle at 50% 30%,
      #5a102d,
      #280611 55%
    );
  }
}


/* =========================
   MOBILE ADJUSTMENTS
========================= */

@media (max-width: 430px) {
  .opening-screen h1 span {
    font-size: 1em;
  }
}