/* ===========================================================================
   PESO Motion — CSS half of the GSAP + Alpine motion layer.

   Matches the reference feel:
     easing  cubic-bezier(.22, 1, .36, 1)   (a settle, not a brake)
     micro   .15–.25s   hover / tap / select
     lift    y -2 … -4px on cards, x +3px on rows
   Nothing here HIDES content unless the JS layer has actually started
   (html.peso-motion-run). If JS never runs, everything stays visible.
   Loaded last for every workspace + the public alive funnels.
   =========================================================================== */

:root { --peso-ease: cubic-bezier(.22, 1, .36, 1); }

[x-cloak] { display: none !important; }

/* GENERIC reveal hooks — pre-hide once the JS layer is running so there is no
   flash before the tween; GSAP clears these inline as it animates, and a
   2.6s + on-scroll JS sweep catches any straggler. */
html.peso-motion-run [data-peso-reveal] { opacity: 0; will-change: opacity, transform; }
html.peso-motion-run [data-peso-reveal].is-visible { opacity: 1; }
html.peso-motion-js:not(.peso-motion-run) [data-peso-reveal],
html.peso-motion-js:not(.peso-motion-run) [data-peso-stagger] > * { opacity: 1; }

/* HERO HEADLINE — GSAP owns it while the JS layer runs (word split comes from
   peso-alive-funnel.js; --word-delay = i*90ms). Lite mode just shows them. */
html.peso-motion-run .alive-headline-word { animation: none !important; }
html.peso-motion-lite .alive-headline-word { opacity: 1 !important; filter: none !important; transform: none !important; }

/* ===========================================================================
   AMBIENT LAYER — the hero "breathing".
   These are the alive-funnel's OWN keyframes, already matched to the reference
   (bob 7s, Ken-Burns 12s, sheen, float-card bob 4s staggered, pulse dot 1.8s,
   aurora drift 22s). They are switched off by the funnel's
   prefers-reduced-motion blocks; we re-enable them whenever the JS motion layer
   is running at all (html.peso-motion-run = "full" OR "lite") because these are
   slow, gentle, non-interactive loops — the "alive" feel. Only "?motion=off"
   (html.peso-motion-js without .peso-motion-run) leaves them stopped.
   Higher specificity + !important beats the reduced-motion blocks. In a normal
   browser these rules just restate what already runs — harmless — and also
   UPGRADE the jobseeker hero to the same layered bob(7s) + zoom(12s) as the
   employer hero.
   =========================================================================== */

/* Trimmed 2026-09-20: purely decorative infinite loops (blob drift, orbit
   drift, sheen sweep, the flame-icon pulse, and the floating cards' ambient
   bob after they've already entered) removed — they carried no information
   and just added constant background motion. What's left is a ONE-TIME
   entrance per element plus a couple of slow, meaningful loops (the hero
   photo's Ken-Burns zoom, and a single "live" pulse that actually signals
   real-time data), matching the reduced ambient-motion request. */

/* employer hero — static 3D tilt, image Ken-Burns(12s) only (bob + sheen removed) */
html.peso-motion-run .alive-hero__photo {
    transform: perspective(1200px) rotateX(2deg) rotateY(-3deg);
}
html.peso-motion-run .alive-hero__photo img { animation: alive-ken-burns 12s ease-in-out infinite !important; }

/* jobseeker hero — same treatment (bob removed, zoom kept) */
html.peso-motion-run .alive-js-visual {
    transform: perspective(1200px) rotateX(2deg) rotateY(-3deg);
}
html.peso-motion-run .alive-js-visual > img { animation: alive-ken-burns 12s ease-in-out infinite !important; }

/* floating job cards — one-time staggered entrance only; the continuous
   ambient bob after landing is gone */
html.peso-motion-run .alive-float-job {
    opacity: 0;
    animation: alive-card-in .5s cubic-bezier(.22, 1, .36, 1) .6s both !important;
}
html.peso-motion-run .alive-float-job--2 { animation-delay: .9s !important; }
html.peso-motion-run .alive-float-job--3 { animation-delay: 1.1s !important; }
html.peso-motion-run .alive-float-job--4 { animation-delay: 1.3s !important; }
html.peso-motion-run .alive-float-job--5 { animation-delay: 1.5s !important; }

