/* ════════════════════════════════════════════════════════════════════
   nav-hold-drag.css - lift + slide styling for the bottom-nav reorder
   gesture (src/shared/nav-hold-drag.js, TODO #92).

   Scoped to .bb-mobile-nav so it never bleeds into other surfaces. Pure
   transform/opacity/shadow - GPU-composited, no layout-affecting props.
   Loaded by pages/app.html alongside the JS; harmless on pages without
   the gesture (the classes only appear while a drag is active).
   ════════════════════════════════════════════════════════════════════ */

/* ── Press-DOWN "arming" state (the instant the finger lands) ────────────
   iOS gives crisp feedback the MOMENT you touch, well before the long-press
   resolves. The base .bb-mobile-tab:active squash (shared-prototype.css) is
   tuned for a tap: a 260ms overshoot transition, which reads as slow + bouncy
   on first contact. nav-hold-drag.js adds .is-arming on pointerdown so the
   press-down here is its OWN fast curve: it snaps DOWN quickly (90ms, no
   overshoot) then, as the hold timer runs, the tab settles to a slightly
   raised, brighter "about to pick up" pose. The JS removes .is-arming the
   instant it promotes to .is-lifted (or the moment the press is released /
   cancelled), so this never lingers. Transform/opacity only -> GPU-cheap. */
.bb-mobile-nav .bb-mobile-tab.is-arming{
  /* Override the base 260ms-overshoot transition: a quick press-in, then a
     calmer settle as the hold builds. Two phases share one fast curve so the
     finger gets an immediate response, not a slow spring. */
  transition:transform 90ms cubic-bezier(.4,0,.2,1), color 90ms ease;
  /* Brighten the label immediately so the touched tab clearly reads as the
     target, like an iOS row highlighting under the finger. */
  color:#FFFFFF;
  /* The press-in squash. Slightly deeper than the tap squash (0.94) so the
     hold feels "heavier" than a tap, signalling a different gesture is arming.
     The lift keyframe below takes over once the hold fires. */
  animation:bbNavArm var(--bb-nav-hold-ms, 400ms) cubic-bezier(.4,0,.2,1) forwards;
}
.bb-mobile-nav .bb-mobile-tab.is-arming svg{
  color:var(--bb-cyan, #69FEFF);
  transition:color 90ms ease, transform 90ms cubic-bezier(.4,0,.2,1);
}
/* Arming curve: snap down on contact, then ease back UP past rest into a
   subtly raised pose over the hold window so the tab visibly "loads" toward
   the pickup. Pure scale -> compositor-only. */
@keyframes bbNavArm{
  0%   { transform:scale(0.93); }
  22%  { transform:scale(0.95); }
  100% { transform:scale(1.04); }
}

/* While a reorder is in flight, the bar lets the lifted tab float above the
   others and gives the SLIDING tabs a smooth settle. The lifted tab itself
   must NOT carry a transition on transform (it has to track the finger 1:1) -
   so the transition only applies to siblings via :not(.is-lifted). */
.bb-mobile-nav.is-reordering .bb-mobile-tab:not(.is-lifted){
  /* The JS shifts siblings with translateX; ease them into the open slot. */
  transition:transform 220ms cubic-bezier(.2,.8,.2,1);
  /* Dim siblings a touch so the lifted tab clearly reads as "picked up". */
  opacity:0.82;
}

/* The picked-up tab: lifts above the bar, scales slightly, gains a soft
   shadow + a cyan-tinted glass plate so it reads as detached from the surface.
   The JS owns its transform (translateX + scale) so we don't set transform
   here - only the look. */
.bb-mobile-nav .bb-mobile-tab.is-lifted{
  z-index:5;
  cursor:grabbing;
  /* The lift "pop": the moment the hold fires the tab springs up off the bar.
     The JS sets the lift transform (scale 1.14) inline on lift() WITH this
     transition still active, so the pickup animates over one short spring
     (180ms with a gentle overshoot, the iOS home-screen "jiggle pickup"
     feel). On the very next pointermove the JS swaps to .is-dragging-tab
     (below) which kills the transform transition so the tab then tracks the
     finger 1:1 with zero lag. filter + box-shadow always animate. */
  transition:
    transform 180ms cubic-bezier(.34,1.4,.5,1),
    filter 160ms ease,
    box-shadow 160ms ease;
  color:#FFFFFF;
  /* A frosted plate under the lifted tab so it visibly floats off the bar. */
  background:
    linear-gradient(180deg, rgba(105, 254, 255, 0.22), rgba(105, 254, 255, 0.10)),
    rgba(9, 28, 53, 0.35);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  backdrop-filter:blur(8px) saturate(160%);
  border-radius:16px;
  box-shadow:
    0 10px 26px rgba(9, 28, 53, 0.45),
    0 2px 8px rgba(105, 254, 255, 0.30),
    inset 0 0 0 1px rgba(105, 254, 255, 0.30);
}
.bb-mobile-nav .bb-mobile-tab.is-lifted svg{
  color:var(--bb-cyan, #69FEFF);
  filter:drop-shadow(0 2px 6px rgba(105, 254, 255, 0.45));
  transform:none; /* keep the icon steady; the whole tab already scales */
}
/* Once the finger starts dragging, the tab must follow the pointer with zero
   lag, so the spring transition on transform is removed. The JS adds this the
   first time the pointer moves after a lift (cosmetic filter/shadow keep their
   transition since they don't fight the finger). */
.bb-mobile-nav .bb-mobile-tab.is-lifted.is-dragging-tab{
  transition:filter 160ms ease, box-shadow 160ms ease;
}

/* Suppress the per-tab :active squash while reordering so a sibling that the
   pointer crosses does not flash the press state. */
.bb-mobile-nav.is-reordering .bb-mobile-tab:active{ transform:none; }

/* Hint that a press-and-hold is grabbable (pointer devices only - touch has no
   cursor). Applies at rest so the affordance is discoverable. */
@media (hover:hover) and (pointer:fine){
  .bb-mobile-nav .bb-mobile-tab{ cursor:grab; }
}

/* Reduced motion: drop the sibling slide easing (they still move to the right
   slot, just instantly) and the lift scale animation. The JS still reorders +
   persists; only the in-between motion is removed. */
@media (prefers-reduced-motion: reduce){
  .bb-mobile-nav.is-reordering .bb-mobile-tab:not(.is-lifted){
    transition:none;
  }
  .bb-mobile-nav .bb-mobile-tab.is-lifted{
    transition:none;
  }
  /* Drop the press-DOWN arming animation (the tab still gets picked up + the
     haptic still fires; only the in-between scale motion is suppressed). */
  .bb-mobile-nav .bb-mobile-tab.is-arming{
    animation:none;
    transition:color 90ms ease;
    transform:none;
  }
}