/* =========================================================
   STELLA SPECTRUM - LOADING SCREEN
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #c5d2dd;
}


/* =========================================================
   FULL SCREEN LOADING AREA
   ========================================================= */

.loading-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #e5edf3 0%,
            #d4e0e8 38%,
            #c3d1dc 70%,
            #b3c2ce 100%
        );
}


/* =========================================================
   TOP LEFT DECORATIVE SWEEP
   ========================================================= */

.loading-screen::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 260px;

    top: -130px;
    left: -80px;

    border-radius: 0 0 100% 0;

    background: rgba(224, 233, 239, 0.58);

    border-bottom: 3px solid rgba(255, 255, 255, 0.7);

    box-shadow:
        0 3px 0 rgba(218, 173, 64, 0.7);

    transform: rotate(-12deg);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   BOTTOM RIGHT DECORATIVE SWEEP
   ========================================================= */

.loading-screen::after {
    content: "";

    position: absolute;

    width: 580px;
    height: 340px;

    right: -180px;
    bottom: -190px;

    border-radius: 100% 0 0 0;

    background: rgba(224, 233, 239, 0.52);

    border-top: 3px solid rgba(255, 255, 255, 0.7);

    box-shadow:
        0 -3px 0 rgba(218, 173, 64, 0.7);

    transform: rotate(-8deg);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   WEBSITE UNDERNEATH
   ========================================================= */

.website {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: none;

    z-index: 1;

    opacity: 0;

    filter:
        brightness(0.35)
        blur(8px);

    transform: scale(1.02);

    transition:
        opacity 2.5s ease,
        filter 2.5s ease,
        transform 2.5s ease;

    pointer-events: none;
}

.website.reveal {
    opacity: 1;

    filter:
        brightness(1)
        blur(0);

    transform: scale(1);

    pointer-events: auto;
}


/* =========================================================
   VAULT
   ========================================================= */

.vault {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   VAULT DOORS
   ========================================================= */

.vault-door {
    position: absolute;

    top: 0;

    width: 50%;
    height: 100%;

    /*
     * Multiple very soft gradients create the appearance
     * of light reflecting across brushed silver metal.
     */
    background:

        /* Soft bright vertical reflection */
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(255,255,255,0.05) 18%,
            rgba(255,255,255,0.32) 31%,
            rgba(255,255,255,0.10) 43%,
            transparent 55%
        ),

        /* Second softer reflection */
        linear-gradient(
            78deg,
            transparent 35%,
            rgba(255,255,255,0.12) 48%,
            rgba(255,255,255,0.28) 54%,
            rgba(255,255,255,0.05) 62%,
            transparent 72%
        ),

        /* Brushed-metal bands */
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            rgba(70,95,112,0.018) 2px,
            rgba(70,95,112,0.018) 3px
        ),

        /* Main silver-blue metal */
        linear-gradient(
            110deg,
            #aebfcb 0%,
            #d7e1e7 17%,
            #b8c8d3 34%,
            #e8eef2 49%,
            #aebfcb 67%,
            #d4dee5 83%,
            #9fb2bf 100%
        );


    /*
     * Gives the metal depth without creating
     * a physical border around the door.
     */
    box-shadow:
        inset 0 0 60px rgba(255,255,255,0.22),
        inset 0 0 140px rgba(68,91,107,0.13),
        inset 0 35px 70px rgba(255,255,255,0.10),
        inset 0 -35px 70px rgba(66,87,101,0.10);


    /*
     * KEEP THIS EXACTLY THE SAME.
     * This controls your existing door movement.
     */
    transition:
        transform 2.8s cubic-bezier(
            0.77,
            0,
            0.175,
            1
        );

    z-index: 3;
}


/* =========================================================
   LEFT DOOR
   ========================================================= */

.vault-door-left {
    left: 0;

}


/* =========================================================
   RIGHT DOOR
   ========================================================= */

.vault-door-right {
    right: 0;

}

/* =========================================================
   OPTION 10 - DOOR DETAIL SYSTEM
   ========================================================= */

.door-detail {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   LARGE RECESSED FRAME
   ========================================================= */

.door-frame {
    position: absolute;

    top: 4%;
    bottom: 4%;

    width: 88%;

    border:
        1px solid rgba(65, 91, 108, 0.38);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.30),
        inset 0 0 18px rgba(60,82,98,0.08),
        0 1px 1px rgba(255,255,255,0.40);

    border-radius: 8px;
}

