@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,600&family=Italiana&family=Montserrat:wght@300;400;500&display=swap");

:root {
  --ivory: #f8f4eb;
  --paper: #fffdf8;
  --sage: #65735d;
  --dark: #314030;
  --gold: #b7904f;
  --ink: #343933;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(223, 207, 178, .42), transparent 28rem),
    radial-gradient(circle at 88% 68%, rgba(195, 210, 189, .35), transparent 30rem),
    var(--ivory);
  font-family: "Montserrat", Arial, sans-serif;
}

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

/* Jardines y plantas movidos por el viento */
.garden {
  position: absolute;
  bottom: -14px;
  display: flex;
  align-items: flex-end;
  font-size: clamp(3.4rem, 7vw, 6rem);
  filter: drop-shadow(0 8px 8px rgba(47, 57, 42, .18));
}
.garden-left { left: -15px; }
.garden-right { right: -15px; transform: scaleX(-1); }
.plant {
  display: inline-block;
  margin-left: -20px;
  transform-origin: center bottom;
  animation: wind 2.6s ease-in-out infinite alternate;
}
.plant:nth-child(2) { animation-delay: -.7s; font-size: .78em; }
.plant:nth-child(3) { animation-delay: -1.4s; font-size: .68em; }
.plant:nth-child(4) { animation-delay: -2s; font-size: .6em; }

/* Pétalos: ya están en el HTML y caen desde el primer segundo */
.petal {
  position: absolute;
  top: -12vh;
  color: #dba7a4;
  font-size: clamp(15px, 2.2vw, 25px);
  text-shadow: 0 0 8px rgba(255, 255, 255, .9);
  animation-name: petal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.petal-1 { left: 5%; animation-duration: 7s; animation-delay: -4s; }
.petal-2 { left: 17%; animation-duration: 10s; animation-delay: -8s; }
.petal-3 { left: 30%; animation-duration: 8s; animation-delay: -2s; }
.petal-4 { left: 43%; animation-duration: 11s; animation-delay: -7s; }
.petal-5 { left: 58%; animation-duration: 7.5s; animation-delay: -5s; }
.petal-6 { left: 70%; animation-duration: 9s; animation-delay: -1s; }
.petal-7 { left: 83%; animation-duration: 8.5s; animation-delay: -6s; }
.petal-8 { left: 94%; animation-duration: 10.5s; animation-delay: -3s; }

.butterfly, .dove, .rabbit {
  position: absolute;
  display: block;
  filter: drop-shadow(0 5px 5px rgba(43, 49, 40, .22));
}
.butterfly {
  font-size: clamp(26px, 4.2vw, 46px);
  animation: butterfly-flight 9s ease-in-out infinite;
}
.butterfly-1 { left: 2%; top: 17%; animation-delay: -1s; }
.butterfly-2 { left: 33%; top: 73%; animation-delay: -6s; animation-duration: 12s; }
.butterfly-3 { left: 69%; top: 46%; animation-delay: -9s; animation-duration: 14s; }

.dove {
  left: -110px;
  font-size: clamp(34px, 5vw, 60px);
  animation: dove-flight 11s linear infinite;
}
.dove-1 { top: 12%; animation-delay: -2s; }
.dove-2 { top: 49%; animation-delay: -8s; animation-duration: 15s; font-size: clamp(27px, 4vw, 46px); }

.rabbit {
  left: -100px;
  bottom: 6vh;
  font-size: clamp(40px, 6vw, 68px);
  animation: rabbit-run 13s linear infinite;
}
.rabbit-2 { bottom: 17vh; animation-delay: -8s; animation-duration: 18s; font-size: clamp(30px, 4.5vw, 52px); }

/* Cartel con alas: cruza la pantalla exactamente cada 5 segundos */
.winged-banner {
  position: absolute;
  top: 29%;
  left: 0;
  display: flex;
  align-items: center;
  width: min(460px, 92vw);
  animation: banner-cross 5s linear infinite;
  filter: drop-shadow(0 12px 17px rgba(73, 54, 34, .26));
}
.winged-banner strong {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid rgba(183, 144, 79, .8);
  border-radius: 50%;
  color: var(--dark);
  background: rgba(255, 253, 248, .98);
  box-shadow: inset 0 0 0 5px rgba(239, 224, 199, .55);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 3.2vw, 1.75rem);
  font-style: italic;
  text-align: center;
  white-space: nowrap;
}
.banner-wing {
  display: block;
  font-size: clamp(42px, 7vw, 72px);
  transform-origin: center;
  animation: wing-flap .4s ease-in-out infinite alternate;
}
.wing-right { animation-name: wing-flap-right; }
.banner-spark {
  position: absolute;
  color: #e1b54f;
  font-size: 22px;
  text-shadow: 0 0 7px #fff4a9, 0 0 13px #dfad42;
  animation: banner-glitter 1s ease-out infinite;
}
.spark-1 { left: 4%; top: 72%; animation-delay: -.1s; }
.spark-2 { left: 27%; top: 85%; animation-delay: -.55s; }
.spark-3 { right: 31%; top: 5%; animation-delay: -.8s; }
.spark-4 { right: 5%; top: 68%; animation-delay: -.3s; }

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 55px 22px;
  overflow: hidden;
  isolation: isolate;
}
.hero-frame {
  position: absolute;
  inset: 16px;
  z-index: -2;
  border: 1px solid rgba(183, 144, 79, .55);
  border-radius: 220px 220px 25px 25px;
}
.hero-flower {
  position: absolute;
  z-index: -1;
  display: flex;
  align-items: center;
  font-size: clamp(3.6rem, 8vw, 7rem);
  transform-origin: bottom;
  animation: large-plant-wind 3.2s ease-in-out infinite alternate;
}
.flower-left { left: -30px; bottom: -4px; }
.flower-right { right: -30px; top: 0; transform: rotate(180deg); animation-name: large-plant-wind-right; }
.hero-flower span { margin-left: -27px; }
.flower-right span:nth-child(2) {
  display: inline-block;
  transform: rotate(180deg);
}

