/* UNDERCOVER FALLOUT - Digital Bunker Aesthetic */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

:root {
    --bunker-black: #0a0a0a;
    --bunker-dark: #1a1a1a;
    --bunker-gray: #2a2a2a;
    --metal-light: #4a4a4a;
    --metal-bright: #6a6a6a;
    --glow-green: #00ff41;
    --glow-amber: #ff9500;
    --glow-red: #ff0000;
    --text-primary: #e0e0e0;
    --text-dim: #909090;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Boot Sequence Loading Animation */
.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--glow-green);
    width: 0%;
    z-index: 10000;
    box-shadow: 0 0 10px var(--glow-green);
    animation: loadProgress 2.5s ease-in-out forwards;
}

@keyframes loadProgress {
    0% { width: 0%; }
    25% { width: 30%; }
    50% { width: 65%; }
    75% { width: 85%; }
    100% { width: 100%; }
}

.boot-sequence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--glow-green);
    font-size: 0.9rem;
    animation: fadeOut 1s ease-in-out 2.5s forwards;
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

.boot-text {
    font-size: 0.85rem;
    line-height: 1.8;
    opacity: 0;
    animation: bootTextAppear 0.5s ease-in forwards;
}

@keyframes bootTextAppear {
    to { opacity: 1; }
}

.boot-text:nth-child(1) { animation-delay: 0s; }
.boot-text:nth-child(2) { animation-delay: 0.3s; }
.boot-text:nth-child(3) { animation-delay: 0.6s; }
.boot-text:nth-child(4) { animation-delay: 0.9s; }
.boot-text:nth-child(5) { animation-delay: 1.2s; }
.boot-text:nth-child(6) { animation-delay: 1.5s; }
.boot-text:nth-child(7) {
    animation-delay: 1.8s;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 20px var(--glow-green);
}

