/* ===========================================================================
   BOMBRING LANDING PAGE STYLES
   Depends on tokens.css being loaded first.
   =========================================================================== */

/* ===========================================================================
   LEFT-SIDE NAV STRIP — vertical, fixed
   Bumped from 9px → 10px, color from concrete → bone for legibility.
   Subtle backdrop substrate so type survives over video.
   =========================================================================== */

.nav-strip {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--nav-strip-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  z-index: 60;
  pointer-events: none;
}

/* The substrate — a subtle backdrop-filter strip that gives small type
   a darkened plane to sit on without being an obvious panel. */
.nav-strip::before {
  content: '';
  position: absolute;
  inset: 64px 8px;
  background: rgba(8, 10, 12, 0.35);
  backdrop-filter: blur(10px) saturate(0.6);
  -webkit-backdrop-filter: blur(10px) saturate(0.6);
  border-right: 1px solid var(--bomb-iron);
  z-index: -1;
}

.nav-strip__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  pointer-events: auto;
}

.nav-strip__bar {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bomb-graphite);
}

.nav-strip__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  transition: transform 0.2s ease;
}

.nav-strip__link:hover {
  transform: translateY(-2px);
}

.nav-strip__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bomb-bone);
  transition: color 0.25s ease;
}

.nav-strip__label {
  font-family: var(--font-accent);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--bomb-bone);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color 0.25s ease;
}

.nav-strip__link:hover .nav-strip__num,
.nav-strip__link:hover .nav-strip__label {
  color: var(--bomb-visor);
}

.nav-strip__link--active .nav-strip__num {
  color: var(--bomb-amber);
}

.nav-strip__link--active .nav-strip__label {
  color: var(--bomb-fog);
}

.nav-strip__link--active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--bomb-amber);
  transform: translateY(-50%);
}

/* ===========================================================================
   REGISTRATION MARK — top-right corner insignia
   =========================================================================== */

.reg-mark {
  position: fixed;
  top: 48px;
  right: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 55;
  pointer-events: none;
}

.reg-mark__line {
  width: 80px;
  height: 1px;
  background: var(--bomb-bone);
  opacity: 0.5;
}

.reg-mark__dot {
  width: 6px;
  height: 6px;
  border: 1px solid var(--bomb-bone);
  border-radius: 50%;
  opacity: 0.7;
}

.reg-mark__kana {
  font-family: var(--font-pixel-jp);
  font-size: 14px;
  color: var(--bomb-fog);
  letter-spacing: 0.1em;
}

/* ===========================================================================
   HERO SECTION
   Layered: video plate → tonal overlay → soldier cutout → content block
   Content anchored to LOWER-LEFT this time — wordmark + meta as a unit,
   leaving the right portion of the frame for the figure unobstructed.
   =========================================================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-left: var(--nav-strip-width);
}

/* Layer 1: video plate */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  filter: brightness(0.7) contrast(1.1) saturate(0.85);
}

/* Layer 2: tonal overlay — gradient + subtle cyan rim */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* Stronger bottom-left darkening for the content block to sit on */
    linear-gradient(to top right,
      rgba(8, 10, 12, 0.85) 0%,
      rgba(8, 10, 12, 0.3) 40%,
      rgba(8, 10, 12, 0) 70%
    ),
    /* Vertical falloff at top and bottom edges */
    linear-gradient(180deg,
      rgba(8, 10, 12, 0.4) 0%,
      rgba(8, 10, 12, 0) 25%,
      rgba(8, 10, 12, 0) 75%,
      rgba(8, 10, 12, 0.6) 100%
    ),
    /* Subtle cyan rim on right where the visor sits */
    radial-gradient(ellipse at 85% 40%,
      rgba(132, 181, 192, 0.06) 0%,
      rgba(0, 0, 0, 0) 50%
    );
  pointer-events: none;
}

/* Layer 3: soldier cutout — anchored bottom-right, breaking the right edge */
.hero__figure {
  position: absolute;
  right: -4%;
  bottom: 0;
  height: 98%;
  width: auto;
  z-index: 3;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  filter: drop-shadow(-20px 10px 30px rgba(0, 0, 0, 0.7));
}