.invitation {
  width: min(820px, 92vw);
  text-align: center;
  animation: entrance 1.15s ease-out both;
}
.rings { position: relative; width: 75px; height: 45px; margin: 0 auto 12px; }
.rings i { position: absolute; width: 38px; height: 38px; border: 2px solid var(--gold); border-radius: 50%; }
.rings i:first-child { left: 8px; }.rings i:last-child { right: 8px; }
.overline { margin: 0 0 15px; color: var(--gold); font-size: .72rem; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; }
h1, h2 { color: var(--dark); font-weight: 400; }
h1 { margin: 0; font-family: "Italiana", Georgia, serif; font-size: clamp(3.1rem, 9vw, 7.4rem); line-height: .88; letter-spacing: -.04em; }
h1 em { display: block; margin: .1em 0; color: var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: .52em; }
.intro, .section-copy { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.2rem, 2.7vw, 1.6rem); line-height: 1.55; }
.intro { max-width: 590px; margin: 30px auto; }
.date { display: flex; align-items: center; justify-content: center; gap: 17px; }
.date > span { width: clamp(35px, 8vw, 88px); height: 1px; background: var(--gold); }
.date strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.25rem, 3vw, 1.75rem); letter-spacing: .08em; text-transform: uppercase; }
.date small { display: block; margin-top: 4px; color: var(--gold); letter-spacing: .25em; text-transform: uppercase; }
.discover { display: inline-block; margin-top: 30px; color: var(--dark); font-size: .7rem; letter-spacing: .2em; text-decoration: none; text-transform: uppercase; }

