/* ========= MIGZVERSE BASE THEME ========= */

:root {
  --bg-main: #050611;
  --bg-secondary: #0b0f1f;
  --bg-panel: #101426;
  --accent-blue: #18a4ff;
  --accent-magenta: #ff2e9f;
  --accent-silver: #d0e4ff;
  --text-main: #f5f7ff;
  --text-muted: #a7b2d8;
  --radius-card: 18px;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.75);

  /* Stack geometry knobs (easy future tuning) */
  --stack-max-w: 520px;
  --stack-w: min(40vw, var(--stack-max-w));

  /* ✅ moved slightly LEFT */
  --stack-left: clamp(8px, 1.8vw, 26px);

  /* ✅ nudged UP the same amount again */
  --stack-top: clamp(24px, 4.4vh, 64px);

  /* Perspective (reversed vs right-side panels) */
  --stack-rotY: 18deg;    /* positive rotates “back” to the right */
  --stack-rotX: -5deg;    /* more DOWN tilt */
  --stack-skewY: 2.2deg;  /* slightly stronger skew to match left wall */

  /* ✅ Guardrails for notches / TVs / weird aspect ratios */
  --safe-pad: max(12px, env(safe-area-inset-left));
  --safe-top: max(0px, env(safe-area-inset-top));
  --safe-right: max(0px, env(safe-area-inset-right));
  --safe-bottom: max(0px, env(safe-area-inset-bottom));
}

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

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

/* Smooth scroll for #section-* jumps + SEE MORE */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at top, #151a35 0, #03040a 45%, #000 100%);
  color: var(--text-main);
  line-height: 1.5;
}

/* ========= FULL-PAGE INTERACTION OVERLAY ========= */
/* Captures the first click/tap to unlock audio, then gets hidden */

.interaction-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;              /* above main content, below audio button (9999) */
  background: transparent;  /* fully invisible but clickable */
}

/* ========= HERO / BACKGROUND VIDEO ========= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1.5rem 0;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  filter: saturate(1.4) contrast(1.1) brightness(0.65);
}

/* SHIPS */

.ship {
  position: absolute;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 50%, #ffffff 0, #18a4ff 40%, transparent 100%);
  box-shadow: 0 0 22px rgba(24, 164, 255, 0.9);
  z-index: -1;
}

.ship::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 1px;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(24, 164, 255, 0.7), transparent);
}

.ship--1 {
  top: 22%;
  left: -10%;
  animation: ship-fly-1 12s linear infinite;
}

.ship--2 {
  top: 40%;
  left: 110%;
  animation: ship-fly-2 16s linear infinite;
}

@keyframes ship-fly-1 {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  80% { transform: translateX(140vw); opacity: 1; }
  100% { opacity: 0; transform: translateX(160vw); }
}

@keyframes ship-fly-2 {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  80% { transform: translateX(-140vw); opacity: 1; }
  100% { opacity: 0; transform: translateX(-160vw); }
}

/* ========= TOP CENTER TICKER (thin marquee) ========= */

.top-ticker {
  position: absolute;
  top: calc(0.85rem + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 980px);
  z-index: 9;
  pointer-events: none;
}

.top-ticker__frame {
  pointer-events: none;
  border-radius: 999px;
  border: 1px solid rgba(24, 164, 255, 0.30);
  outline: 1px solid rgba(255, 46, 159, 0.14);
  background: rgba(7, 10, 24, 0.26);
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 18px rgba(24, 164, 255, 0.14),
    0 0 24px rgba(255, 46, 159, 0.08);
  overflow: hidden;
}

.top-ticker__track {
  display: flex;
  gap: 14px;
  white-space: nowrap;
  will-change: transform;
  animation: topTicker 26s linear infinite;
  padding: 8px 16px;
  color: rgba(208, 228, 255, 0.92);
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
}

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

/* Hide ticker on very small screens to reduce crowding */
@media (max-width: 640px) {
  .top-ticker { display: none; }
}

/* ========= HERO CONTENT ========= */

