/* ════════════════════════════════════════════════════════════════
   inshe — motion.css
   Dispersion, hover states, language-swap fade.
   Static state: pure carbon. Motion writes --d, the chromatic
   edge appears as a residue of the process that just finished.
   ════════════════════════════════════════════════════════════════ */

/* ─── Dispersion primitive ─────────────────────────────────────
   Apply .disp to any text element that should refract on motion.
   --d is written by engine.js (scroll velocity) or by :hover.
   Three CMY offsets produce the chromatic aberration. */
.disp {
  text-shadow:
    calc(var(--d) * -1) 0 0 var(--cyan),
    var(--d)            0 0 var(--magenta),
    0 calc(var(--d) * 0.6) 0 var(--yellow);
  transition: text-shadow 0.5s var(--ease-out);
}

/* Hover-induced dispersion — explicit small-amplitude refraction */
.disp:hover,
.brand-mark:hover,
.contact-email:hover,
.lang-switch button:not(.is-active):hover,
.footer-grid .social a:hover {
  --d: 1.6px;
}

.work:hover {
  --d: 1.4px;
}

/* ─── Language switch fade ─────────────────────────────────────
   Brief opacity dip during data swap. Avoids flicker when DOM
   text changes mid-paint. */
[data-i18n] {
  transition: opacity 0.18s ease;
}

body.is-swapping [data-i18n] {
  opacity: 0.25;
}

/* ─── First paint reveal — handled by engine.js dispersion alone.
   The previous body { opacity: 0 → 1 } animation made body invisible
   until motion.css loaded. On slow mobile networks Lighthouse fired
   the NO_FCP error because the body never painted in time. The
   chromatic CMY split via --d already carries the brand "convergence"
   feel without touching opacity, so the fade was redundant. */

/* ─── Reduced motion ───────────────────────────────────────────
   Honor the system preference. No dispersion, no transitions
   beyond what the browser would do anyway. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .disp,
  .disp:hover,
  .work:hover,
  .brand-mark:hover,
  .contact-email:hover {
    --d: 0px !important;
    text-shadow: none !important;
  }

  .work,
  .work-detail-inner,
  .work-marker,
  [data-i18n] {
    transition: none !important;
    animation: none !important;
  }
}