:root {
  --pink-100: #f8d7e6;
  --pink-200: #f2b7cf;
  --gold: #d8b76a;
  --blue: #bfe4ea;
  --green: #dce8c7;
  --ice: #fafafa;
  --ink: #875a68;
  --rose-ink: #c56e9b;
  --shadow: 0 22px 70px rgba(196, 118, 153, 0.22);
  --title: "Cormorant Garamond", serif;
  --body: "Playfair Display", serif;
  --script: "Great Vibes", cursive;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(250, 250, 250, 0.9) 42%, rgba(248, 215, 230, 0.28)),
    url("../img/watercolor-bg.webp") center top / cover fixed,
    var(--ice);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  content: "";
  background:
    radial-gradient(circle at 50% 5%, rgba(216, 183, 106, 0.18), transparent 34rem),
    linear-gradient(90deg, rgba(191, 228, 234, 0.26), transparent 30%, transparent 70%, rgba(220, 232, 199, 0.28));
  pointer-events: none;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

.magic-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.entry-glow {
  position: fixed;
  top: 9vh;
  left: 50%;
  z-index: 5;
  width: min(64vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 159, 0.78), rgba(216, 183, 106, 0.18) 42%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transform: translateX(-50%) scale(0.28);
  animation: goldenArrival 4s ease both;
  pointer-events: none;
}

.ambient {
  position: fixed;
  z-index: -2;
  width: 20rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 215, 230, 0.42), transparent 68%);
  filter: blur(6px);
  opacity: 0.75;
  pointer-events: none;
}

.ambient-left {
  top: 18vh;
  left: -8rem;
}

.ambient-right {
  right: -9rem;
  bottom: 20vh;
  background: radial-gradient(circle, rgba(191, 228, 234, 0.48), transparent 68%);
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 2.25rem 1rem 1rem;
  place-items: center;
  isolation: isolate;
}

.hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 12rem;
  content: "";
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.82), rgba(250, 250, 250, 0));
  opacity: 0.8;
}

.flower-canopy {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  z-index: 2;
  width: min(58rem, 116vw);
  height: clamp(7.8rem, 21vw, 13rem);
  transform: translateX(-50%);
  pointer-events: none;
}

.top-flora {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-1rem) rotate(0.5deg);
  transform-origin: 50% 0;
  filter: drop-shadow(0 0.7rem 0.9rem rgba(153, 126, 91, 0.08));
  animation: topFloraIn 1.3s 0.45s ease both, windCanopy 7.8s 1.8s ease-in-out infinite;
}

.top-flora-back {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.5rem) scaleX(-1);
  animation: topFloraBackIn 1.45s 0.6s ease both, windCanopyBack 9.5s 2s ease-in-out infinite;
}

.hero-stage {
  position: relative;
  width: min(34rem, 100%);
  margin-inline: auto;
  padding-top: 2.5rem;
}

.crest-wrap {
  position: relative;
  width: min(82vw, 30rem);
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.52);
  animation: crestZoomIn 1.22s 1.18s cubic-bezier(.16,.88,.2,1.08) both, floatMain 8.5s 3s ease-in-out infinite;
}

.crest-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.25rem 2rem rgba(205, 129, 163, 0.16));
}

.crown {
  position: absolute;
  top: 4%;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 0.15rem;
  width: 6.9rem;
  height: 3.4rem;
  align-items: end;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -7rem) rotate(-2deg);
  animation: crownDrop 0.9s 1.9s cubic-bezier(.18,.85,.28,1.2) both;
}

