/**
 * FEF GSAP Engine — styles.
 * ---------------------------------------------------------------------------
 * Kept deliberately small. The engine does the animating in JS; this file only
 * provides the pieces CSS must own: a flicker-free initial hidden state for
 * entrance animations, text-split masking, the button shine element, reduced
 * motion fallbacks, and editor/debug affordances.
 * ---------------------------------------------------------------------------
 */

/* ── Armed state ──────────────────────────────────────────────────────────
 * Elements whose animation starts hidden (load / viewport entrance) get
 * `.fef-gsap-armed` from PHP so they don't flash their final state before the
 * JS runs. The engine removes it (adds `.fef-gsap-ready`) the instant it takes
 * over. A short CSS timeout failsafe reveals them even if JS never boots, so
 * content is never permanently hidden. */
.fef-gsap-armed {
    opacity: 0 !important;
    visibility: hidden;
    animation: fef-gsap-failsafe 0s linear 3s forwards;
}
.fef-gsap-ready {
    /* JS now controls visibility via GSAP autoAlpha */
}
@keyframes fef-gsap-failsafe {
    to { opacity: 1 !important; visibility: visible !important; }
}

/* Once the engine has an instance, hand control fully to GSAP inline styles. */
.fef-gsap.fef-gsap-ready {
    animation: none !important;
}

/* ── Text splitting ───────────────────────────────────────────────────────
 * Chars / words are inline-block so they can transform; lines get overflow
 * hidden so a `yPercent:100 → 0` reveal masks cleanly (the classic line-mask). */
.fef-gsap .fef-word,
.fef-gsap .fef-char {
    display: inline-block;
    will-change: transform, opacity;
}
.fef-gsap .fef-line {
    display: block;
    overflow: hidden;
}
.fef-gsap .fef-line .fef-word {
    will-change: transform, opacity;
}

/* ── Button shine (btn_shine preset) ─────────────────────────────────────── */
.fef-gsap-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
    transform: translateX(-120%) skewX(-20deg);
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    z-index: 2;
}

/* ── Magnetic / interactive hints ────────────────────────────────────────── */
.fef-gsap[data-magnetic] { will-change: transform; }

/* ── Reduced motion ───────────────────────────────────────────────────────
 * The JS already branches on prefers-reduced-motion, but this guarantees any
 * armed element is revealed and continuous loops are stilled even before the
 * engine boots, for users who need it. */
@media (prefers-reduced-motion: reduce) {
    .fef-gsap-armed {
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
    }
}

/* ── Debug ────────────────────────────────────────────────────────────────
 * Elements flagged with the per-element Debug switch get a dashed outline and
 * a corner tag so you can see exactly what the engine is targeting. */
.fef-gsap-debug {
    outline: 1px dashed rgba(124, 255, 155, 0.9);
    outline-offset: 2px;
    position: relative;
}
.fef-gsap-debug::after {
    content: "⚡ GSAP";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 2px 6px;
    font: 700 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.04em;
    color: #052e13;
    background: #7cff9b;
    border-radius: 0 0 6px 0;
    pointer-events: none;
}

/* ── Editor affordances ───────────────────────────────────────────────────
 * In the Elementor editor we never want content stuck invisible while the user
 * is designing, so armed elements stay visible there (the live page animates). */
body.elementor-editor-active .fef-gsap-armed {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}