/* ==========================================================================
   Top nav (persistent CTAs) + chained multi-row drop menu.
   3D chain links render in a separate overlay canvas (chains.js) — the
   menu DOM only owns the panel/rows. CSS chains/rivets are GONE.
   ========================================================================== */

:root {
  --violet-1: #a78bfa;
  --violet-2: #c4b5fd;
  --violet-3: #5b3fc0;
  --pink-accent: #DA4E97;
}

/* --- Top nav: clean horizontal bar -------------------------------------
   The nav itself is transparent; legibility against the laser glow
   comes from the button pills having their own solid backgrounds
   (.top-nav-pill / .top-nav-login below). */
.top-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 36px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 700ms ease-out 700ms,
              transform 700ms var(--ease-out-soft) 700ms;
}
body.is-loaded .top-nav {
  opacity: 1;
  transform: translateY(0);
}

.top-nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.top-nav-logo img {
  display: block;
  width: 200px;
  height: auto;
}

.top-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "Get the App" pill — primary CTA in the nav. Solid dark background
   so the text stays readable when a laser is glowing right behind it. */
.top-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: rgba(8, 6, 14, 0.92);
  border: 1px solid rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.25);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.top-nav-pill:hover {
  background: rgba(20, 14, 32, 0.95);
  border-color: rgba(167, 139, 250, 0.95);
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.45);
  transform: translateY(-1px);
}

/* Login with X — far-right. Same solid dark fill as the CTA pill
   (but with neutral white border instead of violet) so it sits as
   a secondary action of the same shape language. */
.top-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(8, 6, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
  flex-shrink: 0;
}
.top-nav-login:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(20, 14, 32, 0.95);
}
.top-nav-login strong {
  font-weight: 700;
  margin-left: 2px;
}

/* --- Chained drop menu (the dramatic centerpiece) ---------------------- */
.menu {
  position: absolute;
  top: 50%;
  right: 80px;
  width: 380px;
  z-index: 41;
  /* JS-driven spring physics writes these custom props each frame. */
  --drop-y: -800px;
  --sway: 0deg;
  transform: translate3d(0, calc(-50% + var(--drop-y)), 0) rotate(var(--sway));
  transform-origin: 50% -50vh;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 320ms ease-out;
  will-change: transform;
}
body.is-loaded .menu { opacity: 1; }

/* Neon-sign menu — violet glow ring around a dark glass interior.
   Pulses subtly to feel alive on the page. */
.menu-frame {
  position: relative;
  background:
    linear-gradient(180deg, rgba(14, 10, 26, 0.86), rgba(6, 4, 14, 0.96));
  border: 1px solid rgba(167, 139, 250, 0.55);
  padding: 8px;
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  animation: menu-neon-pulse 4.2s ease-in-out infinite;
}
@keyframes menu-neon-pulse {
  0%, 100% {
    box-shadow:
      /* tight inner edge */
      inset 0 0 0 1px rgba(167, 139, 250, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      /* outer neon halo */
      0 0 22px rgba(167, 139, 250, 0.30),
      0 0 50px rgba(167, 139, 250, 0.18),
      0 22px 60px rgba(0, 0, 0, 0.75);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(196, 181, 253, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 32px rgba(167, 139, 250, 0.55),
      0 0 70px rgba(167, 139, 250, 0.32),
      0 22px 60px rgba(0, 0, 0, 0.75);
  }
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  transition: background 180ms ease;
  background: transparent;
}
.menu-row + .menu-row {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Left accent bar that grows on hover */
.menu-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--violet-1);
  transform: translateY(-50%);
  transition: height 220ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease;
  opacity: 0;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.7);
}
.menu-row:hover,
.menu-row.is-focus {
  background:
    linear-gradient(90deg,
      rgba(167, 139, 250, 0.10) 0%,
      rgba(167, 139, 250, 0.02) 70%,
      transparent 100%);
}
.menu-row:hover::before,
.menu-row.is-focus::before {
  height: 70%;
  opacity: 1;
}
.menu-row:active {
  background: rgba(167, 139, 250, 0.16);
}

.menu-row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* Inline App Store badge for the Enter Arena row — sits right of the
   text to mark the CTA destination (TestFlight). Hidden by default;
   only the .menu-row--cta row shows one. */