/* Layer 4: hero content — anchored to LOWER-LEFT */
.hero__content {
  position: relative;
  z-index: 4;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 56px 80px 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  /* Constrain content to roughly 55% of width so it doesn't fight the figure */
  width: 100%;
}

.hero__content-inner {
  max-width: 55%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--bomb-bone);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--bomb-amber);
}

.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(60px, 10vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.005em;
  color: var(--bomb-fog);
  text-transform: uppercase;
  text-shadow: 3px 0 0 var(--bomb-visor);
  margin: 0;
}

.hero__tagline {
  font-family: var(--font-pixel-num);
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: 0.15em;
  color: var(--bomb-bone);
}

.hero__tagline-amber {
  color: var(--bomb-amber);
}

/* Meta strip — gets a backdrop substrate to make small type readable */
.hero__meta {
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--bomb-bone);
  text-transform: uppercase;
  padding: 16px 20px;
  margin-top: 8px;
  background: rgba(8, 10, 12, 0.5);
  backdrop-filter: blur(8px) saturate(0.6);
  -webkit-backdrop-filter: blur(8px) saturate(0.6);
  border: 1px solid var(--bomb-iron);
  border-left: 2px solid var(--bomb-amber);
  width: fit-content;
}

.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero__meta-label {
  color: var(--bomb-ash);
  font-size: 9px;
  letter-spacing: 0.25em;
}

.hero__meta-value {
  color: var(--bomb-fog);
  font-family: var(--font-pixel-num);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.hero__meta-value--pending {
  color: var(--bomb-amber);
  letter-spacing: 0.15em;
}

.hero__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bomb-blood-live);
}

.hero__live-dot {
  width: 7px;
  height: 7px;
  background: var(--bomb-blood-live);
  border-radius: 50%;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ===========================================================================
   TRANSMISSION CALLOUT — second section, post-hero
   =========================================================================== */

.transmission-callout {
  position: relative;
  z-index: 4;
  padding: 120px 56px 120px calc(var(--nav-strip-width) + 56px);
  max-width: var(--content-max);
  margin: 0 auto;
}

.transmission-callout__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}

.transmission-callout__label {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--bomb-bone);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bomb-iron);
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.transmission-callout__label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--bomb-amber);
}

.transmission-callout__index {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bomb-concrete);
}

.transmission-callout__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--bomb-fog);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.transmission-callout__subtitle {
  font-family: var(--font-pixel-num);
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--bomb-bone);
  margin-bottom: 32px;
}

.transmission-callout__subtitle-amber {
  color: var(--bomb-amber);
}

.transmission-callout__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bomb-bone);
  max-width: 56ch;
  margin-bottom: 32px;
}

.transmission-callout__body strong {
  color: var(--bomb-fog);
  font-weight: 500;
}

.transmission-callout__actions {
  display: flex;
  gap: 24px;
  align-items: center;
}

.bomb-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: transparent;
  border: 1px solid var(--bomb-bone);
  color: var(--bomb-bone);
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.bomb-button:hover {
  background: var(--bomb-visor);
  border-color: var(--bomb-visor);
  color: var(--bomb-black);
}

.bomb-button::after {
  content: '→';
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.bomb-button:hover::after {
  transform: translateX(3px);
}

.bomb-button--ghost {
  border-color: var(--bomb-iron);
  color: var(--bomb-concrete);
}

.bomb-button--ghost:hover {
  background: transparent;
  border-color: var(--bomb-bone);
  color: var(--bomb-bone);
}

/* ===========================================================================
   FOOTER STRIP
   =========================================================================== */

.bomb-footer {
  position: relative;
  z-index: 4;
  padding: 32px 56px 32px calc(var(--nav-strip-width) + 56px);
  border-top: 1px solid var(--bomb-iron);
  max-width: var(--content-max);
  margin: 0 auto;
}

.bomb-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--bomb-concrete);
  text-transform: uppercase;
}

.bomb-footer__kana {
  font-family: var(--font-pixel-jp);
  font-size: 13px;
  color: var(--bomb-bone);
  letter-spacing: 0.08em;
  text-transform: none;
}

/* ===========================================================================
   PAGE LOAD ANIMATIONS
   =========================================================================== */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero__kicker {
  animation: fade-up 0.8s ease-out 0.2s both;
}

