* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    cursor: none !important;
}

a,
button,
.clickable {
    cursor: pointer;
}

p,
h1,
h2,
h3,
span {
    cursor: text;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;

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

    background: black;
    color: white;
}

#cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    pointer-events: none;
    left: 0;
    top: 0;

    background: url(assets/cursors/cursor-default.png) center/contain no-repeat;

    mix-blend-mode: difference;

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

    z-index: 999999;
}

#cursor.hover {
    background-image: url("assets/cursors/cursor-hover.png");
}

#cursor.text {
    background-image: url("assets/cursors/cursor-text.png");
}

#cursor.click {
    transform: translate(-50%, -50%) scale(0.8);
}

/* The monitor */
#crt-screen {
    position: relative;

    aspect-ratio: 4 / 3;

    width: min(100vw, calc(100vh * 4 / 3));
    height: auto;

    overflow: hidden;

    box-shadow:
        0 0 60px rgba(0,0,0,.9),
        inset 0 0 80px rgba(0,0,0,.6);
}

#page {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

#page-text {
    font-size: 1rem;
}

#crt-screen::after {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 50%,
            rgba(0,0,0,0.55) 100%
        );
    
    z-index: 20; /* vignette, darkens everything below it */
}

#crt-screen::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: 15;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.03) 1px,
            transparent 3px,
            transparent 5px
        );
}

#crt {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:5;
}

#crt-loader {
    position: absolute;
    inset: 0;
    background: black;
    z-index: 99999;
    pointer-events: none;
    transition: opacity .4s ease;
}
#crt-loader.hide {
    opacity: 0;
}

h1, a, p {
    position: relative;

    text-shadow:
        8px 12px 16px rgba(255,255,255,0.4),
        16px 24px 50px rgba(255,255,255,0.1);
    mix-blend-mode: difference;

}

h1::after,
a::after,
p::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;

    color: inherit;

    text-shadow:
        12px 16px 24px rgba(255,255,255,0.4),
        24px 32px 70px rgba(255,255,255,0.1);

    filter: blur(4px);
    opacity: 0.45;

    animation: ripple 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes ripple {
    0%, 100% {
        transform: translate(0, 0) scaleY(1);
    }

    50% {
        transform:
            translate(3px, 4px)
            scaleY(1.05);
    }
}

#background {
    position: absolute;
    inset: 0;

    background-image: url("assets/hub_bg_4-3.png");
    background-size: cover;
    background-position: center;

    z-index: -2;
}

/* Content */
.name {
    position: absolute;
    top: 18%;
    left: 38.5%;
    margin: 0;
    font-size: 6rem;
}

h1 {
    font-size: 6rem;
    letter-spacing: 0.3rem;
}

h1.blending-text {
    position: absolute; /* Position it over the canvas */
    top: 50%; /* Example centering */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensure it is on top of the canvas */
    
    font-size: 6rem;
    letter-spacing: 0.3rem;
    mix-blend-mode: difference;
    color: white; /* Difference mode usually needs white or a bright color to contrast against the background */
    
    /* Optional: Prevents the text from blocking clicks to the canvas/background */
    pointer-events: none; 
}

.option {
    position: absolute;
    top: 48%;
    right: 10%;

    margin: 0;
    mix-blend-mode: difference;
}

a {
    display: block;
    font-size: 3rem;
    margin-top: 1rem;
    cursor: pointer;

    color: inherit;
    text-decoration: none;

    letter-spacing: 0.4rem;

    transition:
        letter-spacing 0.6s ease,
        text-shadow 0.6s ease;
}

a,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none;
}

a:hover {
    letter-spacing: 0.6rem;
    text-shadow: 0 0 12px rgba(188, 185, 167, 0.85);
}

/* Footer */
footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}

.email {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    left: 75%;
}

.socials{
    display:flex;
    gap:18px;
    margin-left: 8.5rem;
}

.socials a{
    color:white;
    transition:.25s;
}

.socials a:hover{
    color:var(--blue);
    transform:translateY(-4px);
}

.socials img{
    width:24px;
    height:24px;
    display:block;
}

.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

#cinders {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: difference;
}

#vhs {
    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: 9998;

    mix-blend-mode: screen;
    opacity: 0.15;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.08) 1px,
            transparent 1px,
            transparent 4px
        );

    animation: vhsFlicker 0.15s infinite;
    animation: glitch 8s infinite;
}

/* Moving VHS distortion */
#vhs::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,0.05) 50%,
            transparent 100%
        );

    animation: tracking 3s infinite linear;
}

/* Noise layer */
#vhs::after {
    content: "";
    position: absolute;
    inset: -50%;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    opacity: 1;

    animation: noise 0.2s infinite;
}

@keyframes vhsFlicker {
    0%, 100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.2;
    }
}

@keyframes tracking {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes noise {
    0% {
        transform: translate(0,0);
    }

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

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

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

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

@keyframes glitch {
    0%, 94%, 100% {
        transform: translateX(0);
    }

    95% {
        transform: translateX(-3px);
    }

    96% {
        transform: translateX(3px);
    }

    97% {
        transform: translateX(0);
    }
}

#fadeOverlay {
    position: fixed;
    inset: 0;
    background: black;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 3.5s ease;
}

#fadeOverlay.active {
    opacity: 1;
}

/* ==========================================================================
   MOBILE / RESPONSIVE
   The base rules above assume a 4:3 landscape frame with generous fixed
   font sizes. Below, phones and small tablets get a taller frame plus
   fluid, centered typography so nothing clips or runs off-screen.
   ========================================================================== */

@media (max-width: 768px) {

    body {
        min-height: 100dvh; /* accounts for mobile browser chrome */
    }

    /* Taller frame so the "TV" fills more of a portrait screen instead
       of leaving big black bars above/below a squat 4:3 box.
       Adjust this ratio if it crops the background art awkwardly. */
    #crt-screen {
        aspect-ratio: 3 / 4;
        width: min(100vw, calc(100dvh * 3 / 4));
    }

    #background {
        background-position: 110% top;
    }

    .name {
        top: 10%;
        left: 50%;
        width: 90%;
        transform: translateX(-50%);
        text-align: center;
        font-size: clamp(2.2rem, 9vw, 3.4rem);
        letter-spacing: 0.15rem;
    }

    h1 {
        font-size: clamp(2.2rem, 9vw, 3.4rem);
        letter-spacing: 0.15rem;
    }

    .option {
        top: auto;
        bottom: 24%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
        width: max-content;
    }

    a {
        font-size: clamp(1.1rem, 5.5vw, 1.6rem);
        letter-spacing: 0.2rem;
        margin-top: 0.85rem;
    }

    a:hover {
        letter-spacing: 0.3rem;
    }

    footer {
        bottom: 14px;
    }

    .socials {
        margin-left: 0;
        justify-content: center;
    }

    .email {
        left: 0;
        text-align: center;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
}

@media (max-width: 420px) {
    .name,
    h1 {
        font-size: clamp(1.7rem, 8.5vw, 2.4rem);
    }

    a {
        font-size: clamp(1rem, 6vw, 1.3rem);
        letter-spacing: 0.15rem;
    }

    .socials {
        gap: 14px;
    }
}

/* Touch devices don't fire the mousemove events cursor.js relies on,
   so fall back to the native cursor instead of hiding it. */
@media (pointer: coarse) {
    * {
        cursor: auto !important;
    }

    a,
    button,
    .clickable {
        cursor: pointer !important;
    }

    #cursor {
        display: none;
    }
}