@keyframes softFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(.4deg); }
}

@keyframes linePulse {
  0%, 100% { opacity: .34; }
  50% { opacity: .82; }
}

@keyframes scanMove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.hero-figure img {
  animation: softFloat 6.5s ease-in-out infinite;
}

.section-lines path {
  animation: linePulse 4.8s ease-in-out infinite;
}

.section-lines path:nth-child(2) {
  animation-delay: -1.4s;
}

.section-lines path:nth-child(3) {
  animation-delay: -2.1s;
}

.project-card::before,
.cinema-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -60%;
  height: 60%;
  z-index: 4;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.16), transparent);
  transform: translateY(-100%);
  pointer-events: none;
  opacity: .5;
}

.project-card:hover::before,
.cinema-card:hover::before {
  animation: scanMove 900ms ease;
}

.section.is-sleeping .section-lines path,
.section.is-sleeping .hero-figure img {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero-figure img,
  .section-lines path,
  .project-card:hover::before,
  .cinema-card:hover::before {
    animation: none !important;
  }
}


@keyframes heroCircuitPulse {
  0%, 100% { opacity: .48; }
  50% { opacity: .92; }
}

@keyframes heroHudRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

@keyframes heroCalloutFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes heroNodeBlink {
  0%, 100% { opacity: .62; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

.hero-circuit path {
  animation: linePulse 4.8s ease-in-out infinite;
}

.hero-circuit path:nth-child(2) {
  animation-delay: -1.6s;
}

.hero-circuit circle {
  animation: heroNodeBlink 2.8s ease-in-out infinite;
}

.hero-circuit circle:nth-child(3) {
  animation-delay: -.9s;
}

.hero-circuit circle:nth-child(4) {
  animation-delay: -1.5s;
}

.hero-hud circle:first-of-type {
  transform-origin: 50% 50%;
  animation: heroHudRotate 26s linear infinite;
}

.hero-hud circle:last-of-type {
  transform-origin: 50% 50%;
  animation: heroHudRotate 18s linear infinite reverse;
}

.hero-callout {
  animation: heroCalloutFloat 5.8s ease-in-out infinite;
}

.hero-callout-b {
  animation-delay: -2.3s;
}

.section.is-sleeping .hero-circuit path,
.section.is-sleeping .hero-circuit circle,
.section.is-sleeping .hero-hud circle,
.section.is-sleeping .hero-callout {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero-circuit path,
  .hero-circuit circle,
  .hero-hud circle,
  .hero-callout {
    animation: none !important;
  }
}


@keyframes systemsFlowDash {
  0% { stroke-dashoffset: 220; }
  100% { stroke-dashoffset: 0; }
}

@keyframes systemsNodePulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes systemsBlockGlow {
  0%, 100% { opacity: .56; }
  50% { opacity: .94; }
}

.orbit-line,
.sys-flow {
  stroke-dasharray: 14 16;
  animation: systemsFlowDash 7.4s linear infinite;
}

.orbit-line.line-b,
.sys-flow-b {
  animation-duration: 9.2s;
  animation-direction: reverse;
}

.orbit-line.line-c {
  animation-duration: 11s;
}

.orbit-nodes circle,
.sys-nodes circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: systemsNodePulse 2.9s ease-in-out infinite;
}

.orbit-nodes circle:nth-child(2),
.sys-nodes circle:nth-child(2) { animation-delay: -.5s; }

.orbit-nodes circle:nth-child(3),
.sys-nodes circle:nth-child(3) { animation-delay: -1s; }

.orbit-nodes circle:nth-child(4),
.sys-nodes circle:nth-child(4) { animation-delay: -1.5s; }

.data-block {
  animation: systemsBlockGlow 5.6s ease-in-out infinite;
}

.data-block.block-b { animation-delay: -1.2s; }
.data-block.block-c { animation-delay: -2.2s; }
.data-block.block-d { animation-delay: -3.1s; }

.section.is-sleeping .orbit-line,
.section.is-sleeping .sys-flow,
.section.is-sleeping .orbit-nodes circle,
.section.is-sleeping .sys-nodes circle,
.section.is-sleeping .data-block {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-line,
  .sys-flow,
  .orbit-nodes circle,
  .sys-nodes circle,
  .data-block {
    animation: none !important;
  }
}


@keyframes motionTimelineDash {
  0% { stroke-dashoffset: 180; }
  100% { stroke-dashoffset: 0; }
}

@keyframes motionPlayheadSlide {
  0%, 100% { transform: translateX(-18px); }
  50% { transform: translateX(22px); }
}

@keyframes motionCaptionPulse {
  0%, 100% { opacity: .42; }
  50% { opacity: .92; }
}

@keyframes motionModuleGlow {
  0%, 100% { opacity: .58; }
  50% { opacity: .98; }
}

.timeline-spine,
.motion-signal {
  stroke-dasharray: 12 14;
  animation: motionTimelineDash 7.8s linear infinite;
}

.timeline-spine-b {
  animation-duration: 9.4s;
  animation-direction: reverse;
}

.timeline-spine-c {
  animation-duration: 11.2s;
}

.timeline-playhead {
  animation: motionPlayheadSlide 5.6s ease-in-out infinite;
}

.timeline-playhead circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: systemsNodePulse 2.7s ease-in-out infinite;
}

