/*
* Description: site brand overrides (main frame, flash modes, layout, INVISION JS hooks)
* Application tokens + styles: css/c-application.css
* Author: C Studio
* Version: 1.0.0
* Update: 26-03-27
*/

/* FLASH ─────────────────────────────────────────────*/
[data-flash="red"] {
    --mode-flash-bg: var(--red);
    --mode-flash-opacity-2: var(--red-o-2);
    --mode-flash-opacity-3: var(--red-o-3);
    --mode-flash-opacity-4: var(--red-o-4);
    --mode-flash-opacity-5: var(--red-o-5);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--dark);
    --mode-flash-d: var(--red-d);
}

[data-flash="pink"] {
    --mode-flash-bg: var(--pink);
    --mode-flash-opacity-2: var(--pink-o-2);
    --mode-flash-opacity-3: var(--pink-o-3);
    --mode-flash-opacity-4: var(--pink-o-4);
    --mode-flash-opacity-5: var(--pink-o-5);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--dark);
    --mode-flash-d: var(--pink-d);
}

[data-flash="lime"] {
    --mode-flash-bg: var(--lime);
    --mode-flash-opacity-2: var(--lime-o-2);
    --mode-flash-opacity-3: var(--lime-o-3);
    --mode-flash-opacity-4: var(--lime-o-4);
    --mode-flash-opacity-5: var(--lime-o-5);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--dark);
    --mode-flash-d: var(--lime-d);
}

[data-flash="yellow"] {
    --mode-flash-bg: var(--yellow);
    --mode-flash-opacity-2: var(--yellow-o-2);
    --mode-flash-opacity-3: var(--yellow-o-3);
    --mode-flash-opacity-4: var(--yellow-o-4);
    --mode-flash-opacity-5: var(--yellow-o-5);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--dark);
    --mode-flash-d: var(--yellow-d);
}

[data-flash="aqua"] {
    --mode-flash-bg: var(--aqua);
    --mode-flash-opacity-2: var(--aqua-o-2);
    --mode-flash-opacity-3: var(--aqua-o-3);
    --mode-flash-opacity-4: var(--aqua-o-4);
    --mode-flash-opacity-5: var(--aqua-o-5);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--dark);
    --mode-flash-d: var(--aqua-d);
}

[data-flash="red-d"] {
    --mode-flash-bg: var(--red-d);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--light);
}

[data-flash="pink-d"] {
    --mode-flash-bg: var(--pink-d);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--light);
}

[data-flash="lime-d"] {
    --mode-flash-bg: var(--lime-d);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--light);
}

[data-flash="yellow-d"] {
    --mode-flash-bg: var(--yellow-d);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--light);
}

[data-flash="aqua-d"] {
    --mode-flash-bg: var(--aqua-d);
    --mode-flash-highlight: var(--mode-flash-bg);
    --mode-flash-color: var(--light);
}

body {
    transition: background-color var(--time-out) var(--bezier-out);
}

main {
    display: flex;
    flex-direction: column;
    margin: auto;
    row-gap: var(--main-frame);
    width: calc(100% - var(--main-frame) * 2);
    container-type: inline-size;
    --grid-shell: min(100cqw, var(--max-width));

    &>section {
        border-radius: var(--main-radius);
    }
}

/* UTILITY ─────────────────────────────────────────────*/
main .u-bleed {
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
    margin-inline: 0;
}

section {
    overflow: hidden;
}

/* TEXT ─────────────────────────────────────────────*/
:where(b, strong) {
    color: var(--mode-headline-color);
}




/* ANIMATIONS ─────────────────────────────────────────────*/
@keyframes app-calendar-today-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1.05);
    }

    50% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Clockwise spin — use: animation: rotate 1s linear infinite; */
@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

/* CUSTOM ─────────────────────────────────────────────*/
.t-hero,
.t-feature,
section:has(.t-feature__bento) {
    overflow: visible;
}


/* FEATURE */
.t-feature,
.t-feature__grid,
.t-feature__bento {
    overflow: visible;
}


/* GSAP ─────────────────────────────────────────────*/
/* IMAGE FLIP – .t-invision */
.c-image-flip.c-image-flip--invision {
    overflow: visible;
}

/* Desktop start width from flip-from token (JS sets --image-flip-from) */
.c-image-flip.c-image-flip--invision .c-image-flip__start,
.c-image-flip.c-image-flip--invision [data-image-flip-waypoint='start'] {
    inline-size: var(--image-flip-from, var(--col-7));
    margin-inline: auto;
    max-inline-size: 100%;
}

.c-image-flip.c-image-flip--invision .c-image-flip__end {
    block-size: auto;
    height: auto;
    min-block-size: 0;
    min-height: 0;
}

