/* =============================================================
   ANIMATIONS.CSS — Protherm Premium Motion System
   Stripe flashlight · 3D tilt · Stagger · Skeleton · Ripple
   Floating labels · Scroll reveal · Counter · Progress bar
   ============================================================= */

/* ─── KEYFRAMES ─────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.95) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes shimmer {
  0%   { background-position:-800px 0; }
  100% { background-position: 800px 0; }
}
@keyframes navProgress {
  0%   { transform:scaleX(0); opacity:1; }
  85%  { transform:scaleX(0.9); opacity:1; }
  100% { transform:scaleX(1); opacity:0; }
}
@keyframes rippleOut {
  0%   { transform:scale(0); opacity:0.45; }
  100% { transform:scale(5); opacity:0; }
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-6px) scale(0.99); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toastIn {
  from { opacity:0; transform:translateX(20px) scale(0.96); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes pulseRed {
  0%,100% { opacity:1; box-shadow:none; }
  50%     { opacity:0.7; box-shadow:0 0 12px rgba(220,38,38,0.35); }
}
@keyframes countUp {
  from { opacity:0; transform:translateY(8px) scale(0.8); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes expandLine {
  from { width:0; opacity:0; }
  to   { width:100%; opacity:1; }
}
@keyframes borderSpin {
  to { --border-angle:360deg; }
}
@keyframes badgePop {
  0%   { transform:scale(0); }
  70%  { transform:scale(1.15); }
  100% { transform:scale(1); }
}

/* ─── NAV PROGRESS BAR ──────────────────────────────────────── */
/* Inject <div id="navProgress" class="nav-progress"> in layout */

.nav-progress {
  position:fixed; top:0; left:0; right:0;
  height:2.5px; z-index:9999; pointer-events:none;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--accent) 0%,#7c3aed 50%,#06b6d4 100%);
  animation:navProgress 0.7s cubic-bezier(.4,0,.2,1) both;
  box-shadow:0 0 10px rgba(37,99,235,0.5), 0 0 4px rgba(124,58,237,0.4);
}

/* ─── STAGGER REVEAL ─────────────────────────────────────────── */

.stagger-item {
  opacity:0;
  animation:fadeUp 0.42s cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(var(--i,0) * 55ms + 60ms);
}

/* Letter sections */
.letterSection {
  opacity:0;
  animation:fadeUp 0.38s cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(var(--i,0) * 80ms + 40ms);
}

/* ─── SKELETON SHIMMER ───────────────────────────────────────── */

.skeleton-line {
  background:linear-gradient(90deg,
    var(--surface-3) 25%,
    rgba(226,230,240,0.8) 50%,
    var(--surface-3) 75%
  );
  background-size:800px 100%;
  animation:shimmer 1.5s infinite linear;
  border-radius:var(--r-pill);
}

.pCard-skel {
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  animation:fadeIn 0.3s ease both;
}
.pCard-skel .sk-img {
  height:160px;
  background:linear-gradient(90deg,var(--surface-3) 25%,rgba(226,230,240,0.8) 50%,var(--surface-3) 75%);
  background-size:800px 100%;
  animation:shimmer 1.5s infinite linear;
}
.pCard-skel .sk-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.pCard-skel .sk-line {
  height:11px;
  background:linear-gradient(90deg,var(--surface-3) 25%,rgba(226,230,240,0.8) 50%,var(--surface-3) 75%);
  background-size:800px 100%;
  animation:shimmer 1.5s infinite linear;
  border-radius:var(--r-pill);
}
.pCard-skel .sk-short { width:60%; }
.pCard-skel .sk-xshort { width:38%; }

/* ─── STRIPE FLASHLIGHT BORDER ───────────────────────────────── */
/* JS sets --mx and --my as percentages on each .pCard */

.pCard {
  --mx:50%;
  --my:50%;
  position:relative;
}

/* The animated border layer */
.pCard::after {
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background:radial-gradient(
    180px circle at var(--mx) var(--my),
    rgba(37,99,235,0.22) 0%,
    transparent 70%
  );
  opacity:0;
  transition:opacity 0.25s ease;
  pointer-events:none;
  z-index:0;
}
@media (hover:hover) {
  .pCard:hover::after { opacity:1; }
}

