:root {
  --pink-cloud: #fff7fa;
  --pink-milk: #ffe8f0;
  --pink-petal: #f9c9da;
  --pink-ribbon: #ee8eb2;
  --pink-berry: #c74878;
  --pink-wine: #812746;
  --cream: #fffaf3;
  --cocoa: #633848;
  --gold: #e9b35c;
  --shadow: rgba(108, 37, 66, 0.2);
  --display: "Bodoni 72", "Bodoni MT", Didot, "Times New Roman", serif;
  --round: "Avenir Next", Avenir, "Century Gothic", "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  overflow: hidden;
  color: var(--cocoa);
  background: var(--pink-petal);
  font-family: var(--round);
}

button {
  font: inherit;
}

.experience {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.84) 0 5%, transparent 19%),
    radial-gradient(circle at 84% 78%, rgba(255, 255, 255, 0.62) 0 7%, transparent 23%),
    linear-gradient(145deg, #ffdce8 0%, #f6b9d0 48%, #ffdfea 100%);
}

.experience::before {
  position: absolute;
  inset: 13px;
  z-index: 12;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.15);
  content: "";
  pointer-events: none;
}

.experience::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.36;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.paper-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 247, 0.86) 0%, rgba(255, 232, 241, 0.28) 58%, transparent 72%);
  filter: blur(4px);
  transform: translate(-50%, -47%);
}

.title-card {
  position: absolute;
  top: clamp(30px, 5vh, 64px);
  left: 50%;
  z-index: 7;
  width: min(82vw, 520px);
  text-align: center;
  transform: translateX(-50%);
  animation: title-arrival 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 -4px;
  color: var(--pink-wine);
  font-size: clamp(0.65rem, 1.5vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 24px;
  height: 1px;
  background: currentColor;
}

.title-card h1 {
  margin: 0;
  color: var(--pink-wine);
  font-family: var(--display);
  font-size: clamp(4.2rem, 9vw, 7.8rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.88;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.52);
}

.birthday-line {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 18px 7px;
  border: 1px solid rgba(129, 39, 70, 0.18);
  border-radius: 999px;
  color: var(--pink-wine);
  background: rgba(255, 250, 243, 0.56);
  box-shadow: 0 8px 20px rgba(129, 39, 70, 0.08);
  font-family: var(--display);
  font-size: clamp(0.94rem, 2vw, 1.15rem);
  font-style: italic;
  letter-spacing: 0.04em;
}

.center-stage {
  position: relative;
  z-index: 8;
  display: grid;
  width: min(70vw, 420px);
  min-height: 440px;
  margin-top: clamp(88px, 12vh, 135px);
  place-items: center;
}

.gift-button {
  position: relative;
  display: grid;
  width: 320px;
  max-width: 84vw;
  min-height: 420px;
  padding: 32px 18px 12px;
  border: 0;
  color: var(--pink-wine);
  background: transparent;
  cursor: pointer;
  place-items: end center;
  -webkit-tap-highlight-color: transparent;
}

.gift-button:focus-visible {
  border-radius: 32px;
  outline: 4px solid var(--cream);
  outline-offset: 5px;
  box-shadow: 0 0 0 8px var(--pink-berry);
}

.gift {
  position: absolute;
  top: 18px;
  left: 50%;
  isolation: isolate;
  width: 330px;
  height: 296px;
  transform: translateX(-50%);
  transition:
    filter 720ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 720ms cubic-bezier(0.22, 1, 0.36, 1);
  animation:
    gift-arrival 1050ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both,
    gift-float 4.8s 1.3s ease-in-out infinite;
  will-change: transform, translate, scale;
}

.gift::before {
  content: none;
}

.gift-aura {
  position: absolute;
  z-index: 0;
  inset: 25px 12px -8px;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(255, 250, 252, 0.96) 0, rgba(255, 172, 207, 0.34) 43%, transparent 73%);
  filter: blur(20px);
  opacity: 0.7;
  transform: scale(0.9);
  animation: gift-glow-breathe 4.8s 1.3s ease-in-out infinite;
  pointer-events: none;
}

