/* Pave motion layer — quiet, operational, and opt-out by default. */

/* Scroll reveals only take effect after motion.js has confirmed support. */
html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  will-change: opacity, transform;
}
html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html.motion-ready [data-motion-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}
html.motion-ready [data-motion-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* The media slot accepts an optional Higgsfield loop without changing layout. */
.hero__media {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 0.85;
  margin-inline: auto;
}
.hero__media .diagram {
  width: 100%;
  height: 100%;
  max-width: none;
}
.hero__video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-base-elevated, #0a1628);
}
.hero__media.use-video-loop {
  aspect-ratio: 16 / 9;
  max-width: 640px;
}
.hero__media.has-video .hero__video { display: block; }
.hero__media.has-video .diagram { display: none; }

/* Hero art enters once, then stays still; the accent spine draws in quietly. */
html.motion-ready .hero__media {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: pave-hero-media-in 700ms var(--ease-out) 120ms forwards;
}
html.motion-ready .diagram__accent-line {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: pave-diagram-draw 1100ms var(--ease-out) 260ms forwards;
}
html.motion-ready .diagram__accent-dot {
  opacity: 0;
  animation: pave-diagram-dot-in 500ms var(--ease-out) 760ms forwards;
}

@keyframes pave-hero-media-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes pave-diagram-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes pave-diagram-dot-in {
  to { opacity: 1; }
}

/* Keyboard/focus and reduced-motion users get fully settled content. */
html.motion-ready [data-reveal]:focus-within,
html.motion-ready [data-motion-stagger]:focus-within,
html.motion-ready [data-motion-stagger]:focus-within > * {
  opacity: 1;
  transform: none;
}


/* Continuous diagram loop — readable motion (not a near-still video). */
html.motion-ready .diagram__svg {
  transform-origin: 50% 55%;
  animation: pave-diagram-breathe 7s var(--ease-out) infinite alternate;
}
html.motion-ready .diagram .plate-scope,
html.motion-ready .diagram [data-plate="scope"] {
  animation: pave-plate-float 5.5s ease-in-out infinite;
}
html.motion-ready .diagram .plate-build,
html.motion-ready .diagram [data-plate="build"] {
  animation: pave-plate-float 5.5s ease-in-out 0.4s infinite;
}
html.motion-ready .diagram .plate-run,
html.motion-ready .diagram [data-plate="run"] {
  animation: pave-plate-float 5.5s ease-in-out 0.8s infinite;
}
html.motion-ready .diagram__glow,
html.motion-ready .diagram [filter="url(#glow)"] {
  animation: pave-glow-pulse 3.2s ease-in-out infinite;
}

@keyframes pave-diagram-breathe {
  from { transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1); }
  to { transform: translate3d(0, -10px, 0) rotate(1.2deg) scale(1.02); }
}
@keyframes pave-plate-float {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
  50% { transform: translate3d(0, -8px, 0); opacity: 0.92; }
}
@keyframes pave-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(61,180,255,0.25)); }
  50% { filter: drop-shadow(0 0 18px rgba(61,180,255,0.55)); }
}

/* Prefer live SVG motion; video is optional enhancement when it actually moves. */
.hero__media.has-video .diagram { display: block; }
.hero__media.has-video .hero__video {
  display: none; /* hide near-still clips until we ship a stronger loop */
}
.hero__media.has-video.use-video-loop .hero__video { display: block; }
.hero__media.has-video.use-video-loop .diagram { display: none; }


/* Mobile: keep original SVG diagram; wow video/poster desktop-only */
@media (max-width: 767.98px) {
  .hero__media.use-video-loop {
    aspect-ratio: 1 / 0.85;
    max-width: 520px;
  }
  .hero__media.use-video-loop .hero__video,
  .hero__media.has-video.use-video-loop .hero__video {
    display: none !important;
  }
  .hero__media.use-video-loop .diagram,
  .hero__media.has-video.use-video-loop .diagram {
    display: block !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-motion-stagger] > *,
  html.motion-ready .hero__media,
  html.motion-ready .diagram__accent-line,
  html.motion-ready .diagram__accent-dot,
  html.motion-ready .diagram__svg,
  html.motion-ready .diagram .plate-scope,
  html.motion-ready .diagram .plate-build,
  html.motion-ready .diagram .plate-run,
  html.motion-ready .diagram [data-plate] {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none !important;
  }
  .hero__video { display: none !important; }
  .hero__media.has-video .diagram { display: block; }
}

/* Carrie Batch 1 wow bands. */
.wow-band__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid rgba(61,180,255,0.15);
  display: block;
}
.wow-band__img--square { max-width: min(480px, 100%); }