/* Motion is an enhancement: content remains visible if JS is unavailable. */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 30;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.hero-visual {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --spot-x: 50%;
  --spot-y: 50%;
  transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2,.75,.2,1), box-shadow 650ms ease;
  will-change: transform;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(138,230,238,.13), transparent 36%);
  pointer-events: none;
}
.visual-scan {
  position: absolute;
  z-index: 0;
  top: 8%;
  bottom: 8%;
  width: 40%;
  left: -45%;
  background: linear-gradient(90deg, transparent, rgba(121,213,223,.055), transparent);
  transform: skewX(-18deg);
  animation: panel-scan 13s ease-in-out infinite;
  pointer-events: none;
}
.hero-visual:hover { box-shadow: 0 50px 115px rgba(0,0,0,.38), 0 0 65px rgba(64,201,217,.08); }
.visual-core { transform: translateZ(24px); transform-style: preserve-3d; }
.core-center { transform: translateZ(35px); }
.core-ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 16px rgba(167,232,236,.8);
}
.core-ring-one { animation: ring-breathe 6s ease-in-out infinite, ring-spin 32s linear infinite; }
.core-ring-two { animation: ring-breathe 8s ease-in-out infinite reverse, ring-spin 48s linear infinite reverse; }
.signal { transform: translateZ(65px); animation: signal-float 6s ease-in-out infinite; }
.signal-two { animation-delay: -2s; }
.signal-three { animation-delay: -4s; }
.visual-head,.visual-bottom { transform: translateZ(48px); }
.visual-state i { animation: state-pulse 2.8s ease-in-out infinite; }
.time-orbit { animation: orbit-turn 36s linear infinite; }
.time-clock { animation: time-hover 7s ease-in-out infinite; }
.time-clock b { animation: arrow-drift 4s ease-in-out infinite; }

.has-motion .hero-copy > * { opacity: 0; animation: intro-rise 900ms both cubic-bezier(.2,.75,.2,1); }
.has-motion .hero-copy > :nth-child(1) { animation-delay: 100ms; }
.has-motion .hero-copy > :nth-child(2) { animation-delay: 190ms; }
.has-motion .hero-copy > :nth-child(3) { animation-delay: 330ms; }
.has-motion .hero-copy > :nth-child(4) { animation-delay: 440ms; }
.has-motion .hero-copy > :nth-child(5) { animation-delay: 560ms; }
.has-motion .hero-visual { animation: visual-arrive 1200ms 250ms both cubic-bezier(.2,.75,.2,1); }
.has-motion [data-reveal] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 850ms ease, transform 850ms cubic-bezier(.2,.75,.2,1);
}
.has-motion [data-reveal].is-visible > * { opacity: 1; transform: translateY(0); }
.has-motion [data-reveal].is-visible > :nth-child(2) { transition-delay: 100ms; }
.has-motion [data-reveal].is-visible > :nth-child(3) { transition-delay: 190ms; }
.has-motion [data-reveal].is-visible > :nth-child(4) { transition-delay: 260ms; }
.process { position: relative; }
.process::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s 250ms cubic-bezier(.2,.75,.2,1);
}
.is-visible .process::before { transform: scaleX(1); }
.process-step { transition: background 300ms ease, padding-left 300ms ease; }
.process-step:hover { background: rgba(110,210,220,.055); padding-left: 12px; }
.demo-frame { transition: transform 550ms cubic-bezier(.2,.75,.2,1), box-shadow 550ms ease; }
.demo-frame:hover { transform: translateY(-7px); box-shadow: 0 45px 90px rgba(0,0,0,.32); }
.button-primary { transition: background 220ms, transform 300ms cubic-bezier(.2,.75,.2,1), box-shadow 300ms; }
.button-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(64,201,217,.16); }

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes visual-arrive {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ring-breathe {
  0%,100% { opacity: .55; scale: 1; }
  50% { opacity: 1; scale: 1.045; }
}
@keyframes ring-spin { to { rotate: 360deg; } }
@keyframes panel-scan {
  0%,15% { left: -45%; opacity: 0; }
  30% { opacity: 1; }
  55%,100% { left: 120%; opacity: 0; }
}
@keyframes signal-float {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes state-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(126,218,203,.25); }
  50% { box-shadow: 0 0 0 7px rgba(126,218,203,0); }
}
@keyframes orbit-turn { to { rotate: 360deg; } }
@keyframes time-hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes arrow-drift { 0%,100% { translate: 0 0; } 50% { translate: 5px -5px; } }

@media (hover: none), (max-width: 800px) {
  .hero-visual { transform: none !important; transition: none; will-change: auto; }
  .visual-core,.core-center,.signal,.visual-head,.visual-bottom { transform: none; }
  .signal { animation-duration: 8s; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-visual,.visual-core,.core-center,.signal,.visual-head,.visual-bottom,
  .demo-frame,.button-primary,.process-step { transform: none !important; transition: none !important; animation: none !important; }
  .core-ring,.visual-scan,.visual-state i,.time-orbit,.time-clock,.time-clock b { animation: none !important; }
  .has-motion .hero-copy > *, .has-motion .hero-visual,
  .has-motion [data-reveal] > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .process::before { display: none; }
}