/* ============================================================================
   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%;
    /*
       Sizing has to respect BOTH viewport dimensions. The previous
       clamp(420px, 75vh, 800px) had a *minimum* of 420px, so on a
       landscape iPhone (~393px of viewport height) the halo couldn't
       shrink and bled down over the footer. min() lets the smallest
       constraint win, so the halo never exceeds 75% of viewport height,
       85% of viewport width, or 800px — whichever is smallest.
    */
    width: min(75vh, 85vw, 800px);
    height: auto;
    transform: translate(-50%, -52%);  /* slight upward optical correction */
    opacity: 0.11;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* ---------- topbar ---------- */
.topbar {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*
       max() with env(safe-area-inset-*) keeps the gutter on normal
       viewports but expands it on devices where the OS reserves space
       (iPhone notch / Dynamic Island in landscape, home indicator, etc.).
       Top inset is small in practice but harmless to include.
    */
    padding:
        max(var(--bar-y), env(safe-area-inset-top))
        max(var(--gutter), env(safe-area-inset-right))
        var(--bar-y)
        max(var(--gutter), env(safe-area-inset-left));
}

.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;
    /*
       Same safe-area treatment as the topbar. Bottom inset matters here
       because of the home-indicator on modern iPhones.
    */
    padding:
        var(--bar-y)
        max(var(--gutter), env(safe-area-inset-right))
        max(var(--bar-y), env(safe-area-inset-bottom))
        max(var(--gutter), env(safe-area-inset-left));
    font-weight: 400;
    /*
       Font scales with viewport so the line "© 2026 Zorenthes Technologies, Inc."
       never has to wrap onto a second line. Wrapping was making the footer
       grow upward into the halo. white-space: nowrap is the belt to the
       clamp's suspenders.
    */
    font-size: clamp(0.62rem, 1.7vw, 0.78rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
}

/* ---------- 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 ----------
   The halo now sizes itself via min(75vh, 85vw, 800px) and the footer
   font scales via clamp(), so both already shrink correctly on narrow
   viewports without their own media queries. The wordmark + tagline get
   small-screen tracking adjustments below.
*/

@media (max-width: 640px) {
    .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) {
    .nav { gap: 20px; }
    .nav a { font-size: 0.72rem; letter-spacing: 0.10em; }
}

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