/* =============================================================================
   KHA Motion — scroll-reveal choreography, 3D tilt, and micro-interactions.
   Layered on top of the site as an overlay (no React changes). Hidden states are
   only applied by JS (class .kha-anim), so if scripting is off nothing is hidden.
   ============================================================================= */

/* ---- Scroll reveal: inner content of each section fades + rises in, staggered ---- */
.kha-anim [data-rv]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s ease, transform .9s cubic-bezier(.16,.72,.24,1);
}
.kha-anim.kha-inview [data-rv]{ opacity:1; transform:none; }

/* A softer, deeper variant for big headings (they rise a touch more) */
.kha-anim [data-rv="lg"]{ transform:translateY(52px); }

/* ---- 3D tilt on the Craftsmanship / The Art cards ---- */
.kha-tilt{
  transition:transform .3s cubic-bezier(.16,.72,.24,1), box-shadow .3s ease;
  transform-style:preserve-3d; will-change:transform;
}
.kha-tilt:hover{ box-shadow:0 30px 70px -30px rgba(0,8,20,.7); }

/* ---- Button / CTA micro-interactions (site + KHA buttons) ---- */
[class*="button__Button"], .kha-mid-hero__btn, .kha-contact__submit{
  transition:transform .28s cubic-bezier(.16,.72,.24,1), background .28s ease,
             color .28s ease, box-shadow .28s ease !important;
}
[class*="button__Button"]:hover, .kha-mid-hero__btn:hover, .kha-contact__submit:hover{
  transform:translateY(-3px) !important;
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce){
  .kha-anim [data-rv]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .kha-tilt{ transition:none !important; }
}