body {
    font-family: 'Share Tech Mono', monospace;
    background:
        radial-gradient(ellipse 900px 400px at 50% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 500px 250px at 20% 60%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 400px 200px at 80% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 48px,
            rgba(255, 255, 255, 0.15) 48px,
            rgba(0, 0, 0, 1) 50px,
            rgba(0, 0, 0, 0.7) 52px,
            transparent 52px,
            transparent 100px
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 48px,
            rgba(255, 255, 255, 0.15) 48px,
            rgba(0, 0, 0, 1) 50px,
            rgba(0, 0, 0, 0.7) 52px,
            transparent 52px,
            transparent 100px
        ),
        radial-gradient(ellipse at 40% 50%, rgba(35, 35, 35, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 60% 70%, rgba(30, 30, 30, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #050505 50%, #0d0d0d 100%);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.5);
}

/* Glitch Overlay Effect */
.glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    opacity: 0.05;
    animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

/* Loading bar */
.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(135deg, #ff0033 0%, #ff0033 25%, #ffffff 50%, #0055ff 75%, #ff0033 100%);
    width: 0%;
    z-index: 10000;
    animation: loadProgress 2.5s ease-in-out forwards;
}

@keyframes loadProgress {
    0% { width: 0%; }
    25% { width: 30%; }
    50% { width: 65%; }
    75% { width: 85%; }
    100% { width: 100%; }
}

/* Boot sequence */
.boot-sequence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #f8f8f8;
    font-size: 0.9rem;
    animation: fadeOut 1s ease-in-out 2.5s forwards;
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

.boot-text {
    font-size: 0.85rem;
    line-height: 1.8;
    opacity: 0;
    animation: bootTextAppear 0.5s ease-in forwards;
}

@keyframes bootTextAppear {
    to { opacity: 1; }
}

.boot-text:nth-child(1) { animation-delay: 0s; }
.boot-text:nth-child(2) { animation-delay: 0.3s; }
.boot-text:nth-child(3) { animation-delay: 0.6s; }
.boot-text:nth-child(4) { animation-delay: 0.9s; }
.boot-text:nth-child(5) { animation-delay: 1.2s; }
.boot-text:nth-child(6) { animation-delay: 1.5s; }
.boot-text:nth-child(7) { animation-delay: 1.8s; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background:
        radial-gradient(ellipse 800px 300px at 50% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse 400px 200px at 30% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 300px 150px at 75% 60%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 48px,
            rgba(255, 255, 255, 0.15) 48px,
            rgba(0, 0, 0, 1) 50px,
            rgba(0, 0, 0, 0.7) 52px,
            transparent 52px,
            transparent 100px
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 48px,
            rgba(255, 255, 255, 0.15) 48px,
            rgba(0, 0, 0, 1) 50px,
            rgba(0, 0, 0, 0.7) 52px,
            transparent 52px,
            transparent 100px
        ),
        radial-gradient(ellipse at 30% 40%, rgba(40, 40, 40, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(35, 35, 35, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #050505 50%, #0d0d0d 100%);
    border-bottom: 2px solid var(--metal-light);
    padding: 20px 0 15px;
    text-align: center;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.06),
        inset 0 -1px 1px rgba(0, 0, 0, 0.8),
        inset 2px 2px 4px rgba(0, 0, 0, 0.6),
        inset -2px -2px 4px rgba(255, 255, 255, 0.02),
        0 4px 20px rgba(0, 0, 0, 0.7);
    position: relative;
}

.version-badge {
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-dim);
    padding: 5px 10px;
    border: 1px solid var(--metal-light);
    background-color: var(--bunker-dark);
}

.support-badge {
    position: absolute;
    top: 10px;
    right: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--glow-amber);
    padding: 5px 10px;
    border: 1px solid var(--glow-amber);
    background-color: var(--bunker-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}

.support-badge:hover {
    background-color: var(--glow-amber);
    color: var(--bunker-black);
    box-shadow: 0 0 15px rgba(255, 149, 0, 0.5);
}

header h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 6px;
    background: linear-gradient(135deg, #ff0033 0%, #ff0033 25%, #ffffff 50%, #0055ff 75%, #ff0033 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(1px 1px 0px #000)
            drop-shadow(2px 2px 0px #000)
            drop-shadow(3px 3px 0px #000)
            drop-shadow(4px 4px 0px #000)
            drop-shadow(5px 5px 0px #000)
            drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.8));
    margin-top: 15px;
    margin-bottom: 8px;
    position: relative;
}

/* Glitch Effect on Title - DISABLED FOR NOW */
.glitch {
    position: relative;
}

/* GLITCH HOVER EFFECT DISABLED
.glitch:hover::before,
.glitch:hover::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.glitch:hover::before {
    animation: glitch-1 0.3s infinite;
    background: linear-gradient(135deg, #0066ff 0%, #ffffff 50%, #cc0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: -1;
}

.glitch:hover::after {
    animation: glitch-2 0.3s infinite;
    background: linear-gradient(135deg, #cc0000 0%, #ffffff 50%, #0066ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: -2;
}

@keyframes glitch-1 {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-2px, -2px); }
}

@keyframes glitch-2 {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(2px, -2px); }
    50% { transform: translate(-2px, 2px); }
    75% { transform: translate(2px, 2px); }
}
*/

.tagline {
    font-size: 1rem;
    color: var(--text-dim);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.header-nav {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 15px;
}

.header-nav a {
    color: var(--text-dim);
    text-decoration: none;
    padding: 12px 25px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    border-right: 1px solid var(--metal-light);
    position: relative;
    text-shadow:
        1px 1px 0px #000,
        2px 2px 0px #000,
        3px 3px 0px #000,
        4px 4px 5px rgba(0, 0, 0, 0.5);
}

.header-nav a:first-child {
    border-left: 1px solid var(--metal-light);
}

.header-nav a:hover,
.header-nav a.active {
    background-color: var(--bunker-gray);
    color: var(--glow-green);
    text-shadow:
        1px 1px 0px #000,
        2px 2px 0px #000,
        3px 3px 0px #000,
        4px 4px 5px rgba(0, 0, 0, 0.5),
        0 0 15px var(--glow-green);
}

.header-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--glow-green);
    transition: width 0.3s ease;
}

.header-nav a:hover::after,
.header-nav a.active::after {
    width: 100%;
}

/* Navigation - OLD (HIDDEN) */
nav {
    display: none;
}

nav .container {
    display: flex;
    justify-content: center;
    gap: 0;
}

nav a {
    color: var(--text-dim);
    text-decoration: none;
    padding: 12px 25px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    border-right: 1px solid var(--metal-light);
    position: relative;
    text-shadow:
        1px 1px 0px #000,
        2px 2px 0px #000,
        3px 3px 0px #000,
        4px 4px 5px rgba(0, 0, 0, 0.5);
}

nav a:first-child {
    border-left: 1px solid var(--metal-light);
}

nav a:hover,
nav a.active {
    background-color: var(--bunker-gray);
    color: var(--glow-green);
    text-shadow:
        1px 1px 0px #000,
        2px 2px 0px #000,
        3px 3px 0px #000,
        4px 4px 5px rgba(0, 0, 0, 0.5),
        0 0 15px var(--glow-green);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--glow-green);
    transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}

/* Main Content */
main {
    padding: 30px 20px;
}

/* Hero Section */
.hero {
    text-align: center;
    margin-bottom: 40px;
    padding: 25px;
    background:
        radial-gradient(ellipse 700px 350px at 50% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 400px 200px at 70% 60%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 48px,
            rgba(255, 255, 255, 0.15) 48px,
            rgba(0, 0, 0, 1) 50px,
            rgba(0, 0, 0, 0.7) 52px,
            transparent 52px,
            transparent 100px
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 48px,
            rgba(255, 255, 255, 0.15) 48px,
            rgba(0, 0, 0, 1) 50px,
            rgba(0, 0, 0, 0.7) 52px,
            transparent 52px,
            transparent 100px
        ),
        radial-gradient(ellipse at 35% 45%, rgba(35, 35, 35, 0.25) 0%, transparent 60%),
        linear-gradient(135deg, #0f0f0f 0%, #070707 50%, #0f0f0f 100%);
    border: 1px solid var(--metal-light);
    border-radius: 4px;
    position: relative;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.04),
        inset 0 -1px 1px rgba(0, 0, 0, 0.7),
        inset 2px 2px 3px rgba(0, 0, 0, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.6);
}

.broadcast-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: var(--bunker-gray);
    color: var(--glow-red);
    padding: 6px 15px;
    border-radius: 15px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1px solid var(--glow-red);
}

.pulse {
    width: 7px;
    height: 7px;
    background-color: var(--glow-red);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--glow-red), 0 0 10px var(--glow-red);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 20px var(--glow-red), 0 0 30px var(--glow-red);
        opacity: 0.6;
    }
}

.hero h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    color: #f5f5f5;
    margin-bottom: 15px;
    display: inline-block;
    padding: 6px 20px;
    position: relative;
    z-index: 1;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.8),
        -1px -1px 2px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(0, 0, 0, 0.7);
}

