/* ---------------------------------------------------------------------------
   Layout: navbar, section grid, marquee, footer
--------------------------------------------------------------------------- */

/* --- navbar ------------------------------------------------------------- */
.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding-top: 1rem;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: var(--pad);
    transition:
        transform 0.45s var(--ease),
        background-color 0.4s var(--ease),
        border-color 0.4s var(--ease),
        backdrop-filter 0.4s var(--ease);
    border-bottom: 1px solid transparent;
}

.nav.is-stuck {
    background: rgb(6 8 6 / 62%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom-color: var(--line);
}

.nav.is-hidden {
    transform: translateY(-100%);
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-right: auto;
}

.nav__brand > svg {
    height: 30px;
    width: auto;
    transition: filter 0.4s var(--ease);
}

.nav__brand:hover > svg {
    filter: drop-shadow(0 0 14px var(--acid-line));
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav__link {
    position: relative;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-mute);
    border-radius: 99px;
    transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.nav__link:hover {
    color: var(--fg);
    background: var(--glass);
}

.nav__link.is-active {
    color: var(--acid);
}

.nav__link.is-active::after {
    content: '';
    position: absolute;
    inset: auto 0.85rem -2px;
    height: 2px;
    background: var(--acid);
    box-shadow: 0 0 12px var(--acid);
}

.nav__side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav__ig {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--fg-mute);
    transition: all 0.3s var(--ease);
}

.nav__ig:hover {
    color: var(--acid);
    border-color: var(--acid-line);
    box-shadow: 0 0 22px -6px var(--acid);
}

.nav__burger {
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--glass);
}

/* hamburger / close icon: only one visible at a time */
.nav__burger svg:nth-child(2) {
    display: none;
}

.nav__burger[aria-expanded='true'] svg:nth-child(1) {
    display: none;
}

.nav__burger[aria-expanded='true'] svg:nth-child(2) {
    display: block;
}

/* --- full-screen mobile menu -------------------------------------------- */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: grid;
    grid-template-rows: var(--nav-h) 1fr auto;
    padding-inline: var(--pad);
    background: rgb(5 7 5 / 92%);
    backdrop-filter: blur(26px) saturate(140%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.sheet.is-open {
    visibility: visible;
    opacity: 1;
}

.sheet__links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.1rem, 1vh, 0.6rem);
}

.sheet__link {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 12vw, 4rem);
    line-height: 1;
    text-transform: uppercase;
    color: var(--fg);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
    transition-delay: var(--d, 0s);
}

.sheet.is-open .sheet__link {
    opacity: 1;
    transform: none;
}

.sheet__link:hover,
.sheet__link:focus-visible {
    color: var(--acid);
}

.sheet__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-block: 1.5rem 2.5rem;
}

/* --- sections ------------------------------------------------------------ */
.section {
    position: relative;
    z-index: 3;
    padding: clamp(4.5rem, 12vh, 8.5rem) var(--pad);
}

.section--tight {
    padding-block: clamp(3rem, 8vh, 5rem);
}

.shell {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
}

.sec-head {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.sec-head__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.sec-idx {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
}

.sec-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 9vw, 6rem);
    line-height: 0.9;
    text-transform: uppercase;
    text-wrap: balance;
}

.sec-title em {
    font-style: normal;
    color: var(--acid);
    text-shadow: 0 0 42px rgb(57 255 20 / 45%);
}

.rule {
    height: 1px;
    background: linear-gradient(90deg, var(--acid-line), transparent 70%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.1s var(--ease) 0.15s;
}

.is-in .rule,
.rule.is-in {
    transform: scaleX(1);
}

/* --- marquee ------------------------------------------------------------ */
/* the wrapper clips the rotated band: without it the page scrolls horizontally */
.marquee-wrap {
    position: relative;
    z-index: 4;
    overflow: hidden;
    padding-block: 1.4rem;
}

.marquee {
    display: flex;
    overflow: hidden;
    width: 108%;
    margin-left: -4%;
    padding-block: 0.7rem;
    background: var(--acid);
    color: #04120a;
    border-block: 1px solid rgb(0 0 0 / 25%);
    rotate: -1.4deg;
    user-select: none;
}

.marquee__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
    animation: slide 26s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.marquee__item svg {
    height: 0.95em;
    width: auto;
    opacity: 0.8;
}

.marquee__item svg .gl-ink,
.marquee__item svg .gl-acid {
    fill: #04120a;
}

@keyframes slide {
    to {
        transform: translateX(-100%);
    }
}

/* --- footer ------------------------------------------------------------- */
.footer {
    position: relative;
    z-index: 3;
    padding: clamp(3rem, 8vh, 5rem) var(--pad) 2.5rem;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, transparent, rgb(57 255 20 / 3%));
}

.footer__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    max-width: var(--maxw);
    margin-inline: auto;
}

.footer__brand svg {
    height: clamp(46px, 8vw, 74px);
    width: auto;
}

.footer__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--fg-dim);
}

.footer__meta a:hover {
    color: var(--acid);
}

.top {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-mute);
}

.top svg {
    rotate: -90deg;
    transition: transform 0.3s var(--ease);
}

.top:hover {
    color: var(--acid);
}

.top:hover svg {
    transform: translateY(-3px);
}

/* --- responsive --------------------------------------------------------- */
@media (width <= 900px) {
    /* `.nav .nav__cta` and not `.nav__cta`: it must beat `.btn { display: inline-flex }` */
    .nav .nav__links,
    .nav .nav__cta {
        display: none;
    }

    .nav__burger {
        display: grid;
    }
}

@media (width <= 560px) {
    .nav__ig,
    .nav__wordmark {
        display: none;
    }
}