.gift-shadow {
  position: absolute;
  z-index: 0;
  right: 42px;
  bottom: 1px;
  left: 42px;
  height: 31px;
  border-radius: 50%;
  background: rgba(105, 35, 61, 0.22);
  filter: blur(16px);
  transform: scaleX(0.96);
}

.gift-art,
.gift-body-slice,
.gift-lid-slice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gift-art {
  z-index: 1;
  filter: drop-shadow(0 17px 15px rgba(89, 26, 52, 0.19));
  transform-origin: 50% 68%;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gift-body-slice,
.gift-lid-slice {
  overflow: visible;
}

.gift-body-slice {
  z-index: 1;
  clip-path: polygon(0 45.8%, 60.4% 63.5%, 100% 44.7%, 100% 100%, 0 100%);
  transform-origin: 50% 80%;
  will-change: opacity, transform;
}

.gift-image {
  position: absolute;
  top: -0.59%;
  left: -18.08%;
  display: block;
  width: 135.45%;
  height: 100.59%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.gift-image-base {
  z-index: 1;
}

.gift-lid-slice {
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 45.2%, 60.4% 64%, 0 46.3%);
  transform-origin: 72% 57%;
  will-change: opacity, transform;
}

.gift-image-lid {
  z-index: 1;
}

.open-label {
  position: relative;
  display: grid;
  width: 210px;
  min-height: 80px;
  padding: 12px 38px 13px 26px;
  border: 2px solid rgba(129, 39, 70, 0.55);
  border-radius: 9px;
  background: var(--cream);
  box-shadow: 5px 7px 0 rgba(129, 39, 70, 0.13);
  place-items: center;
  transform: rotate(-2deg);
  transition:
    translate 680ms cubic-bezier(0.22, 1, 0.36, 1),
    rotate 680ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 680ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: label-arrival 700ms 620ms ease both;
}

.open-label::before {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  border: 1px dashed rgba(199, 72, 120, 0.42);
  border-radius: 5px;
  content: "";
}

@media (hover: hover) and (pointer: fine) {
  .gift-button:not(:disabled):hover .gift {
    filter: saturate(1.035) brightness(1.018);
    scale: 1.012;
  }

  .gift-button:not(:disabled):hover .gift-art {
    transform: translateY(-5px) rotate(-0.25deg) scale(1.008);
  }

  .gift-button:not(:disabled):hover .open-label {
    box-shadow: 7px 10px 0 rgba(129, 39, 70, 0.16);
    translate: 0 -3px;
    rotate: 1.6deg;
  }
}

.gift-button:not(:disabled):active .gift {
  scale: 0.985;
  transition-duration: 220ms;
}

.gift-button:not(:disabled):active .gift-art {
  transform: translateY(2px) scale(0.988);
  transition-duration: 220ms;
}

.open-label-small {
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.open-label-main {
  z-index: 1;
  font-family: var(--display);
  font-size: 1.75rem;
  font-style: italic;
  line-height: 1;
}

.open-label-heart {
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--pink-berry);
  font-size: 1.65rem;
  transform: translateY(-50%);
}

.sticker {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 10px 9px rgba(93, 37, 57, 0.18)) drop-shadow(0 0 2px white);
  animation: sticker-arrival 900ms cubic-bezier(0.18, 0.9, 0.3, 1.25) both, sticker-float 5s 1.3s ease-in-out infinite;
}

.sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sticker-anya-full {
  bottom: -38px;
  left: clamp(-24px, 2vw, 45px);
  width: clamp(115px, 15vw, 190px);
  height: clamp(220px, 44vh, 430px);
  transform: rotate(4deg);
}

.sticker-anya-face {
  top: 19%;
  right: clamp(-28px, 3vw, 58px);
  width: clamp(102px, 13vw, 170px);
  aspect-ratio: 474 / 503;
  padding: 7px;
  border: 4px solid white;
  border-radius: 38% 54% 44% 48%;
  background: #ffd5e3;
  transform: rotate(8deg);
}

