/*=====================================================================

    NETZ ENGINEERING CONSULTANTS

    POSTER RUNTIME

    STYLE.CSS

    REVISION 4.0

======================================================================*/



/*======================================================================
    RESET
======================================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}



/*======================================================================
    ROOT
======================================================================*/

:root{

    /*--------------------------------------------------------------
        Brand Colours
    --------------------------------------------------------------*/

    --bg:#07111D;

    --white:#F2F2F2;

    --orange:#C97B3B;

    --blue:#1E7CFF;

    /*--------------------------------------------------------------
        Artwork

        DO NOT CHANGE

    --------------------------------------------------------------*/

    --posterWidth:1536;

    --posterHeight:1024;

}



/*======================================================================
    DOCUMENT
======================================================================*/

html{

    width:100%;

    height:100%;

    overflow:hidden;

}



body{

    width:100%;

    height:100%;

    overflow:hidden;

    background:var(--bg);

    color:var(--white);

    font-family:

        "IBM Plex Mono",

        "SF Mono",

        Consolas,

        monospace;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}



/*======================================================================
    POSTER STAGE

    Full browser.

======================================================================*/

#posterStage{

    position:fixed;

    inset:0;

    display:grid;

    place-items:center;

    overflow:hidden;

    background:var(--bg);

}



/*======================================================================
    RENDER SURFACE

    JavaScript controls width & height.

======================================================================*/

#renderSurface{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    background:var(--bg);

    transform:translateZ(0);

    backface-visibility:hidden;

}



/*======================================================================
    POSTER ARTWORK

======================================================================*/

#posterArtwork{

    position:absolute;

    inset:0;

    background-image:

        url("assets/images/approved-poster.webp");

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    transform:translateZ(0);

    backface-visibility:hidden;

}



/*======================================================================
    SCENE

======================================================================*/

#scene{

    position:absolute;

    inset:0;

    pointer-events:none;

}



/*======================================================================
    GENERIC SCENE OBJECT

======================================================================*/

.sceneObject{

    position:absolute;

    left:0;

    top:0;

    opacity:0;

    transform:

        translate(-50%,-50%);

    will-change:

        transform,

        opacity;

}



/*======================================================================
    GPU OPTIMISATION

======================================================================*/

.sceneObject,

#posterArtwork,

#renderSurface{

    transform-style:preserve-3d;

    backface-visibility:hidden;

}



/*======================================================================
    USER INTERACTION

======================================================================*/

body{

    user-select:none;

    -webkit-user-select:none;

    -webkit-touch-callout:none;

}



img{

    -webkit-user-drag:none;

}



/*======================================================================
    SCROLLBAR

======================================================================*/

::-webkit-scrollbar{

    display:none;

}



/*======================================================================
    ACCESSIBILITY

======================================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

    }

}
/*======================================================================
    SCENE OBJECT
    LAUNCH PULSE
======================================================================*/

#launchPulse{

    width:18px;
    height:18px;

    opacity:1;

}



/*----------------------------------------------------------------------
    Core
----------------------------------------------------------------------*/

.pulseCore{

    position:absolute;

    left:50%;
    top:50%;

    width:10px;
    height:10px;

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

    border-radius:50%;

    background:var(--blue);

    box-shadow:

        0 0 10px rgba(30,124,255,.45),

        0 0 18px rgba(30,124,255,.18);

}



/*----------------------------------------------------------------------
    Rings
----------------------------------------------------------------------*/

.pulseRing{

    position:absolute;

    left:50%;
    top:50%;

    width:18px;
    height:18px;

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

    border-radius:50%;

    border:1px solid rgba(30,124,255,.42);

    opacity:0;

}



/*======================================================================
    SCENE OBJECT
    LIVE DATE
======================================================================*/

