@font-face {
    font-family: "HelveticaNeueRoman";
    src: url("./assets/fonts/HelveticaNeueRoman.otf") format("truetype");
}

@font-face {
    font-family: "CutiveMono-Regular";
    src: url("./assets/fonts/CutiveMono-Regular.ttf") format("truetype");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100vw;
    font-family: "Neue Montreal";
}

.pre-loader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@keyframes color80 {
    0% {
        background: linear-gradient(135deg, #0a0a0a, #1a0009, #330000);
    }

    25% {
        background: linear-gradient(135deg, #330000, #7a1c1c, #ff2200);
    }

    50% {
        background: linear-gradient(135deg, #4a0e0e, #ff4500, #ff8800);
    }

    75% {
        background: linear-gradient(135deg, #2a0000, #5c1a1a, #ff2200);
    }

    100% {
        background: linear-gradient(135deg, #330000, #2a0000, #5c1a1a);
    }
}

.loader {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    animation: color80 4s ease-in-out infinite alternate;
    /* slower */
    background-size: 300% 300%;
    filter: brightness(1.05) contrast(1.2) saturate(1.2);
    color: #121212;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* subtle glow */
.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 80, 0, 0.18) 30%, transparent 70%);
    mix-blend-mode: screen;
    filter: blur(40px);
    /* less heavy than 60px */
    z-index: -1;
}

/* lightweight static effect (no <feTurbulence>, just dithering) */
.loader::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 2px,
            transparent 2px,
            transparent 4px),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 2px,
            transparent 2px,
            transparent 4px);
    background-size: 100% 100%;
    opacity: 0.2;
    mix-blend-mode: overlay;
    animation: staticMove 0.8s steps(2) infinite;
    pointer-events: none;
}

/* jittery scanline/static animation */
@keyframes staticMove {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-2%, 2%);
    }

    50% {
        transform: translate(1%, -2%);
    }

    75% {
        transform: translate(-1%, 1%);
    }

    100% {
        transform: translate(0, 0);
    }
}

.loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    font-family: "HelveticaNeueRoman", sans-serif;
    font-size: 6rem;
    z-index: 2;
    color: #121212;
    text-align: center;
}

.count {
    flex: 2;
    text-align: right;
    line-height: 1;
    padding: 0 1em;
}

.copy {
    flex: 6;
    font-family: "HelveticaNeueRoman", sans-serif;
    font-size: 2.8rem;
    text-transform: uppercase;
    line-height: 1;
}

.ml16 {
    overflow: hidden;
}

.ml16 .letter {
    display: inline-block;
    line-height: 1em;
}

.loader-bg {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    background: #3d4095;
    animation: color80 2s ease-in-out infinite alternate;
    z-index: -1;
}

.logo img {
    width: 150px;
    height: auto;
}

.loader-2 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(assets/media/hero.gif) no-repeat 50% 50%;
    background-size: cover;
    z-index: -1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.site-content {
    position: relative;
    z-index: -2;
    background-color: #121212;
    min-height: 100vh;
}

nav {
    width: 100%;
    padding: 2em;
    display: flex;
}

a {
    font-family: "HelveticaNeueRoman", sans-serif;
    text-decoration: none;
    color: #fff;
}

nav>div {
    flex: 1;
}

.links {
    display: flex;
    justify-content: flex-end;
    gap: 5em;
}


.header {
    color: #fff;
    display: flex;
    padding: 1em;
}

