/*
  ESTILO GERAL DO PROJETO
  - O card e uma imagem estatica.
  - A nuvem e feita com HTML/CSS 3D para funcionar ate abrindo o index.html direto.
  - Os valores principais da nuvem podem ser ajustados em js/cloud.js.
*/

:root {
  /* Cor do fundo fora do card. */
  --page-bg: #02070b;

  /* Brilho e sombra do card. */
  --card-glow: rgba(42, 178, 237, 0.18);
  --card-shadow: rgba(0, 0, 0, 0.5);

  /* COR ORIGINAL DA NUVEM */
  --cloud-color: #f7faf9;
  --cloud-mid-color: #dce8ec;
  --cloud-shadow-color: rgba(9, 43, 55, 0.24);
  --cloud-highlight: rgba(255, 255, 255, 0.82);

  /* CONTROLES DA NUVEM
     O arquivo js/cloud.js altera estes valores automaticamente pelo bloco CONFIG. */
  --cloud-scale: 1;
  --cloud-rotate-x: 8deg;
  --cloud-rotate-y-start: -16deg;
  --cloud-rotate-y-end: 18deg;
  --cloud-rotate-z: 0deg;
  --cloud-speed: 5.5s;

  /* ILUMINACAO SIMULADA */
  --cloud-brightness: 1.08;
  --cloud-contrast: 1.04;
  --cloud-saturation: 1;

  /* RAIOS NO HOVER */
  --lightning-color: #fff37a;
  --lightning-side-color: #d99222;
  --lightning-back-color: #9f6712;
  --lightning-core-color: #ffffff;
  --lightning-glow: rgba(255, 238, 55, 1);
  --lightning-speed: 820ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 36%, rgba(18, 103, 143, 0.22), transparent 34rem),
    var(--page-bg);
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

/* Centraliza o card na tela. */
.weather-stage {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  gap: clamp(24px, 4vw, 52px);
  padding: clamp(10px, 3vw, 32px);
}

/* Moldura do card. O aspect-ratio segue o tamanho da imagem original: 1600x956. */
.weather-card {
  position: relative;
  width: min(100%, 1600px);
  aspect-ratio: 1600 / 956;
  overflow: hidden;
  border-radius: clamp(18px, 2.3vw, 42px);
  box-shadow:
    0 26px 70px var(--card-shadow),
    0 0 42px var(--card-glow);
  background: #004766;
}

/* IMAGEM DO FUNDO DO CARD
   Arquivo usado: assets/images/fundo-card.jpeg */
.weather-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* POSICAO DA NUVEM NO CARD
   Edite estes quatro valores para mover ou redimensionar a nuvem:
   - left: move para esquerda/direita
   - top: move para cima/baixo
   - width: largura da area da nuvem
   - height: altura da area da nuvem
*/
.cloud-layer {
  position: absolute;
  left: 37%;
  top: 9%;
  width: 38%;
  height: 38%;
  display: grid;
  place-items: center;
  pointer-events: auto;
  perspective: 900px;
  isolation: isolate;
}

/* GRUPO DA NUVEM 3D
   A rotacao normal fica em loop. No hover, os raios 3D aparecem atras da nuvem. */
.cloud-3d {
  position: relative;
  z-index: 3;
  width: 78%;
  height: 62%;
  transform-style: preserve-3d;
  transform-origin: 50% 58%;
  animation: cloud-spin var(--cloud-speed) ease-in-out infinite alternate;
  scale: var(--cloud-scale);
  filter:
    brightness(var(--cloud-brightness))
    contrast(var(--cloud-contrast))
    saturate(var(--cloud-saturation));
}

