/*
 * TLT Fog Report Hero Weather v1.1.0
 * All selectors are deliberately scoped to the existing permanent hero.
 */

.tlt-fog-hero-v1.tlt-fog-weather-ready-v1 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tlt-fog-hero-v1.tlt-fog-weather-ready-v1 > img {
  position: relative;
  z-index: 0;
}

.tlt-fog-hero-v1 .tlt-fog-weather-v1,
.tlt-fog-hero-v1 .tlt-fog-weather-v1 * {
  box-sizing: border-box;
}

.tlt-fog-hero-v1 .tlt-fog-weather-v1 {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  contain: paint;
}

.tlt-fog-hero-v1 .tlt-fog-cloud-v1 {
  position: absolute;
  display: block;
  pointer-events: none;
  background-image: url("../media/tlt-fog-noise.svg");
  background-repeat: repeat;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 88%, transparent 100%);
}

.tlt-fog-hero-v1 .tlt-fog-cloud-far-v1 {
  inset: -26% -42% -20%;
  z-index: 1;
  opacity: 0.16;
  filter: blur(15px);
  background-image:
    radial-gradient(ellipse at 18% 43%, rgba(216, 230, 233, 0.72) 0 6%, transparent 23%),
    radial-gradient(ellipse at 52% 56%, rgba(200, 219, 223, 0.58) 0 8%, transparent 27%),
    radial-gradient(ellipse at 83% 38%, rgba(221, 233, 235, 0.62) 0 6%, transparent 24%),
    url("../media/tlt-fog-noise.svg");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 48% 55%, 54% 58%, 45% 51%, 47% 82%;
  animation: tlt-fog-drift-far-v1 66s linear infinite alternate;
}

.tlt-fog-hero-v1 .tlt-fog-cloud-near-v1 {
  inset: -18% -48% -28%;
  z-index: 2;
  opacity: 0.125;
  filter: blur(21px);
  background-image:
    radial-gradient(ellipse at 27% 52%, rgba(221, 233, 235, 0.68) 0 7%, transparent 25%),
    radial-gradient(ellipse at 70% 59%, rgba(202, 221, 225, 0.58) 0 9%, transparent 30%),
    url("../media/tlt-fog-noise.svg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 56% 59%, 62% 64%, 58% 94%;
  animation: tlt-fog-drift-near-v1 48s ease-in-out infinite alternate;
}

.tlt-fog-hero-v1 .tlt-fog-cloud-low-v1 {
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -16%;
  height: 54%;
  z-index: 3;
  opacity: 0.17;
  filter: blur(23px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 14% 58%, rgba(218, 231, 233, 0.76) 0 8%, transparent 30%),
    radial-gradient(ellipse at 43% 66%, rgba(205, 222, 226, 0.62) 0 10%, transparent 34%),
    radial-gradient(ellipse at 76% 46%, rgba(220, 232, 234, 0.70) 0 9%, transparent 32%),
    radial-gradient(ellipse at 94% 69%, rgba(203, 220, 224, 0.56) 0 8%, transparent 29%);
  transform: translate3d(-4%, 0, 0) scale(1.05);
  will-change: transform, opacity;
  animation: tlt-fog-drift-low-v1 54s ease-in-out infinite alternate;
}

.tlt-fog-hero-v1 .tlt-fog-beacon-v1 {
  position: absolute;
  left: 65.8%;
  top: 24.7%;
  z-index: 4;
  width: clamp(34px, 7.5%, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.14;
  transform: translate(-50%, -50%) scale(0.78);
  transform-origin: center;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle,
    rgba(255, 220, 154, 0.76) 0 3%,
    rgba(255, 195, 105, 0.30) 9%,
    rgba(255, 179, 82, 0.10) 28%,
    transparent 66%
  );
  filter: blur(1.5px);
  will-change: transform, opacity;
  animation: tlt-fog-beacon-breathe-v1 8.4s ease-in-out infinite;
}

.tlt-fog-hero-v1 .tlt-fog-rain-v1 {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.92;
  pointer-events: none;
}

@keyframes tlt-fog-drift-far-v1 {
  0% {
    opacity: 0.11;
    transform: translate3d(-5.5%, -0.5%, 0) scale(1.04);
  }
  52% {
    opacity: 0.18;
  }
  100% {
    opacity: 0.13;
    transform: translate3d(6.5%, 1.4%, 0) scale(1.10);
  }
}

@keyframes tlt-fog-drift-near-v1 {
  0% {
    opacity: 0.085;
    transform: translate3d(5%, 1%, 0) scale(1.08);
  }
  56% {
    opacity: 0.15;
  }
  100% {
    opacity: 0.095;
    transform: translate3d(-6.5%, -1.5%, 0) scale(1.14);
  }
}

@keyframes tlt-fog-drift-low-v1 {
  0% {
    opacity: 0.11;
    transform: translate3d(-4.5%, 1%, 0) scale(1.04);
  }
  48% {
    opacity: 0.19;
  }
  100% {
    opacity: 0.125;
    transform: translate3d(5.5%, -2%, 0) scale(1.11);
  }
}

@keyframes tlt-fog-beacon-breathe-v1 {
  0%,
  62%,
  100% {
    opacity: 0.075;
    transform: translate(-50%, -50%) scale(0.72);
  }
  72% {
    opacity: 0.23;
    transform: translate(-50%, -50%) scale(1.02);
  }
  81% {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(0.84);
  }
}

@media (max-width: 780px) {
  .tlt-fog-hero-v1 .tlt-fog-cloud-far-v1 {
    opacity: 0.095;
    filter: blur(10px);
  }

  .tlt-fog-hero-v1 .tlt-fog-cloud-near-v1 {
    display: none;
  }

  .tlt-fog-hero-v1 .tlt-fog-cloud-low-v1 {
    opacity: 0.10;
    height: 48%;
  }

  .tlt-fog-hero-v1 .tlt-fog-beacon-v1 {
    opacity: 0.09;
  }

  .tlt-fog-hero-v1 .tlt-fog-rain-v1 {
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlt-fog-hero-v1 .tlt-fog-weather-v1 {
    display: none !important;
  }
}