/* ==========================================================================
   TAB Animation Toolkit — child-theme deployment (hardened)
   Reference + docs: docs/animations-framework.md
   Engine: js/animations.js (IntersectionObserver scroll reveals)

   Hardening vs. the source reference:
   - Base hidden state is scoped to `body.bricks-is-frontend`, so content is
     NEVER hidden inside the Bricks builder canvas (which lacks that class) —
     editing stays normal.
   - No-JS safety: a <noscript> reveal-all rule is printed in <head> (see the
     child theme functions.php), plus a JS-load failsafe — if JS is disabled or
     animations.js fails to load, all content is shown.
   - ⚠️ Remove-Unused-CSS (Perfmatters/cache plugins) MUST exclude this file:
     `.anim-visible` is added at runtime by JS, so RUCSS treats these rules as
     unused and would strip them → permanently hidden content.
   ========================================================================== */

/* Base animation states — frontend only */
body.bricks-is-frontend :is(
    .anim-fade-up, .anim-fade-in, .anim-fade-down,
    .anim-slide-left, .anim-slide-right,
    .anim-scale-in, .anim-scale-up, .anim-blur-in
) {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(0.25, .46, .45, .94);
    will-change: opacity, transform;
}

/* Individual animation transforms — frontend only */
body.bricks-is-frontend .anim-fade-up     { transform: translateY(28px); }
body.bricks-is-frontend .anim-fade-in     { transform: none; }
body.bricks-is-frontend .anim-fade-down   { transform: translateY(-28px); }
body.bricks-is-frontend .anim-slide-left  { transform: translateX(40px); }
body.bricks-is-frontend .anim-slide-right { transform: translateX(-40px); }
body.bricks-is-frontend .anim-scale-in    { transform: scale(0.92); }
body.bricks-is-frontend .anim-scale-up    { transform: scale(0.8); }
body.bricks-is-frontend .anim-blur-in     { transform: translateY(12px); filter: blur(8px); }

/* Visible states — prefixed to stay above the gated base in specificity */
body.bricks-is-frontend .anim-fade-up.anim-visible,
body.bricks-is-frontend .anim-fade-down.anim-visible,
body.bricks-is-frontend .anim-slide-left.anim-visible,
body.bricks-is-frontend .anim-slide-right.anim-visible {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

body.bricks-is-frontend .anim-fade-in.anim-visible {
    opacity: 1;
}

body.bricks-is-frontend .anim-scale-in.anim-visible,
body.bricks-is-frontend .anim-scale-up.anim-visible {
    opacity: 1;
    transform: scale(1);
}

body.bricks-is-frontend .anim-blur-in.anim-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ---------- Stagger Delays ---------- */

/* Normal stagger (80ms intervals) */
.anim-stagger > :nth-child(1)  { transition-delay: 0ms; }
.anim-stagger > :nth-child(2)  { transition-delay: 80ms; }
.anim-stagger > :nth-child(3)  { transition-delay: 160ms; }
.anim-stagger > :nth-child(4)  { transition-delay: 240ms; }
.anim-stagger > :nth-child(5)  { transition-delay: 320ms; }
.anim-stagger > :nth-child(6)  { transition-delay: 400ms; }
.anim-stagger > :nth-child(7)  { transition-delay: 480ms; }
.anim-stagger > :nth-child(8)  { transition-delay: 560ms; }
.anim-stagger > :nth-child(9)  { transition-delay: 640ms; }
.anim-stagger > :nth-child(10) { transition-delay: 720ms; }
.anim-stagger > :nth-child(11) { transition-delay: 800ms; }
.anim-stagger > :nth-child(12) { transition-delay: 880ms; }

/* Tight stagger (50ms intervals) */
.anim-stagger-tight > :nth-child(1)  { transition-delay: 0ms; }
.anim-stagger-tight > :nth-child(2)  { transition-delay: 50ms; }
.anim-stagger-tight > :nth-child(3)  { transition-delay: 100ms; }
.anim-stagger-tight > :nth-child(4)  { transition-delay: 150ms; }
.anim-stagger-tight > :nth-child(5)  { transition-delay: 200ms; }
.anim-stagger-tight > :nth-child(6)  { transition-delay: 250ms; }
.anim-stagger-tight > :nth-child(7)  { transition-delay: 300ms; }
.anim-stagger-tight > :nth-child(8)  { transition-delay: 350ms; }
.anim-stagger-tight > :nth-child(9)  { transition-delay: 400ms; }
.anim-stagger-tight > :nth-child(10) { transition-delay: 450ms; }
.anim-stagger-tight > :nth-child(11) { transition-delay: 500ms; }
.anim-stagger-tight > :nth-child(12) { transition-delay: 550ms; }

/* Wide stagger (120ms intervals) */
.anim-stagger-wide > :nth-child(1)  { transition-delay: 0ms; }
.anim-stagger-wide > :nth-child(2)  { transition-delay: 120ms; }
.anim-stagger-wide > :nth-child(3)  { transition-delay: 240ms; }
.anim-stagger-wide > :nth-child(4)  { transition-delay: 360ms; }
.anim-stagger-wide > :nth-child(5)  { transition-delay: 480ms; }
.anim-stagger-wide > :nth-child(6)  { transition-delay: 600ms; }
.anim-stagger-wide > :nth-child(7)  { transition-delay: 720ms; }
.anim-stagger-wide > :nth-child(8)  { transition-delay: 840ms; }
.anim-stagger-wide > :nth-child(9)  { transition-delay: 960ms; }
.anim-stagger-wide > :nth-child(10) { transition-delay: 1080ms; }
.anim-stagger-wide > :nth-child(11) { transition-delay: 1200ms; }
.anim-stagger-wide > :nth-child(12) { transition-delay: 1320ms; }

/* ---------- Duration Modifiers ---------- */
.anim-fast { transition-duration: .3s !important; }
.anim-slow { transition-duration: .8s !important; }

/* ---------- Delay Modifiers ---------- */
.anim-delay-1 { transition-delay: 100ms !important; }
.anim-delay-2 { transition-delay: 200ms !important; }
.anim-delay-3 { transition-delay: 300ms !important; }
.anim-delay-4 { transition-delay: 400ms !important; }
.anim-delay-5 { transition-delay: 500ms !important; }

/* ---------- Easing Modifiers ---------- */
.anim-ease-spring { transition-timing-function: cubic-bezier(0.34, 1.56, .64, 1) !important; }
.anim-ease-bounce { transition-timing-function: cubic-bezier(0.68, -.55, .27, 1.55) !important; }
.anim-ease-smooth { transition-timing-function: cubic-bezier(0.16, 1, .3, 1) !important; }

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.bricks-is-frontend :is(
        .anim-fade-up, .anim-fade-in, .anim-fade-down,
        .anim-slide-left, .anim-slide-right,
        .anim-scale-in, .anim-scale-up, .anim-blur-in
    ) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .anim-stagger > *,
    .anim-stagger-tight > *,
    .anim-stagger-wide > * {
        transition-delay: 0ms !important;
    }
}
