/* ==========================================================================
   Motion layer — extra animation on top of main.css (and glass.css).
   Loaded only when this file exists, so deleting it (and js/motion.js)
   turns everything here off. Nothing here runs for "reduce motion" users.
   Starting states use opacity .01, not 0: it looks the same, but browsers only count
   something as "painted" (for page-speed scores) if it isn't fully transparent.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Page transitions: pages fade in, and out when you leave ---------- */
  .motion-on main, .motion-on .site-footer { animation: pageIn .3s ease-out both; }
  .motion-on.leaving main, .motion-on.leaving .site-footer { animation: none; opacity: 0; transition: opacity .12s ease; }
  @keyframes pageIn { from { opacity: .01; } }

  /* ---------- Home intro: name rises letter by letter, then the rest follows ---------- */
  .hero h1 .char { display: inline-block; opacity: .01; transform: translateY(.45em) rotate(4deg); animation: charIn .5s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 28ms); }
  .hero h1 .char.space { width: .28em; }
  @keyframes charIn { to { opacity: 1; transform: none; } }
  .motion-on .hero .role, .motion-on .hero .badge, .motion-on .home-btn > a, .motion-on .scroll-hint {
    opacity: .01; animation: riseIn .55s cubic-bezier(.2, .8, .2, 1) forwards;
  }
  .motion-on .hero .role      { animation-delay: .3s; }
  .motion-on .hero .badge     { animation-delay: .4s; }
  .motion-on .home-btn > a:nth-child(1) { animation-delay: .48s; }
  .motion-on .home-btn > a:nth-child(2) { animation-delay: .56s; }
  .motion-on .scroll-hint     { animation-delay: .8s; }
  @keyframes riseIn { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* ---------- Scroll reveals ---------- */
  .motion-on .work-card, .motion-on .tool-card { animation: none; }   /* replaced by the reveal below */
  [data-reveal] { opacity: .01; transform: translateY(18px); transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 40ms); }
  [data-reveal].revealed { opacity: 1; transform: none; }
  [data-reveal].revealed.tilting { transition: transform .15s ease-out; transition-delay: 0s; }

  /* Cards re-shuffle when a portfolio filter changes them */
  .work-card.shuffle { animation: shuffleIn .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 25ms); }
  @keyframes shuffleIn { from { opacity: .01; transform: translateY(16px) scale(.97); } }

  /* ---------- 3D tilt + light reflection on cards (mouse only) ---------- */
  .tilt { transform-style: preserve-3d; will-change: transform; }
  .tilt .tilt-glare {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 55%);
    mix-blend-mode: soft-light;
  }
  .tilt:hover .tilt-glare { opacity: 1; }

  /* ---------- Magnetic buttons ---------- */
  .magnetic { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
}