.section { width: min(1080px, 100%); margin: 0 auto; padding: 105px 22px; text-align: center; }
h2 { margin: 0 0 20px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.8rem, 6vw, 4.7rem); }
.section-copy { max-width: 670px; margin: 0 auto 42px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards article { min-height: 215px; padding: 35px 20px; border: 1px solid rgba(183, 144, 79, .4); border-radius: 120px 120px 18px 18px; background: rgba(255, 253, 248, .78); box-shadow: 0 18px 45px rgba(52, 62, 47, .09); }
.cards article > span { color: var(--gold); font-size: 1.7rem; }
.cards h3 { margin: 12px 0 8px; color: var(--dark); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; }
.cards p { margin: 0; font-size: .84rem; line-height: 1.75; }

.countdown-section { position: relative; padding: 95px 22px; color: white; background: linear-gradient(140deg, #314030, #64745f); text-align: center; overflow: hidden; }
.countdown-section h2 { color: white; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(90px, 145px)); justify-content: center; gap: 12px; margin-top: 35px; }
.countdown > div { padding: 22px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 70px 70px 13px 13px; background: rgba(255,255,255,.06); }
.countdown strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 400; }
.countdown span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }

.map-frame { margin-top: 35px; padding: 10px; border: 1px solid rgba(183, 144, 79, .6); border-radius: 190px 190px 25px 25px; background: rgba(255,255,255,.6); box-shadow: 0 25px 70px rgba(51, 61, 47, .14); }
.map-frame iframe { display: block; width: 100%; height: min(66vh, 560px); border: 0; border-radius: 180px 180px 18px 18px; }
.address { margin: 25px 0 8px; color: var(--dark); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.55rem; }
.location > p:last-child { font-size: .82rem; }
footer { padding: 35px 20px 60px; color: var(--dark); text-align: center; }
footer strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.5rem; font-style: italic; }
footer p { color: var(--gold); font-size: .68rem; letter-spacing: .23em; text-transform: uppercase; }

#sparkle-layer { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.js-sparkle { position: absolute; color: #e2b651; text-shadow: 0 0 8px #fff3a4; animation: js-sparkle 1.25s ease-out forwards; }

