@font-face {
    font-family: "Agrandir";
    src: url("fonts/Agrandir-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "AgrandirItalic";
    src: url("fonts/Agrandir-ThinItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Trajan";
    src: url("fonts/TrajanPro-Bold.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "InterSC";
    src: url("fonts/InterSC-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

html,
body {
    margin: 0;
    height: 100%;
    overflow-x: hidden;
}

/* Initial page load animations - only run once */
#home-header {
    opacity: 0;
    animation: fadeIn 1.6s ease-out 8s forwards;
}

#home-header.seen {
    opacity: 1;
    animation: none;
}

#search-bar {
    width: clamp(12rem, 40vw, 20rem);
}

h1 {
    opacity: 0;
    animation: frostedGlassReveal 2s ease-out 0.5s forwards;
}

h1.seen {
    opacity: 1;
    animation: none;
}

h2 {
    opacity: 0;
    animation: fadeIn 1s ease-out 7s forwards;
    -webkit-text-stroke: 0.5px black;
}

h2.seen {
    opacity: 1;
    animation: none;
}

.carousel-wrapper {
    opacity: 0;
    animation: fadeIn 1.2s ease-out 0.3s forwards;
}

.carousel-wrapper.seen {
    opacity: 1;
    animation: none;
}

@keyframes frostedGlassReveal {
    0% {
        opacity: 0;
        filter: blur(40px) brightness(1.5);
        text-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
    }
    50% {
        opacity: 0.7;
        filter: blur(15px) brightness(1.2);
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    }
    100% {
        opacity: 1;
        filter: blur(0px) brightness(1);
        text-shadow: none;
    }
}

h3 {
    perspective: 1000px;
    font-family:
        "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Courier New",
        monospace;
    font-variant-caps: small-caps;
    opacity: 0;
    /*transition: background 0.8s ease-in-out;*/
}

h3.animating {
    opacity: 1;
}

h3 .letter {
    display: inline-block;
    transform-style: preserve-3d;
    transform-origin: center bottom;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    width: 1ch;
    text-align: center;
}

h3 .letter::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

h3 .letter.space-char {
    width: 0.5em;
}

h3 .letter.flipping {
    animation: flipLetter 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

h3 .letter.flipping::after {
    opacity: 1;
}

@keyframes flipLetter {
    0% {
        transform: rotateX(0deg) rotateZ(0deg);
        filter: blur(0px) brightness(1);
        color: rgb(214, 211, 209); /* stone-300 */
    }
    20% {
        transform: rotateX(70deg) rotateZ(var(--wobble, 0deg));
        filter: blur(1px) brightness(1.1);
        color: rgb(231, 229, 228); /* slightly lighter off-white */
    }
    25% {
        filter: blur(2px) brightness(1.15);
    }
    49% {
        transform: rotateX(90deg) rotateZ(var(--wobble, 0deg));
        opacity: 0;
        filter: blur(3px) brightness(0.9);
    }
    50% {
        transform: rotateX(-90deg) rotateZ(calc(var(--wobble, 0deg) * -1));
        opacity: 0;
        filter: blur(3px) brightness(0.7);
        background: rgba(0, 0, 0, 0.15);
        color: rgb(245, 245, 244); /* stone-100 - new flap coming in */
    }
    75% {
        filter: blur(2px) brightness(0.85);
        background: rgba(0, 0, 0, 0.1);
        color: rgb(231, 229, 228);
    }
    80% {
        transform: rotateX(-70deg) rotateZ(calc(var(--wobble, 0deg) * -0.5));
        filter: blur(1px) brightness(0.95);
    }
    95% {
        transform: rotateX(-2deg) rotateZ(calc(var(--wobble, 0deg) * 0.3));
        opacity: 1;
        filter: blur(0px) brightness(1.05);
        color: rgb(231, 229, 228);
    }
    100% {
        transform: rotateX(0deg) rotateZ(0deg);
        opacity: 1;
        filter: blur(0px) brightness(1);
        background: rgba(255, 255, 255, 0.02);
        color: rgb(214, 211, 209); /* back to stone-300 */
    }
}

@layer utilities {
    .smallcaps {
        font-variant-caps: small-caps;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wipeReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 0 0 100%);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}


.carousel-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
}


:root {
    --col-size: 10rem;   /* 11rem | 12rem | 13rem | 14rem | 15rem */
    --row-size: 12.5rem; /* 13.75rem | 15rem | 16.25rem | 17.5rem | 18.75rem */
    --square-width: 11rem;   /* 11rem | 12rem | 13rem | 14rem | 15rem */
    --square-height: 13.75rem; /* 13.75rem | 15rem | 16.25rem | 17.5rem | 18.75rem */
    --hero-gap-scale: 1;
    --hero-lift: 0rem;
}

@media (max-width: 1024px) {
    :root {
        /*--hero-gap-scale: 0.7;*/
        --hero-lift: -5rem;
    }
}

@media (max-width: 640px) {
    :root {
        /*--hero-gap-scale: 0.7;*/
        --hero-lift: -5rem;
    }
}



.hero-h1 {
    transform: translateY(calc(-5rem * var(--hero-gap-scale))) !important;
}
.hero-h3 {
    transform: translateY(calc(5.5rem * var(--hero-gap-scale))) !important;
}
.hero-h2 {
    transform: translateY(calc(16rem * var(--hero-gap-scale))) !important;
}

.hero-h1,
.hero-h3,
.hero-h2 {
    transform: translateY(
            calc(var(--hero-lift) + (var(--hero-gap-scale) * var(--hero-base-offset)))
    ) !important;
}
.hero-h1 { --hero-base-offset: -5rem; }
.hero-h3 { --hero-base-offset: 5.5rem; }
.hero-h2 { --hero-base-offset: 16rem; }

/* ------------- HERO STACK POSITIONING ------------- */

/* Base distances from center (desktop-ish) */
.hero-h1 { --hero-base-offset: -5rem; }  /* MOSAIC above center */
.hero-h3 { --hero-base-offset:  5.5rem; }/* tagline below center */
.hero-h2 { --hero-base-offset: 16rem; }  /* COMING SOON further down */

/* Default spacing */
:root {
    --hero-scale: 1;
}

/* Tighten spacing when either width OR height shrinks */
@media (max-width: 1280px), (max-height: 900px) {
    :root { --hero-scale: 0.85; }
}

@media (max-width: 1024px), (max-height: 800px) {
    :root { --hero-scale: 0.7; }
}

@media (max-width: 768px), (max-height: 700px) {
    :root { --hero-scale: 0.55; }
}

/* Apply vertical offset — horizontal center is preserved by flex */
.hero-h1,
.hero-h3,
.hero-h2 {
    transform: translateY(calc(var(--hero-base-offset) * var(--hero-scale))) !important;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(20, var(--col-size));
    /*grid-template-rows: repeat(3, var(--row-size));*/
    gap: 4rem;
    /*padding: 2rem 0;*/
    /*box-sizing: border-box;*/
    width: max-content;
    animation: scroll-left 10s linear infinite;
}

/*13" window*/
/*.grid-container {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(20, 10rem);*/
/*    grid-template-rows: repeat(3, 12.5rem);*/
/*    gap: 2.5rem;*/
/*    padding: 2rem 0;*/
/*    box-sizing: border-box;*/
/*    width: max-content;*/
/*    animation: scroll-left 10s linear infinite;*/
/*}*/

.square {
    width: var(--square-width);
    height: var(--square-height);
    /*width: 160px;*/
    /*height: 200px;*/
    flex-shrink: 0;
    /*border: 0.5px solid lightgray;*/
    /* background-color: lightgray; */
    box-sizing: border-box;
    overflow: hidden;
}

.square img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops image but keeps proportions */
    object-position: center; /* keeps crop centered */
    display: block; /* removes inline gaps */
}


.join-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid rgba(148, 163, 184, 0.5); /* slate-400-ish */
    border-top-color: #f1edd5;                  /* your accent color */
    animation: join-spin 0.6s linear infinite;
}