.timeline-playhead circle:nth-child(2) { animation-delay: -.5s; }
.timeline-playhead circle:nth-child(3) { animation-delay: -1s; }

.caption-bars rect {
  animation: motionCaptionPulse 3.8s ease-in-out infinite;
}

.caption-bars rect:nth-child(2) { animation-delay: -.4s; }
.caption-bars rect:nth-child(3) { animation-delay: -.8s; }
.caption-bars rect:nth-child(4) { animation-delay: -1.2s; }
.caption-bars rect:nth-child(5) { animation-delay: -1.6s; }
.caption-bars rect:nth-child(6) { animation-delay: -2s; }

.module-card {
  animation: motionModuleGlow 5.8s ease-in-out infinite;
}

.module-card.module-b { animation-delay: -1.4s; }
.module-card.module-c { animation-delay: -2.8s; }

.lesson-stack span::before {
  animation: motionCaptionPulse 4.2s ease-in-out infinite;
}

.lesson-stack span:nth-child(2)::before { animation-delay: -.6s; }
.lesson-stack span:nth-child(3)::before { animation-delay: -1.2s; }
.lesson-stack span:nth-child(4)::before { animation-delay: -1.8s; }

.section.is-sleeping .timeline-spine,
.section.is-sleeping .motion-signal,
.section.is-sleeping .timeline-playhead,
.section.is-sleeping .timeline-playhead circle,
.section.is-sleeping .caption-bars rect,
.section.is-sleeping .module-card,
.section.is-sleeping .lesson-stack span::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-spine,
  .motion-signal,
  .timeline-playhead,
  .timeline-playhead circle,
  .caption-bars rect,
  .module-card,
  .lesson-stack span::before {
    animation: none !important;
  }
}


/* LEARNING TIMELINE bars should wait until the console is actually in view. */
.lesson-stack span::before {
  transform-origin: left center;
  transform: scaleX(0);
  animation: none !important;
}

.motion-mini-console.lesson-visible .lesson-stack span::before {
  animation: lessonProgressFill 900ms cubic-bezier(.2,.9,.2,1) forwards !important;
}

.motion-mini-console.lesson-visible .lesson-stack span:nth-child(1)::before {
  animation-delay: 80ms !important;
}

.motion-mini-console.lesson-visible .lesson-stack span:nth-child(2)::before {
  animation-delay: 210ms !important;
}

.motion-mini-console.lesson-visible .lesson-stack span:nth-child(3)::before {
  animation-delay: 340ms !important;
}

.motion-mini-console.lesson-visible .lesson-stack span:nth-child(4)::before {
  animation-delay: 470ms !important;
}

.motion-mini-console.lesson-complete .lesson-stack span::before {
  transform: scaleX(1);
}

@keyframes lessonProgressFill {
  0% {
    transform: scaleX(0);
    opacity: .35;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: .88;
  }
}

.section.is-sleeping .motion-mini-console.lesson-visible .lesson-stack span::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-stack span::before {
    transform: scaleX(1);
    animation: none !important;
  }
}


@keyframes vfxSplineDraw {
  0% { stroke-dashoffset: 220; }
  100% { stroke-dashoffset: 0; }
}

@keyframes vfxScan {
  0%, 100% { transform: translateY(-70px); opacity: .28; }
  50% { transform: translateY(310px); opacity: .92; }
}

@keyframes vfxPointPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.32); }
}