.sticker-anya-mini {
  top: 4%;
  left: 9%;
  width: clamp(65px, 7.5vw, 104px);
  aspect-ratio: 474 / 503;
  opacity: 0.88;
  transform: rotate(-9deg);
}

.sticker-waguri-full {
  right: clamp(-17px, 2.5vw, 58px);
  bottom: -28px;
  width: clamp(95px, 13vw, 164px);
  height: clamp(250px, 46vh, 455px);
  transform: rotate(-3deg);
  animation-delay: 130ms, 1.8s;
}

.sticker-waguri-faces {
  top: 20%;
  left: clamp(-18px, 2.7vw, 52px);
  width: clamp(74px, 9vw, 124px);
  height: clamp(235px, 35vh, 355px);
  transform: rotate(-7deg);
  animation-delay: 80ms, 2.1s;
}

.sticker-waguri-mini {
  top: 3%;
  right: 10%;
  width: clamp(52px, 6vw, 82px);
  height: clamp(155px, 22vh, 220px);
  opacity: 0.9;
  transform: rotate(8deg);
  animation-delay: 180ms, 1.5s;
}

.number {
  position: absolute;
  z-index: 1;
  color: rgba(129, 39, 70, 0.24);
  font-family: var(--display);
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
  animation: number-drift 7s ease-in-out infinite alternate;
}

.n1 { top: 10%; left: 3%; transform: rotate(-15deg); }
.n2 { top: 33%; left: 18%; transform: rotate(9deg); animation-delay: -1.3s; }
.n3 { top: 72%; left: 20%; transform: rotate(-8deg); animation-delay: -4s; }
.n4 { right: 4%; bottom: 13%; transform: rotate(13deg); animation-delay: -2.1s; }
.n5 { top: 39%; right: 19%; transform: rotate(-11deg); animation-delay: -5s; }
.n6 { top: 8%; right: 3%; transform: rotate(8deg); animation-delay: -2.8s; }
.n7 { bottom: 5%; left: 36%; transform: rotate(5deg); animation-delay: -4.6s; }
.n8 { right: 34%; bottom: 5%; transform: rotate(-8deg); animation-delay: -0.8s; }
.n9 { top: 58%; left: 6%; transform: rotate(11deg); animation-delay: -3.4s; }
.n10 { top: 59%; right: 5%; transform: rotate(-6deg); animation-delay: -5.8s; }
.n11 { top: 22%; left: 34%; transform: rotate(8deg); animation-delay: -2.7s; }
.n12 { top: 22%; right: 35%; transform: rotate(-8deg); animation-delay: -1.6s; }

.sparkle,
.heart,
.mini-bow {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.sparkle {
  color: var(--cream);
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  text-shadow: 0 4px 13px rgba(129, 39, 70, 0.12);
  animation: twinkle 2.6s ease-in-out infinite;
}

.sparkle-one { top: 16%; left: 24%; }
.sparkle-two { top: 51%; right: 18%; animation-delay: -1.2s; }
.sparkle-three { right: 28%; bottom: 13%; animation-delay: -2s; }

.heart {
  color: rgba(199, 72, 120, 0.63);
  font-size: clamp(0.85rem, 1.8vw, 1.4rem);
  animation: heart-beat 3s ease-in-out infinite;
}

.heart-one { top: 29%; left: 28%; transform: rotate(-10deg); }
.heart-two { top: 13%; right: 27%; animation-delay: -1.5s; }
.heart-three { right: 24%; bottom: 28%; animation-delay: -0.7s; }

.mini-bow {
  width: 55px;
  height: 34px;
  transform: rotate(-12deg);
}

.mini-bow::before,
.mini-bow::after {
  position: absolute;
  top: 4px;
  width: 28px;
  height: 23px;
  border: 2px solid var(--pink-wine);
  background: #fff3f7;
  content: "";
}

.mini-bow::before {
  left: 1px;
  border-radius: 70% 33% 64% 37%;
  transform: rotate(16deg);
}

.mini-bow::after {
  right: 1px;
  border-radius: 33% 70% 37% 64%;
  transform: rotate(-16deg);
}

.mini-bow i {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 2;
  width: 18px;
  height: 17px;
  border: 2px solid var(--pink-wine);
  border-radius: 50%;
  background: #f5a3bf;
  transform: translateX(-50%);
}

.bow-one { top: 43%; left: 8%; }
.bow-two { top: 34%; right: 7%; transform: rotate(15deg) scale(0.85); }
.bow-three { right: 18%; bottom: 8%; transform: rotate(-8deg) scale(0.72); }

.letterbox {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(370px, 90vw);
  height: min(610px, 72vh);
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.78) rotate(2deg);
  pointer-events: none;
}

