/* ============================================================
   Sachin Diwakar — Portfolio · animations.css
   Keyframes, scroll reveals, transitions
   ============================================================ */

/* ---------- Reveals ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal].in.delay-1 { transition-delay: 80ms; }
[data-reveal].in.delay-2 { transition-delay: 160ms; }
[data-reveal].in.delay-3 { transition-delay: 240ms; }
[data-reveal].in.delay-4 { transition-delay: 320ms; }

.hero-title .line {
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.hero .in .line,
.hero-title .line.in {
  transform: translateY(0);
}
.hero-title .line:nth-child(1) { transition-delay: 80ms; }
.hero-title .line:nth-child(2) { transition-delay: 200ms; }
.hero-title .line:nth-child(3) { transition-delay: 320ms; }

/* ---------- Pulse ---------- */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.92); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---------- Aurora ---------- */
@keyframes aurora-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 4vh) scale(1.15); }
}
@keyframes aurora-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vw, -8vh) scale(1.1); }
}
@keyframes aurora-3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-30%, -60%) scale(1.2); }
}

/* ---------- Marquee ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Mouse wheel ---------- */
@keyframes mouse-wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ---------- Rotate ---------- */
@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* ---------- GPU scan ---------- */
@keyframes gpu-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}

/* ---------- HPC bars ---------- */
@keyframes hpc {
  0%, 100% { height: 20%; }
  50% { height: 95%; }
}

/* ---------- Stripe / scan / stars ---------- */
@keyframes stripe {
  from { background-position: 0 0; }
  to { background-position: 200px 0; }
}
@keyframes scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes stars {
  from { background-position: 0 0; }
  to { background-position: 60px 60px; }
}
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, -8px) scale(1.05); }
}
@keyframes grid-shift {
  from { background-position: 0 0; }
  to { background-position: 60px 60px; }
}

/* ---------- Draw line ---------- */
@keyframes draw {
  0% { stroke-dashoffset: 600; }
  60%, 100% { stroke-dashoffset: 0; }
}

/* ---------- Caret ---------- */
@keyframes caret {
  50% { opacity: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}