.hero h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    bottom: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 3px,
            transparent 3px,
            transparent 8px
        ),
        radial-gradient(ellipse at 30% 40%, rgba(139, 90, 43, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(101, 67, 33, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, #8B5A2B 0%, #654321 30%, #5C4033 50%, #654321 70%, #8B5A2B 100%);
    z-index: -1;
    transform: skewX(-8deg);
    border: 2px solid #4a3728;
    box-shadow:
        inset 0 2px 4px rgba(139, 90, 43, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(101, 67, 33, 0.4);
}

.intro {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 15px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.intro strong {
    color: var(--glow-green);
    font-weight: 700;
}

/* Buttons */
.cta-buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.9rem;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background-color: transparent;
    color: var(--glow-green);
    border-color: var(--glow-green);
}

.btn-primary:hover {
    background-color: var(--glow-green);
    color: var(--bunker-black);
    box-shadow: 0 0 20px var(--glow-green);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--glow-amber);
    border-color: var(--glow-amber);
}

.btn-secondary:hover {
    background-color: var(--glow-amber);
    color: var(--bunker-black);
    box-shadow: 0 0 20px var(--glow-amber);
    transform: translateY(-2px);
}

.btn-listen {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--metal-light);
    padding: 10px 25px;
    font-size: 0.85rem;
}

.btn-listen:hover {
    background-color: var(--metal-light);
    border-color: var(--text-primary);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Sections */
section {
    margin-bottom: 60px;
}

section h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: var(--glow-green);
    margin-bottom: 30px;
    text-align: center;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}

.latest-episode h3 {
    font-size: 1.6rem;
    color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 255, 255, 0.2);
}

