/* ==========================================================================
   Mi Invitación · sonido y animaciones de las invitaciones
   ========================================================================== */

/* Botón de sonido (silenciar / activar música) */
.sound-btn { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 400; display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; height: 48px; padding: 0 1rem 0 .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .72rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .35); }
.sound-btn:hover { transform: translateY(-1px); }
.has-intro:not(.opened) .sound-btn { opacity: 0; pointer-events: none; }
.sound-btn .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-btn .eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.sound-btn .eq i:nth-child(2) { animation-delay: -.3s; }
.sound-btn .eq i:nth-child(3) { animation-delay: -.6s; }
.sound-btn .eq i:nth-child(4) { animation-delay: -.15s; }
.sound-btn .sound-off { display: none; color: var(--muted); }
.sound-btn.is-muted .eq { display: none; }
.sound-btn.is-muted .sound-off { display: inline-flex; }
.sound-btn.is-muted .sound-label { color: var(--muted); }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.sound-hint { position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 52px); right: 14px; z-index: 130; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: .78rem; box-shadow: var(--shadow); cursor: pointer; animation: hint-in .5s ease both; }
.sound-hint[hidden] { display: none; }
@keyframes hint-in { from { opacity: 0; transform: translateY(-6px); } }

/* Partículas por encima de la invitación, también en el celular */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.particles.is-stage { position: fixed; z-index: 36; width: 100%; height: 100%; height: 100dvh; }
.particles.is-stage[data-type="ramitas"] { z-index: 6; }
.editorial, .poster, .play { position: relative; z-index: auto; }
.poster-bg, .ed-media, .play-wave { z-index: 1; }
.hero .ticker, .ed-text, .poster > :not(.poster-bg), .play > :not(.play-wave) { position: relative; z-index: 3; }
.decor { z-index: 2; }
.particles :is(i, .bug, .petal, .bloom) { position: absolute; top: var(--y, 8%); left: var(--x, 8%); width: var(--s); height: var(--s); opacity: 1; -webkit-backface-visibility: hidden; animation: fall var(--d, 10s) linear var(--delay, 0s) infinite; }
.particles .bug, .fx-sky .bug { width: var(--s, 52px); height: auto; animation-name: flutter; animation-timing-function: ease-in-out; }
.particles .petal, .fx-sky .petal { width: var(--s, 28px); height: auto; }
.particles[data-type="petal"] i { height: calc(var(--s) * .72); background: #f3b6c4; background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 55%, #fff)); border-radius: 80% 0 80% 0; }
.particles[data-type="confetti"] i { width: calc(var(--s) * .55); height: var(--s); border-radius: 2px; background: var(--c, #e45d78); }
.particles[data-type="bubble"] i { border-radius: 50%; border: 1.5px solid var(--accent, #fff); background: rgba(255, 255, 255, .35); animation-name: rise-up; }
.particles[data-type="spark"] i { width: calc(var(--s) * .35); height: calc(var(--s) * .35); border-radius: 50%; background: var(--accent-2, #f3d7a1); box-shadow: 0 0 10px 2px rgba(243, 215, 161, .7); animation-name: twinkle; animation-timing-function: ease-in-out; }
.particles i.is-glyph { width: auto; height: auto; background: none; font-size: var(--s); line-height: 1; font-style: normal; }
.particles i.is-glyph::before { content: none; }
.bug-svg, .petal-svg, .twig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bug-svg .wing { transform-box: fill-box; transform-origin: 100% 50%; animation: flap .42s ease-in-out infinite; }
.bug-svg .wing.right { transform-origin: 0% 50%; }
.bug-svg .wing path { fill: var(--c, #7ec8e3); }
.bug-svg .wing-soft { fill: #fff; opacity: .55; }
.bug-svg ellipse, .bug-svg circle { fill: #2c261f; }
.petal-svg path { fill: currentColor; }
.petal-svg .petal-vein { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; }
.petal-svg .petal-soft { fill: #fff; opacity: .42; }
.petal-svg { animation: petal-tumble var(--spin, 3.2s) ease-in-out infinite; transform-origin: 50% 30%; }
.particles .petal, .fx-sky .petal { animation-name: petal-fall; animation-timing-function: ease-in-out; filter: drop-shadow(0 6px 6px rgba(80, 30, 40, .18)); }
.particles .bloom, .fx-sky .bloom { width: var(--s, 46px); height: auto; animation-name: bloom-fall; animation-timing-function: ease-in-out; }
.bloom-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 8px rgba(40, 20, 10, .16)); }
.bloom-svg .bloom-head { transform-box: fill-box; transform-origin: 50% 50%; animation: bloom-turn 9s linear infinite; }
.bloom-svg .bloom-petal { fill: currentColor; }
.bloom-svg .bloom-heart { fill: #f3d7a1; }
.twig { position: absolute; top: var(--y, 8%); width: var(--s, 120px); pointer-events: none; animation: twig-left 2.2s ease-out both; }
.twig.edge-l { left: 0; }
.twig.edge-r { right: 0; left: auto; animation-name: twig-right; }
.twig-svg .stem { fill: none; stroke: #5d7a50; stroke-width: 4; stroke-linecap: round; }
.twig-svg .leaves { fill: #7ea36a; }
.twig-svg .blooms { fill: #e45d78; }
.twig-svg { transform-origin: 18% 100%; animation: twig-sway 3.6s ease-in-out 2s infinite; }
.twig.edge-r .twig-svg { transform-origin: 82% 100%; animation-name: twig-sway-r; }
@keyframes fall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; } 85% { opacity: .9; } 100% { transform: translate3d(var(--drift, 20px), 70vh, 0) rotate(var(--rot, 80deg)); opacity: .15; } }
@keyframes flutter {
    0% { transform: translate3d(0, 0, 0) rotate(-8deg); opacity: 1; }
    30% { transform: translate3d(14vw, -16vh, 0) rotate(10deg); }
    60% { transform: translate3d(-10vw, -34vh, 0) rotate(-6deg); }
    100% { transform: translate3d(8vw, -62vh, 0) rotate(8deg); opacity: .2; }
}
@keyframes flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.16); } }
@keyframes petal-tumble {
    0% { transform: rotateZ(0deg) rotateX(8deg) rotateY(0deg); }
    50% { transform: rotateZ(18deg) rotateX(62deg) rotateY(24deg); }
    100% { transform: rotateZ(-12deg) rotateX(8deg) rotateY(-18deg); }
}
@keyframes petal-fall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.86); opacity: 0; }
    14% { opacity: .95; }
    38% { transform: translate3d(calc(var(--drift, 24px) * .7), 30vh, 0) rotate(70deg) scale(1); }
    68% { transform: translate3d(calc(var(--drift, 24px) * -.35), 58vh, 0) rotate(160deg) scale(.92); }
    100% { transform: translate3d(var(--drift, 24px), 96vh, 0) rotate(280deg) scale(.8); opacity: 0; }
}
@keyframes bloom-fall {
    0% { transform: translate3d(0, -10vh, 0) rotate(-8deg); opacity: 0; }
    16% { opacity: 1; }
    45% { transform: translate3d(calc(var(--drift, 18px) * .5), 28vh, 0) rotate(10deg); }
    100% { transform: translate3d(var(--drift, 18px), 92vh, 0) rotate(-16deg); opacity: 0; }
}
@keyframes bloom-turn { to { transform: rotate(360deg); } }
@keyframes twig-left { from { transform: translate3d(-120%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes twig-right { from { transform: translate3d(120%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes twig-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }
@keyframes twig-sway-r { 0%, 100% { transform: scaleX(-1) rotate(0deg); } 50% { transform: scaleX(-1) rotate(5deg); } }
@keyframes rise-up { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(var(--drift, 16px), -70vh, 0); opacity: .2; } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.55); } 50% { opacity: 1; transform: scale(1); } }

/* Foto de portada: se revela como un telón y se acerca suavemente */
.ed-media { overflow: hidden; border-radius: var(--media-radius); }
.theme-olivo .ed-media { overflow: visible; }
.ed-media img, .ed-mono { animation: unveil 1.6s cubic-bezier(.77, 0, .18, 1) .2s both, kenburns 14s ease-out .2s both; }
.poster-bg { animation: kenburns 16s ease-out both; }
@keyframes unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kenburns { from { scale: 1.12; } to { scale: 1; } }

/* Elementos de la portada en secuencia */
.hero .kicker, .ed-date, .poster-date, .poster-foot, .play-date { animation: fade-up 1s cubic-bezier(.2, .7, .2, 1) both; }
.hero .kicker { animation-delay: .1s; }
.poster-date { animation-delay: .25s; }
.ed-date, .poster-foot, .play-date { animation-delay: .55s; }
.play-badge { animation: fade-up 1s cubic-bezier(.2, .7, .2, 1) .25s both, morph 9s ease-in-out 1.2s infinite; }
.theme-heroes .play-badge, .theme-pixel .play-badge, .theme-osito .play-badge { animation: fade-up 1s cubic-bezier(.2, .7, .2, 1) .25s both, wobble 4s ease-in-out 1.3s infinite; }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }

/* Mientras la cortina está cerrada, todo espera */
.has-intro:not(.opened) :is(.ed-media img, .ed-mono, .poster-bg, .hero .kicker, .ed-date, .poster-date, .poster-foot, .play-badge, .play-date) { animation-play-state: paused; }

/* Líneas de los títulos que se dibujan */
.sec-head { position: relative; border-bottom-color: transparent; }
.sec-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .25s; }
.sec-head.in::after { transform: scaleX(1); }
.style-kids .sec-head::after { display: none; }

/* Cascada: cada elemento aparece un poco después del anterior (retardo asignado por JS) */
.reveal { transition-delay: var(--stagger, 0ms); }

/* Contador: los números "saltan" al cambiar */
.countdown strong.tick { animation: tick .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes tick { from { transform: translateY(-35%); opacity: .2; } }

/* Brillo que recorre el pase de acceso */
.ticket::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); transform: translateX(-120%); animation: shine 5s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Botón "Confirmar" del dock con pulso suave */
.dock .dock-cta { position: relative; }
.dock .dock-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; animation: pulse-ring 2.6s ease-out infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }

/* Tarjetas que se elevan al pasar el cursor */
.tile, .agenda li { transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
@media (hover: hover) {
    .tile.in:hover, .agenda li.in:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .45); transition-delay: 0ms; }
    .agenda-linea li.in:hover, .agenda-iconos li.in:hover, .agenda-lista li.in:hover, .agenda-tabla li.in:hover, .agenda-editorial li.in:hover, .agenda-pasos li.in:hover { transform: none; box-shadow: none; }
}

/* Nombres del cierre que "laten" */
.closing-names.in { animation: heartbeat 3s ease-in-out 1.2s infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.03); } 16% { transform: scale(1); } 24% { transform: scale(1.02); } 32% { transform: scale(1); } }

/* Miniaturas y editor: sin animaciones */
.is-embed :is(.ed-media img, .ed-mono, .poster-bg, .hero .kicker, .ed-date, .poster-date, .poster-foot, .play-badge, .play-date) { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .ticket::after, .dock .dock-cta::after { display: none; }
    .sound-btn .eq i { animation: none; }
    :is(.ed-media img, .ed-mono, .poster-bg, .hero .kicker, .ed-date, .poster-date, .poster-foot, .play-badge, .play-date, .closing-names) { animation: none !important; }
    .sec-head::after { transform: none; transition: none; }
}

/* Ambiente: vuelo, chispitas, brillo y foto que se desplaza */
.fx-sky { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; pointer-events: none; z-index: 36; }
.fx-sky.kind-twig { z-index: 6; }
.fx-sky > * { position: absolute; line-height: 1; animation: fx-flight var(--dur, 11s) linear var(--delay, 0s) infinite; -webkit-backface-visibility: hidden; }
.fx-sky.kind-bug > .bug { animation-name: flutter; animation-timing-function: ease-in-out; }
.fx-sky.kind-rose > .petal { animation-name: petal-fall; }
.fx-sky.kind-bloom > .bloom { animation-name: bloom-fall; animation-timing-function: ease-in-out; }
.fx-sky.kind-heart > i { font-size: var(--s, 32px); font-style: normal; }
.fx-sky.kind-twig > .twig { animation: twig-left 2.2s ease-out both; }
.fx-sky.kind-twig > .twig.edge-r { animation-name: twig-right; }
.fx-sparks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.fx-burst { position: fixed; z-index: 40; width: 0; height: 0; pointer-events: none; }
.fx-burst i { position: absolute; left: 0; top: 0; font-style: normal; font-size: 1.35rem; animation: fx-pop 1.15s ease-out forwards; }
.with-motion:is([data-fx="parallax"], [data-fx="gala"]) :is(.ed-media, .poster-bg) { overflow: hidden; }
.with-motion:is([data-fx="parallax"], [data-fx="gala"]) :is(.ed-media img, .poster-bg) { scale: 1.16; }
.with-motion:is([data-fx="resplandor"], [data-fx="gala"]) :is(.btn-inv, .dock-cta) { position: relative; overflow: hidden; animation: fx-glow 3s ease-in-out infinite; }
.with-motion:is([data-fx="resplandor"], [data-fx="gala"]) :is(.btn-inv, .dock-cta)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%); transform: translateX(-130%); animation: fx-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes fx-flight {
    0% { transform: translate3d(0, 0, 0) rotate(-12deg); opacity: .95; }
    50% { transform: translate3d(10vw, -24vh, 0) rotate(14deg); opacity: 1; }
    100% { transform: translate3d(-6vw, -62vh, 0) rotate(-8deg); opacity: 0; }
}
@keyframes fx-pop { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
@keyframes fx-glow { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 18%, transparent); } }
@keyframes fx-shine { 0%, 55% { transform: translateX(-130%); } 78%, 100% { transform: translateX(130%); } }
.is-embed:not(.with-motion) :is(.fx-sky, .fx-sparks) { display: none; }