/* ===========================================================
   ARTEX MEDIA — Premium motion layer
   Tasteful micro-interactions. All heavy motion gated on
   prefers-reduced-motion. Pointer effects are JS-driven
   (enhance.js) and limited to fine pointers.
   =========================================================== */

/* Anchor offset so fixed nav never covers section tops */
html { scroll-padding-top: 96px; }
section[id] { scroll-margin-top: 96px; }

/* ---------- Scroll progress bar ---------- */
#scrollProgress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  box-shadow: 0 0 14px var(--accent-glow);
  pointer-events: none;
}

/* ---------- Smoother transforms for tilt-enabled cards ---------- */
.pf-card, .testi, .bento__cell, .video-frame--v2 {
  transition: transform 0.4s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {

  /* Nav slides in on load */
  @keyframes navIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  .nav { animation: navIn 0.9s var(--ease) both; }

  /* Hero badge gentle breathing */
  @keyframes badgeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .hero__badge { animation: badgeFloat 5.5s var(--ease) infinite; }

  /* Primary CTA: slow attention pulse (pauses on hover so hover glow shows) */
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { box-shadow: 0 14px 50px -16px var(--accent-glow), 0 0 30px -8px var(--accent-glow); }
  }
  .btn-primary { animation: ctaPulse 3.4s var(--ease) infinite; }
  .btn-primary:hover { animation: none; }

  /* Icons lift + scale when their card is hovered */
  .bento__icon { transition: transform 0.55s var(--ease); }
  .bento__cell:hover .bento__icon { transform: translateY(-4px) scale(1.1); }

  /* Stat numbers get a soft glow as they reveal */
  .stat.in .stat__num { animation: statGlow 1.6s var(--ease) 0.1s both; }
  @keyframes statGlow {
    0% { text-shadow: 0 0 0 transparent; }
    40% { text-shadow: 0 0 26px var(--accent-glow); }
    100% { text-shadow: 0 0 0 transparent; }
  }

  /* Eyebrow accent line draws in */
  .eyebrow::before { transition: width 0.8s var(--ease) 0.15s, opacity 0.8s var(--ease); }
  .reveal:not(.in) .eyebrow::before { width: 0; opacity: 0; }

  /* Orbit nodes subtle breathing glow */
  @keyframes nodePulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 22px -6px var(--accent-glow); }
  }
  .orbit__node { animation: nodePulse 4s var(--ease) infinite; }
  .orbit__node:nth-child(2) { animation-delay: 0.6s; }
  .orbit__node:nth-child(3) { animation-delay: 1.2s; }
  .orbit__node:nth-child(4) { animation-delay: 1.8s; }
  .orbit__node:nth-child(5) { animation-delay: 2.4s; }
  .orbit__node:nth-child(6) { animation-delay: 3s; }

  /* CTA strip + marquee already loop; add a faint shimmer to accent words */
  .client-logo em, .cta-strip__item { transition: text-shadow 0.4s var(--ease); }
  .client-logo:hover em { text-shadow: 0 0 18px var(--accent-glow); }

  /* Reveal: cards rise + slightly scale for more depth */
  .js .pf-card.reveal, .js .testi.reveal, .js .bento__cell.reveal {
    transform: translateY(40px) scale(0.985);
  }
  .pf-card.reveal.in, .testi.reveal.in, .bento__cell.reveal.in {
    transform: none;
  }

  /* Method stage frames get a gentle float while pinned */
  @keyframes stageFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .method__stage { animation: stageFloat 8s var(--ease) infinite; }
}

/* Tilt elements keep a soft shadow baseline so the 3D reads */
.tilt-on { transform-style: preserve-3d; }

/* Hero cursor-follow spotlight */
.hero--v2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--hx, 50%) var(--hy, 38%), var(--accent-soft), transparent 62%);
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) { .hero--v2::after { display: none; } }