.hero-overlay {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;   /* content toward the top */
  justify-content: center;
  z-index: 3;

  /* parallax defaults */
  --parallax-x: 0px;
  --parallax-y: 0px;

  /* add a bit more top room because ticker exists now */
  padding-top: calc(6.2rem + var(--safe-top));
  padding-bottom: calc(5rem + var(--safe-bottom)); /* space above skyline nav */
}

.hero-inner {
  max-width: 960px;
  width: 100%;
  text-align: center;
}

/* MIGZ pill – visually removed as requested */
.logo-mark {
  display: none;
}

.hero-text h1 {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: clamp(3.2rem, 7vw, 4.8rem);
  letter-spacing: 0.18em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.hero-text p {
  margin: 0 0 1.1rem;
  color: rgba(245, 247, 255, 0.9);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.8rem 2.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-magenta));
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  border: 0;
  cursor: pointer;

  box-shadow:
    0 0 14px rgba(24, 164, 255, 0.35),
    0 0 24px rgba(255, 46, 159, 0.18);
}

.btn-primary:focus-visible {
  outline: 2px solid rgba(208, 228, 255, 0.9);
  outline-offset: 3px;
}

/* ========= MIGZ LOGO HOLOGRAM OVER HERO ========= */
/* Logo sits between headline and nav buttons */

.hero-overlay::before {
  content: "";
  position: absolute;

  /* ✅ ONLY CHANGE: moved up */
  top: 58%;

  left: 50%;
  width: min(40vw, 420px);
  aspect-ratio: 1 / 1;

  background-image: url("../img/MigzLogo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;

  filter:
    drop-shadow(0 0 24px rgba(24, 164, 255, 0.75))
    drop-shadow(0 0 60px rgba(24, 164, 255, 0.55))
    blur(0.6px);

  transform: translate(
    calc(-50% + var(--parallax-x)),
    calc(-50% + var(--parallax-y))
  );

  transition: opacity 2.5s ease-out;
  animation:
    migz-holo-pulse 7s ease-in-out infinite alternate,
    migz-holo-ripple 11s ease-in-out infinite alternate;
}

/* Soft scanline layer over the whole hero area */
.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: screen;

  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 3px,
    transparent 5px
  );

  animation: migz-scan 9s linear infinite;
  transition: opacity 2.5s ease-out;
}

body.home-page.holo-active .hero-overlay::before,
body.home-page .holo-active .hero-overlay::before {
  opacity: 0.55;
}

body.home-page.holo-active .hero-overlay::after,
body.home-page .holo-active .hero-overlay::after {
  opacity: 0.22;
}

@keyframes migz-holo-pulse {
  0% {
    filter:
      drop-shadow(0 0 20px rgba(24, 164, 255, 0.55))
      drop-shadow(0 0 40px rgba(24, 164, 255, 0.35))
      blur(0.8px);
  }
  100% {
    filter:
      drop-shadow(0 0 32px rgba(24, 164, 255, 0.9))
      drop-shadow(0 0 60px rgba(24, 164, 255, 0.6))
      blur(1.6px);
  }
}

/* ✅ FIXED: correct parentheses + transform syntax */
@keyframes migz-holo-ripple {
  0%, 100% {
    transform: translate(
      calc(-50% + var(--parallax-x)),
      calc(-50% + var(--parallax-y))
    ) scale(1);
  }
  50% {
    transform: translate(
      calc(-50% + var(--parallax-x) + 1px),
      calc(-50% + var(--parallax-y) - 1px)
    ) scale(1.02);
  }
}

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

/* ========= LEFT MEDIA STACK ========= */

.left-stack {
  position: absolute;
  left: max(var(--stack-left), var(--safe-pad));
  top: calc(var(--stack-top) + var(--safe-top));
  width: var(--stack-w);
  z-index: 8;
  pointer-events: none;
}

.left-stack__frame {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 12px;
  border-radius: 18px;
  background: rgba(7, 10, 24, 0.34);
  backdrop-filter: blur(6px);

  border: 1px solid rgba(24, 164, 255, 0.30);
  outline: 1px solid rgba(255, 46, 159, 0.16);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);

  transform-origin: left center;
  transform: perspective(1200px) rotateY(var(--stack-rotY)) rotateX(var(--stack-rotX)) skewY(var(--stack-skewY));
}

