/* ShadowOps cinematic marketing page — a standalone stylesheet, deliberately
   not sharing app/static/styles.css. The console UI and this scroll-story
   have nothing in common visually and mixing their rulesets only risks one
   leaking into the other. */

@font-face {
  font-family: "Anton";
  src: url("/static/fonts/Anton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Var";
  src: url("/static/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Var";
  src: url("/static/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --so-black: #050505;
  --so-charcoal: #0b0b0b;
  --so-off-white: #f1efe8;
  --so-silver: #8a8a86;
  /* Sampled directly from the real ShadowOps mark (shadowops-brand-transparent.png) */
  --so-blue-bright: #36a6fd;
  --so-blue: #1e75fd;
  --so-blue-deep: #1b52ca;
  --so-terminal: #69f0a2;
  --so-terminal-deep: #0b4d2d;
  --so-display: "Anton", "Arial Narrow", sans-serif;
  --so-sans: "Inter Var", ui-sans-serif, system-ui, sans-serif;
  --so-mono: "JetBrains Mono Var", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--so-black);
  scrollbar-color: var(--so-blue) var(--so-black);
}

body.so-body {
  margin: 0;
  background: var(--so-black);
  color: var(--so-off-white);
  font-family: var(--so-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: none;
}

@media (max-width: 860px), (pointer: coarse) {
  body.so-body { cursor: auto; }
}

.so-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Custom cursor ─────────────────────────────────────────────────────── */
.so-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--so-off-white);
  pointer-events: none;
  z-index: 200;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  transition: width .18s ease, height .18s ease, margin .18s ease, background-color .18s ease;
  will-change: transform;
}
.so-cursor.is-hover {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  background: var(--so-off-white);
}
.so-cursor-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--so-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--so-black);
  opacity: 0;
  transition: opacity .15s ease;
}
.so-cursor.is-hover .so-cursor-label { opacity: 1; }

@media (max-width: 860px), (pointer: coarse) {
  .so-cursor { display: none; }
}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.so-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 56px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, border-color .3s ease, background-color .3s ease;
  border-bottom: 1px solid transparent;
}
.so-nav.is-visible { opacity: 1; transform: translateY(0); }
.so-nav.is-solid {
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(241, 239, 232, 0.12);
}
.so-nav-brand {
  position: relative;
  width: clamp(138px, 12vw, 180px);
  height: clamp(58px, 5vw, 76px);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--so-off-white);
}
.so-nav-brand img {
  position: absolute;
  left: -24.5%;
  top: -44%;
  width: 147.9%;
  max-width: none;
  height: auto;
  display: block;
}
.so-nav-identity { display: flex; flex-direction: column; align-items: flex-start; }
.so-nav-system,
.so-nav-status {
  font-family: var(--so-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.7;
  color: var(--so-off-white);
  opacity: .72;
}
.so-nav-system { margin-top: 3px; }
.so-nav-system .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--so-blue-bright);
  box-shadow: 0 0 10px var(--so-blue-bright);
  animation: so-pulse 2.2s ease-in-out infinite;
}
.so-nav-actions { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.so-nav-status { align-self: auto; margin: 8px 0 0; white-space: nowrap; }
.so-nav-brand span {
  font-family: var(--so-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.so-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-left: 0;
  margin-top: 8px;
}
.so-nav-links a {
  color: var(--so-off-white);
  text-decoration: none;
  font-family: var(--so-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  opacity: .7;
  transition: opacity .2s ease;
}
.so-nav-links a:hover { opacity: 1; }
.so-nav-cta {
  border: 1px solid rgba(241, 239, 232, 0.35);
  padding: 9px 18px;
  opacity: 1 !important;
}
.so-nav-cta:hover { border-color: var(--so-blue); color: var(--so-blue-bright); }

@media (max-width: 720px) {
  .so-nav { padding: 8px 16px; }
  .so-nav-brand { width: 126px; height: 53px; }
  .so-nav-system,
  .so-nav-status { display: none; }
  .so-nav-links a:not(.so-nav-cta) { display: none; }
}

/* ── Section scaffolding ──────────────────────────────────────────────── */
.so-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
}
.so-section-dark { background: var(--so-black); color: var(--so-off-white); isolation: isolate; }
.so-section-light { background: var(--so-off-white); color: var(--so-black); }
.so-section-dark > :not(.so-digital-rain):not(.so-scene) { z-index: 1; }

.so-meta {
  font-family: var(--so-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}
.so-meta strong { opacity: 1; font-weight: 700; }

.so-rule { height: 1px; background: currentColor; opacity: .14; }

/* ── Opening ───────────────────────────────────────────────────────────── */
.so-opening {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  min-height: 100svh;
}
.so-corner {
  position: absolute;
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.7;
  color: var(--so-off-white);
  opacity: 0;
}
.so-corner .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--so-blue-bright);
  margin-right: 8px;
  box-shadow: 0 0 10px var(--so-blue-bright);
  animation: so-pulse 2.2s ease-in-out infinite;
}
@keyframes so-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.so-corner-tl { top: clamp(76px, 10vh, 120px); left: clamp(20px, 4vw, 56px); }
.so-corner-tr { top: clamp(76px, 10vh, 120px); right: clamp(20px, 4vw, 56px); text-align: right; }
.so-corner-bl { bottom: clamp(24px, 6vh, 64px); left: clamp(20px, 4vw, 56px); }

.so-prompt {
  font-family: var(--so-mono);
  font-size: clamp(15px, 2.2vw, 22px);
  color: var(--so-terminal);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  text-shadow: 0 0 18px rgba(105, 240, 162, .2);
  margin: 0;
  position: relative;
  z-index: 3;
}
.so-prompt-symbol { opacity: .7; }
.so-prompt .caret {
  display: inline-block;
  width: .55em; height: 1.1em;
  background: var(--so-terminal);
  margin-left: 4px;
  animation: so-blink 1s steps(1) infinite;
}
@keyframes so-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.so-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -2;
}
.so-scene canvas { display: block; width: 100%; height: 100%; }