/* BOLHAS DA NUVEM ORIGINAL, SEM TEXTURA */
.cloud-puff {
  position: absolute;
  display: block;
  border-radius: 999px;
  background:
    radial-gradient(circle at 31% 23%, var(--cloud-highlight), transparent 32%),
    radial-gradient(circle at 70% 78%, #c7d5dc 0%, transparent 48%),
    linear-gradient(145deg, #ffffff 0%, var(--cloud-color) 42%, var(--cloud-mid-color) 100%);
  box-shadow:
    inset -18px -18px 30px rgba(95, 123, 137, 0.22),
    inset 12px 12px 22px rgba(255, 255, 255, 0.52),
    0 12px 22px rgba(5, 24, 34, 0.16);
  backface-visibility: visible;
  transition:
    left 700ms cubic-bezier(0.2, 0.9, 0.2, 1),
    top 700ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 380ms ease,
    transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1),
    filter 700ms ease;
}

/* FORMATO ORIGINAL DA NUVEM */
.puff-1 {
  left: 2%;
  top: 45%;
  width: 28%;
  height: 30%;
  transform: translateZ(18px) rotateY(-12deg);
}

.puff-2 {
  left: 17%;
  top: 35%;
  width: 31%;
  height: 39%;
  transform: translateZ(36px) rotateY(-8deg);
}

.puff-3 {
  left: 32%;
  top: 9%;
  width: 36%;
  height: 58%;
  transform: translateZ(8px);
}

.puff-4 {
  left: 54%;
  top: 31%;
  width: 30%;
  height: 41%;
  transform: translateZ(34px) rotateY(10deg);
}

.puff-5 {
  left: 74%;
  top: 42%;
  width: 22%;
  height: 28%;
  transform: translateZ(14px) rotateY(14deg);
}

.puff-6 {
  left: 28%;
  top: 56%;
  width: 31%;
  height: 27%;
  transform: translateZ(54px);
}

.puff-7 {
  left: 48%;
  top: 58%;
  width: 30%;
  height: 25%;
  transform: translateZ(48px);
}

/* EFEITO DE RAIOS NO HOVER
   Ao passar o mouse na nuvem, a nuvem continua inteira e os raios aparecem.
   Ao tirar o mouse, os raios somem automaticamente. */
.cloud-layer:hover .cloud-3d,
.cloud-layer.is-lightning .cloud-3d,
.cloud-layer.is-auto-lightning .cloud-3d {
  filter:
    brightness(calc(var(--cloud-brightness) * 1.08))
    contrast(var(--cloud-contrast))
    saturate(var(--cloud-saturation));
}

.lightning-layer {
  position: absolute;
  z-index: 1;
  left: 15%;
  top: 50%;
  width: 70%;
  height: 58%;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: translateZ(1px);
  transition: opacity 160ms ease;
}

.cloud-layer:hover .lightning-layer,
.cloud-layer.is-lightning .lightning-layer,
.cloud-layer.is-auto-lightning .lightning-layer {
  opacity: 1;
}

/*
  RAIO 3D REAL EM WEBGL
  O desenho do relampago e feito no js/cloud.js dentro deste canvas.
  Ele fica atras da nuvem, com faces facetadas e brilho luminoso.
*/
.lightning-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 0 10px var(--lightning-glow))
    drop-shadow(0 0 28px rgba(255, 229, 47, 0.82))
    drop-shadow(0 0 56px rgba(255, 177, 24, 0.48));
}

/* SOMBRA DA NUVEM */
.cloud-shadow {
  position: absolute;
  left: 18%;
  top: 72%;
  width: 64%;
  height: 16%;
  border-radius: 999px;
  background: var(--cloud-shadow-color);
  filter: blur(10px);
  transform: translateZ(-42px) rotateX(78deg);
  transition: opacity 500ms ease, scale 700ms ease;
}

.cloud-layer:hover .cloud-shadow,
.cloud-layer.is-lightning .cloud-shadow {
  opacity: 0.36;
  scale: 1.12 0.86;
}


/* CHUVA
   Esta camada recebe os pingos criados automaticamente pelo js/cloud.js. */
.rain-layer {
  position: absolute;
  z-index: 1;
  left: 18%;
  top: 57%;
  width: 64%;
  height: 56%;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  transform: translateZ(1px);
}

.rain-drop {
  position: absolute;
  top: -18%;
  left: var(--drop-left);
  width: var(--drop-width, 2px);
  height: var(--drop-height, 22px);
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, var(--rain-color));
  opacity: var(--drop-opacity, 0.8);
  transform: rotate(var(--rain-slant));
  animation: rain-fall var(--drop-speed, var(--rain-speed)) linear infinite;
  animation-delay: var(--drop-delay, 0ms);
}

@keyframes rain-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rain-slant));
    opacity: 0;
  }

  14% {
    opacity: var(--drop-opacity, 0.8);
  }

  100% {
    transform: translate3d(10px, var(--rain-distance), 0) rotate(var(--rain-slant));
    opacity: 0;
  }
}
@keyframes cloud-spin {
  from {
    transform: rotateX(var(--cloud-rotate-x)) rotateY(var(--cloud-rotate-y-start)) rotateZ(var(--cloud-rotate-z));
  }

  to {
    transform: rotateX(var(--cloud-rotate-x)) rotateY(var(--cloud-rotate-y-end)) rotateZ(var(--cloud-rotate-z));
  }
}