.left-stack__frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(24, 164, 255, 0.18),
    0 0 22px rgba(24, 164, 255, 0.14),
    0 0 30px rgba(255, 46, 159, 0.08);
}

/* ✅ “Lady-style” mask/grid treatment (ALWAYS ON + varied like the lady) */
.screen-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Always visible */
  opacity: 0.18;

  /* Above iframe, below glass */
  z-index: 2;

  transition: opacity 220ms ease, filter 220ms ease;

  /* Variation: darker/light patches + fine grid */
  background:
    radial-gradient(120% 95% at 65% 30%, rgba(0,0,0,0.22) 0%, transparent 55%),
    linear-gradient(
      120deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 35%,
      rgba(0,0,0,0.10) 70%,
      rgba(255,255,255,0.03) 100%
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      transparent 18px,
      transparent 28px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 10px,
      transparent 14px
    );

  mix-blend-mode: screen;
  transform: translateZ(0);
}

/* Reduce mask slightly on hover/focus (instead of removing) */
.left-stack__panel:hover .screen-wrap::before,
.left-stack__panel:focus-within .screen-wrap::before {
  opacity: 0.12;
  filter: contrast(1.05);
}

/* slight “float” drift like neon billboards (reduced so it doesn’t wander) */
@media (prefers-reduced-motion: no-preference) {
  .left-stack__frame {
    animation: stack-drift 12s ease-in-out infinite alternate;
  }
}
@keyframes stack-drift {
  0% {
    transform: perspective(1200px) rotateY(var(--stack-rotY)) rotateX(var(--stack-rotX)) skewY(var(--stack-skewY));
  }
  100% {
    transform: perspective(1200px) rotateY(calc(var(--stack-rotY) + 0.6deg)) rotateX(calc(var(--stack-rotX) - 0.4deg)) skewY(var(--stack-skewY)) translateY(-3px);
  }
}

.left-stack__panel {
  border-radius: 14px;
  border: 1px solid rgba(24, 164, 255, 0.26);
  background: rgba(5, 6, 17, 0.46);
  overflow: hidden;
}

.left-stack__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 0;
}

.left-stack__label {
  font-family: "Bebas Neue", system-ui, sans-serif;
  letter-spacing: 0.12em;
  color: rgba(245, 247, 255, 0.92);
  font-size: 16px;
}

.left-stack__media {
  padding: 10px 12px 12px;
}

.left-stack__panel--video .left-stack__media,
.left-stack__panel--playlist .left-stack__media {
  aspect-ratio: 16 / 9;
}

.left-stack__panel--covers .left-stack__media {
  aspect-ratio: 16 / 5;
}

.screen-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(24, 164, 255, 0.22);
  box-shadow:
    0 0 18px rgba(24, 164, 255, 0.14),
    0 0 26px rgba(255, 46, 159, 0.08);
}

.screen-surface {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  z-index: 1; /* ensure ::before sits above iframe */
}

.left-stack__iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
}

.screen-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: screen;
  z-index: 3;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      transparent 3px,
      transparent 5px
    );
}

.screen-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 22%, transparent 55%),
    radial-gradient(120% 110% at 70% 80%, rgba(0,0,0,0.22) 0%, transparent 45%),
    linear-gradient(135deg, rgba(24,164,255,0.12), rgba(255,46,159,0.08));
  opacity: 0.7;
}

.covers-row {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cover-tile {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(24, 164, 255, 0.22);
  background: rgba(24, 164, 255, 0.10);
  box-shadow:
    0 0 12px rgba(24, 164, 255, 0.10),
    0 0 14px rgba(255, 46, 159, 0.05);
  text-decoration: none;
  display: block;
}

.cover-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transform: translateZ(0);
}

.cover-tile:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Keep stack off the nav area on short viewports */
@media (max-height: 720px) {
  :root {
    --stack-top: clamp(20px, 4.0vh, 56px);
  }
  .left-stack__frame { gap: 10px; }
}