.vault-door-left .door-frame {
    left: 3%;
}

.vault-door-right .door-frame {
    right: 3%;
}


/* =========================================================
   RECESSED TECH LINES
   ========================================================= */

.tech-line {
    position: absolute;

    height: 18px;

    border-top:
        3px solid rgba(68, 94, 112, 0.58);

    border-bottom:
        2px solid rgba(255,255,255,0.58);

    filter:
        drop-shadow(
            0 2px 1px rgba(52,73,88,0.16)
        );
}


/* =========================================================
   TOP OUTER LINE
   ========================================================= */

.tech-line-top {
    top: 13%;

    width: 64%;
}

.vault-door-left .tech-line-top {
    left: 15%;

    transform: skewX(38deg);
}

.vault-door-right .tech-line-top {
    right: 15%;

    transform: skewX(-38deg);
}


/* =========================================================
   TOP INNER LINE
   ========================================================= */

.tech-line-top-inner {
    top: 22%;

    width: 56%;
}

.vault-door-left .tech-line-top-inner {
    left: 22%;

    transform: skewX(-35deg);
}

.vault-door-right .tech-line-top-inner {
    right: 22%;

    transform: skewX(35deg);
}


/* =========================================================
   CENTRE LINE
   ========================================================= */

.tech-line-middle {
    top: 50%;

    width: 58%;

    height: 4px;

    border: none;

    background:
        linear-gradient(
            to bottom,
            rgba(66,91,108,0.52),
            rgba(255,255,255,0.62),
            rgba(71,96,113,0.25)
        );
}

.vault-door-left .tech-line-middle {
    left: 13%;
}

.vault-door-right .tech-line-middle {
    right: 13%;
}


/* =========================================================
   BOTTOM INNER LINE
   ========================================================= */

.tech-line-bottom-inner {
    bottom: 22%;

    width: 56%;
}

.vault-door-left .tech-line-bottom-inner {
    left: 22%;

    transform: skewX(35deg);
}

.vault-door-right .tech-line-bottom-inner {
    right: 22%;

    transform: skewX(-35deg);
}


/* =========================================================
   BOTTOM OUTER LINE
   ========================================================= */

.tech-line-bottom {
    bottom: 13%;

    width: 64%;
}

.vault-door-left .tech-line-bottom {
    left: 15%;

    transform: skewX(-38deg);
}

.vault-door-right .tech-line-bottom {
    right: 15%;

    transform: skewX(38deg);
}

/* =========================================================
   OPTION 10 - GOLD LIGHTS
   ========================================================= */

.gold-bar {
    position: absolute;

    z-index: 2;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #9b6d14 0%,
            #d9a92e 12%,
            #ffd85c 26%,
            #fff1a0 38%,
            #fffbe5 50%,
            #fff1a0 62%,
            #ffd85c 74%,
            #d9a92e 88%,
            #9b6d14 100%
        );

    box-shadow:
        0 0 3px rgba(255, 250, 218, 1),
        0 0 8px rgba(255, 220, 90, 0.95),
        0 0 18px rgba(240, 184, 45, 0.80),
        0 0 32px rgba(218, 173, 64, 0.48);

    filter:
        brightness(1.25)
        saturate(1.15);
}


/* =========================================================
   TALL OUTER GOLD BAR
   ========================================================= */

.gold-bar-outer {
    top: 22%;

    width: 8px;
    height: 56%;

    background:
        linear-gradient(
            to right,
            #8d6212 0%,
            #d5a127 12%,
            #ffd95c 26%,
            #fff2a3 38%,
            #fffde8 50%,
            #fff2a3 62%,
            #ffd95c 74%,
            #d5a127 88%,
            #8d6212 100%
        );

    box-shadow:
        0 0 3px rgba(255, 250, 218, 1),
        0 0 9px rgba(255, 220, 90, 0.95),
        0 0 20px rgba(240, 184, 45, 0.78),
        0 0 36px rgba(218, 173, 64, 0.42);
}

.vault-door-left .gold-bar-outer {
    left: 7%;
}

.vault-door-right .gold-bar-outer {
    right: 7%;
}


/* =========================================================
   TOP DIAGONAL GOLD BAR
   ========================================================= */

.gold-bar-top {
    top: 15%;

    width: 105px;
    height: 7px;
}