.so-digital-rain {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
  mask-image: radial-gradient(ellipse 74% 72% at 50% 48%, #000 15%, transparent 76%);
  pointer-events: none;
}
.so-section-rain {
  opacity: .48;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.so-rain-column {
  position: absolute;
  top: -26%;
  width: 1px;
  height: var(--rain-height);
  background: linear-gradient(to bottom, transparent, rgba(105, 240, 162, .03) 25%, rgba(105, 240, 162, .48) 50%, transparent);
  box-shadow: 0 0 10px rgba(105, 240, 162, .22);
  animation: so-rain-fall var(--rain-duration) linear infinite;
  animation-delay: var(--rain-delay);
}
@keyframes so-rain-fall { to { transform: translateY(155svh); } }

.so-opening-stage {
  position: relative;
  z-index: 2;
  width: min(980px, 82vw);
  min-height: min(520px, 63svh);
  display: grid;
  place-items: center;
}
.so-opening-kicker,
.so-opening-platform,
.so-scroll-cue,
.so-opening-still figcaption,
.so-opening-motion > span {
  font-family: var(--so-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
}
.so-opening-kicker {
  position: absolute;
  top: 8%;
  color: var(--so-terminal);
  opacity: 0;
}
.so-opening-still,
.so-opening-motion {
  grid-area: 1 / 1;
  position: relative;
  width: min(720px, 76vw);
  margin: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  border: 1px solid rgba(105, 240, 162, .28);
  background: transparent;
  box-shadow: 0 44px 120px rgba(0, 0, 0, .66), 0 0 90px rgba(18, 155, 81, .12);
}
.so-opening-still img,
.so-opening-motion video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.so-opening-still::after,
.so-opening-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(9, 106, 53, .16), transparent 45%, rgba(105, 240, 162, .08));
}
.so-opening-still figcaption,
.so-opening-motion > span {
  position: absolute;
  right: 14px;
  bottom: 12px;
  margin: 0;
  color: var(--so-terminal);
  text-shadow: 0 1px 8px #000;
}
.so-opening-motion { width: min(1040px, 90vw); }
.so-opening-dissolve-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(105, 240, 162, .42));
}
.so-opening-platform {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(24px, 6vh, 64px);
  color: var(--so-off-white);
  opacity: 0;
}
.so-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 5vh, 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--so-terminal);
  opacity: 0;
  transform: translateX(-50%);
}
.so-scroll-cue span {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--so-terminal), transparent);
  animation: so-scroll-pulse 1.7s ease-in-out infinite;
}
@keyframes so-scroll-pulse { 50% { transform: scaleY(.5); transform-origin: top; opacity: .35; } }