/* AJUSTES PARA CELULAR */
@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .weather-stage {
    align-content: center;
  }

  .weather-card {
    width: 100%;
    border-radius: 18px;
  }

  .cloud-layer {
    left: 36%;
    top: 8%;
    width: 40%;
    height: 40%;
  }
}

/* Respeita usuarios que preferem menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  .weather-card {
    box-shadow: 0 18px 50px var(--card-shadow);
  }

  .cloud-3d {
    animation: none;
    transform: rotateX(var(--cloud-rotate-x)) rotateY(0deg) rotateZ(var(--cloud-rotate-z));
  }
}

/* ============================================================
   CARD DE ESTIAGEM
   Mantem a mesma proporcao e acabamento da imagem do card atual,
   mas com texto em HTML para permitir alterar os dados da seca.
   ============================================================ */
.weather-card--heat,
.weather-card--flood,
.weather-card--landslide,
.weather-card--wind {
  color: #ffffff;
  background: #004b6b;
  container-type: inline-size;
}

.weather-generated-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 54% 18%, rgba(47, 165, 219, 0.22), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(0, 110, 158, 0.3), transparent 48%),
    linear-gradient(160deg, #075f86 0%, #004e72 46%, #003f5f 100%);
}

.weather-generated-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(89, 201, 245, 0.42);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -32px 90px rgba(0, 30, 48, 0.28);
  pointer-events: none;
}

.weather-info {
  position: absolute;
  left: 5.7%;
  top: 8.1%;
  z-index: 2;
}

.weather-info p,
.weather-extremes p,
.weather-metrics p,
.weather-updated {
  margin: 0;
  line-height: 1;
}

.weather-location {
  font-size: clamp(18px, 4.1cqw, 66px);
  font-weight: 800;
  letter-spacing: 0;
}

.weather-temp {
  margin-top: 4.6cqw !important;
  font-size: clamp(72px, 16.6cqw, 266px);
  font-weight: 900;
  letter-spacing: 0;
}

.weather-condition {
  margin-top: 2.2cqw !important;
  color: #22c6ff;
  font-size: clamp(24px, 5.3cqw, 86px);
  font-weight: 900;
  letter-spacing: 0;
}

.weather-feels {
  margin-top: 1.3cqw !important;
  font-size: clamp(20px, 4.35cqw, 70px);
  font-weight: 500;
  letter-spacing: 0;
}

.weather-extremes {
  position: absolute;
  z-index: 2;
  right: 4.7%;
  top: 38%;
  display: grid;
  gap: 2.5cqw;
  font-size: clamp(20px, 4.1cqw, 66px);
  font-weight: 500;
}

.heat-layer {
  position: absolute;
  z-index: 2;
  left: 33.6%;
  top: 7.2%;
  width: 42%;
  height: 44%;
  pointer-events: auto;
}

.heat-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 18px 18px rgba(4, 26, 34, 0.28));
}


/* ============================================================
   CARD DE INUNDACOES
   Carro e agua sao modelos GLB reais renderizados no mesmo canvas.
   ============================================================ */
.weather-card--flood .weather-generated-bg {
  background:
    radial-gradient(circle at 55% 18%, rgba(74, 202, 244, 0.25), transparent 28%),
    radial-gradient(circle at 51% 49%, rgba(0, 139, 181, 0.3), transparent 48%),
    linear-gradient(160deg, #09688e 0%, #005373 47%, #003e5a 100%);
}

.weather-condition--flood {
  color: #36d4ff;
  font-size: clamp(22px, 4.75cqw, 76px);
}

.flood-layer {
  position: absolute;
  z-index: 2;
  left: 33%;
  top: 5.5%;
  width: 44%;
  height: 47%;
  pointer-events: auto;
}

.flood-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 17px 16px rgba(2, 27, 40, 0.27))
    drop-shadow(0 0 14px rgba(37, 191, 235, 0.15));
}
/* ============================================================
   CARD DE DESLIZAMENTO
   O modelo, a textura, a camera e as luzes ficam em js/landslide.js.
   ============================================================ */