.latest-episode h3::before,
.latest-episode h3::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--glow-red);
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 10px var(--glow-red);
}

/* Episode Card */
.episode-card {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.01) 2px,
            rgba(255, 255, 255, 0.01) 3px
        ),
        radial-gradient(ellipse at 20% 30%, rgba(80, 50, 30, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(60, 40, 20, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #1a1410 0%, #2a1f18 50%, #1a1410 100%);
    border: 1px solid #654321;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    transition: all 0.3s ease;
    margin-top: 30px;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(139, 90, 43, 0.2);
    position: relative;
}

.episode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(139, 90, 43, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(101, 67, 33, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.episode-card > * {
    position: relative;
    z-index: 1;
}

.episode-card:hover {
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.9),
        0 6px 12px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(139, 90, 43, 0.3),
        0 0 20px rgba(139, 90, 43, 0.2);
    transform: translateY(-2px);
}

.episode-number {
    display: none;
    /* Hidden for new layout - audio player shown directly in episode-content */
}

.episode-number:hover {
    background-color: #f0ebe3;
    border-color: #654321;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(139, 90, 43, 0.4);
    transform: translateY(-1px);
}

.episode-number.playing {
    background-color: #e8e2d5;
    border-color: #654321;
}

.play-icon {
    font-size: 1.5rem;
    color: #8B5A2B;
    margin-bottom: 5px;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.episode-number.playing .play-icon {
    animation: none;
    color: #654321;
}

.episode-cover {
    width: 100%;
    height: 250px;
    overflow: hidden;
    flex-shrink: 0;
}

.episode-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.9) contrast(1.05);
}

.episode-content {
    padding: 30px;
    flex: 1;
}

.episode-content h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.episode-meta {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.episode-content p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--text-dim);
}

/* Audio Player */
.audio-player {
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #654321;
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.play-pause-btn {
    background-color: #8B5A2B;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-pause-btn:hover {
    background-color: #654321;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}

.play-pause-btn:active {
    transform: scale(0.95);
}

.progress-container {
    flex-grow: 1;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--glow-amber) 0%, #ff9500 100%);
    width: 0%;
    transition: width 0.1s ease;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255, 149, 0, 0.5);
}

.time-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-dim);
    min-width: 100px;
    text-align: right;
    flex-shrink: 0;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.info-card {
    background-color: var(--bunker-dark);
    border: 1px solid var(--metal-light);
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.info-card:hover {
    border-color: var(--glow-amber);
    box-shadow: 0 0 20px rgba(255, 149, 0, 0.2);
    transform: translateY(-5px);
}

.info-card h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    color: var(--glow-green);
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.info-card p {
    color: var(--text-dim);
    line-height: 1.7;
}

/* SPY-THEMED VISUAL EFFECTS */

/* 3D Parallax Depth Layers */
.parallax-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    top: 0;
    left: 0;
}

.parallax-layer-1 {
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 255, 65, 0.03) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255, 149, 0, 0.02) 0%, transparent 30%);
    animation: parallaxFloat1 20s ease-in-out infinite;
}

.parallax-layer-2 {
    background:
        radial-gradient(circle at 60% 40%, rgba(255, 0, 51, 0.02) 0%, transparent 25%),
        radial-gradient(circle at 30% 80%, rgba(0, 85, 255, 0.02) 0%, transparent 25%);
    animation: parallaxFloat2 25s ease-in-out infinite;
}

@keyframes parallaxFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
}

@keyframes parallaxFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 20px) scale(1.08); }
}

/* Radar Sweep Scanner */
.radar-scanner {
    position: fixed;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(0, 255, 65, 0.3);
    border-radius: 50%;
    top: 20px;
    right: 20px;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.5;
}

.radar-scanner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 255, 65, 0.8), transparent);
    transform-origin: bottom center;
    animation: radarSweep 4s linear infinite;
}

.radar-scanner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--glow-green);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--glow-green);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Static Interference Overlay */
.static-interference {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
    animation: staticPulse 8s ease-in-out infinite;
}

@keyframes staticPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.08; }
}

