/* ═══════════════════════════════════════════════════════════
   PRAYAG PANDITS — SHARED ANIMATION SYSTEM (v3)

   Elements with .ppn-reveal start hidden via CSS.
   JS body class .ppn-anim-ready enables animations.
   <noscript> tag adds .ppn-no-js to show everything if JS fails.

   Skills: elite-css-animations, elite-accessibility, elite-performance
   ═══════════════════════════════════════════════════════════ */

/* ═══ HIDE ELEMENTS ONLY WHEN JS IS READY ═══
   The inline script in ppn-base.php adds .ppn-anim-ready to <html>
   immediately (before paint). This ensures:
   - Elements hidden before first paint (no flash)
   - If JS fails, no .ppn-anim-ready = everything visible */

@media (prefers-reduced-motion: no-preference) {
    html.ppn-anim-ready .ppn-reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.65s cubic-bezier(0, 0, 0.2, 1),
                    transform 0.65s cubic-bezier(0, 0, 0.2, 1);
    }
    html.ppn-anim-ready .ppn-reveal-left {
        opacity: 0;
        transform: translateX(-28px);
        transition: opacity 0.65s cubic-bezier(0, 0, 0.2, 1),
                    transform 0.65s cubic-bezier(0, 0, 0.2, 1);
    }
    html.ppn-anim-ready .ppn-reveal-scale {
        opacity: 0;
        transform: scale(0.94);
        transition: opacity 0.65s cubic-bezier(0, 0, 0.2, 1),
                    transform 0.65s cubic-bezier(0, 0, 0.2, 1);
    }

    /* Visible state — observer adds this */
    html.ppn-anim-ready .ppn-reveal.ppn-visible,
    html.ppn-anim-ready .ppn-reveal-left.ppn-visible,
    html.ppn-anim-ready .ppn-reveal-scale.ppn-visible {
        opacity: 1;
        transform: none;
    }

    /* Stagger delays */
    html.ppn-anim-ready [data-delay="1"] { transition-delay: 0.1s; }
    html.ppn-anim-ready [data-delay="2"] { transition-delay: 0.2s; }
    html.ppn-anim-ready [data-delay="3"] { transition-delay: 0.3s; }
    html.ppn-anim-ready [data-delay="4"] { transition-delay: 0.4s; }
    html.ppn-anim-ready [data-delay="5"] { transition-delay: 0.5s; }
}

/* ═══ HOVER LIFT ═══ */
.ppn-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0, 0, 0.2, 1);
}
.ppn-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(123, 31, 46, 0.06);
}
.ppn-lift:active { transform: translateY(-2px); }

/* ═══ BUTTON GLOW ═══ */
.ppn-btn-glow {
    position: relative;
    overflow: hidden;
}
.ppn-btn-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}
.ppn-btn-glow:hover::after { opacity: 1; }

/* ═══ FOCUS RING ═══ */
.ppn-focus-ring:focus-visible {
    outline: 2px solid var(--ppn-saffron);
    outline-offset: 3px;
}