/* ✅ Ultrawide + TV behavior (prevents “giant” stack) */
@media (min-aspect-ratio: 21/9) {
  :root {
    --stack-w: min(30vw, 520px);
    --stack-left: clamp(12px, 1.2vw, 28px);
  }
}

/* ✅ Mid-size tablets/phones keep stack but slightly smaller */
@media (max-width: 980px) and (min-width: 701px) {
  :root {
    --stack-w: min(38vw, 460px);
  }
  .left-stack__label { font-size: 15px; }
  .left-stack__frame { padding: 10px; gap: 10px; }
  .left-stack__media { padding: 8px 10px 10px; }
}

/* Keep your existing widening rule */
@media (max-width: 900px) {
  :root { --stack-w: min(44vw, var(--stack-max-w)); }
}

@media (max-width: 700px) {
  .left-stack { display: none; }
}

/* ========= SKYLINE NAV ========= */

.skyline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 1.6rem 1.5rem 2rem;
}

/* BASE NEON MENU BUTTON */

.marquee {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;

  background: transparent;
  border: 2px solid rgba(24, 164, 255, 0.9);
  box-shadow:
    0 0 8px rgba(24, 164, 255, 0.8),
    0 0 18px rgba(24, 164, 255, 0.6);

  animation: neon-flicker-rare var(--rand-duration) infinite;
}

.marquee:focus-visible {
  outline: 2px solid rgba(208, 228, 255, 0.9);
  outline-offset: 3px;
}

.marquee span {
  font-family: "Bebas Neue", system-ui, sans-serif;
  letter-spacing: 0.20em;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: #e8f4ff;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(24, 164, 255, 0.9);
}

.marquee:hover {
  transform: translateY(-2px) translateX(0.3px);
  filter: brightness(1.35);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 30px rgba(72, 200, 255, 0.95);
}

@keyframes neon-flicker-rare {
  0%, 70%, 100% { opacity: 1; filter: brightness(1); }
  72% { opacity: .75; filter: brightness(.85); }
  74% { opacity: .45; filter: brightness(.60); }
  76% { opacity: .9;  filter: brightness(1.05); }
  78% { opacity: .6;  filter: brightness(.7); }
  80% { opacity: .95; filter: brightness(1.15); }
}

.marquee--music      { --rand-duration: 14.7s; animation-delay: 1.3s; }
.marquee--tv         { --rand-duration: 18.2s; animation-delay: 4.1s; }
.marquee--adventures { --rand-duration: 16.9s; animation-delay: 2.7s; }
.marquee--books      { --rand-duration: 20.4s; animation-delay: 5.2s; }
.marquee--projects   { --rand-duration: 17.6s; animation-delay: 3.4s; }
.marquee--contact    { --rand-duration: 19.3s; animation-delay: 4.8s; }

/* ✅ NEW: MIGZ RADIO skyline button behavior (warm radio neon vibe) */
.marquee--radio { --rand-duration: 15.8s; animation-delay: 3.1s; }

.marquee--music:hover {
  border-color: rgba(24, 164, 255, 1);
  box-shadow: 0 0 14px rgba(24, 164, 255, 1), 0 0 34px rgba(24, 164, 255, 0.95);
}
.marquee--tv:hover {
  border-color: rgba(255, 46, 159, 1);
  box-shadow: 0 0 14px rgba(255, 46, 159, 1), 0 0 34px rgba(255, 46, 159, 0.95);
}
.marquee--adventures:hover {
  border-color: rgba(0, 255, 180, 1);
  box-shadow: 0 0 14px rgba(0, 255, 180, 1), 0 0 34px rgba(0, 255, 180, 0.95);
}
.marquee--books:hover {
  border-color: rgba(208, 228, 255, 1);
  box-shadow: 0 0 14px rgba(208, 228, 255, 1), 0 0 34px rgba(208, 228, 255, 0.95);
}
.marquee--projects:hover {
  border-color: rgba(255, 215, 0, 1);
  box-shadow: 0 0 14px rgba(255, 215, 0, 1), 0 0 34px rgba(255, 215, 0, 0.95);
}
.marquee--contact:hover {
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 14px rgba(255, 255, 255, 1), 0 0 34px rgba(255, 255, 255, 0.95);
}

