/* ==========================================================================
   Gulf Publications — Animation support
   --------------------------------------------------------------------------
   Two jobs only:

     1. Fade out the animated elements for the moment between first paint and
        GSAP taking over, so nothing flashes in at full opacity and then jumps
        back to hidden. Everything here is scoped to `html.gp-anim`, a class
        stamped on by functions.php and removed by assets/js/theme-animations.js
        once GSAP has written its own inline `opacity: 0` — or by the failsafe
        timer if GSAP never loads. The block editor never gets the class, so
        blocks stay fully visible on the editor canvas.

        This uses `opacity`, not `visibility`: opacity does not inherit, so an
        ancestor that is hidden for its own reasons can never strand a child at
        an unrevealable state the way `visibility: inherit` can.

     2. The hover/press interaction for buttons, which is a CSS concern rather
        than a scroll animation.

   The motion itself is defined in assets/js/theme-animations.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Pre-animation hide
   -------------------------------------------------------------------------- */
.gp-anim .animate-heading,
.gp-anim .animate-subheading,
.gp-anim .animate-text,
.gp-anim .animate-btn,
.gp-anim .animate-img,
.gp-anim .animate-card,
.gp-anim .animate-list-item {
    opacity: 0;
}

/* Note there is no no-JS branch to write: `gp-anim` is itself added by script,
   so with JavaScript off the class never lands and nothing is ever hidden. */

/* GSAP animates transform and opacity; promoting the layer keeps the reveal
   off the main thread on long pages. will-change is dropped again as soon as
   the tween finishes, via GSAP's own lifecycle. */
.gp-anim .animate-heading,
.gp-anim .animate-card,
.gp-anim .animate-img {
    will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   2. Button interaction
   -------------------------------------------------------------------------- */
.animate-btn {
    transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease;
}

.animate-btn:hover,
.animate-btn:focus-visible {
    transform: scale(1.045);
}

.animate-btn:active {
    transform: scale(.985);
    transition-duration: .08s;
}

/* .btn already carries its own transform transition in style.css; keeping the
   two in sync stops the hover from stepping on the GSAP pop-in. */
.btn.animate-btn {
    transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease, background-color .15s ease, color .15s ease;
}

/* --------------------------------------------------------------------------
   3. Reduced motion — no reveal, no hover travel, nothing hidden.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .gp-anim .animate-heading,
    .gp-anim .animate-subheading,
    .gp-anim .animate-text,
    .gp-anim .animate-btn,
    .gp-anim .animate-img,
    .gp-anim .animate-card,
    .gp-anim .animate-list-item {
        opacity: 1;
    }

    .animate-btn,
    .btn.animate-btn {
        transition: background-color .15s ease, color .15s ease;
    }

    .animate-btn:hover,
    .animate-btn:focus-visible,
    .animate-btn:active {
        transform: none;
    }
}