/* live "hiring now" dot — one pulse loop (was two layered animations) */
html.peso-motion-run .alive-float-job span i,
html.peso-motion-run .alive-live-dot {
    animation: alive-dot-pulse 1.8s ease-in-out infinite !important;
}

/* #explore live-activity ticker — the marquee itself is functional (it's how
   you see the rest of the feed), kept; the decorative flame-icon pulse on
   top of it is gone. Specificity html.peso-motion-run + body.alive-page …
   beats the funnel's own reduced-motion !important 150s crawl. */
html.peso-motion-run body.alive-page .alive-ticker > div > div {
    animation: alive-ticker-run 44s linear infinite !important;
}
@media (max-width: 560px) {
    html.peso-motion-run body.alive-page .alive-ticker > div > div { animation-duration: 32s !important; }
}

/* ===========================================================================
   CONTENT LAYER — per-section polish from the reference spec.
   =========================================================================== */

/* Trimmed 2026-09-20: hover/interactive micro-animations toned down — same
   affordance (still moves on hover, so clickability still reads clearly),
   smaller distances and quicker transitions so it feels snappier rather than
   "extra". Scale-on-hover dropped where it was layered on top of a lift
   (the two together read as bouncier than needed). */

/* How It Works — steps lift on hover (spec: whileHover y:-6, reduced) */
@media (hover: hover) and (pointer: fine) {
    html.peso-motion-full .alive-step-grid article {
        transition: transform .15s var(--peso-ease), border-color .15s ease, box-shadow .15s ease;
    }
    html.peso-motion-full .alive-step-grid article:hover { transform: translateY(-3px); }

    /* Explore — verified-employer rows nudge right (spec: whileHover x:3, reduced) */
    html.peso-motion-full .alive-employers > a { transition: transform .15s var(--peso-ease), background-color .15s ease; }
    html.peso-motion-full .alive-employers > a:hover { transform: translateX(2px); }

    /* Job card "View details / Apply Now" arrow slides right on hover */
    html.peso-motion-full .alive-job-grid footer a i { transition: transform .15s var(--peso-ease); }
    html.peso-motion-full .alive-job-grid article:hover footer a i { transform: translateX(2px); }
}

/* ---- INTERACTIVE micro-interactions (CSS only) --------------------- */
@media (hover: hover) and (pointer: fine) {
    html.peso-motion-full .peso-hoverable {
        transition: transform .15s var(--peso-ease), box-shadow .15s var(--peso-ease);
    }
    html.peso-motion-full .peso-hoverable:hover { transform: translateY(-2px); }

    html.peso-motion-full :is(.alive-btn, .cc-btn, .ef-btn, [data-peso-press]) {
        transition: transform .15s var(--peso-ease), box-shadow .15s var(--peso-ease), background-color .15s ease;
    }
    html.peso-motion-full :is(.alive-btn, .cc-btn, .ef-btn, [data-peso-press]):hover { transform: translateY(-1px); }
    html.peso-motion-full :is(.alive-btn, .cc-btn, [data-peso-press]):active { transform: translateY(0); }
    html.peso-motion-full :is(.alive-btn, .btn, .cc-btn) i { transition: transform .15s var(--peso-ease); }
    html.peso-motion-full :is(.alive-btn, .btn, .cc-btn):hover i { transform: translateX(2px); }

    html.peso-motion-full :is(.fc-daygrid-day, .cc-cal-day) {
        transition: transform .15s var(--peso-ease), background-color .15s ease;
    }
    html.peso-motion-full :is(.fc-daygrid-day, .cc-cal-day):hover { transform: translateY(-1px); }
    html.peso-motion-full :is(.upcoming-row, .cc-agenda__row, .interview-row, .js-interview-item) {
        transition: transform .15s var(--peso-ease);
    }
    html.peso-motion-full :is(.upcoming-row, .cc-agenda__row, .interview-row, .js-interview-item):hover {
        transform: translateX(2px);
    }
}

