/* ==========================================================================
   Divergent Space Technologies — Site Stylesheet
   Custom CSS layered on top of Tailwind (loaded via CDN in the HTML)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens — edit these to adjust the palette globally.
   Text color tiers match the GEOx ALPHA design system.

   To adjust text readability across the entire site, change these three
   values and every text element on the page updates in lockstep:

     --color-text-primary   → headings, key content, near-white
     --color-text-secondary → body copy, sub-headings, readable gray
     --color-text-muted     → metadata, corner readouts, labels, subtle gray

   The Tailwind utility classes `text-text-primary`, `text-text-secondary`,
   and `text-text-muted` all reference these variables via the Tailwind
   config in the HTML head.
   -------------------------------------------------------------------------- */
:root {
    --color-text-primary:   #e4e4e7;
    --color-text-secondary: #a1a1aa;
    --color-text-muted:     #d2d2d5;
    --color-accent:         #e9b714;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
}

body {
    background-color: #050505;
    color: var(--color-text-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Texture Overlays (applied globally, fixed position)
   -------------------------------------------------------------------------- */
.texture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0.4;
}

.gradient-text {
    background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --------------------------------------------------------------------------
   Coordinate Ticks (L-shaped corner marks)
   -------------------------------------------------------------------------- */
.tick-top-left     { position: absolute; top: 40px;    left: 40px;  width: 20px; height: 20px; border-top: 1px solid #222222; border-left: 1px solid #222222; }
.tick-top-right    { position: absolute; top: 40px;    right: 40px; width: 20px; height: 20px; border-top: 1px solid #222222; border-right: 1px solid #222222; }
.tick-bottom-left  { position: absolute; bottom: 40px; left: 40px;  width: 20px; height: 20px; border-bottom: 1px solid #222222; border-left: 1px solid #222222; }
.tick-bottom-right { position: absolute; bottom: 40px; right: 40px; width: 20px; height: 20px; border-bottom: 1px solid #222222; border-right: 1px solid #222222; }

/* --------------------------------------------------------------------------
   Scrollbar (brutalist)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #222222;
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
}

/* --------------------------------------------------------------------------
   Form — brutalist input focus state
   -------------------------------------------------------------------------- */
.brutalist-input:focus {
    outline: none;
    border-color: #FFFFFF;
    box-shadow: inset 0 0 0 1px #FFFFFF;
}

/* --------------------------------------------------------------------------
   Nav — active link state (driven by scroll-spy JS)
   -------------------------------------------------------------------------- */
.nav-link.active {
    color: #F3F4F6 !important;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Mobile menu drawer
   -------------------------------------------------------------------------- */
.mobile-menu {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.open {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Logo (header)
   File: DST.png — 4.33:1 aspect ratio wordmark.
   At height 72px, rendered width is ~312px.
   Fallback rectangle matches the aspect ratio so there's no layout shift
   while the image loads.
   -------------------------------------------------------------------------- */
.logo-img {
    height: 72px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
    display: none; /* hidden until onload fires */
}

.logo-fallback {
    width: 312px;
    height: 72px;
    background: #FFFFFF;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-fallback-inner {
    width: 36px;
    height: 36px;
    background: #050505;
}

/* --------------------------------------------------------------------------
   Hero Video Underlay
   Drop your video file at ./hero-video.mp4 (or update the <source> src).
   Recommended: H.264 MP4, 1920×1080 or 3840×2160, muted, short loop (10–30s),
   dark/desaturated content so overlay text remains legible.
   Keep file size under 10 MB for fast first paint.
   -------------------------------------------------------------------------- */
.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    filter: grayscale(0.4) contrast(1.1);
}

/* Gradient overlay for text legibility over video */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(5,5,5,0.3) 0%, rgba(5,5,5,0.75) 100%),
        linear-gradient(to bottom, rgba(5,5,5,0.4) 0%, rgba(5,5,5,0.2) 50%, rgba(5,5,5,0.95) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Ensures hero text content sits above the video */
.hero-content {
    position: relative;
    z-index: 10;
}

/* Reduced motion: pause the video for users who request it */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Accent phrase — highlight color for key conceptual phrases.
   The base style bumps weight to 500 (a subtle emphasis over 400 body text).
   Inside headings, weight inherits from the parent so big display type
   stays bold (e.g., font-black inside h1 stays 900, not 500).
   Usage:
     <span class="accent-phrase">ground truth without ground presence</span>
   -------------------------------------------------------------------------- */
.accent-phrase {
    color: var(--color-accent);
    font-weight: 500;
}

h1 .accent-phrase,
h2 .accent-phrase,
h3 .accent-phrase,
h4 .accent-phrase,
h5 .accent-phrase,
h6 .accent-phrase {
    font-weight: inherit;
}

/* ==========================================================================
   HERO INTRO ANIMATION (Anduril-style)
   Only the hero section animates — it plays once on page load as the
   "intro." Everything else on the page is static; the user scrolls and
   content is simply there. This avoids the feeling of the page
   constantly bouncing as you scroll between sections.

   Classes are deliberately scoped to `#hero` so that stray reveal class
   names elsewhere in the markup are inert (no animation, no hidden state).

   IMPORTANT: The hidden state is gated behind `.js-ready` on the <html>
   element. If JavaScript fails or hasn't run yet, the hidden state never
   applies and the text is visible — a hard fail-safe against the hero
   appearing blank.
   ========================================================================== */

/* Fade + small rise (hero supporting elements) */
.js-ready #hero .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition-property: opacity, transform;
    transition-duration: 1100ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js-ready #hero .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Line-by-line headline reveal: text rises from under a clipped container */
.js-ready #hero .reveal-line-wrap {
    display: block;
    overflow: hidden;
    padding-bottom: 0.12em;
}

.js-ready #hero .reveal-line {
    display: block;
    opacity: 0;
    transform: translateY(105%);
    transition-property: opacity, transform;
    transition-duration: 1200ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js-ready #hero .reveal-line.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Fade only (metadata, badges) */
.js-ready #hero .reveal-fade {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1600ms;
    transition-timing-function: ease-out;
    transition-delay: var(--reveal-delay, 0ms);
}

.js-ready #hero .reveal-fade.revealed {
    opacity: 1;
}

/* Scroll progress indicator — 1px line below the header */
.scroll-progress {
    position: fixed;
    top: 112px;
    left: 0;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, #FFFFFF 100%);
    z-index: 40;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

/* Reduced motion: skip the intro, hide progress bar */
@media (prefers-reduced-motion: reduce) {
    .js-ready #hero .reveal,
    .js-ready #hero .reveal-line,
    .js-ready #hero .reveal-fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .scroll-progress {
        display: none;
    }
}