/* =========================================================
   weather-cards.css v6 — Weather Card Styling + Animations
   Weather Compass · weathercompass.ca
   ========================================================= */

/* ── CLOUDY ── */
.weather-cloudy .glass.card {
  position: relative;
  overflow: visible !important;
  margin-top: 28px !important;
  border-radius: 16px !important;
  border-color: rgba(180, 195, 220, 0.12) !important;
  box-shadow: 0 4px 18px rgba(120, 140, 170, 0.08);
}
.weather-cloudy .glass.card > * { position: relative; z-index: 2; }

/* ── PARTLY ── */
.weather-partly .glass.card {
  position: relative;
  overflow: visible !important;
  margin-top: 22px !important;
  border-radius: 16px !important;
  border-color: rgba(200, 210, 225, 0.10) !important;
}
.weather-partly .glass.card > * { position: relative; z-index: 2; }

/* ── SUNNY ── */
.weather-sunny .glass.card {
  border-radius: 24px !important;
  border: 1px solid rgba(255, 183, 77, 0.16) !important;
  box-shadow:
    0 2px 20px rgba(255, 183, 77, 0.10),
    0 0 40px rgba(255, 183, 77, 0.04),
    inset 0 1px 0 rgba(255, 200, 100, 0.07);
}

/* ── RAINY ── */
.weather-rainy .glass.card {
  border-radius: 16px 16px 22px 22px !important;
  border: 1px solid rgba(96, 165, 250, 0.10) !important;
  box-shadow:
    0 6px 22px rgba(96, 165, 250, 0.07),
    0 10px 35px rgba(30, 60, 120, 0.04);
  position: relative;
  overflow: visible !important;
}
.weather-rainy .glass.card > * { position: relative; z-index: 2; }

/* ── SNOWY ── */
.weather-snowy .glass.card {
  border-radius: 20px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    0 3px 16px rgba(255, 255, 255, 0.05),
    0 0 25px rgba(200, 220, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  position: relative;
  overflow: visible !important;
}
.weather-snowy .glass.card > * { position: relative; z-index: 2; }

/* ── STORMY ── */
.weather-stormy .glass.card {
  position: relative;
  overflow: visible !important;
  margin-top: 28px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(130, 90, 220, 0.10) !important;
  box-shadow:
    0 4px 22px rgba(80, 40, 160, 0.07),
    0 0 35px rgba(130, 90, 220, 0.03);
}
.weather-stormy .glass.card > * { position: relative; z-index: 2; }

/* ── FOGGY ── */
.weather-foggy .glass.card {
  border-radius: 20px !important;
  border: 1px solid rgba(180, 190, 200, 0.08) !important;
  box-shadow:
    0 0 25px rgba(180, 190, 200, 0.06),
    0 0 50px rgba(150, 160, 180, 0.03);
  -webkit-backdrop-filter: blur(24px) saturate(80%) !important;
  backdrop-filter: blur(24px) saturate(80%) !important;
}

/* ── FREEZING ── */
.weather-freezing .glass.card {
  border-radius: 16px !important;
  border: 1px solid rgba(180, 220, 255, 0.15) !important;
  box-shadow:
    0 4px 20px rgba(150, 200, 240, 0.08),
    inset 0 1px 0 rgba(200, 230, 255, 0.08);
  position: relative;
  overflow: visible !important;
}
.weather-freezing .glass.card > * { position: relative; z-index: 2; }

/* ── Smooth transitions ── */
.glass.card {
  transition: border-radius 0.8s ease, box-shadow 0.8s ease, margin-top 0.8s ease, border-color 0.8s ease;
}

/* ══════════════════════════════════════
   KEYFRAME ANIMATIONS for weather-card-fx.js
   ══════════════════════════════════════ */

/* Cloud drift left to right */
@keyframes wcfx-drift-ltr {
  0%   { left: -25%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Cloud drift right to left */
@keyframes wcfx-drift-rtl {
  0%   { left: 110%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: -25%; opacity: 0; }
}

/* Rain drip from card bottom */
@keyframes wcfx-drip {
  0%   { height: 0; opacity: 0; transform: translateY(0); }
  15%  { height: 12px; opacity: 0.7; transform: translateY(0); }
  60%  { height: 14px; opacity: 0.5; transform: translateY(6px); }
  85%  { height: 8px; opacity: 0.3; transform: translateY(14px); }
  100% { height: 3px; opacity: 0; transform: translateY(22px); }
}

/* Icicle grows down */
@keyframes wcfx-grow {
  0%   { height: 0; opacity: 0.3; }
  30%  { opacity: 0.6; }
  100% { height: var(--wcfx-max, 20px); opacity: 0.5; }
}

/* Snowflake drifts down with sway */
@keyframes wcfx-snow {
  0%   { top: -10px; opacity: 0; transform: translateX(0); }
  15%  { opacity: 0.6; }
  50%  { transform: translateX(var(--wcfx-sway, 15px)); }
  85%  { opacity: 0.3; }
  100% { top: calc(100% + 10px); opacity: 0; transform: translateX(0); }
}

/* Snow cap buildup */
@keyframes wcfx-snowcap {
  0%   { height: 0; opacity: 0; }
  20%  { opacity: 0.8; }
  100% { height: var(--wcfx-cap, 8px); opacity: 1; }
}

/* ── Skip topbar ── */
.topbar.glass,
.topbar.glass.card {
  overflow: hidden !important;
  margin-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  border-top: none !important;
}