/* ============================================================
 * 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(10, 22, 40, 0.04), 0 16px 40px -28px rgba(10, 22, 40, 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 color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ── 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;
}

/* ── SCROLL PROGRESS BAR ────────────────────────────────────
 * Hairline accent gradient at the very top, tracks page scroll.
 * Width is set inline by motion.js on each scroll frame.
 */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 60%, transparent) 100%);
  z-index: 1000;
  pointer-events: none;
  transition: opacity 240ms var(--mm-ease);
  opacity: 0;
}
.scroll-progress.is-visible { opacity: 1; }

/* ── MARQUEE STRIP ──────────────────────────────────────────
 * Infinite horizontal scroll of category names.
 * Two duplicated tracks for seamless loop.
 */
.mm-marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.mm-marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: mm-marquee-scroll 38s linear infinite;
  will-change: transform;
}
.mm-marquee__item {
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.6px;
  color: var(--ink);
  white-space: nowrap;
}
.mm-marquee__item::after {
  content: "";
  display: inline-block;
  width: 1px; height: 0.8em;
  background: var(--border);
  margin-left: 56px;
}
.mm-marquee__item:last-child::after { display: none; }
@keyframes mm-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) {
  .mm-marquee:hover .mm-marquee__track { animation-play-state: paused; }
}

/* ── HERO WORD STAGGER ──────────────────────────────────────
 * Splits the hero h1 into word-spans which fade-up one by one.
 * The script tags each span with .mm-word and an inline delay.
 */
.mm-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  transition:
    opacity   var(--mm-dur-reveal) var(--mm-ease),
    transform var(--mm-dur-reveal) var(--mm-ease);
  will-change: opacity, transform;
}
.mm-word.is-in { opacity: 1; transform: none; }

/* ── PHONE FLOAT ────────────────────────────────────────────
 * Gentle vertical bob on the hero phone mockup.
 * Stacks on top of the existing tilt; tilt resets when active.
 */
@keyframes mm-phone-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
.phone-wrap.u-tilt:not(.is-tilting) {
  animation: mm-phone-float 6.5s var(--mm-ease) infinite;
}

/* ── HOVER GLOW ─────────────────────────────────────────────
 * Accent radial glow that follows the cursor across cards.
 * Apply .u-glow on any card surface.
 */
.u-glow {
  position: relative;
  isolation: isolate;
}
.u-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%),
              color-mix(in srgb, var(--accent) 22%, transparent) 0%,
              transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--mm-ease-hover);
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .u-glow:hover::before { opacity: 1; }
}
.u-glow > * { position: relative; z-index: 1; }

/* ── SECTION H2 UNDERLINE DRAW ─────────────────────────────
 * Accent rule that draws left-to-right under any
 * <h2 class="sh"> when its container reveals.
 */
h2.sh {
  position: relative;
  display: inline-block;
}
h2.sh::after {
  content: "";
  position: absolute;
  left: 0; bottom: -10px;
  height: 2px; width: 64px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms 200ms var(--mm-ease);
}
.u-reveal.is-in h2.sh::after,
h2.sh.u-reveal.is-in::after { transform: scaleX(1); }

/* ── 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; }
  .mm-marquee__track { animation: none !important; }
  .phone-wrap.u-tilt:not(.is-tilting) { animation: none !important; }
  .mm-word { opacity: 1 !important; transform: none !important; transition: opacity 200ms linear !important; }
  h2.sh::after { transform: scaleX(1) !important; transition: none !important; }
}