/* ============================================================
   PORTFOLIO ANIMATIONS — Motion & Hover System
   ============================================================ */

/* ── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,127,226,0); }
  50% { box-shadow: 0 0 0 6px rgba(29,127,226,0.15); }
}

[data-theme="dark"] @keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,153,232,0); }
  50% { box-shadow: 0 0 0 6px rgba(74,153,232,0.15); }
}

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

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes type-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes terminal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── UTILITY CLASSES ────────────────────────────────────── */
.animate-fade-up {
  animation: fade-up 0.45s ease both;
}
.animate-fade-in {
  animation: fade-in 0.45s ease both;
}
.animate-slide-in {
  animation: slide-in-right 0.45s ease both;
}
.animate-pulse-ring {
  animation: pulse-ring 2.5s ease-in-out infinite;
}

/* Stagger delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── HOVER LIFT SYSTEM ─────────────────────────────────── */
.hover-lift {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.hover-lift:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-3px);
}

/* ── CARD HOVER ──────────────────────────────────────────── */
.card-hover {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-hover:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-3px);
}

/* ── LINK UNDERLINE ANIMATION ───────────────────────────── */
.link-underline {
  position: relative;
  text-decoration: none;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-base);
}
.link-underline:hover::after {
  width: 100%;
}

/* ── TERMINAL CANVAS STYLES ─────────────────────────────── */
.terminal-canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── 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;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero-terminal-canvas {
    display: none;
  }
}

/* ── LOADING SHIMMER ────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, var(--color-surface-raised) 25%, var(--color-surface) 50%, var(--color-surface-raised) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ── BUTTON PRESS EFFECT ────────────────────────────────── */
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* ── FOCUS TRANSITION ───────────────────────────────────── */
:focus {
  transition: outline-offset var(--transition-fast);
}

/* ── THEME TRANSITION ──────────────────────────────────── */
body, .site-nav, .project-card, .skill-card, .rec-card, .glass-surface,
.form-input, .btn, .chip, .code-block, .terminal-block, .table-wrap {
  transition: background-color var(--transition-slow), 
              color var(--transition-slow), 
              border-color var(--transition-slow),
              box-shadow var(--transition-slow);
}