/* ✅ NEW: MIGZ RADIO hover style */
.marquee--radio:hover {
  border-color: rgba(255, 140, 0, 1);
  box-shadow:
    0 0 14px rgba(255, 140, 0, 1),
    0 0 34px rgba(255, 140, 0, 0.95);
}

/* ========= BILLBOARD SYSTEM ========= */

.section { padding: 4rem 1.5rem; }

.section-header {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  text-align: left;
}

.section-header h2 {
  font-family: "Bebas Neue", system-ui, sans-serif;
  letter-spacing: 0.12em;
  margin: 0 0 0.25rem;
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.section-header p {
  margin: 0;
  color: var(--text-muted);
}

.section-body {
  max-width: 1100px;
  margin: 0 auto;
  color: rgba(208, 228, 255, 0.92);
}

.billboard-row {
  max-width: 1100px;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem;
  perspective: 1400px;
}

.bladerunner-board {
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(0, 200, 255, 0.35);
  transform: perspective(1400px) rotateY(-22deg) rotateX(2deg) skewY(3deg);
  animation: br-drift 8s ease-in-out infinite alternate;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

@keyframes br-drift {
  0% { transform: perspective(1400px) rotateY(-22deg) rotateX(2deg) skewY(3deg); }
  100% { transform: perspective(1400px) rotateY(-24deg) rotateX(3deg) skewY(3deg) translateY(-6px); }
}

.br-iframe-wrap,
.br-iframe-wrap iframe { width: 100%; height: 100%; }

.br-iframe-wrap iframe { min-height: 260px; border: 0; }

.br-side .br-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));
}

.br-label {
  font-family: "Bebas Neue", system-ui, sans-serif;
  letter-spacing: 0.12em;
  color: rgba(208, 228, 255, 0.95);
  opacity: 0.9;
}

.br-text h3 { margin: 6px 0 4px; font-size: 1.1rem; }
.br-text p  { margin: 0; color: rgba(208, 228, 255, 0.88); font-size: 0.95rem; }

/* ========= FOOTER (if you add later) ========= */

.site-footer {
  padding: 1.5rem 1.5rem 2rem;
  background: #02030a;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ========= TINY NEON AUDIO TOGGLE BUTTON ========= */

.audio-toggle {
  position: fixed;
  bottom: calc(1.2rem + var(--safe-bottom));
  left: max(1.2rem, var(--safe-pad));
  z-index: 20001; /* above skyline / skyline-radio */

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 2px solid rgba(24, 164, 255, 0.95);
  background: transparent;

  appearance: none;
  -webkit-appearance: none;
  outline: none;

  box-shadow:
    0 0 8px rgba(24, 164, 255, 0.9),
    0 0 18px rgba(24, 164, 255, 0.7);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #e8f4ff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;

  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 10px rgba(24, 164, 255, 0.85);
}

.audio-toggle:hover {
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 26px rgba(24, 164, 255, 1);
  transform: translateY(-1px);
}

.audio-toggle__icon {
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 600px) {
  .audio-toggle {
    bottom: calc(0.8rem + var(--safe-bottom));
    left: max(0.8rem, var(--safe-pad));
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}


/* =========================
   NOCTURNAL SHIFT — TEST (Refined Symmetry)
   ========================= */

#nocturnal-veil{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  background: rgba(0,0,0,.58);
  transition: opacity 700ms ease;
}

/* EXIT */
body.nocturnal-out #nocturnal-veil{
  opacity: 1;
}

/* ENTER (start dimmed) */
body.nocturnal-in{
  filter: brightness(.88);
  transition: filter 700ms ease;
}

body.nocturnal-in #nocturnal-veil{
  opacity: 1;
}

/* ENTER resolve (same timing as exit) */
body.nocturnal-in.nocturnal-ready{
  filter: brightness(1);
}

body.nocturnal-in.nocturnal-ready #nocturnal-veil{
  opacity: 0;
}

@supports (backdrop-filter: blur(1px)){
  body.nocturnal-out #nocturnal-veil{
    backdrop-filter: blur(2px);
  }
  body.nocturnal-in #nocturnal-veil{
    backdrop-filter: blur(2px);
  }
  body.nocturnal-in.nocturnal-ready #nocturnal-veil{
    backdrop-filter: none;
  }
}


