/**
 * R3.7Q-006D: the global FGMA entrance-motion system's presentation layer -- reveal (opacity +
 * translateY) and image-load-fade (opacity only) states, plus the `prefers-reduced-motion` override.
 * `fgma-reveal.js` owns all element selection/registration (the existing-selector registry); this file
 * owns only what a registered element LOOKS like in each of its three possible states.
 *
 * Failure-safe by construction: every hidden-state rule below is scoped under `html.fgma-reveal-ready`,
 * a class ONLY `fgma-reveal.js` ever adds, and only after it has successfully initialized. Without that
 * root class (JS disabled, blocked, or erroring before that point), neither `[data-fgma-reveal-state]`
 * nor `[data-fgma-image-fade-state]` ever matches anything -- a registered element simply keeps
 * whatever opacity it already had (the browser default, 1), so content can never be left permanently
 * invisible by a missing/failed script. This is the direct, deliberate fix for the exact bug Production
 * has (some initially-visible reveal elements stay hidden until the first scroll) -- that bug is a
 * consequence of gating visibility on a scroll-driven check; this system never does that, since
 * `IntersectionObserver.observe()` itself delivers an initial entry for an already-intersecting target
 * with no scroll event required (see fgma-reveal.js).
 */

/**
 * R3.7Q-006J: CSS transitions animate based on the AFTER-CHANGE computed style -- when the
 * `data-fgma-reveal-state` attribute flips atomically from "pending" to "visible", the "pending"
 * selector stops matching entirely, so a `transition` declared only there never has a chance to run;
 * the browser resolves the new ("visible") computed style, which -- with no transition of its own --
 * has a `transition-duration` of `0s` and snaps instantly. Confirmed live, real browser (R3.7Q-006I).
 * The transition belongs on the DESTINATION state of the change that must animate: "pending" carries
 * `transition: none` (there is no reveal-worthy transition INTO pending -- an element starts there, it
 * never animates into it, so this also prevents an unwanted visible-to-pending fade-out if this rule
 * were ever hit a second time), and "visible" carries the real entrance transition, since that is the
 * state being transitioned INTO.
 */

/* --- Reveal: opacity + translateY entrance, per the confirmed Production token set --- */

html.fgma-reveal-ready [data-fgma-reveal-state="pending"] {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
    will-change: opacity, transform;
}

/**
 * R3.7Q-006J: `fgma-reveal.js` sets a Featured Projects card's stagger as an INLINE
 * `transition-delay` (never touched by this pass). The `transition` shorthand below expands to all
 * four longhands, including `transition-delay: 0s` for both listed properties -- but an inline style
 * declaration always outranks a stylesheet declaration for the same longhand, regardless of the
 * stylesheet selector's specificity or which one uses a shorthand, so the inline per-card delay
 * (125ms/250ms/375ms) still wins over this rule's own implicit `0s` and the stagger is preserved
 * exactly as before.
 */
html.fgma-reveal-ready [data-fgma-reveal-state="visible"] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* --- Image load fade: opacity only, no translate, per the confirmed Production token set --- */

html.fgma-reveal-ready [data-fgma-image-fade-state="pending"] {
    opacity: 0;
    transition: none;
}

html.fgma-reveal-ready [data-fgma-image-fade-state="visible"] {
    opacity: 1;
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/**
 * Reduced motion: immediately visible, no transform, no transition, regardless of which pending/
 * visible state fgma-reveal.js has (or hasn't yet) set. Selectors here deliberately match the exact
 * specificity of the two "pending" rules above (`html.fgma-reveal-ready` + one attribute selector) so
 * this wins on source order alone -- placed after them in this file -- with no `!important` needed.
 * Never depends on JS: a user with this preference sees fully visible, static content even if the
 * script has not run yet, not only after it runs.
 */
@media (prefers-reduced-motion: reduce) {
    html.fgma-reveal-ready [data-fgma-reveal-state] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.fgma-reveal-ready [data-fgma-image-fade-state] {
        opacity: 1;
        transition: none;
    }
}