/* FlyMacroPilot — Visual Enhancement Layer v2.0
   Layered on top of cockpit.css — no breaking changes.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── GEAR ANIMATIONS (steampunk-live.css not loaded in cockpit.html) ──────── */
@keyframes sp-gear-spin         { from{transform:rotate(0deg)}   to{transform:rotate(360deg)}  }
@keyframes sp-gear-spin-reverse { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }

.sp-gear-spin {
    animation: sp-gear-spin 20s linear infinite;
    transform-box: fill-box;
    transform-origin: center center;
}
.sp-gear-spin-reverse {
    animation: sp-gear-spin-reverse 15s linear infinite;
    transform-box: fill-box;
    transform-origin: center center;
}

/* Gear layer positioning + golden glow */
#fx-gear-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}
.fx-gear {
    position: absolute;
    filter: drop-shadow(0 0 8px rgba(200,150,10,0.55))
            drop-shadow(0 0 20px rgba(200,140,0,0.20));
}
.fx-gear-bl { bottom: 0;  left: 0; }
.fx-gear-br { bottom: 0;  right: 0; }
.fx-gear-tr { top: 32px;  right: 6px; }

/* Steam vent slots */
.fx-vent {
    position: fixed; width: 8px; height: 60px;
    background: linear-gradient(180deg, rgba(80,60,20,0.85), rgba(40,30,10,0.95));
    border: 1px solid rgba(176,141,87,0.35);
    border-radius: 3px; top: 50%;
    pointer-events: none; z-index: 2;
}
.fx-vent-l { left: 4px;  transform: translateY(-50%); }
.fx-vent-r { right: 4px; transform: translateY(-50%); }

/* ── WINDSHIELD — glass shine sweep ────────────────────────────────────────── */
@keyframes glassShineSweep {
    0%   { transform: translateX(-130%) skewX(-22deg); opacity: 0; }
    8%   { opacity: 1; }
    38%  { transform: translateX( 130%) skewX(-22deg); opacity: 0; }
    100% { transform: translateX( 130%) skewX(-22deg); opacity: 0; }
}

/* Override the existing ::after (bottom vignette) to add shine on top */
.v4-windshield {
    box-shadow:
        0 0 0 2px rgba(176,141,87,0.18),
        0 0 0 3px rgba(60,35,8,0.8),
        0 0 0 5px rgba(176,141,87,0.08),
        0 0 24px rgba(176,141,87,0.07);
}

/* Inject glass shine as a child — wired in visual-enhanced.js */
.fx-glass-shine {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 45%;
    background: linear-gradient(
        108deg,
        transparent 15%,
        rgba(255,255,255,0.055) 42%,
        rgba(255,255,255,0.095) 50%,
        rgba(255,255,255,0.055) 58%,
        transparent 82%
    );
    animation: glassShineSweep 9s ease-in-out infinite;
    animation-delay: 1.5s;
    pointer-events: none;
    z-index: 6;
    border-radius: inherit;
}

/* ── SKY VIDEO — smooth opacity crossfade ──────────────────────────────────── */
.v4-windshield video {
    transition: opacity 1.4s ease;
}

