:root {
  color-scheme: light;
  --navy: #16365c;
  --blue: #1766a4;
  --blue-deep: #104877;
  --silver: #bac5d0;
  --gold: #b5965a;
  --ink: #1e2c3d;
  --muted: #657180;
  --paper: #fffdf8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Aptos", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { height: 100vh; height: 100svh; height: 100dvh; background: #f1f4f7; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(23,102,164,.45); outline-offset: 3px; }

.invitation-shell {
  position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 12% 18%, rgba(255,255,255,.96), transparent 48%),
    radial-gradient(ellipse at 88% 82%, rgba(187,207,224,.48), transparent 43%),
    linear-gradient(140deg, #f9f9f7 0%, #eef2f6 52%, #f8f6f1 100%);
}
.invitation-shell::before {
  position: absolute; inset: 0; pointer-events: none; content: "";
  background-image: radial-gradient(rgba(181,150,90,.4) .7px, transparent .8px), radial-gradient(rgba(41,100,151,.22) .7px, transparent .8px);
  background-position: 0 0, 13px 17px; background-size: 44px 44px, 58px 58px; opacity: .25;
}
.scene {
  position: relative; isolation: isolate; z-index: 1;
  width: 100vw; height: 100vh; height: 100svh; height: 100dvh; min-height: 0;
}
.invitation-card {
  position: absolute; inset: 0; z-index: 1; overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 0;
  background: var(--paper) url("assets/tarjeta-globos.svg") center / 100% 100% no-repeat;
  box-shadow: 0 24px 70px rgba(26,45,65,.2), 0 4px 16px rgba(26,45,65,.1);
  opacity: 0; transform: translateY(22px) scale(.96); pointer-events: none;
  transition: opacity .72s ease .28s, transform .9s cubic-bezier(.2,.78,.22,1) .2s;
  scrollbar-width: thin; scrollbar-color: rgba(93,120,148,.35) transparent;
}
.invitation-card-content {
  position: relative; z-index: 1; width: min(100%, 1060px); min-height: 100%; display: flex; flex-direction: column; align-items: center;
  margin-inline: auto; padding: max(clamp(22px, 4.6vh, 42px), env(safe-area-inset-top)) clamp(18px, 5.2vw, 34px) max(clamp(16px, 3vh, 27px), env(safe-area-inset-bottom));
  text-align: center;
}
.living-decor { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.floating-balloon { position: absolute; display: block; width: clamp(26px, 4.8vw, 54px); aspect-ratio: .68; border: 1px solid rgba(255,255,255,.58); border-radius: 52% 52% 47% 47%; opacity: .42; transform-origin: 50% 100%; box-shadow: inset -7px -8px 14px rgba(7,34,62,.18), 0 5px 13px rgba(25,50,76,.12); animation: balloon-drift 6s ease-in-out infinite; }
.floating-balloon::before { position: absolute; top: 15%; left: 23%; width: 12%; height: 27%; border-radius: 50%; background: rgba(255,255,255,.78); content: ""; transform: rotate(-20deg); }
.floating-balloon::after { position: absolute; top: calc(100% + 5px); left: 50%; width: 1px; height: 28px; background: rgba(111,130,149,.54); content: ""; transform: rotate(5deg); transform-origin: top; }
.balloon-blue { background: linear-gradient(130deg, #6da7d5 0%, #2876b3 42%, #104575 100%); }
.balloon-silver { background: linear-gradient(125deg, #fff 3%, #dce4eb 42%, #a4b2bf 76%, #f9fbfd 100%); }
.float-a { top: 20%; left: 4.5%; animation-delay: -1.4s; }
.float-b { top: 28%; right: 6%; width: clamp(24px, 4vw, 44px); animation-delay: -3.2s; }
.float-c { bottom: 23%; left: 7%; width: clamp(23px, 3.6vw, 40px); animation-delay: -4.1s; }
.float-d { right: 8%; bottom: 25%; width: clamp(27px, 4.3vw, 48px); animation-delay: -.6s; }
.living-sparkle { position: absolute; z-index: 0; color: #c3a66c; font: 400 clamp(15px, 2.3vw, 27px)/1 var(--serif); text-shadow: 0 0 12px rgba(201,171,108,.48); animation: sparkle-twinkle 2.8s ease-in-out infinite; }
.sparkle-a { top: 34%; left: 10%; animation-delay: -.8s; }
.sparkle-b { top: 54%; right: 11%; animation-delay: -1.9s; }
.sparkle-c { bottom: 16%; left: 47%; animation-delay: -1.2s; }
.card-border { position: absolute; z-index: 0; inset: 11px; border: 1px solid rgba(186,165,121,.45); border-radius: 5px; pointer-events: none; }
.card-kicker { margin: 0 0 5px; color: var(--navy); font-size: clamp(.63rem, 1.7vh, .76rem); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.age-lockup { display: flex; align-items: baseline; justify-content: center; gap: .34rem; line-height: .95; }
.age-number {
  font: 400 clamp(3.55rem, 9vh, 5.4rem)/.92 var(--serif); letter-spacing: -.055em;
  background: linear-gradient(155deg, #8793a0 6%, #f8f9fb 27%, #8996a2 46%, #f4f6f8 63%, #788797 88%);
  color: #8b98a7; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(55,68,82,.34));
}
.age-word { color: var(--navy); font: italic 400 clamp(1.4rem, 3.8vh, 2rem)/1 var(--serif); }
.honoree-name { display: grid; justify-items: center; margin: 1px 0 0; color: var(--navy); font-family: "Segoe Script", "Brush Script MT", cursive; font-size: clamp(2.15rem, 6.6vh, 3rem); font-weight: 500; line-height: 1.08; }
.honoree-name small { margin-top: 1px; color: #264c73; font: 500 clamp(.92rem, 2.8vh, 1.18rem)/1.3 var(--serif); letter-spacing: .035em; }
.card-divider { width: 74%; height: 14px; display: grid; place-items: center; margin: 5px auto 2px; color: var(--gold); font-size: .78rem; }
.card-divider::before { position: absolute; width: 74%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,150,90,.68), transparent); content: ""; }
.card-divider span { position: relative; z-index: 1; padding: 0 9px; background: #fffdf8; }
.card-message { max-width: 275px; margin: 0 auto clamp(12px, 2.4vh, 22px); color: #637082; font: 400 clamp(.88rem, 2.4vh, 1rem)/1.45 var(--serif); }

.event-details { width: 100%; display: grid; grid-template-columns: 1.4fr .8fr; margin: 0 auto clamp(12px, 2.1vh, 19px); padding: 11px 4px; border-block: 1px solid rgba(164,177,190,.52); }
.detail-item { display: grid; align-content: center; gap: 4px; padding: 0 8px; }
.detail-item + .detail-item { border-left: 1px solid rgba(164,177,190,.55); }
.detail-label { color: var(--blue); font-size: .56rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.detail-item strong { color: var(--ink); font: 500 clamp(.76rem, 2.2vh, .9rem)/1.35 var(--serif); }
.venue-panel {
  width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px;
  padding: 10px 11px; border: 1px solid rgba(151,171,190,.55); border-radius: 6px;
  background: rgba(248,250,252,.84); text-align: left;
}
.venue-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(33,86,132,.22); border-radius: 50%; background: #edf3f8; }
.venue-icon svg { width: 17px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.venue-copy { display: grid; gap: 2px; min-width: 0; }
.venue-copy strong { color: var(--navy); font: 700 .75rem/1.25 var(--sans); letter-spacing: .025em; }
.venue-copy > span:last-child { color: var(--muted); font-size: .66rem; }
.map-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border: 1px solid rgba(30,76,120,.28); border-radius: 30px; background: #fff; color: var(--navy); font-size: .65rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.map-button:hover { background: #edf3f8; }
.arrival-note { display: grid; gap: 3px; margin: 11px 0; color: #5d6875; font: 400 .72rem/1.4 var(--serif); }
.arrival-note strong { color: #354d68; font-weight: 700; }
.whatsapp-button {
  width: 100%; min-height: 52px; display: flex; flex: none; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px; border: 1px solid #123e69; border-radius: 999px;
  background: linear-gradient(135deg, #15385f, #1b5a91); color: #fff; box-shadow: 0 6px 15px rgba(18,62,105,.19);
  font-size: .83rem; font-weight: 800; letter-spacing: .015em; text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.whatsapp-button:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(18,62,105,.24); }
.whatsapp-button svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.button-arrow { margin-left: auto; font-size: 1.1rem; font-weight: 400; }
.whatsapp-hint { max-width: 270px; margin: 6px auto 0; color: #728091; font-size: .62rem; line-height: 1.35; }
.card-footer { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 11px; }
.contact-link { color: #536477; font-size: .67rem; text-decoration: none; }
.contact-link strong { color: var(--navy); white-space: nowrap; }
.music-toggle { min-height: 42px; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(35,77,115,.3); border-radius: 30px; background: rgba(255,255,255,.92); color: var(--navy); cursor: pointer; font-size: .68rem; font-weight: 750; }
.music-toggle:hover, .music-toggle.is-playing { border-color: rgba(23,102,164,.7); background: #edf4f9; }
.music-icon { font-size: 1.02rem; line-height: 1; }

.envelope {
  position: absolute; z-index: 4; top: 50%; left: 50%; width: min(820px, 92vw, calc((100dvh - 20px) * .76)); height: min(92dvh, 1000px); transform: translate(-50%,-50%);
  overflow: hidden; padding: 0; border: 1px solid #aab9c8; border-radius: 11px;
  background: #fff; box-shadow: 0 24px 70px rgba(24,47,70,.22), 0 4px 16px rgba(24,47,70,.12);
  cursor: pointer; perspective: 1200px; transform-origin: 50% 50%;
  transition: opacity .7s ease .24s, transform 1s cubic-bezier(.2,.75,.22,1);
}
.envelope::after { position: absolute; z-index: 8; inset: 9px; border: 1px solid rgba(181,150,90,.67); border-radius: 5px; content: ""; pointer-events: none; }
.envelope-paper { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(214,227,238,.26), transparent 50%), linear-gradient(145deg,#fff,#f4f6f8 48%,#fff); }
.envelope-inner { position: absolute; inset: 0; background: linear-gradient(140deg, #e8edf2, #f9fafb 55%, #e7edf3); clip-path: polygon(0 0,100% 0,50% 51%); }
.envelope-wings::before, .envelope-wings::after { position: absolute; z-index: 2; top: 0; bottom: 0; width: 100%; background: linear-gradient(120deg, rgba(233,239,245,.94), rgba(255,255,255,.94)); content: ""; }
.envelope-wings::before { left: 0; clip-path: polygon(0 0,52% 50%,0 100%); }
.envelope-wings::after { right: 0; clip-path: polygon(100% 0,48% 50%,100% 100%); }
.envelope-front { position: absolute; z-index: 3; inset: 0; background: linear-gradient(145deg, #f9fafb, #dfe7ee 55%, #fafafa); clip-path: polygon(0 48%,50% 84%,100% 48%,100% 100%,0 100%); }
.envelope-front::after {
  position: absolute; inset: 0; content: "";
  background:
    linear-gradient(to bottom right, transparent 48.8%, rgba(181,150,90,.82) 50%, transparent 51.2%) left 48% / 50% 36% no-repeat,
    linear-gradient(to bottom left, transparent 48.8%, rgba(181,150,90,.82) 50%, transparent 51.2%) right 48% / 50% 36% no-repeat;
}
.envelope-flap { position: absolute; z-index: 5; inset: 0 0 auto; height: 55%; background: linear-gradient(135deg,#fdfdfd,#e4eaf0 52%,#fff); clip-path: polygon(0 0,100% 0,50% 78%); transform-origin: 50% 0; transition: transform .8s cubic-bezier(.3,.65,.2,1), opacity .6s ease; backface-visibility: hidden; }
.envelope-seal { position: absolute; z-index: 6; top: 45%; left: 50%; width: clamp(76px,18vw,94px); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%,-50%); border: 2px solid #d8c18c; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #4c79a5, #173d66 68%, #0e2c4c); color: #f8f2e6; box-shadow: 0 4px 12px rgba(20,48,75,.28), inset 0 0 0 4px rgba(237,225,195,.2); font: 1.5rem var(--serif); }
.envelope-caption { position: absolute; z-index: 6; right: 0; bottom: 16%; left: 0; color: #284966; font: italic 1.2rem var(--serif); letter-spacing: .02em; }
.envelope-hint { position: absolute; right: 0; bottom: 1.2%; left: 0; margin: 0; color: #435a71; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-shadow: 0 1px 0 #fff; }
.envelope:hover .envelope-seal { box-shadow: 0 0 0 8px rgba(181,150,90,.13), 0 4px 12px rgba(20,48,75,.28), inset 0 0 0 4px rgba(237,225,195,.2); }
.fullscreen-button { position: fixed; z-index: 10; top: max(13px, env(safe-area-inset-top)); right: max(13px, env(safe-area-inset-right)); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(65,93,120,.3); border-radius: 50%; background: rgba(255,255,255,.86); color: var(--navy); box-shadow: 0 3px 14px rgba(28,48,65,.12); cursor: pointer; }
.fullscreen-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.toast { position: fixed; z-index: 20; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); max-width: min(380px, calc(100% - 28px)); padding: 10px 14px; border: 1px solid #c8d2dc; border-radius: 8px; background: #fff; color: var(--ink); box-shadow: 0 8px 28px rgba(24,46,68,.14); font-size: .8rem; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

.scene.is-opening .envelope-flap { z-index: 2; transform: rotateX(180deg); }
.scene.is-opening .envelope { opacity: 0; transform: translate(-50%,-43%) scale(.95); pointer-events: none; }
.scene.is-open .invitation-card { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scene.is-open .envelope, .scene.is-open .envelope-hint { visibility: hidden; }

@media (min-width: 761px) {
  .card-border { inset: clamp(16px, 2.4vw, 44px); border-width: 1.5px; }
  .invitation-card-content { justify-content: center; padding: clamp(28px, 5vh, 64px) clamp(36px, 6vw, 92px); }
  .card-kicker { margin-bottom: 12px; font-size: clamp(.92rem, 1.65vh, 1.2rem); }
  .age-number { font-size: clamp(5rem, 13vh, 9rem); }
  .age-word { font-size: clamp(2rem, 4.7vh, 3.2rem); }
  .honoree-name { font-size: clamp(3.2rem, 8vh, 5.8rem); }
  .honoree-name small { margin-top: 5px; font-size: clamp(1.25rem, 2.8vh, 1.9rem); }
  .card-divider { height: 24px; margin: 12px auto 6px; font-size: 1rem; }
  .card-message { max-width: 680px; margin-bottom: clamp(20px, 3.5vh, 38px); font-size: clamp(1.2rem, 2.4vh, 1.65rem); }
  .event-details { width: min(920px, 100%); margin-bottom: clamp(20px, 3.5vh, 38px); padding: 18px 8px; }
  .detail-item { gap: 7px; padding: 0 18px; }
  .detail-label { font-size: .78rem; }
  .detail-item strong { font-size: clamp(1.05rem, 2.2vh, 1.35rem); }
  .venue-panel { width: min(920px, 100%); grid-template-columns: 48px 1fr auto; gap: 14px; padding: 16px 20px; }
  .venue-icon { width: 44px; height: 44px; }
  .venue-icon svg { width: 22px; }
  .venue-copy { gap: 4px; }
  .venue-copy strong { font-size: 1rem; }
  .venue-copy > span:last-child { font-size: .9rem; }
  .map-button { min-height: 44px; padding: 10px 16px; font-size: .85rem; }
  .arrival-note { gap: 5px; margin: 18px 0; font-size: .95rem; }
  .whatsapp-button { width: min(650px, 100%); min-height: 64px; padding: 14px 22px; font-size: 1rem; }
  .whatsapp-button svg { width: 25px; height: 25px; }
  .whatsapp-hint { max-width: 520px; margin-top: 9px; font-size: .78rem; }
  .card-footer { width: min(920px, 100%); padding-top: clamp(20px, 3vh, 32px); }
  .contact-link { font-size: .9rem; }
  .music-toggle { min-height: 46px; padding: 9px 16px; font-size: .83rem; }
}

@media (max-height: 700px) {
  .scene { width: 100vw; height: 100vh; height: 100svh; height: 100dvh; min-height: 0; }
  .invitation-card-content { padding: max(14px, env(safe-area-inset-top)) 18px max(12px, env(safe-area-inset-bottom)); }
  .card-kicker { font-size: .72rem; }
  .age-number { font-size: clamp(3rem, 10vh, 5rem); }
  .age-word { font-size: clamp(1.3rem, 4vh, 2rem); }
  .honoree-name { font-size: clamp(2rem, 6vh, 3.7rem); }
  .honoree-name small { font-size: clamp(.95rem, 2.5vh, 1.35rem); }
  .card-message { margin-bottom: 10px; }
  .event-details { margin-bottom: 9px; padding: 8px 3px; }
  .arrival-note { margin: 8px 0; }
  .card-footer { padding-top: 7px; }
  .whatsapp-button { min-height: 46px; }
  .envelope { width: min(760px, 92vw, calc((100dvh - 12px) * .76)); height: 94dvh; }
}
@media (max-width: 760px) {
  .card-border { inset: 8px; }
  .invitation-card-content {
    width: 100%; min-height: 100%; justify-content: flex-start;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }
  .card-kicker { margin-bottom: 3px; font-size: .66rem; letter-spacing: .16em; }
  .age-number { font-size: clamp(3.3rem, 13vw, 5rem); }
  .age-word { font-size: clamp(1.4rem, 6.2vw, 2.1rem); }
  .honoree-name { max-width: 100%; font-size: clamp(2rem, 7.8vw, 3rem); line-height: 1.04; }
  .honoree-name small { margin-top: 0; font-size: clamp(.95rem, 3.1vw, 1.15rem); }
  .card-divider { height: 11px; margin: 2px auto 1px; }
  .card-message { max-width: 36ch; margin-bottom: 10px; font-size: clamp(.9rem, 3vw, 1.08rem); line-height: 1.35; }
  .event-details { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); margin-bottom: 9px; padding: 8px 2px; }
  .detail-item { gap: 3px; padding-inline: 6px; }
  .detail-label { font-size: .6rem; }
  .detail-item strong { font-size: clamp(.72rem, 2.6vw, .86rem); line-height: 1.25; }
  .venue-panel { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
  .venue-icon { width: 28px; height: 28px; }
  .venue-copy strong { font-size: .78rem; }
  .venue-copy > span:last-child { font-size: .68rem; }
  .map-button { min-height: 42px; padding: 7px 9px; font-size: .66rem; }
  .arrival-note { gap: 2px; margin: 7px 0; font-size: .72rem; }
  .whatsapp-button { min-height: 49px; padding: 9px 13px; font-size: .82rem; }
  .whatsapp-button svg { width: 19px; height: 19px; }
  .whatsapp-hint { max-width: 35ch; margin-top: 4px; font-size: .62rem; line-height: 1.3; }
  .card-footer { margin-top: auto; padding-top: 8px; }
  .contact-link { font-size: .64rem; }
  .music-toggle { min-height: 40px; padding: 7px 10px; font-size: .64rem; }
}
@media (max-width: 370px) {
  .scene { width: 100vw; height: 100vh; height: 100svh; height: 100dvh; min-height: 0; }
  .invitation-card-content { padding: max(19px, env(safe-area-inset-top)) max(15px, env(safe-area-inset-right)) max(13px, env(safe-area-inset-bottom)) max(15px, env(safe-area-inset-left)); }
  .age-number { font-size: 3.35rem; }
  .honoree-name { max-width: 100%; font-size: clamp(1.95rem, 9vw, 2.1rem); }
  .event-details { grid-template-columns: 1.25fr .75fr; }
  .detail-item { padding: 0 5px; }
  .detail-item strong { font-size: .7rem; }
  .venue-panel { grid-template-columns: 27px 1fr auto; gap: 6px; padding: 8px 7px; }
  .venue-icon { width: 26px; height: 26px; }
  .map-button { min-height: 40px; padding: 6px 7px; font-size: .6rem; }
  .card-footer { align-items: flex-start; flex-direction: column; }
  .music-toggle { min-height: 42px; }
}
@media (max-width: 350px) {
  .venue-panel { grid-template-columns: 26px minmax(0, 1fr); }
  .map-button { grid-column: 2; justify-self: start; }
  .event-details { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.envelope { animation: envelope-breathe 4.6s ease-in-out infinite; }
.scene.is-opening .envelope { animation: none; }
.envelope-seal { animation: seal-glow 2.7s ease-in-out infinite; }
.scene.is-opening .envelope-seal { animation: none; }
.envelope-caption { animation: caption-glint 4.8s ease-in-out infinite; }
.scene.is-open .card-border { animation: border-glow 4.8s ease-in-out infinite; }
.scene.is-open .card-kicker { animation: content-arrive .58s cubic-bezier(.2,.78,.2,1) .08s both; }
.scene.is-open .age-lockup { animation: content-arrive .62s cubic-bezier(.2,.78,.2,1) .16s both; }
.scene.is-open .honoree-name { animation: content-arrive .64s cubic-bezier(.2,.78,.2,1) .25s both; }
.scene.is-open .card-divider { animation: content-arrive .55s cubic-bezier(.2,.78,.2,1) .34s both; }
.scene.is-open .card-message { animation: content-arrive .62s cubic-bezier(.2,.78,.2,1) .42s both; }
.scene.is-open .event-details { animation: content-arrive .62s cubic-bezier(.2,.78,.2,1) .52s both; }
.scene.is-open .venue-panel { animation: content-arrive .62s cubic-bezier(.2,.78,.2,1) .62s both; }
.scene.is-open .arrival-note { animation: content-arrive .56s cubic-bezier(.2,.78,.2,1) .72s both; }
.scene.is-open .whatsapp-button { animation: content-arrive .62s cubic-bezier(.2,.78,.2,1) .82s both, cta-glow 3.8s ease-in-out 1.7s infinite; }
.scene.is-open .whatsapp-button::before { animation: cta-sheen 2.8s ease-out 1.5s 1; }
.scene.is-open .whatsapp-hint { animation: content-arrive .56s cubic-bezier(.2,.78,.2,1) .92s both; }
.scene.is-open .card-footer { animation: content-arrive .62s cubic-bezier(.2,.78,.2,1) 1s both; }
.scene.is-open .age-number { background-size: 180% 100%; animation: silver-shimmer 4.8s ease-in-out 1.7s infinite; }
.scene.is-open .card-divider span { animation: sparkle-twinkle 2.8s ease-in-out 1.2s infinite; }
.scene.is-open .venue-icon { animation: pin-pulse 3.2s ease-in-out 1.4s infinite; }
.scene.is-open .map-button::after { animation: cta-sheen 2.2s ease-out 1.25s 1; }
.map-button { position: relative; overflow: hidden; }
.map-button::after, .whatsapp-button::before { position: absolute; inset: -40% auto -40% -70%; width: 42%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); content: ""; pointer-events: none; transform: translateX(-150%) skewX(-18deg); }
.whatsapp-button { position: relative; overflow: hidden; }
.music-toggle.is-playing .music-icon { display: inline-block; animation: music-dance .58s ease-in-out infinite alternate; }
.confetti-burst { position: absolute; z-index: 9; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-burst span { position: absolute; top: 50%; left: 50%; display: block; border-radius: 2px; opacity: 0; animation: confetti-scatter 1.45s cubic-bezier(.14,.68,.22,1) var(--delay, 0ms) forwards; }
@keyframes content-arrive { 0% { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(3px); } 72% { opacity: 1; transform: translateY(-2px) scale(1.006); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: none; } }
@keyframes balloon-drift { 0%,100% { transform: translate3d(0,0,0) rotate(-1.8deg); } 50% { transform: translate3d(5px,-13px,0) rotate(2.2deg); } }
@keyframes sparkle-twinkle { 0%,100% { opacity: .38; transform: scale(.72) rotate(-8deg); } 50% { opacity: 1; transform: scale(1.1) rotate(12deg); } }
@keyframes envelope-breathe { 0%,100% { box-shadow: 0 24px 70px rgba(24,47,70,.22), 0 4px 16px rgba(24,47,70,.12); } 50% { box-shadow: 0 30px 78px rgba(24,47,70,.29), 0 7px 22px rgba(24,47,70,.17); } }
@keyframes seal-glow { 0%,100% { box-shadow: 0 4px 12px rgba(20,48,75,.28), inset 0 0 0 4px rgba(237,225,195,.2); } 50% { box-shadow: 0 0 0 8px rgba(181,150,90,.14), 0 7px 18px rgba(20,48,75,.32), inset 0 0 0 4px rgba(237,225,195,.26); } }
@keyframes caption-glint { 0%,72%,100% { text-shadow: 0 1px 0 #fff; } 38% { text-shadow: 0 0 14px rgba(181,150,90,.58), 0 1px 0 #fff; } }
@keyframes border-glow { 0%,100% { border-color: rgba(186,165,121,.45); } 50% { border-color: rgba(181,150,90,.78); box-shadow: 0 0 18px rgba(181,150,90,.09); } }
@keyframes cta-glow { 0%,100% { box-shadow: 0 6px 15px rgba(18,62,105,.19); } 50% { box-shadow: 0 8px 23px rgba(18,62,105,.31), 0 0 0 5px rgba(23,102,164,.07); } }
@keyframes cta-sheen { 0% { transform: translateX(-150%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes music-dance { from { transform: translateY(2px) rotate(-12deg) scale(.94); } to { transform: translateY(-2px) rotate(12deg) scale(1.1); } }
@keyframes silver-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pin-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(23,102,164,0); } 50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(23,102,164,.08); } }
@keyframes confetti-scatter { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--move-x)),calc(-50% + var(--move-y))) scale(1) rotate(var(--turn)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}