/* ============================================================
   Kizzy Design System — Effects & Motion
   Source of truth: Figma "Kizzy Design System"
   fileKey: WKYX66HuvsbviSPqN8BTOV

   Shadows, top-lit bevel ring, motion curves & durations.
   ============================================================ */

:root {
  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);

  /* Motion — easing */
  --ease-standard: cubic-bezier(.2,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Motion — durations */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Press feedback */
  --press-scale: 0.97;
}

/* Bevel — 1px top-lit ring on elevated surfaces.
   Implemented as a masked 1px gradient border overlay so it works
   on any radius and any background. */
.kz-bevel {
  position: relative;
}
.kz-bevel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,.30), rgba(255,255,255,.05) 65%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Press feedback helper */
.kz-pressable {
  transition: transform var(--duration-fast) var(--ease-standard);
}
.kz-pressable:active {
  transform: scale(var(--press-scale));
}

/* Reduced motion: collapse all motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --press-scale: 1;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}