/* RESET */

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

body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p, small {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* VARIABLES */

:root {
    --color-content-primary: #AA0000;
    --color-surface-primary: #FFFFFF;
    --anim-base-time: 100ms;
    --anim-scale-factor: 130%;
    --anim-skew-factor: 7deg;
}

html.darkmode {
    --color-content-primary: #ff0000;
    --color-surface-primary: #000000;
}

/* FONTS */

@font-face {
    font-family: "GT Alpina";
    src:
        local("GT Alpina Condensed Light"),
        url("assets/GT-Alpina-Condensed-Light.otf") format("opentype"),
        url("assets/GT-Alpina-Condensed-Light.ttf") format("truetype"),
        url("assets/GT-Alpina-Condensed-Light.woff") format("woff"),
        url("assets/GT-Alpina-Condensed-Light.woff2") format("woff2");
}

@font-face {
    font-family: "GT Alpina Italic";
    src:
        local("GT Alpina Condensed Light Italic"),
        url("assets/GT-Alpina-Condensed-Light-Italic.otf") format("opentype"),
        url("assets/GT-Alpina-Condensed-Light-Italic.ttf") format("truetype"),
        url("assets/GT-Alpina-Condensed-Light-Italic.woff") format("woff"),
        url("assets/GT-Alpina-Condensed-Light-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "GT Alpina Typewriter";
    src:
        local("GT Alpina Typewriter Regular"),
        url("assets/GT-Alpina-Typewriter-Regular.otf") format("opentype"),
        url("assets/GT-Alpina-Typewrite-Regular.ttf") format("truetype"),
        url("assets/GT-Alpina-Typewrite-Regular.woff") format("woff"),
        url("assets/GT-Alpina-Typewrite-Regular.woff2") format("woff2");
}

/* ANIMATIONS */

@keyframes flash {
    50% {
        opacity: 0;
    }
}

@keyframes skew-left {
    0% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: left center;
    }
    10% {
        transform: skew(calc(-1 * var(--anim-skew-factor)), 0) scale(var(--anim-scale-factor), 100%);
        transform-origin: left center;
    }
    100% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: left center;
    }
}

@keyframes skew-right {
    0% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: right center;
    }
    10% {
        transform: skew(var(--anim-skew-factor), 0) scale(var(--anim-scale-factor), 100%);
        transform-origin: right center;
    }
    100% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: right center;
    }
}

@keyframes load-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

main>section, .logo.first svg g {
    transition: transform calc(var(--anim-base-time) * 2) ease-out;
}

body.left .col-a { transform: translate(100%, 0) }
body.left .col-b { transform: translate(0, 0) }
body.right .col-a { transform: translate(0, 0) }
body.right .col-b { transform: translate(100%, 0) }

body.left .logo.first svg g { transform: translate(0, 0); }
body.right .logo.first svg g { transform: translate(-80px, 0); }

body.left .col-a { text-align: right; }
body.right .col-a { text-align: left; }

body.left .logo.first>svg,
body.right .logo.last>svg,
body.right main>section>*:not(.logo) {
    animation: skew-right forwards calc(var(--anim-base-time) * 3) ease-out;
}

body.right .logo.first>svg,
body.left .logo.last>svg,
body.left main>section>*:not(.logo)  {
    animation: skew-left forwards calc(var(--anim-base-time) * 3) ease-out;
}

h1, h2, h3, h4, h5, h6, small, p {
    opacity: 0;
    animation: load-in 2.5s .5s ease-in forwards;
}

svg path {
    opacity: 0;
}

svg path:nth-last-of-type(1) {
    animation: load-in .5s 300ms step-start forwards;
}

svg path:nth-last-of-type(2) {
    animation: load-in .5s 350ms step-start forwards;
}

svg path:nth-last-of-type(3) {
    animation: load-in .5s 400ms step-start forwards;
}

svg path:nth-last-of-type(4) {
    animation: load-in .5s 450ms step-start forwards;
}

svg path:nth-last-of-type(5) {
    animation: load-in .5s 500ms step-start forwards;
}

svg path:nth-last-of-type(6) {
    animation: load-in .5s 550ms step-start forwards;
}