@keyframes wind {
  0% { transform: rotate(-8deg) translateX(-4px); }
  100% { transform: rotate(10deg) translateX(7px); }
}
@keyframes petal-fall {
  0% { transform: translate3d(0, -15vh, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .95; }
  45% { transform: translate3d(60px, 50vh, 0) rotate(260deg); }
  100% { transform: translate3d(-45px, 120vh, 0) rotate(720deg); opacity: .15; }
}
@keyframes butterfly-flight {
  0% { transform: translate(-70px, 20px) rotate(-12deg) scale(.75); }
  22% { transform: translate(21vw, -85px) rotate(14deg) scale(1); }
  48% { transform: translate(47vw, 65px) rotate(-15deg) scale(.85); }
  72% { transform: translate(18vw, -35px) rotate(10deg) scale(1.05); }
  100% { transform: translate(74vw, -105px) rotate(-6deg) scale(.75); }
}
@keyframes dove-flight {
  0% { transform: translateX(-130px) translateY(30px); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translateX(53vw) translateY(-50px); opacity: 1; }
  100% { transform: translateX(calc(100vw + 180px)) translateY(12px); opacity: 0; }
}
@keyframes rabbit-run {
  0% { transform: translateX(-120px) translateY(0); opacity: 0; }
  7% { opacity: 1; }
  15% { transform: translateX(15vw) translateY(-55px); }
  28% { transform: translateX(29vw) translateY(0); }
  42% { transform: translateX(44vw) translateY(-62px); }
  57% { transform: translateX(59vw) translateY(0); }
  73% { transform: translateX(76vw) translateY(-48px); }
  100% { transform: translateX(calc(100vw + 140px)) translateY(0); opacity: 0; }
}
@keyframes banner-cross {
  0% { transform: translateX(-110%) translateY(0); opacity: 1; }
  35% { transform: translateX(22vw) translateY(-12px); }
  70% { transform: translateX(58vw) translateY(9px); }
  100% { transform: translateX(calc(100vw + 20px)) translateY(-5px); opacity: 1; }
}
@keyframes wing-flap {
  0% { transform: rotate(-15deg) scaleY(.8); }
  100% { transform: rotate(17deg) scaleY(1.1); }
}
@keyframes wing-flap-right {
  0% { transform: scaleX(-1) rotate(-15deg) scaleY(.8); }
  100% { transform: scaleX(-1) rotate(17deg) scaleY(1.1); }
}
@keyframes banner-glitter {
  0% { transform: translate(0,0) scale(.25) rotate(0deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-42px, 40px) scale(1.5) rotate(190deg); opacity: 0; }
}
@keyframes large-plant-wind {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}
@keyframes large-plant-wind-right {
  0% { transform: rotate(174deg); }
  100% { transform: rotate(187deg); }
}
@keyframes entrance {
  0% { transform: translateY(25px) scale(.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes js-sparkle {
  0% { transform: translate(0,0) scale(.25) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x),var(--y)) scale(1.6) rotate(200deg); opacity: 0; }
}

.wildlife-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.creature {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.creature[data-direction="right"] { --facing: 1; }
.creature[data-direction="left"] { --facing: -1; }

.rabbit-creature {
  width: clamp(74px, 10vw, 132px);
  height: clamp(48px, 6.4vw, 84px);
  animation: rabbit-journey var(--duration, 11s) cubic-bezier(.45, 0, .26, 1) forwards;
  filter: drop-shadow(0 11px 11px rgba(52, 47, 39, .22));
}
.rabbit-creature .rabbit-body {
  position: absolute;
  left: 19%;
  bottom: 8%;
  width: 62%;
  height: 55%;
  border-radius: 52% 47% 43% 46%;
  background:
    radial-gradient(circle at 71% 19%, rgba(255,255,255,.85), transparent 12%),
    radial-gradient(circle at 37% 79%, rgba(199, 173, 148, .58), transparent 30%),
    linear-gradient(135deg, #f4eadf, #cdb39a 58%, #967b66);
  box-shadow: inset -9px -7px 13px rgba(99, 74, 57, .25), inset 8px 8px 13px rgba(255,255,255,.55);
}
.rabbit-creature .rabbit-head {
  position: absolute;
  right: 3%;
  bottom: 32%;
  width: 35%;
  height: 39%;
  border-radius: 54% 46% 48% 50%;
  background: linear-gradient(135deg, #f7eee6, #c9ad93 68%, #947863);
  box-shadow: inset -7px -5px 9px rgba(88, 63, 48, .22), inset 6px 7px 9px rgba(255,255,255,.58);
}
.rabbit-creature .rabbit-ear {
  position: absolute;
  right: 18%;
  bottom: 63%;
  width: 13%;
  height: 46%;
  border-radius: 70% 70% 45% 45%;
  background: linear-gradient(90deg, #c9ad94, #f7ece3 46%, #d6a9a0);
  transform-origin: bottom center;
  animation: rabbit-ear-wiggle .72s ease-in-out infinite alternate;
}
.rabbit-creature .rabbit-ear.back {
  right: 28%;
  height: 40%;
  opacity: .92;
  animation-delay: -.24s;
}
.rabbit-creature .rabbit-eye {
  position: absolute;
  right: 15%;
  bottom: 51%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #211d1a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.48);
}
.rabbit-creature .rabbit-nose {
  position: absolute;
  right: 0;
  bottom: 43%;
  width: 7px;
  height: 5px;
  border-radius: 60%;
  background: #d99397;
  animation: rabbit-nose-twitch .38s ease-in-out infinite;
}
.rabbit-creature .rabbit-tail {
  position: absolute;
  left: 11%;
  bottom: 28%;
  width: 20%;
  height: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e8d9cb 65%, #c6aa92);
}
.rabbit-creature .rabbit-leg {
  position: absolute;
  bottom: 1%;
  width: 24%;
  height: 16%;
  border-radius: 50%;
  background: linear-gradient(90deg, #a68670, #e9d7c8);
  transform-origin: right center;
  animation: rabbit-leg-hop .58s ease-in-out infinite;
}
.rabbit-creature .rabbit-leg.front { right: 17%; }
.rabbit-creature .rabbit-leg.back { left: 30%; animation-delay: -.28s; }

.butterfly-creature {
  width: clamp(43px, 5.8vw, 75px);
  height: clamp(36px, 5vw, 64px);
  animation: butterfly-journey var(--duration, 10s) ease-in-out forwards;
  filter: drop-shadow(0 8px 8px rgba(59, 49, 43, .2));
}
.butterfly-creature .butterfly-body {
  position: absolute;
  left: 48%;
  top: 26%;
  width: 7%;
  height: 52%;
  border-radius: 50%;
  background: linear-gradient(#5d4d42, #1f1b18);
}
.butterfly-creature .butterfly-wing {
  position: absolute;
  top: 5%;
  width: 47%;
  height: 78%;
  border: 1px solid rgba(82, 61, 47, .24);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.72), transparent 13%),
    radial-gradient(circle at 63% 62%, rgba(236, 168, 178, .78), transparent 23%),
    linear-gradient(145deg, rgba(246, 205, 144, .95), rgba(185, 123, 157, .92) 48%, rgba(121, 149, 176, .9));
  box-shadow: inset 0 0 13px rgba(255,255,255,.38), inset 0 -8px 14px rgba(72, 48, 69, .24);
  transform-origin: 100% 50%;
  animation: butterfly-wing-flap .22s ease-in-out infinite alternate;
}
.butterfly-creature .butterfly-wing.left {
  left: 2%;
  border-radius: 72% 24% 67% 28%;
}
.butterfly-creature .butterfly-wing.right {
  right: 0;
  border-radius: 24% 72% 28% 67%;
  transform-origin: 0 50%;
  animation-name: butterfly-wing-flap-right;
}

.dove-creature {
  width: clamp(66px, 8.5vw, 118px);
  height: clamp(42px, 5.6vw, 78px);
  animation: dove-journey var(--duration, 12s) linear forwards;
  filter: drop-shadow(0 10px 10px rgba(61, 61, 56, .18));
}
.dove-creature .dove-body {
  position: absolute;
  left: 30%;
  top: 35%;
  width: 42%;
  height: 34%;
  border-radius: 58% 42% 50% 48%;
  background: linear-gradient(145deg, #fff, #e8e7df 68%, #c8c5b8);
  box-shadow: inset -7px -4px 10px rgba(132, 130, 120, .24);
}
.dove-creature .dove-head {
  position: absolute;
  right: 15%;
  top: 25%;
  width: 21%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, #ecebe5 65%, #cbc8bd);
}
.dove-creature .dove-beak {
  position: absolute;
  right: 7%;
  top: 34%;
  width: 11%;
  height: 7%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #d8a65c;
}
.dove-creature .dove-wing {
  position: absolute;
  left: 23%;
  top: 12%;
  width: 46%;
  height: 42%;
  border-radius: 70% 20% 75% 20%;
  background:
    repeating-linear-gradient(135deg, rgba(185,184,175,.22) 0 2px, transparent 2px 7px),
    linear-gradient(145deg, #fff, #dfded6);
  transform-origin: 70% 90%;
  animation: dove-wing-flap .5s ease-in-out infinite alternate;
}
.dove-creature .dove-tail {
  position: absolute;
  left: 14%;
  top: 43%;
  width: 24%;
  height: 22%;
  clip-path: polygon(0 0, 100% 25%, 96% 78%, 0 100%, 24% 50%);
  background: linear-gradient(90deg, #fdfdfb, #d8d6cc);
}

.winged-banner {
  top: 30%;
  left: 50%;
  justify-content: center;
  width: min(520px, 94vw);
  transform: translateX(-50%);
  animation: angel-banner-flight 20s ease-in-out infinite;
}
.winged-banner strong {
  flex: 0 1 auto;
  min-width: min(360px, 63vw);
  padding: 13px 16px;
  border-radius: 999px;
  white-space: normal;
  line-height: 1.05;
}
.banner-wing {
  position: relative;
  flex: 0 0 clamp(54px, 9vw, 84px);
  width: clamp(54px, 9vw, 84px);
  height: clamp(42px, 7vw, 64px);
  margin: 0 -2px;
  font-size: 0;
  transform-origin: right center;
  animation: cupid-wing-left .48s ease-in-out infinite alternate;
}
.banner-wing i {
  position: absolute;
  right: 0;
  border-radius: 85% 20% 80% 28%;
  background:
    repeating-linear-gradient(130deg, rgba(180, 170, 156, .22) 0 2px, transparent 2px 8px),
    linear-gradient(145deg, #fff, #eee7dc 66%, #cfc5b8);
  box-shadow: inset 8px 8px 12px rgba(255,255,255,.75), inset -8px -8px 13px rgba(153, 138, 124, .24);
}
.banner-wing i:nth-child(1) { top: 0; width: 92%; height: 55%; }
.banner-wing i:nth-child(2) { top: 28%; width: 74%; height: 48%; }
.banner-wing i:nth-child(3) { top: 54%; width: 51%; height: 34%; }
.wing-right {
  transform-origin: left center;
  animation-name: cupid-wing-right;
}
.wing-right i {
  left: 0;
  right: auto;
  transform: scaleX(-1);
}
.banner-spark {
  color: var(--spark-color, #e1b54f);
  animation: banner-glitter 1.35s ease-out infinite;
}
.banner-trail-spark {
  position: fixed;
  z-index: 62;
  color: var(--spark-color);
  font-size: var(--spark-size);
  text-shadow: 0 0 8px rgba(255, 244, 169, .95), 0 0 14px currentColor;
  pointer-events: none;
  animation: banner-trail-fade 1.65s ease-out forwards;
}

.creature img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.rabbit-creature {
  top: auto;
  bottom: var(--ground, 2vh);
  width: clamp(92px, 13vw, 176px);
  height: auto;
  animation: none;
  transform-origin: center bottom;
}
.butterfly-creature {
  width: clamp(42px, 6vw, 86px);
  height: auto;
}
.dove-creature {
  width: clamp(78px, 10vw, 142px);
  height: auto;
}

@keyframes rabbit-journey {
  0% { transform: translate3d(var(--start-x), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(.96) scaleY(1.04); opacity: 0; }
  7% { opacity: 1; }
  12% { transform: translate3d(calc(var(--start-x) + var(--travel) * .08), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(.92) scaleY(1.08); }
  19% { transform: translate3d(calc(var(--start-x) + var(--travel) * .16), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(1.13) scaleY(.91); }
  27% { transform: translate3d(calc(var(--start-x) + var(--travel) * .24), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(.95) scaleY(1.06); }
  36% { transform: translate3d(calc(var(--start-x) + var(--travel) * .34), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(.9) scaleY(1.1); }
  44% { transform: translate3d(calc(var(--start-x) + var(--travel) * .43), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(1.15) scaleY(.9); }
  54% { transform: translate3d(calc(var(--start-x) + var(--travel) * .53), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(.96) scaleY(1.05); }
  64% { transform: translate3d(calc(var(--start-x) + var(--travel) * .63), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(.91) scaleY(1.09); }
  72% { transform: translate3d(calc(var(--start-x) + var(--travel) * .72), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(1.14) scaleY(.91); opacity: 1; }
  84% { transform: translate3d(calc(var(--start-x) + var(--travel) * .84), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(.96) scaleY(1.04); opacity: 1; }
  100% { transform: translate3d(calc(var(--start-x) + var(--travel)), 0, 0) scaleX(var(--facing)) scale(var(--scale, 1)) scaleX(1.02) scaleY(.98); opacity: 0; }
}
@keyframes rabbit-ear-wiggle {
  0% { transform: rotate(-11deg); }
  100% { transform: rotate(13deg); }
}
@keyframes rabbit-nose-twitch {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(2px) scale(1.15); }
}
@keyframes rabbit-leg-hop {
  0% { transform: rotate(12deg) translateX(0); }
  100% { transform: rotate(-19deg) translateX(-5px); }
}
@keyframes butterfly-journey {
  0% { transform: translate3d(var(--start-x), var(--start-y), 0) scaleX(var(--facing)) scale(var(--scale, 1)) rotate(-8deg); opacity: 0; }
  10% { opacity: .98; }
  28% { transform: translate3d(calc(var(--start-x) + var(--travel) * .26), calc(var(--start-y) + var(--float-a)), 0) scaleX(var(--facing)) scale(var(--scale, 1)) rotate(16deg); }
  53% { transform: translate3d(calc(var(--start-x) + var(--travel) * .52), calc(var(--start-y) + var(--float-b)), 0) scaleX(var(--facing)) scale(var(--scale, 1)) rotate(-13deg); }
  76% { transform: translate3d(calc(var(--start-x) + var(--travel) * .77), calc(var(--start-y) + var(--float-c)), 0) scaleX(var(--facing)) scale(var(--scale, 1)) rotate(12deg); opacity: .98; }
  100% { transform: translate3d(calc(var(--start-x) + var(--travel)), var(--end-y), 0) scaleX(var(--facing)) scale(var(--scale, 1)) rotate(-7deg); opacity: 0; }
}
@keyframes butterfly-wing-flap {
  0% { transform: rotateY(58deg) rotate(-9deg); }
  100% { transform: rotateY(6deg) rotate(10deg); }
}
@keyframes butterfly-wing-flap-right {
  0% { transform: rotateY(-58deg) rotate(9deg); }
  100% { transform: rotateY(-6deg) rotate(-10deg); }
}
@keyframes dove-journey {
  0% { transform: translate3d(var(--start-x), var(--start-y), 0) scaleX(var(--facing)) scale(var(--scale, 1)); opacity: 0; }
  9% { opacity: 1; }
  40% { transform: translate3d(calc(var(--start-x) + var(--travel) * .42), calc(var(--start-y) + var(--float-a)), 0) scaleX(var(--facing)) scale(var(--scale, 1)); }
  72% { transform: translate3d(calc(var(--start-x) + var(--travel) * .73), calc(var(--start-y) + var(--float-b)), 0) scaleX(var(--facing)) scale(var(--scale, 1)); opacity: 1; }
  100% { transform: translate3d(calc(var(--start-x) + var(--travel)), var(--end-y), 0) scaleX(var(--facing)) scale(var(--scale, 1)); opacity: 0; }
}
@keyframes dove-wing-flap {
  0% { transform: rotate(-34deg) translateY(8px); }
  100% { transform: rotate(28deg) translateY(-13px); }
}
@keyframes angel-banner-flight {
  0% { transform: translateX(calc(-50vw - 115%)) translateY(0); opacity: 0; }
  18% { transform: translateX(-50%) translateY(-5px); opacity: 1; }
  38% { transform: translateX(-50%) translateY(-5px); opacity: 1; }
  54% { transform: translateX(calc(50vw + 115%)) translateY(4px); opacity: 0; }
  100% { transform: translateX(calc(50vw + 115%)) translateY(4px); opacity: 0; }
}
@keyframes cupid-wing-left {
  0% { transform: rotateY(46deg) rotate(-9deg) translateX(3px); }
  100% { transform: rotateY(4deg) rotate(12deg) translateX(0); }
}
@keyframes cupid-wing-right {
  0% { transform: rotateY(-46deg) rotate(9deg) translateX(-3px); }
  100% { transform: rotateY(-4deg) rotate(-12deg) translateX(0); }
}
@keyframes banner-trail-fade {
  0% { transform: translate3d(0, 0, 0) scale(.28) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--trail-x), var(--trail-y), 0) scale(1.45) rotate(210deg); opacity: 0; }
}

@media (max-width: 760px) {
  .garden { font-size: 3.5rem; opacity: .88; }
  .cards { grid-template-columns: 1fr; max-width: 430px; margin: auto; }
  .countdown { grid-template-columns: repeat(2, minmax(105px, 145px)); }
  .map-frame { border-radius: 110px 110px 20px 20px; }
  .map-frame iframe { height: 440px; border-radius: 100px 100px 14px 14px; }
  .hero-frame { inset: 9px; border-radius: 145px 145px 18px 18px; }
  .winged-banner { width: 94vw; }
  .banner-wing { flex-basis: 48px; width: 48px; height: 38px; }
  .winged-banner strong { padding: 11px 12px; font-size: 1.05rem; }
}