#liveDate{

    opacity:1;

    color:var(--white);

    font-family:

        "IBM Plex Mono",
        "SF Mono",
        Consolas,
        monospace;

    font-size:12px;

    font-weight:300;

    letter-spacing:.17em;

    line-height:1;

    text-transform:uppercase;

    white-space:nowrap;

    text-shadow:

        0 0 2px rgba(0,0,0,.35);

}



/*======================================================================
    SCENE OBJECT
    ENGINEERING DATUM
======================================================================*/

#engineeringDatum{

    width:40px;

    height:40px;

    opacity:1;

}



/*----------------------------------------------------------------------
    SVG
----------------------------------------------------------------------*/

#engineeringDatum svg{

    width:100%;

    height:100%;

    overflow:visible;

}



/*----------------------------------------------------------------------
    OUTER RING
----------------------------------------------------------------------*/

#datumOuter{

    transform-origin:50px 50px;

}

#datumOuter circle{

    fill:none;

    stroke:var(--orange);

    stroke-width:1.35;

}



/*----------------------------------------------------------------------
    INNER RING
----------------------------------------------------------------------*/

#datumInner{

    transform-origin:50px 50px;

}

#datumInner circle{

    fill:none;

    stroke:var(--orange);

    stroke-width:1.35;

}



/*----------------------------------------------------------------------
    CROSSHAIR
----------------------------------------------------------------------*/

#datumCrosshair line{

    stroke:var(--orange);

    stroke-width:1.25;

    stroke-linecap:round;

}



/*----------------------------------------------------------------------
    CENTRE
----------------------------------------------------------------------*/

#datumCentre{

    fill:var(--orange);

}



/*======================================================================
    RENDER QUALITY
======================================================================*/

#launchPulse,
#liveDate,
#engineeringDatum{

    transform-style:preserve-3d;

    backface-visibility:hidden;

}



/*======================================================================
    MOBILE
======================================================================*/

@media (max-width:768px){

    #launchPulse{

        width:15px;
        height:15px;

    }

    .pulseCore{

        width:8px;
        height:8px;

    }

    .pulseRing{

        width:15px;
        height:15px;

    }

    #liveDate{

        font-size:11px;

        letter-spacing:.18em;

    }

    #engineeringDatum{

        width:34px;

        height:34px;

    }

}
/*======================================================================
    MOTION ENGINE
    REVISION 4.0
======================================================================*/


/*======================================================================
    LAUNCH RIPPLE
======================================================================*/

.pulseRing{

    animation:ripple 6s ease-out infinite;

}

.ring2{

    animation-delay:1.125s;

}

.ring3{

    animation-delay:2.250s;

}

.ring4{

    animation-delay:3.375s;

}



@keyframes ripple{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.35);

        opacity:0;

    }

    12%{

        opacity:.85;

    }

    65%{

        opacity:.18;

    }

    100%{

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

        opacity:0;

    }

}



/*======================================================================
    DATUM
    OUTER RING
======================================================================*/

#datumOuter{

    animation:

        datumOuterRotate

        36s

        linear

        infinite;

}



/*======================================================================
    DATUM
    INNER RING
======================================================================*/

#datumInner{

    animation:

        datumInnerRotate

        54s

        linear

        infinite;

}



/*======================================================================
    DATUM
    CENTRE
======================================================================*/

#datumCentre{

    animation:

        datumCentrePulse

        4.5s

        ease-in-out

        infinite;

}



/*======================================================================
    KEYFRAMES
======================================================================*/

@keyframes datumOuterRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



@keyframes datumInnerRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(-360deg);

    }

}



@keyframes datumCentrePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(.72);

        opacity:.65;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}



/*======================================================================
    PERFORMANCE
======================================================================*/

.pulseRing,
.pulseCore,
#datumOuter,
#datumInner,
#datumCentre{

    will-change:

        transform,

        opacity;

}



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

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

    .pulseRing,
    #datumOuter,
    #datumInner,
    #datumCentre{

        animation:none !important;

    }

}