:root{
  --a-dur: 420ms;
  --a-ease: cubic-bezier(.2,.6,.2,1);
  --a-blur: 14px;
  --a-tilt: 2.2deg;
  --a-y: 22px;
  --a-x: 22px;
}

@media (prefers-reduced-motion: reduce){
  .a{ opacity:1 !important; transform:none !important; filter:none !important; }
  .a::before{ transform:none !important; }
}

/* base */
.a{ opacity:0; transform:translate3d(0,0,0); will-change:transform,opacity; backface-visibility:hidden; }
.a.a-in{ opacity:1; transform:none; transition: transform var(--a-dur) var(--a-ease), opacity var(--a-dur) var(--a-ease), filter var(--a-dur) var(--a-ease); transition-delay: calc(var(--a-delay, 0ms)*1ms); }

/* variants */
.a-up{ transform: translate3d(0,var(--a-y),0); }
.a-down{ transform: translate3d(0,calc(var(--a-y)*-1),0); }
.a-left{ transform: translate3d(var(--a-x),0,0); }
.a-right{ transform: translate3d(calc(var(--a-x)*-1),0,0); }
.a-fade{ }

/* subtle pop (scale-in) */
.a-pop{ transform: translate3d(0,8px,0) scale(.98); }
.a-pop.a-in{ transform: none; }

/* tilt + rise */
.a-tilt{ transform: translate3d(0,14px,0) rotate(var(--a-tilt)); transform-origin: 50% 80%; }
.a-tilt.a-in{ transform: none; }

/* blur-in */
.a-blur{ filter: blur(var(--a-blur)); transform: translate3d(0,10px,0); }
.a-blur.a-in{ filter: blur(0); }

/* clip reveal (for images/cards) */
.a-clip{ clip-path: inset(0 0 0 0 round var(--radius, 12px)); }
.a-clip:not(.a-in){ clip-path: inset(0 0 100% 0 round var(--radius, 12px)); }
.a-clip.a-in{ clip-path: inset(0 0 0 0 round var(--radius, 12px)); transition: clip-path var(--a-dur) var(--a-ease); }

/* scale-in (for icons) */
.a-scale{ transform: scale(.96); }
.a-scale.a-in{ transform: none; }

/* micro hover (optional) */
.a-hover:hover{ transform: translate3d(0,-2px,0) scale(1.01); transition: transform 200ms ease; }

/* ================================================
   PARALLAX LAYER — light, scroll-accelerated feel
   Add <div class="hero-image"></div> inside hero and keep
   the background on that layer instead of the section.
   ================================================= */
.parallax-root{ perspective: 1200px; }
.parallax-layer{ will-change: transform; transform: translate3d(0,0,0) scale(1.02); }

/* ================================================
   TO‑TOP button polish (crisper)
   ================================================= */
.to-top{ contain: paint; }

/* ================================================
   OPTIONAL: motion-reduce helper class (JS toggles)
   ================================================= */
.motion-reduced .a{ transition:none !important; }

/* MEDIA VISIBILITY FIX — paste at the end of css/anim.css */
img.a:not(.a-in),
figure.a:not(.a-in),
.thumb.a:not(.a-in),
.card-image.a:not(.a-in) {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* If you used clip reveals on thumbnails/images, keep them visible too */
.a-clip:not(.a-in) {
  clip-path: inset(0 0 0 0 round var(--radius,12px)) !important;
}