.vault-door-left .gold-bar-top {
    left: 13%;

    transform: rotate(42deg);
}

.vault-door-right .gold-bar-top {
    right: 13%;

    transform: rotate(-42deg);
}


/* =========================================================
   BOTTOM DIAGONAL GOLD BAR
   ========================================================= */

.gold-bar-bottom {
    bottom: 15%;

    width: 105px;
    height: 7px;
}

.vault-door-left .gold-bar-bottom {
    left: 13%;

    transform: rotate(-42deg);
}

.vault-door-right .gold-bar-bottom {
    right: 13%;

    transform: rotate(42deg);
}

.gold-bar::before {
    content: "";

    position: absolute;

    inset: -5px -8px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(48, 69, 83, 0.68),
            rgba(105, 124, 136, 0.32),
            rgba(42, 62, 76, 0.68)
        );

    border:
        1px solid rgba(52,76,92,0.55);

    box-shadow:
        inset 0 2px 4px rgba(38,57,70,0.40),
        0 1px 1px rgba(255,255,255,0.40);

    z-index: -1;
}

/* =========================================================
   VAULT DOOR OPENING SEQUENCE
   ========================================================= */

/* STAGE 1 - DOORS CRACK OPEN SLIGHTLY */

.vault.crack .vault-door-left {
    transform: translateX(-0.5%);
}

.vault.crack .vault-door-right {
    transform: translateX(0.5%);
}


/* STAGE 2 - DOORS OPEN COMPLETELY */

.vault.open .vault-door-left {
    transform: translateX(-100%);
}

.vault.open .vault-door-right {
    transform: translateX(100%);
}

/* =========================================================
   SMOKE - FULL HEIGHT OF CENTRE OPENING
   ========================================================= */

.smoke {
    position: absolute;

    left: 50%;
    top: 0;

    width: 140px;
    height: 100%;

    transform: translateX(-50%);

    opacity: 0;

    z-index: 7;

    pointer-events: none;
}


/* Individual smoke clouds */

.smoke span {
    position: absolute;

    left: 50%;

    width: 110px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(235, 240, 243, 0.86) 22%,
        rgba(205, 215, 221, 0.72) 42%,
        rgba(170, 184, 193, 0.52) 62%,
        rgba(135, 151, 161, 0.28) 76%,
        transparent 88%
        );

    filter: blur(8px);

    transform: translateX(-50%);
}


/* =========================================================
   DISTRIBUTE SMOKE DOWN THE ENTIRE CENTRE SEAM
   ========================================================= */

.smoke span:nth-child(1) {
    top: -5%;
}

.smoke span:nth-child(2) {
    top: 18%;
}

.smoke span:nth-child(3) {
    top: 40%;
}

.smoke span:nth-child(4) {
    top: 62%;
}

.smoke span:nth-child(5) {
    top: 84%;
}

.vault.smoking .smoke {
    animation:
        smokeReveal 3s ease-out forwards;
}

@keyframes smokeReveal {

    0% {
        opacity: 0;
        transform:
            translateX(-50%)
            scaleX(0.75);
    }

    20% {
        opacity: 0.85;
        transform:
            translateX(-50%)
            scaleX(1.50);
    }

    60% {
        opacity: 0.75;
        transform:
            translateX(-50%)
            scaleX(1.95);
    }

    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            scaleX(2.55);
    }
}

/* =========================================================
   INDEPENDENT SMOKE TRIGGER
   DOES NOT INTERACT WITH VAULT OR MECHANISM
   ========================================================= */

.smoke.smoke-active {
    animation: smokeReveal 3s ease-out forwards;
}


/* =========================================================
   RAINBOW FIREWORKS
   ========================================================= */

.rainbow-burst {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 20px;
    height: 20px;

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

    opacity: 0;

    z-index: 9;

    pointer-events: none;
}


/* =========================================================
   INDIVIDUAL RAINBOW PARTICLES
   ========================================================= */

.rainbow-burst i {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 70px;

    margin-left: -7px;

    border-radius: 50%;

    transform-origin: 50% 0;

    opacity: 0;

    background:
        linear-gradient(
            to bottom,
            #ff3b30 0%,
            #ff9500 18%,
            #ffd60a 34%,
            #34c759 50%,
            #32ade6 67%,
            #5856d6 83%,
            #ff2d95 100%
        );

    box-shadow:
        0 0 7px rgba(255,255,255,0.95),
        0 0 14px rgba(255,255,255,0.55);
}


