/* ============================================================
   KinaSaen – Animations
   ============================================================ */

/* ── Pulse (neon dot) ── */
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(131,14,37,0.8); }
  50%       { opacity: 0.5; box-shadow: 0 0 4px rgba(131,14,37,0.3); }
}

/* ── Marquee (trust bar) ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Bounce (scroll indicator) ── */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── Hero line reveal ── */
@keyframes lineUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade up ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade in ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Neon flicker (subtle) ── */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 18px rgba(131,14,37,0.55), 0 0 40px rgba(131,14,37,0.2);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* ── Glow pulse (border) ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(131,14,37,0.3); }
  50%       { box-shadow: 0 0 28px rgba(131,14,37,0.7), 0 0 50px rgba(131,14,37,0.3); }
}

/* ── Scan line ── */
@keyframes scanline {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}

/* ── Number count up (triggered via JS class) ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card float ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Stagger hero on load ── */
/* 'both' = from-state applies during delay (no invisible flash) AND end-state is kept */
.hero__headline .line:nth-child(1) { animation: lineUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s both; }
.hero__headline .line:nth-child(2) { animation: lineUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.hero__headline .line:nth-child(3) { animation: lineUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.hero__sub     { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.75s both; }
.hero__actions { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.9s both; }
.hero__stats   { animation: fadeIn 1s ease 1.1s both; }
.hero__tag     { animation: fadeUp 0.6s ease 0.15s both; }


/* ── Product card featured float ── */
.product-card.featured { animation: float 4s ease-in-out infinite; }
.product-card.featured:nth-child(2) { animation-delay: 0.5s; }
.product-card.featured:nth-child(3) { animation-delay: 1s; }
.product-card.featured:nth-child(4) { animation-delay: 1.5s; }

/* ── Shimmer loading effect ── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius);
}

/* ── Page transition ── */
.page-enter {
  animation: fadeIn 0.4s ease forwards;
}

/* ── Neon border glow on focus/active cards ── */
.product-card:focus-visible {
  outline: none;
  animation: glowPulse 1.5s ease infinite;
  border-color: var(--neon);
}

/* ── Filter btn active state ── */
.filter-btn.active {
  animation: fadeIn 0.2s ease forwards;
}