.letterbox[hidden] {
  display: none;
}

.envelope-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: 100%;
  min-height: 360px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  place-items: center;
  transform: translate(-50%, -50%);
  transition: opacity 600ms ease, transform 800ms cubic-bezier(0.18, 0.8, 0.24, 1);
}

.envelope-button:focus-visible {
  border-radius: 28px;
  outline: 3px solid rgba(129, 39, 70, 0.55);
  outline-offset: 5px;
}

.envelope-button:not(:disabled):hover .envelope {
  transform: translateY(-6px) rotate(-1deg);
}

.envelope-button:not(:disabled):hover .letterbox-caption {
  transform: translateX(-50%) rotate(1deg) translateY(-3px);
}

.letterbox-shadow {
  position: absolute;
  top: calc(50% + 82px);
  left: 50%;
  width: 280px;
  height: 34px;
  border-radius: 50%;
  background: rgba(93, 37, 57, 0.19);
  filter: blur(12px);
  transform: translateX(-50%);
}

.envelope {
  position: relative;
  display: block;
  width: min(330px, 84vw);
  aspect-ratio: 1.45;
  overflow: hidden;
  border: 3px solid var(--pink-wine);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: inset 0 0 25px rgba(199, 72, 120, 0.08), 0 24px 40px var(--shadow);
  transition: transform 320ms ease;
}

.envelope-paper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(238, 142, 178, 0.11) 0 2px, transparent 2.5px) 0 0 / 24px 24px,
    linear-gradient(145deg, #fffaf3, #ffe9f0);
}

.envelope-flap {
  position: absolute;
  top: -51%;
  left: 8%;
  width: 84%;
  aspect-ratio: 1;
  border-right: 3px solid var(--pink-wine);
  border-bottom: 3px solid var(--pink-wine);
  border-radius: 6px 18px 6px 18px;
  background: linear-gradient(135deg, #fffaf3 15%, #ffd8e5 100%);
  transform: rotate(45deg);
}

.envelope-fold {
  position: absolute;
  bottom: -55%;
  width: 75%;
  aspect-ratio: 1;
  border-top: 2px solid rgba(129, 39, 70, 0.38);
  background: #ffeff4;
}

.fold-left {
  left: -37%;
  transform: rotate(45deg);
}

.fold-right {
  right: -37%;
  transform: rotate(-45deg);
}

.wax-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 62px;
  height: 62px;
  border: 3px solid #a73560;
  border-radius: 48% 52% 45% 55%;
  color: #ffe8ef;
  background: radial-gradient(circle at 34% 28%, #ef8eb1, #bc3c6c 62%, #8f294e);
  box-shadow: 0 5px 9px rgba(93, 37, 57, 0.28), inset 0 0 0 5px rgba(255, 255, 255, 0.11);
  place-items: center;
  transform: translate(-50%, -35%) rotate(-7deg);
}

.wax-seal i {
  font-family: var(--display);
  font-size: 2rem;
  font-style: italic;
}

.envelope-address {
  position: absolute;
  right: 20px;
  bottom: 15px;
  color: var(--pink-wine);
  font-family: var(--display);
  font-size: 0.88rem;
  font-style: italic;
}

.letterbox-caption {
  position: absolute;
  bottom: 5px;
  left: 50%;
  padding: 8px 19px;
  border: 1px solid rgba(129, 39, 70, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.74);
  box-shadow: 0 9px 20px rgba(129, 39, 70, 0.08);
  font-family: var(--display);
  font-size: 1rem;
  font-style: italic;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-1deg);
  transition: opacity 260ms ease, transform 260ms ease;
}

