/* --------------------------------------------------------------
    Imports
-------------------------------------------------------------- */
    @import url('reset.css');
    @import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
    @import url("https://use.typekit.net/kll1dpe.css");
    @import url('root.css');
    @import url('ixd.css');
    @import url('responsive.css');

/* --------------------------------------------------------------
    Globals
-------------------------------------------------------------- */
    body{
        display: flex;
        font-family: "commuters-sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: var(--h6);
        line-height: 1.5;
    }

    strong{
        font-weight: 700;
    }

    .cta{
        position: relative;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        background: var(--c2);
        color: var(--c1);
        font-size: var(--h6);
        font-style: normal;
        font-weight: 600;
        border-radius: 2vmax;
        text-decoration: none;
        
        &::before{
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            width: 100%;
            height: 100%;
            border: 3px solid var(--c1);
            border-radius: calc(2vmax + 3px);
            opacity: 0;
        }
    }

    #arrow{
        position: relative;
        fill: var(--c1);
    }


/* --------------------------------------------------------------
    Play/Pause
-------------------------------------------------------------- */

    #playpause{
        position: absolute;        
        width: var(--pp_width);
        background: var(--c1);
        fill: var(--c2);
        border: 2px solid var(--c2);
        border-radius: 15px;
        z-index: 10;

        g{
            transform: translateX(2px);
        }
    
        #long-1, #triangle{
            opacity: 1;
        }

        #long-2{
            opacity: 0;
        }

        &:hover, &:focus{
            outline: 3px solid var(--c1);
            outline-offset: 0.1vw;
            box-shadow: -2vw 0 10vw 3vw var(--c2);
        }

        &.paused{

            background: var(--c2);
            fill: var(--c1);
            border: 2px solid var(--c1);
            box-shadow: -3vw 0 11vw 1vw var(--c1);

            &:hover, &:focus{
                outline: 3px solid var(--c2);
            }

            g{
                transform: translateX(0);
            }

            #triangle{
                opacity: 0;
            }

            #long-2{
                opacity: 1;
            }

            #p-48{
                transform: rotate(-132deg);
            }

            #p-312{
                transform: rotate(132deg);
            }
        }

    }

/* --------------------------------------------------------------
    Header
-------------------------------------------------------------- */
    #hook{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: white;
        order: 2;

        #stripped{
            position: absolute;
            margin-top: -0.5em;
            width: var(--logo-small-size);
            height: var(--logo-small-size);
        }

        #brand{
            height: var(--brand-size);
        }


        p:not(.tagline){
            margin-bottom: 1.5em;
        }


        figure + p{
            margin-top: 0.5em;
        }

        a + p{
            margin-top: -1em;
            font-family: "Karla", sans-serif;
            font-style: italic;
            text-align: center;
        }

        h1{
            visibility: hidden;
            position: absolute;
        }

        .tagline{
            font-size: var(--h4);
            font-weight: 700;
            margin-bottom: 1em;
            margin-left: -0.15ex;
        }
    }

/* --------------------------------------------------------------
    Logo
-------------------------------------------------------------- */
.logo{
    width: var(--logo-size);
    height: var(--logo-size);

    .toggle-lum, .knob-hue, .slider-controls{
        transform-box: border-box;
    }

    .toggle-lum, .knob-hue{
        transform-origin: center;
    }
    
    .toggle-lum{
        transform: rotate(-25deg) translateY(0);
    }

    &:not(#hook .logo){
        .knob-hue{
            transform: rotate(calc(var(--hue) * 1deg)) translateY(0);
        }

        .slider-controls{
            transform: translateY(calc((1 - var(--lum) / 100) * 45vmin)) translateX(0.15vw);
            transform-origin: top;
        }

        .logo-background{
            fill: var(--c2);
        }

        .knob-controls, .slider-controls{
            fill: var(--c1);
        }
    }

}

/* --------------------------------------------------------------
    Logo Container
-------------------------------------------------------------- */
#logo-container{
    width: var(--sw);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c1);

    figure{

        --br: 10px;
        --bw: 3px;
        --br_fig: calc(var(--br) - var(--bw));

        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: var(--bw) solid var(--c2);
        border-radius: var(--br);
        background-color: var(--c1);

        figcaption{
            position: relative;
            display: flex;
            justify-content: space-between;
            bottom: 0;
            width: 100%;
            background: var(--c2);
            border-radius: 0 0 var(--br_fig) var(--br_fig);
            box-shadow: 0vmax 1vmax 6vmax 0 var(--c1);
            font-weight: 500;
        }

        #c1{
            color: var(--c1);

            &:before{
                content: "with ";
                font-family: "Karla", sans-serif;
            }
        }

        #c2{
            position: absolute;
            color: var(--c2);
        }

        #cr{
            color: var(--c1);
        }
    }
}