/**
 * FlyMacroPilot - Layered Cockpit System
 * v1.9.24 - Dynamic sky + animated gauge needles
 * 
 * Layer Structure:
 * 0: Sky background (changes based on economy - shows through transparent cockpit)
 * 1: Cockpit dashboard (cockpit-transparent-sky.png OR cockpit-empty-gauges.png)
 * 2: Gauge needles (CSS rotation, positioned over gauge faces)
 * 3: UI overlays
 * 
 * NEW IMAGES (v1.9.24):
 * - cockpit-transparent-sky.png: Cockpit with transparent sky area
 * - cockpit-empty-gauges.png: Cockpit with empty gauge faces (no needles)
 */

/* ==========================================
   COCKPIT LAYERS CONTAINER
   Holds all visual layers in proper z-order
   ========================================== */

.cockpit-layers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ==========================================
   SKY BACKGROUND LAYER
   Changes based on economic performance
   Shows through transparent cockpit area
   ========================================== */

.sky-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: all 2s ease;
}

/* Clear skies - Economy doing well */
.sky-clear {
    background: linear-gradient(180deg,
        #1a3a5c 0%,
        #2a5a8c 20%,
        #4a8abc 40%,
        #6abadc 60%,
        #8ad0ec 80%,
        #aae0fc 100%
    );
}

/* Golden hour - Soft landing / Victory */
.sky-golden {
    background: linear-gradient(180deg,
        #1a1a3c 0%,
        #3a2a5c 15%,
        #6a3a6c 30%,
        #aa4a5c 45%,
        #da6a4c 60%,
        #fa8a3c 75%,
        #faba5c 90%,
        #fade8c 100%
    );
}

/* Turbulence - Economy struggling */
.sky-turbulence {
    background: linear-gradient(180deg,
        #2a2a3a 0%,
        #3a3a4a 25%,
        #4a4a5a 50%,
        #5a5a6a 75%,
        #6a6a7a 100%
    );
}

/* Storm - Recession/Crisis */
.sky-storm {
    background: linear-gradient(180deg,
        #0a0a1a 0%,
        #1a1a2a 20%,
        #2a2a3a 40%,
        #1a1a2a 60%,
        #0a0a1a 80%,
        #050510 100%
    );
    animation: storm-flicker 4s ease-in-out infinite;
}

@keyframes storm-flicker {
    0%, 90%, 100% { filter: brightness(1); }
    92% { filter: brightness(1.8); }
    94% { filter: brightness(1); }
    96% { filter: brightness(1.5); }
}

/* Danger - Economy crashing */
.sky-danger {
    background: linear-gradient(180deg,
        #1a0a0a 0%,
        #3a1a1a 25%,
        #5a2a1a 50%,
        #7a3a1a 75%,
        #4a2010 100%
    );
    animation: danger-pulse 1s ease-in-out infinite;
}

@keyframes danger-pulse {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.2) saturate(1.3); }
}

/* Night - Depression / severe downturn */
.sky-night {
    background: linear-gradient(180deg,
        #050510 0%,
        #0a0a1a 25%,
        #101020 50%,
        #0a0a15 75%,
        #050508 100%
    );
}

/* v1.9.24: Crash sky - Critical economic failure */
.sky-crash {
    background: linear-gradient(180deg,
        #3a0000 0%,
        #5a0000 25%,
        #8B0000 50%,
        #5a0000 75%,
        #2a0000 100%
    );
    animation: crash-pulse 0.5s ease-in-out infinite;
}

@keyframes crash-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* v1.9.24: Victory sky - Soft landing achieved */
.sky-victory {
    background: linear-gradient(180deg,
        #1a3a5c 0%,
        #4a8abc 20%,
        #87CEEB 40%,
        #FFD700 70%,
        #FFA500 90%,
        #FF8C00 100%
    );
    animation: victory-glow 3s ease-in-out infinite;
}

@keyframes victory-glow {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.1) saturate(1.2); }
}

