/* ─────────────────────────────────────────────────────
   OSUS Motion System — Enterprise Motion
   Source: OSUS Digital Experience System V2.1
   Purpose: Reveal relationships and flows, not spectacle.
   ───────────────────────────────────────────────────── */

/* ── Reveal Animations ──────────────────────────────── */

/* Elements start invisible and animate in on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--duration-slow) var(--ease-decelerate),
    transform var(--duration-slow) var(--ease-decelerate);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="up"] {
  transform: translateY(32px);
}

[data-reveal="right"] {
  transform: translateX(-24px);
}

[data-reveal="left"] {
  transform: translateX(24px);
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 560ms; }
[data-stagger].is-visible > *:nth-child(9) { transition-delay: 640ms; }

[data-stagger] > * {
  transition:
    opacity   var(--duration-slow) var(--ease-decelerate),
    transform var(--duration-slow) var(--ease-decelerate);
}

/* ── Flow Lines (SVG animated paths) ────────────────── */

.flow-line path,
.flow-line line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset var(--duration-slowest) var(--ease-decelerate);
}

.flow-line.is-visible path,
.flow-line.is-visible line {
  stroke-dashoffset: 0;
}

/* ── Pulse dot (live indicator) ─────────────────────── */

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  position: relative;
}

.pulse-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.6); opacity: 0; }
}

/* ── Floating animation (gentle) ────────────────────── */

.float-gentle {
  animation: float-gentle 4s ease-in-out infinite;
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Node ping ──────────────────────────────────────── */

.node-ping {
  animation: node-ping 2.5s var(--ease-standard) infinite;
}

@keyframes node-ping {
  0%, 100% { box-shadow: 0 0 0 0 var(--orange-20); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

/* ── Hero text animation ────────────────────────────── */

.hero-word {
  display: inline-block;
  overflow: hidden;
}

.hero-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--duration-slower) var(--ease-spring);
}

.hero-word.is-visible .hero-word-inner {
  transform: translateY(0);
}

/* ── Magnetic button effect ─────────────────────────── */

.btn--magnetic {
  will-change: transform;
}

/* ── Canvas container ───────────────────────────────── */

.canvas-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Section transitions ────────────────────────────── */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: var(--z-cursor);
  transform: translateX(100%);
  pointer-events: none;
}

/* ── Reduced motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > *,
  .flow-line path,
  .flow-line line,
  .float-gentle,
  .node-ping,
  .hero-word-inner {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }

  .pulse-dot::before { animation: none; }
}