/* ==========================================================================
   Phoenix v3 — motion layer
   Slate + amber cinematic primitives. Honors prefers-reduced-motion.
   Headless-safe progressive enhancement: nothing is invisible if JS never fires.
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. Cinematic reveal — staggered fade-up on scroll-into-view
   ----------------------------------------------------------------------- */

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal[data-prep] {
  opacity: 0;
  transform: translateY(24px);
}

/* -----------------------------------------------------------------------
   7. Masked text reveal — clip-path wipe, progressive enhancement
   Default VISIBLE. JS hides on next frame, then reveals with stagger.
   ----------------------------------------------------------------------- */

.masked-line {
  display: block;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.0s cubic-bezier(0.83, 0, 0.17, 1);
  will-change: clip-path;
}
.masked-line[data-prep] {
  clip-path: inset(0 100% 0 0);
}

/* -----------------------------------------------------------------------
   Hero mesh — slow breath on the gradient mesh bg
   ----------------------------------------------------------------------- */

.hero-mesh { will-change: transform; }

/* -----------------------------------------------------------------------
   11. Mouse parallax — content drifts with cursor (width-gated, see JS)
   ----------------------------------------------------------------------- */

.hero-wrap {
  transform: translate3d(calc(var(--px, 0px) * 0.04), calc(var(--py, 0px) * 0.03), 0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -----------------------------------------------------------------------
   6. Magnetic CTA — inner drifts toward cursor
   ----------------------------------------------------------------------- */

.magnet-content {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* -----------------------------------------------------------------------
   10. Spark border — amber light rotating around CTAs
   ----------------------------------------------------------------------- */

.spark-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-1);
}
.spark-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 60%,
    rgba(245, 158, 11, 0) 65%,
    rgba(245, 158, 11, 0.95) 70%,
    rgba(255, 255, 255, 0.95) 73%,
    rgba(245, 158, 11, 0.95) 76%,
    rgba(245, 158, 11, 0) 81%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spark 4s linear infinite;
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
}
.spark-card:hover .spark-border { animation-duration: 2s; }
@keyframes spark { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------
   9b. Count-up — ease-out-cubic, tabular numerals
   ----------------------------------------------------------------------- */

.counter-val {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   9a. Draw-on SVG icons — strokes animate when scrolled into view
   ----------------------------------------------------------------------- */

.draw-on path,
.draw-on circle,
.draw-on rect,
.draw-on line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
.draw-on.in path,
.draw-on.in circle,
.draw-on.in rect,
.draw-on.in line {
  stroke-dashoffset: 0;
}
.draw-on.is-drawn {
  /* keep stroke visible after animation; fills are layered above */
  fill: none;
}

/* -----------------------------------------------------------------------
   Service icon hover — gentle lift
   ----------------------------------------------------------------------- */

.service-card:hover .service-icon {
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.15);
}

/* -----------------------------------------------------------------------
   Reduced motion: collapse everything to instant / static
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .masked-line {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero-wrap { transform: none !important; }
}