/* =========================================
   SIX STRINGS HIGHER
   HERO / SCENE 01
========================================= */


/* =========================================
   HERO SECTION
========================================= */

.hero-section {

    position: relative;

    width: 100%;

    min-height: 100vh;
    height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 52%,
            rgba(100, 67, 40, 0.18),
            transparent 38%
        ),
        #0b0908;
}


/* =========================================
   HERO CONTENT
========================================= */

.hero-content {

    position: absolute;

    left: 7vw;
    top: calc(50% + 10px);

    transform: translateY(-50%);

    width: min(1000px, 58vw);

    z-index: 20;
}


.hero-content .eyebrow {

    margin-bottom: 22px;
}


.hero-content h1 {

    margin: 0 0 clamp(26px, 4vh, 44px);

    font-family: var(--serif);

    font-size: clamp(
        52px,
        min(6.4vw, 12.5vh),
        124px
    );

    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -0.045em;

    /* always three lines: SIX STRINGS. / ONE STARTING / POINT. */
    max-width: 7em;

    color: var(--cream);
}


.hero-description {

    max-width: 520px;

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(18px, min(1.35vw, 2.6vh), 23px);

    line-height: 1.5;

    color: var(--cream-muted);
}


/* Scene label hugs the left edge so the headline can use the space */

#hero .scene-indicator {

    left: 2.4vw;
}


/* =========================================
   GUITAR STAGE
========================================= */

.guitar-stage {

    position: absolute;

    inset: 0;

    display: flex;

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

    pointer-events: none;

    z-index: 10;
}


/* Desktop: the stage floats over the page so the
   guitar can travel into the teacher scene
   (class added by guitar-animation.js) */

.guitar-stage.is-floating {

    position: fixed;

    inset: 0;

    z-index: 40;
}


/* Phones: floating layer the guitar moves into after
   the hero, so it can travel into the teacher scene
   (added by JS) */

.guitar-flight-layer {

    position: fixed;

    inset: 0;

    z-index: 40;

    pointer-events: none;
}


/* His arms & hands, carried above the flying guitar
   so it lands underneath them (added by JS) */

.flight-hands {

    position: absolute;

    display: block;

    max-width: none;

    z-index: 50;

    pointer-events: none;
}


/* =========================================
   GUITAR ASSEMBLY
========================================= */

.guitar-assembly {

    position: absolute;

    /* big: nearly the full height below the header */
    left: 75%;
    top: calc(50% + 39px);

    width: min(40vw, calc((100vh - 100px) * 1024 / 1536));

    aspect-ratio: 1024 / 1536;

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

    z-index: 10;
}


/* =========================================
   GUITAR PARTS
   Each part is cut from the master image and
   positioned as a % of the 1024 x 1536 frame,
   so together they form the full guitar.
========================================= */

.guitar-assembly {

    container-type: inline-size;
}


.guitar-part {

    position: absolute;

    display: block;

    height: auto;
    max-width: none;

    pointer-events: none;

    user-select: none;

    will-change: transform;
}


/* =========================================
   STRINGS
========================================= */

.guitar-strings {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    z-index: 20;

    pointer-events: none;
}


