/* Shared entrance animations + interaction layer for ProjBase — linked in every
   page's <head> so it applies before first paint (no flash).

   1. Entrance: sections glide up and fade in with a light spring + stagger;
      cards inside grids/strips/wraps cascade individually.
   2. Interactions: every button/card/row gets "clicky" press feedback — an
      instant scale-down on press, springy release — plus springier dialogs,
      menus, toasts and toggle knobs. Selectors are prefixed with `html body`
      so they win over each page's inline <style> (which loads after this file).

   Uses only transform + opacity (compositor-friendly — no blur/will-change) so
   it stays smooth. Fully disabled when the user prefers reduced motion. */

:root {
  --pb-spring: cubic-bezier(0.32, 1.35, 0.5, 1);   /* gentle overshoot */
  --pb-bounce: cubic-bezier(0.3, 1.6, 0.5, 1);     /* pronounced overshoot (small knobs) */
}

@media (prefers-reduced-motion: no-preference) {
  .main > *,
  .grid > *, .strip > *, .wrap > * {
    animation: pbReveal 0.42s cubic-bezier(0.3, 1.25, 0.45, 1) both;
  }

  /* Containers that hold cards: don't animate the box — cascade its cards. */
  .main > .grid, .main > .strip, .main > .wrap { animation: none; }

  .main > *:nth-child(1) { animation-delay: 0.00s; }
  .main > *:nth-child(2) { animation-delay: 0.04s; }
  .main > *:nth-child(3) { animation-delay: 0.08s; }
  .main > *:nth-child(4) { animation-delay: 0.12s; }
  .main > *:nth-child(5) { animation-delay: 0.16s; }
  .main > *:nth-child(n+6) { animation-delay: 0.20s; }

  .grid > *:nth-child(1), .strip > *:nth-child(1), .wrap > *:nth-child(1) { animation-delay: 0.08s; }
  .grid > *:nth-child(2), .strip > *:nth-child(2), .wrap > *:nth-child(2) { animation-delay: 0.13s; }
  .grid > *:nth-child(3), .strip > *:nth-child(3), .wrap > *:nth-child(3) { animation-delay: 0.18s; }
  .grid > *:nth-child(4), .strip > *:nth-child(4), .wrap > *:nth-child(4) { animation-delay: 0.23s; }
  .grid > *:nth-child(n+5), .strip > *:nth-child(n+5), .wrap > *:nth-child(n+5) { animation-delay: 0.27s; }

  /* ---- Clicky press feedback -------------------------------------------
     Base state: one comprehensive transition (covers every property the page
     styles animate, so overriding `transition` here never kills a page's
     background/color fade). Press: all durations collapse to ~0 for an
     instant, tactile snap; release springs back on the base curve. */
  html body .btn, html body .tool, html body .icon-btn,
  html body .seg button, html body .viewseg button, html body .seg-mini .mini,
  html body .range, html body .cal-nav button, html body .rail a,
  html body .spill, html body .subtoggle, html body .statuspill,
  html body .cs-btn, html body .ap-add-client, html body .back,
  html body .ms .act, html body .status-menu button,
  html body .proj, html body .prow, html body .inv, html body .ccard,
  html body .subrow, html body .cl {
    transition:
      transform 0.26s var(--pb-spring),
      box-shadow 0.26s var(--pb-spring),
      background 0.16s ease, background-color 0.16s ease,
      color 0.16s ease, border-color 0.16s ease,
      filter 0.16s ease, opacity 0.16s ease;
  }

  /* Small controls press a touch deeper than big cards. */
  html body .btn:active, html body .tool:active, html body .icon-btn:active,
  html body .seg button:active, html body .viewseg button:active,
  html body .seg-mini .mini:active, html body .range:active,
  html body .cal-nav button:active, html body .rail a:active,
  html body .spill:active, html body .subtoggle:active,
  html body .statuspill:active, html body .cs-btn:active,
  html body .ap-add-client:active, html body .back:active,
  html body .ms .act:active, html body .status-menu button:active {
    transform: scale(0.94);
    transition-duration: 0.045s;
  }
  html body .proj:active, html body .prow:active, html body .inv:active,
  html body .ccard:active, html body .subrow:active, html body .cl:active {
    transform: scale(0.98);
    transition-duration: 0.05s;
  }

  /* Subtle lift on hover for pill/round buttons (cards already lift via
     their own page styles; this only adds transform where pages don't). */
  html body .btn:hover, html body .icon-btn:hover { transform: translateY(-1px); }
  html body .btn:active, html body .icon-btn:active { transform: translateY(0) scale(0.95); }

  /* Disabled controls stay put — no lift, no press. */
  html body .btn:disabled, html body .btn[disabled],
  html body .ms .act:disabled, html body .ms .act[disabled] { transform: none !important; }

  /* Checkboxes (checklist items, switches) get a quick squeeze on press. */
  html body input[type="checkbox"] { transition: transform 0.24s var(--pb-bounce); }
  html body input[type="checkbox"]:active { transform: scale(0.82); transition-duration: 0.045s; }

  /* Toggle switch: bouncy knob, smooth track tint. */
  html body .switch .track { transition: background 0.22s ease; }
  html body .switch .track::after { transition: transform 0.32s var(--pb-bounce); }

  /* Dialogs: springier pop-in (overrides each page's apPop/mPop). */
  html body dialog[open], html body dialog.modal[open] {
    animation: pbDialogIn 0.34s var(--pb-spring);
  }
  html body dialog[open]::backdrop, html body dialog.modal[open]::backdrop {
    animation: pbBackdropIn 0.24s ease;
  }

  /* Status dropdown (project detail): springy drop with a hint of scale. */
  html body .status-menu {
    transform: translateY(-8px) scale(0.97);
    transform-origin: top left;
    transition: opacity 0.16s ease, transform 0.28s var(--pb-spring), visibility 0.16s;
  }
  html body .statuswrap.open .status-menu { transform: translateY(0) scale(1); }

  /* Toasts: slide up with a slight overshoot instead of a flat fade. */
  html body .toast {
    transition: opacity 0.2s ease, transform 0.38s cubic-bezier(0.3, 1.45, 0.55, 1);
  }

  /* Progress bars: springy fill. */
  html body .pbar > i, html body .mprog .bar > i {
    transition: width 0.5s cubic-bezier(0.25, 1, 0.35, 1);
  }
}

@keyframes pbReveal {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes pbDialogIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes pbBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Layout guard: grid/flex children default to min-width:auto, letting wide
   content (donut legends, calendars, long rows) force a column wider than the
   screen — which swallows the page's right padding on phones. Making them
   shrinkable keeps every card inside the viewport. */
.grid > *, .right > *, .wrap > *, .col > *, .cgrid > * { min-width: 0; }

/* Mobile top bar (the rail goes horizontal at <=680px — see each page's inline
   rules): logo pinned left, nav icons centered, settings pinned right. */
@media (max-width: 680px) {
  .rail { justify-content: center; position: relative; }
  .rail .logo { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin-bottom: 0; }
  .rail .sp { display: none; }
  .rail a[href="settings.html"] { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  /* The pinned items position themselves with translateY(-50%) — the generic
     press-scale above must not clobber that or they'd jump on tap. */
  .rail a.logo:active, .rail .logo:active { transform: translateY(-50%) scale(0.92) !important; }
  .rail a[href="settings.html"]:active { transform: translateY(-50%) scale(0.92) !important; }
}