@keyframes vfxNodeFlicker {
  0%, 100% { opacity: .66; }
  48% { opacity: .98; }
  52% { opacity: .72; }
  56% { opacity: 1; }
}

.roto-spline {
  stroke-dasharray: 12 16;
  animation: vfxSplineDraw 7.6s linear infinite;
}

.spline-b {
  animation-duration: 9.4s;
  animation-direction: reverse;
}

.scan-line {
  animation: vfxScan 5.8s ease-in-out infinite;
}

.track-points circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: vfxPointPulse 2.8s ease-in-out infinite;
}

.track-points circle:nth-child(2) { animation-delay: -.4s; }
.track-points circle:nth-child(3) { animation-delay: -.8s; }
.track-points circle:nth-child(4) { animation-delay: -1.2s; }
.track-points circle:nth-child(5) { animation-delay: -1.6s; }
.track-points circle:nth-child(6) { animation-delay: -2.0s; }

.vfx-node {
  animation: vfxNodeFlicker 4.8s ease-in-out infinite;
}

.vfx-node.node-b {
  animation-delay: -1.9s;
}

.vfx-status-grid span {
  animation: motionCaptionPulse 3.8s ease-in-out infinite;
}

.vfx-status-grid span:nth-child(2) { animation-delay: -.55s; }
.vfx-status-grid span:nth-child(3) { animation-delay: -1.1s; }
.vfx-status-grid span:nth-child(4) { animation-delay: -1.65s; }

.section.is-sleeping .roto-spline,
.section.is-sleeping .scan-line,
.section.is-sleeping .track-points circle,
.section.is-sleeping .vfx-node,
.section.is-sleeping .vfx-status-grid span {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .roto-spline,
  .scan-line,
  .track-points circle,
  .vfx-node,
  .vfx-status-grid span {
    animation: none !important;
  }
}


@keyframes labWaveFlow {
  0% { stroke-dashoffset: 260; }
  100% { stroke-dashoffset: 0; }
}

@keyframes labRingPulse {
  0%, 100% { opacity: .28; transform: scale(.88); }
  50% { opacity: .88; transform: scale(1.18); }
}

@keyframes labDotPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.28); }
}

@keyframes labBlockGlitch {
  0%, 100% { opacity: .72; transform: translateX(0); }
  46% { opacity: .96; transform: translateX(0); }
  48% { opacity: .72; transform: translateX(2px); }
  50% { opacity: 1; transform: translateX(-1px); }
  52% { opacity: .86; transform: translateX(0); }
}

@keyframes labMeterPulse {
  0%, 100% { opacity: .55; transform: scaleX(.86); }
  50% { opacity: .94; transform: scaleX(1); }
}

.lab-wave,
.lab-step {
  stroke-dasharray: 18 16;
  animation: labWaveFlow 7.8s linear infinite;
}

.wave-b {
  animation-duration: 9.6s;
  animation-direction: reverse;
}

.lab-step {
  animation-duration: 6.4s;
}

.pulse-rings circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: labRingPulse 3.6s ease-in-out infinite;
}

.pulse-rings circle:nth-child(2) { animation-delay: -1.1s; }
.pulse-rings circle:nth-child(3) { animation-delay: -2.2s; }

.lab-dots circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: labDotPulse 2.8s ease-in-out infinite;
}

.lab-dots circle:nth-child(2) { animation-delay: -.45s; }
.lab-dots circle:nth-child(3) { animation-delay: -.9s; }
.lab-dots circle:nth-child(4) { animation-delay: -1.35s; }
.lab-dots circle:nth-child(5) { animation-delay: -1.8s; }

.lab-node-block {
  animation: labBlockGlitch 5.4s ease-in-out infinite;
}

.lab-node-block.node-audio { animation-delay: -1.2s; }
.lab-node-block.node-campaign { animation-delay: -2.4s; }
.lab-node-block.node-flash { animation-delay: -3.6s; }

.lab-meter-stack span::before {
  transform-origin: left center;
  animation: labMeterPulse 3.8s ease-in-out infinite;
}

.lab-meter-stack span:nth-child(2)::before { animation-delay: -.5s; }
.lab-meter-stack span:nth-child(3)::before { animation-delay: -1s; }
.lab-meter-stack span:nth-child(4)::before { animation-delay: -1.5s; }

