/* ============================================================
   Brightnet Computer Academy — Motion & Micro-interactions
   ============================================================ */

/* Scroll reveal — base hidden state */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger helpers */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Card hover lift */
.interactive-card {
  transition: var(--transition-smooth);
}
.interactive-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* Button press */
.btn { transition: var(--transition-smooth); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Verification result fade/slide */
.verify-result {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.verify-result.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Terminal caret blink */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.terminal-caret { animation: blink 1.1s step-end infinite; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
  .interactive-card, .btn { transition: none; }
}