.hero__wordmark {
  animation: fade-up 1s ease-out 0.4s both;
}

.hero__tagline {
  animation: fade-up 0.8s ease-out 0.7s both;
}

.hero__meta {
  animation: fade-up 0.8s ease-out 0.9s both;
}

.hero__figure {
  animation: fade-in 1.6s ease-out 0.1s both;
}

.nav-strip,
.reg-mark,
.bomb-frame {
  animation: fade-in 1.2s ease-out 1.2s both;
}

/* ===========================================================================
   ===  INTERIOR PAGE SHARED  ================================================
   ===  Hero variant (figure left / content right), section-label component.
   ===  Used by surveillance, transmission, transmit. Page-specific styles
   ===  live in their own stylesheets (css/surveillance.css etc.).
   =========================================================================== */

/* --- Hero interior variant ------------------------------------------------ */

.hero--interior .hero__overlay {
  background:
    /* Mirror the directional darkening — content side is now right */
    linear-gradient(to top left,
      rgba(8, 10, 12, 0.85) 0%,
      rgba(8, 10, 12, 0.3) 40%,
      rgba(8, 10, 12, 0) 70%
    ),
    linear-gradient(180deg,
      rgba(8, 10, 12, 0.4) 0%,
      rgba(8, 10, 12, 0) 25%,
      rgba(8, 10, 12, 0) 75%,
      rgba(8, 10, 12, 0.6) 100%
    ),
    radial-gradient(ellipse at 15% 40%,
      rgba(132, 181, 192, 0.06) 0%,
      rgba(0, 0, 0, 0) 50%
    );
}

.hero__figure--left {
  right: auto;
  left: -2%;
  object-position: bottom left;
  filter: drop-shadow(20px 10px 30px rgba(0, 0, 0, 0.7));
}

.hero__content--right {
  align-items: flex-end;
  text-align: right;
}

.hero__content--right .hero__content-inner {
  align-items: flex-end;
}

.hero__content--right .hero__kicker {
  flex-direction: row-reverse;
}

.hero__content--right .hero__meta {
  border-left: none;
  border-right: 2px solid var(--bomb-amber);
}

/* The small BOMBRING brandline above the page H1 — keeps the wordmark present
   on interior pages without competing with the page title. */
.hero__brandline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 26px);
  letter-spacing: 0.02em;
  color: var(--bomb-fog);
  text-transform: uppercase;
  text-shadow: 2px 0 0 var(--bomb-visor);
  opacity: 0.85;
  margin-bottom: -8px;
  animation: fade-up 0.8s ease-out 0.3s both;
}

/* Slightly smaller H1 on interior pages — landing is the loudest. */
.hero--interior .hero__wordmark {
  font-size: clamp(48px, 7.5vw, 104px);
}

/* --- Shared section-label component --------------------------------------- */

.section-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bomb-iron);
  margin-bottom: 36px;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--bomb-amber);
  flex-shrink: 0;
  align-self: center;
}

.section-label__title {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--bomb-bone);
  text-transform: uppercase;
}

.section-label__index {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--bomb-concrete);
  text-transform: uppercase;
}

/* End of interior-shared section. Page-specific styles live in per-page CSS. */

/* ===========================================================================
   MOBILE TOP-BAR NAV (≤720px)
   ---------------------------------------------------------------------------
   On mobile we transform the left-side vertical strip into a horizontal
   top bar — still diegetic (filing-index style), still ministerial chrome,
   but accessible. Four short labels in a row, hairline-divided. Sits below
   the browser chrome, above the hero.
   =========================================================================== */

