/* ==========================================================================
   HERO 3D CRT & NAVIGATION SYSTEM (css/hero-3d.css)
   ==========================================================================
   Scope & Responsibilities:
   - Full-bleed hero section geometry and 3D CRT monitor styling.
   - ASCII TV frame borders, SVG clip-path definitions, and scanlines.
   - Fixed navigation taskbar (Group A socials, Group B studio, live clock).
   - Dropdown navigation drawer (desktop drawer & full-screen overlay).
   ========================================================================== */

/* ==========================================================================
   Hero & Navigation Typography & Layout Settings
   Easily adjust font size, boldness (weight), gaps, and coordinates below:
   ========================================================================== */



/* ==========================================================================
   Top Navigation: Centered Modular Navigation Box with Roll Animation
   ========================================================================== */


.hero-top-nav,
.site-nav-top {
  position: fixed;
  top: var(--nav-box-top, 25px);
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  min-height: var(--nav-box-height, 56px);
  z-index: 1000;
  padding: 0 var(--hero-margin, 25px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  mix-blend-mode: normal;
  color: #ffffff;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  box-sizing: border-box;
  isolation: isolate;
}

.hero-top-nav .nav-modular-box,
.hero-top-nav.nav-theme-dark .nav-modular-box {
  position: absolute;
  left: calc(50% + var(--nav-box-offset-x, 0px));
  top: calc(50% + var(--nav-box-offset-y, 0px));
  transform: translate(-50%, -50%);
  margin-top: var(--nav-box-margin-top, 0px);
  margin-bottom: var(--nav-box-margin-bottom, 0px);
  margin-left: var(--nav-box-margin-left, 0px);
  margin-right: var(--nav-box-margin-right, 0px);
  background: var(--nav-bar-bg, #070707);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

@keyframes clockDotPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.65;
    transform: scale(0.85);
  }
}

/* ==========================================================================
   Dynamic Navigation Theme: Light (White Section) vs Dark (Black Section)
   ========================================================================== */

/* Smooth color, background, transform & opacity transitions for navigation */


.nav-pinned-item,
.hero-location-text,
.live-clock-gmt,
.live-clock,
.nav-modular-box .nav-box-link,
.nav-modular-box .brand-slash,
.nav-modular-box .brand-r,
.nav-modular-box .nav-roll-inner span,
.nav-modular-box .brand-roll-inner span,
.site-nav-top a,
.site-nav-top span {
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Navigation Theme: Permanent Dark Glass Aesthetic (Never Turns White) --- */
.hero-top-nav.nav-theme-dark {
  color: #ffffff;
}



.hero-top-nav .nav-modular-box .nav-box-brand,
.hero-top-nav.nav-theme-dark .nav-modular-box .nav-box-brand,
.hero-top-nav.nav-theme-light .nav-modular-box .nav-box-brand,
.hero-top-nav .nav-modular-box .brand-slash,
.hero-top-nav .nav-modular-box .brand-r {
  color: #070707;
}

.hero-top-nav .hero-clock-dot,
.hero-top-nav.nav-theme-light .hero-clock-dot,
.hero-top-nav.nav-theme-dark .hero-clock-dot,
.site-nav-top .hero-clock-dot,
.site-nav-top.nav-theme-light .hero-clock-dot,
.site-nav-top.nav-theme-dark .hero-clock-dot {
  background-color: #00ff66;
  box-shadow: none;
  mix-blend-mode: normal;
}



/* Permanent navbar visibility (neutralized nav-hidden) */
.hero-top-nav.nav-hidden,
.site-nav-top.nav-hidden {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.site-nav-top a,
.hero-top-nav a {
  pointer-events: auto;
}

.nav-modular-box {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-box-gap, 25px);
  width: var(--nav-box-width, 480px);
  height: var(--nav-box-height, auto);
  min-height: var(--nav-box-height, auto);
  min-width: var(--nav-box-min-width, 280px);
  max-width: var(--nav-box-max-width, calc(100vw - 40px));
  padding: var(--nav-box-pady, 10px) var(--nav-box-padx, 17px);
  margin-top: var(--nav-box-margin-top, 0px);
  margin-bottom: var(--nav-box-margin-bottom, 0px);
  margin-left: var(--nav-box-margin-left, 0px);
  margin-right: var(--nav-box-margin-right, 0px);
  background: var(--nav-bar-bg, #070707);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: var(--nav-box-radius, 2px);
  box-shadow: var(--nav-glass-shadow-nav, none);
  box-sizing: border-box;
  position: relative;
  opacity: var(--nav-box-opacity, 1);
  isolation: isolate;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Center Status Line in Nav Box */
.nav-status-line {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--nav-status-font-weight, 500);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  color: var(--nav-status-color, #faf9fc);
  white-space: nowrap;
  pointer-events: auto;
  text-align: center;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Right: Hamburger Button (2 lines of equal width) */
.nav-hamburger-btn {
  background: transparent;
  border: none;
  padding: 4px 2px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--nav-hamburger-gap, 4.5px);
  pointer-events: auto;
  user-select: none;
  width: var(--nav-hamburger-size, 30px);
  height: var(--nav-hamburger-size, 30px);
  transform: rotate(0deg);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.nav-hamburger-btn:hover {
  opacity: 1;
}

.nav-hamburger-btn:active {
  transform: scale(0.92);
  transition: transform 120ms ease-out;
}

.nav-hamburger-btn .hamburger-line {
  display: block;
  width: var(--nav-hamburger-line-width, 19px);
  height: var(--nav-hamburger-line-height, 1.5px);
  background-color: var(--nav-hamburger-line-color, #070707);
  border-radius: 1px;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    opacity 0.2s ease;
  will-change: transform;
}

/* Hover: Merge both lines into a single center line '-' */
.nav-hamburger-btn:hover .hamburger-line:first-child,
.nav-hamburger-btn:focus-visible .hamburger-line:first-child {
  transform: translateY(calc((var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

.nav-hamburger-btn:hover .hamburger-line:last-child,
.nav-hamburger-btn:focus-visible .hamburger-line:last-child {
  transform: translateY(calc(-1 * (var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

/* Active / Clicked State: Merge into single line and rotate into a slash '/' */
.nav-hamburger-btn.is-active {
  transform: rotate(var(--nav-hamburger-active-rotate, -68deg));
}

.nav-hamburger-btn.is-active .hamburger-line:first-child {
  transform: translateY(calc((var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

.nav-hamburger-btn.is-active .hamburger-line:last-child {
  transform: translateY(calc(-1 * (var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

/* Fullscreen Backdrop Scrim disabled: do not darken site or block interactions */
.nav-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 990;
}

.nav-dropdown-backdrop.is-active {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Full-Width 2-Column Split Dropdown Menu spanning width of the nav bar:
   Maintains identical glass styling (tint, border, highlight, shadow) without redundant
   duplicate backdrop blur since the entire page is already blurred by .nav-dropdown-backdrop.
   GPU-composited opacity and transform for locked 120fps performance. */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--nav-glass-bg, #faf9fc);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: var(--nav-dropdown-radius, 2px);
  box-shadow: var(--nav-glass-shadow-menu, none);
  padding: var(--nav-dropdown-padding-top, 24px) var(--nav-dropdown-padding-x, 22px) var(--nav-dropdown-padding-bottom, 22px) var(--nav-dropdown-padding-x, 22px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.24s ease;
  will-change: opacity, transform;
  z-index: 1000;
  isolation: isolate;
  text-transform: none;
  touch-action: auto;
}



/* Allow site scrolling when dropdown menu is active, acting like another tab on the site */
html.nav-dropdown-active {
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: auto;
}

body.nav-dropdown-active {
  overflow: visible;
  touch-action: auto !important;
}



/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-modular-box {
    background: var(--nav-glass-fallback-bg, #101010);
  }

  .nav-dropdown-menu {
    background: var(--nav-glass-fallback-bg, #101010);
  }

  .nav-dropdown-backdrop {
    background: rgba(0, 0, 0, 0.75);
  }
}

/* Accessibility: User preference for reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .nav-modular-box {
    background: var(--nav-glass-fallback-bg, #101010);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
  }

  .nav-dropdown-menu {
    background: var(--nav-glass-fallback-bg, #101010);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
  }

  .nav-dropdown-backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}