/* ==========================================================
   PHASE 2
   CINEMATIC DEPTH ENGINE
========================================================== */

:root{

    --mouseX:0px;
    --mouseY:0px;

}

/* ==========================================================
   CAMERA
========================================================== */

body{

    perspective:1800px;

}

.scene{

    position:fixed;
    inset:0;

    overflow:hidden;

    transform-style:preserve-3d;

    pointer-events:none;

}

/* ==========================================================
   HALLWAY
========================================================== */

.hallway{

    position:absolute;

    inset:-10%;

    background:

        linear-gradient(
            to bottom,

            rgba(255,255,255,.015),

            transparent 18%
        ),

        radial-gradient(

            ellipse at center,

            rgba(255,255,255,.04),

            transparent 70%

        ),

        linear-gradient(

            #0b0d0f,

            #090a0c

        );

    transform:

        translateZ(-400px)

        translateX(calc(var(--mouseX)*-.35))

        translateY(calc(var(--mouseY)*-.35))

        scale(1.25);

}
/* ==========================================================
   LIGHT SHAFTS
========================================================== */

.light-shaft{

    position:absolute;

    top:-40vh;

    width:140px;

    height:220vh;

    background:

        linear-gradient(

            rgba(255,255,255,.12),

            rgba(255,255,255,.02),

            transparent

        );

    filter:blur(45px);

    opacity:.22;

    mix-blend-mode:screen;

}

.light1{

    left:14%;

    animation:

        shaft1 22s ease-in-out infinite;

}

.light2{

    left:48%;

    animation:

        shaft2 28s ease-in-out infinite;

}

.light3{

    right:12%;

    animation:

        shaft3 35s ease-in-out infinite;

}

@keyframes shaft1{

50%{

transform:

translateY(30px)

translateX(15px);

}

}

@keyframes shaft2{

50%{

transform:

translateY(-25px);

}

}

@keyframes shaft3{

50%{

transform:

translateX(-25px);

}

}

/* ==========================================================
   PREMIUM GLASS
========================================================== */

.glass{

position:relative;

overflow:hidden;

}

.glass::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

125deg,

rgba(255,255,255,.16),

transparent 22%,

transparent 70%,

rgba(255,255,255,.04)

);

opacity:.9;

pointer-events:none;

}

.glass::after{

content:"";

position:absolute;

top:-120%;

left:-60%;

width:45%;

height:340%;

background:

linear-gradient(

transparent,

rgba(255,255,255,.22),

transparent

);

transform:

rotate(28deg);

animation:

glassSweep 9s linear infinite;

}

@keyframes glassSweep{

100%{

left:180%;

}

}

/* ==========================================================
   FLOATING DUST DEPTH
========================================================== */

.particle{

box-shadow:

0 0 8px rgba(255,255,255,.35);

}

.particle:nth-child(3n){

animation-duration:38s;

}

.particle:nth-child(5n){

animation-duration:22s;

}

.particle:nth-child(7n){

filter:blur(2px);

opacity:.08;

transform:scale(2);

}

/* ==========================================================
   CINEMATIC LOGO
========================================================== */

.logo{

position:relative;

}

.logo::after{

content:"";

position:absolute;

left:-10%;

right:-10%;

bottom:-20px;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.3),

transparent

);

opacity:.45;

}

/* ==========================================================
   CARDS
========================================================== */

.card,

.glass{

transform-style:preserve-3d;

transition:

transform .6s,

box-shadow .6s;

}

.card:hover,

.glass:hover{

transform:

translateY(-10px)

rotateX(4deg)

rotateY(-3deg);

box-shadow:

0 40px 90px rgba(0,0,0,.45);

}

/* ==========================================================
   PHASE 2
   3D CORRIDOR
========================================================== */

.corridor{

    position:absolute;

    inset:0;

    pointer-events:none;

    transform-style:preserve-3d;

}

/* ==========================================================
   FLOOR
========================================================== */

.floor{

    position:absolute;

    left:-30vw;
    right:-30vw;
    bottom:-35vh;

    height:75vh;

    transform:

        rotateX(78deg)
        translateZ(-180px);

    background:

        linear-gradient(

            rgba(255,255,255,.035),

            rgba(255,255,255,.01)

        );

    border-top:

        1px solid rgba(255,255,255,.08);

}