.birthday-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(360px, 88vw);
  min-height: 440px;
  padding: 51px 38px 42px;
  overflow: hidden;
  border: 2px solid rgba(129, 39, 70, 0.72);
  border-radius: 7px 22px 9px 19px;
  opacity: 0;
  color: var(--pink-wine);
  background:
    linear-gradient(rgba(255, 252, 246, 0.93), rgba(255, 239, 245, 0.93)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(199, 72, 120, 0.08) 29px 30px);
  box-shadow:
    inset 0 0 0 8px rgba(255, 255, 255, 0.45),
    0 28px 54px rgba(108, 37, 66, 0.2);
  text-align: center;
  transform: translate(-50%, -20%) scale(0.76) rotate(1deg);
  transform-origin: 50% 90%;
  pointer-events: none;
}

.birthday-letter[hidden] {
  display: none;
}

.birthday-letter::before {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(199, 72, 120, 0.34);
  border-radius: 4px 15px 5px 12px;
  content: "";
  pointer-events: none;
}

.birthday-letter:focus-visible {
  outline: 3px solid white;
  outline-offset: 5px;
}

.letter-kicker {
  position: relative;
  margin: 0 0 29px;
  font-family: var(--round);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.birthday-letter blockquote {
  position: relative;
  margin: 0;
  padding: 0 7px;
}

.birthday-letter blockquote p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.62rem, 4.6vw, 2.05rem);
  font-style: italic;
  line-height: 1.22;
  text-wrap: balance;
}

.opening-quote,
.closing-quote {
  position: absolute;
  color: rgba(199, 72, 120, 0.3);
  font-family: var(--display);
  font-size: 5rem;
  font-style: italic;
  line-height: 1;
}

.opening-quote {
  top: -26px;
  left: -13px;
}

.closing-quote {
  right: -7px;
  bottom: -47px;
}

.birthday-letter cite {
  position: relative;
  display: block;
  margin-top: 34px;
  font-family: var(--round);
  font-size: 0.77rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.birthday-letter cite em {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
}

.letter-flourish {
  position: absolute;
  right: 0;
  bottom: 25px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--pink-berry);
  font-size: 1.15rem;
}

.letter-flourish i {
  width: 38px;
  height: 1px;
  background: rgba(199, 72, 120, 0.32);
}

.letter-sparkle {
  position: absolute;
  color: var(--pink-ribbon);
  font-size: 1.2rem;
}

.letter-sparkle-one {
  top: 23px;
  left: 27px;
}

.letter-sparkle-two {
  right: 27px;
  bottom: 23px;
}

.audio-replay {
  position: absolute;
  right: 50%;
  bottom: 24px;
  z-index: 15;
  padding: 10px 16px;
  border: 1px solid var(--pink-wine);
  border-radius: 999px;
  color: var(--pink-wine);
  background: rgba(255, 250, 243, 0.9);
  box-shadow: 0 8px 18px var(--shadow);
  cursor: pointer;
  transform: translateX(50%);
}

.audio-replay:hover {
  color: white;
  background: var(--pink-wine);
}

.audio-replay:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}

.audio-replay[hidden] {
  display: none;
}

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

.confetti-piece {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: var(--confetti-color);
  animation: confetti-pop 1.45s cubic-bezier(0.12, 0.73, 0.32, 1) forwards;
}