@media (max-width: 720px) {

  .nav-strip {
    /* Override the desktop hidden/vertical state — make it a top bar */
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 48px;
    flex-direction: row;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    z-index: 60;
    pointer-events: auto;
    background: rgba(8, 10, 12, 0.92);
    backdrop-filter: blur(12px) saturate(0.7);
    -webkit-backdrop-filter: blur(12px) saturate(0.7);
    border-bottom: 1px solid var(--bomb-iron);
  }

  /* Kill the desktop substrate */
  .nav-strip::before {
    display: none;
  }

  .nav-strip__inner {
    flex-direction: row;
    gap: 0;
    width: 100%;
    height: 100%;
    align-items: stretch;
    justify-content: space-between;
  }

  /* The // bar markers don't fit the horizontal layout — hide them */
  .nav-strip__bar {
    display: none;
  }

  .nav-strip__link {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 4px;
    border-right: 1px solid var(--bomb-iron);
    min-height: 48px; /* tap target */
  }

  .nav-strip__link:last-child {
    border-right: none;
  }

  .nav-strip__link:hover {
    transform: none; /* desktop hover translate doesn't fit here */
    background: rgba(132, 181, 192, 0.08);
  }

  .nav-strip__num {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* Cancel the desktop vertical-text rotation */
  .nav-strip__label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 8.5px;
    letter-spacing: 0.22em;
  }

  /* Hide the labels on the smallest screens — just numbers fit */
  @media (max-width: 420px) {
    .nav-strip__label { display: none; }
    .nav-strip__num { font-size: 11px; }
  }

  /* Active state — bottom amber underline rather than left dash */
  .nav-strip__link--active::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    top: auto;
    width: 24px;
    height: 2px;
    background: var(--bomb-amber);
    transform: translateX(-50%);
  }

  /* === Hero adjustments === */

  .hero {
    /* Account for the new top nav bar, lose the left padding */
    padding-left: 0;
    padding-top: 48px;
    min-height: auto; /* let it size naturally on mobile */
  }

  /* Hide the soldier figure — composition doesn't translate to portrait */
  .hero__figure {
    display: none;
  }

  /* The figure being gone means we need to lean harder on the overlay
     for type legibility. Replace with a more uniform dark wash. */
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(8, 10, 12, 0.55) 0%,
        rgba(8, 10, 12, 0.4) 35%,
        rgba(8, 10, 12, 0.7) 100%
      ) !important;
  }

  .hero__content {
    padding: 60px 20px 60px 20px;
    min-height: auto;
  }

  .hero__content-inner {
    max-width: 100%;
    gap: 16px;
  }

  /* The wordmark needs an explicit upper bound — clamp was OK on tablet,
     too aggressive on phone. */
  .hero__wordmark {
    font-size: clamp(44px, 13vw, 72px);
    text-shadow: 2px 0 0 var(--bomb-visor); /* tighter offset at smaller size */
  }

  .hero__kicker {
    font-size: 10px;
    letter-spacing: 0.3em;
    gap: 12px;
  }

  .hero__kicker::before {
    width: 20px;
  }

  .hero__tagline {
    font-size: 14px;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  .hero__meta {
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 14px 16px;
    font-size: 9px;
    width: 100%;
  }

  .hero__meta-item {
    flex: 1 0 auto;
    min-width: 0;
  }

  .hero__meta-value {
    font-size: 12px;
  }

  /* === Reg mark — hide on mobile. Top-right corner is now nav territory. */

  .reg-mark {
    display: none;
  }

  /* === Transmission callout (landing page section) === */

  .transmission-callout {
    padding: 60px 20px;
  }

  .transmission-callout__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .transmission-callout__label {
    flex-wrap: wrap;
    gap: 10px;
  }

  .transmission-callout__index {
    margin-left: 0;
  }

  .transmission-callout__title {
    font-size: clamp(32px, 9vw, 52px);
    line-height: 0.95;
  }

  .transmission-callout__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .bomb-button {
    justify-content: space-between;
    padding: 14px 18px;
    min-height: 48px;
  }

  /* === Footer === */

  .bomb-footer {
    padding: 24px 20px;
  }

  .bomb-footer__row {
    flex-direction: column;
    gap: 12px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}

/* ===========================================================================
   TABLET / NARROW DESKTOP (721-900px) — light handling
   =========================================================================== */

@media (min-width: 721px) and (max-width: 900px) {
  .hero__content-inner {
    max-width: 70%;
  }

  .hero__figure {
    right: -10%;
    opacity: 0.85;
  }

  .transmission-callout {
    padding: 80px 32px;
  }

  .transmission-callout__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .bomb-footer {
    padding: 24px 32px;
  }

  .hero__figure--left { left: -8%; }

  .hero__content--right { text-align: left; align-items: flex-start; }
  .hero__content--right .hero__content-inner { align-items: flex-start; }
  .hero__content--right .hero__kicker { flex-direction: row; }
}