/* ============================================================
   SKINFORGE — live-fx.css  v3  (clean, no lags, no annoyances)

   REMOVED vs v2:
   - Cursor glow (annoying, removed per client)
   - .trust__player levitate animation (removed per client)
   - .product-card outline pulse (cards were fine, removed per client)
   - .ticker-card outline pulse (same reason)
   ============================================================ */

/* ── 1. HERO ORBS (injected by live-fx.js) ─────────────────── */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  will-change: transform;
  z-index: 0;
}
.hero__orb--1 {
  width: 500px; height: 500px;
  top: -80px; left: -100px;
  background: radial-gradient(circle, rgba(190,249,112,0.08) 0%, transparent 70%);
  animation: orbDrift1 18s ease-in-out infinite;
}
.hero__orb--2 {
  width: 380px; height: 380px;
  bottom: -40px; right: 8%;
  background: radial-gradient(circle, rgba(75,105,255,0.10) 0%, transparent 70%);
  animation: orbDrift2 14s ease-in-out infinite;
}
.hero__orb--3 {
  width: 260px; height: 260px;
  top: 35%; right: 22%;
  background: radial-gradient(circle, rgba(136,71,255,0.08) 0%, transparent 70%);
  animation: orbDrift3 11s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(55px,45px); }
  66%     { transform: translate(-28px,70px); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-80px,-55px); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0); opacity:.65; }
  45%     { transform: translate(40px,-60px); opacity:1; }
  80%     { transform: translate(-22px,28px); opacity:.4; }
}

/* ── 2. HERO CANVAS PARTICLES (injected by live-fx.js) ─────── */
.hero__particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

/* ── 3. HERO TITLE SHIMMER ──────────────────────────────────── */
.hero__title {
  position: relative;
}
.hero__title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(190,249,112,0.13) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: titleShimmer 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes titleShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* category-card__character — no animation, original hover only */

/* ── 5. GREEN BUTTON SHIMMER ────────────────────────────────── */
/* ::before — original .btn has no ::before defined. No overflow:hidden added. */
.btn--green::before {
  content: '';
  position: absolute;
  top: 0; left: -55%;
  width: 38%; height: 100%;
  background: linear-gradient(108deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg);
  animation: btnSweep 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes btnSweep {
  0%   { left: -55%; opacity: 0; }
  14%  { opacity: 1; }
  54%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* ── 6. LOGO BREATHING GLOW ─────────────────────────────────── */
.header__logo-img {
  animation: logoGlow 5s ease-in-out infinite;
}
.footer__logo-img {
  animation: logoGlow 5s ease-in-out infinite -2.5s;
}
@keyframes logoGlow {
  0%,100% { filter: drop-shadow(0 0 0px  rgba(190,249,112,0.0)); }
  50%     { filter: drop-shadow(0 0 12px rgba(190,249,112,0.45)); }
}

/* ── 7. TRUST STAT COUNTERS (DOM injected by live-fx.js) ────── */
.trust__stats-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 28px 0 36px;
}
.trust__stat { text-align: center; }
.trust__stat-value {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 58px);
  color: var(--c-green-light);
  line-height: 1;
  display: block;
}
.trust__stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
  display: block;
}

/* ── 8. SECTION HEADING ACCENT LINE ─────────────────────────── */
.categories__title,
.trending__title,
.trust__title,
.faq__title,
.reviews__title {
  position: relative;
}
.categories__title::after,
.trending__title::after,
.trust__title::after,
.faq__title::after,
.reviews__title::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--c-green-light), transparent);
  animation: accentLine 3.5s ease-in-out infinite alternate;
}
@keyframes accentLine {
  from { width: 40px; opacity: 0.5; }
  to   { width: 80px; opacity: 1.0; }
}

/* product-card — NO animations, original hover/transition only */
/* Speed up hover glow: original has .3s, this makes it instant-feeling */
.product-card {
  transition: transform .18s ease, box-shadow .18s ease;
}