/* ============================================================
   Ganimate — scroll reveal + hover/press polish (site-wide)
   Companion to shared/transition.js (page-to-page transitions).
   This file handles motion WITHIN a page: sections and cards
   rising into view on scroll, and buttons/nav/cards feeling
   physical to touch rather than just clickable.

   Safe without JS: elements render fully visible by default and
   only animate once shared/motion.js confirms IntersectionObserver
   support. Safe under prefers-reduced-motion: all motion collapses
   to an instant, static state.
   ============================================================ */

:root{
  --ease-smooth: cubic-bezier(.22,1,.36,1);
}

/* --- Scroll reveal --- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition: opacity .75s ease, transform .8s cubic-bezier(.2,.75,.25,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* --- Hover / press polish: buttons (.button-link arrow chip) --- */
.button-link::after{
  transition: background .25s var(--ease-smooth), color .25s var(--ease-smooth), transform .35s var(--ease-smooth) !important;
}
.button-link:active::after{ transform: scale(.88); }

/* --- Hover / press polish: nav links & buttons --- */
.nav a, .nav button{
  transition: color .25s var(--ease-smooth), background .25s var(--ease-smooth), transform .15s var(--ease-smooth) !important;
}
.nav a:active, .nav button:active{ transform: scale(.95); }

/* --- Hover / press polish: portfolio / work cards --- */
.work-card{
  transition: transform .45s var(--ease-smooth);
  will-change: transform;
}
.work-card:hover{ transform: translateY(-6px); }
.work-card:active{ transform: translateY(-3px) scale(.99); }

/* --- Hover / press polish: bento cards (about page) --- */
.bento-card{
  transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
  will-change: transform;
}
.bento-card:hover{ transform: translateY(-5px); }

/* --- Hover / press polish: blog post cards --- */
.post{
  transition: transform .4s var(--ease-smooth);
  will-change: transform;
}
.post:hover{ transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{ opacity:1 !important; transform:none !important; transition:none !important; }
  .button-link::after, .nav a, .nav button, .work-card, .bento-card, .post{ transition:none !important; }
  .work-card:hover, .work-card:active, .bento-card:hover, .post:hover{ transform:none !important; }
}