/* ================= ELECTROH263 STUDIO — MOTION SYSTEM ================= */

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark { width: 70px; height: 70px; animation: spin-slow 3s linear infinite; }
.preloader-svg { fill: none; stroke: var(--accent-cyan); stroke-width: 2; filter: drop-shadow(0 0 12px var(--accent-cyan)); }
.preloader-code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.08em; }

/* ---------- Reveal on scroll ---------- */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-up.in-view { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

.services-grid .service-card.reveal-up:nth-child(1) { transition-delay: 0.05s; }
.services-grid .service-card.reveal-up:nth-child(2) { transition-delay: 0.1s; }
.services-grid .service-card.reveal-up:nth-child(3) { transition-delay: 0.15s; }
.services-grid .service-card.reveal-up:nth-child(4) { transition-delay: 0.2s; }
.services-grid .service-card.reveal-up:nth-child(5) { transition-delay: 0.25s; }
.services-grid .service-card.reveal-up:nth-child(6) { transition-delay: 0.3s; }

.process-line .process-step:nth-child(1) { transition-delay: 0.03s; }
.process-line .process-step:nth-child(2) { transition-delay: 0.06s; }
.process-line .process-step:nth-child(3) { transition-delay: 0.09s; }
.process-line .process-step:nth-child(4) { transition-delay: 0.12s; }
.process-line .process-step:nth-child(5) { transition-delay: 0.15s; }
.process-line .process-step:nth-child(6) { transition-delay: 0.18s; }
.process-line .process-step:nth-child(7) { transition-delay: 0.21s; }
.process-line .process-step:nth-child(8) { transition-delay: 0.24s; }
.process-line .process-step:nth-child(9) { transition-delay: 0.27s; }

.works-grid .work-card:nth-child(1) { transition-delay: 0.05s; }
.works-grid .work-card:nth-child(2) { transition-delay: 0.1s; }
.works-grid .work-card:nth-child(3) { transition-delay: 0.15s; }
.works-grid .work-card:nth-child(4) { transition-delay: 0.2s; }

.hud-grid .hud-card:nth-child(1) { transition-delay: 0.05s; }
.hud-grid .hud-card:nth-child(2) { transition-delay: 0.1s; }
.hud-grid .hud-card:nth-child(3) { transition-delay: 0.15s; }
.hud-grid .hud-card:nth-child(4) { transition-delay: 0.2s; }

.faq-list .faq-item:nth-child(1) { transition-delay: 0.03s; }
.faq-list .faq-item:nth-child(2) { transition-delay: 0.06s; }
.faq-list .faq-item:nth-child(3) { transition-delay: 0.09s; }
.faq-list .faq-item:nth-child(4) { transition-delay: 0.12s; }
.faq-list .faq-item:nth-child(5) { transition-delay: 0.15s; }
.faq-list .faq-item:nth-child(6) { transition-delay: 0.18s; }
.faq-list .faq-item:nth-child(7) { transition-delay: 0.21s; }

.hero-text.reveal-up, .hero .reveal-up { transition-delay: 0s; }
.hero-buttons.reveal-up { transition-delay: 0.15s; }
.hero-terminal.reveal-up { transition-delay: 0.25s; }
.hero-title.reveal-up { transition-delay: 0.05s; }
.hero-desc.reveal-up { transition-delay: 0.1s; }

/* ---------- Custom cursor (desktop only, handled in JS) ---------- */
.cursor-dot, .cursor-glow { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 1500; transform: translate(-50%, -50%); }
.cursor-dot { width: 8px; height: 8px; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); transition: transform 0.15s var(--ease), opacity 0.3s; opacity: 0; }
.cursor-glow { width: 260px; height: 260px; background: radial-gradient(circle, rgba(0, 229, 255, 0.08), transparent 70%); transition: opacity 0.3s; opacity: 0; }
.cursor-active .cursor-dot, .cursor-active .cursor-glow { opacity: 1; }
.cursor-dot.cursor-hover { transform: translate(-50%, -50%) scale(2.4); }

/* ---------- Keyframes ---------- */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink-status { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes float-badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-core { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes aurora-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 90px) scale(1.1); } }
@keyframes aurora-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-80px, -60px) scale(1.08); } }
@keyframes aurora-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 70px) scale(1.18); } }

.ring-spin-slow { transform-origin: 200px 200px; animation: spin-slow 18s linear infinite; }
.ring-spin-fast { transform-origin: 200px 200px; animation: spin-reverse 11s linear infinite; }
.core-dot { animation: pulse-core 2.4s ease-in-out infinite; }
.float-badge { animation: float-badge 4.5s ease-in-out infinite; }
.badge-2 { animation-delay: 0.6s; }
.badge-3 { animation-delay: 1.2s; }

/* ---------- Magnetic buttons & tilt cards ---------- */
.magnetic { transition: transform 0.25s var(--ease); }
.tilt-card { transition: transform 0.25s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ring-spin-slow, .ring-spin-fast, .core-dot, .float-badge, .marquee-track, .footer-ticker-track, .hud-status::before, .preloader-mark, .aurora {
    animation: none !important;
  }
  .reveal-up, .reveal-scale { transition-duration: 0.01s !important; opacity: 1 !important; transform: none !important; }
  .cursor-dot, .cursor-glow { display: none !important; }
}

/* ---------- Touch devices: disable pointer-following effects ---------- */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-glow { display: none !important; }
}