/* The 3D ball canvas, its dock, route ghost layer and the first-visit intro. */

#ball-canvas {
  position: fixed; left: 0; top: 0; z-index: 25;
  pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease-out);
}
.has-3d-ball #ball-canvas { opacity: 1; }
.has-3d-ball .ball-static { opacity: 0; animation: none; }
.has-3d-ball .ball-slot::after { display: none; }

/* Dock: hit area for the ball on pages without a hero slot */
.ball-dock {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 26;
  width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0; background: transparent;
  pointer-events: none; visibility: hidden; -webkit-tap-highlight-color: transparent;
}
.has-3d-ball.dock-on .ball-dock { pointer-events: auto; visibility: visible; }
.ball-dock:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (max-width: 1099px) {
  .ball-dock { width: 56px; height: 56px; right: 14px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px); }
}

/* Old page while the ball unrolls the new one */
.route-ghost { position: fixed; z-index: 1; pointer-events: none; }

/* ---- Intro ---- */
.intro { display: none; }
.intro-pending .intro { display: block; position: fixed; inset: 0; z-index: 95; cursor: pointer; overflow: hidden; }
.intro-running #ball-canvas { z-index: 110; opacity: 1; }
.intro__half {
  position: absolute; inset: 0; background:
    radial-gradient(70vmax 50vmax at 50% 110%, rgba(var(--accent-rgb), .12), transparent 60%), #030303;
  will-change: transform;
}
.intro__crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro__radial path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); }
.intro__main { stroke: #FFE7B0; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 6px #FFC15A) drop-shadow(0 0 22px rgba(255, 193, 90, .85)); }
.intro__b { position: absolute; opacity: 0; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 40px rgba(255, 193, 90, .45)); will-change: transform; }
.intro__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }
.intro__skip {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3);
}

/* Particle canvas (match events, crest reveals): fixed overlay, never in the flow */
.dot-canvas { position: fixed; left: 0; top: 0; z-index: 85; pointer-events: none; }

/* Keep the ball live during the brand wave: it is never part of the frozen page snapshot */
#ball-canvas { view-transition-name: ball; }
::view-transition-group(ball) { animation: none; z-index: 2; }
::view-transition-old(ball) { display: none; }
::view-transition-new(ball) { animation: none; }