/* ══════════════════════════════════════════════════
   ANIMATIONS — Signal from the Void
   ══════════════════════════════════════════════════ */

/* ─── REVEAL: FADE UP ─────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1),
              transform .9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── REVEAL: CLIP (headings) ─────────────────── */
.reveal-clip { overflow: hidden; }
.reveal-clip .lw {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) skewY(3deg);
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1),
              transform .9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-clip.visible .lw {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

/* Hero title stagger */
.hero-title .line:nth-child(1) .lw { transition-delay: .05s; }
.hero-title .line:nth-child(2) .lw { transition-delay: .15s; }
.hero-title .line:nth-child(3) .lw { transition-delay: .25s; }

/* Section title stagger */
.s-title .reveal-clip:nth-child(1) .lw { transition-delay: 0s; }
.s-title .reveal-clip:nth-child(3) .lw { transition-delay: .1s; }
.contact-title .reveal-clip:nth-child(1) .lw { transition-delay: 0s; }
.contact-title .reveal-clip:nth-child(3) .lw { transition-delay: .1s; }

/* ─── STAGGER DELAYS ──────────────────────────── */
.delay-1 { transition-delay: .1s !important; }
.delay-2 { transition-delay: .2s !important; }
.delay-3 { transition-delay: .3s !important; }
.delay-4 { transition-delay: .4s !important; }
.delay-5 { transition-delay: .5s !important; }
.delay-6 { transition-delay: .6s !important; }
.delay-7 { transition-delay: .7s !important; }

/* ─── NAV LINK UNDERLINE ──────────────────────── */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; bottom: 3px; left: 14px;
  width: 0; height: 1px; background: var(--lime);
  transition: width .3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover::after,
.nav-link.active::after { width: calc(100% - 28px); }
.nav-link.nav-cta::after { display: none; }

/* ─── BENTO SHIMMER ───────────────────────────── */
.bento-item {
  position: relative;
  overflow: hidden;
}
.bento-item::after {
  content: '';
  position: absolute; top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.035) 50%,
    transparent 60%);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.bento-item:hover::after {
  opacity: 1;
  animation: shimmer .8s ease-out;
}
@keyframes shimmer {
  0%   { left: -80%; opacity: 1; }
  100% { left: 120%; opacity: 1; }
}

/* ─── CERT CARD SHIMMER ───────────────────────── */
.cert-card { position: relative; overflow: hidden; }
.cert-card::after {
  content: '';
  position: absolute; top: -50%; left: -80%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.025) 50%,
    transparent 60%);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.cert-card:hover::after {
  opacity: 1; animation: shimmer .7s ease-out;
}

/* ─── TILT CARD HIGHLIGHT ─────────────────────── */
.tilt-highlight {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(212,255,26,.06) 0%,
    transparent 65%
  );
  pointer-events: none; opacity: 0;
  transition: opacity .3s;
  z-index: 2;
}
.tilt-card:hover .tilt-highlight { opacity: 1; }

/* ─── HERO BADGE ENTRANCE ─────────────────────── */
.hero-badge {
  animation: badgeIn .7s .4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes badgeIn {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ─── SCROLL CUE FADE ─────────────────────────── */
.scroll-cue { animation: scFadeIn 1s 2.5s ease-out both; }
@keyframes scFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ─── MOBILE NAV STAGGER ──────────────────────── */
@media (max-width: 768px) {
  .nav-list.open li:nth-child(1) .nav-link { animation: mobileIn .4s .05s var(--ease) both; }
  .nav-list.open li:nth-child(2) .nav-link { animation: mobileIn .4s .10s var(--ease) both; }
  .nav-list.open li:nth-child(3) .nav-link { animation: mobileIn .4s .15s var(--ease) both; }
  .nav-list.open li:nth-child(4) .nav-link { animation: mobileIn .4s .20s var(--ease) both; }
  .nav-list.open li:nth-child(5) .nav-link { animation: mobileIn .4s .25s var(--ease) both; }
}
@keyframes mobileIn {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ─── SKILL TAG STAGGER ───────────────────────── */
.stag {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease),
              border-color .2s, color .2s, background .2s;
}
.stag.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── HELIX CANVAS APPEAR ─────────────────────── */
#helix-canvas {
  transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1);
}

/* ─── COUNTER POP ─────────────────────────────── */
@keyframes numPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.num-pop { animation: numPop .15s ease-out; }

/* ─── REDUCED MOTION ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-up     { opacity:1; transform:none; }
  .reveal-clip .lw { opacity:1; transform:none; }
  .stag          { opacity:1; transform:none; }
}