/* Soft CSS blossoms, rose petals and hearts. No image downloads or canvas loops. */
.invite-copy > * {
  animation: invitation-bloom 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.invite-copy > :nth-child(2) { animation-delay: 0.12s; }
.invite-copy > :nth-child(3) { animation-delay: 0.24s; }
.invite-copy > :nth-child(4) { animation-delay: 0.36s; }
.invite-copy > :nth-child(5) { animation-delay: 0.48s; }
.primary-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, #fff5 48%, transparent 70%);
  translate: -130% 0;
}
.primary-button:not(:disabled):hover::after,
.primary-button:not(:disabled):focus-visible::after {
  animation: love-shimmer 0.8s ease-out;
}
.birthday-heading .birthday-chapter {
  margin: 15px 0 0;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: var(--rose);
}
.birthday-chapter span {
  font-family: var(--hand);
  font-size: 22px;
  letter-spacing: 0;
}
.portrait-magic {
  position: absolute;
  inset: -22px;
  pointer-events: none;
}
.portrait-magic::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 48% 48% 40% 40%;
  box-shadow: 0 0 45px 12px #e9a0b829;
  animation: portrait-glow 4s ease-in-out infinite;
}
.portrait-magic i {
  position: absolute;
  z-index: 2;
  font: 24px/1 var(--serif);
  color: #c17691;
  animation: keepsake-sparkle 4s ease-in-out infinite;
}
.portrait-magic i:nth-child(1) { left: 3%; top: 12%; }
.portrait-magic i:nth-child(2) { right: 1%; top: 35%; animation-delay: -1.3s; }
.portrait-magic i:nth-child(3) { right: 13%; top: 0; animation-delay: -2.6s; font-size: 16px; }
.portrait-magic i:nth-child(4) { left: 6%; bottom: 9%; animation-delay: -0.7s; }
.age-changing {
  animation: age-reveal 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.cake-scene::before {
  content: "";
  position: absolute;
  inset: -12% -20%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #eaa9bb75, transparent 68%);
  opacity: 0;
  scale: 0.7;
  transition: opacity 0.6s, scale 1.6s;
}
.wish-charging::before {
  opacity: 1;
  scale: 1.2;
}
.wish-charging .cake-sparkle {
  animation: keepsake-sparkle 0.65s ease-in-out infinite alternate;
}
.wish-charging .flame {
  filter: drop-shadow(0 0 12px #f5bf6b);
}
.wish-result:not([hidden]) {
  animation: wish-bloom 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.memory-card {
  opacity: 0.66;
  scale: 0.95;
  transition: transform 0.5s, scale 0.5s, opacity 0.5s, box-shadow 0.5s;
}
.memory-card.memory-current,
.memory-card:focus-visible {
  opacity: 1;
  scale: 1;
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 15px 32px #96596c25, 0 0 0 1px #eac9d133;
}
.envelope {
  perspective: 900px;
  isolation: isolate;
}
.envelope-peek {
  position: absolute;
  inset: 15px 18px 25px;
  display: grid;
  place-items: start center;
  padding: 16px 8px;
  background: #fffaf2;
  border: 1px solid #eed9ce;
  color: var(--rose);
  font: 19px/1.5 var(--hand);
  transition: translate 0.5s 0.35s;
  z-index: -1;
}
.envelope-flap {
  transform-origin: center top;
  transition: transform 0.65s, filter 0.65s;
}
.envelope .wax-seal,
.envelope-address,
.envelope-instruction {
  transition: opacity 0.25s, translate 0.4s;
}
.envelope.opening {
  animation: envelope-unfold 1s both;
}
.envelope.opening .envelope-flap {
  transform: rotateX(175deg);
  filter: none;
}
.envelope.opening .wax-seal,
.envelope.opening .envelope-address,
.envelope.opening .envelope-instruction {
  opacity: 0;
  translate: 0 -8px;
}
.envelope.opening .envelope-peek {
  translate: 0 -36px;
}
.love-letter {
  background-image: radial-gradient(ellipse at top left, #f8e5e766, transparent 70%);
  box-shadow: 0 14px 45px #78455216;
}
.forever-heart {
  position: relative;
  animation: heartbeat 3.5s ease-in-out infinite;
  text-shadow: 0 0 25px #e9a0b855;
}
.forever-heart::before,
.forever-heart::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid #d798ac55;
  border-radius: 50%;
  animation: love-ripple 4s ease-out infinite;
}
.forever-heart::after { animation-delay: -2s; }
.forever-section .final-note {
  width: min(100%, 420px);
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 6px 16px;
  line-height: 1.45;
  font-size: clamp(19px, 3dvh, 25px);
  color: var(--rose);
  text-wrap: balance;
}
.love-note-label {
  color: #9b6e7e;
  font: 8px/1.5 var(--sans);
  letter-spacing: 0.8px;
  text-align: center;
}
.note-revealing { animation: note-unfold 0.65s both; }
.touch-heart {
  position: absolute;
  color: var(--rose);
  font: var(--heart-size)/1 var(--serif);
  pointer-events: none;
  animation: touch-bloom 1.3s cubic-bezier(0.15, 0.65, 0.3, 1) both;
}
.opening-transition {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #fff5ef, #f8e0e8 75%);
}
.opening-transition::before,
.opening-transition::after {
  content: "";
  position: absolute;
  width: min(68vw, 430px);
  aspect-ratio: 1;
  border: 1px solid #d69bad40;
  border-radius: 50%;
  pointer-events: none;
  animation: opening-ring 2.5s ease-out both;
}
.opening-transition::after { animation-delay: 0.3s; }
.effects-paused .portrait-magic *,
.effects-paused .portrait-magic::before,
.effects-paused .forever-heart,
.effects-paused .forever-heart::before,
.effects-paused .forever-heart::after,
.effects-paused .touch-heart,
.effects-paused .confetti {
  animation-play-state: paused;
}
@keyframes invitation-bloom {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes love-shimmer { to { translate: 130% 0; } }
@keyframes portrait-glow {
  50% { opacity: 0.5; scale: 1.03; }
}
@keyframes keepsake-sparkle {
  0%, 100% { opacity: 0.35; translate: 0 0; rotate: -8deg; }
  50% { opacity: 1; translate: 0 -7px; rotate: 8deg; }
}
@keyframes wish-bloom {
  from { opacity: 0; translate: 0 14px; scale: 0.94; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes envelope-unfold {
  0%, 65% { opacity: 1; }
  100% { opacity: 0; translate: 0 24px; }
}
@keyframes love-ripple {
  from { scale: 0.7; opacity: 0.6; }
  to { scale: 1.9; opacity: 0; }
}
@keyframes note-unfold {
  from { opacity: 0; translate: 0 9px; rotate: -2deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes touch-bloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--heart-x)), calc(-50% + var(--heart-y))) rotate(var(--heart-turn)) scale(1.1); }
}
@keyframes opening-ring {
  from { opacity: 0.6; scale: 0.4; }
  to { opacity: 0; scale: 1.8; }
}
@media (max-width: 700px) {
  .birthday-heading .birthday-chapter { margin-top: 7px; font-size: 9px; line-height: 1.6; }
  .birthday-chapter span { font-size: 19px; }
  .forever-section { gap: 10px; }
  @container birthday-stage (max-height: 430px) {
    .birthday-heading > p:not(.birthday-chapter) { display: none; }
    .forever-section { gap: 6px; }
    .forever-section .final-note { min-height: 48px; font-size: 18px; }
    .forever-heart { font-size: 32px; }
    .love-note-label { font-size: 7px; }
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .birthday-heading .birthday-chapter { font-size: 8px; margin-top: 6px; }
  .birthday-chapter span { font-size: 16px; }
  .forever-section { gap: 4px; }
  .forever-section .final-note { min-height: 38px; font-size: 18px; padding: 0 12px; }
  .love-note-label { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-copy > *, .primary-button::after, .portrait-magic::before,
  .portrait-magic i, .age-changing, .wish-result:not([hidden]),
  .wish-charging .cake-sparkle, .envelope.opening, .forever-heart,
  .forever-heart::before, .forever-heart::after, .note-revealing,
  .opening-transition::before, .opening-transition::after {
    animation: none;
  }
  .portrait-magic i { opacity: 0.7; }
  .touch-heart, .forever-heart::before, .forever-heart::after { display: none; }
  .memory-card, .cake-scene::before, .envelope-flap, .envelope-peek,
  .envelope .wax-seal, .envelope-address, .envelope-instruction { transition: none; }
}
.ambient-hearts::before,
.ambient-hearts::after {
  content: "";
  position: absolute;
  width: min(70vw, 650px);
  height: min(70vw, 650px);
  border-radius: 50%;
  background: radial-gradient(circle, #f5c3d035, transparent 70%);
  animation: blush-drift 16s ease-in-out infinite alternate;
}
.ambient-hearts::before {
  left: -25%;
  top: 5%;
}
.ambient-hearts::after {
  right: -25%;
  bottom: -8%;
  animation-delay: -8s;
}
.love-particle {
  position: absolute;
  top: -42px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  color: var(--tint);
  pointer-events: none;
  opacity: 0;
  animation: love-rain var(--fall) var(--delay) linear both;
}
.rain-shape {
  display: block;
  width: 100%;
  height: 100%;
}
.rain-ambient {
  animation-iteration-count: infinite;
}
.rain-ambient .rain-shape {
  opacity: 0.28;
}
.rain-petal .rain-shape {
  border-radius: 80% 10% 75% 25%;
  background: linear-gradient(135deg, #fae0e9, var(--tint) 85%);
  box-shadow: inset 1px 1px 3px #fff8;
  transform: rotate(25deg) scale(0.7, 1);
}
.rain-heart .rain-shape {
  font:
    var(--size)/1 Georgia,
    serif;
}
.rain-flower .rain-shape {
  position: relative;
}
.rain-flower i {
  position: absolute;
  left: 27%;
  top: 24%;
  width: 47%;
  height: 57%;
  border-radius: 60% 60% 45% 45%;
  transform-origin: 50% 50%;
  transform: rotate(var(--petal-angle)) translateY(-34%);
  background: linear-gradient(#f9d8e4, var(--tint));
}
.rain-flower .rain-shape::after {
  content: "";
  position: absolute;
  left: 39%;
  top: 39%;
  width: 23%;
  height: 23%;
  border-radius: 50%;
  background: #ecd39c;
  box-shadow: 0 0 0 1px #fff5;
}
.our-film-frame {
  box-shadow:
    0 15px 45px #90526724,
    0 0 0 4px #f7dfe633;
}
.scene-progress i.current {
  box-shadow: 0 0 10px #ca6b8b35;
}
.scene-next:not(:disabled) svg {
  animation: next-nudge 3.5s ease-in-out infinite;
}
.effects-paused .love-particle,
.effects-paused .ambient-hearts::before,
.effects-paused .ambient-hearts::after {
  animation-play-state: paused;
}
@keyframes love-rain {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  8% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--sway), calc(100dvh + 90px), 0)
      rotate(var(--spin));
  }
}
@keyframes blush-drift {
  from {
    transform: translate3d(0, -10px, 0) scale(0.9);
  }
  to {
    transform: translate3d(30px, 45px, 0) scale(1.15);
  }
}
@keyframes next-nudge {
  0%,
  65%,
  100% {
    translate: 0;
  }
  78% {
    translate: 4px 0;
  }
  88% {
    translate: 1px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .love-particle {
    display: none;
  }
  .ambient-hearts::before,
  .ambient-hearts::after,
  .scene-next:not(:disabled) svg {
    animation: none;
  }
}