/* ============================================================================
   motion.css — Phase R10 — cross-pane motion polish.

   Two cooperating layers:

   1. View Transitions API — ::view-transition-* pseudo-elements drive a
      crossfade + slight slide between panes when the browser supports
      document.startViewTransition() (Chrome 111+, Edge 111+, Safari 18+).
      The router wraps its show/hide in startViewTransition() with a
      feature gate; this CSS controls the visual.

   2. Rainbow nav accent — bottom + side nav now reads as the seven-color
      identity of each destination. Active item glows with the destination
      pane's accent and gets a subtle background tint that matches.

   Reduced-motion path: the ::view-transition-* keyframes are short and
   gentle, but a prefers-reduced-motion:reduce override drops them
   entirely so the user gets an instant cut.
   ========================================================================= */

/* ── View Transitions ─────────────────────────────────────────────── */

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.2, 0, 0.1, 1);
}

::view-transition-old(root) {
    animation-name: y-fade-slide-out;
}
::view-transition-new(root) {
    animation-name: y-fade-slide-in;
}

@keyframes y-fade-slide-out {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-12px); }
}
@keyframes y-fade-slide-in {
    0%   { opacity: 0; transform: translateX(12px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* ── Rainbow nav accents ──────────────────────────────────────────── */

/* Per-color tinting for hover / active states. The global #shell-nav
   markup uses [data-color="<name>"] on each nav-item; this layers on
   top of the existing app.css .nav-item base. */

.nav-item[data-color="red"]    { --nav-tint: 255, 107, 107; }
.nav-item[data-color="orange"] { --nav-tint: 255, 157,  61; }
.nav-item[data-color="yellow"] { --nav-tint: 245, 197,  24; }
.nav-item[data-color="green"]  { --nav-tint:  74, 214, 130; }
.nav-item[data-color="blue"]   { --nav-tint:  47, 135, 245; }
.nav-item[data-color="indigo"] { --nav-tint: 184, 150, 255; }
.nav-item[data-color="violet"] { --nav-tint: 180, 120, 255; }

.nav-item[data-color]:hover .nav-i {
    filter: drop-shadow(0 0 8px rgba(var(--nav-tint), 0.55));
}
.nav-item[data-color].active {
    color: rgb(var(--nav-tint));
}
.nav-item[data-color].active .nav-i {
    filter: drop-shadow(0 0 10px rgba(var(--nav-tint), 0.65));
    transform: translateY(-1px);
}

@media (min-width: 600px) {
    .nav-item[data-color].active {
        background: rgba(var(--nav-tint), 0.10);
        border: 1px solid rgba(var(--nav-tint), 0.32);
    }
}

/* The shell header tints itself based on the current pane via a JS-set
   data-color attribute on the shell, so the corner of the screen carries
   the rainbow even before the user looks at the active nav glyph. */
.shell[data-active-color="red"]    .shell-header { box-shadow: inset 0 -1px 0 rgba(255, 107, 107, 0.32); }
.shell[data-active-color="orange"] .shell-header { box-shadow: inset 0 -1px 0 rgba(255, 157,  61, 0.32); }
.shell[data-active-color="yellow"] .shell-header { box-shadow: inset 0 -1px 0 rgba(245, 197,  24, 0.32); }
.shell[data-active-color="green"]  .shell-header { box-shadow: inset 0 -1px 0 rgba( 74, 214, 130, 0.32); }
.shell[data-active-color="blue"]   .shell-header { box-shadow: inset 0 -1px 0 rgba( 47, 135, 245, 0.32); }
.shell[data-active-color="indigo"] .shell-header { box-shadow: inset 0 -1px 0 rgba(184, 150, 255, 0.32); }
.shell[data-active-color="violet"] .shell-header { box-shadow: inset 0 -1px 0 rgba(180, 120, 255, 0.32); }

/* ── Hoisted YAvatar — view-transition-name pairing (Phase R-polish) ──
   Each per-pane avatar host (Home / Chat / Contacts / Sphere1 / Twin
   / Settings) carries the SAME view-transition-name. Because only one
   pane is visible at a time, the browser auto-pairs the old + new
   instances across document.startViewTransition() and morphs the
   avatar between positions (slide + scale) instead of crossfade-redraw.
   Falls through to a no-op everywhere the API isn't supported.

   The Call pane's csi-orb / cso-orb / csa-orb avatars show the PEER's
   identity, not the user's — they're deliberately excluded. */
.h-avatar-host,
.ch-avatar-host,
.c-avatar-host,
.s1-avatar-host,
.t-avatar-host,
.s-avatar-host {
    view-transition-name: y-avatar;
    contain: layout paint;
}

::view-transition-old(y-avatar),
::view-transition-new(y-avatar) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* ── Reduced-motion enforcement ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(y-avatar),
    ::view-transition-new(y-avatar) {
        animation: none !important;
    }
    .nav-item[data-color].active .nav-i { transform: none; }
}