.crown::before {
  position: absolute;
  right: 0.55rem;
  bottom: 0.1rem;
  left: 0.55rem;
  height: 0.65rem;
  border: 2px solid rgba(184, 140, 48, 0.64);
  border-radius: 999px;
  background: linear-gradient(180deg, #f7d88a, #d8b76a);
  content: "";
}

.crown span {
  width: 1.2rem;
  height: 2.55rem;
  border-radius: 1rem 1rem 0.15rem 0.15rem;
  background: linear-gradient(180deg, #ffe6a7, #d8b76a);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 0.55rem rgba(216, 183, 106, 0.32));
}

.crown span:nth-child(3) {
  height: 3.3rem;
}

.drawn-letter {
  position: absolute;
  inset: 27% 24% auto 24%;
  width: 52%;
  height: auto;
  overflow: visible;
}

.drawn-letter text {
  fill: rgba(246, 172, 196, 0);
  stroke: rgba(241, 151, 180, 0.2);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-dasharray: 430;
  stroke-dashoffset: 430;
  font-family: var(--script);
  font-size: 10.6rem;
  paint-order: stroke;
  filter: drop-shadow(0 0 0.35rem rgba(248, 215, 230, 0.8));
  animation: drawLetter 1.35s 2.48s ease both;
}

.ribbon {
  position: relative;
  z-index: 4;
  width: fit-content;
  max-width: 92vw;
  margin: -5.2rem auto 0;
  padding: 0.55rem 1.6rem 0.65rem;
  color: #b85d83;
  font-family: var(--script);
  font-size: clamp(2rem, 9vw, 3.9rem);
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  background: linear-gradient(90deg, rgba(242, 183, 207, 0.82), rgba(255, 232, 238, 0.94), rgba(226, 150, 177, 0.78));
  border-radius: 999px 1.8rem 999px 1.8rem;
  box-shadow: 0 0.9rem 2.2rem rgba(195, 112, 151, 0.18);
  opacity: 0;
  transform: translateY(1rem) scale(0.94);
  animation: ribbonIn 0.9s 3.18s ease both;
}

.dragon {
  position: absolute;
  z-index: 1;
  width: clamp(5.5rem, 25vw, 10rem);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0.8rem 1.1rem rgba(143, 104, 126, 0.12));
  animation: dragonIn 0.9s 2.8s ease both, floatSmall 7.5s 3.6s ease-in-out infinite;
}

.dragon-pink {
  bottom: 19%;
  left: -0.1rem;
  animation: dragonSlideLeft 1.05s 2.65s cubic-bezier(.18,.82,.2,1) both, floatSmall 7.5s 3.75s ease-in-out infinite;
}

.dragon-blue {
  top: 33%;
  right: -0.3rem;
  animation: dragonSlideRight 1.05s 2.82s cubic-bezier(.18,.82,.2,1) both, floatSmall 7.5s 3.95s ease-in-out infinite;
}

.scroll-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  opacity: 0.75;
  transform: translateX(-50%) rotate(45deg);
  animation: hintPulse 1.7s 4s ease-in-out infinite;
}

.section-pad {
  width: min(64rem, 100%);
  margin-inline: auto;
  padding: clamp(3.5rem, 10vw, 7rem) 1.2rem;
}

.invite {
  text-align: center;
}

.script-kicker {
  margin: 0 0 0.45rem;
  color: var(--gold);
  font-family: var(--script);
  font-size: clamp(2.3rem, 8vw, 4rem);
  line-height: 1;
}

.invite h1,
.gifts h2 {
  max-width: 54rem;
  margin: 0 auto;
  color: #e888b3;
  font-family: var(--title);
  font-size: clamp(2.4rem, 8.6vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: 0 0.18rem 0 rgba(255, 255, 255, 0.92);
}

.date {
  padding-top: 1rem;
  text-align: center;
}

.date-line {
  display: flex;
  margin: 0 auto 1.5rem;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 3vw, 1.6rem);
  color: rgba(184, 154, 87, 0.78);
  font-family: var(--script);
  font-size: clamp(4.2rem, 17vw, 8.8rem);
  line-height: 0.92;
}

.date-line i {
  color: #f39abc;
  font-family: var(--body);
  font-size: 0.32em;
  font-style: normal;
  filter: drop-shadow(0 0.25rem 0.45rem rgba(243, 154, 188, 0.28));
}

