/* ============================================================
   ASMC
   PHASE 9B
   HOMEPAGE MOTION SUPPORT

   GreenSock Animation Platform handles the actual motion.
   This file provides presentation support for those effects.
============================================================ */


/* ============================================================
   TYPEWRITER
============================================================ */

.home-type-line {
    display:
        block;
}


[data-type-segment] {
    position:
        relative;
}


/* ============================================================
   TYPEWRITER CURSOR
============================================================ */

[data-type-segment].is-typing::after,
[data-type-segment].is-type-complete::after {
    content:
        "";

    display:
        inline-block;

    width:
        0.075em;

    height:
        0.88em;

    margin-left:
        0.08em;

    vertical-align:
        -0.06em;

    background:
        #F7941D;

    animation:
        home-type-cursor-blink
        0.72s
        steps(1)
        infinite;
}


@keyframes home-type-cursor-blink {

    0%,
    48% {
        opacity:
            1;
    }

    49%,
    100% {
        opacity:
            0;
    }

}



/* ============================================================
   HERO THEME / SUB-THEME
============================================================ */

.home-hero-theme-line {
    display:
        block;
}


.home-hero-theme-line +
.home-hero-theme-line {
    margin-top:
        0.2rem;
}


.home-hero-theme-line strong {
    display:
        inline-block;

    margin-right:
        0.25em;

    color:
        #F7941D;
}


.home-hero-theme-line
[data-hero-theme-copy] {
    display:
        inline-block;
}



/* ============================================================
   ELEMENTS CONTROLLED BY GREENSPIN ANIMATION PLATFORM
============================================================ */

[data-about-divider],
[data-about-heading],
[data-about-button],
[data-ecosystem-reveal],
[data-theme-card],
[data-programme-number],
[data-breakaway-item],
[data-cta-detail] {
    will-change:
        transform,
        opacity;
}



/* ============================================================
   THEMATIC AREAS
============================================================ */

.home-themes[data-theme-sequence] {
    position:
        relative;

    isolation:
        isolate;
}


.home-themes[data-theme-sequence]
.themes-grid {
    position:
        relative;
}


.home-themes[data-theme-sequence]
.theme-card {
    backface-visibility:
        hidden;
}



/* ============================================================
   PROGRAMME
============================================================ */

.programme-list {
    perspective:
        1200px;
}


.programme-day[data-programme-day] {
    --programme-pointer-x:
        50%;

    --programme-pointer-y:
        50%;

    position:
        relative;

    transform-style:
        preserve-3d;

    transform-origin:
        center center;

    cursor:
        crosshair;

    backface-visibility:
        hidden;
}


/* ------------------------------------------------------------
   POINTER PRECISION GLOW
------------------------------------------------------------ */

.programme-day[data-programme-day]::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    border:
        1px solid
        transparent;

    border-radius:
        inherit;

    opacity:
        0;

    background:
        radial-gradient(
            circle
            at
            var(--programme-pointer-x)
            var(--programme-pointer-y),

            rgba(
                102,
                46,
                147,
                0.11
            )
            0%,

            rgba(
                102,
                46,
                147,
                0.035
            )
            22%,

            transparent
            48%
        );

    transition:
        opacity
        180ms
        ease,
        border-color
        180ms
        ease,
        box-shadow
        180ms
        ease;
}


.programme-day[data-programme-day].is-pointer-active::after {
    opacity:
        1;

    border-color:
        rgba(
            102,
            46,
            147,
            0.17
        );

    box-shadow:
        0 20px 48px
        rgba(
            33,
            22,
            39,
            0.07
        );
}



/* ------------------------------------------------------------
   KEEP PROGRAMME CONTENT ABOVE POINTER GLOW
------------------------------------------------------------ */

.programme-day[data-programme-day]
> * {
    position:
        relative;

    z-index:
        1;
}



/* ------------------------------------------------------------
   DAY NUMBER
------------------------------------------------------------ */

.programme-day-number[data-programme-number] {
    display:
        inline-block;

    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;
}



/* ============================================================
   FINAL CALL TO ACTION
============================================================ */

.home-final-cta
[data-cta-detail] {
    backface-visibility:
        hidden;
}



/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    [data-type-segment].is-typing::after,
    [data-type-segment].is-type-complete::after {
        animation:
            none;

        display:
            none;
    }


    .programme-day[data-programme-day] {
        cursor:
            default;
    }


    .programme-day[data-programme-day]::after {
        display:
            none;
    }

}


/* ============================================================
   PHASE 13E
   CRISP PROGRAMME TEXT + BACKGROUND-ONLY 3D TILT
============================================================ */


/*
    The actual programme row remains completely flat.

    This keeps all text rendered in normal two-dimensional space
    instead of placing it on a transformed three-dimensional layer.
*/

.programme-day {
    position:
        relative;

    isolation:
        isolate;

    transform:
        none !important;

    transform-style:
        flat;

    backface-visibility:
        visible;

    will-change:
        auto;

    background:
        transparent !important;

    filter:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;
}



/*
    This pseudo-element becomes the visual 3D surface.

    It moves.

    The text does not.
*/

.programme-day::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at
            var(
                --programme-pointer-x,
                50%
            )
            var(
                --programme-pointer-y,
                50%
            ),

            rgba(
                102,
                46,
                147,
                0.10
            )
            0%,

            rgba(
                102,
                46,
                147,
                0.035
            )
            32%,

            transparent
            68%
        );

    transform:
        perspective(
            1000px
        )
        rotateX(
            var(
                --programme-rotate-x,
                0deg
            )
        )
        rotateY(
            var(
                --programme-rotate-y,
                0deg
            )
        )
        scale(
            var(
                --programme-scale,
                1
            )
        );

    transform-origin:
        center center;

    transition:
        transform
        220ms
        ease-out,
        background-color
        220ms
        ease;
}



/*
    Slight base tint while the pointer is over the day.
*/

.programme-day.is-pointer-active::before {
    background-color:
        rgba(
            102,
            46,
            147,
            0.025
        );
}



/*
    All real content sits ABOVE the moving background.

    No blur.
    No filter.
    No three-dimensional text transform.
*/

.programme-day > * {
    position:
        relative;

    z-index:
        1;

    filter:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    backface-visibility:
        visible;
}



/*
    Breakaway copy gets an explicit sharp rendering layer.
*/

.programme-breakaways,
.programme-breakaways ul,
.programme-breakaways li,
.programme-plenary,
.programme-plenary h3 {
    filter:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    text-shadow:
        none;
}



/*
    Keep the existing hover character,
    but apply it to the background plane instead.
*/

.programme-day:hover {
    background:
        transparent !important;
}



/*
    Touch devices do not need the pointer-based 3D surface.
*/

@media (hover: none), (pointer: coarse) {

    .programme-day::before {
        transform:
            none;
    }

}