/* ═══════════════════════════════════════════════════════════
   PatchPass — WOW Enhancement Layer
   Layers on top of style.css. Does NOT modify header/sidebar.
   Contents:
     1. Scroll progress bar
     2. Reveal-on-scroll animations
     3. Animated section eyebrows / titles
     4. Card tilt + glow + shine effects
     5. Back-to-top button
     6. Custom scrollbar
     7. Cursor aura (desktop)
     8. Hero particle canvas + parallax
     9. Stat counter styling
    10. Image hover treatments
    11. Ambient section dividers
    12. Reduced-motion safety
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Scroll progress bar ─────────────────────────────── */
.wow-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 100000;
  pointer-events: none;
  background: transparent;
}
.wow-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-yellow), var(--primary-orange), var(--accent-red));
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.7), 0 0 22px rgba(255, 215, 0, 0.35);
  transition: width 0.08s linear;
}

/* ── 2. Reveal-on-scroll ────────────────────────────────── */
.wow-reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--wow-delay, 0s);
  will-change: opacity, transform;
}
.wow-reveal--left  { transform: translateX(-48px); }
.wow-reveal--right { transform: translateX(48px); }
.wow-reveal--zoom  { transform: scale(0.92); }
.wow-reveal.wow-in {
  opacity: 1;
  transform: none;
}

/* ── 3. Animated eyebrows / titles ──────────────────────── */
.sk-eyebrow, .team-eyebrow, .ab-eyebrow {
  position: relative;
  display: inline-block;
}
.sk-eyebrow::after, .team-eyebrow::after, .ab-eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--primary-orange), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.wow-in .sk-eyebrow::after,
.wow-in .team-eyebrow::after,
.wow-in .ab-eyebrow::after,
.sk-eyebrow.wow-in::after,
.team-eyebrow.wow-in::after,
.ab-eyebrow.wow-in::after {
  transform: scaleX(1);
}

/* Title shimmer sweep on reveal */
@keyframes wowShimmer {
  0%   { background-position: -180% center; }
  100% { background-position:  180% center; }
}
.wow-shimmer {
  background: linear-gradient(
    100deg,
    currentColor 42%,
    #fff5d6 50%,
    currentColor 58%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wowShimmer 3.2s ease-in-out 0.4s 1 both;
}

/* ── 4. Card tilt + glow + shine ────────────────────────── */
.wow-tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.wow-tilt.wow-tilting {
  transition: box-shadow 0.3s ease;
}
.wow-tilt::before {
  /* moving light sheen that follows the cursor */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--wow-mx, 50%) var(--wow-my, 50%),
    rgba(255, 215, 0, 0.10),
    rgba(255, 140, 0, 0.05) 35%,
    transparent 65%
  );
  transition: opacity 0.35s ease;
}
.wow-tilt:hover::before { opacity: 1; }
.wow-tilt:hover {
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 140, 0, 0.25),
    0 0 34px rgba(255, 140, 0, 0.12);
}

/* Animated border trace on hover for about cards & news cards */
@keyframes wowBorderPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.28), 0 0 22px rgba(255, 140, 0, 0.10); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.45), 0 0 34px rgba(255, 180, 0, 0.20); }
}
.ab-card:hover,
.nu-card:hover {
  animation: wowBorderPulse 2.2s ease-in-out infinite;
}

/* Icon pop on card hover */
.ab-card .ab-card-icon,
.nu-card i {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ab-card:hover .ab-card-icon {
  transform: translateY(-4px) scale(1.12) rotate(-4deg);
}

/* ── 5. Back-to-top button ──────────────────────────────── */
.wow-top-btn {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 140, 0, 0.45);
  background: rgba(15, 15, 15, 0.82);
  backdrop-filter: blur(8px);
  color: var(--primary-yellow);
  font-size: 15px;
  cursor: pointer;
  z-index: 9000;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(18px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease, background 0.3s ease;
}
.wow-top-btn.wow-top-btn--show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wow-top-btn:hover {
  background: rgba(255, 140, 0, 0.16);
  box-shadow: 0 0 18px rgba(255, 140, 0, 0.45);
  transform: translateY(-3px) scale(1.06);
}

/* ── 6. Custom scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0c0c0c; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-orange), var(--accent-red));
  border-radius: 6px;
  border: 2px solid #0c0c0c;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--primary-yellow), var(--primary-orange));
}

/* ── 7. Cursor aura (desktop only) ──────────────────────── */
.wow-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(255, 150, 30, 0.055), transparent 62%);
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 0;
  mix-blend-mode: screen;
}
body.wow-aura-on .wow-aura { opacity: 1; }
@media (hover: none), (max-width: 900px) {
  .wow-aura { display: none; }
}

/* ── 8. Hero particles + slow zoom ──────────────────────── */
.wow-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-section { position: relative; }
.hero-section .hero-vignette,
.hero-section .hero-title-wrap { z-index: 2; }

@keyframes wowHeroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}
.hero-background {
  animation: wowHeroZoom 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── 9. Stat counters ───────────────────────────────────── */
.ab-stat-value {
  font-variant-numeric: tabular-nums;
}
.ab-stat {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ab-stat:hover { transform: translateY(-5px); }

/* ── 10. Image hover treatments ─────────────────────────── */
.sk-panel-img,
.ts-avatar-img,
.team-group-photo img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.sk-panel:hover .sk-panel-img { transform: scale(1.045); }
.team-group-photo { overflow: hidden; }
.team-group-photo:hover img {
  transform: scale(1.03);
  filter: saturate(1.15);
}

/* ── 11. Ambient section dividers ───────────────────────── */
.wow-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 140, 0, 0.35) 30%,
    rgba(255, 215, 0, 0.5) 50%,
    rgba(255, 140, 0, 0.35) 70%,
    transparent
  );
  position: relative;
}
.wow-divider::after {
  content: '◆';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: var(--primary-orange);
  background: var(--dark-bg);
  padding: 0 10px;
}

/* Floating idle animation for the download widget */
@keyframes wowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.hero-dl-widget:not(.hero-dl-widget--hidden) {
  animation: wowFloat 3.6s ease-in-out infinite;
}

/* Nav link micro-interaction (enhancement only, keeps design) */
.nav-link .nav-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-link:hover .nav-icon {
  transform: scale(1.2) rotate(-6deg);
}

/* ── 12. Reduced motion safety ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wow-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-background { animation: none !important; }
  .hero-dl-widget { animation: none !important; }
  .wow-shimmer { animation: none !important; }
  .wow-tilt { transition: none !important; }
  .wow-aura { display: none !important; }
}