/* ── Giant type ────────────────────────────────────────────────────────── */
.so-display {
  font-family: var(--so-display);
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.01em;
  margin: 0;
}
.so-display-xl { font-size: clamp(52px, 13vw, 190px); }
.so-display-lg { font-size: clamp(40px, 8vw, 110px); }
.so-display-md { font-size: clamp(28px, 5vw, 64px); }

.so-reveal-stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0 20px;
}
.so-reveal-line { opacity: 0; }
.so-reveal-stack.is-stacked {
  display: block;
}
.so-reveal-stack.is-stacked .so-reveal-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.so-dissolve-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(105, 240, 162, .42));
}

/* ── Hero product reveal ──────────────────────────────────────────────── */
.so-hero-shot-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}
.so-hero-shot {
  width: min(1180px, 92vw);
  border: 1px solid rgba(241, 239, 232, 0.14);
  box-shadow: 0 60px 140px rgba(0,0,0,.65);
  transform-style: preserve-3d;
  will-change: transform, filter;
  overflow: hidden;
}
.so-hero-shot img { display: block; width: 100%; height: auto; filter: grayscale(1) brightness(.5) contrast(1.1); transition: filter .2s linear; }
.so-hero-shot--orchestration {
  width: min(1360px, 94vw);
  border-color: transparent;
  box-shadow: none;
}
.so-hero-shot--orchestration img {
  aspect-ratio: 2.35 / 1;
  object-fit: cover;
  object-position: center;
}
.so-hero-flow {
  display: block;
  margin-top: 16px;
  color: var(--so-terminal);
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .72;
}

/* Dream-paper treatment: a soft terminal-green burn instead of a hard card. */
.so-dream-paper {
  position: relative;
  border: 0 !important;
  isolation: isolate;
  overflow: visible !important;
  background: transparent !important;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, .6)) drop-shadow(0 0 28px rgba(105, 240, 162, .1));
}
.so-dream-paper > img,
.so-dream-paper > video {
  position: relative;
  z-index: 0;
  clip-path: polygon(2% 3%, 12% 2%, 21% 3%, 33% 1%, 45% 3%, 58% 2%, 70% 4%, 83% 1%, 98% 3%, 97% 17%, 99% 29%, 97% 41%, 99% 53%, 97% 66%, 99% 79%, 96% 97%, 84% 96%, 70% 99%, 57% 97%, 43% 99%, 29% 97%, 16% 99%, 2% 96%, 3% 83%, 1% 70%, 3% 56%, 1% 43%, 3% 28%);
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 61%, rgba(0,0,0,.98) 73%, rgba(0,0,0,.62) 87%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 61%, rgba(0,0,0,.9) 73%, rgba(0,0,0,.4) 87%, rgba(0,0,0,.01) 99%, transparent 100%);
  mask-mode: alpha;
}
.so-dream-paper::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 2;
  pointer-events: none;
  padding: 9px;
  background:
    radial-gradient(ellipse at 2% 18%, rgba(105,240,162,.34), transparent 16%),
    radial-gradient(ellipse at 98% 76%, rgba(105,240,162,.28), transparent 19%),
    radial-gradient(ellipse at 55% 0%, rgba(105,240,162,.16), transparent 15%),
    linear-gradient(110deg, rgba(105,240,162,.24), rgba(11,77,45,.06) 28%, rgba(105,240,162,.2) 75%, rgba(11,77,45,.1));
  clip-path: polygon(1% 3%, 18% 1%, 36% 2%, 52% 0, 72% 2%, 99% 1%, 98% 22%, 100% 44%, 98% 78%, 99% 98%, 78% 97%, 58% 100%, 39% 98%, 19% 100%, 1% 97%, 2% 76%, 0 53%, 2% 28%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .66;
  filter: blur(5px);
}
.so-dream-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0 50%, rgba(105,240,162,.1), transparent 14%),
    radial-gradient(ellipse at 100% 34%, rgba(105,240,162,.08), transparent 16%);
  mix-blend-mode: screen;
  opacity: .5;
}
.so-opening-still.so-dream-paper,
.so-opening-motion.so-dream-paper { box-shadow: none; }

.so-hero-copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100vh;
  text-align: center;
  padding-bottom: clamp(48px, 8vh, 96px);
  opacity: 0;
}
.so-hero-copy .so-meta { margin-bottom: 14px; }
.so-hero-copy p { margin: 6px 0 0; font-family: var(--so-sans); font-size: clamp(16px, 2vw, 22px); color: var(--so-silver); }
.so-hero-copy p strong { color: var(--so-off-white); font-weight: 700; }
.so-hero-dissolve-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(105, 240, 162, .42));
}

