/* Kaica motion layer — minimal/modern, dense micro-interactions.
   Two triggers, one vocabulary:
   • Design canvas → reveal cascades once on mount (nothing stays hidden).
   • Real site     → reveal on scroll into view (IntersectionObserver).
   shared/anim.js owns the triggering; this file owns the look.
   Everything decorative sits behind prefers-reduced-motion. */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Scroll / mount reveal ---------------------------------------- */
  .kc-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity .8s cubic-bezier(.16, .84, .36, 1),
      transform .8s cubic-bezier(.16, .84, .36, 1),
      filter .8s cubic-bezier(.16, .84, .36, 1);
    transition-delay: var(--kc-d, 0ms);
    will-change: opacity, transform;
  }
  /* opacity-only variant for items already inside a rising block (cards,
     grid cells) so motion doesn't compound into a double-slide. */
  .kc-reveal.kc-soft { transform: translateY(0); }
  .kc-reveal.kc-in   { opacity: 1; transform: none; will-change: auto; }

  /* ---- Decorative loops --------------------------------------------- */
  /* Hero technical-grid backdrop drifts very slowly. */
  .kc-gridpan { animation: kcGridPan 32s linear infinite; }
  @keyframes kcGridPan {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 80px 80px, 80px 80px; }
  }

  /* Hero / detail product shot breathes. */
  .kc-float { animation: kcFloat 7s ease-in-out infinite; }
  @keyframes kcFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }

  /* Placeholder imagery gets a slow specular sweep so empty slots read as
     "loading / awaiting asset" rather than dead boxes. */
  .kc-scope .kc-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.08) 50%, transparent 68%);
    transform: translateX(-120%);
    animation: kcShimmer 3.6s ease-in-out infinite;
    pointer-events: none;
  }
  .kc-scope .kc-placeholder.light::after {
    background: linear-gradient(115deg, transparent 32%, rgba(0,0,0,.05) 50%, transparent 68%);
  }
  @keyframes kcShimmer {
    0%        { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
  }
}

/* ---- Micro-interactions (always on; pure state transitions) --------- */
.kc-scope button {
  transition:
    transform .25s cubic-bezier(.2, .7, .3, 1),
    box-shadow .25s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}
.kc-scope button:hover  { transform: translateY(-2px); }
.kc-scope button:active { transform: translateY(0); transition-duration: .06s; }

.kc-scope a { transition: color .2s ease, opacity .2s ease, border-color .2s ease; }

/* Product cards: lift + quiet shadow, with the shot easing up underneath. */
.kc-scope .kc-card {
  transition:
    transform .42s cubic-bezier(.16, .84, .36, 1),
    box-shadow .42s ease,
    background-color .42s ease;
}
.kc-scope .kc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.55);
}
.kc-scope .kc-card img { transition: transform .6s cubic-bezier(.16, .84, .36, 1); will-change: transform; }
.kc-scope .kc-card:hover img { transform: scale(1.055); }

/* Inline text links that carry an underline border grow it on hover. */
.kc-scope a[style*="border-bottom"]:hover { opacity: .72; }

/* Reduced motion: show everything immediately, kill loops. */
@media (prefers-reduced-motion: reduce) {
  .kc-reveal { opacity: 1 !important; transform: none !important; }
  .kc-gridpan, .kc-float, .kc-scope .kc-placeholder::after { animation: none !important; }
}