/* orb.css — Aura voice orb
   ---------------------------------------------------------------------------
   The orb is a single Canvas-2D surface (AuraOrb.svelte): five additive
   colour lobes drifting on lissajous orbits inside a clipped sphere, with a
   volumetric halo, amplitude-fed core, and a countdown ring on the rim.
   Conversation state lives ENTIRELY in the canvas's motion + colour — there
   are no state classes, ripple elements, or equalizer bars any more, and no
   words anywhere (THE ONE LAW is unaffected).

   This file owns only LAYOUT: --orb-size (hero size + responsive/portrait
   overrides, consumed by .aura-stage) and the compact companion mode. The
   canvas resizes itself via ResizeObserver. */

:root {
  /* Idle hero size — the visible sphere IS --orb-size (the canvas paints its
     halo inside the same box). Height term leaves room for the brand row
     above and captions below.
     vh (not dvh) on purpose: custom properties can't use the declare-twice
     dvh fallback; the orb centers in a flexible grid row so vh drift on
     mobile only shifts decorative bleed (see core.css .app.chat-visible). */
  --orb-size: min(40rem, 66vmin, calc(100vh - 18rem));
}

.orb-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Guided-form mode: the orb becomes a small companion. It stays in the
   .center-content grid item (the flexible orb-band row of the .main-screen
   grid, core.css), which sits BETWEEN the form row and the chat row — so the
   grid centers it in the clear band by construction. It keeps animating and
   listening; the shrink is one smooth GPU transform. */
.orb-container--compact {
  margin: 0;
  /* One-off layer between --z-cards (10) and --z-chips (100), kept so the
     companion orb's halo paints over the form/chat edges. */
  z-index: 45;
  pointer-events: none;
  animation: orb-to-band 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes orb-to-band {
  from {
    transform: translateY(-26vh) scale(5);
    opacity: 0.55;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb-container--compact {
    animation: none;
  }
}

/* Stage: the box the canvas fills. Sized by --orb-size (inline-overridden to
   the compact size while the guided form is open). NOTE: a full-viewport
   "field avatar" stage was tried here and reverted — a fixed stage inside
   .center-content is trapped in its stacking context and paints over the
   UI; see FIELD_AVATARS in src/lib/kiosk/avatars/index.ts. */
.aura-stage {
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The canvas paints sphere + halo + countdown ring; the gaze-parallax
   transform is applied inline by AuraOrb (smoothed in JS — no transition). */
.aura-canvas {
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}

/* =====================================================================
   Responsive + portrait sizing — only --orb-size changes; the canvas
   follows via ResizeObserver. Widths use the px breakpoint system (see the
   canonical set documented in core.css); 800px is the legacy 50rem step
   kept this phase so the orb doesn't jump — fold into 900px later.
   ===================================================================== */
@media (max-width: 1280px) {
  :root {
    --orb-size: min(30rem, 66vmin);
  }
}

@media (max-width: 800px) {
  :root {
    --orb-size: min(22rem, 64vmin);
  }
}

@media (max-width: 480px) {
  :root {
    --orb-size: min(16rem, 62vmin);
  }
}

/* Portrait kiosks / tablets — the sphere fills the width while its halo stays
   just inside both edges. The vh term keeps it clear of the top brand row and
   the bottom captions on shorter (4:3) portrait screens. Placed last so it
   overrides the breakpoints above. */
@media (orientation: portrait) {
  :root {
    --orb-size: min(70vw, 82vh);
  }

  /* During a conversation the info bar (top) + captions (bottom) share the
     screen, so the sphere shrinks to sit centred between them. Higher
     specificity than :root, so it is re-declared here to beat the landscape
     rule in core.css. */
  .app.chat-visible {
    --orb-size: min(54vw, 36vh);
  }
}