/* ── Editorial (off-white) grid ───────────────────────────────────────── */
.so-editorial {
  padding: clamp(90px, 14vh, 160px) clamp(20px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  border-top: 1px solid rgba(5,5,5,.12);
  border-bottom: 1px solid rgba(5,5,5,.12);
}
.so-editorial-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(28px, 5vh, 56px);
}
.so-editorial-head .so-meta { color: rgba(5,5,5,.55); text-align: right; }
.so-editorial-title { grid-column: 1 / span 7; }
.so-editorial-title .so-display { color: var(--so-black); }
.so-editorial-shot {
  grid-column: 8 / span 5;
  align-self: center;
  border: 1px solid rgba(5,5,5,.16);
  box-shadow: 0 30px 70px rgba(5,5,5,.18);
  overflow: hidden;
}
.so-editorial-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .so-editorial-title, .so-editorial-shot { grid-column: 1 / -1; }
  .so-editorial-shot { margin-top: 28px; }
}

/* ── Output / CREATE section ──────────────────────────────────────────── */
.so-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 14vh, 140px) clamp(20px, 6vw, 72px);
  gap: clamp(28px, 5vh, 56px);
}
.so-output > *,
.so-finale > * { position: relative; z-index: 1; }
.so-output-media {
  position: relative;
  width: min(900px, 92vw);
  border: 1px solid rgba(241,239,232,.16);
  box-shadow: 0 60px 140px rgba(0,0,0,.6);
  overflow: hidden;
  background: #000;
}
.so-output-media video, .so-output-media img { display: block; width: 100%; height: auto; }
.so-output-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
}
.so-output-labels span {
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
}
.so-output-labels span.is-lit { opacity: 1; color: var(--so-blue-bright); }

/* ── Engineering / BUILD section ──────────────────────────────────────── */
.so-build {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: center;
  padding: clamp(90px, 14vh, 160px) clamp(20px, 6vw, 72px);
}
.so-build-copy { grid-column: 1 / span 4; }
.so-build-shot {
  grid-column: 5 / span 8;
  border: 1px solid rgba(5,5,5,.16);
  box-shadow: 0 40px 100px rgba(5,5,5,.2);
  overflow: hidden;
}
.so-build-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .so-build-copy, .so-build-shot { grid-column: 1 / -1; }
  .so-build-shot { margin-top: 28px; }
}

/* ── Final brand reveal ────────────────────────────────────────────────── */
.so-finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(28px, 5vh, 48px);
  padding: 80px 20px;
}
.so-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--so-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--so-black);
  background: var(--so-off-white);
  padding: 18px 34px;
  text-decoration: none;
  border: 1px solid var(--so-off-white);
  transition: background-color .2s ease, color .2s ease;
}
.so-cta:hover { background: var(--so-blue-bright); border-color: var(--so-blue-bright); color: #000; }
.so-cta-secondary {
  font-family: var(--so-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--so-off-white);
  opacity: .65;
  text-decoration: none;
}
.so-cta-secondary:hover { opacity: 1; }

.so-accent-text { color: var(--so-blue); }
.so-accent-text-bright { color: var(--so-blue-bright); }
.so-mt-md { margin-top: 18px; }

.so-footer {
  padding: 32px clamp(20px, 6vw, 56px) 48px;
  display: flex;
  justify-content: space-between;
  font-family: var(--so-mono);
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .45;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .so-scene { display: none; }
  .so-digital-rain { display: none; }
  .so-hero-shot img { filter: none; }
}

@media (max-width: 720px) {
  .so-opening-stage { width: 100%; min-height: 56svh; padding: 0 20px; }
  .so-opening-kicker { top: 0; font-size: 9px; text-align: center; }
  .so-prompt { max-width: 100%; font-size: clamp(14px, 4.1vw, 17px); white-space: nowrap; }
  .so-opening-still,
  .so-opening-motion { width: calc(100vw - 40px); }
  .so-opening-platform { left: 20px; right: auto; bottom: 24px; font-size: 8px; }
  .so-scroll-cue { bottom: 22px; font-size: 8px; }
  .so-scroll-cue span { height: 22px; }
  .so-section-rain { opacity: .3; }
}