/* =========================
   MIGZVERSE — NOCTURNAL SHIFT (TEST: Index MUSIC -> migz-radio.html)
   - Fade OUT (veil) on click
   - Audio plays fully before navigation
   - Silent "awakening" fade IN on page load (index + radio)
   ========================= */

/* Page load fade-in (noir awakening)
   Implemented via <html class="page-awaken"> set early in HTML head.
*/
html.page-awaken body{
  opacity: 0;
}
html.page-awaken.page-awaken-in body{
  opacity: 1;
  transition: opacity 1400ms ease;
}

/* Uniform dim veil for fade-out */
#nocturnal-veil{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  background: rgba(0,0,0,.72);
  transition: opacity 700ms ease;
}
body.nocturnal-out #nocturnal-veil{
  opacity: 1;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  html.page-awaken.page-awaken-in body{ transition: none !important; }
  #nocturnal-veil{ transition: none !important; }
}

/* =========================
   MIGZVERSE LANDING PAGE — FIXED 16:9 STAGE LOCK
   - Preserves authored 1920x1080 scene on HOME
   - Locks nav and ambience to the page like SOCIAL
   ========================= */

:root{
  --home-base-w: 1920;
  --home-base-h: 1080;
  --home-safe-top: env(safe-area-inset-top, 0px);
  --home-safe-bottom: env(safe-area-inset-bottom, 0px);
  --home-safe-vh: calc(100svh - var(--home-safe-top) - var(--home-safe-bottom));
}

body.home-page{
  background:#000;
}

body.home-page .hero{
  position: relative;
  min-height: 100svh;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #000;
}

body.home-page .home-stage-shell{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: var(--home-safe-top);
  padding-bottom: var(--home-safe-bottom);
  box-sizing: border-box;
  background: #000;
}

body.home-page .home-stage{
  position: relative;
  width: min(100vw, calc(var(--home-safe-vh) * 16 / 9));
  height: min(var(--home-safe-vh), calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(24,164,255,0.08);
}

body.home-page .bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

body.home-page .authored-home-layer{
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--home-base-w) * 1px);
  height: calc(var(--home-base-h) * 1px);
  transform-origin: top left;
  transform: scale(var(--stage-scale, 1));
  z-index: 10;
  pointer-events: none;
}

body.home-page .hero-overlay,
body.home-page .left-stack,
body.home-page .top-ticker,
body.home-page #city-nav,
body.home-page .home-audio-toggle{
  pointer-events: auto;
}

body.home-page .top-ticker{
  top: 18px;
  left: 470px;
  transform: none;
  width: 980px;
}

body.home-page .hero-overlay{
  position: absolute;
  inset: 0;
  flex: none;
  padding-top: 0;
  padding-bottom: 0;
}

body.home-page .left-stack{
  left: 26px;
  top: 64px;
  width: 520px;
  display: block;
}

body.home-page #city-nav.skyline-home{
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 26px;
  z-index: 1;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: 18px;
  overflow: visible !important;
  pointer-events: none;
}

body.home-page #city-nav.skyline-home .building,
body.home-page #city-nav.skyline-home .marquee{
  flex: 0 0 auto;
  white-space: nowrap;
}

body.home-page #city-nav.skyline-home .marquee{
  pointer-events: auto;
}

body.home-page .home-audio-toggle{
  position: absolute;
  left: 22px;
  bottom: 24px;
  z-index: 2;
}

body.home-page .ship{
  z-index: 2;
}

