/* Alien Wreck Studios — site styles. Fonts are self-hosted (OFL); see context/DECISIONS.md D-008. */

@font-face {
    font-family: "Big Shoulders Stencil Display";
    src: url("../fonts/big-shoulders-stencil-display-800.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

:root {
    /* Palette: the night of the impact */
    --night: #0a1128;      /* sky, page background */
    --dusk: #1b1738;       /* sky near the horizon */
    --ground: #05060f;     /* silhouetted ridges */
    --bone: #e8e2d4;       /* text — field-report paper */
    --ash: #9a9cb0;        /* secondary text */
    --beam: #bfe3ff;       /* the light in the sky; links */
    --ember: #ff7a2f;      /* the impact */
    --line: #232a4a;

    --stencil: "Big Shoulders Stencil Display", "Arial Narrow", sans-serif;
    --serif: "Source Serif 4", Georgia, serif;

    --max: 68rem;
    --gutter: max(1rem, calc((100vw - var(--max)) / 2 + 1rem));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--night);
    color: var(--bone);
    font: 1.125rem/1.7 var(--serif);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; padding-block: 3rem; }

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: 1rem;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .75rem; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-top: 2.5rem; }
p  { margin: 0 0 1rem; max-width: 65ch; }

a { color: var(--beam); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; }

img { max-width: 100%; height: auto; }

.skip-link {
    position: absolute;
    left: -999px;
    top: .5rem;
    background: var(--beam);
    color: var(--night);
    padding: .5rem 1rem;
    z-index: 20;
}
.skip-link:focus { left: .5rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: 1rem;
}
.brand {
    color: var(--bone);
    font-family: var(--stencil);
    font-weight: 800;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}
.site-header ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header nav a { color: var(--ash); text-decoration: none; }
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--bone); }
.site-header nav a[aria-current="page"] { border-bottom: 1px solid var(--beam); }

/* Footer: studio brand up front, the legal entity (Zabulan LLC) in the legal lines. */
.site-footer {
    border-top: 1px solid var(--line);
    background: var(--ground);
    color: var(--ash);
    font-size: .95rem;
}
.site-footer a { color: var(--ash); text-decoration: none; }
.site-footer a:hover { color: var(--bone); text-decoration: underline; }
.is-pending { opacity: .5; cursor: default; }

.footer__top {
    display: grid;
    gap: 2.5rem;
    padding-block: 3rem 2.5rem;
}
@media (min-width: 48rem) {
    .footer__top { grid-template-columns: minmax(15rem, 1fr) 2fr; }
}

.site-footer .footer__logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--bone);
    font-family: var(--stencil);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.site-footer .footer__logo:hover { text-decoration: none; }
.footer__logo svg { width: 2.25rem; height: 2.25rem; flex: none; }

.footer__parent { margin: .35rem 0 0 3rem; }
.site-footer .footer__z { color: var(--bone); white-space: nowrap; }
.footer__z svg { width: 1em; height: 1em; margin-right: .3em; vertical-align: -0.14em; }

.footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 30rem) {
    .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer__heading {
    margin: 0 0 .75rem;
    font: 600 1rem/1.4 var(--serif);
    color: var(--bone);
}
.footer__nav ul {
    display: grid;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__legal {
    border-top: 1px solid var(--line);
    padding-block: 1.5rem 2rem;
    font-size: .875rem;
}
.footer__legal p { margin: 0 0 .35rem; max-width: none; }

/* ------------------------------------------------------------------
   Home — the impact sequence
   Default (no JS / reduced motion): a still frame of the aftermath with
   all copy stacked. html.motion (set by home.js) enables the scroll scene.
   ------------------------------------------------------------------ */

.home .site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 10;
    border-bottom: 0;
}
.home main { padding: 0; }

.sky {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(to bottom, #000105 0%, #02040f 20%, #060b20 40%, var(--night) 58%, var(--dusk) 82%, #2a1c34 100%);
}

.sky__stage { position: absolute; inset: 0; transform-origin: 50% 80%; }

/* Oversized so scroll parallax (up and left) never reveals an edge. */
.sky__stars {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 120px);
    height: calc(100% + 380px);
}

.sky__scene,
.sky__fx,
.sky__landfx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Landscape, far to near: each layer darker and less hazy. */
.ridge--distant { fill: #1a1c3a; }
.ridge--far     { fill: #13152f; }
.ridge--mid     { fill: #0d0f27; }
.ridge--hills   { fill: #0a0b20; }
.ridge--near    { fill: #030409; }
.wires { fill: none; stroke: var(--ground); stroke-width: .8; }
.tower { fill: none; stroke: var(--ground); stroke-width: 1.4; stroke-linecap: round; }
.window { fill: #ffb45a; }
.beacon { fill: #ff3b2f; filter: drop-shadow(0 0 3px #ff3b2f); }

/* Still-frame state (no JS / reduced motion): the aftermath. */
.skylight { opacity: 0; }
.beam__ion, .beam__glow, .beam__core { opacity: .35; }
.impact__glow { opacity: .75; }
.dust ellipse { opacity: .5; }

.sky__flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 48% 80%, #ffffff, #fff1dc 45%, #f3dcc0);
    opacity: 0;
    pointer-events: none;
}

/* Film grain + vignette. */
.sky__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
}
.sky__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(0, 1, 6, .6) 100%);
}

@media (prefers-reduced-motion: no-preference) {
    .beacon { animation: beacon 2.4s steps(1) infinite; }
}
@keyframes beacon {
    0%, 70% { opacity: .15; }
    75%, 95% { opacity: 1; }
}

.sky__copy {
    position: relative;
    z-index: 2;
    padding: clamp(6rem, 18vh, 10rem) var(--gutter) 40vh;
}

.title {
    font-family: var(--stencil);
    font-weight: 800;
    font-size: clamp(4.4rem, min(10vw, 16vh), 9rem); /* full size on 900px+ tall screens; eases off on short laptops */
    line-height: 1;                                    /* clear space between the stacked lines */
    letter-spacing: .01em;
    text-transform: uppercase;
    max-width: 8ch;
    margin: 0 0 2.5rem;
    text-shadow: 0 0 40px rgba(10, 17, 40, .6);
}

.beat {
    font-size: clamp(1.45rem, 3.4vw, 2.5rem);
    line-height: 1.25;
    max-width: 20ch;
    margin: 0 0 1rem;
    text-wrap: balance;
    text-shadow: 0 1px 24px rgba(5, 9, 24, .9);
}

.sky__cue { display: none; }

/* Scroll-driven version */
html.motion .sky { height: 100vh; height: 100svh; }
html.motion .sky__copy { position: absolute; inset: 0; padding-bottom: 0; }
html.motion .beam__ion,
html.motion .beam__glow,
html.motion .beam__core { display: none; } /* the canvas draws the tapered trail */
html.motion .dust { display: none; }
.sky__landfx { display: none; }
html.motion .sky__landfx { display: block; }
html.motion .sky__land { display: none; }
html.motion .beat {
    position: absolute;
    left: var(--gutter);
    right: 1rem;
    bottom: 17%;
    opacity: 0;
}
@media (max-height: 820px) {
    html.motion .beat { bottom: 12%; }   /* short laptop screens: keep the story line clear of the title */
}
html.motion .sky__cue {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    margin: 0;
    font-style: italic;
    font-size: 1rem;
    color: var(--ash);
    text-align: center;
}
html.motion .sky__cue::after {
    content: "";
    display: block;
    width: 1px;
    height: 2.5rem;
    margin: .6rem auto 0;
    background: linear-gradient(var(--ash), transparent);
}

.aftermath {
    background: linear-gradient(var(--ground), var(--night) 45%);
    padding-block: clamp(5rem, 16vh, 10rem);
}
.aftermath h2 { margin-top: 0; max-width: 22ch; }