/* =========================================================
   Motion layer — subtle, CSS-only movement for the XP theme
   ========================================================= */

@keyframes win-in {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes bg-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -10px, 0); }
}
@keyframes scan-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}
@keyframes halo-pulse {
  0%, 100% { box-shadow: 6px 6px 0 rgba(0,0,0,.34); }
  50%      { box-shadow: 6px 6px 0 rgba(0,0,0,.34), 0 0 30px rgba(107,255,143,.16); }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(45,138,77,.14); }
  50%      { box-shadow: 0 0 0 6px rgba(45,138,77,.04); }
}

/* page + hero */
.hero-bg img { animation: bg-drift 26s ease-in-out infinite alternate; will-change: transform; }
.hero-window { animation: win-in .6s cubic-bezier(.22,.61,.36,1) both, halo-pulse 7s ease-in-out 1.2s infinite; }
.hero-copy h1 { animation: rise-in .7s .12s cubic-bezier(.22,.61,.36,1) both; }
.hero-role { animation: rise-in .7s .2s cubic-bezier(.22,.61,.36,1) both; }
.hero-lede { animation: rise-in .7s .28s cubic-bezier(.22,.61,.36,1) both; }
.hero-actions { animation: rise-in .7s .36s cubic-bezier(.22,.61,.36,1) both; }
.eyebrow { animation: rise-in .6s both; }

.hero-stats li { animation: rise-in .6s both; }
.hero-stats li:nth-child(1) { animation-delay: .42s; }
.hero-stats li:nth-child(2) { animation-delay: .50s; }
.hero-stats li:nth-child(3) { animation-delay: .58s; }
.hero-stats li:nth-child(4) { animation-delay: .66s; }

.avatar-frame { animation: float-soft 6.5s ease-in-out infinite; will-change: transform; }
.avatar-scan { animation: scan-drift 3.2s linear infinite; }

/* windows below the fold */
.section .window { animation: win-in .65s cubic-bezier(.22,.61,.36,1) both; }
.section:nth-of-type(odd) .window { animation-delay: .08s; }

/* interactive polish */
.btn { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0,0,0,.22); }
.btn:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.nav a { position: relative; transition: color .2s ease; }
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 1px;
  width: 70%; height: 2px; background: var(--phosphor);
  transform: translateX(-50%) scaleX(0);
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }

.research-row { transition: background .2s ease, transform .2s ease; }
.research-row:hover { transform: translateY(-1px); }
.cert-card, .writeup-card, .case-card, .method-card { transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease; }
.cert-card:hover, .writeup-card:hover, .case-card:hover { transform: translateY(-4px); box-shadow: 4px 6px 0 rgba(0,0,0,.16); }
.cert-thumb img { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.cert-card:hover .cert-thumb img { transform: scale(1.045); }
.cert-verify-card { transition: border-color .2s ease, transform .25s ease; }
.cert-verify-card:hover { transform: translateY(-2px); }

.dot { animation: dot-pulse 2.8s ease-in-out infinite; }
.recognition-band b { transition: color .2s ease, transform .2s ease; }
.recognition-band div:hover b { color: var(--phosphor); transform: translateY(-2px); }

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-window, .hero-copy h1, .hero-role, .hero-lede, .hero-actions,
  .eyebrow, .hero-stats li, .window, .avatar-frame, .avatar-scan, .hero-bg img {
    opacity: 1 !important;
    transform: none !important;
  }
}