/**
 * _gsap.css
 * Blueprint — CjStudio
 * FOUC prevention and base animation styles.
 * Import in main.css after _base.css.
 *
 * Rule: CSS hides animated elements initially.
 *       GSAP takes over the moment js-loaded is on body.
 *       No cookies, no state manager needed.
 */

/* ─────────────────────────────────────────────
   FOUC PREVENTION
   Hide animated elements until JS is loaded.
   .js-loaded is added to body in main.js.
───────────────────────────────────────────── */

/* REVEAL ─────────────────────────────────────────────*/
[data-reveal] {
    opacity: 0;
}

/* scroll_reveal module — hide until GSAP sets from-state (see core/js/gsap/modules/scroll_reveal.js) */
.scroll-reveal-s,
.scroll-reveal-m,
.scroll-reveal-l,
.scroll_reveal_s,
.scroll_reveal_m,
.scroll_reveal_l,
[data-scroll-reveal]:not([data-scroll-reveal="false"]),
.c-insight[data-insight-type="feature"]:not(.c-insight--hero):not([data-insight-feature="hero"]) {
    opacity: 0;
}

/* Sticky hero — keep root visible; hide inner targets only */
.c-insight--hero > .c-insight__content,
.c-insight--hero > .c-application,
.c-insight[data-insight-feature="hero"] > .c-insight__content,
.c-insight[data-insight-feature="hero"] > .c-application {
    opacity: 0;
}

/* Stack — hide direct children, not the container */
.scroll-reveal-stack > *:not([data-scroll-reveal="false"]),
.scroll_reveal_stack > *:not([data-scroll-reveal="false"]) {
    opacity: 0;
}

.scroll-reveal-stack > .c-insight--hero,
.scroll-reveal-stack > .c-insight[data-insight-feature="hero"],
.scroll_reveal_stack > .c-insight--hero,
.scroll_reveal_stack > .c-insight[data-insight-feature="hero"] {
    opacity: 1;
}

.scroll-reveal-stack > .c-insight--hero > .c-insight__content,
.scroll-reveal-stack > .c-insight--hero > .c-application,
.scroll-reveal-stack > .c-insight[data-insight-feature="hero"] > .c-insight__content,
.scroll-reveal-stack > .c-insight[data-insight-feature="hero"] > .c-application,
.scroll_reveal_stack > .c-insight--hero > .c-insight__content,
.scroll_reveal_stack > .c-insight--hero > .c-application,
.scroll_reveal_stack > .c-insight[data-insight-feature="hero"] > .c-insight__content,
.scroll_reveal_stack > .c-insight[data-insight-feature="hero"] > .c-application {
    opacity: 0;
}

/* Revealed state — GSAP keeps inline opacity; class wins after scroll refresh */
.is-scroll-revealed {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Sticky hero root stays visible in stacks */
.scroll-reveal-stack > .c-insight--hero.is-scroll-revealed,
.scroll-reveal-stack > .c-insight[data-insight-feature="hero"].is-scroll-revealed,
.scroll_reveal_stack > .c-insight--hero.is-scroll-revealed,
.scroll_reveal_stack > .c-insight[data-insight-feature="hero"].is-scroll-revealed {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal-s,
    .scroll-reveal-m,
    .scroll-reveal-l,
    .scroll_reveal_s,
    .scroll_reveal_m,
    .scroll_reveal_l,
    [data-scroll-reveal],
    .c-insight[data-insight-type="feature"],
    .c-insight--hero > .c-insight__content,
    .c-insight--hero > .c-application,
    .c-insight[data-insight-feature="hero"] > .c-insight__content,
    .c-insight[data-insight-feature="hero"] > .c-application,
    .scroll-reveal-stack > *,
    .scroll_reveal_stack > * {
        opacity: 1;
    }
}

/* Heading / text split — hide until GSAP runs */
[data-split],
[data-heading-split],
.heading-split,
.g-heading {
    visibility: hidden;
}

[data-split] {
    opacity: 0;
}

/* Image clip — hide until clipPath animation fires */
[data-clip] {
    opacity: 0;
}

/* Image scale */
[data-scale] {
    opacity: 0;
}

/* Paragraph reveal */
[data-reveal-paragraph] {
    opacity: 0;
}

/* Once JS loaded — restore visibility; opacity stays on GSAP / .is-scroll-revealed */
.js-loaded [data-reveal],
.js-loaded .scroll-reveal-s,
.js-loaded .scroll-reveal-m,
.js-loaded .scroll-reveal-l,
.js-loaded .scroll_reveal_s,
.js-loaded .scroll_reveal_m,
.js-loaded .scroll_reveal_l,
.js-loaded [data-scroll-reveal]:not([data-scroll-reveal="false"]),
.js-loaded .c-insight[data-insight-type="feature"],
.js-loaded .c-insight--hero,
.js-loaded .c-insight[data-insight-feature="hero"],
.js-loaded .c-insight--hero > .c-insight__content,
.js-loaded .c-insight--hero > .c-application,
.js-loaded .c-insight[data-insight-feature="hero"] > .c-insight__content,
.js-loaded .c-insight[data-insight-feature="hero"] > .c-application,
.js-loaded .scroll-reveal-stack > *:not([data-scroll-reveal="false"]),
.js-loaded .scroll-reveal-stack > .c-insight--hero,
.js-loaded .scroll-reveal-stack > .c-insight[data-insight-feature="hero"],
.js-loaded .scroll-reveal-stack > .c-insight--hero > .c-insight__content,
.js-loaded .scroll-reveal-stack > .c-insight--hero > .c-application,
.js-loaded .scroll-reveal-stack > .c-insight[data-insight-feature="hero"] > .c-insight__content,
.js-loaded .scroll-reveal-stack > .c-insight[data-insight-feature="hero"] > .c-application,
.js-loaded .scroll_reveal_stack > *:not([data-scroll-reveal="false"]),
.js-loaded .scroll_reveal_stack > .c-insight--hero,
.js-loaded .scroll_reveal_stack > .c-insight[data-insight-feature="hero"],
.js-loaded .scroll_reveal_stack > .c-insight--hero > .c-insight__content,
.js-loaded .scroll_reveal_stack > .c-insight--hero > .c-application,
.js-loaded .scroll_reveal_stack > .c-insight[data-insight-feature="hero"] > .c-insight__content,
.js-loaded .scroll_reveal_stack > .c-insight[data-insight-feature="hero"] > .c-application {
    visibility: visible;
    opacity: 1;
}

.js-loaded [data-split],
.js-loaded [data-heading-split],
.js-loaded .heading-split,
.js-loaded .g-heading,
.js-loaded [data-clip],
.js-loaded [data-scale],
.js-loaded [data-reveal-paragraph] {
    visibility: visible;
    opacity: 1;
}

/* Mask wrappers injected by text_headingsplit (line / word / letter reveals) */
.heading-split__mask {
    overflow: hidden;
}

.heading-split__mask--line {
    display: block;
}

.heading-split__mask--word,
.heading-split__mask--char {
    display: inline-block;
    vertical-align: baseline;
}

/* Mask wrappers injected by text_progressive + text_headingsplit (word reveals) */
.text-progressive__word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: inherit;
    margin-bottom: -0.1em;
    padding-bottom: 0.1em;
}