@keyframes join-spin {
    to {
        transform: rotate(360deg);
    }
}


.rainbow-glow {
    position: relative;
    box-shadow: 0 0 15px rgba(238, 130, 238, 0.3);
    animation: rainbow-glow-anim 3s ease-in-out infinite;
    transition: box-shadow 0.3s;
}

.rainbow-glow:hover {
    animation: rainbow-glow-hover 3s ease-in-out infinite;
}
.rainbow-glow:focus-within {
    box-shadow: 0 0 25px rgba(238, 130, 238, 0.5);
}

@keyframes rainbow-glow-anim {
    0%,
    100% {
        box-shadow:
            -8px 0 40px rgba(238, 130, 238, 0.5),
            8px 0 40px rgba(0, 255, 255, 0.5);
    }
    50% {
        box-shadow:
            -8px 0 40px rgba(0, 255, 255, 0.5),
            8px 0 40px rgba(238, 130, 238, 0.5);
    }
}

@keyframes rainbow-glow-hover {
    0%,
    100% {
        box-shadow:
            -10px 0 50px rgba(238, 130, 238, 0.6),
            10px 0 50px rgba(0, 255, 255, 0.6);
    }
    50% {
        box-shadow:
            -10px 0 50px rgba(0, 255, 255, 0.6),
            10px 0 50px rgba(238, 130, 238, 0.6);
    }
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(
            var(--scroll-distance, calc(-10 * (160px + 2.5rem)))
        );
    }
}