.experience[data-state="opening"] .gift,
.experience[data-state="revealing"] .gift {
  animation: gift-scene-open 1320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience[data-state="opening"] .gift-aura,
.experience[data-state="revealing"] .gift-aura {
  animation: gift-glow-open 1250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience[data-state="opening"] .gift-lid-slice,
.experience[data-state="revealing"] .gift-lid-slice {
  animation: satin-lid-lift 1120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience[data-state="opening"] .gift-body-slice,
.experience[data-state="revealing"] .gift-body-slice {
  animation: satin-box-settle 1180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience[data-state="opening"] .open-label,
.experience[data-state="opening"] .title-card,
.experience[data-state="revealing"] .open-label,
.experience[data-state="revealing"] .title-card,
.experience[data-state="opened"] .open-label,
.experience[data-state="opened"] .title-card {
  animation: fade-away 350ms ease forwards;
}

.experience[data-state="opened"] .gift-button {
  visibility: hidden;
  pointer-events: none;
}

.experience[data-state="revealing"] .letterbox,
.experience[data-state="opened"] .letterbox {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-1deg);
  transition:
    opacity 540ms cubic-bezier(0.16, 0.84, 0.24, 1),
    transform 720ms cubic-bezier(0.16, 0.9, 0.24, 1.08);
}

.experience[data-state="revealing"] .letterbox {
  pointer-events: none;
}

.experience[data-state="opened"] .letterbox {
  pointer-events: auto;
}

.letterbox[data-letter-state="opening"] .envelope-flap,
.letterbox[data-letter-state="opened"] .envelope-flap {
  animation: envelope-flap-open 720ms cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}

.letterbox[data-letter-state="opening"] .wax-seal,
.letterbox[data-letter-state="opened"] .wax-seal {
  animation: seal-break 460ms ease forwards;
}

.letterbox[data-letter-state="opening"] .birthday-letter {
  display: block;
  animation: letter-rise 920ms cubic-bezier(0.17, 0.9, 0.25, 1.08) forwards;
}

.letterbox[data-letter-state="opened"] .birthday-letter {
  z-index: 8;
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-0.6deg);
  pointer-events: auto;
}

.letterbox[data-letter-state="opening"] .envelope-button,
.letterbox[data-letter-state="opened"] .envelope-button {
  opacity: 0.42;
  transform: translate(-50%, 25%) scale(0.76) rotate(2deg);
  pointer-events: none;
}

.letterbox[data-letter-state="opening"] .letterbox-caption,
.letterbox[data-letter-state="opened"] .letterbox-caption {
  opacity: 0;
}

.experience[data-state="opened"] .sticker {
  filter: drop-shadow(0 10px 9px rgba(93, 37, 57, 0.15)) drop-shadow(0 0 2px white) saturate(0.9);
}

.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;
}

@keyframes title-arrival {
  from { opacity: 0; transform: translate(-50%, -18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes gift-arrival {
  0% { opacity: 0; transform: translateX(-50%) translateY(48px) scale(0.76); }
  68% { opacity: 1; transform: translateX(-50%) translateY(-5px) scale(1.015); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes gift-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes gift-glow-breathe {
  0%, 100% { opacity: 0.58; transform: scale(0.9); }
  50% { opacity: 0.84; transform: scale(1.03); }
}

@keyframes label-arrival {
  from { opacity: 0; transform: rotate(-2deg) translateY(14px); }
  to { opacity: 1; transform: rotate(-2deg) translateY(0); }
}

@keyframes sticker-arrival {
  from { opacity: 0; scale: 0.72; }
  to { opacity: 1; scale: 1; }
}

@keyframes sticker-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes number-drift {
  from { translate: 0 -3px; }
  to { translate: 4px 5px; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(12deg); }
}

@keyframes heart-beat {
  0%, 100% { scale: 0.9; }
  50% { scale: 1.15; }
}

@keyframes gift-scene-open {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  18% { transform: translateX(-50%) translateY(4px) scale(0.985); }
  48% { transform: translateX(-50%) translateY(-8px) scale(1.025); }
  78% { opacity: 1; transform: translateX(-50%) translateY(-15px) scale(1.01); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(0.94); }
}

@keyframes gift-glow-open {
  0% { opacity: 0.65; transform: scale(0.92); }
  48% { opacity: 1; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(1.48); }
}

@keyframes satin-lid-lift {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { transform: translate3d(0, 3px, 0) rotate(0deg) scale(1.015, 0.97); }
  42% { transform: translate3d(-5px, -28px, 0) rotate(-2deg) scale(1.018); }
  74% { opacity: 1; transform: translate3d(24px, -84px, 0) rotate(8deg) scale(0.98); }
  100% { opacity: 0; transform: translate3d(76px, -142px, 0) rotate(17deg) scale(0.9); }
}

@keyframes satin-box-settle {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  14% { transform: translateY(3px) scale(1.018, 0.982); }
  42% { transform: translateY(4px) scale(0.995, 1.008); }
  72% { opacity: 0.92; transform: translateY(9px) scale(0.978); }
  100% { opacity: 0.08; transform: translateY(16px) scale(0.94); }
}

@keyframes fade-away {
  to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

@keyframes confetti-pop {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(var(--confetti-spin)); }
}

@keyframes envelope-flap-open {
  0% { transform: rotate(45deg) scaleY(1); opacity: 1; }
  55% { transform: translateY(-20px) rotate(45deg) scaleY(0.18); opacity: 0.85; }
  100% { transform: translateY(-34px) rotate(45deg) scaleY(-0.62); opacity: 0.42; }
}

@keyframes seal-break {
  0% { opacity: 1; transform: translate(-50%, -35%) rotate(-7deg) scale(1); }
  45% { transform: translate(-50%, -35%) rotate(8deg) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, 25%) rotate(18deg) scale(0.35); }
}

@keyframes letter-rise {
  0% { z-index: 2; opacity: 0; transform: translate(-50%, -9%) scale(0.72) rotate(1deg); }
  42% { z-index: 2; opacity: 1; transform: translate(-50%, -38%) scale(0.8) rotate(-1deg); }
  43% { z-index: 8; }
  100% { z-index: 8; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-0.6deg); }
}

@media (max-width: 760px) {
  .experience::before {
    inset: 8px;
    border-radius: 20px;
  }

  .title-card {
    top: 34px;
  }

  .center-stage {
    width: 82vw;
    min-height: 410px;
    margin-top: 92px;
  }

  .gift-button {
    width: 288px;
    min-height: 388px;
  }

  .gift {
    top: 32px;
    scale: 0.88;
  }

  .open-label {
    bottom: 5px;
  }

  .sticker-anya-full {
    bottom: -54px;
    left: -17px;
    height: 280px;
  }

  .sticker-waguri-full {
    right: -5px;
    bottom: -39px;
    height: 285px;
  }

  .sticker-waguri-faces {
    top: 27%;
    left: -22px;
    height: 210px;
    opacity: 0.8;
  }

  .sticker-anya-face {
    top: 25%;
    right: -20px;
    width: 100px;
    opacity: 0.82;
  }

  .sticker-anya-mini,
  .sticker-waguri-mini,
  .n11,
  .n12,
  .bow-three {
    display: none;
  }

  .bow-one { top: 19%; left: 3%; transform: rotate(-12deg) scale(0.78); }
  .bow-two { top: 15%; right: 3%; transform: rotate(15deg) scale(0.7); }
  .letterbox {
    width: min(360px, 92vw);
    height: min(570px, 70vh);
  }

  .envelope-button {
    min-height: 350px;
  }

  .letterbox-caption { bottom: 16px; }

  .birthday-letter {
    width: min(344px, 88vw);
    min-height: 420px;
    padding: 44px 31px 40px;
  }

  .birthday-letter blockquote p {
    font-size: clamp(1.48rem, 7vw, 1.8rem);
  }
}

@media (max-height: 710px) {
  .title-card {
    top: 22px;
  }

  .title-card h1 {
    font-size: clamp(3.5rem, 10vh, 5.2rem);
  }

  .birthday-line {
    margin-top: 6px;
  }

  .center-stage {
    min-height: 360px;
    margin-top: 94px;
    scale: 0.9;
  }

  .sticker-anya-full,
  .sticker-waguri-full {
    max-height: 39vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .experience[data-state="closed"] .gift,
  .experience[data-state="closed"] .gift-aura,
  .sticker,
  .number,
  .sparkle,
  .heart {
    animation: none !important;
  }

  .confetti-layer {
    display: none;
  }
}