/* ============================================================
   GITTO MATHEW — PORTFOLIO
   animations.css — keyframes & scroll-reveal system
   ============================================================ */

/* ============ 1. Scroll reveal system ============ */
/* Elements with [data-reveal] start hidden; .in-view animates them in. */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="fade-left"]  { transform: translateX(-40px); }
[data-reveal="fade-right"] { transform: translateX(40px); }
[data-reveal="fade-up"]    { transform: translateY(40px); }
[data-reveal="zoom"]       { transform: scale(0.88); }
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Staggered children via inline --reveal-delay (set in HTML/JS) */
[data-reveal] { transition-delay: var(--reveal-delay, 0s); }

/* ============ 2. Hero entrance ============ */
/* Hero elements stay hidden until the loader clears (body.is-loaded),
   then enter with a staggered animation. Starting the animation only
   after the loader fades keeps the stagger visible. */
[data-hero] { opacity: 0; }
body.is-loaded [data-hero] {
  animation: heroIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
body.is-loaded [data-hero="fade-down"] { animation-name: heroInDown; }
body.is-loaded [data-hero="fade-up"]   { animation-name: heroInUp; }
body.is-loaded [data-hero="zoom"]      { animation-name: heroInZoom; }

body.is-loaded [data-hero]:nth-child(1) { animation-delay: 0.15s; }
body.is-loaded [data-hero]:nth-child(2) { animation-delay: 0.28s; }
body.is-loaded [data-hero]:nth-child(3) { animation-delay: 0.4s; }
body.is-loaded [data-hero]:nth-child(4) { animation-delay: 0.52s; }
body.is-loaded [data-hero]:nth-child(5) { animation-delay: 0.64s; }
body.is-loaded [data-hero]:nth-child(6) { animation-delay: 0.76s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroInUp   { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes heroInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes heroInZoom { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* ============ 3. Core keyframes ============ */

/* Floating */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Glowing pulse (chip glow, badges) */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

/* Blinking dot / caret */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Slow rotation (orbit rings) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Loader chip rotation */
@keyframes loaderSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Scroll wheel indicator */
@keyframes wheel {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* Chat message slide-in */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Typing indicator dots */
@keyframes typingDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}

/* Skill bar shimmering sheen */
@keyframes barShine {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Gradient text shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============ 4. Timeline draw-on animation ============ */
.timeline::before { transform-origin: top; }
body.is-loaded .timeline::before {
  animation: drawLine 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both;
}
@keyframes drawLine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

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