/* ============================================================
 * GRIFA GAMES — Shared Animation System v2
 * Gaming palette: neon-green #00ff88 · gold #FFD700
 * All transitions ≤ 300ms · works on mobile & desktop
 * ============================================================ */

/* ── prefers-reduced-motion: kill everything ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #grifa-loader   { display: none !important; }
  #scroll-progress{ display: none !important; }
  .reveal         { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════
   LOADING SCREEN
════════════════════════════════════════════════════════════ */
#grifa-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  transition: opacity .4s ease, visibility .4s ease;
}
#grifa-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

#grifa-loader .loader-logo {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: -.05em;
  color: #fff;
}
#grifa-loader .loader-logo em {
  font-style: normal;
  background: linear-gradient(90deg, #00ff88, #FFD700);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@keyframes loaderFill {
  from { width: 0% }
  to   { width: 100% }
}
@keyframes loaderPulse {
  0%,100% { opacity: .6 } 50% { opacity: 1 }
}
#grifa-loader .loader-bar {
  width: 180px; height: 3px;
  background: #111; border-radius: 99px; overflow: hidden;
}
#grifa-loader .loader-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #00ff88, #FFD700);
  animation: loaderFill 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
#grifa-loader .loader-sub {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: #555; animation: loaderPulse 1.2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
════════════════════════════════════════════════════════════ */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #00ff88 0%, #FFD700 100%);
  z-index: 9998; border-radius: 0 3px 3px 0;
  transition: width .08s linear;
  box-shadow: 0 0 8px rgba(0,255,136,.5);
}

/* ════════════════════════════════════════════════════════════
   BACK TO TOP
════════════════════════════════════════════════════════════ */
#back-to-top {
  position: fixed; bottom: 22px; right: 18px; z-index: 1000;
  width: 44px; height: 44px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  color: #000; font-size: 19px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,255,136,.4);
  opacity: 0; transform: translateY(14px);
  transition: opacity .28s, transform .28s, box-shadow .22s;
  pointer-events: none;
  line-height: 1;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover   { box-shadow: 0 6px 26px rgba(0,255,136,.65); transform: translateY(-3px); }
#back-to-top:active  { transform: translateY(0); }

/* Hide floating buttons when cart drawer is open so they don't overlap the Checkout button */
body.cart-open #back-to-top,
body.cart-open a[href^="https://wa.me"] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ════════════════════════════════════════════════════════════
   PAGE FADE-IN ON LOAD
════════════════════════════════════════════════════════════ */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-enter { animation: pageFadeIn .38s ease-out both; }

/* ════════════════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.23,1,.32,1),
              transform .55s cubic-bezier(.23,1,.32,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* stagger for child groups */
.stagger-group > .reveal:nth-child(1) { transition-delay: .04s; }
.stagger-group > .reveal:nth-child(2) { transition-delay: .10s; }
.stagger-group > .reveal:nth-child(3) { transition-delay: .16s; }
.stagger-group > .reveal:nth-child(4) { transition-delay: .22s; }
.stagger-group > .reveal:nth-child(5) { transition-delay: .28s; }
.stagger-group > .reveal:nth-child(6) { transition-delay: .34s; }
.stagger-group > .reveal:nth-child(7) { transition-delay: .40s; }
.stagger-group > .reveal:nth-child(8) { transition-delay: .46s; }

/* ════════════════════════════════════════════════════════════
   HERO GLITCH (CSS-only — no data-text needed)
════════════════════════════════════════════════════════════ */
@keyframes heroGlitch {
  0%,88%,100% {
    transform: skew(-6deg);
    filter: none;
    text-shadow: 0 0 28px rgba(197,255,74,.35);
  }
  90% {
    transform: skew(-6deg) translateX(-4px) skewX(4deg);
    filter: hue-rotate(50deg) brightness(1.4);
    text-shadow: -4px 0 #00ff88, 4px 0 #FFD700;
  }
  92% {
    transform: skew(-6deg) translateX(3px);
    filter: hue-rotate(-30deg) brightness(1.2);
    text-shadow: 3px 0 #00ff88, -3px 0 #FFD700;
  }
  94% {
    transform: skew(-6deg) translateX(-1px);
    filter: none;
    text-shadow: 0 0 36px rgba(197,255,74,.55);
  }
}
.hero-glitch { animation: heroGlitch 6s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════
   CTA BUTTON PULSE GLOW
════════════════════════════════════════════════════════════ */
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 6px 20px rgba(197,255,74,.4),  0 0 0 0   rgba(197,255,74,.15); }
  50%     { box-shadow: 0 6px 24px rgba(197,255,74,.65), 0 0 0 10px rgba(197,255,74,0); }
}
.btn-pulse { animation: ctaPulse 2.6s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════
   ADD-TO-CART BUTTON BOUNCE
════════════════════════════════════════════════════════════ */
@keyframes cartBounce {
  0%  { transform: scale(1); }
  28% { transform: scale(1.4) rotate(-8deg); }
  55% { transform: scale(.88) rotate(4deg); }
  78% { transform: scale(1.14); }
  100%{ transform: scale(1); }
}
.cart-bounce { animation: cartBounce .38s cubic-bezier(.36,.07,.19,.97) both; }

/* ════════════════════════════════════════════════════════════
   FORM FIELD FOCUS GLOW
════════════════════════════════════════════════════════════ */
input, select, textarea {
  transition: border-color .22s ease, box-shadow .22s ease !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #00ff88 !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,.16), 0 0 14px rgba(0,255,136,.08) !important;
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT — ORDER SUMMARY SLIDE IN
════════════════════════════════════════════════════════════ */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.summary-slide { animation: slideInRight .45s cubic-bezier(.23,1,.32,1) both .15s; }

/* ════════════════════════════════════════════════════════════
   ADMIN — KPI CARD SCALE-IN
════════════════════════════════════════════════════════════ */
@keyframes kpiIn {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kpi-anim { animation: kpiIn .42s cubic-bezier(.23,1,.32,1) both; }
.kpi-anim:nth-child(1){ animation-delay: .04s; }
.kpi-anim:nth-child(2){ animation-delay: .10s; }
.kpi-anim:nth-child(3){ animation-delay: .16s; }
.kpi-anim:nth-child(4){ animation-delay: .22s; }
.kpi-anim:nth-child(5){ animation-delay: .28s; }
.kpi-anim:nth-child(6){ animation-delay: .34s; }

/* ════════════════════════════════════════════════════════════
   ADMIN — TABLE ROW STAGGER
════════════════════════════════════════════════════════════ */
@keyframes rowSlide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.row-anim { animation: rowSlide .32s ease-out both; }