/* ==========================================================================
   Destination weather hover (assets/js/weather/)
   Canvas effect + comic-style speech bubble on the destination cards.
   Self-contained: delete this file with the feature.
   ========================================================================== */

/* the effect sits over the photo and under the card's dark gradient, so the text stays readable */
.wx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.dest.wx-on .wx-canvas { opacity: 1; }

/* ---------- speech bubble ---------- */

.wx-bubble {
  position: absolute;
  top: 22px;
  right: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 100px);
  padding: 10px 16px 12px 14px;
  border: 3px solid #000;
  border-radius: 20px;
  background: #fff;
  box-shadow: 5px 5px 0 #000;
  color: #000;
  line-height: 1.15;
  opacity: 0;
  transform: scale(0.2) rotate(-16deg);
  transform-origin: 18% 130%;
  transition: transform 0.18s ease-in, opacity 0.15s ease-in;
  pointer-events: none;
}
/* pops in with an overshoot, like a comic panel */
.dest.wx-on .wx-bubble {
  opacity: 1;
  transform: scale(1) rotate(-3deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1), opacity 0.12s ease-out;
}

/* tail: black outline triangle with a white one inside it */
.wx-bubble::before,
.wx-bubble::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
  border-bottom-width: 0;
  transform: skewX(24deg);
}
.wx-bubble::before {
  bottom: -20px;
  left: 24px;
  border-width: 20px 11px 0;
  border-top-color: #000;
}
.wx-bubble::after {
  bottom: -12px;
  left: 28px;
  border-width: 13px 7px 0;
  border-top-color: #fff;
}

/* halftone dots in the corner */
.wx-dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 46px;
  border-top-right-radius: 16px;
  background: radial-gradient(#ffc422 1.6px, transparent 2px) 0 0 / 7px 7px;
  -webkit-mask: radial-gradient(circle at 100% 0, #000 20%, transparent 72%);
  mask: radial-gradient(circle at 100% 0, #000 20%, transparent 72%);
}

.wx-time,
.wx-place,
.wx-now,
.wx-season { position: relative; }

.wx-time {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wx-colon { animation: wx-blink 1s steps(1) infinite; }
.wx-period { margin-left: 4px; font-size: 13px; letter-spacing: 0; text-transform: uppercase; }

.wx-place {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #e04a10;
}
.wx-now {
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.72);
}
.wx-season {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}
.wx-now:empty,
.wx-season:empty { display: none; }

@keyframes wx-blink {
  50% { opacity: 0.25; }
}