/* 3D scene: canvas container, hover tooltip and current-station label.
   Every rule lives in the `components` layer (see SPEC.md §7). */
@layer components {
  #scene {
    position: fixed;
    inset: 0;
    z-index: var(--z-scene);
    pointer-events: auto;
    overflow: hidden;
    touch-action: none;
    /* Fallback shown until WebGL paints (and when WebGL is unavailable). */
    background:
      radial-gradient(60% 55% at 62% 46%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
      radial-gradient(40% 40% at 20% 80%, color-mix(in oklab, var(--accent-2) 16%, transparent), transparent 70%),
      var(--bg-0);
  }

  #scene > .sc-canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  #scene > .sc-canvas:active {
    cursor: grabbing;
  }

  #scene.sc-pick > .sc-canvas {
    cursor: pointer;
  }

  /* The shell hides the globe outside the Globe tab on mobile; car mode covers it. */
  :root[data-scene='hidden'] #scene,
  :root[data-mode='car'] #scene {
    visibility: hidden;
    pointer-events: none;
  }

  /* Ambient mode is hands-off: the overlay owns the input. */
  :root[data-mode='ambient'] #scene > .sc-canvas {
    cursor: default;
  }

  /* ------------------------------------------------------------ Hover tooltip */

  .sc-tip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--z-tooltip);
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease-out);
    will-change: transform;
  }

  .sc-tip.is-on {
    opacity: 1;
  }

  .sc-tip__box {
    position: absolute;
    left: 0;
    top: 0;
    width: max-content;
    max-width: min(260px, 70vw);
    translate: 16px 16px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    box-shadow: var(--shadow-1), 0 0 22px -8px var(--accent-glow);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-tight);
  }

  .sc-tip__box.is-flip-x {
    translate: calc(-100% - 16px) 16px;
  }

  .sc-tip__box.is-flip-y {
    translate: 16px calc(-100% - 16px);
  }

  .sc-tip__box.is-flip-x.is-flip-y {
    translate: calc(-100% - 16px) calc(-100% - 16px);
  }

  .sc-tip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .sc-tip__sub {
    margin-top: var(--sp-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wide);
  }

  .sc-tip__sub[hidden] {
    display: none;
  }

  /* ------------------------------------------------- Current station label */

  .sc-label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--dur-2) var(--ease-out);
    will-change: transform;
  }

  .sc-label[hidden] {
    display: none;
  }

  .sc-label.is-hidden {
    opacity: 0;
  }

  /* Box sits above the beam tip; the ::after tick links it to the beam. */
  .sc-label__box {
    position: absolute;
    left: 0;
    bottom: 10px;
    translate: -50% 0;
    width: max-content;
    max-width: min(240px, 60vw);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--surface-strong) 82%, transparent);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    box-shadow: 0 0 24px -8px var(--accent-glow);
    text-align: center;
    font-family: var(--font-mono);
    line-height: var(--lh-tight);
  }

  .sc-label__box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 10px;
    background: linear-gradient(to bottom, var(--accent), transparent);
  }

  .sc-label__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .sc-label__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wide);
  }

  .sc-label__sub:empty {
    display: none;
  }

  /* --------------------------------------------------------- Reduced motion */

  @media (prefers-reduced-motion: reduce) {
    .sc-tip,
    .sc-label {
      transition: none;
    }
  }

  :root[data-reduce-motion] .sc-tip,
  :root[data-reduce-motion] .sc-label {
    transition: none;
  }
}