/* Reset, document defaults, keyframes and motion preferences.
   Ported from the original global <style> block; colours now come from tokens. */

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

* {
    overflow-wrap: break-word;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: var(--surface-page);
    color: var(--ink-body);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    overflow-x: clip;
}

::selection {
    /* Deliberately --accent, not --accent-text: this literal was one of the
       four that did NOT change between themes. See tokens.css note 1. */
    background: var(--accent);
    color: #fff;
}

a {
    color: var(--brand-text);
    text-decoration: none;
}

a:hover {
    color: var(--accent-text);
}

/* Belt and braces for the format-detection meta in partials/head.js. iOS also
   detects addresses and dates, which that meta does not cover, and it marks
   anything it has linked with this attribute. Inheriting kills the blue without
   needing to know what was detected. -webkit-text-fill-color is listed as well
   because on iOS it wins over `color`. */
a[x-apple-data-detectors] {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    text-decoration: none !important;
}

input,
textarea,
select,
button {
    font-family: inherit;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

[hidden] {
    display: none !important;
}

/* Keyboard users need to reach the content past the sticky header. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    border-radius: 0 0 var(--radius-lg) 0;
    background: var(--surface-card);
    color: var(--ink);
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes gn-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(4%, -5%, 0) scale(1.12); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes gn-drift2 {
    0% { transform: translate3d(0, 0, 0) scale(1.05); }
    50% { transform: translate3d(-6%, 4%, 0) scale(0.95); }
    100% { transform: translate3d(0, 0, 0) scale(1.05); }
}

@keyframes gn-scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(600%); }
}

@keyframes gn-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@keyframes gn-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes gn-marquee-rev {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@keyframes gn-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes gn-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes gn-grid {
    from { background-position: 0 0, 0 0; }
    to { background-position: 72px 72px, 72px 72px; }
}

@keyframes gn-shimmer {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

@keyframes gn-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
/* The original paused CSS animation here but left the canvas rAF loops, the
   marquee, the ticker and the terminal intervals running. js/motion.js now
   reads the same preference and stops those too. */

/* `animation: none`, NOT `animation-play-state: paused`.
   The original paused animations, which froze every gn-rise entrance at its
   0% keyframe — `from { opacity: 0 }`. The result was that the whole hero
   (pill, headline, lede and both buttons) was invisible to anyone who had
   asked for reduced motion. Removing the animation instead leaves each
   element in its natural, fully visible state. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}