.menu-row-badge {
  display: none;
  height: 38px;
  width: auto;
  flex-shrink: 0;
  pointer-events: none;          /* the whole row is the click target */
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.45));
  transition: transform 200ms ease, filter 200ms ease;
}
.menu-row--cta .menu-row-badge { display: block; }
.menu-row--cta:hover .menu-row-badge {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.85));
}

/* Highlight the Enter Arena row — it's the primary CTA, the only
   working destination on the landing right now (TestFlight). Subtle
   violet wash + gentle pulse on the left accent bar so the eye lands
   here first. */
.menu-row--cta {
  background:
    linear-gradient(90deg,
      rgba(167, 139, 250, 0.12) 0%,
      rgba(167, 139, 250, 0.04) 70%,
      transparent 100%);
}
.menu-row--cta::before {
  height: 70%;
  opacity: 1;
  animation: cta-accent-pulse 2.4s ease-in-out infinite;
}
@keyframes cta-accent-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(167, 139, 250, 0.55); }
  50%      { box-shadow: 0 0 16px rgba(167, 139, 250, 1.00); }
}
.menu-row-title {
  font-family: 'Big Shoulders Display', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5f5f7;
  /* Soft neon outline on the text — picks up the menu's glow */
  text-shadow:
    0 0 8px rgba(167, 139, 250, 0.20),
    0 1px 0 rgba(0, 0, 0, 0.6);
  transition: color 200ms ease, text-shadow 200ms ease;
  line-height: 1;
}
.menu-row:hover .menu-row-title,
.menu-row.is-focus .menu-row-title {
  color: var(--violet-2);
  text-shadow:
    0 0 14px rgba(167, 139, 250, 0.85),
    0 0 30px rgba(167, 139, 250, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.6);
}
.menu-row-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 200ms ease;
}
.menu-row:hover .menu-row-sub,
.menu-row.is-focus .menu-row-sub {
  color: rgba(255, 255, 255, 0.78);
}

/* Pulsing primary CTA — first row */
.menu-row[data-row="enter"] .menu-row-title {
  animation: enter-pulse 2.8s ease-in-out infinite;
}
@keyframes enter-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 14px rgba(167, 139, 250, 0.65); }
}

/* --- Hero lightsabers (purple plasma blades hanging the menu) -------
   Classic CSS lightsaber pattern: each blade is a single thin solid
   white element with a stack of box-shadow rings for the colored
   halo. The white blade core is just a 4 px wide white div; everything
   you see beyond that — the violet aura, the wide hum-glow — is the
   box-shadow stack. A keyframe animation breathes the shadow values
   to give the saber its characteristic "hum".

   Anchored to .hero (siblings of .menu) so they DON'T ride the menu's
   spring transform — they stay fixed from the viewport top while the
   menu drops into their endpoint. */
.hero-laser {
  position: absolute;
  top: 0;
  /* Reaches from the top of the hero down to the menu's resting top
     edge (menu rests at top: 50% with translateY(-50%)). */
  height: calc(50% - 130px);
  width: 4px;
  border-radius: 2px;
  background: #fff;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 600ms ease-out 800ms;
  /* Layered box-shadow = the violet halo. White rings tight to the
     blade, violet rings progressively wider — that's what gives the
     saber its core+aura read. The shadow values get re-stated inside
     the @keyframes below to get the hum. */
  box-shadow:
    0 0   4px  1px rgba(255, 255, 255, 1.00),
    0 0   8px  2px rgba(255, 255, 255, 0.90),
    0 0  16px  3px rgba(216, 180, 254, 0.95),
    0 0  32px  6px rgba(167, 139, 250, 0.80),
    0 0  64px 12px rgba(139,  92, 246, 0.55),
    0 0 120px 22px rgba(124,  58, 237, 0.35);
  animation: saber-hum 1.4s ease-in-out infinite;
}
body.is-loaded .hero-laser { opacity: 1; }

/* Inside-corner alignment — menu is at right: 80px width: 380px so
   the inside corners are right: 96px and right: 444px. */
.hero-laser-left  { right: 444px; }
.hero-laser-right { right:  96px; }

/* The hum — saber halo expands and intensifies on the half-cycle, then
   pulls back. Keep the inner-most rings stable (the blade's bright core
   shouldn't visibly throb), only breathe the outer violet rings. */
