/* WeatherPower New Year (2026) – lightweight decorations
   - Confetti overlay + sparkle glow
   - Works with newyear.js (injects overlay)
   - Designed to avoid blocking UI (pointer-events: none on overlay)
*/

:root{
  --ny-glow-a: rgba(56,189,248,.45);   /* cyan */
  --ny-glow-b: rgba(168,85,247,.40);   /* purple */
  --ny-glow-c: rgba(251,191,36,.28);   /* gold */
  --ny-chip-bg: rgba(2, 6, 23, .62);
  --ny-chip-border: rgba(148, 163, 184, .35);
}

#wp-ny-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  overflow: hidden;
}

#wp-ny-overlay::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side at 20% 25%, var(--ny-glow-a), transparent 62%),
    radial-gradient(closest-side at 80% 20%, var(--ny-glow-b), transparent 62%),
    radial-gradient(closest-side at 55% 70%, var(--ny-glow-c), transparent 66%);
  filter: blur(14px);
  opacity: .85;
  transform: translateZ(0);
}

/* Confetti pieces (generated by JS) */
.wp-ny-piece{
  position:absolute;
  top: -12vh;
  left: 0;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  opacity: .95;
  transform: translate3d(0,0,0) rotate(0deg);
  will-change: transform, top, left;
  animation:
    wpNYFall var(--ny-dur, 8s) linear infinite,
    wpNYSpin var(--ny-spin, 2.2s) linear infinite;
}

@keyframes wpNYFall{
  0%{ transform: translate3d(var(--ny-x,0), -18vh, 0) rotate(0deg); }
  100%{ transform: translate3d(calc(var(--ny-x,0) + var(--ny-drift, 60px)), 118vh, 0) rotate(0deg); }
}
@keyframes wpNYSpin{
  0%{ rotate: 0deg; }
  100%{ rotate: 360deg; }
}

/* Chip */
#wp-ny-chip{
  position: absolute;
  top: 14px;
  right: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  background: var(--ny-chip-bg);
  border: 1px solid var(--ny-chip-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 12px 35px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 18px rgba(56,189,248,.18),
    0 0 18px rgba(168,85,247,.14);
  pointer-events: auto;
  user-select:none;
}

#wp-ny-chip .ny-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(56,189,248,.28), rgba(168,85,247,.24));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
  font-size: 16px;
}

#wp-ny-chip .ny-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width: 164px;
}

#wp-ny-chip .ny-title{
  font: 700 12px/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(226,232,240,.92);
}
#wp-ny-chip .ny-sub{
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(203,213,225,.9);
}

#wp-ny-chip button{
  all: unset;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.35);
  color: rgba(226,232,240,.85);
}
#wp-ny-chip button:hover{
  background: rgba(15,23,42,.55);
}

@media (max-width: 520px){
  #wp-ny-chip{ top: 10px; right: 10px; padding: 9px 10px; border-radius: 13px; }
  #wp-ny-chip .ny-text{ min-width: 140px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #wp-ny-overlay::before{ opacity: .55; }
  .wp-ny-piece{ display:none !important; }
}