.weather-card--landslide .weather-generated-bg {
  background:
    linear-gradient(180deg, rgba(255, 180, 96, 0.13) 0%, transparent 42%),
    linear-gradient(158deg, #0b688a 0%, #00516f 48%, #003d58 100%);
}

.weather-condition--landslide {
  color: #ffc15b;
  font-size: clamp(21px, 4.2cqw, 68px);
}

.landslide-layer {
  position: absolute;
  z-index: 2;
  left: 32.5%;
  top: 3.5%;
  width: 46.5%;
  height: 49%;
  pointer-events: auto;
}

.landslide-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 17px 17px rgba(27, 18, 11, 0.28))
    drop-shadow(0 0 12px rgba(255, 176, 80, 0.12));
}

/* ============================================================
   CARD DE VENTANIA
   A arvore e um GLB com morph target animado. A cena e transparente
   e preserva o mesmo enquadramento e acabamento dos outros cards.
   ============================================================ */
.weather-card--wind .weather-generated-bg {
  background:
    radial-gradient(circle at 54% 17%, rgba(164, 225, 230, 0.2), transparent 29%),
    linear-gradient(155deg, #08718a 0%, #00566f 48%, #003e59 100%);
}

.weather-condition--wind {
  color: #7fe6df;
}

.wind-layer {
  position: absolute;
  z-index: 2;
  left: 35%;
  top: 2.8%;
  width: 41%;
  height: 50%;
  pointer-events: auto;
}

.wind-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 18px 18px rgba(3, 28, 34, 0.32))
    drop-shadow(0 0 12px rgba(154, 231, 194, 0.1));
}
.weather-divider {
  position: absolute;
  z-index: 2;
  left: 5.7%;
  right: 4.7%;
  height: 2px;
  background: rgba(104, 196, 232, 0.28);
}

.weather-divider--top {
  top: 70.1%;
}

.weather-divider--bottom {
  top: 91.4%;
}

.weather-metrics {
  position: absolute;
  z-index: 2;
  left: 5.7%;
  right: 4.7%;
  top: 75.0%;
  display: grid;
  grid-template-columns: 1fr 1.13fr 1fr;
  align-items: center;
  min-height: 12.2cqw;
}

.weather-metric {
  position: relative;
  display: grid;
  grid-template-columns: 7.3cqw 1fr;
  align-items: start;
  gap: 2.1cqw;
  min-width: 0;
}

.weather-metric:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.8cqw;
  right: 8%;
  width: 2px;
  height: 9.2cqw;
  background: rgba(104, 196, 232, 0.25);
}

.metric-label {
  font-size: clamp(13px, 2.55cqw, 42px);
  font-weight: 800;
  letter-spacing: 0;
}

.metric-value {
  margin-top: 1.45cqw !important;
  font-size: clamp(28px, 5.2cqw, 84px);
  font-weight: 500;
  letter-spacing: 0;
}

.metric-value--wind {
  font-size: clamp(22px, 3.9cqw, 62px);
}

.metric-value--wind span {
  font-size: 0.82em;
}

.metric-direction {
  margin-top: 1cqw !important;
  font-size: clamp(18px, 3.1cqw, 50px);
  font-weight: 500;
}

.metric-icon {
  position: relative;
  display: block;
  width: 5.7cqw;
  height: 7.1cqw;
  color: #16c9ff;
}

.metric-icon--humidity::before {
  content: "";
  position: absolute;
  left: 1.2cqw;
  top: 0.4cqw;
  width: 3.2cqw;
  height: 3.2cqw;
  border: 0.38cqw solid currentColor;
  border-radius: 58% 58% 58% 0;
  transform: rotate(-45deg);
}

.metric-icon--humidity::after {
  content: "";
  position: absolute;
  left: 2.25cqw;
  top: 4.7cqw;
  width: 1.1cqw;
  height: 0.36cqw;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
}

.metric-icon--wind {
  height: 6.4cqw;
}

.metric-icon--wind::before,
.metric-icon--wind::after {
  content: "";
  position: absolute;
  left: 0.2cqw;
  height: 0.36cqw;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 1.5cqw 0 currentColor,
    0 3cqw 0 currentColor;
}

.metric-icon--wind::before {
  top: 1.1cqw;
  width: 4.8cqw;
}

.metric-icon--wind::after {
  top: 0.1cqw;
  left: 2.7cqw;
  width: 1.3cqw;
  height: 1.3cqw;
  border: 0.34cqw solid currentColor;
  border-left-color: transparent;
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
}