.countdown {
  display: grid;
  max-width: 48rem;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.time-card {
  position: relative;
  min-height: 7.25rem;
  padding: 1rem 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(216, 183, 106, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.time-card::before {
  position: absolute;
  inset: 0.28rem;
  border: 1px dashed rgba(242, 183, 207, 0.66);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

.time-card strong {
  display: block;
  color: #c58661;
  font-family: var(--title);
  font-size: clamp(2.7rem, 11vw, 4.4rem);
  line-height: 0.9;
  transition: transform 0.28s ease;
}

.time-card.is-ticking strong {
  transform: translateY(-0.12rem) scale(1.04);
}

.time-card span {
  display: block;
  margin-top: 0.45rem;
  color: #a37082;
  font-size: 0.95rem;
  font-weight: 700;
}

.hour {
  display: inline-flex;
  margin: 1.7rem auto 0;
  align-items: center;
  gap: 0.65rem;
  color: #e58caf;
  font-family: var(--title);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
}

.hour svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.action-menu {
  display: grid;
  width: min(42rem, calc(100% - 2rem));
  margin: 0 auto clamp(2rem, 8vw, 4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.55rem, 3vw, 1.35rem);
}

.action-btn {
  display: flex;
  min-width: 0;
  align-items: center;
  color: #b99b52;
  font-size: clamp(0.75rem, 3.4vw, 1.08rem);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-decoration: none;
  flex-direction: column;
  gap: 0.55rem;
  outline-offset: 0.3rem;
  -webkit-tap-highlight-color: transparent;
}

.action-btn svg {
  width: clamp(4.5rem, 19vw, 6.6rem);
  aspect-ratio: 1;
  padding: 1.08rem;
  border: 0.32rem solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  background: linear-gradient(145deg, #f6abc8, #f2b7cf 58%, #f8d7e6);
  box-shadow: 0 0.9rem 1.8rem rgba(229, 131, 171, 0.25), inset 0 0 0 1px rgba(216, 183, 106, 0.32);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.action-btn:hover svg,
.action-btn:focus-visible svg {
  box-shadow: 0 0 1.7rem rgba(242, 183, 207, 0.86), 0 1rem 2rem rgba(229, 131, 171, 0.25);
  transform: scale(1.08);
}

.action-btn.is-bouncing svg {
  animation: buttonBounce 0.42s ease;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  padding: 1.25rem;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.confirm-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(96, 66, 82, 0.28);
  backdrop-filter: blur(8px);
}

.confirm-box {
  position: relative;
  width: min(28rem, 100%);
  padding: clamp(1.4rem, 6vw, 2.25rem);
  overflow: hidden;
  border: 1px solid rgba(216, 183, 106, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 247, 251, 0.94)),
    url("../img/watercolor-bg.webp") center / cover;
  box-shadow: 0 1.7rem 4.5rem rgba(109, 71, 91, 0.28);
  transform: translateY(1rem) scale(0.96);
  transition: transform 0.32s cubic-bezier(.18,.82,.2,1);
}

.confirm-modal.is-open .confirm-box {
  transform: translateY(0) scale(1);
}

.confirm-box::before {
  position: absolute;
  inset: 0.45rem;
  border: 1px dashed rgba(242, 183, 207, 0.72);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

.confirm-box::after {
  position: absolute;
  top: -0.5rem;
  right: 0;
  left: 0;
  height: 6rem;
  content: "";
  background: url("../img/top-flora.webp") center top / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.confirm-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid rgba(216, 183, 106, 0.45);
  border-radius: 50%;
  color: #b86a8f;
  background: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  font: 1.8rem/1 var(--title);
  place-items: center;
}

.confirm-script,
.confirm-box h2,
.confirm-box label,
.confirm-box input,
.confirm-message,
.confirm-submit {
  position: relative;
  z-index: 1;
}

.confirm-script {
  margin: 1.35rem 0 0.1rem;
  color: var(--gold);
  font-family: var(--script);
  font-size: clamp(2.1rem, 10vw, 3.2rem);
  line-height: 1;
  text-align: center;
}

.confirm-box h2 {
  margin: 0 0 1.2rem;
  color: #d77fa9;
  font-family: var(--title);
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1;
  text-align: center;
}

.confirm-box label {
  display: block;
  margin-bottom: 0.45rem;
  color: #936674;
  font-size: 0.95rem;
  font-weight: 700;
}

.confirm-box input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(216, 183, 106, 0.55);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(248, 215, 230, 0.34);
  font: 600 1rem var(--body);
  outline: none;
}

.confirm-box input:focus {
  border-color: #d77fa9;
  box-shadow: 0 0 0 0.22rem rgba(242, 183, 207, 0.34);
}

.confirm-message {
  min-height: 1.35rem;
  margin: 0.75rem 0 0;
  color: #a56b7e;
  font-size: 0.9rem;
  text-align: center;
}

.confirm-message.is-error {
  color: #a85066;
}

.confirm-submit {
  display: inline-flex;
  width: 100%;
  min-height: 3.25rem;
  margin-top: 1rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #e58caf, #f2b7cf 58%, #d8b76a);
  box-shadow: 0 0.9rem 1.8rem rgba(229, 131, 171, 0.24);
  cursor: pointer;
  font: 700 1rem var(--body);
}

.confirm-submit svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.confirm-submit:disabled {
  cursor: wait;
  opacity: 0.7;
}

.gifts {
  position: relative;
  text-align: center;
}

.gifts::before {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: -1;
  width: min(56rem, 90vw);
  aspect-ratio: 1 / 0.44;
  content: "";
  background: url("../img/cloud-wreath.webp") center / contain no-repeat;
  opacity: 0.22;
  transform: translateX(-50%);
}

.gift-grid {
  display: grid;
  width: min(50rem, 100%);
  margin: clamp(1.8rem, 5vw, 3rem) auto 0;
  gap: 1rem;
}

.gift-card {
  display: grid;
  position: relative;
  min-height: 10.5rem;
  padding: 1rem;
  align-items: center;
  grid-template-columns: minmax(6rem, 33%) 1fr;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid rgba(216, 183, 106, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
  text-align: left;
  backdrop-filter: blur(12px);
}

.gift-card::after {
  position: absolute;
  inset: 0.35rem;
  border: 1px dashed rgba(242, 183, 207, 0.62);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

.gift-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 8.5rem;
  object-fit: contain;
  opacity: 0;
  transform: translateY(0.75rem) scale(0.88) rotate(-2deg);
  transform-origin: 50% 85%;
}

.gift-card.is-visible img {
  animation: giftImageIn 0.75s 0.18s cubic-bezier(.16,.84,.28,1.18) both, giftImageFloat 6s 1.1s ease-in-out infinite;
}

.gift-card:nth-child(2).is-visible img {
  animation-delay: 0.28s, 1.25s;
  animation-duration: 0.75s, 6.6s;
}

.gift-card:nth-child(3).is-visible img {
  animation-delay: 0.36s, 1.35s;
  animation-duration: 0.75s, 7s;
}

.gift-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.45rem;
  color: #c66f98;
  font-family: var(--title);
  font-size: clamp(1.55rem, 6vw, 2.35rem);
  line-height: 1;
}

.gift-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #886170;
  font-size: clamp(1rem, 3.8vw, 1.2rem);
  line-height: 1.45;
}

.gift-card strong {
  color: #b69146;
}

.finale {
  position: relative;
  min-height: clamp(26rem, 72vw, 39rem);
  margin-top: -1rem;
  overflow: hidden;
}

.finale::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(15rem, 38vw, 26rem);
  content: "";
  background:
    linear-gradient(180deg, rgba(250, 250, 250, 0), rgba(220, 232, 199, 0.42) 22%, rgba(186, 200, 126, 0.76) 64%, rgba(166, 185, 103, 0.72)),
    url("../img/hill.webp") center bottom / cover no-repeat;
  opacity: 0.86;
}

.meadow {
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  width: 108%;
  height: clamp(6.2rem, 17vw, 10rem);
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.94;
  mix-blend-mode: multiply;
  transform: translateX(-4%) translateY(0);
  transform-origin: 50% 100%;
  animation: meadowBreeze 8s 1s ease-in-out infinite;
}

.meadow-wind.is-visible {
  opacity: 0.94;
  transform: translateX(-4%) translateY(0);
}

.royal-ride {
  position: absolute;
  right: 50%;
  bottom: clamp(3rem, 8vw, 5.5rem);
  display: flex;
  width: min(48rem, 108vw);
  align-items: end;
  justify-content: center;
  gap: 0;
  opacity: 0;
  transform: translateX(72%) translateY(1.25rem);
  transition: opacity 1.1s ease, transform 1.35s cubic-bezier(.18,.82,.2,1);
  will-change: transform, opacity;
}

.royal-ride.is-visible {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}

.royal-ride img:first-child {
  position: relative;
  z-index: 1;
  width: clamp(12rem, 43vw, 22rem);
  height: auto;
  max-height: clamp(13rem, 43vw, 22rem);
  margin-right: clamp(-4.4rem, -9vw, -2.6rem);
  object-fit: contain;
  flex: 0 0 auto;
  transform-origin: 50% 92%;
}

.royal-ride img:last-child {
  position: relative;
  z-index: 2;
  width: clamp(10rem, 35vw, 17rem);
  height: auto;
  max-height: clamp(12rem, 36vw, 18rem);
  margin-left: clamp(-0.8rem, -2vw, -0.2rem);
  object-fit: contain;
  flex: 0 0 auto;
  transform-origin: 50% 96%;
  transform: scaleX(-1);
}

.royal-ride.is-visible .carriage-img {
  animation: carriageWalk 1.1s 0.15s ease-in-out 2, floatSmall 8s 2.7s ease-in-out infinite;
}

.royal-ride.is-visible .horse-img {
  animation: horseWalk 0.68s 0.1s ease-in-out 4, horseHopLoop 2s 2.95s ease-in-out infinite;
}

.castle {
  position: absolute;
  bottom: clamp(5.5rem, 13vw, 8rem);
  width: clamp(8rem, 28vw, 18rem);
  height: clamp(11rem, 31vw, 20rem);
  opacity: 0.2;
  background:
    linear-gradient(var(--pink-100), var(--pink-100)) 11% 100% / 18% 62% no-repeat,
    linear-gradient(var(--pink-100), var(--pink-100)) 46% 100% / 20% 78% no-repeat,
    linear-gradient(var(--pink-100), var(--pink-100)) 83% 100% / 18% 56% no-repeat,
    linear-gradient(135deg, transparent 50%, var(--pink-200) 51%) 6% 11% / 28% 27% no-repeat,
    linear-gradient(135deg, transparent 50%, var(--pink-200) 51%) 39% 0 / 31% 27% no-repeat,
    linear-gradient(135deg, transparent 50%, var(--pink-200) 51%) 78% 15% / 27% 25% no-repeat;
}

.castle-left {
  left: -1.5rem;
}

.castle-right {
  right: -1.5rem;
  transform: scaleX(-1);
}

.reveal,
.reveal-from-left,
.reveal-from-right {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.18,.8,.2,1);
}

.reveal {
  transform: translateY(2rem);
}

.reveal-from-left {
  transform: translateX(-2.4rem);
}

.reveal-from-right {
  transform: translateX(2.4rem);
}

.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes goldenArrival {
  0% { opacity: 0; transform: translateX(-50%) scale(0.24); }
  28% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.45); }
}