/* search / filter focus feedback */
html.peso-motion-js :is(.alive-search, .alive-explore-search, .js-hero-search,
        .filter-search-group, .search-bar) {
    transition: box-shadow .2s var(--peso-ease), border-color .2s ease;
}
html.peso-motion-js :is(.alive-search, .alive-explore-search, .js-hero-search,
        .filter-search-group, .search-bar):focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-green, #016236) 16%, transparent);
}

/* navbar scroll-state transition (JS toggles .is-scrolled) */
/* Keep animation positions intact while their visual is out of view. */
html.peso-motion-js.peso-motion-background *,
html.peso-motion-js.peso-motion-background *::before,
html.peso-motion-js.peso-motion-background *::after,
html.peso-motion-js.peso-motion-run .peso-motion-offscreen,
html.peso-motion-js.peso-motion-run .peso-motion-offscreen *,
html.peso-motion-js.peso-motion-run .peso-motion-offscreen::before,
html.peso-motion-js.peso-motion-run .peso-motion-offscreen::after,
html.peso-motion-js.peso-motion-run .peso-motion-offscreen *::before,
html.peso-motion-js.peso-motion-run .peso-motion-offscreen *::after {
    animation-play-state: paused !important;
}

html.peso-motion-js :is(.jsa-navbar, .ef-nav, .admin-topbar, .admx-topbar, [data-peso-navbar]) {
    transition: box-shadow .25s var(--peso-ease), background-color .25s ease, backdrop-filter .25s ease;
}

/* ===========================================================================
   MOBILE MOTION BUDGET

   Keep the public funnels feeling alive on phones without making the browser
   continuously repaint large blurred or scaled layers. Mobile retains the
   staggered card entrances, button feedback, section reveals, and a slower
   live ticker. Large hero media settles once instead of zooming forever.
   =========================================================================== */
@keyframes peso-mobile-hero-settle {
    from { opacity: .82; transform: translate3d(0, 8px, 0) scale(.99); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 760px) {
    /* A single short entrance keeps the hero expressive at a much lower cost
       than an infinite Ken-Burns transform on a full-width image. */
    html.peso-motion-run .alive-hero__photo img,
    html.peso-motion-run .alive-js-visual > img {
        animation: peso-mobile-hero-settle .55s var(--peso-ease) both !important;
    }

    /* The floating vacancy cards already have a staggered entrance. Their
       decorative dots do not also need to pulse continuously on a phone. */
    html.peso-motion-run .alive-float-job span i,
    html.peso-motion-run .alive-help__button > span {
        animation: none !important;
    }

    /* Keep one meaningful live cue and the information ticker, both calmer. */
    html.peso-motion-run .alive-live-dot {
        animation: alive-dot-pulse 2.8s ease-in-out infinite !important;
    }
    html.peso-motion-run body.alive-page .alive-ticker > div > div {
        animation-duration: 72s !important;
    }

    /* Backdrop blur is expensive while scrolling because the pixels behind
       these layers change every frame. Opaque mobile surfaces preserve the
       same hierarchy and contrast without the repaint cost. */
    body.alive-page .alive-nav,
    body.alive-page .alive-float-job,
    body.alive-page .alive-js-proof,
    body.alive-page .alive-hero__proof {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body.alive-page .alive-nav {
        background: var(--a-bg) !important;
    }

    /* Touch feedback remains visible without hover-only transforms. */
    html.peso-motion-js body.alive-page :is(.alive-btn, .alive-tool, .alive-filter-row a) {
        transition-duration: .14s !important;
    }
    html.peso-motion-js body.alive-page :is(.alive-btn, .alive-tool, .alive-filter-row a):active {
        transform: scale(.985);
    }
}

/* Accessibility must win over every decorative motion rule above. */
@media (prefers-reduced-motion: reduce) {
    html.peso-motion-run .alive-hero__photo img,
    html.peso-motion-run .alive-js-visual > img,
    html.peso-motion-run .alive-float-job,
    html.peso-motion-run .alive-float-job span i,
    html.peso-motion-run .alive-live-dot,
    html.peso-motion-run .alive-help__button > span {
        animation: none !important;
    }

    /* This feed carries useful live information, so retain a very slow,
       constant crawl instead of stopping it completely. */
    html.peso-motion-run body.alive-page .alive-ticker > div > div {
        animation: alive-ticker-run 150s linear infinite !important;
    }
}