@font-face {
  font-family: 'Futurist';
  src:
    url('assets/fg_futurist-Light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Prevents invisible text while font loads */
 
}

@font-face {
  font-family: 'Futurist';
  src:
    url('assets/fg_futurist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
 
}

 @font-face {
  font-family: 'Anon-Pro';
  src:
    url('assets/anonpro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Prevents invisible text while font loads */
}

 @font-face {
  font-family: 'Display';
  src:
    url('assets/display.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Prevents invisible text while font loads */
}
 
 :root {
    --font-display: 'Display', sans-serif;
    --font-anon: 'Anon-Pro', monospace;
    --font-futurist: 'Futurist', sans-serif;
 }

 ::selection {
  background: #fb5142; /* Change the background color (e.g., a light red) */
  color: #fff;      /* Change the text color (e.g., black) */
}


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

    body {
        font-family: var(--font-anon);
        background-color: #625dc1;
        color: #061316;
        transition: background-color 0.3s ease;
        cursor: none;
        height: 100vh;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    .custom-cursor {
        position: fixed;
        width: 60px;
        height: 60px;
        pointer-events: none; 
        z-index: 9999;
        
        transform: translate(-15px, -15px);

        /* Invert and desaturate what's behind it */
        backdrop-filter: invert(1) grayscale(1) contrast(200%);
        -webkit-backdrop-filter: invert(1) grayscale(1) contrast(200%);
        
        /* Use a semi-transparent background instead of solid white */
        background: rgba(255, 255, 255, 0.01);
        
        /* Mask to your cursor shape */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='15 10, 10 50, 50 30' fill='%23ffffff'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='15 10, 10 50, 50 30' fill='%23ffffff'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

        /* Hide on touch devices */
    @media (hover: none) and (pointer: coarse) {
        .custom-cursor {
            display: none;
        }
    
    body {
            cursor: auto; /* Restore default cursor */
        }
    }

    button {
        border: none;
    }

    .container {
        position: relative;
        height: 100vh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        padding: clamp(20px, 3vh, 40px) clamp(20px, 3vw, 60px);
        gap: clamp(20px, 3vh, 40px);
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .logo {
        font-family: var(--font-futurist);
        font-size: clamp(2rem, 2.5vw, 3rem);
        font-weight: 600;
        letter-spacing: -0.03em;
    }

    .logo svg {
        display: block;
        width: clamp(200px, 36vw, 420px);
        height: auto;
    }

    .logo svg path {
        fill: currentColor;
    }
    .logo span {
        font-size: 0.5em;
        vertical-align: top;
    }

    .dash {
        font-family: Arial, Helvetica, sans-serif;
    }

    .hex-selector {
        font-family: var(--font-display);
        font-size: clamp(1rem, 2vw, 1.5rem);
        font-weight: bold;
        text-transform: uppercase;
        /* padding: clamp(8px, 1vh, 10px) clamp(15px, 2vw, 20px); */
        background: transparent;
        transition: all 0.2s;

    }

    .hex-section .hex-selector {
        color: inherit;
    }

    .hex-section:hover .hex-selector,
    .hex-section .hex-selector:hover {
        color: var(--next-hex, currentColor);
    }

    @keyframes hex-blink {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }

    .hex-section:has(#hexSelector:hover) span.hex-selector,
    .hex-section span.hex-selector:hover {
        animation: hex-blink 0.2s steps(1, end) infinite;
    }

    .hex-selector:hover {
        /* background: #000;
        color: #effe54; */
        cursor: none;
    }

    .main-content {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: clamp(30px, 4vw, 60px);
        align-items: start;
        overflow: hidden;
    }

    .text-section {
        display: flex;
        flex-direction: column;
        gap: clamp(15px, 2.5vh, 30px);
        max-height: 100%;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

    .tagline {
        font-family: var(--font-futurist);
        font-size: clamp(1.5rem, 3vw, 4.2rem);
        font-weight: 400;
        /* letter-spacing: -0.03em; */
        line-height: 1.4em;
    }

    .tagline sup {
        font-size: 0.5em;
        vertical-align: super;
    }

    .i-heart-ny {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .heart {
        color: #ff1493;
        font-size: 1.2em;
    }

    .philosophy {
        font-family: var(--font-futurist);
        font-size: clamp(1rem, 1.8vw, 1.6rem);
        line-height: 1.3;
        font-weight: 400;
    }

    .description {
        font-size: clamp(1rem, 1.1vw, 1.5rem);
        line-height: 1.5;
    }

    .model-container {
        position: absolute;
        bottom: calc(clamp(20px, 3vh, 40px) + 60px);
        right: clamp(20px, 3vw, 60px);
        width: clamp(180px, 22vw, 300px);
        height: clamp(180px, 35vw, 450px);
        z-index: 0;
        pointer-events: none;
    }

    #canvas3d {
        width: 100%;
        height: 100%;
    }

    footer {
        font-family: var(--font-display);
        /* border-top: 2px solid #000; */
        padding-top: clamp(10px, 2vh, 20px);
    }



    .contact-info {
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .contact-info > div{
        font-size: clamp(1.1rem, 2.5vw, 1.8rem);
        font-weight: 400;
    }

    .contact-item:hover {
        filter: blur(3px);
    }

    .contact-item a {
        color: #000;
        text-decoration: none;
    }

    .contact-item a:hover {
        cursor: none;
    }


    #nylogo svg{
        width: clamp(2rem, 5vw, 4rem);
        height: auto;
        display: inline-block;
        vertical-align: middle;
        margin: -5px 0;
    }

    #nylogo .ny-text {
        fill: currentColor;
    }

    /* @media (max-width: 1024px) {
        .main-content {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto;
        }

        .model-container {
            position: absolute;
            top: 8vh;
            right: 50%;
            transform: translateX(50%);
            width: 70vw;
            height: 80vh;
            max-width: none;
            max-height: none;
            z-index: -2;
            pointer-events: none;
        }
    } */

    @media (max-width: 768px) {
        body {
            min-height: 100svh;
            height: auto;
            overflow-y: auto;
            overscroll-behavior: none;
            touch-action: none;
        }

        .container {
            min-height: 100svh;
            height: auto;
        }

        .tagline {
            /* font-size: clamp(1.2rem, 2vw, 2rem); */
        }
        .main-content {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto;
        }

        .model-container {
            position: absolute;
            top: 8vh;
            right: 50%;
            transform: translateX(50%);
            width: 70vw;
            height: 80vh;
            max-width: none;
            max-height: none;
            z-index: -2;
            pointer-events: none;
        }

        

        .philosophy {
            font-size: clamp(1.3rem, 2vw, 1.8rem);
        }

        .description {
            font-size: clamp(1rem, 2vw, 1.8rem);
        }

        .hex-selector{
            font-size: clamp(1.3rem, 2vw, 1.8rem);
        }

        #contact-name {
        display: none;
    }


        .contact-info {
            /* flex-direction: column; */
            /* align-items: center; */
            gap: 10px;
        }

        /* .contact-item {
            font-size: clamp(0.7rem, 2.5vw, 0.85rem);
        } */
    }

    @media (min-width: 768px) {
        .main-content {
            grid-template-columns: 4fr 1fr;
        }
    }