@keyframes flowersIn {
  to { opacity: 0.7; transform: translateY(0); }
}

@keyframes topFloraIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-1.25rem) rotate(-1deg); }
  to { opacity: 0.92; transform: translateX(-50%) translateY(0) rotate(0); }
}

@keyframes topFloraBackIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-1rem) scaleX(-1) rotate(1deg); }
  to { opacity: 0.46; transform: translateX(-50%) translateY(0.25rem) scaleX(-1) rotate(0); }
}

@keyframes windCanopy {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  35% { transform: translateX(calc(-50% - 0.35rem)) translateY(0.2rem) rotate(-0.85deg); }
  70% { transform: translateX(calc(-50% + 0.28rem)) translateY(-0.12rem) rotate(0.55deg); }
}

@keyframes windCanopyBack {
  0%, 100% { transform: translateX(-50%) translateY(0.25rem) scaleX(-1) rotate(0); }
  45% { transform: translateX(calc(-50% + 0.42rem)) translateY(0.55rem) scaleX(-1) rotate(0.75deg); }
  78% { transform: translateX(calc(-50% - 0.25rem)) translateY(0.1rem) scaleX(-1) rotate(-0.45deg); }
}

@keyframes hangingFlower {
  from { opacity: 0; transform: translateY(-2rem) rotate(-4deg); }
  to { opacity: 0.92; transform: translateY(0) rotate(0); }
}