/* Extra Small (phones) */
@media (max-width: 479px) {
    .hero-h2 {
        --hero-base-offset: 32rem !important; /* increase spacing under h3 */
    }
}

/* Small (phones landscape / big phones) */
@media (min-width: 480px) and (max-width: 639px) {
    .hero-h2 {
        --hero-base-offset: 32rem !important; /* increase spacing under h3 */
    }
}

/* Medium (small tablets / foldables) */
@media (min-width: 640px) and (max-width: 767px) {
    .hero-h2 {
        --hero-base-offset: 32rem !important; /* increase spacing under h3 */
    }
}

/* Large (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-h2 {
        --hero-base-offset: 24rem !important; /* increase spacing under h3 */
    }
}

/* Extra Large (small laptops) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hero-h2 {
        --hero-base-offset: 20rem !important; /* increase spacing under h3 */
    }
}

/* 2XL (desktop) */
@media (min-width: 1280px) and (max-width: 1535px) {

}

/* Ultra-wide */
@media (min-width: 1536px) {
}

/* Increase gap between h3 and h2 on REAL small-phone widths */
@media (max-width: 1024px) {
    .hero-h2 {
        /*--hero-base-offset: 28rem !important; !* increase spacing under h3 *!*/
    }
}

/* Shorter viewport – start squeezing things together */
@media (max-height: 900px) {
    :root {
        --hero-gap-scale: 0.85;
        /*--hero-lift: -2rem;*/
    }
    .hero-h2 {
        --hero-base-offset: 24rem !important; /* increase spacing under h3 */
    }

}

/* Really short windows ... */
@media (max-height: 700px) {
    :root {
        --hero-gap-scale: 0.65;
        /*--hero-lift: -6rem;*/
    }
    .hero-h2 {
        --hero-base-offset: 18rem !important; /* increase spacing under h3 */
    }
}

/* Super short ... */
/* SUPER SHORT HEIGHT – hide h3, keep big gap and bottom padding */
@media (max-height: 550px) {
    :root {
        --hero-gap-scale: 0.5;
    }

    /* kill the tagline */
    .hero-h3 {
        display: none !important;
    }

    /* keep MOSAIC a bit above center */
    .hero-h1 {
        transform: translateY(calc(4rem * var(--hero-gap-scale))) !important;
    }

    /* COMING SOON well above bottom edge */
    .hero-h2 {
        transform: translateY(calc(22rem * var(--hero-gap-scale))) !important;
        /* tweak 22rem up/down if you want h2 higher or lower */
    }
}

