.home-atmosphere {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(475px + var(--home-safe-top, 0px));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 58%, transparent 100%);
}

.home-atmosphere[hidden] { display: none; }

.home-cloud-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0;
  transition: opacity .6s ease;
}
.home-atmosphere[data-video="playing"] .home-cloud-video { opacity: 1; }
.home-atmosphere[data-weather="cloud"] .home-cloud-video { filter: saturate(.82) brightness(.98); }
.home-atmosphere[data-weather="rain"] .home-cloud-video { filter: saturate(.74) brightness(.94); }
.home-atmosphere[data-weather="snow"] .home-cloud-video { filter: saturate(.68) brightness(1.04); }
.home-atmosphere[data-weather="storm"] .home-cloud-video { animation: weather-storm-light 7s ease-in-out infinite; }
.home-atmosphere[data-weather="mist"] .home-cloud-video { filter: saturate(.66) brightness(1.04) contrast(.92); }

.home-atmosphere .home-scenery {
  z-index: 0;
  top: -8px;
  left: -16px;
  width: calc(100% + 32px);
  height: calc(495px + var(--home-safe-top, 0px));
  max-width: none;
  object-fit: cover;
  object-position: 50% 45%;
  -webkit-mask-image: none;
  mask-image: none;
  transform: scale(1.035);
  transform-origin: 50% 24%;
  will-change: transform, filter;
}

.weather-cloud-layer {
  position: absolute;
  z-index: 1;
  top: -34px;
  left: -40%;
  width: 180%;
  height: 300px;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  filter: saturate(.62) brightness(1.06) blur(.45px);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .84) 56%, transparent 100%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .84) 56%, transparent 100%);
  will-change: transform, opacity, filter;
}

.weather-particles {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
}

.weather-particle {
  position: absolute;
  top: -30px;
  left: var(--particle-x);
  width: 12px;
  height: 12px;
  opacity: .42;
  transform: translate3d(0, -35px, 0) scale(var(--particle-scale));
  animation: weather-particle-fall var(--particle-duration) linear var(--particle-delay) infinite;
  will-change: transform, opacity;
}

.weather-particle--drop { width: 9px; height: 15px; opacity: .34; }
.weather-particle--flake { width: 14px; height: 14px; opacity: .54; animation-name: weather-snow-fall; }

.home-atmosphere[data-weather="sun"] .home-scenery { animation: weather-scenery-breathe 14s ease-in-out infinite; }
.home-atmosphere[data-weather="sun"] .weather-cloud-layer { opacity: .34; animation: weather-cloud-flow 18s ease-in-out infinite alternate; }
.home-atmosphere[data-weather="cloud"] .home-scenery { filter: saturate(.82) brightness(.98); }
.home-atmosphere[data-weather="cloud"] .weather-cloud-layer { opacity: .46; animation: weather-cloud-flow 16s ease-in-out infinite alternate; }
.home-atmosphere[data-weather="rain"] .home-scenery { filter: saturate(.74) brightness(.94); }
.home-atmosphere[data-weather="rain"] .weather-cloud-layer { opacity: .4; animation: weather-cloud-drift 23s ease-in-out infinite; }
.home-atmosphere[data-weather="snow"] .home-scenery { filter: saturate(.68) brightness(1.04); }
.home-atmosphere[data-weather="snow"] .weather-cloud-layer { opacity: .28; animation: weather-cloud-drift 34s ease-in-out infinite; }
.home-atmosphere[data-weather="storm"] .home-scenery { animation: weather-storm-light 7s ease-in-out infinite; filter: saturate(.62) brightness(.88); }
.home-atmosphere[data-weather="storm"] .weather-cloud-layer { opacity: .48; animation: weather-cloud-drift 19s ease-in-out infinite, weather-storm-light 7s ease-in-out infinite; }
.home-atmosphere[data-weather="mist"] .home-scenery { filter: saturate(.66) brightness(1.04) contrast(.92); }
.home-atmosphere[data-weather="mist"] .weather-cloud-layer { opacity: .26; filter: saturate(.5) brightness(1.14) blur(3px); animation: weather-mist-drift 42s ease-in-out infinite; }
.home-atmosphere[data-video="playing"] .weather-cloud-layer { opacity: 0; animation: none; }

@keyframes weather-scenery-breathe {
  0%, 100% { transform: scale(1.035) translate3d(0, 0, 0); filter: brightness(1); }
  50% { transform: scale(1.05) translate3d(0, -2px, 0); filter: brightness(1.035); }
}

@keyframes weather-cloud-drift {
  0%, 100% { transform: translate3d(-1.5%, 0, 0) scale(1.02); }
  50% { transform: translate3d(1.5%, 2px, 0) scale(1.04); }
}

@keyframes weather-cloud-flow {
  from { transform: translate3d(-9%, 0, 0) scale(1.02); }
  to { transform: translate3d(9%, 4px, 0) scale(1.04); }
}

@keyframes weather-mist-drift {
  0%, 100% { transform: translate3d(-2%, 3px, 0) scale(1.04); }
  50% { transform: translate3d(2%, 8px, 0) scale(1.07); }
}

@keyframes weather-storm-light {
  0%, 30%, 100% { filter: saturate(.62) brightness(.88); }
  36% { filter: saturate(.66) brightness(.96); }
  43% { filter: saturate(.62) brightness(.9); }
}

@keyframes weather-particle-fall {
  0% { transform: translate3d(0, -35px, 0) scale(var(--particle-scale)); opacity: 0; }
  12% { opacity: .34; }
  100% { transform: translate3d(-24px, 505px, 0) scale(var(--particle-scale)); opacity: .08; }
}

@keyframes weather-snow-fall {
  0% { transform: translate3d(0, -35px, 0) rotate(0deg) scale(var(--particle-scale)); opacity: 0; }
  14% { opacity: .54; }
  50% { transform: translate3d(18px, 235px, 0) rotate(145deg) scale(var(--particle-scale)); }
  100% { transform: translate3d(-12px, 505px, 0) rotate(300deg) scale(var(--particle-scale)); opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cloud-video { display: none; }
  .home-atmosphere *,
  .home-atmosphere *::before,
  .home-atmosphere *::after { animation: none !important; }
  .weather-particles { display: none; }
}