/* SOVEREIGN — landing page */

@import url("/sovereign/assets/sovereign-tokens.css");

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--so-black);
  color: var(--fg-0);
  cursor: default;
}

/* ────────────────────────────────────────────────────────────
   Stage — fixed dark canvas with everything layered inside
   ──────────────────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  overflow: hidden;
  isolation: isolate;
}

/* ── Grid hairlines (scribe in on load) ── */
.grid-lines {
  position: absolute;
  inset: var(--edge, 56px);
  pointer-events: none;
  z-index: 1;
}
.grid-lines .gl-v,
.grid-lines .gl-h {
  position: absolute;
  background: var(--rule-2);
}
.grid-lines .gl-v { width: 1px; top: 0; bottom: 0; transform-origin: top; transform: scaleY(0); }
.grid-lines .gl-h { height: 1px; left: 0; right: 0; transform-origin: left; transform: scaleX(0); }

/* ── Outer frame brackets (corner registration) ── */
.frame {
  position: absolute;
  inset: calc(var(--edge, 56px) + 28px);
  pointer-events: none;
  z-index: 7;
}
.frame > .cb-tl,
.frame > .cb-tr,
.frame > .cb-bl,
.frame > .cb-br {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--fg-2);
}
.frame .cb-tl { top: -1px; left: -1px;     border-top: 1px solid; border-left: 1px solid; }
.frame .cb-tr { top: -1px; right: -1px;    border-top: 1px solid; border-right: 1px solid; }
.frame .cb-bl { bottom: -1px; left: -1px;  border-bottom: 1px solid; border-left: 1px solid; }
.frame .cb-br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Top ticker row — coord / bearing readouts ── */
.ticker {
  position: absolute;
  top: calc(var(--edge, 56px) - 22px);
  left: var(--edge, 56px);
  right: var(--edge, 56px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  z-index: 7;
}
.ticker .tk {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ticker .tk b {
  color: var(--fg-1);
  font-weight: 400;
}

/* ── Photo plates removed (alt layout chosen) ── */


/* ── Center composition ── */
.center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 6;
  text-align: center;
  padding: 0 80px;
}
.center .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.lottie-logo {
  width: min(42vw, 640px);
  aspect-ratio: 5 / 2;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Tagline + CTA ── */
.tagline {
  font-family: var(--font-grotesk);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  max-width: 460px;
  text-wrap: pretty;
}

.cta {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 20px;
  background: var(--so-blue);
  color: var(--so-white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  cursor: default;
  transition: background 200ms cubic-bezier(.22,1,.36,1);
  position: relative;
}
.cta::after {
  content: "→";
  font-family: var(--font-mono);
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1);
}
.cta:hover { background: #4a67ff; }
.cta:hover::after { transform: translateX(4px); }
.cta:active { transform: scale(0.985); }

/* ── Footer ── */
.copyright {
  position: absolute;
  left: var(--edge, 56px);
  bottom: calc(var(--edge, 56px) - 24px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  z-index: 7;
}

.footer-right {
  position: absolute;
  right: var(--edge, 56px);
  bottom: calc(var(--edge, 56px) - 24px);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 7;
}
.footer-right .precursor {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ── Depth-of-field / vignette overlay (top) ── */
.dof {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  /* radial blur via backdrop-filter mask — feathers from clear center to blurry edges */
  -webkit-mask: radial-gradient(ellipse 35% 40% at 50% 50%, transparent 0%, rgba(0,0,0,0.05) 22%, #000 70%);
          mask: radial-gradient(ellipse 35% 40% at 50% 50%, transparent 0%, rgba(0,0,0,0.05) 22%, #000 70%);
  backdrop-filter: blur(var(--dof-blur, 5px));
  -webkit-backdrop-filter: blur(var(--dof-blur, 5px));
}

/* vignette darkening */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    ellipse 60% 65% at 50% 50%,
    transparent 0%,
    transparent 40%,
    rgba(0,0,0,calc(var(--vignette, 0.55) * 0.6)) 70%,
    rgba(0,0,0,var(--vignette, 0.55)) 100%
  );
}

/* ── Defaults ── */
body {
  --edge: clamp(40px, 4vw, 64px);
  --grid-cols: 12;
  --grid-rows: 7;
  --dof-blur: 1px;
  --vignette: 0.6;
}

/* density variants */
body[data-density="sparse"]  { --grid-cols: 8;  --grid-rows: 5; }
body[data-density="regular"] { --grid-cols: 12; --grid-rows: 7; }
body[data-density="dense"]   { --grid-cols: 16; --grid-rows: 9; }

/* Pause-able animations */
body[data-anim="off"] .cl { transition: none !important; }

/* ────────────────────────────────────────────────────────────
   Full-bleed background video (alt layout)
   ──────────────────────────────────────────────────────────── */
.bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-video img,
.bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.2) contrast(1.05) brightness(0.82) saturate(0.8);
}
.bg-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
    radial-gradient(ellipse 85% 80% at 50% 50%, rgba(0,0,0,0.05), rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   Floating corner grid panels — removed (full-bleed only now)
   ──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   Dot matrix overlay — 1px black dots tiled every 4px
   ──────────────────────────────────────────────────────────── */
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(circle, rgba(0,0,0,0.65) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ────────────────────────────────────────────────────────────
   Film grain noise overlay
   SVG feTurbulence tile (220px) translated each frame via
   steps(1) animation — gives the appearance of organic grain
   without per-frame canvas work.
   ──────────────────────────────────────────────────────────── */
.noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.055;
  mix-blend-mode: overlay;
}
.noise::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain 0.4s steps(1) infinite;
}

@keyframes grain {
  0%   { transform: translate(0,    0);    }
  14%  { transform: translate(-6%,  -11%); }
  28%  { transform: translate(10%,  4%);   }
  42%  { transform: translate(-14%, 9%);   }
  57%  { transform: translate(5%,  -16%);  }
  71%  { transform: translate(-8%,  13%);  }
  85%  { transform: translate(15%,  -5%);  }
  100% { transform: translate(-3%,  7%);   }
}

@media (prefers-reduced-motion: reduce) {
  .noise::before { animation: none; }
}

/* ────────────────────────────────────────────────────────────
   Responsive — mobile
   ──────────────────────────────────────────────────────────── */

/* Tablet + large phone portrait ≤ 768px */
@media (max-width: 768px) {
  body { --edge: 28px; }

  .ticker { gap: 8px; }

  /* Center composition */
  .center       { padding: 0 28px; }
  .center .stack { gap: 28px; }

  /* Lottie logo */
  .lottie-logo { width: min(88vw, 480px); }

  /* Tagline */
  .tagline {
    font-size: 13px;
    max-width: 100%;
  }

  .copyright,
  .footer-right .precursor {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
}

/* Phone ≤ 480px */
@media (max-width: 480px) {
  .center        { padding: 0 20px; }
  .center .stack { gap: 20px; }

  .cta {
    font-size: 10px;
    padding: 10px 16px 10px 18px;
  }
}

/* Landscape phone — short viewport */
@media (max-height: 500px) and (max-width: 900px) {
  .center .stack { gap: 14px; }
  .tagline       { font-size: 12px; }
  .lottie-logo   { width: min(72vw, 540px); }
}