/* SR-71 Blackbird Chase - Stylesheet v2 */

.sr71-chase-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 8px 60px rgba(0,0,20,0.7);
    font-size: 0;
    line-height: 0;
}

.sr71-sky-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.sr71-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── SR-71 Plane (smaller) ── */
.sr71-plane {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: center center;
    filter:
        drop-shadow(0 0 14px rgba(255,100,0,0.8))
        drop-shadow(0 0 5px rgba(255,200,50,0.6));
    will-change: transform, opacity;
    opacity: 0;
}

/* ── Sonic Boom Ring ── */
.sr71-sonic-boom {
    position: absolute;
    border-radius: 50%;
    border: 4px solid rgba(180,230,255,0.95);
    box-shadow:
        0 0 24px rgba(120,200,255,0.7),
        0 0 6px rgba(255,255,255,0.8),
        inset 0 0 20px rgba(120,200,255,0.25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    will-change: transform, opacity;
}

/* ── Monolith (larger) ── */
.sr71-monolith {
    position: absolute;
    left: 0;
    top: 0;
    width: 130px;
    height: 160px;
    transform-origin: center center;
    will-change: transform, opacity;
    opacity: 0;
    perspective: 800px;
}

.monolith-body {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(-15deg) rotateZ(-4deg);
}

.monolith-face {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.12);
}

.monolith-front {
    width: 130px;
    height: 160px;
    top: 0; left: 0;
    background: linear-gradient(160deg,
        #dde3ef 0%,
        #bec8d8 18%,
        #96a8be 45%,
        #738494 72%,
        #526070 100%);
    box-shadow:
        inset -6px 0 16px rgba(0,0,0,0.35),
        inset 0 -10px 24px rgba(0,0,0,0.25),
        inset 5px 5px 10px rgba(255,255,255,0.12);
}

/* Panel lines */
.monolith-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(0,0,0,0.07) 20px,
            rgba(0,0,0,0.07) 21px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 32px,
            rgba(0,0,0,0.05) 32px,
            rgba(0,0,0,0.05) 33px
        );
}

/* Yellow stripe marking */
.monolith-front::after {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px;
    height: 7px;
    background: linear-gradient(90deg, transparent, rgba(255,220,80,0.5), transparent);
    border-radius: 3px;
}

/* ── Outer glow halo ── */
.monolith-outer-glow {
    position: absolute;
    inset: -35px;
    border-radius: 10px;
    background: radial-gradient(ellipse at center,
        rgba(80,160,255,0.4) 0%,
        rgba(60,120,255,0.18) 40%,
        transparent 70%);
    animation: outerGlowPulse 0.65s ease-in-out infinite alternate;
    pointer-events: none;
}

/* ── Bottom glow ring ── */
.monolith-glow-ring {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 32px;
    background: radial-gradient(ellipse at center,
        rgba(160,220,255,0.9) 0%,
        rgba(90,160,255,0.55) 35%,
        rgba(40,100,255,0.2) 60%,
        transparent 80%);
    border-radius: 50%;
    filter: blur(6px);
    animation: glowPulse 0.55s ease-in-out infinite alternate;
}

/* ── Spotlight beam (triangle pointing down) ── */
.monolith-spotlight {
    position: absolute;
    bottom: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 65px solid transparent;
    border-right: 65px solid transparent;
    border-top: 220px solid rgba(140,210,255,0.15);
    filter: blur(9px);
    animation: spotlightFlash 0.35s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Spotlight inner bright core */
.monolith-spotlight::after {
    content: '';
    position: absolute;
    top: -220px;
    left: -25px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 220px solid rgba(200,240,255,0.22);
    filter: blur(4px);
}

/* Thruster grid on bottom */
.monolith-thruster-grid {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 18px;
    background:
        repeating-linear-gradient(
            90deg,
            #2a3848 0px,
            #2a3848 7px,
            #1a2030 7px,
            #1a2030 9px
        );
    border-radius: 2px;
    opacity: 0.9;
}

@keyframes glowPulse {
    from { opacity: 0.55; transform: translateX(-50%) scaleX(0.82); }
    to   { opacity: 1.0;  transform: translateX(-50%) scaleX(1.18); }
}

@keyframes outerGlowPulse {
    from { opacity: 0.55; transform: scale(0.93); }
    to   { opacity: 1.0;  transform: scale(1.07); }
}

@keyframes spotlightFlash {
    0%   { opacity: 0.45; border-top-color: rgba(120,200,255,0.10); }
    30%  { opacity: 1.0;  border-top-color: rgba(180,240,255,0.28); }
    55%  { opacity: 0.6;  border-top-color: rgba(100,180,255,0.08); }
    100% { opacity: 1.0;  border-top-color: rgba(210,245,255,0.32); }
}

/* ── Contrail ── */
.sr71-contrail {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,160,60,0.5) 15%,
        rgba(255,220,120,0.75) 50%,
        rgba(255,255,200,0.35) 80%,
        transparent 100%);
    border-radius: 50%;
    transform-origin: right center;
    opacity: 0;
    pointer-events: none;
    filter: blur(1px);
}

/* Mach contrail — bright white shock streaks */
.sr71-contrail.mach {
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(200,240,255,0.9) 15%,
        rgba(255,255,255,1.0) 50%,
        rgba(200,240,255,0.55) 80%,
        transparent 100%);
    filter: blur(0.4px);
}

/* ── Flying Saucer ── */
.sr71-saucer {
    position: absolute;
    filter:
        drop-shadow(0 0 8px rgba(160,220,255,0.9))
        drop-shadow(0 0 20px rgba(100,180,255,0.5));
    will-change: transform, opacity;
}

/* ── F-47 Squadron ── */
.sr71-f47 {
    position: absolute;
    filter:
        drop-shadow(0 0 6px rgba(120,180,255,0.7))
        drop-shadow(0 0 18px rgba(80,140,255,0.35));
    will-change: transform, opacity;
}

/* ── Mach flash screen overlay ── */
.sr71-mach-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 55% 45%,
        rgba(210,240,255,0.6) 0%,
        rgba(150,210,255,0.25) 35%,
        transparent 65%);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}