.c-image-flip.c-image-flip--invision:not(.is-invision-copy-pinned):not(.is-invision-copy-resting) .c-image-flip__overlay {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__overlay {
    block-size: 100vh;
    inset-block-start: 0;
    opacity: 1;
    overflow: visible;
    pointer-events: none;
    position: fixed;
    visibility: visible;
}

.c-image-flip.c-image-flip--invision .c-image-flip__line {
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.c-image-flip.c-image-flip--invision.is-invision-copy-resting .c-image-flip__line--end {
    opacity: 1;
    visibility: visible;
}

/* —— Desktop: 16:9 + two columns —— */
@media (min-width: 840px) {
    .c-image-flip.c-image-flip--invision .c-image-flip__end [data-flip-element='wrapper'] {
        aspect-ratio: 16 / 9;
        block-size: auto;
        height: auto;
        inset-block-start: 0;
        max-block-size: none;
    }

    .c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__overlay {
        inset-inline-start: 50%;
        transform: translateX(-50%);
        width: var(--col-10);
    }

    .c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__line {
        max-inline-size: var(--col-4);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: var(--col-4);
    }

    .c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__line--start {
        inset-inline-start: var(--grid-margin);
        left: var(--grid-margin);
        right: auto;
        text-align: start;
    }

    .c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__line--end {
        inset-inline-end: var(--grid-margin);
        left: auto;
        right: var(--grid-margin);
        text-align: end;
    }
}

/* —— Mobile: 1:1 → fullscreen + stacked centered copy —— */
@media (max-width: 839px) {
    .c-image-flip.c-image-flip--invision .c-image-flip__start,
    .c-image-flip.c-image-flip--invision [data-image-flip-waypoint='start'] {
        inline-size: var(--col-9);
        max-inline-size: 100%;
        width: var(--col-9);
    }

    .c-image-flip.c-image-flip--invision .c-image-flip__start .c-image-flip__ratio,
    .c-image-flip.c-image-flip--invision [data-image-flip-waypoint='start'] .c-image-flip__ratio {
        padding-block-start: 100%; /* 1:1 square */
    }

    /*
     * Beat Etch `.t-invision.c-image-flip--invision .c-image-flip__end { min-block-size: 100dvh }`.
     * That runway taller than the Flip target = beige gap under the video.
     */
    .c-image-flip.c-image-flip--invision.is-invision-end-fit .c-image-flip__end,
    .c-image-flip.c-image-flip--invision.is-invision-end-fit [data-image-flip-waypoint='end'] {
        block-size: auto;
        height: auto;
        inline-size: 100vw;
        margin-inline: calc(50% - 50vw);
        max-block-size: none;
        max-inline-size: 100vw;
        min-block-size: 0;
        min-height: 0;
        width: 100vw;
    }

    .c-image-flip.c-image-flip--invision .c-image-flip__end .c-image-flip__ratio,
    .c-image-flip.c-image-flip--invision [data-image-flip-waypoint='end'] .c-image-flip__ratio {
        block-size: 100svh;
        padding-block-start: 0;
    }

    .c-image-flip.c-image-flip--invision .c-image-flip__end [data-flip-element='wrapper'] {
        aspect-ratio: auto;
        block-size: 100%;
        inset: 0;
        max-block-size: none;
    }

    .c-image-flip.c-image-flip--invision .c-image-flip__end [data-flip-element='target'],
    .c-image-flip.c-image-flip--invision .c-image-flip__end [data-flip-element='target'] video,
    .c-image-flip.c-image-flip--invision .c-image-flip__end [data-flip-element='target'] img,
    .c-image-flip.c-image-flip--invision .c-image-flip__end [data-flip-element='target'] .c-bunny {
        block-size: 100%;
        max-block-size: none;
        object-fit: cover;
    }

    .c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__overlay {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: var(--gap-2, 1rem);
        inset: 0;
        justify-content: center;
        left: 0;
        padding-inline: var(--grid-margin);
        right: 0;
        text-align: center;
        transform: none;
        width: 100%;
    }

    /* Extra class on line beats Etch `.t-invision.is-invision-copy-pinned .c-image-flip__line` */
    .c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__line.c-image-flip__line--start,
    .c-image-flip.c-image-flip--invision:is(.is-invision-copy-pinned, .is-invision-copy-resting) .c-image-flip__line.c-image-flip__line--end {
        inset: auto;
        left: auto;
        max-inline-size: 100%;
        position: relative;
        right: auto;
        text-align: center;
        top: auto;
        transform: none;
        width: var(--col-9);
    }
}

/* GSAP text_highlight */
.u-text-flash{
    color:var(--mode-flash-bg);
}
[data-highlight] .u-text-flash{
    color:var(--mode-flash-bg);
}
.u-text-accent{
    color:var(--mode);
}
[data-highlight] .u-text-accent{
    color:var(--mode-headline-color);
}
/* GSAP text_odometer */
.c-application__metric[data-odometer-element] {
    display: flex;
    inline-size: 100%;
    justify-content: flex-end;
}

.c-application__metric-value[data-odometer-element],
.c-application__stat-value[data-odometer-element] {
    display: inline-flex;
    justify-content: flex-end;
    margin-inline-start: auto;
    min-inline-size: 0;
}

/* text_rotating + text_highlight — hero headline presentation */
[data-rotating-title] [data-rotating-words] {
    color: var(--mode-headline-color);
}

[data-rotating-title] [data-rotating-words] .g-rotating-text__word {
    color: inherit;
}

[data-rotating-title] [data-highlight] {
    color: var(--mode-opacity-3);
    display: block;
}