.metric-icon--rain::before {
  content: "";
  position: absolute;
  left: 1.3cqw;
  top: 0.3cqw;
  width: 3.3cqw;
  height: 2.6cqw;
  border: 0.38cqw solid currentColor;
  border-bottom-color: transparent;
  border-radius: 999px 999px 0 0;
}

.metric-icon--rain::after {
  content: "";
  position: absolute;
  left: 2.8cqw;
  top: 3.5cqw;
  width: 0.42cqw;
  height: 2.4cqw;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0.9cqw 1.2cqw 0 -0.05cqw currentColor;
}

.weather-updated {
  position: absolute;
  z-index: 2;
  left: 6.2%;
  bottom: 2.9%;
  font-size: clamp(14px, 2.35cqw, 38px);
  font-weight: 500;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .weather-stage {
    gap: 22px;
  }

  .weather-metric {
    grid-template-columns: 7.8cqw 1fr;
    gap: 1.5cqw;
  }

  .weather-location {
    font-size: 4.1cqw;
  }

  .weather-temp {
    margin-top: 3.8cqw !important;
    font-size: 16.6cqw;
  }

  .weather-condition {
    margin-top: 1.5cqw !important;
    font-size: 5.3cqw;
  }

  .weather-condition--flood {
    font-size: 4.75cqw;
  }

  .weather-condition--landslide {
    font-size: 4.15cqw;
  }

  .landslide-layer {
    top: 2.8%;
    height: 46%;
  }

  .wind-layer {
    left: 34%;
    top: 2.5%;
    width: 43%;
    height: 47%;
  }

  .weather-feels {
    margin-top: 0.8cqw !important;
    font-size: 4.35cqw;
  }

  .weather-extremes {
    gap: 2.2cqw;
    font-size: 4.1cqw;
  }

  .weather-divider--top {
    top: 69.8%;
  }

  .weather-divider--bottom {
    top: 91.8%;
  }

  .weather-metrics {
    top: 73.8%;
  }

  .metric-label {
    font-size: 2.55cqw;
  }

  .metric-value {
    margin-top: 1.2cqw !important;
    font-size: 5cqw;
  }

  .metric-value--wind {
    font-size: 3.75cqw;
  }

  .metric-direction {
    margin-top: 0.55cqw !important;
    font-size: 2.65cqw;
  }

  .weather-updated {
    bottom: 2.8%;
    font-size: 2.25cqw;
  }
}









/* ============================================================
   TEMPLATE VERTICAL DE ALERTAS
   Inspirado no layout de referencia: cards altos, cores chapadas,
   objeto 3D na parte superior e titulo curto na faixa inferior.
   ============================================================ */
body {
  display: block;
  background: #f0f2f0;
}

.weather-stage {
  width: min(100%, 1240px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 34px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  place-items: stretch;
  align-content: center;
  gap: clamp(12px, 1.6vw, 22px);
}

.weather-card {
  width: 100%;
  aspect-ratio: 176 / 272;
  border-radius: clamp(14px, 1.5vw, 18px);
  background: #344776;
  box-shadow: 0 10px 24px rgba(31, 47, 77, 0.08);
  container-type: inline-size;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.weather-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(31, 47, 77, 0.14);
}

.weather-card--heat,
.weather-card--landslide {
  background: #2d7134;
}

.weather-card--cloud,
.weather-card--flood,
.weather-card--wind {
  background: #344776;
}

.weather-art,
.weather-generated-bg,
.weather-location,
.weather-temp,
.weather-feels,
.weather-extremes,
.weather-metrics,
.weather-divider,
.weather-updated {
  display: none;
}

.weather-info {
  position: absolute;
  z-index: 4;
  left: 8.5%;
  right: 7%;
  top: auto;
  bottom: 17.5%;
}

.weather-condition,
.template-title {
  margin: 0 !important;
  color: #69d8f2;
  font-size: clamp(14px, 9.2cqw, 21px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.weather-card--heat .weather-condition,
.weather-card--landslide .weather-condition {
  color: #9bee61;
}

.template-title {
  position: absolute;
  z-index: 4;
  left: 8.5%;
  right: 7%;
  bottom: 17.5%;
}

.cloud-layer {
  left: -5% !important;
  top: 7% !important;
  width: 110% !important;
  height: 44% !important;
}

.heat-layer {
  left: -5%;
  top: 6%;
  width: 110%;
  height: 44%;
}

.heat-layer {
  position: absolute;
  z-index: 2;
  left: -5%;
  top: 5%;
  width: 110%;
  height: 46%;
  pointer-events: auto;
}

.heat-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.flood-layer {
  left: -6%;
  top: 4%;
  width: 112%;
  height: 47%;
}

.landslide-layer {
  left: -8%;
  top: 4%;
  width: 116%;
  height: 47%;
}

.wind-layer {
  left: -3%;
  top: 3%;
  width: 106%;
  height: 49%;
}

.cloud-3d {
  width: 86%;
  height: 68%;
}

.rain-layer {
  overflow: hidden;
}

.heat-canvas,
.flood-canvas,
.landslide-canvas,
.wind-canvas {
  filter: drop-shadow(0 12px 13px rgba(8, 24, 31, 0.22));
}

@media (max-width: 980px) {
  .weather-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
  }
}

@media (max-width: 580px) {
  .weather-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
  }

  .weather-card {
    border-radius: 15px;
  }
}

@media (max-width: 330px) {
  .weather-stage {
    grid-template-columns: 1fr;
    max-width: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weather-card {
    transition: none;
  }

  .weather-card:hover {
    transform: none;
  }
}

/* VENTO SVG NA FRENTE DA ARVORE
   A opacidade e o deslocamento dos tracos sao controlados em js/wind.js. */
.wind-layer {
  isolation: isolate;
}

.wind-canvas {
  position: relative;
  z-index: 1;
}

.wind-svg-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 0 2px rgba(170, 244, 255, 0.3))
    drop-shadow(0 0 5px rgba(117, 220, 243, 0.12));
}

