/* ============================================================
   PYNG · FUN — extra motion & playful micro-interactions
   Loaded on home, product, pricing. Reduced-motion safe.
   Targets existing classes so it applies without markup churn.
   ============================================================ */

/* ---- primary button shine sweep ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); animation: btn-shine 5s ease-in-out infinite; pointer-events: none;
}
@keyframes btn-shine { 0%,55% { left: -70%; } 78%,100% { left: 150%; } }
.cta-vivid .btn-primary::after { background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent); }

/* ---- nav link grow underline ---- */
.nav-links a { position: relative; }
.nav-links a:not(.active)::after {
  content: ""; position: absolute; left: .7em; right: .7em; bottom: 4px; height: 2px;
  background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:not(.active):hover::after { transform: scaleX(1); }

/* ---- brand ping gets a tiny bob ---- */
.brand:hover .ping { animation: bob .5s ease; }
@keyframes bob { 50% { transform: translateY(-3px) scale(1.2); } }

/* ---- glow cards: drifting spot + lift+tilt + icon pop ---- */
.glow-card .glow-spot { animation: spot-drift 9s ease-in-out infinite; }
@keyframes spot-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-26px, 18px); } }
.glow-card { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s; }
.glow-card:hover .glow-ic { animation: ic-pop .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes ic-pop { 40% { transform: translateY(-4px) rotate(-6deg) scale(1.08); } }

/* feature/icon chips pop on hover */
.feature:hover .ic, .eu-row:hover .ic { animation: ic-pop .5s cubic-bezier(.3,1.4,.5,1); }

/* ---- temperature dots pulse ---- */
.tdot--hot { animation: hot-pulse 2.2s ease-in-out infinite; }
@keyframes hot-pulse {
  0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 24%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hot) 6%, transparent); }
}

/* ---- EU emblem = live radar (sweep + twinkle + moving packets) ---- */
.eu-ring { overflow: hidden; }
.eu-ring .eu-badge { position: relative; z-index: 3; }
.eu-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--warm) 30%, transparent) 0deg, transparent 55deg 360deg);
  opacity: .7; animation: radar-sweep 4.6s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.eu-ring .star { z-index: 2; animation: twinkle 2.6s ease-in-out infinite; }
.eu-ring .star:nth-child(3){ animation-delay:.4s } .eu-ring .star:nth-child(4){ animation-delay:.8s }
.eu-ring .star:nth-child(5){ animation-delay:1.2s } .eu-ring .star:nth-child(6){ animation-delay:1.6s } .eu-ring .star:nth-child(7){ animation-delay:2s }
@keyframes twinkle { 0%,100% { opacity:.45; transform:scale(.9); } 50% { opacity:1; transform:scale(1.15); } }
.eu-ring .pkt { z-index: 2; animation: pkt-move 5s ease-in-out infinite; }
.eu-ring .pkt:last-child { animation-duration: 6.5s; animation-direction: reverse; }
@keyframes pkt-move { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(14px,-10px); } }

/* ---- vivid CTA: shifting gradient + drifting glow ---- */
.cta-vivid { background-size: 200% 200%; animation: grad-shift 14s ease infinite; }
@keyframes grad-shift { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.cta-vivid::before { animation: glow-drift 10s ease-in-out infinite; }
@keyframes glow-drift { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(3%,-3%) scale(1.08); } }

/* ---- product/pricing mock floats gently ---- */
.float-slow { animation: float-y 6s ease-in-out infinite; }
@keyframes float-y { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

/* ---- pricing: most-popular card breathes ---- */
.price-card.pop { position: relative; }
.price-card.pop::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, var(--accent), #7C5CFF, var(--warm));
  background-size: 200% 200%; animation: grad-shift 8s ease infinite; opacity: .9;
}

/* ---- staggered reveal helper for grids ---- */
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(2){ transition-delay:.09s } .stagger.in > *:nth-child(3){ transition-delay:.18s }
.stagger.in > *:nth-child(4){ transition-delay:.27s } .stagger.in > *:nth-child(5){ transition-delay:.36s } .stagger.in > *:nth-child(6){ transition-delay:.45s }

@media (prefers-reduced-motion: reduce){
  .btn-primary::after, .glow-card .glow-spot, .tdot--hot, .eu-ring::after, .eu-ring .star, .eu-ring .pkt,
  .cta-vivid, .cta-vivid::before, .float-slow, .price-card.pop::before { animation: none !important; }
  .stagger > * { opacity: 1; transform: none; transition: none; }
}