/* ===================================================== */
/*  $LMI // LOCKHEED MARTIN INU                          */
/*  CLASSIFIED TERMINAL SKIN — v2 "SCHIZO"               */
/* ===================================================== */

:root {
  --bg:      #050505;
  --hot:     #ff3ec8;
  --magenta: #ff00d4;
  --cyan:    #00fff0;
  --blood:   #ff2200;
  --amber:   #ffb000;
  --mono: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  /* NB: html carries the base colour. body must stay transparent — an opaque
     background here paints over #background-video (z-index:-3) and cuts a hard
     seam across the page at body's bottom edge. */
  background-color: transparent;
  color: var(--hot);
  font-family: var(--mono);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  letter-spacing: 0.04em;
}

/* whole-document glitch burst, toggled by scripts.js */
html.burst body { animation: doc-burst 0.18s steps(3) 1; }
@keyframes doc-burst {
  0%   { transform: translate(0,0)      skewX(0deg);   filter: none; }
  33%  { transform: translate(-9px,2px) skewX(-1.4deg); filter: invert(1) hue-rotate(90deg); }
  66%  { transform: translate(7px,-3px) skewX(1.1deg);  filter: hue-rotate(-70deg) saturate(4); }
  100% { transform: translate(0,0)      skewX(0deg);   filter: none; }
}

/* ============ BACKGROUND VIDEO ============ */
#background-video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -3;
  filter: saturate(1.5) contrast(1.15) hue-rotate(0deg);
  animation: vhs-sickness 17s infinite;
}

@keyframes vhs-sickness {
  0%,  86%  { filter: saturate(1.5) contrast(1.15) hue-rotate(0deg);      transform: scale(1); }
  87%       { filter: saturate(7) contrast(1.7) hue-rotate(-28deg);        transform: scale(1.03) translateX(6px); }
  88%       { filter: saturate(1.5) contrast(1.15);                        transform: scale(1); }
  92%       { filter: grayscale(1) contrast(2.6) brightness(1.25);         transform: scale(1.015) translateX(-8px); }
  93%, 100% { filter: saturate(1.5) contrast(1.15) hue-rotate(0deg);       transform: scale(1); }
}

/* ============ OVERLAY STACK ============ */
.video-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.66) 100%),
    linear-gradient(rgba(24,0,20,0.20), rgba(20,0,10,0.34));
}

/* animated film grain */
.noise {
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.55s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  17%  { transform: translate(-6%, 4%); }
  33%  { transform: translate(4%, -7%); }
  50%  { transform: translate(-8%, -3%); }
  67%  { transform: translate(7%, 5%); }
  83%  { transform: translate(-3%, 8%); }
  100% { transform: translate(0,0); }
}

/* CRT scanlines + rolling sync bar */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,0.32) 3px,
    rgba(0,0,0,0.32) 4px
  );
}
.scanlines::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22vh;
  background: linear-gradient(
    to bottom,
    rgba(255,62,200,0) 0%,
    rgba(255,62,200,0.07) 45%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,0,212,0.07) 55%,
    rgba(0,0,0,0) 100%
  );
  animation: roll 6.5s linear infinite;
}
@keyframes roll {
  0%   { top: -25vh; }
  100% { top: 105vh; }
}

/* ============ TICKERS ============ */
.ticker {
  position: fixed;
  left: 0; right: 0;
  z-index: 9995;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px 0;
  pointer-events: none;
  border-block: 1px solid currentColor;
}
.ticker--top {
  top: 0;
  color: var(--hot);
  background: rgba(0,0,0,0.75);
}
.ticker--bottom {
  bottom: 0;
  color: var(--blood);
  background: rgba(0,0,0,0.75);
}
.ticker__track {
  display: inline-block;
  padding-left: 100%;
  animation: slide-left 26s linear infinite;
}
.ticker--bottom .ticker__track {
  animation: slide-right 33s linear infinite;
}
@keyframes slide-left  { from { transform: translateX(0); }     to { transform: translateX(-100%); } }
@keyframes slide-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ============ HUD CORNERS ============ */
.hud {
  position: fixed;
  z-index: 9996;
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--hot);
  text-shadow: 0 0 6px currentColor;
  pointer-events: none;
  opacity: 0.85;
}
.hud--tl { top: 34px; left: 14px; }
.hud--tr { top: 34px; right: 14px; text-align: right; color: var(--amber); }
.hud--bl { bottom: 34px; left: 14px; color: var(--magenta); }
.hud--br { bottom: 34px; right: 14px; text-align: right; color: var(--blood); }

