/*
 Theme Name: Astra Child - Krumpld (v2)
 Theme URI: https://wpastra.com/
 Description: Child theme for Krumpld with mobile-first micro-animations, reveal utilities, and subtle parallax.
 Author: NR & Emma
 Template: astra
 Version: 1.1.0
*/
:root{
  --kr-gap: clamp(12px, 2vw, 20px);
  --kr-radius: 16px;
  --kr-shadow: 0 10px 20px rgba(0,0,0,.08);
}

/* Base mobile-first type + smoothing */
html{scroll-behavior: smooth;}
body{line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/* Utilities */
.kr-container{padding-inline: clamp(16px, 4vw, 32px);}
.kr-card{border-radius: var(--kr-radius); box-shadow: var(--kr-shadow); background: var(--wp--preset--color--base, #fff);}
.kr-tactile:active{transform: scale(.98);}

/* Hover lifts (for product tiles/images) */
.kr-img-lift img{transition: transform .3s ease;}
.kr-img-lift img:hover{transform: translateY(-4px) scale(1.01);}

/* Tilt hover (safe, subtle) */
.kr-tilt{transform: perspective(800px) rotateX(0) rotateY(0); transition: transform .2s ease;}
.kr-tilt:hover{transform: perspective(800px) rotateX(2deg) rotateY(-3deg);}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important; scroll-behavior: auto !important;}
}

/* Reveal primitives */
[data-reveal], .fade-up, .slide-in-left, .slide-in-right, .zoom-in{
  opacity: 0;
  transition: opacity .55s ease, transform .6s ease;
  will-change: transform, opacity;
}
.fade-up, [data-reveal="fade-up"]{transform: translateY(22px);}
.slide-in-left, [data-reveal="slide-in-left"]{transform: translateX(-24px);}
.slide-in-right, [data-reveal="slide-in-right"]{transform: translateX(24px);}
.zoom-in, [data-reveal="zoom-in"]{transform: scale(.96);}

.in-view{opacity: 1; transform: none;}

/* Optional delay utilities (apply to elements to stagger easily) */
.delay-1{transition-delay: .08s;}
.delay-2{transition-delay: .16s;}
.delay-3{transition-delay: .24s;}
.delay-4{transition-delay: .32s;}
.delay-5{transition-delay: .40s;}

/* Parallax helper */
.parallax{will-change: transform; transform: translateY(0);}