/* Home page scroll scenes (GSAP + ScrollTrigger replacement for the static RevSlider modules).
   Default state = final, fully visible layout; home.scenes.js sets the "from" states. */

.hp-scene {
    position: relative;
    background: #fff;
    color: #112a61;
    font-family: Roboto, sans-serif;
}

.hp-mask {
    overflow: hidden;
}

/* Scene 1: Statistics ("Enhance the Thrill of Racing") */
.hp-scene1 {
    --card-w: 519px;
    --photo-w: 825px;
    /* --hp-header-h is set by home.scenes.js from the fixed #hpi-header */
    height: calc(100vh - var(--hp-header-h, 72px));
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-scene1__card {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: var(--card-w);
    min-height: 471px;
    padding: 40px 46px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hp-scene1__title {
    margin: 0 0 24px;
    color: inherit;
    font-size: 36px;
    line-height: 45px;
    font-weight: 900;
}

.hp-scene1__text {
    margin: 0;
    font-size: 17px;
    line-height: 30px;
    font-weight: 500;
}

.hp-scene1__photo {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: var(--photo-w);
    aspect-ratio: 3 / 2;
    margin-top: calc(var(--photo-w) / -3);
}

    .hp-scene1__photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hp-scene1__photo--left {
    right: calc(50% + var(--card-w) / 2);
}

.hp-scene1__photo--right {
    left: calc(50% + var(--card-w) / 2);
}

.hp-scene1__hint {
    position: absolute;
    z-index: 3;
    top: 30px;
    left: 50%;
    width: 28px;
    margin-left: -14px;
}

    .hp-scene1__hint img {
        display: block;
        width: 28px;
        height: 47px;
    }

.hp-scene1__hint-dot {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 4px;
    height: 12px;
    border-radius: 10px;
    background: rgba(17, 42, 97, 0.5);
}

@media (max-width: 1239.98px) {
    .hp-scene1 {
        --card-w: 428px;
    }

    .hp-scene1__card {
        min-height: 388px;
        padding: 32px 38px;
    }

    .hp-scene1__title {
        font-size: 29px;
        line-height: 37px;
    }

    .hp-scene1__text {
        font-size: 15px;
        line-height: 25px;
    }
}

@media (max-width: 1023.98px) {
    .hp-scene1 {
        --card-w: 340px;
        --photo-w: 659px;
    }

    .hp-scene1__card {
        min-height: 0;
        padding: 24px 28px;
    }

    .hp-scene1__title {
        font-size: 24px;
        line-height: 30px;
    }

    .hp-scene1__text {
        font-size: 14px;
        line-height: 22px;
    }
}

/* Phones and small tablets: centred text with the two photos side by side directly under it,
   the whole block centred on the screen (the photos still rise in while pinned) */
@media (max-width: 777.98px) {
    .hp-scene1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: center;
    }

    .hp-scene1__card {
        order: -1;
        grid-column: 1 / -1;
        width: 100%;
        min-height: 0;
        padding: 64px 16px 24px;
        text-align: center;
        background: transparent;
    }

    .hp-scene1__title {
        font-size: 27px;
        line-height: 35px;
    }

    .hp-scene1__text {
        font-size: 16px;
        line-height: 24px;
    }

    .hp-scene1__photo {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: auto;
        margin: 0;
    }
}

/* =======================================
   Canvas scenes (2, 4, 5): layers keep the RevSlider grid coordinates
   (desktop 1240x900, phone 480x720) on a canvas that home.scenes.js scales
   to fit the stage (--s). Each layer sets its position with CSS variables:
   --x/--y/--w/--h (+ --tx/--ty for centring), phone values prefixed with "m".
   ======================================= */
.hp-stage-scene {
    height: calc(100vh - var(--hp-header-h, 72px));
    min-height: 480px;
    overflow: hidden;
}

.hp-canvas {
    --gw: 1240px;
    --gh: 900px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--gw);
    height: var(--gh);
    transform: translate(-50%, -50%) scale(var(--s, 1));
}

.hp-l {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 0);
    width: var(--w, auto);
    height: var(--h, auto);
    translate: var(--tx, 0) var(--ty, 0);
    z-index: var(--z, 1);
}

    .hp-l > img {
        display: block;
        width: 100%;
        height: 100%;
    }