/* STYLES */

svg path {
    fill: var(--color-content-primary);
}

body {
    font-family: "GT Alpina", Times, serif;
    color: var(--color-content-primary);
    background: var(--color-surface-primary);
    font-feature-settings: 'ss03' on;
}

em, h3 {
    font-family: "GT Alpina Italic", Times, serif;
    font-style: normal;
}

p, h1, h2, h3, h4, h5, h6 {
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -0.008rem;
    padding-bottom: .25rem;
}

h1 {
    visibility: hidden;
    width: 0;
    height: 0;
    text-overflow: hidden;
    text-indent: -99999px;
    padding: 0;
}

h2 {
    padding-bottom: 0;
}

small {
    font-family: "GT Alpina Typewriter", Courier, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.031rem;
}

ul {
    list-style-type: none;
    list-style-position: outside;
    padding: 0;
}

li {
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.008rem;
    padding-bottom: .25rem;
}

li:last-of-type {
    padding-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    animation: flash .2s step-start infinite;
    cursor: crosshair;
}

/* LAYOUT */

.hide-large {
    display: none;
}

main {
    width: 100vw;
    min-height: 100svh;
    gap: 0.75rem;
}

main>section {
    width: 50%;
    min-height: 100svh;
    position: absolute;
    top: 0;
    left: 0;
    padding: .75rem;
}

.col-a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.col-a svg {
    width: 100%;
    height: auto;
    margin-bottom: .75rem;
}

.col-b {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.col-b svg {
    width: 100%;
    height: auto;
}

.col-b .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
}

/* ANIMATION */

main>section, .logo.first svg g {
    transition: transform calc(var(--anim-base-time) * 2) ease-out;
}

@keyframes skew-left {
    0% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: left center;
    }
    10% {
        transform: skew(calc(-1 * var(--anim-skew-factor)), 0) scale(var(--anim-scale-factor), 100%);
        transform-origin: left center;
    }
    100% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: left center;
    }
}

@keyframes skew-right {
    0% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: right center;
    }
    10% {
        transform: skew(var(--anim-skew-factor), 0) scale(var(--anim-scale-factor), 100%);
        transform-origin: right center;
    }
    100% {
        transform: skew(0deg, 0) scale(100%, 100%);
        transform-origin: right center;
    }
}

@keyframes load-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

body.left .col-a { transform: translate(100%, 0) }
body.left .col-b { transform: translate(0, 0) }
body.right .col-a { transform: translate(0, 0) }
body.right .col-b { transform: translate(100%, 0) }

body.left .logo.first svg g { transform: translate(0, 0); }
body.right .logo.first svg g { transform: translate(-80px, 0); }

body.left .col-a { text-align: right; }
body.right .col-a { text-align: left; }

body.left .logo.first>svg,
body.right .logo.last>svg,
body.right main>section>*:not(.logo) {
    animation: skew-right forwards calc(var(--anim-base-time) * 3) ease-out;
}

body.right .logo.first>svg,
body.left .logo.last>svg,
body.left main>section>*:not(.logo)  {
    animation: skew-left forwards calc(var(--anim-base-time) * 3) ease-out;
}

/* MEDIA QUERIES */

@media screen and (max-width: 600px) {

    :root {
        --anim-scale-factor: 120%;
        --anim-skew-factor: 5deg;
    }

    main>section {
        width: 65%;
    }

    body.left .col-a { transform: translate(calc(100vw - 100%), 0) }
    body.left .col-b { transform: translate(0, 0) }
    body.right .col-a { transform: translate(0, 0) }
    body.right .col-b { transform: translate(calc(100vw - 100%), 0) }

    html {
        font-size: 75%;
    }

    main {
        max-width: 100% !important;
        padding: 0 1rem;
    }

    header {
        padding: 1rem;
    }

    small {
        font-size: 0.8rem;
    }

    .hide-small {
        display: none;
    }
    
    .hide-large {
        display: initial;
    }

    .formerly p {
        text-wrap: wrap !important;
    }

    .colophon small {
        transform: rotate(-90deg) !important;
    }
}