/* =========================================================
   PARTICLE DIRECTIONS
   ========================================================= */

.rainbow-burst i:nth-child(1) {
    --angle: 0deg;
}

.rainbow-burst i:nth-child(2) {
    --angle: 30deg;
}

.rainbow-burst i:nth-child(3) {
    --angle: 60deg;
}

.rainbow-burst i:nth-child(4) {
    --angle: 90deg;
}

.rainbow-burst i:nth-child(5) {
    --angle: 120deg;
}

.rainbow-burst i:nth-child(6) {
    --angle: 150deg;
}

.rainbow-burst i:nth-child(7) {
    --angle: 180deg;
}

.rainbow-burst i:nth-child(8) {
    --angle: 210deg;
}

.rainbow-burst i:nth-child(9) {
    --angle: 240deg;
}

.rainbow-burst i:nth-child(10) {
    --angle: 270deg;
}

.rainbow-burst i:nth-child(11) {
    --angle: 300deg;
}

.rainbow-burst i:nth-child(12) {
    --angle: 330deg;
}


/* =========================================================
   INDEPENDENT FIREWORKS TRIGGER
   ========================================================= */

.rainbow-burst.fireworks-active {
    opacity: 1;
}

.rainbow-burst.fireworks-active i {
    animation:
         rainbowShoot 1.8s
        ease-out
        forwards;
}


/* =========================================================
   FIREWORK SHOOTING ANIMATION
   ========================================================= */

@keyframes rainbowShoot {

    0% {
        opacity: 0;

        height: 160px;

        transform:
            rotate(var(--angle))
            translateY(0)
            scale(0.3);
    }


    10% {
        opacity: 1;

        height: 360px;
    }


    35% {
        opacity: 1;

        height: 640px;

        transform:
            rotate(var(--angle))
            translateY(-70px)
            scale(1);
    }


    65% {
        opacity: 1;

        height: 640px;

        transform:
            rotate(var(--angle))
            translateY(-300px)
            scale(1);
    }


    100% {
        opacity: 1;

        height: 640px;

        transform:
            rotate(var(--angle))
            translateY(-100vmax)
            scale(1);
    }
}


/* =========================================================
   MECHANISM
   ========================================================= */

.mechanism {
    position: absolute;

    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: visible;

    z-index: 10;
}


/* =========================================================
   MECHANISM ATTACHED TO LEFT VAULT DOOR
   ========================================================= */

/* Normal closed position */
.mechanism {
    transition:
        transform 2.8s cubic-bezier(
            0.77,
            0,
            0.175,
            1
        );
}


/* STAGE 1
   Move slightly left with the left door
*/
.loading-screen:has(.vault.crack) .mechanism {
    transform: translateX(-0.25vw);
}


/* =========================================================
   MECHANISM - FOLLOW LEFT DOOR THEN CONTINUE OFF SCREEN
   ========================================================= */

.loading-screen:has(.vault.open) .mechanism {
    animation:
        mechanismExit 3.5s cubic-bezier(
            0.77,
            0,
            0.175,
            1
        ) forwards;
}


@keyframes mechanismExit {

    /*
     * First part:
     * mechanism travels with the left door
     */
    0% {
        transform: translateX(-0.25vw);
    }

    80% {
        transform: translateX(-50vw);
    }


    /*
     * Second part:
     * left door is now off screen,
     * mechanism continues travelling until
     * its remaining half clears the screen
     */
    100% {
        transform: translateX(calc(-50vw - 320px));
    }
}


/* =========================================================
   IMPORTANT:
   KEEP CENTER ANIMATION SAME SIZE
   ========================================================= */

.mechanism object {
    display: block;

    width: 600px;
    height: 600px;

    max-width: none;
    max-height: none;

    border: none;

    overflow: visible;

    pointer-events: auto;
}


/* =========================================================
   SMALLER LAPTOP / TABLET SCREENS
   ========================================================= */

@media (max-height: 800px) {

    .mechanism object {
        width: 600px;
        height: 600px;
    }
}


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

@media (max-width: 600px) {

    .mechanism object {
        width: 100vw;
        height: 100vw;
    }

    .loading-screen::before {
        width: 320px;
        height: 170px;

        top: -90px;
        left: -80px;
    }

    .loading-screen::after {
        width: 360px;
        height: 220px;

        right: -130px;
        bottom: -130px;
    }
}