/**
 * CoreV2 Weather v3 — CSS-first (GPU compositor)
 * Canvas rAF yok (network hariç). will-change yalnızca animasyon süresince.
 */
.cv2-wx {
  --cv2-wx-primary: 59, 130, 246;
  --cv2-wx-speed: 1;
  --cv2-wx-size: 1;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  z-index: 3;
  contain: strict;
  isolation: isolate;
}

/* Site içeriği canvas üstünde kalsın (tıklama) */
html.cv2-weather-on body[data-weather-effect="1"] #wrapper,
html.cv2-weather-on body[data-weather-effect="1"] main {
  position: relative;
  z-index: 2;
}

.cv2-wx > i {
  position: absolute;
  top: -12%;
  left: var(--x, 50%);
  width: calc(var(--s, 6px) * var(--cv2-wx-size, 1));
  height: calc(var(--s, 6px) * var(--cv2-wx-size, 1));
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  opacity: var(--a, 0.55);
  animation-name: cv2-wx-fall;
  animation-duration: calc(var(--t, 8s) / var(--cv2-wx-speed, 1));
  animation-delay: var(--d, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform;
  transform: translate3d(0, 0, 0) rotate(var(--r, 0deg));
  backface-visibility: hidden;
}

/* —— snow —— */
.cv2-wx--snow > i {
  border-radius: 50%;
  background: rgba(200, 212, 228, var(--a, 0.55));
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] .cv2-wx--snow > i,
html.dark-mode .cv2-wx--snow > i {
  background: rgba(255, 255, 255, var(--a, 0.5));
}

/* —— autumn (procedural leaf, no image decode) —— */
.cv2-wx--autumn > i {
  width: calc(var(--s, 10px) * var(--cv2-wx-size, 1) * 1.15);
  height: calc(var(--s, 10px) * var(--cv2-wx-size, 1) * 0.7);
  border-radius: 0 70% 40% 70%;
  background: hsl(var(--hue, 28), 72%, 44%);
  opacity: var(--a, 0.7);
  animation-name: cv2-wx-leaf;
  filter: saturate(1.05);
}

/* —— particles (theme color dots) —— */
.cv2-wx--particles > i {
  border-radius: 50%;
  background: rgba(var(--cv2-wx-primary), var(--a, 0.45));
  box-shadow: 0 0 6px rgba(var(--cv2-wx-primary), 0.25);
  animation-name: cv2-wx-float;
}

/* —— bubbles —— */
.cv2-wx--bubbles > i {
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(var(--cv2-wx-primary), calc(var(--a, 0.5) * 0.9));
  box-shadow: inset 0 0 6px rgba(var(--cv2-wx-primary), 0.12);
  animation-name: cv2-wx-rise;
}

/* —— sparkle —— */
.cv2-wx--sparkle > i {
  border-radius: 1px;
  background: rgba(var(--cv2-wx-primary), var(--a, 0.7));
  box-shadow: 0 0 4px rgba(var(--cv2-wx-primary), 0.5);
  animation-name: cv2-wx-sparkle;
}

/* —— mist (soft blobs) —— */
.cv2-wx--mist > i {
  width: calc(var(--s, 40px) * var(--cv2-wx-size, 1) * 2.2);
  height: calc(var(--s, 40px) * var(--cv2-wx-size, 1) * 1.2);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--cv2-wx-primary), 0.08) 0%, transparent 70%);
  filter: blur(8px);
  animation-name: cv2-wx-mist;
  opacity: var(--a, 0.35);
}

/* —— network: canvas host —— */
.cv2-wx--network canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* Admin preview scope (same engine) */
.cv2-wx--preview {
  position: absolute;
  z-index: 2;
  border-radius: inherit;
}
.weather-preview-container {
  position: relative;
  overflow: hidden;
}
.weather-preview-container .weather-preview-layer {
  /* canvas legacy — v3 CSS layer uses .cv2-wx--preview */
  display: none;
}

@keyframes cv2-wx-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(var(--r, 0deg)); }
  100% { transform: translate3d(var(--dx, 12vw), 110vh, 0) rotate(calc(var(--r, 0deg) + 180deg)); }
}
@keyframes cv2-wx-leaf {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  50%  { transform: translate3d(var(--dx, 8vw), 50vh, 0) rotate(120deg); }
  100% { transform: translate3d(calc(var(--dx, 8vw) * -0.4), 110vh, 0) rotate(260deg); }
}
@keyframes cv2-wx-float {
  0%   { transform: translate3d(0, 105vh, 0) scale(0.7); opacity: 0; }
  10%  { opacity: var(--a, 0.5); }
  100% { transform: translate3d(var(--dx, 6vw), -15vh, 0) scale(1.1); opacity: 0; }
}
@keyframes cv2-wx-rise {
  0%   { transform: translate3d(0, 110vh, 0) scale(0.6); opacity: 0; }
  15%  { opacity: var(--a, 0.5); }
  100% { transform: translate3d(var(--dx, 4vw), -12vh, 0) scale(1.15); opacity: 0; }
}
@keyframes cv2-wx-sparkle {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  40% { opacity: var(--a, 0.8); transform: translate3d(var(--dx, 2vw), 8vh, 0) scale(1); }
  70% { opacity: 0.2; }
}
@keyframes cv2-wx-mist {
  0%   { transform: translate3d(-5vw, 40vh, 0) scale(0.9); }
  50%  { transform: translate3d(var(--dx, 10vw), 35vh, 0) scale(1.15); }
  100% { transform: translate3d(calc(var(--dx, 10vw) * -0.5), 45vh, 0) scale(1); }
}

/* Panel / reduced motion / mobile: kapalı */
body#modernpanel .cv2-wx,
body#muspanel .cv2-wx,
body.modernpanel .cv2-wx {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .cv2-wx { display: none; }
}
@media (max-width: 767px), (pointer: coarse) {
  .cv2-wx:not(.cv2-wx--preview) { display: none; }
}

/* Preview: reduced motion'da da hafif dursun (admin test) */
@media (prefers-reduced-motion: reduce) {
  .cv2-wx--preview > i { animation-duration: 20s; opacity: 0.25; }
}