@charset "utf-8";



.wx-hero {
  isolation: isolate;
}

.wx-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.wx-hero-fx.is-active {
  opacity: 1;
}

.wx-hero-overlay {
  z-index: 1;
}

.wx-hero-inner {
  z-index: 2;
}

.wx-fx-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.wx-hero-fx[data-fx="clear"] .wx-fx-clear,
.wx-hero-fx[data-fx="cloudy"] .wx-fx-cloudy,
.wx-hero-fx[data-fx="precip"] .wx-fx-precip,
.wx-hero-fx[data-fx="snow"] .wx-fx-snow,
.wx-hero-fx[data-fx="obscured"] .wx-fx-obscured,
.wx-hero-fx[data-fx="dust-wind"] .wx-fx-dust-wind {
  opacity: 1;
  visibility: visible;
}


.wx-fx-sun,
.wx-fx-moon {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

.wx-hero-fx[data-daypart="day"] .wx-fx-sun {
  opacity: 1;
  top: -8%;
  right: 8%;
  width: min(42vw, 280px);
  height: min(42vw, 280px);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 245, 180, 0.95) 0%, rgba(255, 200, 60, 0.55) 28%, rgba(255, 180, 40, 0.18) 48%, transparent 70%);
  filter: blur(0.5px);
  animation: wx-fx-sun-pulse 8s ease-in-out infinite;
}

.wx-fx-sun-rays {
  position: absolute;
  top: -18%;
  right: -2%;
  width: min(55vw, 360px);
  height: min(55vw, 360px);
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 236, 160, 0.14) 8deg,
    transparent 16deg,
    transparent 40deg,
    rgba(255, 236, 160, 0.1) 48deg,
    transparent 56deg,
    transparent 100deg,
    rgba(255, 236, 160, 0.12) 108deg,
    transparent 116deg,
    transparent 360deg
  );
  border-radius: 50%;
  filter: blur(2px);
  mix-blend-mode: screen;
}

.wx-hero-fx[data-fx="clear"][data-daypart="day"] .wx-fx-sun-rays {
  opacity: 1;
  animation: wx-fx-rays-spin 48s linear infinite;
}

.wx-hero-fx[data-daypart="night"] .wx-fx-moon {
  opacity: 1;
  top: 6%;
  right: 12%;
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 35% 35%, #fff8e0 0%, #f5e6b8 45%, #d8c48a 100%);
  box-shadow: 0 0 40px rgba(255, 240, 190, 0.45), 0 0 90px rgba(180, 200, 255, 0.2);
}

.wx-fx-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.wx-hero-fx[data-daypart="night"] .wx-fx-stars {
  opacity: 1;
}

.wx-fx-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.55;
  animation: wx-fx-twinkle 3.2s ease-in-out infinite;
  animation-delay: var(--wx-fx-delay, 0s);
}


.wx-fx-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(2px);
  box-shadow:
    40px 8px 0 -6px rgba(255, 255, 255, 0.18),
    -36px 10px 0 -8px rgba(255, 255, 255, 0.16),
    10px -16px 0 -4px rgba(255, 255, 255, 0.2);
}

.wx-fx-cloud-a {
  top: 12%;
  left: -20%;
  width: 220px;
  height: 56px;
  opacity: 0.55;
  animation: wx-fx-cloud-drift 42s linear infinite;
}

.wx-fx-cloud-b {
  top: 28%;
  left: -30%;
  width: 300px;
  height: 70px;
  opacity: 0.4;
  animation: wx-fx-cloud-drift 58s linear infinite;
  animation-delay: -18s;
}

.wx-fx-cloud-c {
  top: 48%;
  left: -25%;
  width: 260px;
  height: 60px;
  opacity: 0.3;
  animation: wx-fx-cloud-drift 50s linear infinite;
  animation-delay: -30s;
}

.wx-fx-cloud-storm,
.wx-fx-cloud-snow {
  top: 4%;
  left: -15%;
  width: 340px;
  height: 72px;
  opacity: 0.35;
  background: rgba(220, 230, 240, 0.28);
  animation: wx-fx-cloud-drift 70s linear infinite;
}

.wx-hero-fx[data-daypart="night"] .wx-fx-cloud {
  background: rgba(180, 195, 220, 0.14);
  box-shadow:
    40px 8px 0 -6px rgba(180, 195, 220, 0.12),
    -36px 10px 0 -8px rgba(180, 195, 220, 0.1),
    10px -16px 0 -4px rgba(180, 195, 220, 0.12);
}


