/* =============================================================================
   MOTION LAYER
   =============================================================================
   Progressive-enhancement motion for every page. Loaded after styles.css.
   Everything here is wrapped in a no-preference media query, so reduced-motion
   visitors get the static design. motion.js supplies the pointer-driven vars
   (--mx, --my, --tilt-x, --tilt-y, --mag-x, --mag-y). */

/* Cross-page view transitions (Chromium/Safari; ignored elsewhere). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: 180ms ease-in both motionFadeOut;
  }

  ::view-transition-new(root) {
    animation: 320ms ease-out 60ms both motionFadeIn;
  }

  /* ---- Hero entrance: CSS-only so there is no flash before JS runs ---- */
  .hero__copy > .eyebrow {
    animation: motionRise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both;
  }

  .hero h1 {
    animation: motionHeadline 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 160ms both;
  }

  .hero .header-accent {
    background-size: 220% 100%;
    animation: motionAccentSweep 5.5s ease-in-out 1.2s infinite alternate;
  }

  .hero__lede {
    animation: motionRise 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 420ms both;
  }

  .hero__actions {
    animation: motionRise 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 560ms both;
  }

  /* ---- Section heading underline draws itself on reveal ---- */
  .section-heading .eyebrow {
    position: relative;
  }

  .motion-rule {
    display: block;
    height: 2px;
    width: min(9rem, 40%);
    margin-top: 1rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--gold), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms;
  }

  .is-visible > .motion-rule,
  .motion-rule.is-visible {
    transform: scaleX(1);
  }

  /* ---- Service icons: strokes trace in when the card reveals ---- */
  .service-card__icon [stroke] {
    stroke-dasharray: var(--len, 120);
    stroke-dashoffset: var(--len, 120);
    transition: stroke-dashoffset 1300ms cubic-bezier(0.3, 0.7, 0.2, 1) 300ms;
  }

  .service-card.is-visible .service-card__icon [stroke],
  .service-card__icon.is-drawn [stroke] {
    stroke-dashoffset: 0;
  }

  /* ---- Pointer spotlight + tilt on cards (fine pointers only) ---- */
  .has-spotlight {
    --mx: 50%;
    --my: 50%;
    --tilt-x: 0deg;
    --tilt-y: 0deg;

    transform-style: preserve-3d;
  }

  .has-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      420px circle at var(--mx) var(--my),
      rgb(255 159 90 / 0.16),
      transparent 62%
    );
    transition: opacity 260ms ease;
    z-index: 0;
  }

  .has-spotlight:hover::before {
    opacity: 1;
  }

  .has-spotlight.is-tilting {
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
      translateZ(0);
    transition: transform 120ms linear;
  }

  /* ---- Magnetic buttons ---- */
  .button--primary.is-magnetic {
    translate: var(--mag-x, 0) var(--mag-y, 0);
    transition: translate 160ms ease-out;
  }

  /* ---- Scroll-driven effects (only where supported) ---- */
  @supports (animation-timeline: view()) {
    .hero::before,
    .hero__headline-art {
      animation: motionParallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }

    .project-card__thumb svg,
    .project-card__thumb img {
      animation: motionThumbZoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }

    .testimonial-card {
      animation: motionScaleIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

@keyframes motionFadeIn {
  from {
    opacity: 0;
  }
}

@keyframes motionFadeOut {
  to {
    opacity: 0;
  }
}

@keyframes motionRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes motionHeadline {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(10px);
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(-10% -2% -10% -2%);
  }
}

@keyframes motionAccentSweep {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@keyframes motionParallax {
  to {
    transform: translateY(-60px);
  }
}

@keyframes motionThumbZoom {
  from {
    transform: scale(1.12);
  }

  to {
    transform: scale(1);
  }
}

@keyframes motionScaleIn {
  from {
    transform: scale(0.94);
    opacity: 0.4;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}