@keyframes saber-hum {
  0%, 100% {
    box-shadow:
      0 0   4px  1px rgba(255, 255, 255, 1.00),
      0 0   8px  2px rgba(255, 255, 255, 0.90),
      0 0  16px  3px rgba(216, 180, 254, 0.95),
      0 0  32px  6px rgba(167, 139, 250, 0.80),
      0 0  64px 12px rgba(139,  92, 246, 0.55),
      0 0 120px 22px rgba(124,  58, 237, 0.35);
  }
  50% {
    box-shadow:
      0 0   5px  1px rgba(255, 255, 255, 1.00),
      0 0  10px  3px rgba(255, 255, 255, 0.95),
      0 0  22px  4px rgba(216, 180, 254, 1.00),
      0 0  44px  8px rgba(167, 139, 250, 0.90),
      0 0  90px 18px rgba(139,  92, 246, 0.65),
      0 0 170px 32px rgba(124,  58, 237, 0.45);
  }
}

/* Impact splash — the bright pulsing nodule where the saber's tip
   contacts the menu top. Same lightsaber recipe, scaled smaller and
   sitting on the saber's bottom edge. */
.hero-laser-splash {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 600ms ease-out 1100ms;
  box-shadow:
    0 0   8px  2px rgba(255, 255, 255, 1.00),
    0 0  18px  4px rgba(216, 180, 254, 0.95),
    0 0  40px  8px rgba(167, 139, 250, 0.75),
    0 0  90px 18px rgba(139,  92, 246, 0.50),
    0 0 160px 30px rgba(124,  58, 237, 0.30);
  animation: saber-splash-hum 1.4s ease-in-out infinite;
}
body.is-loaded .hero-laser-splash { opacity: 1; }
@keyframes saber-splash-hum {
  0%, 100% {
    transform: translateX(-50%) scale(1.0);
    box-shadow:
      0 0   8px  2px rgba(255, 255, 255, 1.00),
      0 0  18px  4px rgba(216, 180, 254, 0.95),
      0 0  40px  8px rgba(167, 139, 250, 0.75),
      0 0  90px 18px rgba(139,  92, 246, 0.50),
      0 0 160px 30px rgba(124,  58, 237, 0.30);
  }
  50% {
    transform: translateX(-50%) scale(1.18);
    box-shadow:
      0 0  10px  3px rgba(255, 255, 255, 1.00),
      0 0  24px  6px rgba(216, 180, 254, 1.00),
      0 0  56px 12px rgba(167, 139, 250, 0.90),
      0 0 130px 26px rgba(139,  92, 246, 0.65),
      0 0 220px 44px rgba(124,  58, 237, 0.40);
  }
}

@media (max-width: 768px) {
  .hero-laser, .hero-laser-splash { display: none; }
}

/* --- Tablet & phone --------------------------------------------------
   Single breakpoint at 1024 px catches tablets (the previous 768 px cut
   left iPad portrait/landscape on the desktop layout, where the menu's
   absolute right-side anchor doesn't fit). The hero packs everything
   above the fold: headline → menu rows → App Store badge → scroll cue.
   No big dead-space gaps — the user can see and tap the CTAs without
   scrolling. Lasers are hidden in this breakpoint (they only make
   sense with the desktop right-side anchor). */
@media (max-width: 1024px) {
  .top-nav { padding: 14px 16px; gap: 10px; }
  .top-nav-logo img { width: 140px; }
  .top-nav-pill   { padding: 7px 11px; font-size: 11px; }
  .top-nav-login  { padding: 7px 10px; font-size: 11px; }

  /* Menu sits in the centered flex column. max-width keeps it readable;
     the !important is needed because desktop's .menu has the same
     specificity and ships earlier in the cascade — without it some
     viewports were honoring the desktop width. */
  .menu {
    position: static !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 0 !important;
    padding: 0;
    transform-origin: 50% 0;
    transform: translate3d(0, var(--drop-y), 0) rotate(var(--sway));
  }
  .menu-row { padding: 16px 18px; }
  .menu-row-title { font-size: 20px; }
  .menu-row-sub   { font-size: 12.5px; }

  .hero-laser, .hero-laser-splash { display: none; }
}

@media (max-width: 540px) {
  .menu { margin-top: 22px; }
  .menu-row { padding: 12px 14px; }
  .menu-row-title { font-size: 17px; }
  .menu-row-sub   { font-size: 11px; }
}

/* The standalone .hero-app-cta is gone — the App Store badge lives
   inside the Enter Arena row (.menu-row--cta) so we don't show the
   same CTA twice on mobile. */