/* ============================================================
   Animation layer — superagnt-style interactions
   Loaded ON TOP of styles.css for the animated variant only.
   Reactive pixel-grid canvas, cursor glow, scroll reveals,
   card spotlights, CTA sheen. Dark + red.
   ============================================================ */

/* ---- ambient background canvas + cursor glow ---- */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 60, 66, 0.16), rgba(236, 60, 66, 0) 62%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(var(--gx, -9999px), var(--gy, -9999px), 0);
  transition: opacity 0.35s ease;
  will-change: transform;
}

/* keep all real content above the ambient layers */
.site-header { z-index: 50; }
body > section,
body > footer { position: relative; z-index: 2; }

/* ---- scroll reveal (gated on .anim-ready so no-JS shows everything) ---- */
.anim-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.65, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.65, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* staggered reveal inside grids */
.learn-grid .learn-card:nth-child(2) { transition-delay: 0.07s; }
.learn-grid .learn-card:nth-child(3) { transition-delay: 0.14s; }
.learn-grid .learn-card:nth-child(4) { transition-delay: 0.21s; }
.fit-grid .fit-col:nth-child(2) { transition-delay: 0.09s; }

/* ---- card cursor spotlight ---- */
.learn-card { --cx: 50%; --cy: 50%; overflow: hidden; }
.learn-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(340px circle at var(--cx) var(--cy), rgba(236, 60, 66, 0.13), transparent 55%);
  z-index: 0;
}
.learn-card:hover::after { opacity: 1; }
.learn-card > * { position: relative; z-index: 1; }

/* ---- CTA sheen (solid buttons only; bracket buttons use ::before/::after for [ ]) ---- */
.btn-solid { position: relative; overflow: hidden; }
.btn-solid > * { position: relative; z-index: 1; }
.btn-solid::after {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  animation: btn-sheen 5s ease-in-out infinite;
  z-index: 0;
}
@keyframes btn-sheen {
  0%, 100% { left: -70%; }
  55%, 70% { left: 130%; }
}

/* ---- reduced motion: kill all of it ---- */
@media (prefers-reduced-motion: reduce) {
  .anim-ready .reveal { opacity: 1; transform: none; transition: none; }
  .bg-canvas, .cursor-glow, .btn-solid::after { display: none; }
}