/* ========================================
   effects.css — Keyframes, split de palabras, estados de animación
   ======================================== */

/* ---------- Split de palabras (GSAP anima .wi) ----------
   Estado por defecto: texto visible. Solo cuando Effects
   parte el texto (.is-split) hay máscara por palabra. */
[data-split] .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

[data-split] .wi {
    display: inline-block;
    will-change: transform;
}

/* ---------- Parallax ---------- */
[data-parallax] { will-change: transform; }

/* ---------- Keyframes ---------- */
@keyframes scroll-hint {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

@keyframes bubble-rise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 0.6; }
    100% { transform: translateY(-105vh) scale(1.4); opacity: 0; }
}

@keyframes birreta-glow {
    0%, 100% { box-shadow: 0 0 30px rgba(232, 176, 75, 0.35); }
    50%      { box-shadow: 0 0 55px rgba(232, 176, 75, 0.6); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.floating { animation: float 6s ease-in-out infinite; }

/* ---------- Mascota: furgoneta groga ---------- */
#mascot {
    position: fixed;
    left: 0;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    width: 92px;
    z-index: 500;
    pointer-events: none;
    display: none;
    will-change: transform;
}

/* solo se muestra cuando la capa de efectos está activa (hay GSAP y no reduced-motion) */
html.mascot-on #mascot { display: block; }

#mascot svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12)); }
#mascot .mascot-shadow { fill: rgba(0,0,0,0.14); }

.mascot-inner {
    transform-origin: bottom center;
    animation: mascot-hop 1.1s cubic-bezier(0.3, 0, 0.4, 1) infinite;
}

.mascot-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascot-roll 0.55s linear infinite;
}

@keyframes mascot-roll { to { transform: rotate(360deg); } }

@keyframes mascot-hop {
    0%, 100% { transform: translateY(0) rotate(-0.6deg); }
    45%      { transform: translateY(-7px) rotate(0.6deg); }
    60%      { transform: translateY(-7px) rotate(0.6deg); }
}

@media (max-width: 600px) { #mascot { width: 62px; } }

@media (prefers-reduced-motion: reduce) {
    #mascot { display: none !important; }
}

/* ---------- Movimiento reducido / sin GSAP ---------- */
html.fx-off .manifesto-text.is-split .mw { opacity: 1 !important; }
html.fx-off .scroll-hint,
html.fx-off .birreta-bubbles { display: none; }
html.fx-off .floating,
html.fx-off .birreta-logo { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .scroll-hint span, .birreta-bubbles span, .birreta-logo, .floating {
        animation: none !important;
    }

    .birreta-bubbles { display: none; }
}