/* YUTO wow.css V8 — Motion layer */

/* ── Cursor glow ── */
#cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,207,255,.065) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transition: transform .12s ease-out;
}
@media (pointer: coarse) { #cursor-glow { display: none; } }

/* ── Scroll progress (already in style.css, override color just in case) ── */
#scroll-progress {
  background: linear-gradient(90deg, #00CFFF, #818CF8) !important;
  box-shadow: 0 0 8px #00CFFF !important;
}

/* ── Hero grid parallax ── */
.hero::before { transition: opacity 1s ease; }

/* ── Typed cursor ── */
.typed-cursor {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: #00CFFF;
  animation: cursor-blink 0.85s step-end infinite;
  vertical-align: middle;
  border-radius: 1px;
  margin-left: 2px;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* ── Feature item hover ── */
.feature-item { transition: background 0.18s ease-out; }

/* ── Stack band animate ── */
.stack-band { transition: background 0.18s ease-out, transform 0.2s; }

/* ── Arch node ── */
.arch-node { transition: border-color 0.2s ease-out; }

/* ── Nav mobile ── */
.nav-mobile { transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.32s; }

/* ── Quad cell hover ── */
.quad-cell { transition: background 0.18s; }
.quad-cell:not(.active):hover { background: rgba(0,207,255,.03); }

/* ── Navbar ── */
.navbar { transition: background 0.3s, border-color 0.3s, top 0.3s; }

/* ── Button press ── */
.btn { transition: background .15s, transform .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:active { transform: translateY(0) scale(0.98); }

/* ── Scroll indicator ── */
.scroll-indicator {
  position: absolute;
  bottom: 3rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232,235,245,.3);
  opacity: 0;
  animation: fade-in-up 0.6s ease-out 1.4s forwards, scroll-bob 2.5s ease-in-out 2s infinite;
}
@keyframes fade-in-up {
  from { opacity:0; transform:translateX(-50%) translateY(8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}
.scroll-indicator::before {
  content: '';
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(0,207,255,.5), transparent);
}

/* ── Reveal states ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.d1 { transition-delay: 0s; }
.d2 { transition-delay: 0.12s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.36s; }
.d5 { transition-delay: 0.48s; }
.d6 { transition-delay: 0.60s; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .split-inner, .typed-cursor,
  .scroll-indicator, #cursor-glow, .au { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}