/* ================= Wind banner (video + weather) ================= */
.il-wind {
    position: relative;
    overflow: hidden;
    border-radius: var(--il-radius);
    border: 1px solid var(--il-border);
    box-shadow: var(--il-shadow);
    margin-bottom: 16px;
    min-height: 240px;
    background: #0B1410;
}

/* ---------- Video ---------- */
.il-wind-media {
    position: absolute;
    inset: 0;
    transition: filter 1s ease;
}

.il-wind-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
}

/* clips were shot with the flag blowing LEFT; mirror for east-bound wind */
.il-wind[data-blow="right"] .il-wind-media { transform: scaleX(-1); }
.il-wind[data-blow="right"] .il-wind-video { object-position: 38% 50%; }

/* condition grading */
.il-wind[data-cond="cloudy"] .il-wind-media { filter: saturate(0.7) brightness(0.85); }
.il-wind[data-cond="fog"]    .il-wind-media { filter: saturate(0.5) brightness(0.9) blur(0.6px); }
.il-wind[data-cond="rain"]   .il-wind-media { filter: saturate(0.6) brightness(0.7) contrast(1.05); }
.il-wind[data-cond="snow"]   .il-wind-media { filter: saturate(0.4) brightness(1.05); }
.il-wind[data-cond="storm"]  .il-wind-media { filter: saturate(0.5) brightness(0.5) contrast(1.15); }

/* ---------- Readability fade ---------- */
.il-wind-tint {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.38) 40%, rgba(10,10,10,0) 70%),
        linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.35) 100%);
}

/* ---------- Weather layers ---------- */
.il-wx {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.il-wx-fog {
    background:
        radial-gradient(60% 50% at 30% 60%, rgba(200,205,210,0.55), transparent 70%),
        radial-gradient(70% 50% at 80% 40%, rgba(200,205,210,0.45), transparent 70%);
    animation: il-fog 18s ease-in-out infinite alternate;
}
.il-wind[data-cond="fog"] .il-wx-fog { opacity: 1; }
@keyframes il-fog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

.il-wx-rain {
    background-image: repeating-linear-gradient(
        var(--il-rain-angle, 80deg),
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) 14px,
        rgba(255,255,255,0.28) 15px,
        rgba(255,255,255,0) 17px
    );
    background-size: 220px 220px;
    animation: il-rain var(--il-rain-period, 0.6s) linear infinite;
}
.il-wind[data-cond="rain"]  .il-wx-rain { opacity: 0.7; }
.il-wind[data-cond="storm"] .il-wx-rain { opacity: 0.9; }
@keyframes il-rain { from { background-position: 0 0; } to { background-position: -60px 220px; } }

.il-wx-snow {
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
        radial-gradient(2px 2px at 80px 90px, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 140px 50px, #fff 50%, transparent 51%),
        radial-gradient(2.5px 2.5px at 170px 130px, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 50px 160px, #fff 50%, transparent 51%);
    background-size: 200px 200px;
    animation: il-snow 9s linear infinite;
}
.il-wind[data-cond="snow"] .il-wx-snow { opacity: 0.85; }
@keyframes il-snow { from { background-position: 0 0; } to { background-position: 40px 200px; } }

.il-wx-flash { background: #fff; mix-blend-mode: screen; }
.il-wind[data-cond="storm"] .il-wx-flash { animation: il-flash 11s linear infinite; }
@keyframes il-flash {
    0%, 100% { opacity: 0; }
    38%      { opacity: 0; }
    38.6%    { opacity: 0.55; }
    39%      { opacity: 0; }
    39.4%    { opacity: 0.35; }
    40%      { opacity: 0; }
    77%      { opacity: 0; }
    77.4%    { opacity: 0.45; }
    78%      { opacity: 0; }
}

/* ---------- Readout ---------- */
.il-wind-info {
    position: relative;
    z-index: 4;
    padding: 20px 22px 20px;
    max-width: 58%;
}

.il-wind-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--il-gold);
    margin-bottom: 2px;
}

.il-wind-speed {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 56px;
    line-height: 1;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.il-wind-speed small {
    font-size: 20px;
    color: var(--il-gold);
    margin-left: 5px;
    letter-spacing: 1px;
}

.il-wind-line {
    font-size: 15px;
    color: #fff;
    margin-top: 4px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.il-wind-muted { color: rgba(255,255,255,0.78); font-size: 13px; }
.il-wind-muted span + span:not(:empty)::before { content: " · "; }

/* ---------- Compass ---------- */
.il-compass { position: absolute; top: 14px; right: 14px; z-index: 4; }
.il-compass-arrow {
    transform-origin: 20px 20px;
    transition: transform 1.2s cubic-bezier(.4,0,.2,1);
}

/* ---------- Small screens ---------- */
@media (max-width: 420px) {
    .il-wind { min-height: 210px; }
    .il-wind-info { max-width: 66%; padding: 16px 18px; }
    .il-wind-speed { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .il-wx-fog, .il-wx-rain, .il-wx-snow, .il-wx-flash { animation: none !important; }
}