body.home-page main{
  position: relative;
  z-index: 1;
  background: radial-gradient(circle at top, #151a35 0, #03040a 45%, #000 100%);
}

body.home-page .audio-toggle{
  position: absolute;
}

body.home-page .hero + main{
  margin-top: 0;
}

body.home-page .left-stack__frame{
  animation: none;
}

@supports not (height: 100svh){
  :root{
    --home-safe-vh: calc(100vh - var(--home-safe-top) - var(--home-safe-bottom));
  }
}



/* =========================
   MIGZVERSE LANDING PAGE — FINAL OVERLAY LOCK-DOWN REFINEMENTS
   - Freeze HOME authored overlay positions to the 1920x1080 baseline
   - Prevent viewport/media-query drift on nav, ticker, logo, stack, and ambience
   ========================= */

body.home-page .top-ticker{
  display:block !important;
  position:absolute;
  top:18px;
  left:470px;
  width:980px;
  z-index:9;
  pointer-events:none;
}

body.home-page .hero-overlay::before{
  top:626px;
  left:960px;
  width:420px;
}

body.home-page .hero-overlay::after{
  inset:0;
}

body.home-page .left-stack{
  display:block !important;
  position:absolute;
  left:26px;
  top:64px;
  width:520px;
  z-index:8;
}

body.home-page .left-stack__label{
  font-size:16px;
}

body.home-page .left-stack__frame{
  padding:12px;
  gap:12px;
}

body.home-page .left-stack__media{
  padding:10px 12px 12px;
}

body.home-page #city-nav.skyline-home{
  position:absolute !important;
  left:54px;
  right:54px;
  bottom:26px;
  width:auto;
  transform:none;
  z-index:11;
}

body.home-page #city-nav.skyline-home .marquee{
  min-width:150px;
  padding:0.55rem 1.4rem;
}

body.home-page #city-nav.skyline-home .marquee span{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-rendering:optimizeLegibility;
  white-space:nowrap;
}

body.home-page .home-audio-toggle,
body.home-page .home-audio-toggle.audio-toggle{
  position:absolute;
  left:22px;
  bottom:24px;
  width:44px;
  height:44px;
  font-size:1.2rem;
  z-index:12;
}


/* =========================
   MIGZVERSE HOME INTRO — FIRST DIRECT ENTRY ONLY
   - Replaces normal page-awaken on first direct internet visit
   - Internal HOME nav returns use standard fade-in instead
   ========================= */

html.intro-entry body{
  opacity:1 !important;
}

body.home-page .migz-intro{
  position:absolute;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:0;
}

html.intro-pending body.home-page .migz-intro{
  opacity:1;
}

body.home-page .migz-intro__blackout,
body.home-page .migz-intro__grain{
  position:absolute;
  inset:0;
}

body.home-page .migz-intro__blackout{
  background:#000;
  opacity:1;
  transition:opacity 3000ms ease;
}

body.home-page .migz-intro__grain{
  opacity:0.12;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      transparent 3px,
      transparent 6px
    ),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 58%);
  transition:opacity 3000ms ease;
}

body.home-page .migz-intro__window{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(300px, 26vw, 520px);
  height:clamp(375px, 32.5vw, 650px);
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(208,228,255,0.46);
  box-shadow:
    0 0 20px rgba(24,164,255,0.30),
    0 0 42px rgba(255,46,159,0.14);
  background:#000;
  transform:translate(-50%, -50%);
  transform-origin:center center;
  opacity:1;
  z-index:3;
  will-change:left, top, width, height, transform, border-radius;
  transition:
    left 6000ms cubic-bezier(.20,.76,.20,1),
    top 6000ms cubic-bezier(.20,.76,.20,1),
    width 6000ms cubic-bezier(.20,.76,.20,1),
    height 6000ms cubic-bezier(.20,.76,.20,1),
    transform 6000ms cubic-bezier(.20,.76,.20,1),
    border-radius 6000ms cubic-bezier(.20,.76,.20,1),
    border-color 1200ms ease,
    box-shadow 1600ms ease;
}

body.home-page .migz-intro__window-inner{
  position:relative;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
}

body.home-page .migz-intro__copy{
  position:absolute;
  inset:0;
  z-index:4;
}

body.home-page .migz-intro__line{
  position:absolute;
  margin:0;
  width:min(calc(100% - 48px), 520px);
  max-width:22ch;
  left:50%;
  right:auto;
  bottom:auto;
  transform:translate(-50%, -50%);
  color:rgba(245,247,255,0.96);
  font-family:"Bebas Neue", system-ui, sans-serif;
  font-size:clamp(1.1rem, 1.45vw, 2rem);
  letter-spacing:0.12em;
  line-height:1.08;
  text-transform:uppercase;
  text-align:center;
  text-shadow:
    0 0 12px rgba(255,255,255,0.22),
    0 0 22px rgba(24,164,255,0.18);
  opacity:0;
  will-change:opacity;
}

