/* ============================================================
 * Atlas Motion System — centralized, GPU-safe, reduced-motion aware.
 *
 * Everything here is vanilla CSS + a companion motion.js controller.
 * No framework. No runtime dependency. Targets 60fps on mid-tier
 * mobile, degrades gracefully when prefers-reduced-motion is set.
 *
 * Philosophy:
 *   - Trust over theatrics. Motion must support reading, not distract.
 *   - Depth through restraint — small rotations (<6deg), small lifts
 *     (<4px), slow opacity fades.
 *   - Every transform uses translate3d/rotateX/rotateY so the compositor
 *     handles it off the main thread.
 *   - All durations use a single cubic-bezier so the whole page breathes
 *     with the same rhythm.
 * ============================================================ */

:root {
  --mm-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* entrance ease */
  --mm-ease-exit:   cubic-bezier(0.55, 0, 0.7, 0.2);  /* leave ease */
  --mm-ease-hover:  cubic-bezier(0.2, 0.8, 0.2, 1);   /* hover interactions */

  --mm-dur-quick:   180ms;
  --mm-dur-snap:    240ms;
  --mm-dur-medium:  420ms;
  --mm-dur-reveal:  720ms;
  --mm-dur-long:    1100ms;

  --mm-lift-sm:     -2px;
  --mm-lift-md:     -4px;
  --mm-lift-lg:     -6px;
}

/* ── REVEAL ─────────────────────────────────────────────────
 * Elements tagged with .u-reveal start hidden + translated and
 * activate when they enter the viewport (via motion.js).
 * Variants are selected via data-variant.
 */
.u-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity   var(--mm-dur-reveal) var(--mm-ease),
    transform var(--mm-dur-reveal) var(--mm-ease);
  will-change: opacity, transform;
}
.u-reveal[data-variant="fade"]   { transform: none; }
.u-reveal[data-variant="scale"]  { transform: translate3d(0, 14px, 0) scale(0.97); transform-origin: center center; }
.u-reveal[data-variant="left"]   { transform: translate3d(-28px, 0, 0); }
.u-reveal[data-variant="right"]  { transform: translate3d(28px, 0, 0); }
.u-reveal[data-variant="subtle"] { transform: translate3d(0, 10px, 0); }

.u-reveal.is-in { opacity: 1; transform: none; }

/* Remove will-change once revealed, so we free the compositor layer. */
.u-reveal.is-in { will-change: auto; }

/* ── LIFT ───────────────────────────────────────────────────
 * Soft vertical lift on hover. For cards, listings, CTAs.
 */
.u-lift {
  transition:
    transform   var(--mm-dur-snap) var(--mm-ease-hover),
    box-shadow  var(--mm-dur-snap) var(--mm-ease-hover),
    border-color var(--mm-dur-snap) var(--mm-ease-hover);
}
@media (hover: hover) and (pointer: fine) {
  .u-lift:hover { transform: translate3d(0, var(--mm-lift-md), 0); }
}

/* ── TILT ───────────────────────────────────────────────────
 * Perspective-based 3D tilt driven by motion.js (mouse position).
 * Base rule only establishes perspective + transform origin + the
 * transition. Actual rotateX/rotateY come from inline style set by JS.
 */
.u-tilt {
  transform-style: preserve-3d;
  transition: transform var(--mm-dur-medium) var(--mm-ease-hover);
  will-change: transform;
}
.u-tilt.is-tilting { transition: transform 60ms linear; }
.u-tilt-glare {
  position: relative;
  overflow: hidden;
}
.u-tilt-glare::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.18) 0%,
              rgba(255, 255, 255, 0) 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--mm-ease-hover);
  mix-blend-mode: soft-light;
}
@media (hover: hover) and (pointer: fine) {
  .u-tilt-glare:hover::after { opacity: 1; }
}

/* ── MAGNETIC CTA ───────────────────────────────────────────
 * Primary buttons drift toward cursor on hover (JS-driven).
 */
.u-magnetic {
  transition: transform 140ms ease-out;
  will-change: transform;
}

/* ── NAV: scroll-anchored glass ─────────────────────────────
 * Enhance existing <nav id="nav"> without re-writing it.
 */