.guitar-string {

    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Wound bronze strings (low E, A, D, G) */

.guitar-string[data-string="1"] { stroke: #c9a46a; stroke-width: 3.4; }
.guitar-string[data-string="2"] { stroke: #c9a46a; stroke-width: 3.0; }
.guitar-string[data-string="3"] { stroke: #cfae78; stroke-width: 2.6; }
.guitar-string[data-string="4"] { stroke: #d6b886; stroke-width: 2.2; }

/* Plain steel strings (B, high E) */

.guitar-string[data-string="5"] { stroke: #e2ddd3; stroke-width: 1.7; }
.guitar-string[data-string="6"] { stroke: #e8e4dc; stroke-width: 1.4; }


/* =========================================
   PART LABELS (exploded view)
========================================= */

.part-labels {

    position: absolute;

    inset: 0;

    z-index: 30;

    pointer-events: none;
}


.part-label {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 0.9em;

    white-space: nowrap;

    font-family: var(--sans);

    /* scales with the guitar so it stays in proportion */
    font-size: clamp(7px, 2.1cqw, 11px);

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--cream-muted);

    opacity: 0;

    transform: translateY(-50%);
}


.part-label::before {

    content: "";

    width: 3.2em;

    height: 1px;

    background: var(--line-strong);
}


.part-label.is-left {

    flex-direction: row-reverse;

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


.part-label b {

    font-weight: 400;

    color: var(--wood-light);
}


/* =========================================
   TECHNICAL ANNOTATIONS
   Live inside the guitar, so they track it.
========================================= */

.technical-notes {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 15;

    font-family: var(--sans);

    /* sized from the guitar's width */
    font-size: clamp(9px, 1.9cqw, 12px);

    letter-spacing: 0.16em;

    color: var(--cream-muted);
}


.note {

    position: absolute;

    transform: translateY(-50%);

    opacity: 0.7;

    white-space: nowrap;
}


.note.is-left {

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


/* =========================================
   SCROLL PROMPT
========================================= */

.scroll-prompt {

    position: absolute;

    left: 7vw;
    bottom: 6vh;

    display: flex;

    align-items: center;

    gap: 14px;

    z-index: 20;

    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: var(--cream-muted);
}


.scroll-arrow {

    font-size: 18px;

    animation:
        scrollBounce 1.8s ease-in-out infinite;
}


/* Skip link next to the scroll prompt */

.skip-intro {

    margin-left: 22px;

    padding-left: 22px;

    border-left: 1px solid var(--line-strong);

    color: var(--cream-muted);

    text-decoration: none;

    transition: color 0.3s ease;
}


.skip-intro:hover,
.skip-intro:focus-visible {

    color: var(--cream);
}


@keyframes scrollBounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(5px);

    }
}


/* =========================================
   HERO CTA
========================================= */

.hero-cta {

    position: absolute;

    left: 7vw;
    bottom: 6vh;

    z-index: 30;

    opacity: 0;

    pointer-events: auto;
}


.hero-cta p {

    margin-bottom: 13px;

    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: var(--cream-muted);
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1400px) {

    .hero-content {

        left: 7vw;

    }


    .guitar-assembly {

        left: 75%;

    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .hero-content {

        left: 7vw;

        width: 50vw;

    }


    .hero-content h1 {

        font-size:
            clamp(
                44px,
                6vw,
                68px
            );

    }


    .guitar-assembly {

        left: 76%;

        width: min(44vw, calc((100vh - 100px) * 1024 / 1536));

    }

}


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

@media (max-width: 800px) {

    .hero-section {

        height: auto;

        min-height: 100svh;

        padding-top: 120px;

        padding-bottom: 100px;

        display: block;

    }


    .hero-content {

        position: relative;

        left: auto;
        top: auto;

        width: 80%;

        margin-left: 12vw;

        transform: none;

    }


    .hero-content h1 {

        font-size:
            clamp(
                48px,
                7vw,
                72px
            );

        line-height: 0.88;

    }


    .hero-description {

        font-size: 17px;

    }


    .guitar-stage {

        position: relative;

        height: 55vh;

        margin-top: 20px;

    }


    .guitar-assembly {

        position: absolute;

        left: 50%;
        top: 50%;

        width: 75vw;

        aspect-ratio: 1024 / 1536;

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

    }


    .technical-notes,
    .part-labels {

        display: none;

    }


    .scroll-prompt {

        left: 12vw;

        bottom: 4vh;

    }


    .hero-cta {

        left: 12vw;

        bottom: 4vh;

        /* stays above the floating guitar as it passes */
        z-index: 45;

    }

}

/* =========================================
   REDUCED MOTION
   Show the assembled guitar and the CTA
   without any scroll animation.
========================================= */

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

    .hero-cta {

        opacity: 1;

    }


    .scroll-prompt {

        display: none;

    }

}