/* ============================================================
   Drive Studio — animations.css
   Keyframes + transition utility classes shared across pages.
   ============================================================ */

/* ---------- Scroll reveal ---------- */
/* Element starts hidden/offset; utils.js's IntersectionObserver
   adds .is-revealed when it enters the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Direct children reveal in sequence rather than all at once */
.reveal-stagger > *:nth-child(1) { transition-delay: calc(var(--stagger-unit) * 0); }
.reveal-stagger > *:nth-child(2) { transition-delay: calc(var(--stagger-unit) * 1); }
.reveal-stagger > *:nth-child(3) { transition-delay: calc(var(--stagger-unit) * 2); }
.reveal-stagger > *:nth-child(4) { transition-delay: calc(var(--stagger-unit) * 3); }
.reveal-stagger > *:nth-child(5) { transition-delay: calc(var(--stagger-unit) * 4); }
.reveal-stagger > *:nth-child(6) { transition-delay: calc(var(--stagger-unit) * 5); }

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 14, 75, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(242, 14, 75, 0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes heroGlowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* ---------- Utility animation classes ---------- */
.anim-fade-in {
  animation: fadeIn var(--dur-slow) var(--ease-out) both;
}

.anim-float {
  animation: floatY 4s var(--ease-in-out) infinite;
}

.anim-pulse-glow {
  animation: pulseGlow 2.4s var(--ease-in-out) infinite;
}

.anim-spin {
  animation: spin 900ms linear infinite;
}

/* Skeleton loading shimmer (used for image/card placeholders) */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--card) 25%,
    var(--card-hover) 50%,
    var(--card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ---------- Hover micro-interactions ---------- */
.hover-lift {
  transition: transform var(--dur-med) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-scale {
  transition: transform var(--dur-med) var(--ease-out);
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-glow-primary:hover {
  box-shadow: var(--shadow-glow-primary);
}

.hover-glow-accent:hover {
  box-shadow: var(--shadow-glow-accent);
}