/* v1.9.24: Sunset sky - Warning state */
.sky-sunset {
    background: linear-gradient(180deg,
        #1a1a3c 0%,
        #3a2a5c 15%,
        #6a3a6c 30%,
        #FF6B35 50%,
        #F7931E 70%,
        #FFD700 90%,
        #FFA500 100%
    );
}

/* ==========================================
   COCKPIT DASHBOARD LAYER
   v1.9.24: Uses NEW transparent sky cockpit image
   Transparent sky area shows dynamic background
   ========================================== */

.cockpit-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* v1.9.24: NEW IMAGE - cockpit with transparent sky area */
    background-image: url('../images/cockpit-transparent-sky.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Alternative: empty gauges cockpit for animated needles */
.cockpit-layer.empty-gauges {
    /* v1.9.24: NEW IMAGE - cockpit with empty gauge faces */
    background-image: url('../images/cockpit-empty-gauges.png');
}

/* Fallback if new images don't load - use original */
.cockpit-layer.fallback {
    background-image: url('../images/cockpit-transparent.png');
}

/* ==========================================
   GAUGE NEEDLE SYSTEM
   v1.9.24: CSS-based rotating needles with smooth 60fps animation
   ========================================== */

.gauge-needles-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Individual needle container - position these over gauge faces */
.needle-container {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The actual needle - v1.9.24: Enhanced smooth animation */
.gauge-needle {
    position: absolute;
    width: 4px;
    height: 45px;
    background: linear-gradient(180deg,
        #ff3333 0%,
        #ff6666 30%,
        #cc0000 100%
    );
    border-radius: 2px 2px 0 0;
    transform-origin: bottom center;
    transform: rotate(-90deg); /* Start at minimum */
    /* v1.9.24: Smooth elastic easing for realistic needle movement */
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
        0 0 5px rgba(255, 0, 0, 0.5),
        0 0 10px rgba(255, 0, 0, 0.3);
    /* v1.9.24: GPU acceleration for 60fps */
    will-change: transform;
    backface-visibility: hidden;
}

/* Needle center cap */
.needle-cap {
    position: absolute;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle,
        #666 0%,
        #444 50%,
        #222 100%
    );
    border-radius: 50%;
    border: 2px solid #888;
    box-shadow: 
        inset 0 2px 4px rgba(255,255,255,0.3),
        0 2px 4px rgba(0,0,0,0.5);
    z-index: 1;
}

/* Needle glow effect when in danger zone */
.gauge-needle.danger {
    background: linear-gradient(180deg,
        #ff0000 0%,
        #ff3333 30%,
        #aa0000 100%
    );
    box-shadow: 
        0 0 10px rgba(255, 0, 0, 0.8),
        0 0 20px rgba(255, 0, 0, 0.5),
        0 0 30px rgba(255, 0, 0, 0.3);
    animation: needle-danger-pulse 0.5s ease-in-out infinite;
}

@keyframes needle-danger-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* Needle in good zone */
.gauge-needle.good {
    background: linear-gradient(180deg,
        #00ff88 0%,
        #00cc66 30%,
        #009944 100%
    );
    box-shadow: 
        0 0 5px rgba(0, 255, 136, 0.5),
        0 0 10px rgba(0, 255, 136, 0.3);
}

/* Needle in warning zone */
.gauge-needle.warning {
    background: linear-gradient(180deg,
        #ffaa00 0%,
        #ff8800 30%,
        #cc6600 100%
    );
    box-shadow: 
        0 0 5px rgba(255, 170, 0, 0.5),
        0 0 10px rgba(255, 170, 0, 0.3);
}

/* ==========================================
   POSITIONED NEEDLES FOR COCKPIT
   v1.9.24: Positions calibrated for cockpit-empty-gauges.png
   Adjust these values if gauge positions change in the image
   ========================================== */

/* GDP Gauge - Left gauge */
#needle-gdp,
.needle-gdp {
    /* Position the needle's pivot point at gauge center */
    top: calc(42% - 45px); /* Offset by needle height so pivot is at gauge center */
    left: calc(22% - 2px); /* Offset by half needle width */
    /* Rotation is handled by JS - don't override with translate! */
}

/* Inflation Gauge - Center gauge */
#needle-inflation,
.needle-inflation {
    top: calc(42% - 45px);
    left: calc(50% - 2px);
}

/* Unemployment Gauge - Right gauge */
#needle-unemployment,
.needle-unemployment {
    top: calc(42% - 45px);
    left: calc(78% - 2px);
}

/* ==========================================
   GAUGE VALUE DISPLAYS
   v1.9.24: Digital readouts below needles
   ========================================== */

.gauge-digital {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #00ff88;
    border-radius: 4px;
    padding: 4px 12px;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    min-width: 60px;
    text-align: center;
    /* v1.9.24: Smooth color transitions */
    transition: color 0.5s ease, border-color 0.5s ease, text-shadow 0.5s ease;
}

.gauge-digital.danger {
    color: #ff4444;
    border-color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

.gauge-digital.warning {
    color: #ffaa00;
    border-color: #ffaa00;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

.gauge-digital.good {
    color: #00ff88;
    border-color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* Digital display positions - v1.9.24: Calibrated for new cockpit image */
#digital-gdp {
    top: 55%;
    left: 22%;
    transform: translateX(-50%);
}

#digital-inflation {
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
}

#digital-unemployment {
    top: 55%;
    left: 78%;
    transform: translateX(-50%);
}

/* Gauge labels */
.gauge-label-overlay {
    position: absolute;
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

#label-gdp {
    top: 52%;
    left: 25%;
    transform: translateX(-50%);
}

#label-inflation {
    top: 52%;
    left: 50%;
    transform: translateX(-50%);
}

