/* Pricing hover effects, vanilla re-creations of library techniques (no React):
   beam  — the three package cards: a comet of light travels round the border
           (Magic UI BorderBeam / React Bits StarBorder)
   sweep — Pack Care and Pack Social: the box lifts and a sheen passes over once
           (React Bits GlareHover) */

[data-fx] { position: relative; isolation: isolate; }
[data-fx] > *:not(.price-card__badge) { position: relative; z-index: 1; }
[data-fx] > .price-card__badge { z-index: 3; }

/* beam */
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
[data-fx="beam"] { transition: box-shadow .5s var(--ease-out), border-color .5s var(--ease-out); }
[data-fx="beam"]::after {
  content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 72%, rgba(244, 163, 94, 0) 74%, #f4a35e 88%, #fff2e2 91%, transparent 93%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s var(--ease-out);
}
[data-fx="beam"]:hover::after { opacity: 1; animation: fx-beam 4s linear infinite; }
[data-fx="beam"]:hover { box-shadow: 0 30px 70px -30px rgba(224, 136, 62, .55); }
@keyframes fx-beam { to { --beam: 360deg; } }

/* sweep */
[data-fx="sweep"] { overflow: hidden; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s; }
[data-fx="sweep"]::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 214, .13) 45%, rgba(255, 236, 214, .22) 50%, rgba(255, 236, 214, .13) 55%, transparent);
  transform: translateX(0) rotate(8deg); opacity: 0;
}
[data-fx="sweep"]:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7); border-color: var(--ember-line); }
[data-fx="sweep"]:hover::after { opacity: 1; animation: fx-sweep 1.8s var(--ease-out) forwards; }
@keyframes fx-sweep { from { transform: translateX(0) rotate(8deg); } to { transform: translateX(420%) rotate(8deg); } }

@media (prefers-reduced-motion: reduce) {
  [data-fx="beam"]:hover::after { animation: none; }
  [data-fx="sweep"]:hover::after { animation: none; opacity: 0; }
  [data-fx="sweep"]:hover { transform: none; }
}