/* ── STATUS BULBS — dramatic pulse ─────────────────────────────────────────── */
@keyframes bulbPulse-g {
    0%,100% { box-shadow: 0 0 10px #22c55e, 0 0 22px rgba(34,197,94,0.3); }
    50%     { box-shadow: 0 0 18px #22c55e, 0 0 38px rgba(34,197,94,0.65), 0 0 60px rgba(34,197,94,0.12); }
}
@keyframes bulbPulse-y {
    0%,100% { box-shadow: 0 0 10px #eab308, 0 0 24px rgba(234,179,8,0.35); }
    50%     { box-shadow: 0 0 20px #eab308, 0 0 42px rgba(234,179,8,0.7),  0 0 65px rgba(234,179,8,0.15); }
}
@keyframes bulbPulse-r {
    0%,100% { box-shadow: 0 0 12px #ef4444, 0 0 26px rgba(239,68,68,0.45); }
    50%     { box-shadow: 0 0 24px #ef4444, 0 0 50px rgba(239,68,68,0.75), 0 0 80px rgba(239,68,68,0.18); }
}

.v4-status-bulb.g { animation: bulbPulse-g 3.2s ease-in-out infinite; }
.v4-status-bulb.y { animation: bulbPulse-y 2.4s ease-in-out infinite; }
.v4-status-bulb.r { animation: bulbPulse-r 1.1s ease-in-out infinite; }
.v4-bulb.ok       { animation: bulbPulse-g 3.2s ease-in-out infinite; }
.v4-bulb.warn     { animation: bulbPulse-y 2.4s ease-in-out infinite; }
.v4-bulb.crit     { animation: bulbPulse-r 1.1s ease-in-out infinite; }

/* ── RATE BUTTONS — colored glow on hover/active ───────────────────────────── */
.v4-rb {
    transition: all .2s ease, box-shadow .2s ease;
}
.v4-rb.cut-50:hover, .v4-rb.cut-25:hover {
    background: rgba(139,37,0,0.28);
    border-color: #c0392b;
    color: #ff8060;
    box-shadow: 0 0 16px rgba(220,60,30,0.4), inset 0 0 8px rgba(220,60,30,0.1);
    transform: translateY(-1px);
}
.v4-rb.hike-25:hover, .v4-rb.hike-50:hover {
    background: rgba(26,92,48,0.28);
    border-color: #27ae60;
    color: #70e090;
    box-shadow: 0 0 16px rgba(40,174,96,0.4), inset 0 0 8px rgba(40,174,96,0.1);
    transform: translateY(-1px);
}
.v4-rb.hold:hover {
    background: rgba(176,141,87,0.28);
    box-shadow: 0 0 16px rgba(176,141,87,0.45), inset 0 0 8px rgba(176,141,87,0.12);
    transform: translateY(-1px);
}
.v4-rb:active {
    transform: scale(.95) translateY(1px) !important;
    box-shadow: none !important;
}

/* Committed-state residual glow */
.v4-rb.was-cut  { box-shadow: 0 0 14px rgba(220,60,30,0.3); }
.v4-rb.was-hike { box-shadow: 0 0 14px rgba(40,174,96,0.3); }
.v4-rb.was-hold { box-shadow: 0 0 14px rgba(176,141,87,0.3); }

/* ── GAUGE CARDS — brass glow ───────────────────────────────────────────────── */
.v4-gauge-card {
    transition: box-shadow .35s ease, border-color .35s ease;
}
.v4-gauge-card:hover {
    border-color: var(--brass);
    box-shadow: inset 0 0 12px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.45),
                0 0 14px rgba(176,141,87,0.18);
}
.v4-gauge-card.central {
    box-shadow: inset 0 0 16px rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.55),
                0 0 22px rgba(176,141,87,0.14);
    border-color: var(--brass);
}
.v4-gauge-card.central:hover {
    box-shadow: inset 0 0 16px rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.55),
                0 0 30px rgba(176,141,87,0.28);
}

/* ── QE SLIDER — richer brass thumb ────────────────────────────────────────── */
.v4-qe-thumb {
    background: linear-gradient(145deg, #e8c878 0%, #b08d57 45%, #7a5a34 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.65),
                0 0 8px rgba(176,141,87,0.35),
                inset 0 1px 0 rgba(255,255,255,0.25);
    transition: box-shadow .15s;
}
.v4-qe-thumb:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.65),
                0 0 16px rgba(176,141,87,0.55),
                inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ── AVATAR PORTRAIT — richer hover ────────────────────────────────────────── */
.v4-leader-head img {
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.v4-leader-head:hover img {
    border-color: var(--brass-bright);
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(176,141,87,0.55), 0 0 40px rgba(176,141,87,0.18);
}

/* ── STEAM PARTICLES — richer puffs ────────────────────────────────────────── */
.fx-steam-particle {
    position: absolute;
    width: 12px; height: 12px;
    background: radial-gradient(circle,
        rgba(230,225,210,0.92) 0%,
        rgba(190,185,165,0.45) 55%,
        transparent 100%
    );
    border-radius: 50%;
    pointer-events: none;
    animation: fxSteamV2 900ms ease-out forwards;
}
@keyframes fxSteamV2 {
    0%   { transform: translate(0,0) scale(0.4);  opacity: 0.95; }
    35%  { opacity: 0.75; }
    100% {
        transform: translate(var(--drift-x,0px), var(--drift-y,-65px)) scale(var(--scale-end,2.8));
        opacity: 0;
    }
}

/* ── RIPPLE — snappier, more satisfying ────────────────────────────────────── */
.fx-ripple {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transform: scale(0);
    animation: rippleExpand .55s ease-out forwards;
    pointer-events: none;
    margin-left: -3px; margin-top: -3px;
}
@keyframes rippleExpand { to { transform: scale(32); opacity: 0; } }

/* ── FLICKER OVERLAY ────────────────────────────────────────────────────────── */
.fx-flicker {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9999;
    opacity: 0; transition: opacity 0.04s;
}

/* ── PRESSURE RING ──────────────────────────────────────────────────────────── */
.fx-pressure-ring {
    position: fixed;
    width: 60px; height: 60px;
    border: 3px solid rgba(255,80,0,0.9);
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(0.2);
    animation: pressureRingV2 1s ease-out forwards;
    pointer-events: none; z-index: 9998;
    box-shadow: 0 0 12px rgba(255,80,0,0.5);
}
@keyframes pressureRingV2 {
    0%   { transform: translate(-50%,-50%) scale(0.2); opacity: 1;   }
    100% { transform: translate(-50%,-50%) scale(4);   opacity: 0;   }
}

/* ── CRISIS SEVERITY SCALING ────────────────────────────────────────────────── */
/* JS adds body.crisis-mild / .crisis-severe / .crisis-panic */
body.crisis-mild .v4-panel,
body.crisis-mild .v4-windshield {
    box-shadow: inset 0 0 0 2px rgba(234,179,8,0.18);
}
body.crisis-severe .v4-panel,
body.crisis-severe .v4-windshield {
    box-shadow: inset 0 0 0 2px rgba(239,68,68,0.25);
}
body.crisis-panic .v4-panel,
body.crisis-panic .v4-windshield {
    box-shadow: inset 0 0 0 3px rgba(239,68,68,0.5);
    animation: crisisBorderPanic 0.8s ease-in-out infinite;
}
@keyframes crisisBorderPanic {
    0%,100% { box-shadow: inset 0 0 0 3px rgba(239,68,68,0.5); }
    50%     { box-shadow: inset 0 0 0 3px rgba(239,68,68,1.0); }
}

/* ── PANEL BORDERS — subtle brass shimmer ──────────────────────────────────── */
@keyframes brassBorderShimmer {
    0%,100% { border-color: var(--bronze); }
    50%     { border-color: var(--brass);  }
}
.v4-left  { animation: brassBorderShimmer 6s ease-in-out infinite; }
.v4-right { animation: brassBorderShimmer 6s ease-in-out infinite 3s; }

/* ── FOOTER BUTTONS ─────────────────────────────────────────────────────────── */
.cockpit-footer button {
    transition: all .15s ease;
}
.cockpit-footer button:hover {
    box-shadow: 0 0 12px rgba(176,141,87,0.35);
}

/* ── EVENTS LIST — richer hover ─────────────────────────────────────────────── */
.v4-event-item:hover {
    background: rgba(176,141,87,0.12);
    color: var(--text-warm);
    padding-left: 8px;
    transition: padding-left .15s;
}

/* ── TICKER ITEMS — live color ──────────────────────────────────────────────── */
.ticker-item.up   { color: #50e890; }
.ticker-item.down { color: #ff6b5b; }

/* ── CHARACTER CONFLICT — portrait pulse + quote flash ──────────────────────── */
@keyframes ccPortraitPulse {
    0%   { box-shadow: 0 0 0 0 rgba(176,141,87,0); }
    40%  { box-shadow: 0 0 0 5px rgba(176,141,87,0.7); }
    100% { box-shadow: 0 0 0 0 rgba(176,141,87,0); }
}
@keyframes ccQuoteFlash {
    0%,100% { color: var(--text-muted); }
    30%     { color: var(--text-warm); }
}
.cc-portrait-pulse img {
    animation: ccPortraitPulse 0.7s ease-out forwards;
}
.cc-speaking {
    animation: ccQuoteFlash 0.6s ease-out forwards;
}

/* ── CONFLICT TOAST ─────────────────────────────────────────────────────────── */
.cc-toast {
    position: fixed;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    max-width: 380px;
    width: calc(100% - 32px);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(176,141,87,0.35);
    background: rgba(20,12,6,0.92);
    backdrop-filter: blur(8px);
    z-index: 8000;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.cc-toast.cc-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cc-toast.cc-prez    { border-color: rgba(200,80,60,0.45); }
.cc-toast.cc-advisor { border-color: rgba(60,150,200,0.45); }
.cc-toast-who {
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: bold;
}
.cc-toast.cc-prez    .cc-toast-who { color: #e87060; }
.cc-toast.cc-advisor .cc-toast-who { color: #60a8e0; }
.cc-toast-text {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-warm);
    font-style: italic;
}