/* =========================================================
   RUSHD FRAME 01 DEPTH LAYER
   DESKTOP LANDSCAPE ONLY
========================================================= */

.rushd-frame01-depth{
    position:absolute;
    inset:0;
    z-index:4;
    overflow:hidden;
    pointer-events:none;
    display:none;
}

@media (min-width:768px) and (orientation:landscape){

    .rushd-frame01-depth.is-visible{
        display:block;
    }

    /* ---------------------------------------------------------
       UNDER-CHARACTER DEPTH GROUP
    --------------------------------------------------------- */

    .rushd-frame01-depth__under{
        position:absolute;
        inset:0;
        z-index:1;
        pointer-events:none;
    }

    /* AURA */
    .rushd-frame01-depth__aura{
        position:absolute;
        left:17.2%;
        top:53%;
        width:min(42vw,760px);
        aspect-ratio:1 / 1;

        transform:
            translate(-50%,-50%)
            scale(1);

        border-radius:50%;

        background:
            radial-gradient(
                circle,
                rgba(228,48,54,.18) 0%,
                rgba(228,48,54,.11) 20%,
                rgba(228,48,54,.055) 40%,
                rgba(14,31,61,.025) 58%,
                transparent 72%
            );

        filter:blur(3px);

        opacity:.92;

        transition:
            transform .72s cubic-bezier(.2,.78,.2,1),
            opacity .42s ease,
            filter .42s ease;

        will-change:transform,opacity,filter;
    }


    /* WEB NETWORK */
    .rushd-frame01-depth__web{
        position:absolute;
        left:17.2%;
        top:51%;

        width:min(39vw,700px);
        aspect-ratio:1 / 1;

        transform:
            translate(-50%,-50%)
            rotate(-8deg)
            scale(.96);

        opacity:.34;

        background:
            repeating-conic-gradient(
                from 5deg at 50% 50%,
                rgba(228,48,54,.30) 0deg 1deg,
                transparent 1deg 24deg
            ),
            repeating-radial-gradient(
                circle at 50% 50%,
                transparent 0 9%,
                rgba(14,31,61,.16) 9.4% 9.9%,
                transparent 10.2% 18%
            );

        -webkit-mask:
            radial-gradient(
                circle at center,
                #000 0 67%,
                transparent 79%
            );

        mask:
            radial-gradient(
                circle at center,
                #000 0 67%,
                transparent 79%
            );

        filter:
            blur(.15px)
            drop-shadow(0 0 6px rgba(228,48,54,.08));

        transition:
            transform .76s cubic-bezier(.2,.78,.2,1),
            opacity .38s ease,
            filter .38s ease;

        will-change:transform,opacity,filter;
    }


    /* RUSHD — GRADIENT + WEB TEXT */
    .rushd-frame01-depth__mark{
        position:absolute;

        left:1.8%;
        top:54%;

        z-index:2;

        margin:0;

        font-family:
            Arial Black,
            Arial,
            sans-serif;

        font-size:clamp(5.8rem,10vw,12rem);
        font-weight:900;
        line-height:.82;
        letter-spacing:-.065em;

        /*
           Layer 1 = navy/red gradient
           Layer 2 = fine diagonal web strands
           Layer 3 = subtle radial web rings
        */
        background:
            linear-gradient(
                115deg,
                #081327 0%,
                #0E1F3D 28%,
                #E43036 58%,
                #8A1730 78%,
                #081327 100%
            ),
            repeating-linear-gradient(
                26deg,
                rgba(255,255,255,.38) 0 1px,
                transparent 1px 12px
            ),
            repeating-radial-gradient(
                circle at 42% 52%,
                transparent 0 8px,
                rgba(255,255,255,.28) 9px 10px,
                transparent 11px 22px
            );

        background-blend-mode:
            normal,
            screen,
            overlay;

        -webkit-background-clip:text;
        background-clip:text;

        -webkit-text-fill-color:transparent;
        color:transparent;

        -webkit-text-stroke:
            1px rgba(14,31,61,.20);

        text-shadow:
            0 1px 0 rgba(255,255,255,.42),
            0 6px 18px rgba(14,31,61,.08);

        opacity:.88;

        transform:
            translateY(-50%)
            translateX(0);

        transition:
            transform .78s cubic-bezier(.2,.78,.2,1),
            opacity .38s ease,
            filter .38s ease;

        will-change:transform,opacity,filter;
        user-select:none;
        white-space:nowrap;
    }


    /* ---------------------------------------------------------
       CHARACTER PNG — FULL 1920x1080 CANVAS
       Exact original positioning.
    --------------------------------------------------------- */

    .rushd-frame01-depth__character{
        position:absolute;
        inset:0;

        z-index:5;

        display:block;

        width:100%;
        height:100%;

        object-fit:cover;
        object-position:center center;

        pointer-events:none;
        user-select:none;

        opacity:1;

        /*
           IMPORTANT:
           No transition at all.
           It must disappear instantly on scroll/frame 02.
        */
        transition:none !important;
        animation:none !important;
    }


    /* ---------------------------------------------------------
       EXIT
       Character = instant.
       Background depth = split left/right.
    --------------------------------------------------------- */

    .rushd-frame01-depth.is-exiting
    .rushd-frame01-depth__character{
        display:none !important;
        opacity:0 !important;
    }

    .rushd-frame01-depth.is-exiting
    .rushd-frame01-depth__mark{
        transform:
            translateY(-50%)
            translateX(-34vw)
            rotate(-3deg);

        opacity:0;
        filter:blur(8px);
    }

    .rushd-frame01-depth.is-exiting
    .rushd-frame01-depth__aura{
        transform:
            translate(-50%,-50%)
            translateX(30vw)
            scale(1.18);

        opacity:0;
        filter:blur(12px);
    }

    .rushd-frame01-depth.is-exiting
    .rushd-frame01-depth__web{
        transform:
            translate(-50%,-50%)
            translateX(34vw)
            rotate(15deg)
            scale(1.10);

        opacity:0;
        filter:blur(6px);
    }
}


/* =========================================================
   NEVER SHOW OUTSIDE DESKTOP LANDSCAPE
========================================================= */

@media (max-width:767px),
       (orientation:portrait){

    .rushd-frame01-depth{
        display:none !important;
    }
}