.wind-svg-layer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wind-svg-path {
  fill: none;
  stroke: #e1fbff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30 90;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

.wind-svg-path--2,
.wind-svg-path--4 {
  stroke: #8de7f5;
  stroke-width: 2.2;
}

.wind-svg-path--3 {
  stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
  .wind-svg-layer {
    opacity: 0.14 !important;
  }
}
/* ============================================================
   TEMPLATE CLARO DE RISCOS E PRECAUCAO
   Area 3D clara em cima e faixa de identificacao grafite embaixo.
   ============================================================ */
.weather-card,
.weather-card--cloud,
.weather-card--heat,
.weather-card--flood,
.weather-card--landslide,
.weather-card--wind {
  background: linear-gradient(180deg, #edf1ef 0%, #e2e7e4 76%, #e2e7e4 100%);
  border: 1px solid rgba(58, 63, 61, 0.06);
  box-shadow: 0 10px 25px rgba(54, 59, 57, 0.12);
}

.weather-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24.5%;
  background: #686b69;
  pointer-events: none;
}


.weather-info,
.template-title {
  left: 8.5%;
  right: 7%;
  bottom: 6.2%;
}

.weather-condition,
.template-title,
.weather-card--heat .weather-condition,
.weather-card--landslide .weather-condition {
  color: #ceff8d;
  font-size: clamp(14px, 9.2cqw, 21px);
  font-weight: 800;
  line-height: 1.08;
}

.cloud-3d,
.heat-canvas,
.flood-canvas,
.landslide-canvas,
.wind-canvas {
  filter: drop-shadow(0 5px 5px rgba(46, 52, 49, 0.16));
}

.wind-svg-path,
.wind-svg-path--2 {
  stroke: #9fc5c3;
}
.weather-card--cloud {
  background: linear-gradient(180deg, #dfe7e5 0%, #d4dfdc 76%, #d4dfdc 100%);
}

.cloud-3d {
  width: 96%;
  height: 74%;
  filter:
    brightness(0.94)
    contrast(1.16)
    saturate(0.88)
    drop-shadow(0 5px 5px rgba(48, 66, 69, 0.22));
}

.cloud-puff {
  box-shadow:
    inset -18px -18px 30px rgba(70, 99, 111, 0.3),
    inset 10px 10px 18px rgba(255, 255, 255, 0.38),
    0 6px 11px rgba(38, 55, 60, 0.2);
}

.cloud-shadow {
  opacity: 0.2;
  filter: blur(7px);
}


.cloud-layer:hover .cloud-3d,
.cloud-layer.is-lightning .cloud-3d,
.cloud-layer.is-auto-lightning .cloud-3d {
  filter:
    brightness(0.94)
    contrast(1.16)
    saturate(0.88)
    drop-shadow(0 5px 5px rgba(48, 66, 69, 0.22));
}
/* Margem de seguranca para a copa durante toda a animacao de ventania. */
.wind-layer {
  left: -10%;
  top: -2%;
  width: 120%;
  height: 58%;
}