/* menu.css — the shared cockpit top menu (pairs with /menu.js).

   Loaded by the six panel pages (/tech, /keynote, /keynote-mini,
   /contact, /team, /404) right after landing.css — never by the
   landing page, which has its own .landing-nav. Relies on
   --landing-cockpit-accent from landing.css :root, so keep that
   stylesheet ahead of this one. Desktop mice reveal the menu on
   hover (gated media block below); touch devices get the same
   visuals via .is-open, toggled by /menu.js. */
.top-panel {
  position: fixed;
  inset: 0 0 auto;
  z-index: 25;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Single-layer cockpit panel — the .panel-bar is the chrome; .panel-logo
   and .panel-menu are both absolutely positioned children that crossfade
   on hover. The bar GROWS downward on hover (height transition) instead
   of translating — its top edge stays fixed at viewport y=0 so there's
   no gap between the browser top and the bar. Same 0.4s/easing as the
   crossfade — all three transitions ride one trigger. */
.top-panel .panel-bar {
  position: relative;
  width: min(1400px, 94vw);
  height: 55px;
  background:
    radial-gradient(
      150% 80% at 50% 100%,
      rgb(255 255 255 / 6%),
      transparent 50%
    ),
    linear-gradient(180deg, rgb(5 5 16 / 45%) 0%, rgb(0 0 0 / 55%) 100%);
  backdrop-filter: blur(20px) saturate(120%);
  border-bottom-left-radius: 1200px 100px;
  border-bottom-right-radius: 1200px 100px;
  box-shadow:
    0 8px 32px rgb(0 0 0 / 30%),
    inset 0 -1px 0 rgb(255 255 255 / 6%),
    inset 0 20px 40px rgb(0 0 0 / 30%);
  overflow: hidden;
  pointer-events: auto;

  /* The whole bar is a tap/click target for menu.js — the cursor
     telegraphs that on desktop, and older WebKit only synthesizes
     click events on elements it deems clickable. */
  cursor: pointer;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-panel:focus-within .panel-bar,
.top-panel.is-open .panel-bar {
  height: 70px;
}

.top-panel .panel-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  z-index: 5;
  pointer-events: auto;

  /* Matched 0.4s/easing with .panel-menu so the two crossfade as one
     motion (same trigger, same duration, same curve, same parent). */
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo fades out as the menu fades in. Pointer-events:none avoids the
   ghost-link state where the still-faded-out logo could intercept clicks
   meant for the menu items underneath — and .is-open leans on the same
   rule so the open logo can't be re-tapped on touch. */
.top-panel:focus-within .panel-logo,
.top-panel.is-open .panel-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
}

.top-panel .panel-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgb(255 107 0 / 20%));
  transition: filter 0.3s ease;
}

/* Slow bloom-in intro on the logo — parity with /tech's logo-intro
   keyframes (1s ease-out, opacity 0→1 + scale 0.8→1). Runs alongside
   the panel slide-down so the logo eases up into focus inside the
   descending bar rather than appearing at full size all at once. */
