/* ============================================================
   ANIMATIONS — keyframes globales y clases de scroll-reveal
   ============================================================ */

/* ---------- Keyframes ---------- */

/* Marquee lateral (vertical) y de pie (horizontal) */
@keyframes scrollVertical {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hero: la estatua aparece subiendo */
@keyframes sacred-rise {
    to { opacity: 1; transform: scale(1); }
}

/* Hero: halo rotando */
@keyframes rotate-halo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Fade-in genérico para meta-header/footer del hero */
@keyframes fade-in {
    to { opacity: 1; }
}

/* Stickers: aparición con rebote */
@keyframes sticker-pop {
    from { opacity: 0; transform: scale(0)   rotate(20deg); }
    to   { opacity: 1; transform: scale(1)   rotate(var(--rotate, 0deg)); }
}

/* Floating sticker: levitación suave */
@keyframes float {
    0%, 100% { transform: rotate(-10deg) translateY(0); }
    50%      { transform: rotate(-10deg) translateY(-10px); }
}

/* Flecha mobile rebotando */
@keyframes bounce-arrow {
    0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 1; }
    50%      { transform: rotate(45deg) translateY(5px); opacity: 0.4; }
}

/* "A.I." de fondo: pulso suave */
@keyframes pulse {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.5; }
}

/* Salida de la intro */
@keyframes introOut {
    0%   { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

/* Intro: cada palabra entra y sale */
@keyframes wordIn {
    0%   { opacity: 0; transform: translateY(50px)  scale(0.95); }
    25%  { opacity: 1; transform: translateY(0)     scale(1); }
    75%  { opacity: 1; transform: translateY(0)     scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.98); }
}

/* Intro: palabra final (PAULA) con anticipación */
@keyframes wordFinal {
    0%   { opacity: 0; transform: translateY(100px) scale(0.7); }
    20%  { opacity: 1; transform: translateY(-10px) scale(1.15); }
    35%  { transform: translateY(0) scale(1); }
    60%  { transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* Cursor parpadeante de la primera palabra (typewriter) */
@keyframes cursorBlink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Underline barriendo bajo el "PAULA" final */
@keyframes underlineSweep {
    0%   { width: 0; }
    100% { width: 50%; }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-30px); }
}

/* ---------- Estilos de la palabra de la intro ---------- */
.intro-word {
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(3rem, 15vw, 12rem);
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    text-align: center;
    color: var(--cream);
}

.intro-word.show   { animation: wordIn var(--duration) ease forwards; }
.intro-word.accent { color: var(--acid-green); text-shadow: 4px 4px 0 var(--intense-red); }

.intro-word.final {
    animation: wordFinal 2.2s ease-in forwards;
    color: var(--acid-green);
    text-shadow: 6px 6px 0 var(--intense-red);
    font-size: 35vw;
    line-height: 0.8;
}

.intro-word.final::after {
    content: '';
    position: absolute;
    bottom: -0.1em;
    left: 50%;
    width: 0;
    height: 4px;
    background: var(--intense-red);
    transform: translateX(-50%);
    animation: underlineSweep 0.5s ease-out forwards 0.9s;
}

/* Estado mientras "tipea" la primera palabra */
.intro-word.typing {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: none;
}

.intro-word.typing::after {
    content: '|';
    color: var(--intense-red);
    animation: cursorBlink 0.5s step-end infinite;
    margin-left: 8px;
}

.intro-word.fade-out { animation: fadeOut 0.3s ease forwards; }

/* Variantes de fuente que rotan durante la intro */
.intro-word.mono      { font-family: var(--font-mono);   letter-spacing: -0.05em; }
.intro-word.serif     { font-family: var(--font-serif);  font-style: italic; letter-spacing: 0; }
.intro-word.condensed { font-family: var(--font-display); letter-spacing: 0.05em; }

/* ---------- Scroll reveal ---------- */
/* Estado base: oculto desplazado */
.scroll-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Variante: entra desde la izquierda */
.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-left.revealed { opacity: 1; transform: translateX(0); }

/* Variante: entra desde la derecha */
.scroll-reveal-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* Variante: zoom-in */
.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* Stagger: retardo creciente para grids */
.scroll-reveal-stagger:nth-child(1) { transition-delay: 0s; }
.scroll-reveal-stagger:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal-stagger:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal-stagger:nth-child(4) { transition-delay: 0.3s; }
.scroll-reveal-stagger:nth-child(5) { transition-delay: 0.4s; }
.scroll-reveal-stagger:nth-child(6) { transition-delay: 0.5s; }

/* Si el usuario pide reducir movimiento, desactivamos animaciones de scroll */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}