.header h1 {
    flex: 1;
    position: relative;
    font-size: 20vw;
    font-family: "PP Editorial Old";
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.header h5 {
    font-family: 'HelveticaNeueRoman';
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 100;
}


.footer {
    background-color: #121212;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding: 2em;
}

.footer>div {
    flex: 1;
}

.footer-copy p {
    font-family: "HelveticaNeueRoman", sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.1rem;
    width: 50%;
}

.footer-nav {
    display: flex;
    justify-content: flex-end;
}

.img {
    width: 225px;
    height: 150px;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.img:nth-child(1) {
    background: url(assets/media/83.gif) no-repeat 50% 50%;
    background-size: cover;
}

.img:nth-child(2) {
    background: url(assets/media/hero.gif) no-repeat 50% 50%;
    background-size: cover;
}

@media(max-width: 900px) {
    .footer {
        flex-direction: column;
        gap: 2em;
    }

    .footer-copy p {
        width: 100%;
    }

    .footer-nav {
        width: 100%;
        justify-content: space-between;
    }

    .logo img {
        width: 70px;
        height: auto;
    }
}

@keyframes colorCycle {
    0% {
        background: #3d4095;
    }

    /* deep blue-purple */
    20% {
        background: #bb3e43;
    }

    /* bright red-magenta */
    40% {
        background: #352d3a;
    }

    /* dark violet-black */
    60% {
        background: #716d7e;
    }

    /* muted gray-purple */
    80% {
        background: #c7af97;
    }

    /* beige-tan */
    100% {
        background: #dfdcd8;
    }

    /* light gray-white */
}


.about-me {
    font-family: "CutiveMono-Regular", "Cutive Mono", monospace;
    text-transform: uppercase;
    color: #111;
}

.about-frame {
    background: #121212;
    padding: clamp(8px, 1.2vw, 16px);
}

.about-paper {
    background: #eae7e2;
    width: min(100%, 1600px);
    margin: 0 auto;
    position: relative;
    aspect-ratio: 16/7.8;
    box-shadow:
        0 0 0 1px #d8d4cf inset,
        0 0 0 2px #e6e3de inset;
}

.about-speckle {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 10% 40%, #00000022 0 40%, #0000 41%) repeat,
        radial-gradient(1px 1px at 30% 80%, #00000014 0 40%, #0000 41%) repeat;
    background-size: 220px 160px, 260px 220px;
    mix-blend-mode: multiply;
    opacity: .18;
    pointer-events: none;
}

.about-content {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: 0.2fr 1fr 0.9fr 1fr;
    grid-template-rows: auto 8vh 10vh 1fr auto;
    padding: clamp(18px, 2.8vw, 40px);
    border: 2vw solid #fff;
}

.about-title {
    font-family: "PP Editorial Old";
    font-weight: 100;
    grid-column: 1/4;
    grid-row: 1;
    font-size: clamp(40px, 7.2vw, 106px);
    letter-spacing: 0.02em;
    margin: 0;
    line-height: .95;
    text-transform: uppercase;
}

.about-portrait {
    grid-column: 4;
    grid-row: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: clamp(10px, 1.6vw, 18px);
}

.about-portrait img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #bbb;
    box-shadow:
        0 0 0 8px #e0ddd8 inset,
        0 0 0 9px #bdb9b3 inset;
}

.about-meta {
    font-size: clamp(14px, 1.6vw, 22px);
    letter-spacing: .03em;
    text-transform: lowercase;
}

.about-name {
    grid-row: 2;
    grid-column: 1/3;
    align-self: center;
    text-align: end;
}

.about-date {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
    align-self: center;
}

.about-pronouns {
    grid-column: 3;
    align-self: center;
    justify-self: start;
    font-size: clamp(14px, 1.6vw, 22px);
}

.about-location {
    grid-row: 4;
    grid-column: 3;
    justify-self: center;
    align-self: end;
    font-size: clamp(14px, 1.6vw, 22px);
}

.about-bio {
    grid-row: 5;
    grid-column: 1/3;
    align-self: end;
    max-width: 56ch;
    font-size: clamp(14px, 1.55vw, 21px);
    line-height: 1.7;
}

/* Responsive stack */
@media (max-width:920px) {
    .about-paper {
        aspect-ratio: auto;
    }

    .about-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: clamp(10px, 2.4vw, 18px);
    }

    .about-title {
        grid-column: 1;
        grid-row: 1;
    }

    .about-portrait {
        grid-column: 1;
        grid-row: 2;
        padding-left: 0;
    }

    .about-name {
        grid-column: 1;
        grid-row: 3;
    }

    .about-date {
        grid-column: 1;
        grid-row: 4;
        justify-self: start;
    }

    .about-pronouns {
        grid-column: 1;
        grid-row: 5;
        justify-self: start;
    }

    .about-location {
        grid-column: 1;
        grid-row: 6;
        justify-self: start;
    }

    .about-bio {
        grid-column: 1;
        grid-row: auto;
        align-self: start;
        max-width: 60ch;
    }
}

@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes fadeIn {
  0%   { opacity: 0; }
  60%  { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes neonFlash {
  0%   { filter: drop-shadow(0 0 0 #ff4fa3); }
  40%  { filter: drop-shadow(0 0 6px #ff4fa3) drop-shadow(0 0 12px #ff4fa3); }
  70%  { filter: drop-shadow(0 0 12px #ff4fa3) drop-shadow(0 0 24px #ff4fa3); }
  100% { filter: drop-shadow(0 0 4px #ff4fa3); }
}