/* Holographic Card Borders */
.holographic-border {
    position: relative;
    overflow: hidden;
}

.holographic-border::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(0, 255, 65, 0.3) 45deg,
        rgba(255, 149, 0, 0.3) 90deg,
        rgba(255, 0, 51, 0.3) 135deg,
        rgba(0, 85, 255, 0.3) 180deg,
        rgba(0, 255, 65, 0.3) 225deg,
        rgba(255, 149, 0, 0.3) 270deg,
        rgba(255, 0, 51, 0.3) 315deg,
        transparent 360deg
    );
    animation: holoRotate 8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.holographic-border:hover::before {
    opacity: 0.6;
}

@keyframes holoRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Signal Wave Animation */
.signal-waves {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.3;
}

.signal-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(0, 255, 65, 0.1) 10px,
        rgba(0, 255, 65, 0.1) 11px
    );
    animation: signalWaveScroll 3s linear infinite;
}

.signal-wave:nth-child(2) {
    animation-duration: 4.5s;
    animation-direction: reverse;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 15px,
        rgba(255, 149, 0, 0.08) 15px,
        rgba(255, 149, 0, 0.08) 16px
    );
}

@keyframes signalWaveScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

/* Glitch Data Stream */
.data-stream {
    position: fixed;
    top: 0;
    right: 5%;
    width: 2px;
    height: 100%;
    pointer-events: none;
    z-index: 9996;
    opacity: 0.4;
}

.data-stream::before,
.data-stream::after {
    content: 'ENCRYPTED CLASSIFIED SIGNAL INTERCEPT SURVEILLANCE';
    position: absolute;
    width: 20px;
    font-size: 8px;
    color: var(--glow-green);
    word-break: break-all;
    line-height: 1.2;
    text-shadow: 0 0 5px var(--glow-green);
    animation: dataFall 10s linear infinite;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 2px;
}

.data-stream::after {
    animation-delay: 5s;
    color: var(--glow-amber);
    text-shadow: 0 0 5px var(--glow-amber);
    right: -15px;
}

@keyframes dataFall {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* Multiple data streams */
.data-stream-2 {
    right: 15%;
    animation-delay: 3s;
}

.data-stream-3 {
    right: 85%;
    animation-delay: 7s;
}

/* Particle Field Background */
@keyframes particleFloat {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 0.3;
    }
    80% {
        opacity: 0.3;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.5);
        opacity: 0;
    }
}

.particle {
    position: fixed;
    width: 3px;
    height: 3px;
    background: var(--glow-green);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 0 4px var(--glow-green);
    animation: particleFloat 15s ease-in-out infinite;
}

.particle:nth-child(odd) {
    background: var(--glow-amber);
    box-shadow: 0 0 4px var(--glow-amber);
    animation-duration: 12s;
}

/* Scanning Line Effect */
.scan-line {
    position: fixed;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 255, 65, 0.5),
        transparent
    );
    pointer-events: none;
    z-index: 9998;
    animation: scanLineMove 6s linear infinite;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.6);
}

@keyframes scanLineMove {
    0% { top: -10px; }
    100% { top: 110%; }
}

/* Typing Effect for Headers */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

.typing-effect {
    overflow: hidden;
    border-right: 3px solid var(--glow-green);
    white-space: nowrap;
    margin: 0 auto;
    animation:
        typing 3s steps(40, end),
        blink 0.75s step-end infinite;
    display: inline-block;
}

/* Hexagonal Grid Background */
.hex-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.03;
    background-image:
        linear-gradient(30deg, transparent 49%, var(--glow-green) 49%, var(--glow-green) 51%, transparent 51%),
        linear-gradient(90deg, transparent 49%, var(--glow-green) 49%, var(--glow-green) 51%, transparent 51%),
        linear-gradient(150deg, transparent 49%, var(--glow-green) 49%, var(--glow-green) 51%, transparent 51%);
    background-size: 60px 104px;
    animation: hexPulse 10s ease-in-out infinite;
}

@keyframes hexPulse {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.06; }
}

/* Encrypted Text Effect on Hover */
.encrypted-hover {
    transition: all 0.3s ease;
}

.encrypted-hover:hover {
    animation: textGlitch 0.3s ease-in-out;
}

