/* =========================================
   LEGACY APPRENTICE
   STEP 1: BLACK BACKGROUND + WOOD
========================================= */

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

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

body {
    overflow: hidden;
    background: #181818;
}


/* Full-screen scene */

.landing-page {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #000000;
}


/* Scene container */

.workshop-scene {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* Hide every asset first */

.scene-element {
    display: none;

    position: absolute;

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


/* Show only the wood */

.scene-element--wood {
    display: block;

    left: 50%;
    top: 50%;

    width: min(58vw, 600px);
    height: auto;

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

/*=========================================
    TITLE
=========================================*/

.landing-content{

    position:absolute;

    inset:0;

    z-index:10;

}

.brand{

    position:absolute;

    left:50%;

    top:14.8%;

    transform:translateX(-50%);

    width:90%;

    text-align:center;

}

.brand h1{

    font-family:"Bowlby One SC",sans-serif;

    font-size:clamp(2.8rem,5vw,5rem);

    font-weight:400;

    line-height:2;

    text-transform:uppercase;

    color:#9a5a32;

    letter-spacing:0;

    text-shadow:
        0 1px 0 #71584a,
        1px 1px 0 rgba(0,0,0,.45);

}


/* Hide all HTML content for now */

.javascript-warning{
    display:none;
}

/*=========================================
    BUTTON BASE
=========================================*/

.scene-element--button-base{

    display:block;

    position:absolute;

    left:50%;
    top:50%;

    width:min(25vw,320px);

    height:auto;

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

}


/*=========================================
    CONNECTION AREA
=========================================*/

.connection-area{

    position:absolute;

    left:50%;
    top:50%;

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

    width:min(23vw,360px);

    height:min(7vw,110px);

    z-index:20;

}


/*=========================================
    HTML BUTTON
=========================================*/

.connect-button{

    width:100%;
    height:100%;

    border:none;

    outline:none;

    background:transparent;

    cursor:pointer;

}


.connect-button__label{

    display:flex;

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

    width:100%;
    height:100%;

    font-family:"Squada One",sans-serif;

    font-size:clamp(1.4rem,2.5vw,2.5rem);

    font-weight:400;

    color:#fff0d6;

    letter-spacing:.02em;

    user-select:none;

}

/*=========================================
    INSTRUCTIONS
=========================================*/

.connection-instructions{

    position:absolute;

    left:47%;
    top:69%;

    transform:translateX(-50%);

    width:min(420px,80vw);

    text-align:center;

    z-index:20;

}

.connection-instructions p{

    margin:0;

    font-family:"Oswald",sans-serif;

    font-size:clamp(.85rem,1.15vw,1.1rem);

    font-weight:600;

    line-height:1.45;

    letter-spacing:.03em;

    text-transform:uppercase;

    color:#9a5a32;

}

.connection-instructions p:first-child{

    margin-bottom:6px;

}

/*=========================================
    BOTTOM LEFT SILVER
=========================================*/

.scene-element--silver{

    display:block;

    position:absolute;

    left:-6%;

    bottom:-18%;

    width:min(34vw,300px);

    height:auto;

    z-index:2;

    pointer-events:none;

    user-select:none;

}

/* =========================================
   BOTTOM-LEFT SILVER GROUP
========================================= */

.scene-element--silver {
    display: block;

    position: absolute;

    left: -5%;
    bottom: -5%;

    width: min(33vw, 300px);
    height: auto;

    z-index: 1;

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

    transform: rotate(-3deg);

    opacity: 60%;
}


/* Second silver layer */

.workshop-scene::before {
    content: "";

    position: absolute;

    left: 7%;
    bottom: -20%;

    width: min(30vw, 300px);
    aspect-ratio: 456 / 480;

    background:
        url("../assets/elements/silver.svg")
        center / contain
        no-repeat;

    z-index: 2;

    pointer-events: none;

    transform: rotate(8deg);

    opacity: 80%;
}


/* Third silver layer */

.workshop-scene::after {
    content: "";

    position: absolute;

    left: 20%;
    bottom: -35%;

    width: min(27vw, 300px);
    aspect-ratio: 456 / 480;

    background:
        url("../assets/elements/silver.svg")
        center / contain
        no-repeat;

    z-index: 3;

    pointer-events: none;

    transform: rotate(-7deg);
}

/* =========================================
   TOP-RIGHT SILVER GROUP
   Separate from bottom-left silver
========================================= */

.silver-top-right {
    display: block;
    position: absolute;

    width: min(33vw, 500px);
    height: auto;

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


/* Farthest faded layer */

.silver-top-right--back {
    top: -50%;
    right: -5%;

    opacity: 0.28;

    z-index: 1;
}


/* Middle faded layer */

.silver-top-right--middle {
    top: -35%;
    right: -15%;

    opacity: 0.55;

    z-index: 2;
}


/* Main solid layer */

.silver-top-right--front {
    top: -20%;
    right: -25%;

    opacity: 1;

    z-index: 3;
}

/* =========================================
   CONNECTION STATUS
========================================= */

.connection-status {
    position: absolute;

    left: 210%;
    top: calc(340% + 18px);

    transform: translateX(-50%);

    width: max-content;
    max-width: 420px;

    font-family: "Oswald", sans-serif;

    font-size: 1.1rem;
    font-weight: 400;

    text-align: center;

    color: #9a5a32;
}

.connection-status[hidden] {
    display: none;
}

.connection-status[data-state="searching"] {
    color: #c58a61;
}

.connection-status[data-state="success"] {
    color: #6ca66f;
}

.connection-status[data-state="error"] {
    color: #c85c50;
}

.connect-button:disabled {
    cursor: default;
}

/* Animate the button text and SVG base together */

.scene-element--button-base,
.connect-button {
    transition:
        transform 160ms ease,
        filter 160ms ease;
}

.landing-page:has(.connect-button:hover)
.scene-element--button-base {
    transform:
        translate(-50%, -50%)
        scale(1.025);

    filter: brightness(1.07);
}

.landing-page:has(.connect-button:hover)
.connect-button {
    transform: scale(1.025);
}

.landing-page:has(.connect-button:active)
.scene-element--button-base {
    transform:
        translate(-50%, -50%)
        scale(0.975);

    filter: brightness(0.94);
}

.landing-page:has(.connect-button:active)
.connect-button {
    transform: scale(0.975);
}

/* =========================================
   ANIMATED SMOKE BACKGROUND
========================================= */

.smoke-canvas {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    z-index: 0;

    opacity: 2;

    pointer-events: none;
}

.workshop-scene {
    position: absolute;
    inset: 0;

    z-index: 1;
}

.landing-content {
    position: absolute;
    inset: 0;

    z-index: 10;
}


/* =========================================
   CONNECTION STATUS
========================================= */

.connection-status {
    position: absolute;

    left: 210%;
    top: calc(320% + 16px);

    transform: translateX(-50%);

    width: max-content;
    max-width: 440px;

    font-family: "Oswald", sans-serif;

    font-size: 1.15rem;
    font-weight: 700;

    text-align: center;

    color: #9a5a32;

    z-index: 30;
}

.connection-status[hidden] {
    display: none;
}

.connection-status[data-state="searching"] {
    color: #c98b5d;
}

.connection-status[data-state="success"] {
    color: #74a975;
}

.connection-status[data-state="error"] {
    color: #d06458;
}

/* =========================================
   PAGE LOAD ANIMATION
   Does not overwrite element positioning
========================================= */

.scene-element--wood,
.brand,
.scene-element--button-base,
.connection-area,
.connection-instructions,
.scene-element--silver,
.silver-top-right {
    opacity: 0;
}


/* Wood */

.landing-page.page-loaded .scene-element--wood {
    animation: wood-load 750ms cubic-bezier(.2, .8, .2, 1)
        80ms forwards;
}


/* Silver corners */

.landing-page.page-loaded .scene-element--silver,
.landing-page.page-loaded .silver-top-right {
    animation: decoration-load 700ms ease
        160ms forwards;
}


/* Title */

.landing-page.page-loaded .brand {
    animation: text-load 550ms ease
        280ms forwards;
}


/* Button background and button text */

.landing-page.page-loaded .scene-element--button-base,
.landing-page.page-loaded .connection-area {
    animation: button-load 580ms cubic-bezier(.2, .8, .2, 1)
        420ms forwards;
}


/* Instructions */

.landing-page.page-loaded .connection-instructions {
    animation: text-load 520ms ease
        570ms forwards;
}


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

@keyframes wood-load {
    from {
        opacity: 0;
        scale: .93;
        filter: blur(5px);
    }

    to {
        opacity: 1;
        scale: 1;
        filter: blur(0);
    }
}


@keyframes decoration-load {
    from {
        opacity: 0;
        scale: 1.06;
        filter: blur(6px);
    }

    to {
        opacity: var(--final-opacity, 1);
        scale: 1;
        filter: blur(0);
    }
}


@keyframes text-load {
    from {
        opacity: 0;
        translate: 0 14px;
        filter: blur(3px);
    }

    to {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
    }
}


@keyframes button-load {
    from {
        opacity: 0;
        translate: 0 16px;
        scale: .94;
        filter: blur(4px);
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        filter: blur(0);
    }
}


/* Preserve the faded silver layers */

.workshop-scene::before {
    --final-opacity: .55;
}

.workshop-scene::after {
    --final-opacity: .28;
}

.silver-top-right--back {
    --final-opacity: .28;
}

.silver-top-right--middle {
    --final-opacity: .55;
}

.silver-top-right--front {
    --final-opacity: 1;
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .scene-element--wood,
    .brand,
    .scene-element--button-base,
    .connection-area,
    .connection-instructions,
    .scene-element--silver,
    .silver-top-right {
        opacity: 1;
        animation: none !important;
        translate: none;
        scale: 1;
        filter: none;
    }
}