@keyframes crestIn {
  to { opacity: 1; transform: scale(1); }
}

@keyframes crestZoomIn {
  0% {
    opacity: 0;
    filter: blur(0.18rem);
    transform: scale(0.52) translateY(1.8rem);
  }
  68% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.045) translateY(-0.18rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
  }
}

@keyframes crownDrop {
  72% { opacity: 1; transform: translate(-50%, 0.4rem) rotate(-2deg); }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }
}

@keyframes drawLetter {
  80% { fill: rgba(246, 172, 196, 0); }
  100% { fill: rgba(246, 172, 196, 0.05); stroke-dashoffset: 0; opacity: 0.82; }
}

@keyframes dragonIn {
  from { opacity: 0; transform: translateY(1rem) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dragonSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-3.2rem) translateY(0.8rem) scale(0.82) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0);
  }
}

@keyframes dragonSlideRight {
  from {
    opacity: 0;
    transform: translateX(3.2rem) translateY(0.8rem) scale(0.82) rotate(5deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0);
  }
}

@keyframes ribbonIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatMain {
  50% { transform: translateY(-0.7rem) scale(1.01); }
}

@keyframes floatSmall {
  50% { transform: translateY(-0.55rem); }
}

@keyframes giftImageIn {
  0% {
    opacity: 0;
    transform: translateY(0.9rem) scale(0.84) rotate(-3deg);
  }
  72% {
    opacity: 1;
    transform: translateY(-0.25rem) scale(1.05) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes giftImageFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-0.45rem) rotate(1.4deg); }
}