#label-unemployment {
    top: 52%;
    left: 75%;
    transform: translateX(-50%);
}

/* ==========================================
   SMOOTH ANIMATIONS
   ========================================== */

/* Needle bounce on update */
@keyframes needle-bounce {
    0% { transform: rotate(var(--target-rotation)) scale(1); }
    50% { transform: rotate(calc(var(--target-rotation) + 5deg)) scale(1.05); }
    100% { transform: rotate(var(--target-rotation)) scale(1); }
}

.gauge-needle.updating {
    animation: needle-bounce 0.3s ease-out;
}

/* Smooth value transition */
.gauge-digital {
    transition: color 0.5s ease, border-color 0.5s ease, text-shadow 0.5s ease;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 1200px) {
    .needle-container {
        width: 80px;
        height: 80px;
    }
    
    .gauge-needle {
        height: 35px;
        width: 3px;
    }
    
    .needle-cap {
        width: 12px;
        height: 12px;
    }
    
    .gauge-digital {
        font-size: 1rem;
        padding: 3px 8px;
    }
}

@media (max-width: 900px) {
    .needle-container {
        width: 60px;
        height: 60px;
    }
    
    .gauge-needle {
        height: 28px;
        width: 3px;
    }
    
    .needle-cap {
        width: 10px;
        height: 10px;
    }
    
    .gauge-digital {
        font-size: 0.85rem;
    }
}

@media (max-width: 600px) {
    .gauge-needles-layer,
    .cockpit-layer {
        display: none; /* Fall back to simpler display on mobile */
    }
}

/* ==========================================
   CITY SKYLINE LAYER
   DC-inspired silhouette between sky and cockpit
   ========================================== */

/* v2.2.0: DC Skyline HIDDEN - replaced with pure weather/sky view
   Removed per Andrew's request - avoids any "flying into DC" associations */
.city-layer {
    display: none !important;
    /* Original positioning preserved for future use if needed:
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    */
}