.rec-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blood);
  margin-right: 6px;
  vertical-align: baseline;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.05; } }

.crosshair {
  position: fixed;
  top: 50%; left: 50%;
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  border: 1px solid var(--hot);
  border-radius: 50%;
  animation: spin 22s linear infinite;
}
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: var(--hot);
}
.crosshair::before { top: 50%; left: -30px; right: -30px; height: 1px; }
.crosshair::after  { left: 50%; top: -30px; bottom: -30px; width: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ GLITCH TEXT ============ */
.glitch {
  position: relative;
  display: inline-block;
  color: #fff;
  text-shadow:
     0 0 8px rgba(255,62,200,0.5),
     2px 0 0 rgba(255,0,212,0.7),
    -2px 0 0 rgba(0,255,240,0.7);
  animation: text-shake 4.7s infinite steps(2);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.glitch::before {
  color: var(--cyan);
  clip-path: inset(0 0 55% 0);
  animation: slice-a 2.9s infinite steps(3);
}
.glitch::after {
  color: var(--magenta);
  clip-path: inset(58% 0 0 0);
  animation: slice-b 3.7s infinite steps(3);
}
@keyframes slice-a {
  0%,  88%  { transform: translate(0,0); opacity: 0; }
  89%       { transform: translate(-7px,-3px); opacity: 1; }
  93%       { transform: translate(5px,2px);   opacity: 1; }
  96%, 100% { transform: translate(0,0); opacity: 0; }
}
@keyframes slice-b {
  0%,  90%  { transform: translate(0,0); opacity: 0; }
  91%       { transform: translate(8px,3px);  opacity: 1; }
  95%       { transform: translate(-6px,-2px);opacity: 1; }
  98%, 100% { transform: translate(0,0); opacity: 0; }
}
@keyframes text-shake {
  0%, 94%, 100% { transform: translate(0,0) skewX(0deg); }
  95%           { transform: translate(3px,-1px) skewX(-3deg); }
  97%           { transform: translate(-2px,1px) skewX(2deg); }
}

/* ============ FRONT PAGE ============ */
.content-over-video {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16vh 20px 64px;
  color: #fff;
}

/* soft scrim behind the copy only — the video stays visible page-wide */
.content-over-video::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8vh;
  width: min(1100px, 96vw);
  height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 72%);
  z-index: -1;
  pointer-events: none;
}

.content-over-video h1 {
  font-size: clamp(2.1rem, 8vw, 5rem);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


.subline {
  color: var(--hot);
  font-size: clamp(0.9rem, 2.6vw, 1.35rem);
  text-transform: uppercase;
  min-height: 1.6em;
  text-shadow: 0 0 10px currentColor, 0 0 14px #000, 0 1px 4px #000;
  margin: 6px 0 4px;
}

.subline .caret {
  animation: blink 0.85s steps(1) infinite;
}

.static-text {
  color: var(--magenta);
  font-size: 0.8rem;
  opacity: 0.95;
  text-shadow: 0 0 8px #000, 0 1px 3px #000;
  margin-bottom: 6px;
}

/* ============ BUTTON ============ */
.media-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2.4rem 0 2rem;
}

