/* =========================================
   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:#a76f44;

    letter-spacing:0;

    text-shadow:
        0 2px 0 #6e3f1c,
        2px 2px 0 #6e3f1c;

}


/* 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: -10%;

    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: -32%;

    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.60;

    z-index: 1;
}


/* Middle faded layer */

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

    opacity: 0.80;

    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;
}

/* =========================================
   CONNECT BUTTON INTERACTION
========================================= */

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


/* Hover: lift the SVG and text together */

.landing-page:has(.connect-button:not(:disabled):hover)
.scene-element--button-base {
    transform:
        translate(-50%, calc(-50% - 3px))
        scale(1.02);

    filter:
        brightness(1.07)
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.22));
}


.landing-page:has(.connect-button:not(:disabled):hover)
.connection-area {
    transform:
        translate(-50%, calc(-50% - 3px))
        scale(1.02);
}


/* Click: press the full button inward */

.landing-page:has(.connect-button:not(:disabled):active)
.scene-element--button-base {
    transform:
        translate(-50%, calc(-50% + 3px))
        scale(0.97);

    filter:
        brightness(0.92)
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}


.landing-page:has(.connect-button:not(:disabled):active)
.connection-area {
    transform:
        translate(-50%, calc(-50% + 3px))
        scale(0.97);
}


/* Disabled while searching */

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