/* tile lines */

.floor::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        repeating-linear-gradient(

            90deg,

            transparent 0,

            transparent 119px,

            rgba(255,255,255,.025) 120px

        ),

        repeating-linear-gradient(

            transparent 0,

            transparent 119px,

            rgba(255,255,255,.02) 120px

        );

    opacity:.45;

}

/* ==========================================================
   LEFT WALL
========================================================== */

.wall-left{

    position:absolute;

    left:-15vw;
    top:-5vh;

    width:40vw;
    height:120vh;

    transform:

        rotateY(70deg)
        translateZ(-420px);

    background:

        linear-gradient(

            to right,

            rgba(255,255,255,.03),

            rgba(255,255,255,.006)

        );

}

/* ==========================================================
   RIGHT WALL
========================================================== */

.wall-right{

    position:absolute;

    right:-15vw;
    top:-5vh;

    width:40vw;
    height:120vh;

    transform:

        rotateY(-70deg)
        translateZ(-420px);

    background:

        linear-gradient(

            to left,

            rgba(255,255,255,.03),

            rgba(255,255,255,.006)

        );

}

/* ==========================================================
   CEILING
========================================================== */

.ceiling{

    position:absolute;

    left:-20vw;
    right:-20vw;
    top:-55vh;

    height:75vh;

    transform:

        rotateX(-82deg)
        translateZ(-260px);

    background:

        linear-gradient(

            rgba(255,255,255,.02),

            transparent

        );

}

/* ==========================================================
   FLUORESCENT LIGHTS
========================================================== */

.fixture{

    position:absolute;

    width:180px;
    height:22px;

    background:

        rgba(255,255,255,.95);

    filter:

        blur(1px);

    box-shadow:

        0 0 18px rgba(255,255,255,.45),
        0 0 60px rgba(255,255,255,.18);

}

.fixture:nth-child(1){

    top:10%;
    left:50%;
    transform:translateX(-50%);

    animation:
        flicker1 14s infinite;

}

.fixture:nth-child(2){

    top:32%;
    left:50%;
    transform:translateX(-50%);

    animation:
        flicker2 19s infinite;

}

.fixture:nth-child(3){

    top:54%;
    left:50%;
    transform:translateX(-50%);

    animation:
        flicker3 27s infinite;

}

@keyframes flicker1{

0%,96%,100%{

opacity:1;

}

97%{

opacity:.2;

}

98%{

opacity:1;

}

99%{

opacity:.45;

}

}

@keyframes flicker2{

0%,98%,100%{

opacity:1;

}

99%{

opacity:.35;

}

}

@keyframes flicker3{

0%,97%,100%{

opacity:1;

}

98%{

opacity:.15;

}

99%{

opacity:.7;

}

}

/* ==========================================================
   REFLECTIVE FLOOR
========================================================== */

.floor-reflection{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:45vh;

    background:

        linear-gradient(

            rgba(255,255,255,.03),

            transparent

        );

    mix-blend-mode:screen;

    filter:blur(12px);

    opacity:.35;

}

/* ==========================================================
   DISTANT LIGHT
========================================================== */

.end-light{

    position:absolute;

    top:18%;
    left:50%;

    width:14px;
    height:14px;

    margin-left:-7px;

    border-radius:50%;

    background:white;

    filter:

        blur(10px);

    box-shadow:

        0 0 80px white,
        0 0 180px rgba(255,255,255,.35);

    animation:

        distantPulse 8s ease-in-out infinite;

}

@keyframes distantPulse{

50%{

opacity:.45;

transform:scale(.85);

}

}

/* ==========================================================
   CAMERA DRIFT
========================================================== */

main{

    animation:

        cameraFloat 32s ease-in-out infinite;

}

@keyframes cameraFloat{

0%{

transform:
translate3d(0,0,0);

}

25%{

transform:
translate3d(6px,-4px,0);

}

50%{

transform:
translate3d(-5px,3px,0);

}

75%{

transform:
translate3d(4px,5px,0);

}

100%{

transform:
translate3d(0,0,0);

}

}