/* ════════════════════════════════════════════════════════════════
   CLIENDER · ANIM-HOME.CSS
   Styles for rich home-page interactive animations
═══════════════════════════════════════════════════════════════ */

/* ─── Scroll Progress Bar ────────────────────────────────────── */
.cl-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sales), var(--purple), var(--media));
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px color-mix(in oklch, var(--purple), transparent 40%);
}

/* ─── Vrow title word cascade drop ──────────────────────────── */
.drop-title .drop-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: var(--dd, 0ms);
  will-change: transform, opacity;
}
.drop-title--in .drop-word {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Vrow Stagger (handled via JS inline styles) ────────────── */
.vrow { will-change: transform, opacity; }

/* ─── Spotlight overlay in video panels ─────────────────────── */
.cl-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* ─── Animated underline on h2 ───────────────────────────────── */
.cl-underline {
  display: block;
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--purple), var(--media));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.cl-underline--in { transform: scaleX(1); }

/* ─── Stat burst particles ───────────────────────────────────── */
.cl-burst {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-light);
  pointer-events: none;
  z-index: 9999;
  animation: cl-burst-out 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cl-burst-out {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ─── Sector card 3D tilt — smooth will-change ───────────────── */
.sector {
  will-change: transform;
  transform-style: preserve-3d;
}
.sector__bg { transform: scale(1.1); }
.sector:hover .sector__bg { transform: scale(1.15); }

/* ─── Sector card text: static (no floating) ─────────────────── */
.sector__name,
.sector__idx,
.sector__arrow {
  animation: none;
}

/* ─── vrow media tilt ────────────────────────────────────────── */
.vrow__media { will-change: transform; transform-style: preserve-3d; }

/* ─── Diff cards tilt ────────────────────────────────────────── */
.diff { will-change: transform; transform-style: preserve-3d; }

/* ─── Marquee speed animation ────────────────────────────────── */
.marquee__track { transition: animation-duration 0.4s; }

/* ─── Hero video subtle parallax ─────────────────────────────── */
.hero__video { will-change: transform; }

/* ─── Light mode adjustments ─────────────────────────────────── */
/* spotlight uses screen blend (adds light) — swap to multiply on light bg */
[data-theme="light"] .cl-spotlight {
  mix-blend-mode: multiply;
  opacity: 0.08 !important;
}
/* progress bar: keep colours but adjust shadow */
[data-theme="light"] .cl-progress {
  box-shadow: 0 0 10px color-mix(in oklch, var(--purple), transparent 55%);
}
/* burst particles: use darker colour on light bg */
[data-theme="light"] .cl-burst {
  background: var(--purple-deep);
}

/* ─── Reduced motion: kill all ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cl-progress,
  .cl-spotlight,
  .cl-underline,
  .cl-burst { display: none; }
  .vrow { opacity: 1 !important; transform: none !important; }
}