.hp-l--text {
    margin: 0;
    color: #112a61;
    font-size: var(--fs, 24px);
    line-height: var(--lh, 32px);
    font-weight: var(--fw, 500);
    text-align: var(--ta, left);
}

.hp-l--glow {
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(17,42,97,0.2) 0%, rgba(17,42,97,0) 73%, rgba(17,42,97,0) 100%);
}

/* Phones and portrait tablets use the 480x720 grid */
@media (max-width: 777.98px), (max-width: 1023.98px) and (orientation: portrait) {
    .hp-canvas {
        --gw: 480px;
        --gh: 720px;
    }

    .hp-l {
        left: var(--mx, 0);
        top: var(--my, 0);
        width: var(--mw, auto);
        height: var(--mh, auto);
        translate: var(--mtx, 0) var(--mty, 0);
    }

    .hp-l--text {
        font-size: var(--mfs, 16px);
        line-height: var(--mlh, 24px);
        text-align: var(--mta, center);
    }
}

/* Scene 3: video */
.hp-scene3__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.hp-scene3__play {
    color: #fff;
}

/* Pause/play control for looping video (WCAG 2.2.2); stays unscaled, outside the canvas */
.hp-scene__video-toggle {
    position: absolute;
    z-index: 30;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #112a61;
    color: #fff;
    cursor: pointer;
}

    .hp-scene__video-toggle:hover {
        background: #1d3f8a;
    }

    /* White ring inside a navy ring: visible over the video and over the white page */
    .hp-scene__video-toggle:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 0;
        box-shadow: 0 0 0 6px #112a61;
    }

    .hp-scene__video-toggle .hp-scene__icon-play,
    .hp-scene__video-toggle.is-paused .hp-scene__icon-pause {
        display: none;
    }

    .hp-scene__video-toggle.is-paused .hp-scene__icon-play {
        display: block;
    }

/* =======================================
   Readable mode (.is-static, set by home.scenes.js): when the screen, or browser zoom, leaves too
   little room for the scene's text at a readable size, the scene is not pinned or animated and its
   text is shown in normal page flow (WCAG 1.4.4). Images are decorative and are left out.
   ======================================= */
/* Scene 1: text first, then the two photos side by side under it (phones usually get this mode,
   as the browser bars leave too little height). No side padding, so the text keeps the width
   home.scenes.js measured it at. */
.hp-scene1.is-static {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 32px 0 0;
}

    .hp-scene1.is-static .hp-scene1__card {
        order: -1;
        grid-column: 1 / -1;
        justify-self: center;
        min-height: 0;
        margin: 0 0 24px;
        padding-top: 0;
        padding-bottom: 0;
        background: transparent;
    }

    .hp-scene1.is-static .hp-scene1__photo {
        position: static;
        width: auto;
        margin: 0;
    }

    .hp-scene1.is-static .hp-scene1__hint {
        display: none;
    }

.hp-stage-scene.is-static {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 32px 16px;
}

    .hp-stage-scene.is-static .hp-canvas {
        position: static;
        width: auto;
        max-width: 760px;
        height: auto;
        margin: 0 auto;
        transform: none;
    }

    .hp-stage-scene.is-static .hp-l,
    .hp-stage-scene.is-static .hp-scene__video-toggle {
        display: none;
    }

    .hp-stage-scene.is-static .hp-l--text,
    .hp-stage-scene.is-static .hp-l--copy {
        display: block;
        position: static;
        width: auto;
        height: auto;
        translate: none;
        overflow: visible !important;
        white-space: normal !important;
    }

    .hp-stage-scene.is-static .hp-l--text {
        margin: 0 0 16px;
        text-align: center;
    }

/* Phones: every scene title shows at the same size. Scenes 2-5 sit on a canvas scaled by --s,
   so their title size is divided by it to come out the same on screen; in readable mode the
   canvas is not scaled. */
@media (max-width: 777.98px) {
    .hp-scene {
        --title-fs: 26px;
        --title-lh: 34px;
    }

        .hp-scene1 .hp-scene__title,
        .hp-stage-scene.is-static .hp-scene__title {
            font-size: var(--title-fs);
            line-height: var(--title-lh);
        }

        .hp-stage-scene:not(.is-static) .hp-scene__title {
            font-size: calc(var(--title-fs) / var(--s, 1));
            line-height: calc(var(--title-lh) / var(--s, 1));
        }
}