.media-button {
  position: relative;
  background: #000;
  color: var(--hot);
  padding: 1rem 2.6rem;
  font-size: 1.15rem;
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.2em;
  border: 2px solid var(--hot);
  border-radius: 0;
  box-shadow: 0 0 18px rgba(255,62,200,0.45), inset 0 0 18px rgba(255,62,200,0.12);
  cursor: pointer;
  transition: color 0.12s steps(2), background 0.12s steps(2), transform 0.12s;
  text-decoration: none;
  display: inline-block;
  animation: btn-pulse 2.6s infinite;
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255,62,200,0.45), inset 0 0 18px rgba(255,62,200,0.12); }
  50%      { box-shadow: 0 0 34px rgba(255,62,200,0.85), inset 0 0 26px rgba(255,62,200,0.25); }
}
.media-button:hover {
  background: var(--hot);
  color: #000;
  transform: skewX(-4deg) scale(1.06);
}
.media-button:active { transform: skewX(2deg) scale(0.97); }

/* ============ NAV WALL ============ */
.content {
  position: relative;
  z-index: 1;
  max-width: 1420px;
  margin: 0 auto;
  /* clears the fixed tickers top and bottom */
  padding: 118px 20px 64px;
}

nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 10px 0 26px;
  box-sizing: border-box;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,62,200,0.35);
  background: #000;
  aspect-ratio: 16 / 9;
  filter: grayscale(0.35) contrast(1.1);
  transition: filter 0.15s steps(2), transform 0.15s;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.tile:hover {
  filter: grayscale(0) contrast(1.4) saturate(1.6);
  transform: scale(1.015);
  border-color: var(--magenta);
}
.tile:hover img { transform: scale(1.06); }

/* label chip */
.tile__label {
  position: absolute;
  left: 8px; bottom: 8px;
  background: rgba(0,0,0,0.82);
  border: 1px solid var(--hot);
  color: var(--hot);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.16em;
  padding: 3px 9px;
  text-transform: uppercase;
  text-shadow: 0 0 6px currentColor;
}

/* random per-tile corruption, toggled by scripts.js */
.tile.corrupt { animation: tile-corrupt 0.42s steps(3) 1; }
@keyframes tile-corrupt {
  0%   { filter: none;                                  transform: translate(0,0); }
  25%  { filter: invert(1) hue-rotate(120deg) saturate(5); transform: translate(-6px,3px) skewX(-2deg); }
  50%  { filter: hue-rotate(-90deg) contrast(3);        transform: translate(5px,-4px) skewX(1.5deg); }
  75%  { filter: invert(1) saturate(0);                 transform: translate(-3px,1px); }
  100% { filter: none;                                  transform: translate(0,0); }
}

.nav-heading {
  text-align: center;
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 5.5vw, 3rem);
  text-transform: uppercase;
}

.nav-sub {
  text-align: center;
  color: var(--blood);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-shadow: 0 0 8px currentColor;
}

.back-row {
  text-align: center;
  padding: 0 0 30px;
}

/* ============ MISC LEGACY ============ */
h1, h2 { color: #fff; text-transform: uppercase; text-align: center; }
p { line-height: 1.6; font-size: 1.05rem; color: #bdbdbd; }
.contract { color: var(--hot); font-size: 1.1rem; word-break: break-all; }
.quote { text-align: center; font-style: italic; color: #fff; margin-top: 30px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  nav { grid-template-columns: 1fr; gap: 10px; }
  .hud--tr, .hud--br { display: none; }
  .crosshair { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
  .content-over-video { padding-top: 18vh; }
}

@media (max-width: 600px) {
  .hud { font-size: 0.6rem; opacity: 0.7; }
  .ticker { font-size: 0.66rem; }
  .media-button { font-size: 0.95rem; padding: 0.85rem 1.6rem; }
  .content { padding-top: 104px; }
  .tile { aspect-ratio: 4 / 3; }
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .noise { opacity: 0.06; }
  .glitch::before, .glitch::after { display: none; }
}