nav#nav {
  transition:
    background 320ms var(--mm-ease),
    border-color 320ms var(--mm-ease),
    backdrop-filter 320ms var(--mm-ease),
    box-shadow 320ms var(--mm-ease);
}
nav#nav.scrolled {
  box-shadow: 0 1px 0 rgba(16, 30, 23, 0.04), 0 16px 40px -28px rgba(16, 30, 23, 0.22);
}

nav#nav .nav-links a:not(.nav-cta) {
  position: relative;
}
nav#nav .nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center left;
  transition: transform 260ms var(--mm-ease-hover);
}
@media (hover: hover) {
  nav#nav .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
}

/* ── FORM FOCUS RING ────────────────────────────────────────
 * Progressive enhancement on .cta-form and any .u-focus input.
 */
.cta-form {
  transition:
    border-color 220ms var(--mm-ease),
    box-shadow 260ms var(--mm-ease),
    transform 220ms var(--mm-ease);
}
.cta-form:focus-within {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -12px rgba(166, 132, 90, 0.35);
}

/* ── HERO MESH BACKGROUND ───────────────────────────────────
 * Three blurred blobs drifting independently. Sits behind the hero.
 * GPU-composited; each blob is animated via transform + opacity
 * (never top/left, never filter changes over time).
 */
.hero-mesh {
  position: absolute;
  inset: -10% -6% -10% -6%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  /* Contains the blob filter cost to its own compositor layer. */
  contain: layout paint;
  /* Mask softens the edges so the mesh fades into the page. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
          mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
}
.hero-mesh__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.hero-mesh__blob--a {
  width: 520px; height: 520px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 80%, transparent) 0%, transparent 70%);
  animation: mm-drift-a 22s var(--mm-ease) infinite alternate;
}
.hero-mesh__blob--b {
  width: 440px; height: 440px;
  bottom: -140px; right: -60px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent) 0%, transparent 70%);
  animation: mm-drift-b 26s var(--mm-ease) infinite alternate;
}
.hero-mesh__blob--c {
  width: 340px; height: 340px;
  top: 40%; left: 52%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 40%, transparent) 0%, transparent 70%);
  animation: mm-drift-c 30s var(--mm-ease) infinite alternate;
  opacity: 0.4;
}
@keyframes mm-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(60px, 40px, 0) scale(1.08); }
  100% { transform: translate3d(-20px, 80px, 0) scale(0.94); }
}
@keyframes mm-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-80px, -40px, 0) scale(1.1); }
  100% { transform: translate3d(40px, -80px, 0) scale(0.9); }
}
@keyframes mm-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-40px, 60px, 0) scale(0.95); }
  100% { transform: translate3d(50px, -30px, 0) scale(1.08); }
}

[data-theme="dark"] .hero-mesh { opacity: 0.6; }
[data-theme="dark"] .hero-mesh__blob--a {
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 65%, transparent) 0%, transparent 70%);
}
[data-theme="dark"] .hero-mesh__blob--b {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%);
}

/* Hero copy always sits above the mesh. */
.hero > .hero-copy,
.hero > .phone-wrap { position: relative; z-index: 2; }
.hero { position: relative; isolation: isolate; }

/* ── SHIMMER (for skeletons / numeric highlights) ───────── */
@keyframes mm-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.u-shimmer {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--muted) 25%, transparent) 0%,
              color-mix(in srgb, var(--muted) 45%, transparent) 50%,
              color-mix(in srgb, var(--muted) 25%, transparent) 100%);
  background-size: 200% 100%;
  animation: mm-shimmer 1.8s linear infinite;
}

/* ── REDUCED MOTION ─────────────────────────────────────────
 * Respect user preference. Keep opacity fades (they help legibility)
 * but remove all transforms and loops.
 */
@media (prefers-reduced-motion: reduce) {
  .u-reveal,
  .u-reveal[data-variant="fade"],
  .u-reveal[data-variant="scale"],
  .u-reveal[data-variant="left"],
  .u-reveal[data-variant="right"],
  .u-reveal[data-variant="subtle"] {
    transform: none !important;
    transition: opacity 200ms linear !important;
  }
  .u-tilt, .u-magnetic, .u-lift { transform: none !important; }
  .hero-mesh__blob { animation: none !important; }
  .u-shimmer { animation: none !important; background: color-mix(in srgb, var(--muted) 30%, transparent) !important; }
}