/* ============================================================
   CodebyCarter — tilt.css
   3D tilt-on-hover effect — cards lean toward your cursor in
   perspective space, like physical objects. The "wait, how?"
   moment. JS sets the transform.
   ============================================================ */

/* Enable 3D space on the card's parent */
.tier,
.alive-card,
.yp-step,
.tiny-card,
.builtfor-card,
.sound-card,
.vision-card,
.qj-tile,
.brandpick-panel,
.brandpick-preview{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}

/* The shine that follows the cursor across each tilted card */
.tilt-shine{
  position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%),
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 30%,
      transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  mix-blend-mode:overlay;
  z-index:1;
}
.tilt-shine.is-active{opacity:1}

/* Don't apply tilt on touch devices (annoying without hover) */
@media (hover:none){
  .tier,.alive-card,.yp-step,.tiny-card,
  .builtfor-card,.sound-card,.vision-card,
  .qj-tile,.brandpick-panel,.brandpick-preview{
    transform-style:flat;
  }
}

/* Reduce-motion users get no tilt */
@media (prefers-reduced-motion:reduce){
  .tier,.alive-card,.yp-step,.tiny-card,
  .builtfor-card,.sound-card,.vision-card,
  .qj-tile,.brandpick-panel,.brandpick-preview{
    transform-style:flat !important;
  }
}