body.home-page .migz-intro__line--one{
  top:46%;
}

body.home-page .migz-intro__line--two{
  top:56%;
}

body.home-page .migz-intro__video,
body.home-page .migz-intro__window-glow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

body.home-page .migz-intro__video{
  object-fit:cover;
  opacity:0;
  filter:grayscale(1) saturate(0) blur(10px) brightness(0.50) contrast(0.94);
  transform:scale(1.18);
  will-change:opacity, filter, transform;
  transition:
    opacity 3000ms ease,
    filter 3000ms cubic-bezier(.20,.76,.20,1),
    transform 3000ms cubic-bezier(.20,.76,.20,1);
}

body.home-page .migz-intro__window-glow{
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 38%, rgba(0,0,0,0.22) 100%);
  opacity:1;
  transition:opacity 3000ms ease;
}

html.intro-pending body.home-page .home-stage > :not(.migz-intro){
  opacity:0;
  transition:opacity 900ms ease;
}

html.intro-pending body.home-page .migz-intro.is-line-one .migz-intro__line--one{
  animation:migzIntroLineFade 9000ms linear forwards;
}

html.intro-pending body.home-page .migz-intro.is-line-two .migz-intro__line--two{
  animation:migzIntroLineFade 9000ms linear forwards;
}

@keyframes migzIntroLineFade{
  0%{ opacity:0; }
  33.333%{ opacity:1; }
  66.666%{ opacity:1; }
  100%{ opacity:0; }
}

html.intro-pending body.home-page .migz-intro.is-image-bw .migz-intro__line{
  opacity:0;
  animation:none;
}

html.intro-pending body.home-page .migz-intro.is-image-bw .migz-intro__video{
  opacity:1;
  filter:grayscale(1) saturate(0) blur(4px) brightness(0.62) contrast(1);
  transform:scale(1.08);
}

html.intro-pending body.home-page .migz-intro.is-expand .migz-intro__window{
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius:0;
  border-color:rgba(208,228,255,0);
  box-shadow:none;
  transform:translate(0, 0);
}

html.intro-pending body.home-page .migz-intro.is-expand .migz-intro__video{
  transition-duration:6000ms, 6000ms, 6000ms;
  opacity:1;
  filter:grayscale(1) saturate(0) blur(1px) brightness(0.74) contrast(1.02);
  transform:scale(1);
}

html.intro-pending body.home-page .migz-intro.is-color .migz-intro__video{
  transition-duration:3000ms, 3000ms, 3000ms;
  opacity:1;
  filter:grayscale(0) saturate(1.12) blur(0) brightness(0.98) contrast(1.08);
  transform:scale(1);
}

html.intro-pending body.home-page .migz-intro.is-color .migz-intro__blackout{
  opacity:0;
}

html.intro-pending body.home-page .migz-intro.is-color .migz-intro__grain,
html.intro-pending body.home-page .migz-intro.is-color .migz-intro__window-glow{
  opacity:0;
}

html.intro-pending body.home-page.is-intro-complete .home-stage > :not(.migz-intro){
  opacity:1;
  filter:none;
}

html.intro-pending body.home-page.is-intro-complete .migz-intro{
  opacity:0;
  transition:opacity 800ms ease;
}

@media (max-width: 900px){
  body.home-page .migz-intro__window{
    width:clamp(260px, 58vw, 420px);
    height:clamp(325px, 72.5vw, 525px);
  }

  body.home-page .migz-intro__line{
    width:min(calc(100% - 32px), 320px);
    max-width:18ch;
    font-size:clamp(1rem, 3.8vw, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce){
  body.home-page .migz-intro,
  body.home-page .migz-intro *{
    transition:none !important;
    animation:none !important;
  }
  html.intro-pending body.home-page .home-stage > :not(.migz-intro){
    transition:none !important;
  }
}