@keyframes textGlitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); text-shadow: 2px -2px var(--glow-green); }
    40% { transform: translate(-2px, -2px); text-shadow: -2px 2px var(--glow-red); }
    60% { transform: translate(2px, 2px); text-shadow: 2px 2px var(--glow-amber); }
    80% { transform: translate(2px, -2px); text-shadow: -2px -2px var(--glow-green); }
}

/* Signal Strength Indicator */
.signal-indicator {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 4px;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.4;
}

.signal-bar {
    width: 4px;
    background: var(--glow-green);
    border-radius: 2px;
    animation: signalBounce 1.5s ease-in-out infinite;
}

.signal-bar:nth-child(1) { height: 10px; animation-delay: 0s; }
.signal-bar:nth-child(2) { height: 20px; animation-delay: 0.2s; }
.signal-bar:nth-child(3) { height: 30px; animation-delay: 0.4s; }
.signal-bar:nth-child(4) { height: 40px; animation-delay: 0.6s; }
.signal-bar:nth-child(5) { height: 50px; animation-delay: 0.8s; }

@keyframes signalBounce {
    0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* Decrypt Animation */
.decrypt-text {
    position: relative;
    display: inline-block;
}

.decrypt-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bunker-black);
    color: var(--glow-green);
    overflow: hidden;
    animation: decrypt 2s ease-in-out forwards;
    font-family: 'Share Tech Mono', monospace;
}

@keyframes decrypt {
    0% { width: 100%; }
    100% { width: 0%; }
}

/* Footer */
footer {
    background-color: var(--bunker-dark);
    border-top: 2px solid var(--metal-light);
    padding: 40px 0;
    text-align: center;
    margin-top: 80px;
    position: relative;
    z-index: 10;
}

footer p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.disclaimer {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--metal-light);
}

/* Declassified Alert Banner */
.declassified-alert {
    background: linear-gradient(135deg, #1a0000 0%, #330000 50%, #1a0000 100%);
    border: 2px solid var(--glow-red);
    border-radius: 5px;
    padding: 13px 19px;
    margin: 25px auto;
    max-width: 560px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow:
        0 0 15px rgba(255, 0, 0, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.declassified-alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.4), transparent);
    animation: scan 2.5s infinite;
}

@keyframes scan {
    0% { left: -100%; }
    100% { left: 100%; }
}

.alert-icon {
    font-size: 1.9rem;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

.alert-content {
    flex: 1;
}

.alert-content h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    color: #ff0000 !important;
    margin: 0 0 5px 0;
    letter-spacing: 1.5px;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.alert-content p {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.57rem;
    color: var(--text-dim);
    margin: 0;
    letter-spacing: 0.5px;
}

.alert-stamp {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: var(--glow-red);
    border: 2px solid var(--glow-red);
    padding: 5px 10px;
    border-radius: 3px;
    letter-spacing: 1.5px;
    font-weight: 700;
    transform: rotate(-5deg);
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
}

/* Transcript Button */
.transcript-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--bunker-black), var(--metal-dark));
    border: 2px solid var(--glow-green);
    color: var(--glow-green);
    text-decoration: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.transcript-btn:hover {
    background: var(--glow-green);
    color: var(--bunker-black);
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.6);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) and (min-width: 769px) {
    .episode-cover {
        width: 150px;
    }

    .episode-number {
        min-width: 120px;
        padding: 15px;
        font-size: 2rem;
    }

    .episode-card {
        gap: 20px;
        padding: 25px;
    }
}

@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
        letter-spacing: 4px;
    }

    .tagline {
        font-size: 0.8rem;
    }

    nav .container {
        flex-wrap: wrap;
    }

    nav a {
        flex: 1 1 45%;
        text-align: center;
        padding: 15px 10px;
        font-size: 0.8rem;
    }

    .hero h2 {
        font-size: 1.8rem;
    }

    .intro {
        font-size: 1rem;
    }

    .episode-card {
        flex-direction: column;
    }

    .episode-number {
        min-width: 100%;
    }

    .episode-cover {
        width: 100%;
        max-width: 300px;
        margin: 20px auto 0;
    }

    .episode-cover img {
        width: 100%;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        text-align: center;
    }
}