.section.is-sleeping .lab-wave,
.section.is-sleeping .lab-step,
.section.is-sleeping .pulse-rings circle,
.section.is-sleeping .lab-dots circle,
.section.is-sleeping .lab-node-block,
.section.is-sleeping .lab-meter-stack span::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .lab-wave,
  .lab-step,
  .pulse-rings circle,
  .lab-dots circle,
  .lab-node-block,
  .lab-meter-stack span::before {
    animation: none !important;
  }
}


@keyframes contactSignalDash {
  0% { stroke-dashoffset: 260; }
  100% { stroke-dashoffset: 0; }
}

@keyframes contactNodePulse {
  0%, 100% { opacity: .48; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.22); }
}

@keyframes contactStatusPulse {
  0%, 100% { opacity: .62; }
  50% { opacity: .95; }
}

.contact-path,
.contact-wave,
.contact-ring {
  stroke-dasharray: 16 18;
  animation: contactSignalDash 8.4s linear infinite;
}

.contact-wave {
  animation-duration: 7.2s;
  animation-direction: reverse;
}

.contact-nodes circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: contactNodePulse 2.8s ease-in-out infinite;
}

.contact-nodes circle:nth-child(2) { animation-delay: -.45s; }
.contact-nodes circle:nth-child(3) { animation-delay: -.9s; }
.contact-nodes circle:nth-child(4) { animation-delay: -1.35s; }
.contact-nodes circle:nth-child(5) { animation-delay: -1.8s; }
.contact-nodes circle:nth-child(6) { animation-delay: -2.25s; }

.contact-status-grid span {
  animation: contactStatusPulse 3.8s ease-in-out infinite;
}

.contact-status-grid span:nth-child(2) { animation-delay: -.55s; }
.contact-status-grid span:nth-child(3) { animation-delay: -1.1s; }
.contact-status-grid span:nth-child(4) { animation-delay: -1.65s; }

.section.is-sleeping .contact-path,
.section.is-sleeping .contact-wave,
.section.is-sleeping .contact-ring,
.section.is-sleeping .contact-nodes circle,
.section.is-sleeping .contact-status-grid span {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .contact-path,
  .contact-wave,
  .contact-ring,
  .contact-nodes circle,
  .contact-status-grid span {
    animation: none !important;
  }
}


/* Exact FX pause pass.
   This is deliberately narrow:
   - no global animation reset
   - no hiding
   - no z-index changes
   - only exact FX wrappers are paused/running
*/

.fx-paused,
.fx-paused *,
.fx-paused::before,
.fx-paused::after,
.fx-paused *::before,
.fx-paused *::after {
  animation-play-state: paused !important;
}

.fx-running,
.fx-running *,
.fx-running::before,
.fx-running::after,
.fx-running *::before,
.fx-running *::after {
  animation-play-state: running !important;
}

/* Global systems stay outside the FX pause system.
   Keep this narrow so reflected clone content still obeys pause rules. */
.scroll-trail,
.scroll-trail *,
.fake-cursor,
.fake-cursor *,
.mirror-cursor,
.mirror-cursor *,
.base-reflection,
.base-reflection * {
  animation-play-state: running !important;
}


/* Mirror pause respect fix.
   The previous pass used `.mirror-nav *` as always-running, which also matched
   the reflected page clone. This lets the mirror chrome keep moving while
   the reflected page obeys fx-paused / fx-running. */

/* Re-assert paused reflected FX layers inside the mirror. */
#mirrorContent .fx-paused,
#mirrorContent .fx-paused *,
#mirrorContent .fx-paused::before,
#mirrorContent .fx-paused::after,
#mirrorContent .fx-paused *::before,
#mirrorContent .fx-paused *::after {
  animation-play-state: paused !important;
}

/* Re-assert running reflected FX layers only when JS says they are running. */
#mirrorContent .fx-running,
#mirrorContent .fx-running *,
#mirrorContent .fx-running::before,
#mirrorContent .fx-running::after,
#mirrorContent .fx-running *::before,
#mirrorContent .fx-running *::after {
  animation-play-state: running !important;
}

/* Keep mirror hardware/chrome alive without forcing the reflected page clone alive. */
.mirror-nav,
.lid-shell,
.mirror-lid,
.mirror-viewport,
.mirror-flip,
.mirror-haze,
.mirror-label,
.nav-base,
.nav-base *,
.mirror-cursor,
.mirror-cursor *,
.base-reflection,
.base-reflection *,
.fake-cursor,
.fake-cursor * {
  animation-play-state: running !important;
}