.wx-hero-fx[data-fx="clear"][data-daypart="day"] .wx-fx-cloudy {
  opacity: 0.35;
  visibility: visible;
}

.wx-hero-fx[data-fx="clear"][data-daypart="day"] .wx-fx-cloud-a {
  opacity: 0.25;
}
.wx-hero-fx[data-fx="clear"][data-daypart="day"] .wx-fx-cloud-b,
.wx-hero-fx[data-fx="clear"][data-daypart="day"] .wx-fx-cloud-c {
  opacity: 0.12;
}


.wx-fx-rain {
  position: absolute;
  inset: -10% 0 0;
}

.wx-fx-rain-drop {
  position: absolute;
  top: -20px;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(220, 235, 255, 0), rgba(210, 230, 255, 0.75));
  transform: rotate(12deg);
  animation: wx-fx-rain-fall var(--wx-fx-dur, 0.7s) linear infinite;
  animation-delay: var(--wx-fx-delay, 0s);
}


.wx-fx-snow-field {
  position: absolute;
  inset: 0;
}

.wx-fx-snow-flake {
  position: absolute;
  top: -12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  animation: wx-fx-snow-fall var(--wx-fx-dur, 8s) linear infinite;
  animation-delay: var(--wx-fx-delay, 0s);
}


.wx-fx-fog {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 245, 230, 0.35), transparent 70%);
  filter: blur(18px);
  animation: wx-fx-fog-drift 16s ease-in-out infinite alternate;
}

.wx-fx-fog-a { top: 8%; opacity: 0.7; animation-duration: 18s; }
.wx-fx-fog-b { top: 32%; opacity: 0.55; animation-duration: 22s; animation-delay: -6s; }
.wx-fx-fog-c { top: 55%; opacity: 0.4; animation-duration: 26s; animation-delay: -12s; }

.wx-hero-fx[data-daypart="night"] .wx-fx-fog {
  background: radial-gradient(ellipse at center, rgba(200, 195, 185, 0.22), transparent 70%);
}


.wx-fx-dust-field {
  position: absolute;
  inset: 0;
}

.wx-fx-dust {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 220, 170, 0.55);
  animation: wx-fx-dust-blow var(--wx-fx-dur, 10s) linear infinite;
  animation-delay: var(--wx-fx-delay, 0s);
}


@keyframes wx-fx-sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes wx-fx-rays-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wx-fx-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

@keyframes wx-fx-cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(140vw); }
}

@keyframes wx-fx-rain-fall {
  from { transform: translateY(0) translateX(0) rotate(12deg); opacity: 0; }
  10% { opacity: 0.85; }
  to { transform: translateY(120vh) translateX(-28px) rotate(12deg); opacity: 0.15; }
}

@keyframes wx-fx-snow-fall {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 0.95; }
  to { transform: translateY(110vh) translateX(var(--wx-fx-drift, 20px)); opacity: 0.2; }
}

@keyframes wx-fx-fog-drift {
  from { transform: translateX(-3%) scale(1); }
  to { transform: translateX(3%) scale(1.05); }
}

@keyframes wx-fx-dust-blow {
  from { transform: translateX(-20px) translateY(0); opacity: 0; }
  15% { opacity: 0.7; }
  to { transform: translateX(60vw) translateY(-18px); opacity: 0; }
}


.wx-hero-fx.is-reduced-motion .wx-fx-sun,
.wx-hero-fx.is-reduced-motion .wx-fx-sun-rays,
.wx-hero-fx.is-reduced-motion .wx-fx-cloud,
.wx-hero-fx.is-reduced-motion .wx-fx-rain-drop,
.wx-hero-fx.is-reduced-motion .wx-fx-snow-flake,
.wx-hero-fx.is-reduced-motion .wx-fx-fog,
.wx-hero-fx.is-reduced-motion .wx-fx-dust,
.wx-hero-fx.is-reduced-motion .wx-fx-star {
  animation: none !important;
}

.wx-hero-fx.is-reduced-motion .wx-fx-rain-drop,
.wx-hero-fx.is-reduced-motion .wx-fx-snow-flake,
.wx-hero-fx.is-reduced-motion .wx-fx-dust {
  opacity: 0.35;
}

@media (max-width: 720px) {
  .wx-hero-fx[data-daypart="day"] .wx-fx-sun {
    width: 180px;
    height: 180px;
    right: -4%;
  }
  .wx-fx-cloud-a,
  .wx-fx-cloud-b,
  .wx-fx-cloud-c {
    transform: scale(0.75);
  }
}