/* ─── 3D CARD TILT ───────────────────────────────────────────── */
/* JS sets --rx, --ry via style prop */

.pCard {
  transform-style:preserve-3d;
  transition:transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  will-change:transform;
}

/* ─── RIPPLE ─────────────────────────────────────────────────── */

.btn { position:relative; overflow:hidden; }
.ripple-ink {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,0.4);
  transform:scale(0);
  animation:rippleOut 0.55s cubic-bezier(.4,0,.2,1) forwards;
}
.btn.ghost .ripple-ink,
.btn.cancel .ripple-ink,
.btn-icon .ripple-ink {
  background:rgba(37,99,235,0.15);
}
.btn.danger .ripple-ink { background:rgba(220,38,38,0.15); }

/* ─── FLOATING LABELS ────────────────────────────────────────── */

.fl-group {
  position:relative;
  margin-bottom:var(--s4);
}
.fl-group input,
.fl-group textarea {
  width:100%;
  padding:22px var(--s3) 8px;
  height:auto;
  min-height:48px;
  border-radius:var(--r-sm);
  border:1.5px solid var(--border-md);
  background:var(--surface-2);
  font-size:14px; font-weight:500;
  color:var(--text); outline:none;
  caret-color:var(--accent);
  transition:border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  appearance:none;
  cursor:text;
}
.fl-group textarea {
  resize:vertical; padding-top:20px; min-height:90px;
}
.fl-group input:hover,
.fl-group textarea:hover {
  border-color:var(--border-lg);
  background:var(--surface);
}
.fl-group input:focus,
.fl-group textarea:focus {
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.fl-group label {
  position:absolute;
  left:var(--s3); top:0;
  height:48px;
  display:flex;
  align-items:center;
  font-size:14px; font-weight:500;
  color:var(--text-3);
  pointer-events:none;
  transform-origin:left top;
  transition:all 0.18s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.fl-group textarea ~ label { height:auto; top:16px; align-items:flex-start; }
.fl-group input:focus ~ label,
.fl-group input:not(:placeholder-shown) ~ label,
.fl-group textarea:focus ~ label,
.fl-group textarea:not(:placeholder-shown) ~ label {
  top:8px;
  height:auto;
  align-items:flex-start;
  transform:scale(0.78);
  color:var(--accent);
  font-weight:700;
}

/* ─── CARD ENTRANCE ──────────────────────────────────────────── */

.edit-existing-card,
.edit-selected-card,
.delHeroCard,
.delSelectedCard,
.addCard,
.pkgModalCard {
  opacity:0;
  animation:fadeUp 0.38s cubic-bezier(.4,0,.2,1) both;
}
.delSelectedCard  { animation-delay:0.09s; }
.delConfirmCard   { animation-delay:0.06s; opacity:0; animation:scaleIn 0.28s cubic-bezier(.4,0,.2,1) both; }

/* ─── MODAL ──────────────────────────────────────────────────── */

.modalProduct {
  animation:scaleIn 0.22s cubic-bezier(.4,0,.2,1) both;
}
/* Info rows stagger */
.pmInfoItem {
  opacity:0;
  animation:fadeUp 0.28s cubic-bezier(.4,0,.2,1) both;
}
.pmInfoItem:nth-child(1){animation-delay:.08s}
.pmInfoItem:nth-child(2){animation-delay:.12s}
.pmInfoItem:nth-child(3){animation-delay:.16s}
.pmInfoItem:nth-child(4){animation-delay:.20s}
.pmInfoItem:nth-child(5){animation-delay:.24s}
.pmInfoItem:nth-child(6){animation-delay:.28s}

/* Qty big number */
.pmValue.big {
  opacity:0;
  animation:countUp 0.40s cubic-bezier(.4,0,.2,1) both;
  animation-delay:0.12s;
  display:block;
}

/* Quick edit panel */
.pmEditPanel:not(.hidden) {
  animation:slideDown 0.22s cubic-bezier(.4,0,.2,1) both;
}

/* Main image crossfade */
.pm-img-fade {
  animation:fadeIn 0.22s ease both;
}

/* ─── DROPDOWNS ──────────────────────────────────────────────── */

.search-results:not(.hidden),
.edit-search-dropdown:not(.hidden),
.delDropdown.show,
.ddDropdown.show {
  animation:slideDown 0.16s cubic-bezier(.4,0,.2,1) both;
}

/* ─── FLASH TOASTS ───────────────────────────────────────────── */

.flashMessage {
  animation:toastIn 0.25s cubic-bezier(.4,0,.2,1) both;
}

/* ─── PACKAGE CARDS ──────────────────────────────────────────── */

.pkgCard {
  opacity:0;
  animation:fadeUp 0.38s cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(var(--i,0) * 55ms + 60ms);
}

/* Status-colored glow on hover */
.pkgCard[data-status="in_transit"]:hover {
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(37,99,235,0.15), 0 4px 24px rgba(37,99,235,0.10);
}
.pkgCard[data-status="arrived"]:hover {
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(217,119,6,0.2), 0 4px 24px rgba(217,119,6,0.10);
}
.pkgCard[data-status="picked_up"]:hover {
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(5,150,105,0.2), 0 4px 24px rgba(5,150,105,0.10);
}

/* Section divider animated line */
.pkgSectionHeader::after {
  content:"";
  display:block;
  height:1.5px;
  background:linear-gradient(90deg,var(--accent),transparent);
  animation:expandLine 0.7s cubic-bezier(.4,0,.2,1) both;
  animation-delay:0.15s;
  margin-top:var(--s2);
}
.pkgSectionHeader { flex-direction:column; align-items:flex-start; }

/* ─── LOW STOCK PULSE ────────────────────────────────────────── */

.pCard[data-low-stock="true"] .pQtyNum {
  color:var(--danger);
  animation:pulseRed 2.2s ease-in-out infinite;
  display:inline-block;
}

/* ─── HEADER SCROLL DEEPENING ────────────────────────────────── */

.topHeader {
  transition:box-shadow 0.25s ease, background 0.25s ease;
}
.topHeader.is-scrolled {
  background:rgba(255,255,255,0.97);
  box-shadow:0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.07);
}

/* ─── BRAND GRADIENT TEXT ────────────────────────────────────── */

.brandLogoText {
  background:linear-gradient(120deg, #0f1117 30%, #2563eb 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ─── LETTER DIVIDER ─────────────────────────────────────────── */

.letterLine {
  animation:expandLine 0.6s cubic-bezier(.4,0,.2,1) both;
  animation-delay:0.1s;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────────── */

.sr {
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.52s cubic-bezier(.4,0,.2,1),
              transform 0.52s cubic-bezier(.4,0,.2,1);
}
.sr.visible {
  opacity:1;
  transform:translateY(0);
}

/* ─── LETTER COUNT BADGE ─────────────────────────────────────── */

.letter-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 6px;
  border-radius:var(--r-pill);
  font-size:11px; font-weight:800;
  background:var(--accent-dim);
  border:1px solid var(--accent-border);
  color:var(--accent);
  margin-left:var(--s2);
  animation:badgePop 0.3s cubic-bezier(.4,0,.2,1) both;
  animation-delay:0.3s;
}

/* ─── IMAGE LOAD FADE ────────────────────────────────────────── */

img[data-lazy] { opacity:0; transition:opacity 0.28s ease; }
img[data-lazy].loaded { opacity:1; }

/* ─── SIDEBAR ────────────────────────────────────────────────── */
.sidebar { transition:transform 0.3s cubic-bezier(.4,0,.2,1) !important; }
.sidebar-overlay { transition:opacity 0.3s ease !important; }

/* ─── INPUT FOCUS RING ───────────────────────────────────────── */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  transition:outline-color 0.12s ease;
}

/* ─── SELECTION ──────────────────────────────────────────────── */

::selection {
  background:rgba(37,99,235,0.14);
  color:var(--text);
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}