/* ================================================================
   ANIMATIONS.CSS — Global Keyframes & Shared Animation Utilities
   ================================================================ */

/* ── Fade In ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Fade Up ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade Down ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scale In ── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Draw (SVG stroke) ── */
@keyframes draw {
  from { stroke-dashoffset: var(--stroke-length, 1000); }
  to   { stroke-dashoffset: 0; }
}

/* ── Float ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* ── Spin slow ── */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-card) 0%,
    var(--border-hover) 50%,
    var(--bg-card) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* ── Border draw animation (SVG) ── */
.svg-draw path,
.svg-draw rect,
.svg-draw circle {
  stroke-dasharray: var(--stroke-length, 1000);
  stroke-dashoffset: var(--stroke-length, 1000);
  animation: draw 1.5s var(--ease-out) forwards;
}

/* ── Cursor pulsing ring ── */
@keyframes cursor-ring-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  50%  { transform: scale(1.4); opacity: 0.2; }
  100% { transform: scale(1);   opacity: 0.6; }
}

/* ── Particle drift (fallback CSS) ── */
@keyframes particle-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50%  { transform: translate(var(--dx, 20px), var(--dy, -30px)) scale(1.1); opacity: 0.5; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

/* ── Smooth entrance helpers ── */
.anim-fade-up {
  animation: fadeUp var(--duration-slow) var(--ease-out) both;
}

.anim-fade-up-1 { animation-delay: 0.1s; }
.anim-fade-up-2 { animation-delay: 0.2s; }
.anim-fade-up-3 { animation-delay: 0.3s; }
.anim-fade-up-4 { animation-delay: 0.4s; }
.anim-fade-up-5 { animation-delay: 0.5s; }

.anim-scale-in {
  animation: scaleIn var(--duration-slow) var(--ease-spring) both;
}

.anim-float {
  animation: float 4s ease-in-out infinite;
}

/* ── Clip-path text reveal ── */
@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.text-reveal {
  clip-path: inset(0 100% 0 0);
  animation: clip-reveal 0.9s var(--ease-out) forwards;
}

/* ── Underline draw ── */
@keyframes underline-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.underline-draw::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.underline-draw:hover::after,
.underline-draw.active::after { transform: scaleX(1); }

/* ── Card 3D tilt (applied via JS) ── */
.tilt-card {
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  transform-style: preserve-3d;
}

/* ── Accent line pulse ── */
@keyframes accent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

/* ── Counter number flash ── */
@keyframes number-flash {
  0%   { color: var(--accent-light); transform: scale(1.1); }
  100% { color: var(--text-primary); transform: scale(1); }
}

/* ── Gradient border rotate ── */
@keyframes border-rotate {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

/* ── Horizontal scroll auto (marquee) ── */
@keyframes marquee-x-rev {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(50% + 1rem)); }
}

/* ── Noise overlay ── */
.noise {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Intersection Observer trigger class ── */
/* Add .is-visible with JS via IntersectionObserver to trigger */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-mid) var(--ease-out),
              transform var(--duration-mid) var(--ease-out);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.10s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.15s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.20s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.25s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.30s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 0.35s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 0.40s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(9) { transition-delay: 0.45s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(n+10) { transition-delay: 0.50s; opacity: 1; transform: none; }

/* ── Reduce Motion Mode ──────────────────────────────────────────
   body.reduce-motion: page loads like a normal site, no sticky
   scroll tricks, no clip-path reveals, no typewriter effects.
   Q&A becomes a regular accordion.
─────────────────────────────────────────────────────────────────── */

/* Kill CSS animations & transitions (keep toggle switch transition) */
body.reduce-motion *:not(.anim-toggle):not(.anim-toggle-thumb),
body.reduce-motion *:not(.anim-toggle)::before,
body.reduce-motion *:not(.anim-toggle)::after {
  animation-duration: 0.001ms !important;
  animation-delay:    0.001ms !important;
  transition-duration: 0.001ms !important;
  transition-delay:    0.001ms !important;
}

/* Hero — normal height, no scroll room */
body.reduce-motion #hero { height: 100vh; }
body.reduce-motion .hero-sticky { position: relative; }
body.reduce-motion .hero-tag, body.reduce-motion .hero-name,
body.reduce-motion .hero-subtitle, body.reduce-motion .hero-cta {
  opacity: 1 !important; transform: none !important;
}

/* About — no negative margin, flows normally */
body.reduce-motion #about { margin-top: 0; }
body.reduce-motion .about-image-wrap,
body.reduce-motion .about-content,
body.reduce-motion .about-heading,
body.reduce-motion .about-text,
body.reduce-motion .about-stats,
body.reduce-motion .about-actions {
  opacity: 1 !important; transform: none !important;
}

/* Projects — all items visible */
body.reduce-motion .project-item {
  opacity: 1 !important; transform: none !important;
}
body.reduce-motion #projects { padding-bottom: 0 !important; }

/* Reveal + stagger — instant */
body.reduce-motion .reveal-on-scroll,
body.reduce-motion .stagger-children > * {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}

/* Q&A — accordion mode (JS adds .is-open) */
body.reduce-motion #qa { height: auto !important; }
body.reduce-motion .qa-entry-title,
body.reduce-motion .qa-bg-label,
body.reduce-motion .qa-outro,
body.reduce-motion .qa-dots { display: none !important; }

body.reduce-motion .qa-sticky {
  position: relative;
  height: auto;
  display: block;
  padding: var(--section-pad) 0;
  overflow: visible;
}

body.reduce-motion .qa-intro {
  position: relative;
  top: auto; left: auto; transform: none;
  text-align: center;
  width: 100%;
  opacity: 1;
  margin-bottom: 2.5rem;
}

body.reduce-motion .qa-stage {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

body.reduce-motion .qa-item {
  position: relative;
  top: auto; left: auto; right: auto;
  transform: none;
  opacity: 1 !important;
  clip-path: none !important;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  pointer-events: auto;
  padding: 1.2rem 0;
}

body.reduce-motion .qa-item:first-child { border-top: 1px solid var(--border-color); }

body.reduce-motion .qa-q-label {
  clip-path: none !important;
  display: inline-flex;
}

body.reduce-motion .qa-question {
  clip-path: none !important;
  padding-right: 2rem; /* room for chevron */
}

/* Chevron indicator */
body.reduce-motion .qa-item::after {
  content: '›';
  position: absolute;
  right: 0.5rem;
  top: 1.4rem;
  font-size: 1.4rem;
  color: var(--accent);
  transition: transform 0.001ms;
  transform: rotate(0deg);
}
body.reduce-motion .qa-item.is-open::after { transform: rotate(90deg); }

/* Answer — collapsed by default, open when .is-open */
body.reduce-motion .qa-answer-wrap {
  clip-path: none !important;
  display: none;
  margin-top: 0;
}
body.reduce-motion .qa-item.is-open .qa-answer-wrap {
  display: flex;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}