/* ============================================================
   AFTERHOURS — INTERACTIVE 3D LAYER
   Effect A: hero synthwave grid floor
   Effect B: services 3D tilt cards + cursor glare
   Effect C: simulator particle burst (JS-driven, minimal CSS)
   Effect D: Busy Bar pricing tier animated glowing border
   All effects respect prefers-reduced-motion: reduce.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   EFFECT A — HERO SYNTHWAVE GRID FLOOR
   Perspective grid receding toward the horizon, orange neon
   lines on the dark hero, scrolling toward the viewer.
   Sits behind hero content (z-index 0); hero-inner is z-index 2.
   ══════════════════════════════════════════════════════════ */
.synth-floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 200%;
  height: 55%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* fade the floor out as it approaches the horizon (top) */
  -webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
  opacity: 0.42;
}

.synth-floor__lines {
  position: absolute;
  left: -50%;
  top: -60px; /* oversized so the transform loop never shows an edge */
  width: 200%;
  height: calc(100% + 60px);
  transform-origin: 50% 0%;
  transform: perspective(320px) rotateX(72deg);
  will-change: transform;
  background-image:
    /* horizontal lines (receding) */
    repeating-linear-gradient(
      to bottom,
      rgba(255, 90, 31, 0.55) 0px,
      rgba(255, 90, 31, 0.55) 2px,
      transparent 2px,
      transparent 60px
    ),
    /* vertical lines */
    repeating-linear-gradient(
      to right,
      rgba(255, 90, 31, 0.45) 0px,
      rgba(255, 90, 31, 0.45) 2px,
      transparent 2px,
      transparent 60px
    );
  background-size: 100% 60px, 60px 100%;
}

/* Scroll the horizontal lines toward the viewer.
   Only added when motion is allowed (see hero-grid.js).
   Animates transform (GPU-composited) instead of background-position,
   which repainted the huge gradient layer every frame. One 60px step
   equals one background repeat, so the loop is seamless. */
.synth-floor--animate .synth-floor__lines {
  animation: synthFloorScroll 3.2s linear infinite;
}

@keyframes synthFloorScroll {
  from { transform: perspective(320px) rotateX(72deg) translateY(0); }
  to   { transform: perspective(320px) rotateX(72deg) translateY(60px); }
}

@media (prefers-reduced-motion: reduce) {
  .synth-floor--animate .synth-floor__lines {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════
   EFFECT B — SERVICES 3D TILT CARDS + CURSOR GLARE
   Mouse-tilt (±8deg) with a cursor-following radial glare.
   JS adds .tilt-3d to each service card and updates --mx/--my.
   Touch devices and reduced-motion get no tilt / no glare.
   ══════════════════════════════════════════════════════════ */
.services-grid--outcome { perspective: 900px; }

.service-card.tilt-3d {
  transform-style: preserve-3d;
  /* No transform transition: card-tilt.js lerps the rotation itself.
     A CSS transition here fights the per-frame JS updates and makes
     the tilt feel glitchy/rubber-banded. */
  will-change: transform;
}

/* Glare overlay follows the cursor via --mx / --my custom props. */
.service-card.tilt-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 90, 31, 0.28) 0%,
    rgba(255, 90, 31, 0.10) 25%,
    transparent 55%
  );
  z-index: 1;
}
.service-card.tilt-3d.is-tilting::after { opacity: 1; }

/* Keep card content above the glare layer. */
.service-card.tilt-3d > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .service-card.tilt-3d { transform: none !important; transition: none; }
  .service-card.tilt-3d::after { display: none; }
}

/* ══════════════════════════════════════════════════════════
   EFFECT C — SIMULATOR ODOMETER
   Count-up is driven by simulator-effects.js (rAF); no CSS needed.
   (Particle burst removed by request.)
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   EFFECT D — BUSY BAR PRICING TIER GLOWING BORDER
   Animated conic-gradient ring rotating around ONLY the middle
   "Busy Bar" (.pricing-tier--featured) card. Pure CSS.
   Uses @property --aah-angle where supported for smooth rotation;
   falls back to a static gradient border otherwise.
   Reduced-motion: static gradient (no rotation).
   Applies on index.html teaser + pages/pricing.html (same class).
   ══════════════════════════════════════════════════════════ */
@property --aah-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.pricing-tier--featured {
  --aah-angle: 0deg;
}
.pricing-tier--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px; /* ring thickness */
  border-radius: inherit;
  background: conic-gradient(
    from var(--aah-angle),
    #ff5a1f, #3a1a8c, #5900FF, #ff5a1f
  );
  /* mask so only the 2px ring shows (true border, no fill) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.5))
          drop-shadow(0 0 10px rgba(89, 0, 255, 0.35));
  pointer-events: none;
  z-index: 1;
  animation: aahBorderSpin 8s linear infinite;
}

@keyframes aahBorderSpin {
  to { --aah-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-tier--featured::before {
    animation: none;
  }
}