/* ============================================================================
   PADEV Zenith — motion layer
   Timings, easings and loop lengths are the ones published on dark board 06
   (Motion Design System) and light board 06 (Motion Library). Motion is
   hierarchical: the brand focal object moves, supporting surfaces respond,
   decoration stays quiet.
   ========================================================================== */

@keyframes z-spin { to { rotate: 360deg; } }

@keyframes z-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-0.3rem); opacity: 1; }
}

/* 01 Aurora background — seamless 12s loop */
@keyframes z-aurora-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  50% { transform: translate3d(2%, 2%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.05); }
}

/* 02 Gradient flow — 4s linear loop */
@keyframes z-gradient-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 03 Glass reflection — light sweep, 3.2s */
@keyframes z-sweep {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(220%); }
}

/* 08 Card floating — 2.8s ease-in-out loop */
@keyframes z-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--float-distance) * -1)); }
}

/* 11 Text reveal — mask + fade */
@keyframes z-text-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 17 Infinite marquee */
@keyframes z-marquee { to { transform: translateX(-50%); } }

/* Focal halo: slow breathing bloom behind the brand object (board 06 · 01) */
@keyframes z-halo-breathe {
  0%, 100% { transform: scale(1); opacity: calc(var(--glow-intensity) * 0.5); }
  50% { transform: scale(1.06); opacity: calc(var(--glow-intensity) * 0.75); }
}

/* Pulse used by live indicators (board 08 animated icon concepts) */
@keyframes z-pulse {
  0%, 100% { opacity: 1; scale: 1; }
  50% { opacity: 0.45; scale: 0.9; }
}

/* --- Scroll reveal (04 on light board 06: 600ms, cubic-bezier) ------------- */
[data-motion="reveal"],
[data-motion="stagger"] > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--duration-m) var(--ease-default),
    transform var(--duration-m) var(--ease-default);
}

[data-motion="reveal"].is-visible,
[data-motion="stagger"].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Stagger base 80ms — board 06 global motion tokens. */
[data-motion="stagger"].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-motion="stagger"].is-visible > *:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
[data-motion="stagger"].is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
[data-motion="stagger"].is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
[data-motion="stagger"].is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); }
[data-motion="stagger"].is-visible > *:nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); }
[data-motion="stagger"].is-visible > *:nth-child(n + 7) { transition-delay: calc(var(--stagger-step) * 6); }

[data-motion="text-reveal"] {
  opacity: 0;
}

[data-motion="text-reveal"].is-visible {
  animation: z-text-reveal var(--duration-xl) var(--ease-default) forwards;
}

/* --- Ambient loops --------------------------------------------------------- */
[data-motion="aurora"] {
  position: absolute;
  inset: -20%;
  z-index: var(--z-decor);
  pointer-events: none;
  background: var(--atmosphere);
  filter: saturate(var(--aurora-saturation)) blur(12px);
  opacity: var(--aurora-alpha);
  animation: z-aurora-drift var(--loop-aurora) var(--ease-soft) infinite;
  will-change: transform;
}

[data-motion="float"] {
  animation: z-float var(--loop-float) var(--ease-soft) infinite;
  will-change: transform;
}

[data-motion="pulse"] {
  animation: z-pulse calc(var(--duration-l) * 2) var(--ease-soft) infinite;
}

/* The aurora bar in the material section is a specimen: it documents the ramp
   and must stay static. Only elements that opt in flow. */
[data-motion="gradient-flow"] {
  background-size: 200% 100%;
  animation: z-gradient-flow var(--loop-gradient) var(--ease-linear) infinite;
}

/* Glass reflection sweep across premium surfaces. */
[data-motion="sweep"] { position: relative; overflow: hidden; }

[data-motion="sweep"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 45%;
  background: var(--gradient-sheen);
  animation: z-sweep var(--loop-sweep) var(--ease-soft) infinite;
  pointer-events: none;
}

/* Infinite marquee track (board 06 · 17) */
.z-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 12%, var(--mask-opaque) 88%, transparent); }

.z-marquee__track {
  display: flex;
  gap: var(--space-48);
  width: max-content;
  animation: z-marquee var(--loop-marquee) var(--ease-linear) infinite;
}

/* --- Pointer-driven motion ------------------------------------------------- */
/* 04 Magnetic button: JS writes --mx/--my, CSS owns the easing. */
[data-motion="magnetic"] {
  transition: translate var(--duration-s) var(--ease-default),
    box-shadow var(--duration-hover) var(--ease-default);
  translate: var(--mx, 0) var(--my, 0);
}

/* 07 Hover lift, 0.45s in three steps on board 06 */
[data-motion="lift"] {
  transition: transform var(--duration-card) var(--ease-default),
    box-shadow var(--duration-card) var(--ease-default);
}

[data-motion="lift"]:hover {
  transform: translateY(calc(var(--lift-distance) * -1));
  box-shadow: var(--shadow-elevated);
}

/* 16 Parallax: JS writes --py from scroll/pointer within the declared depth. */
[data-motion="parallax"] {
  translate: 0 var(--py, 0);
  transition: translate var(--duration-s) var(--ease-soft);
  will-change: transform;
}

/* 05 Cursor glow — 24px, 60% intensity */
.z-cursor-glow {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: calc(var(--cursor-size) * 8);
  height: calc(var(--cursor-size) * 8);
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: var(--radius-pill);
  background: radial-gradient(closest-side, var(--pointer-glow), transparent 70%);
  opacity: 0;
  translate: calc(var(--cx, 50vw) - 50%) calc(var(--cy, 50vh) - 50%);
  transition: opacity var(--duration-s) var(--ease-default);
}

.z-cursor-glow.is-active { opacity: var(--glow-intensity); }

/* Ambient loops stop paying for themselves once the tab is hidden. */
.is-page-hidden .z-focal__halo,
.is-page-hidden [data-motion="aurora"],
.is-page-hidden [data-motion="float"],
.is-page-hidden [data-motion="pulse"],
.is-page-hidden [data-motion="sweep"]::before,
.is-page-hidden .z-marquee__track,
.is-page-hidden .z-aurora-bar,
.is-page-hidden .z-spinner,
.is-page-hidden .z-dots span {
  animation-play-state: paused;
}

/* --- Page entrance --------------------------------------------------------- */
[data-motion-page] { opacity: 0; transition: opacity var(--duration-page) var(--ease-default); }
[data-motion-page].is-ready { opacity: 1; }

/* ==========================================================================
   Reduced motion — every surface stays complete and readable, only the
   movement is removed. Required by the product motion contract.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  [data-motion="reveal"],
  [data-motion="stagger"] > *,
  [data-motion="text-reveal"] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  [data-motion-page] { opacity: 1; }
  .z-cursor-glow { display: none; }
  [data-motion="sweep"]::before { display: none; }
  [data-motion="magnetic"] { translate: 0; }
  [data-motion="parallax"] { translate: 0; }
}