/* =========================================
   SIX STRINGS HIGHER
   SCENE 02 — THE TEACHER
========================================= */


/* =========================================
   TEACHER SECTION
========================================= */

:root {

    /* tint for the guitar in the illustrated room (none needed now the
       guitar is drawn in the same anime style)
       (also used by guitar-animation.js while it lands) */
    --scene-guitar-tint: brightness(1) saturate(1) sepia(0);
}


.teacher-section {

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 68% 48%,
            rgba(100, 67, 40, 0.20),
            transparent 38%
        ),
        #0b0908;

    display: flex;
    align-items: center;
}


/* =========================================
   SCENE INDICATOR
========================================= */

.teacher-indicator {

    position: absolute;

    top: 50%;
    left: 5vw;

    transform:
        translateY(-50%)
        rotate(-90deg);

    transform-origin: center;

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


.teacher-indicator .indicator-line {

    display: block;

    width: 42px;
    height: 1px;

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


/* =========================================
   TEACHER CONTENT
========================================= */

.teacher-content {

    position: relative;

    z-index: 20;

    width: min(500px, 38vw);

    margin-left: 14vw;

    margin-top: 2vh;
}


.teacher-content .eyebrow {

    margin-bottom: 22px;
}


.teacher-content h2 {

    margin: 0 0 28px;

    font-family: var(--serif);

    font-size: clamp(
        48px,
        5vw,
        76px
    );

    font-weight: 400;

    line-height: 0.91;

    letter-spacing: -0.045em;

    color: var(--cream);
}


.teacher-description {

    max-width: 390px;

    margin: 0 0 34px;

    font-family: var(--serif);

    font-size: 18px;

    line-height: 1.55;

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


/* =========================================
   TEACHER CTA
========================================= */

.teacher-cta {

    display: inline-flex;

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

    gap: 28px;

    padding: 17px 24px;

    border: 1px solid var(--cream);

    background: transparent;

    color: var(--cream);

    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        gap 0.35s ease;
}


.teacher-cta span {

    font-size: 15px;

    line-height: 1;

    transition:
        transform 0.35s ease;
}


.teacher-cta:hover {

    background: var(--cream);

    color: var(--background);

    gap: 34px;
}


.teacher-cta:hover span {

    transform: translateX(4px);
}


/* =========================================
   TEACHER IMAGE STAGE
========================================= */

.teacher-stage {

    position: absolute;

    top: 0;
    right: 7vw;

    width: 48vw;
    height: 100%;

    display: flex;

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

    z-index: 10;

    pointer-events: none;
}


/* =========================================
   TEACHER IMAGE
========================================= */

.teacher-image {

    position: relative;

    width: min(620px, 44vw);

    max-height: 88vh;

    overflow: hidden;
}


/* Soft fade into the page on the left and bottom edges.
   Applied to the room and hands only, so the guitar
   is never dimmed by it. */

.teacher-bg,
.teacher-hands,
.flight-hands {

    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 18%),
        linear-gradient(to top, transparent 0%, #000 18%);

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(to right, transparent 0%, #000 18%),
        linear-gradient(to top, transparent 0%, #000 18%);

    mask-composite: intersect;
}


/* The scene keeps the illustration's aspect ratio
   and shrinks to fit short screens. */

.teacher-scene {

    position: relative;

    width: min(100%, calc(88vh * 1374 / 1145));

    aspect-ratio: 1374 / 1145;

    margin: 0 auto;
}


.teacher-scene img {

    position: absolute;

    display: block;

    max-width: none;
}


.teacher-bg,
.teacher-hands {

    inset: 0;

    width: 100%;
    height: 100%;
}


/* The hero guitar, placed in his arms.
   Position comes from the same key points
   guitar-animation.js uses for the landing. */

.teacher-guitar {

    left: 52.877%;
    top: 54.664%;

    width: 53.659%;
    height: auto;

    transform: translate(-50%, -50%) rotate(85deg);

    filter: var(--scene-guitar-tint);
}


.teacher-hands {

    pointer-events: none;
}


/* =========================================
   SUBTLE IMAGE DEPTH
========================================= */

.teacher-stage::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(111, 75, 45, 0.20),
            transparent 68%
        );

    filter: blur(20px);

    z-index: -1;
}


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

@media (min-width: 1400px) {

    .teacher-content {

        margin-left: 13vw;

    }


    .teacher-stage {

        right: 8vw;

    }


    .teacher-image {

        width: 580px;

    }

}


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

@media (max-width: 1000px) {

    .teacher-content {

        margin-left: 11vw;

        width: 43vw;

    }


    .teacher-content h2 {

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

    }


    .teacher-stage {

        right: 2vw;

        width: 50vw;

    }


    .teacher-image {

        width: 48vw;

    }


    .teacher-indicator {

        left: 3vw;

    }

}


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

@media (max-width: 800px) {

    .teacher-section {

        min-height: 100svh;

        padding:
            100px
            10vw
            80px;

        display: block;
    }


    /* =========================================
       MOBILE SCENE INDICATOR
    ========================================= */

    .teacher-indicator {

        position: absolute;

        top: 82px;
        left: 10vw;

        transform: none;

        transform-origin: initial;

        writing-mode: horizontal-tb;

        display: flex;

        align-items: center;

        gap: 10px;

        font-size: 8px;

        letter-spacing: 0.18em;
    }


    .teacher-indicator .indicator-line {

        width: 28px;
        height: 1px;
    }


    /* =========================================
       MOBILE TEACHER CONTENT
    ========================================= */

    .teacher-content {

        width: 100%;

        margin:
            45px
            0
            0;
    }


    .teacher-content .eyebrow {

        margin-bottom: 18px;
    }


    .teacher-content h2 {

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

        line-height: 0.91;
    }


    .teacher-description {

        font-size: 17px;

    }


    /* =========================================
       MOBILE TEACHER IMAGE
    ========================================= */

    .teacher-stage {

        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        height: auto;

        margin-top: 50px;

    }


    .teacher-image {

        width: 100%;

        max-height: none;

    }


    .teacher-image img {

        max-height: none;

    }

}