/* ================================================
   motion-enhance.css — v10.3 Phase B
   - Stagger entrance for grid-card + kpi-card
   - Hover tilt affordances (cursor, transition)
   - Glint layer on tilted cards
   - Shared ease tokens consistent with Phase A
   ================================================ */

:root {
  --eb-ease-snappy: cubic-bezier(.34, 1.56, .64, 1);
  --eb-ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --eb-ease-out:    cubic-bezier(.16, 1, .3, 1);
}

/* ---- Entrance: kpi cards stagger in ---- */
[data-eb-motion="kpi-card"] {
  animation: eb-kpi-in .7s var(--eb-ease-out) both;
  animation-delay: calc(var(--eb-stagger-i, 0) * 60ms);
  will-change: transform, opacity, filter;
}
@keyframes eb-kpi-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);  }
}

/* ---- Entrance: positions grid tiles stagger in ---- */
[data-eb-motion="grid-card"] {
  animation: eb-grid-in .75s var(--eb-ease-out) both;
  animation-delay: calc(var(--eb-stagger-i, 0) * 55ms + 200ms);
  will-change: transform, opacity;
}
@keyframes eb-grid-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ---- Hover tilt: transition when not being tilted ---- */
[data-eb-motion="grid-card"] {
  transition: transform .35s var(--eb-ease-out),
              box-shadow .35s var(--eb-ease-out);
  transform-style: preserve-3d;
  position: relative;
}
[data-eb-motion="grid-card"].eb-tilting {
  /* No transition while cursor is moving — JS sets transform per-frame */
  transition: none;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(0, 212, 170, .22),
    0 0 24px rgba(0, 212, 170, .10);
}

/* Glint highlight that tracks the cursor */
[data-eb-motion="grid-card"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    220px circle at var(--eb-glint-x, 50%) var(--eb-glint-y, 50%),
    rgba(0, 212, 170, .14),
    rgba(0, 212, 170, .06) 30%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .3s var(--eb-ease-smooth);
  z-index: 1;
}
[data-eb-motion="grid-card"].eb-tilting::after {
  opacity: 1;
}
/* Ensure card content stays above the glint layer */
[data-eb-motion="grid-card"] > * {
  position: relative;
  z-index: 2;
}

/* ---- Count-up: make the animation breathe with a subtle glow on change ---- */
[data-eb-motion="kpi-card"] {
  position: relative;
}
[data-eb-motion="kpi-card"]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 212, 170, 0) inset;
  transition: box-shadow .5s var(--eb-ease-smooth);
}

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  [data-eb-motion="kpi-card"],
  [data-eb-motion="grid-card"] {
    animation: none !important;
  }
  [data-eb-motion="grid-card"]::after {
    display: none;
  }
}