/* ============================================================================
   Zorenthes — stylesheet
   ----------------------------------------------------------------------------
   Direction: a large faded logo sits centered, behind the wordmark. The
   silhouette is the page's light source — the wordmark, sub-line, and
   tagline sit inside its halo. Every word on the page is in one typeface
   family (Archivo) with consistent SpaceX/Anduril treatment.
   ============================================================================ */

/* ---------- font ---------- */
@font-face {
    font-family: "Archivo";
    src: url("/fonts/Archivo-Variable.woff2") format("woff2-variations"),
         url("/fonts/Archivo-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- tokens ---------- */
:root {
    --bg: #1c1c1e;
    --fg: #f2f2f4;
    --fg-soft: rgba(242, 242, 244, 0.78);
    --muted: rgba(242, 242, 244, 0.50);
    --line: rgba(255, 255, 255, 0.09);

    --font: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
            "Segoe UI", system-ui, sans-serif;

    --gutter: clamp(28px, 5vw, 72px);
    --bar-y: 22px;
}

/* ---------- page shell ---------- */
html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

/*
   Subtle film-grain noise — kept very low so the grey doesn't read as a
   default-template flat fill. The faded logo will provide the visual
   interest; this just gives the surface material texture.
*/
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23n)'/>\
</svg>");
}

/*
   THE GLOW — a dedicated radial gradient centered behind the logo. This
   needs its own layer because if we tried to attach the glow to the
   .halo image via drop-shadow, the element's opacity would multiply
   the shadow's alpha and reduce the halo to nothing. By keeping the
   glow on its own fixed layer at full opacity, we can dial the warmth
   and reach of the halo independently from how faded the logo silhouette
   appears.
*/
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 65% at 50% 48%,
                        rgba(255, 255, 255, 0.085) 0%,
                        rgba(255, 255, 255, 0.040) 22%,
                        rgba(255, 255, 255, 0.015) 42%,
                        transparent 60%);
}

/* ---------- HALO — the big faded logo backdrop ----------
   Fixed-position so it stays centered regardless of scroll. Sized to
   roughly fill the vertical viewport so it dominates as a backdrop.
   The glow LIVES on body::before; this element is just the silhouette
   inside the glow. Opacity tuned so the logo reads as "the source"
   without competing with the wordmark text in front.

   z-index: 2 sits above the body::before glow (z-index: 1) and the
   noise (z-index: 0), and below the topbar/hero/footer text (z-index: 5+).
*/
.halo {
    position: fixed;
    top: 50%;
    left: 50%;
    width: clamp(420px, 75vh, 800px);
    height: auto;
    transform: translate(-50%, -52%);  /* slight upward optical correction */
    opacity: 0.11;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    /*
       max-width caps the halo at 90vw on narrower screens so it never
       overflows horizontally on phones in landscape or skinny tablets.
       Height clamp on the parent already handles vertical fit.
    */
    max-width: 90vw;
}

/* ---------- topbar ---------- */
.topbar {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--bar-y) var(--gutter);
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3.5vw, 40px);
}

.nav a {
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-soft);
    padding: 8px 2px;
    transition: color 200ms ease;
}

.nav a:hover { color: var(--fg); }
.nav a:focus-visible {
    color: var(--fg);
    outline: none;
    box-shadow: 0 1px 0 0 var(--fg);
}

/* ---------- hero ----------
   The hero is purely a positioning container for the lockup, which sits
   over the halo. Place-items: center so the lockup is dead-centered
   horizontally; vertical centering happens via the grid template on body.
*/
.hero {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: clamp(40px, 8vh, 96px) var(--gutter);
    text-align: center;
}

.lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
   The wordmark stack — ZORENTHES big, TECHNOLOGIES smaller, both in the
   classic wide-tracked uppercase treatment. AMERICAN MADE follows below
   in the same treatment family at intermediate size — same font, same
   uppercase, similar tracking, lighter color.
*/
.wordmark {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.6vh, 8px);
    line-height: 1;
}

.wordmark-name {
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg);
    padding-left: 0.16em; /* center compensation for trailing tracking */
}

.wordmark-sub {
    font-weight: 500;
    font-size: clamp(0.78rem, 1.15vw, 1.05rem);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--muted);
    padding-left: 0.42em; /* center compensation */
}

.tagline {
    margin: clamp(44px, 7.5vh, 72px) 0 0;
    font-weight: 500;
    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--fg-soft);
    padding-left: 0.28em; /* center compensation */
}

/* ---------- footer ---------- */
.footer {
    position: relative;
    z-index: 10;
    padding: var(--bar-y) var(--gutter);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}

/* ---------- entrance choreography ----------
   The halo rises first (the light arrives), then the wordmark name lands
   over it, then the sub-line, then the tagline. Topbar and footer bracket
   the moment. Subtle — rise + fade, no looping.
*/
.halo           { opacity: 0; animation: halo-in 1400ms 0.10s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.topbar         { opacity: 0; animation: rise 600ms 0.10s ease-out forwards; }
.wordmark-name  { opacity: 0; animation: rise 900ms 0.30s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.wordmark-sub   { opacity: 0; animation: rise 800ms 0.48s ease-out forwards; }
.tagline        { opacity: 0; animation: rise 800ms 0.66s ease-out forwards; }
.footer         { opacity: 0; animation: rise 600ms 0.90s ease-out forwards; }

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* halo needs its own keyframes because its non-default transform must
   be preserved (it's translate(-50%, -52%) for centering) */
@keyframes halo-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to   { opacity: 0.11; transform: translate(-50%, -52%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .topbar, .wordmark-name, .wordmark-sub, .tagline, .footer {
        animation: none; opacity: 1; transform: none;
    }
    .halo {
        animation: none;
        opacity: 0.11;
        transform: translate(-50%, -52%);
    }
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
    .halo {
        width: clamp(320px, 78vw, 480px);
    }
    .wordmark-name {
        font-size: clamp(1.8rem, 9vw, 2.7rem);
        letter-spacing: 0.13em;
        padding-left: 0.13em;
    }
    .wordmark-sub {
        font-size: clamp(0.7rem, 2vw, 0.82rem);
        letter-spacing: 0.30em;
        padding-left: 0.30em;
    }
    .tagline {
        font-size: clamp(0.82rem, 2.4vw, 0.95rem);
        letter-spacing: 0.22em;
        padding-left: 0.22em;
        margin-top: clamp(32px, 5.5vh, 48px);
    }
}

@media (max-width: 420px) {
    .topbar, .footer { padding: 16px var(--gutter); }
    .nav { gap: 20px; }
    .nav a { font-size: 0.72rem; letter-spacing: 0.10em; }
    .footer { font-size: 0.7rem; }
}

/* ---------- print ---------- */
@media print {
    body::after, .halo { display: none; }
    body { background: #fff; color: #000; }
    .nav a, .wordmark-name, .wordmark-sub, .tagline, .footer { color: #000; }
}