[data-reveal]{
  opacity:0;
  transition:
    opacity .85s cubic-bezier(.16,.8,.24,1),
    transform .85s cubic-bezier(.16,.8,.24,1);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="fade-up"]{ transform: translateY(46px); }
[data-reveal="fade-left"]{ transform: translateX(-46px); }
[data-reveal="fade-right"]{ transform: translateX(46px); }
[data-reveal="fade-in"]{ transform: none; }
[data-reveal="scale-in"]{ transform: scale(0.94); }

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

[data-reveal].is-visible{ will-change:auto; }

.gear-divider{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px 0;
  margin:6px 0;
}
.gear-divider .gear-line{
  flex:1 1 auto;
  height:1px;
  max-width:340px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,0.35), transparent);
}
.gear-divider .gear-line.left{ background:linear-gradient(90deg, transparent, rgba(34,211,238,0.35)); }
.gear-divider .gear-line.right{ background:linear-gradient(270deg, transparent, rgba(34,211,238,0.35)); }

.gear-divider .gear-cluster{
  position:relative;
  width:64px;
  height:44px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gear-divider .gear-icon{
  position:absolute;
  color:var(--cyan);
  filter:drop-shadow(0 0 8px rgba(34,211,238,0.45));
  animation-play-state: paused;
}
.gear-divider .gear-icon.g1{
  font-size:26px;
  left:6px;
  top:8px;
  animation: gearSpinCW 7s linear infinite;
}
.gear-divider .gear-icon.g2{
  font-size:16px;
  right:4px;
  top:2px;
  opacity:.75;
  animation: gearSpinCCW 5s linear infinite;
}
.gear-divider.is-visible .gear-icon{ animation-play-state: running; }

@keyframes gearSpinCW{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes gearSpinCCW{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }

.scroll-clock{
  position:fixed;
  top:50%;
  right:22px;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  z-index:60;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
.scroll-clock.is-active{ opacity:1; }
.scroll-clock-face{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  border:1.5px solid rgba(34,211,238,0.35);
  background:rgba(6,13,21,0.55);
  backdrop-filter: blur(4px);
  box-shadow:0 0 18px rgba(34,211,238,0.15);
}
.scroll-clock-face::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--cyan);
}
.scroll-clock-hand{
  position:absolute;
  left:50%;
  bottom:50%;
  width:2px;
  height:16px;
  margin-left:-1px;
  background:var(--cyan);
  border-radius:2px;
  transform-origin:bottom center;
  transform:rotate(0deg);
  box-shadow:0 0 6px rgba(34,211,238,0.6);
}

@media (max-width: 780px){
  .scroll-clock{ display:none; }
}

.orbit-ring{
  transition: transform .05s linear;
  will-change: transform;
}

.no-motion [data-reveal]{
  transition-duration: .01ms !important;
}
.no-motion .gear-divider .gear-icon{
  animation: none !important;
}
.no-motion .scroll-clock{ display:none !important; }
.no-motion .orbit-ring{ transition:none !important; transform:none !important; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    transition-duration: .01ms !important;
  }
  .gear-divider .gear-icon{
    animation: none !important;
  }
  .scroll-clock{ display:none !important; }
  .orbit-ring{ transition:none !important; transform:none !important; }
}