@media (prefers-reduced-motion: no-preference) {
  .top-panel .panel-logo-img {
    animation: logo-intro 1s ease-out 200ms both;
  }

  @keyframes logo-intro {
    from {
      opacity: 0;
      transform: scale(0.8);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* Stop the intro animation if the user hovers mid-flight — otherwise
   leaving and re-entering hover would restart the bloom. Filter dims
   slightly to telegraph "logo is fading out for the menu" the same way
   /tech does. */
.top-panel:focus-within .panel-logo-img,
.top-panel.is-open .panel-logo-img {
  animation: none !important;
  filter: drop-shadow(0 0 8px rgb(255 107 0 / 10%));
}

/* Orange curved accent line — cockpit signature */
.top-panel .panel-line {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1380px, 92vw);
  height: 100px;
  background: transparent;
  border-bottom: 2px solid var(--landing-cockpit-accent);
  border-bottom-left-radius: 1200px 100px;
  border-bottom-right-radius: 1200px 100px;
  mask-image: linear-gradient(
    90deg,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  filter: blur(0.5px) drop-shadow(0 0 8px rgb(255 107 0 / 50%))
    drop-shadow(0 0 20px rgb(255 149 0 / 30%));
  opacity: 0.54;
  pointer-events: none;
  z-index: 10;
}

/* Underglow halo below the panel — mirrored as ::after on the footer
   below so both ends of the page carry the same orange ambient. */
.top-panel .panel-glow {
  position: absolute;
  bottom: -10px;
  left: 20%;
  right: 20%;
  height: 20px;
  background: radial-gradient(
    ellipse at center,
    rgb(255 107 0 / 10%),
    transparent
  );
  filter: blur(10px);
}

/* Menu drifts in with a parallax — its translateY rides 8px on the
   same 0.4s timer as the bar's height growth (15px). Same direction,
   different rate: bar bottom drops 15px while menu text drops only
   8px, creating a depth-of-field feel between the chrome and the
   contents. Final anchor sits in the upper portion of the bar. */
.top-panel .panel-menu {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 4;
}

.top-panel:focus-within .panel-menu,
.top-panel.is-open .panel-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.top-panel .panel-menu-item {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: rgb(255 255 255 / 60%);
  padding: 0.25rem 0.75rem;
  font-family:
    Orbitron,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.top-panel .panel-menu-item:hover,
.top-panel .panel-menu-item:focus-visible {
  color: var(--landing-cockpit-accent);
  outline: none;
}

.top-panel .panel-menu-item.is-current {
  color: rgb(255 255 255 / 90%);
}

.top-panel .panel-menu-item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--landing-cockpit-accent),
    transparent
  );
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-panel .panel-menu-item:hover::after,
.top-panel .panel-menu-item:focus-visible::after,
.top-panel .panel-menu-item.is-current::after {
  transform: translateX(-50%) scaleX(1);
}

/* Desktop hover reveal — gated to real hover devices. iOS Safari
   emulates :hover on the first tap, which used to half-open the menu
   and swallow the logo tap; coarse pointers get the same visuals via
   .is-open (set by /menu.js). The :focus-within twins above stay
   unguarded so keyboard reveal works on every device. */
@media (hover: hover) and (pointer: fine) {
  .top-panel:hover .panel-bar {
    height: 70px;
  }

  .top-panel:hover .panel-logo {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
  }

  .top-panel:hover .panel-logo-img {
    animation: none !important;
    filter: drop-shadow(0 0 8px rgb(255 107 0 / 10%));
  }

  .top-panel:hover .panel-menu {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* Narrow hover-capable windows get the stacked menu too (the column
     layout below is width-driven); measured open height with fallback. */
  @media (width <= 640px) {
    .top-panel:hover .panel-bar {
      height: var(--panel-open-height, 230px);
    }
  }
}

/* Entry animation — slides in once, no boot-state coupling */
@media (prefers-reduced-motion: no-preference) {
  .top-panel {
    transform: translateY(-110%);
    animation: top-panel-enter 1.1s cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
  }

  @keyframes top-panel-enter {
    to {
      transform: translateY(0);
    }
  }
}

@media (width <= 768px) {
  .top-panel .panel-bar {
    height: 45px;
  }

  .top-panel .panel-logo {
    width: 26px;
    height: 26px;
  }
}

/* iPad-class touch in the horizontal row (641px+): the ~22px-tall
   links need a 44px finger target. An invisible ::before pad extends
   each link's hit area without moving the underline or growing the
   bar. Row only — the column below gives items real height instead. */
@media (pointer: coarse) and (width > 640px) {
  .top-panel .panel-menu-item::before {
    content: '';
    position: absolute;
    inset: -11px 0;
  }
}

/* Phone-width open state: the row would crowd <=640px, so the menu
   stacks. Column layout is width-driven (not .is-open-driven) so
   menu.js can measure the stacked height while the menu is still
   invisible. height: auto can't transition, so the open bar height
   rides --panel-open-height — measured per page by menu.js so the
   link count can vary; the four-link fallback covers the no-JS
   :focus-within path. */
@media (width <= 640px) {
  .top-panel .panel-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(320px, 80vw);
  }

  .top-panel .panel-menu-item {
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }

  /* Inside a 44px-tall item the -4px underline would cross into the
     next link; tuck it just under the label instead. */
  .top-panel .panel-menu-item::after {
    bottom: 5px;
  }

  .top-panel:focus-within .panel-bar,
  .top-panel.is-open .panel-bar {
    height: var(--panel-open-height, 230px);
  }
}

/* Print — fixed chrome has no place on paper. */
@media print {
  .top-panel {
    display: none;
  }
}