/* Final production override: correct portrait and guaranteed visible homepage content. */
.hero-art {
  background-image:
    linear-gradient(90deg, #05060a 0%, #05060aeb 28%, #05060a1a 64%, #05060a38),
    url("/images/hero-human-signal.png?v=mat-ryxx-final-20260722") !important;
  z-index: 0 !important;
}

.hero::after {
  z-index: 1 !important;
}

.site-header {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
}

.hero-copy {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

.hero-copy > * {
  visibility: visible !important;
  opacity: 1 !important;
}

.signal,
.scroll-cue {
  z-index: 10 !important;
}

@media (max-width: 760px) {
  .hero-art {
    background-image:
      linear-gradient(#05060a1a, #05060a 76%),
      url("/images/hero-human-signal.png?v=mat-ryxx-final-20260722") !important;
  }
}

/* 3D navigation console */
.site-header {
  --nav-metal: color-mix(in srgb, var(--gold) 72%, #ffffff 28%);
  --nav-edge: color-mix(in srgb, var(--gold) 48%, var(--theme-a) 52%);
  --nav-glow: color-mix(in srgb, var(--theme-a) 38%, transparent);
  perspective: 1100px;
  border-bottom-color: color-mix(in srgb, var(--gold) 32%, transparent) !important;
  box-shadow: 0 12px 38px #00000080, inset 0 -1px 0 #ffffff0d;
}

.site-header nav {
  gap: clamp(6px, 0.75vw, 13px) !important;
  perspective: 900px;
}

.site-header nav a,
.more-menu summary,
.header-listen {
  position: relative;
  min-height: 38px;
  padding: 0 clamp(10px, 0.8vw, 15px) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  border-radius: 8px;
  color: var(--nav-metal) !important;
  background:
    linear-gradient(145deg, #ffffff11, transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-a) 16%, #101116), #05060a 72%);
  box-shadow:
    inset 0 1px 0 #ffffff24,
    inset 0 -1px 0 #000000c7,
    0 3px 0 color-mix(in srgb, var(--nav-edge) 62%, #06070a),
    0 8px 18px #00000070;
  text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 32%, transparent);
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.site-header nav a,
.header-listen,
.more-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.16em !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.site-header nav a::before,
.more-menu summary::before,
.header-listen::before {
  content: "";
  position: absolute;
  inset: 3px 8px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nav-metal), transparent);
  opacity: 0.6;
}

.site-header nav a::after {
  display: none !important;
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.more-menu summary:hover,
.more-menu summary:focus-visible,
.more-menu[open] summary,
.header-listen:hover,
.header-listen:focus-visible {
  color: #fff8dc !important;
  border-color: var(--nav-metal);
  background:
    linear-gradient(145deg, #ffffff26, transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-a) 36%, #171921), #08090e 76%);
  box-shadow:
    inset 0 1px 0 #ffffff45,
    inset 0 -1px 0 #000000d9,
    0 5px 0 var(--nav-edge),
    0 14px 28px var(--nav-glow),
    0 0 18px color-mix(in srgb, var(--gold) 22%, transparent);
  transform: translateY(-3px) rotateX(7deg) translateZ(8px);
  outline: none;
}

.site-header nav a:active,
.more-menu summary:active,
.header-listen:active {
  transform: translateY(2px) rotateX(0deg);
  box-shadow: inset 0 2px 6px #000000a6, 0 1px 0 var(--nav-edge);
}

.header-listen svg {
  color: var(--nav-metal) !important;
  filter: drop-shadow(0 0 6px var(--nav-glow));
}

.more-menu summary i {
  border-color: var(--nav-metal) !important;
}

/* Clearly defined language and theme controls */
.experience-controls {
  gap: 10px !important;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff0c, #0000003d);
  box-shadow: inset 0 1px 0 #ffffff13, 0 7px 20px #00000055;
}

.experience-select {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 3px !important;
  color: color-mix(in srgb, var(--gold) 76%, #ffffff 24%) !important;
  font-size: 7px !important;
  letter-spacing: 0.16em !important;
}

.experience-select > span {
  display: block !important;
  padding-left: 4px;
  white-space: nowrap;
  text-shadow: 0 0 9px var(--nav-glow);
}

.experience-select > i {
  position: absolute;
  top: 23px;
  left: 9px;
  z-index: 2;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, var(--theme-a), var(--gold), var(--cyan)) !important;
}

.experience-select select {
  width: 126px;
  max-width: 126px !important;
  height: 38px !important;
  padding: 0 28px 0 21px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--theme-a) 42%) !important;
  border-radius: 8px !important;
  color: #fff8e1 !important;
  background:
    linear-gradient(145deg, #ffffff14, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-a) 20%, #11131a), #06070b) !important;
  box-shadow:
    inset 0 1px 0 #ffffff26,
    inset 0 -1px 0 #000,
    0 3px 0 color-mix(in srgb, var(--nav-edge) 68%, #050609),
    0 8px 18px #00000060 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

.language-select select {
  width: 98px;
  max-width: 98px !important;
}

.experience-select select:hover,
.experience-select select:focus-visible {
  transform: translateY(-2px);
  border-color: var(--nav-metal) !important;
  box-shadow:
    inset 0 1px 0 #ffffff42,
    0 4px 0 var(--nav-edge),
    0 12px 24px var(--nav-glow),
    0 0 0 2px color-mix(in srgb, var(--gold) 20%, transparent) !important;
  outline: none;
}

.mega-menu {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent) !important;
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--theme-a) 14%, transparent), transparent 38%),
    #08090ff5 !important;
  box-shadow: 0 35px 90px #000c, inset 0 1px 0 #ffffff1c !important;
  transform-origin: top right;
  animation: menu-console-in 220ms ease-out;
}

@keyframes menu-console-in {
  from { opacity: 0; transform: translateY(-10px) rotateX(-8deg) scale(0.98); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}

@media (max-width: 1320px) and (min-width: 901px) {
  .site-header nav a { padding-inline: 9px !important; font-size: 8px !important; }
  .experience-select > span { display: none !important; }
  .experience-select { flex-direction: row; align-items: center !important; }
  .experience-select > i { position: static; }
  .experience-select select { width: 100px; max-width: 100px !important; }
  .language-select select { width: 82px; max-width: 82px !important; }
}

@media (max-width: 900px) {
  .experience-controls {
    padding: 3px;
    gap: 5px !important;
  }

  .experience-select {
    flex-direction: row;
    align-items: center !important;
  }

  .experience-select > span,
  .experience-select > i {
    display: none !important;
  }

  .experience-select select,
  .language-select select {
    width: 86px;
    max-width: 86px !important;
    height: 36px !important;
    padding-left: 10px !important;
  }
}

@media (max-width: 560px) {
  .experience-select select,
  .language-select select {
    width: 72px;
    max-width: 72px !important;
    height: 34px !important;
    padding: 0 17px 0 7px !important;
    font-size: 8px !important;
  }

  .more-menu summary {
    min-height: 36px;
    padding-inline: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav a,
  .more-menu summary,
  .header-listen,
  .experience-select select,
  .mega-menu {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}