.city-layer svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* City tint shifts with economic sky state */
.sky-golden   ~ * .city-layer svg,
.sky-golden + .city-layer svg { filter: sepia(0.3) brightness(1.1); }
.sky-storm    + .city-layer svg { filter: brightness(0.6); }
.sky-danger   + .city-layer svg { filter: brightness(0.5) saturate(1.4) hue-rotate(-10deg); }
.sky-night    + .city-layer svg { filter: brightness(0.4); }

/* ==========================================
   NEEDLE IDLE ANIMATION
   Subtle continuous life - needles breathe
   ========================================== */

@keyframes needle-idle-breathe {
    0%   { filter: brightness(1);     }
    40%  { filter: brightness(1.15);  }
    100% { filter: brightness(1);     }
}

.gauge-needle.good    { animation: needle-danger-pulse 4s ease-in-out infinite; }
.gauge-needle.warning { animation: needle-danger-pulse 2.5s ease-in-out infinite; }
/* danger already has its own fast pulse */

@keyframes needle-idle {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.92; }
}

/* ==========================================
   QUARTER BRIEF — inline left-side panel
   No pop-up; appears lower-left during quarter advance
   ========================================== */

#quarter-brief {
    position: fixed;
    left: 18px;
    top: 58%;
    width: 200px;
    background: rgba(8, 14, 28, 0.92);
    border: 1px solid rgba(0, 200, 120, 0.3);
    border-left: 3px solid #00c878;
    border-radius: 8px;
    padding: 10px 14px;
    z-index: 200;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 16px rgba(0,200,120,0.08);
    opacity: 0;
    transform: translateX(-30px);
    pointer-events: none;
    font-size: 0.78rem;
    transition: none;
}

#quarter-brief.qb-show {
    animation: qbSlideIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

#quarter-brief.qb-hide {
    animation: qbFadeOut 0.6s ease-out forwards;
}

@keyframes qbSlideIn {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes qbFadeOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-18px); }
}

.qb-header {
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00c878;
    margin-bottom: 8px;
    font-weight: bold;
}

.qb-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qb-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.75);
    font-family: monospace;
    font-size: 0.78rem;
}

.qb-good { color: #00ff88; font-weight: bold; }
.qb-warn { color: #ffaa00; font-weight: bold; }
.qb-bad  { color: #ff4444; font-weight: bold; }

/* ==========================================
   LEADER / ADVISOR PORTRAIT IMAGES
   Real character portraits replace emoji avatars
   ========================================== */

.leader-portrait {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid rgba(0, 255, 136, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
    vertical-align: middle;
    display: inline-block;
}

.leader-message.angry    .leader-portrait { border-color: rgba(255, 68, 68, 0.8); box-shadow: 0 0 12px rgba(255,68,68,0.4); }
.leader-message.panicked .leader-portrait { border-color: rgba(255, 68, 68, 0.9); box-shadow: 0 0 16px rgba(255,68,68,0.5); animation: portrait-pulse 0.6s ease-in-out infinite; }
.leader-message.happy    .leader-portrait { border-color: rgba(0, 255, 136, 0.9); box-shadow: 0 0 14px rgba(0,255,136,0.5); }

@keyframes portrait-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255,68,68,0.4); }
    50%       { box-shadow: 0 0 22px rgba(255,68,68,0.8); }
}

/* ==========================================
   CRISIS PHOTO OVERLAY
   Real crisis photo fades in during danger/crash states
   ========================================== */

.crisis-photo-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('../images/crisis-thechair.jpg') center/cover no-repeat;
    z-index: 0;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
    filter: saturate(1.4) brightness(0.5);
}

.sky-danger .crisis-photo-overlay,
.sky-crash  .crisis-photo-overlay {
    opacity: 0.55;
}

/* ==========================================
   INDEX / LANDING HERO IMAGE
   ========================================== */

.thechair-hero-img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    display: block;
    margin: 0 auto 24px;
}

.scenario-portrait {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid rgba(0,255,136,0.4);
    float: left;
    margin: 0 10px 4px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}