/* BatteryCheck — shared motion primitives derived from Emil Kowalski's skills.
   Loaded in every page. Variables + accessibility + hover gating + base tactile feedback. */

:root{
  /* Strong custom easings (built-in CSS easings are too weak) */
  --ease-out:     cubic-bezier(0.23, 1,    0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0,    0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0,    1);
  /* Crisp dashboard personality — keep durations under 300ms */
  --d-button:  160ms;
  --d-tooltip: 160ms;
  --d-select:  200ms;
  --d-modal:   240ms;
}

/* ── Tactile button feedback ─────────────────────────────────────────
   Any .btn / .act / .pill press scales subtly. Subtle (0.95–0.98).
   Targets transform only (GPU-only, off main thread). */
.btn, .act, .pill, .lang-pill, button.shutter, .startBtn, .send-btn{
  transition: transform var(--d-button) var(--ease-out),
              background-color var(--d-button) var(--ease-out),
              border-color    var(--d-button) var(--ease-out),
              color           var(--d-button) var(--ease-out);
}
.btn:active, .act:active, .pill:active, .lang-pill:active,
button.shutter:active, .startBtn:active, .send-btn:active{
  transform: scale(0.97);
}

/* ── Hover gating — never trigger on touch ─────────────────────────── */
@media (hover: hover) and (pointer: fine){
  .btn:not(.primary):hover{ background:#ffffff1a }
}

/* ── Modal entrance — uses @starting-style so display:none→flex animates ──
   Modal origin stays centered (modals are exempt from trigger-origin rule). */
.mask{
  transition: opacity var(--d-modal) var(--ease-out),
              display var(--d-modal) allow-discrete;
}
.mask.show{ opacity: 1 }
@starting-style{ .mask.show{ opacity: 0 } }
.modal{
  transform-origin: center;
  transition: transform var(--d-modal) var(--ease-out),
              opacity   var(--d-modal) var(--ease-out);
}
.mask.show .modal{ transform: scale(1); opacity: 1 }
@starting-style{ .mask.show .modal{ transform: scale(0.96); opacity: 0 } }
/* Bottom-sheet drawers (chat composer/inbox) slide up — drawer easing curve */
.msg-mask .msg-sheet{
  transition: transform 280ms var(--ease-drawer);
}
.msg-mask.show .msg-sheet{ transform: translateY(0) }
@starting-style{ .msg-mask.show .msg-sheet{ transform: translateY(100%) } }

/* ── Stagger entrance for vertical lists ──────────────────────────
   Apply by adding .stagger to the parent. Children fade+rise with 40ms delay. */
.stagger > *{
  opacity: 0;
  transform: translateY(6px);
  animation: bc-stagger 280ms var(--ease-out) forwards;
}
.stagger > *:nth-child(1){ animation-delay:  0ms }
.stagger > *:nth-child(2){ animation-delay: 40ms }
.stagger > *:nth-child(3){ animation-delay: 80ms }
.stagger > *:nth-child(4){ animation-delay:120ms }
.stagger > *:nth-child(5){ animation-delay:160ms }
.stagger > *:nth-child(6){ animation-delay:200ms }
.stagger > *:nth-child(n+7){ animation-delay:240ms }
@keyframes bc-stagger{
  to { opacity: 1; transform: translateY(0); }
}

/* ── Lightbox: subtle fade with custom curve ─────────────────────── */
.lightbox{ transition: opacity var(--d-modal) var(--ease-out) }
.lightbox:not(.show){ opacity: 0; pointer-events: none }
.lightbox.show{ opacity: 1 }
.lightbox img{ transition: transform var(--d-modal) var(--ease-out) }
.lightbox:not(.show) img{ transform: scale(0.97) }

/* ── Tabbar switch — subtle pop on active tab ───────────────────── */
.tabbar button{ transition: color 140ms var(--ease-out) }
.tabbar button.on .ico{ animation: bc-tab-pop 220ms var(--ease-out) }
@keyframes bc-tab-pop{
  0%   { transform: scale(0.92) }
  60%  { transform: scale(1.06) }
  100% { transform: scale(1)    }
}

/* ── Reduced motion — keep opacity/color, drop movement ──────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-property: opacity, background-color, color, border-color !important;
  }
  .btn:active, .act:active, .pill:active, .lang-pill:active,
  .shutter:active, .startBtn:active, .send-btn:active{
    transform: none;
  }
}