/* Prevent headers from rising into the navigation area */
/* SHORT HEIGHT, but h3 still visible (551–600px) */
/* keep nice gap between H1/H3 and keep H2 off the bottom */
@media (max-height: 600px) and (min-height: 551px) {
    .hero-h1 { --hero-base-offset: -4rem !important; }  /* a bit higher */
    .hero-h3 { --hero-base-offset:  6rem !important; }  /* pushed further down = more gap from h1 */
    .hero-h2 { --hero-base-offset: 17rem !important; }  /* slightly up so it's not on the edge */
}

/* WIDE but SHORT: gently shrink, keep it big */
/* e.g. 1200x750, 1400x700 */
@media (max-height: 800px) and (min-width: 900px) {
    .hero-h1 {
        font-size: clamp(6rem, 11vh, 12rem) !important;
        /* min 6rem (~96px), max 12rem */
    }
    .hero-h3 {
        font-size: clamp(1.1rem, 2.4vh, 2rem) !important;
    }
    .hero-h2 {
        font-size: clamp(3rem, 7vh, 10rem) !important;
    }
}

/* VERY SHORT but still wide – shrink a bit more, still not tiny */
/* e.g. 1200x620, 1400x600 */
@media (max-height: 650px) and (min-width: 900px) {
    .hero-h1 {
        font-size: clamp(5rem, 10vh, 10rem) !important;
        /* ~80px minimum */
    }
    .hero-h3 {
        font-size: clamp(1rem, 2vh, 1.6rem) !important;
    }
    .hero-h2 {
        font-size: clamp(2.5rem, 6vh, 8rem) !important;
    }
}

/* SUPER SHORT – you already hide h3 here, keep h1/h2 big-ish */
@media (max-height: 550px) {
    .hero-h3 {
        display: none !important;
    }
    .hero-h1 {
        font-size: clamp(4.5rem, 9vh, 8rem) !important;
        /* never below ~72px */
    }
    .hero-h2 {
        font-size: clamp(2.8rem, 6.5vh, 7rem) !important;
        /* never below ~45px */
    }
}

/* === GRID RESPONSIVENESS – keep it proportional but subtle === */

/* Slight tighten for 13–14" laptops and smaller desktops */
@media (max-width: 1440px) {
    :root {
        --col-size: 9rem;
        --square-width: 10rem;
        --square-height: 12.5rem;
        --row-size: 11.5rem;
    }

    .grid-container {
        gap: 3.5rem;
        animation-duration: 11s; /* a touch slower so speed feels similar */
    }
}

/* Tablets / small laptops */
@media (max-width: 1024px) {
    :root {
        --col-size: 8rem;
        --square-width: 9rem;
        --square-height: 11rem;
        --row-size: 10.5rem;
    }

    .grid-container {
        gap: 3rem;
        animation-duration: 12s;
    }
}

/* Phones / narrow viewports */
@media (max-width: 768px) {
    :root {
        --col-size: 7rem;
        --square-width: 8rem;
        --square-height: 10rem;
        --row-size: 9.5rem;
    }

    .grid-container {
        gap: 2.5rem;
        animation-duration: 13s;
    }
}

/* Very narrow (tiny phones) – keep tiles small and spacing tight */
@media (max-width: 480px) {
    :root {
        --col-size: 6rem;
        --square-width: 7rem;
        --square-height: 9rem;
        --row-size: 8.5rem;
    }

    .grid-container {
        gap: 2rem;
        animation-duration: 14s;
    }
}

/* Short-but-wide screens – reduce height so grid doesn’t feel crushed behind hero */
@media (max-height: 800px) {
    :root {
        --square-height: 12rem;
        --row-size: 11rem;
    }

    .grid-container {
        gap: 3rem;
    }
}

@media (max-height: 650px) {
    :root {
        --square-height: 10.5rem;
        --row-size: 10rem;
    }

    .grid-container {
        gap: 2.75rem;
    }
}