.text-progressive__word > span {
    display: inline-block;
    will-change: transform;
}

/* TEXT ODOMETER ─────────────────────────────────────────────*/
[data-odometer-element] {
    align-items: center;
    display: inline-flex;
    font-variant-numeric: tabular-nums;
    justify-content: flex-end;
    min-inline-size: 0;
    vertical-align: baseline;
}

[data-odometer-part='mask'],
[data-odometer-part='static'] {
    display: inline-block;
    overflow: hidden;
    padding: 0.05em;
    margin: -0.05em;
    position: relative;
    vertical-align: top;
}

[data-odometer-part='roller'] {
    display: block;
    inline-size: 100%;
    white-space: pre;
    text-align: center;
    will-change: transform;
}

/* TEXT SPLIT WORD ─────────────────────────────────────────────*/
.split-word {
    display: inline-block;
    vertical-align: baseline;
}

/* TEXT ROTATING ─────────────────────────────────────────────*/
[data-rotating-words] {
    display: inline-block;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    overflow: clip;
    position: relative;
    vertical-align: baseline;
    white-space: nowrap;
}

.g-rotating-text__inner {
    display: inline-grid;
    grid-template-columns: min-content;
    justify-items: start;
    align-items: baseline;
    vertical-align: baseline;
}

.g-rotating-text__strut,
.g-rotating-text__word {
    grid-area: 1 / 1;
    white-space: nowrap;
}

.g-rotating-text__strut {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    pointer-events: none;
    visibility: hidden;
}

.g-rotating-text__word {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    position: relative;
    will-change: transform;
}

.g-rotating-line {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin-bottom: -0.1em;
    padding-bottom: 0.1em;
    white-space: nowrap;
}

.g-rotating-line-mask {
    overflow-x: visible !important;
    overflow-y: clip !important;
}

/* text_rotating + text_highlight — combo headline structure (see text_rotating.js, text_highlight.js) */
[data-rotating-title] .g-rotating-line {
    margin-bottom: 0;
    padding-bottom: 0;
    white-space: normal;
}

[data-rotating-title] .g-rotating-line:has([data-rotating-words]) {
    white-space: nowrap;
}

/* ANCHORS ─────────────────────────────────────────────*/
.c-anchors {
    position: relative;
    overflow: hidden;
}

.c-anchors.has-indicator {
    /* Ensure buttons sit above the indicator */
    & [data-anchors] {
        position: relative;
        z-index: 1;
    }
}

.c-anchors__indicator {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* CURSOR GRADIENT ─────────────────────────────────────────────*/

[data-cursor-container] {
    position: relative;
    overflow: hidden;
}

/* CURSOR VISUAL ─────────────────────────────────────────────*/

.c-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999;
    visibility: hidden;
}

/* TICKER MARQUEE ─────────────────────────────────────────────*/

[data-ticker],
[data-marquee]:not([data-marquee-mode='scroll']),
[data-ticker-scroll-direction-target],
[data-marquee-scroll-direction-target],
[data-draggable-marquee-init] {
    overflow: hidden;
    white-space: nowrap;
}

/* Scroll-direction marquee — flex rows; nowrap on root breaks sticker/collection layout (see c-ticker-scroll.css). */
[data-marquee][data-marquee-mode='scroll'] {
    overflow: hidden;
    white-space: normal;
}

.c-marquee__track,
.c-ticker__track {
    display: inline-flex;
    will-change: transform;
}

/* PERFORMANCE HINTS ─────────────────────────────────────────────*/

[data-clip],
[data-scale],
[data-reveal],
.scroll-reveal-s,
.scroll-reveal-m,
.scroll-reveal-l,
.scroll_reveal_s,
.scroll_reveal_m,
.scroll_reveal_l,
.c-cursor {
    will-change: transform, opacity;
}