@keyframes carriageWalk {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-0.32rem) rotate(-0.7deg); }
  70% { transform: translateY(0.08rem) rotate(0.55deg); }
}

@keyframes horseWalk {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0); }
  30% { transform: scaleX(-1) translateY(-0.45rem) rotate(0.7deg); }
  65% { transform: scaleX(-1) translateY(0.08rem) rotate(-0.45deg); }
}

@keyframes horseHopLoop {
  0%, 52%, 100% { transform: scaleX(-1) translateY(0) rotate(0); }
  10% { transform: scaleX(-1) translateY(-0.5rem) rotate(0.85deg); }
  20% { transform: scaleX(-1) translateY(0.05rem) rotate(-0.45deg); }
  30% { transform: scaleX(-1) translateY(-0.28rem) rotate(0.35deg); }
  40% { transform: scaleX(-1) translateY(0) rotate(0); }
}

@keyframes meadowBreeze {
  0%, 100% { transform: translateX(-4%) translateY(0) skewX(0); }
  50% { transform: translateX(-3.1%) translateY(0.12rem) skewX(-0.55deg); }
}

@keyframes lazyFloat {
  50% { translate: 0 0.5rem; }
}

@keyframes hintPulse {
  50% { opacity: 0.25; transform: translate(-50%, 0.35rem) rotate(45deg); }
}

@keyframes buttonBounce {
  35% { transform: scale(0.94); }
  70% { transform: scale(1.1); }
}

@media (min-width: 48rem) {
  .hero {
    padding-top: 3rem;
  }

  .hero-stage {
    width: min(40rem, 100%);
  }

  .crest-wrap {
    width: min(54vw, 35rem);
  }

  .dragon {
    width: clamp(8rem, 16vw, 12rem);
  }

  .dragon-pink {
    left: -2rem;
  }

  .dragon-blue {
    right: -2.6rem;
  }

  .ribbon {
    margin-top: -6.4rem;
  }

  .countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gift-grid {
    gap: 1.2rem;
  }

  .gift-card {
    min-height: 11.5rem;
    padding: 1.2rem 1.5rem;
    grid-template-columns: 9rem 1fr;
  }
}

@media (min-width: 64rem) {
  .hero {
    min-height: 96svh;
  }

  .hero::before {
    height: 13rem;
  }

  .flower-canopy {
    width: 70rem;
  }

  .action-menu {
    margin-top: -0.5rem;
  }
}

@media (min-width: 90rem) {
  .crest-wrap {
    width: 36rem;
  }

  .hero-stage {
    width: 45rem;
  }
}