/* Initium Site Styles */
:root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --accent-color: #ffffff;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --font-display: 'Outfit', sans-serif;
}

a,
button,
.chapter-item,
.enter-prompt {
    cursor: url('assets/cursor.svg') 16 16, pointer;
    /* Keep same sleek cursor on hover */
}

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

/* Asset Protection */
img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* Prevent interacting with purely decorative images */
}

body,
html {
    cursor: url('assets/cursor.svg') 16 16, auto;
    /* Custom Viewfinder Cursor */
    height: 100%;
    width: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    overflow: hidden;
    /* Prevent scrolling on splash initially */
}

/* 01. Intro (Home) */
.splash-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* Background image moved to inner layers */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Hero Slideshow Layers */
.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Hero Background Layer */
.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    /* Default Hidden. JS handles randomization. */
    transition: opacity 1.5s ease-in-out;
    /* Smooth Crossfade */
    z-index: 1;
}

.hero-bg-layer.active {
    opacity: 1 !important;
    z-index: 2;
}

.splash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Slight overlay for text readability */
    z-index: 1;
}

.splash-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    animation: fadeIn 2s ease-out forwards;
}

/* Typography */
.splash-title {
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0;
    margin-right: -0.2em;
    /* Center alignment offset */
    position: relative;
    /* No Glitch */
}

/* Subtitle */
.splash-subtitle {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 1rem;
    letter-spacing: 0.5em;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    cursor: default;
}

/* Enter Prompt - Premium Glass/Cinematic */
.enter-prompt {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: #fff;
    margin-top: 5rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 1rem 3rem;
    position: relative;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    overflow: hidden;
}

/* Hover - Fill & Expand */
.enter-prompt:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    letter-spacing: 0.4em;
    /* Classy expansion */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Subtle shine line */
.enter-prompt::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.enter-prompt:hover::before {
    left: 100%;
    /* Reflection sweep */
}

/* Mechanical Shutter Curtains */
.shutter-curtain {
    position: fixed;
    left: 0;
    width: 100%;
    height: 50vh;
    background: #000;
    z-index: 10000;
    transition: transform 0.1s cubic-bezier(0.8, 0, 0.2, 1);
    /* Fast Slam */
    pointer-events: none;
}

.shutter-curtain.top {
    top: 0;
    transform: translateY(-100%);
}

.shutter-curtain.bottom {
    bottom: 0;
    transform: translateY(100%);
}

/* Shutter CLOSED state */
.shutter-closed .shutter-curtain.top {
    transform: translateY(0);
}

.shutter-closed .shutter-curtain.bottom {
    transform: translateY(0);
}

/* Autofocus Blur */
.blur-hunting {
    animation: focus-hunt 0.4s infinite alternate;
}

@keyframes focus-hunt {
    0% {
        filter: blur(0px);
    }

    100% {
        filter: blur(2px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 02. Projects Overview */
.projects-container {
    display: none;
    width: 100vw;
    height: 100vh;
    background: #000;
    position: relative;
    overflow: hidden;
    overflow: hidden;
    opacity: 0;
    /* transition handled in JS for specific sequences */
}

/* Background Video */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    /* User requested 50% opacity */
    z-index: 0;
    pointer-events: none;
}

/* Dynamic Backgrounds */
.project-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, background-position 0.2s ease-out;
    /* Smooth follow */
    z-index: 1;
    /* Overlay on video */
    background-size: 150% 150% !important;
    mix-blend-mode: hard-light;
    /* Improve color blending over video */
}

/* Light Streaks Overlay */
.light-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: overlay;
    opacity: 1;
    /* 1. Spotlight following mouse */
    background: radial-gradient(circle at calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%),
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.2) 20%,
            transparent 60%);
    transition: background 0.05s ease-out;
}

/* 2. Automated God Ray Beam */
/* 2. Automated God Ray Beam */
.light-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Softened Gradient: No hard edges. Wide fade-in/out. */
    background: conic-gradient(from 0deg at 50% -20%,
            transparent 35%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.05) 55%,
            transparent 65%);
    transform-origin: 50% -20%;
    /* Pivot from top center */
    transform: rotate(var(--ray-angle, 0deg));
    /* Controlled by JS */
    /* Flicker removed per user request */
    mix-blend-mode: overlay;
    /* Re-apply blend mode for the beam */
    transition: transform 0.1s linear;
    /* Smooth out JS updates slightly */

    /* Vertical Fade */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.project-bg.active {
    opacity: 0.4;
    /* Subtle tint, letting black dominate */
}

/* Specific Backgrounds - Darkened for Higher Contrast */
.default-bg {
    background: radial-gradient(circle at center, #0a0a0a 0%, #000 80%);
    opacity: 0.2;
}

#bg-metal {
    background: linear-gradient(to top, #051014, #102a33, #1c3344);
}

/* Darker Steel */
#bg-sovereignty {
    background: linear-gradient(to top, #100320, #400a0a);
}

/* Deepest Red/Purple */
#bg-wild {
    background: linear-gradient(to top, #052630, #205030);
}

/* Darkest Forest */
#bg-submerged {
    background: linear-gradient(to top, #000005, #000030, #005080);
}

/* Golden Hour */
#bg-terra {
    background: linear-gradient(to top, #1a0a00, #401a05, #803300);
}

/* Deep Sea Green/Black */
/* Wait, Submerged usually blue? Let's go Deep Ocean Blue */
#bg-submerged {
    background: linear-gradient(to top, #020024, #090979, #00d4ff);
}

.projects-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-title {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    z-index: 30;
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    overflow: visible;
    /* Revert overflow */
}

/* Cinematic List - 3D Holographic Gallery */
.chapter-list {
    position: absolute;
    top: 55%;
    /* Slightly lower to view floor */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 60vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    /* Distinct gaps for floating modules */
    z-index: 20;
    pointer-events: none;
    perspective: 1500px;
    /* Deep 3D space */
}

/* .reflection-item styles removed */

.chapter-item {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 300px;
    /* Slightly larger */
    aspect-ratio: 9 / 16;
    /* Limit width to look like portrait panels */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Content at bottom */
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;

    /* FLOAT & REFLECT */
    /* Transform handled via individual properties to allow mix of JS tilt and CSS hover */
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(var(--translate-z, 0px));
    /* Hardware accel */
    will-change: transform;
    /* Transition: Explicitly exclude transform so JS Lerp can handle the physics smoothly */
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 1;
    /* Fully visible */
    background: #000;
    /* Solid background to block video */

    /* GLASS PANEL LOOK - Simplified */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* background: removed to prevent grey void interference - relying on image */
    /* backdrop-filter: blur(4px); removed as it blurs the image if behind */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* REFLECTION: Below the tile with a fade-out mask */
    -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.08));

    /* Initial Animation Offset (optional for "floating" feel loop in JS, but CSS hover is enough first) */
}

/* Custom Tech/HUD Border via Pseudo Elements */
.chapter-item::before,
.chapter-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 20;
    opacity: 0.5;
}

/* Top Left */
.chapter-item::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--accent-color);
    border-left: 2px solid var(--accent-color);
}

/* Bottom Right */
.chapter-item::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--accent-color);
    border-right: 2px solid var(--accent-color);
}

.chapter-item:hover::before,
.chapter-item:hover::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
}

/* .chapter-item:first-child removed as border is now handled by HUD corners */

/* Staggered Rhythm */
.chapter-item:nth-child(even) {
    margin-top: 24rem;
    /* Intentional deep stagger */
}

.chapter-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, var(--accent-color), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: overlay;
}

.chapter-content {
    position: relative;
    /* CRITICAL: Enables z-index */
    height: 100%;
    /* CRITICAL: Ensures content fills card so absolute image fills card */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-width: 0;
    /* Allow shrink */
    opacity: 0.8;
    opacity: 1;
    /* Keep visible */
    z-index: 10;
    /* Text above sketch */
}

/* Gradient Fade for Text Readability */
.chapter-content::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Ensure text sits ABOVE the image inside the same container */
.chapter-header,
.chapter-meta-container,
.chapter-desc {
    position: relative;
    z-index: 2;
}

.chapter-sketch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Sit above background but below text (z-2) */
    overflow: hidden;
}

/* Holographic Scanlines - REMOVED */
.chapter-sketch::before {
    content: none;
    display: none;
}

.chapter-sketch::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Dark overlay */
    opacity: 0.5;
    /* Default: slightly dimmed */
    transition: opacity 0.3s ease;
}

.chapter-item:hover .chapter-sketch::after {
    opacity: 0;
    /* Remove overlay on hover */
}

.chapter-sketch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    /* Default: Dimmed */
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.chapter-item:hover .chapter-sketch img {
    opacity: 1;
    /* Brighten on hover */
}

.chapter-item:hover .chapter-sketch img {
    transform: none;
    /* No movement */
    opacity: 1;
    /* Show full image underneath overlay */
}

.chapter-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.chapter-num {
    font-family: 'Consolas', monospace;
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 0;
    text-shadow: 0 0 5px var(--accent-color);
    /* Digital Glow */
}

.chapter-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0;
    white-space: nowrap;
    /* Force single line */
    text-align: center;
    line-height: 1.1;
    /* min-height removed as single line is enforced */
    display: flex;
    align-items: flex-end;
    /* Align bottom so single lines look grounded */
    justify-content: center;
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Metadata Container */
.chapter-meta-container {
    height: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #dfdfdf;
    max-width: 400px;
    line-height: 1.6;
}

.meta-line {
    width: 50px;
    height: 1px;
    background: var(--accent-color);
    margin: 1rem 0;
}

.meta-tag {
    display: block;
    font-family: 'Consolas', monospace;
    font-size: 0.8rem;
    color: #00fff9;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    text-shadow: 0 0 5px #00fff9;
    /* Digital Glow */
}

.chapter-desc {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #dfdfdf;
    max-width: 400px;
    line-height: 1.6;
}

/* Hover / Selection State - POP OUT */
.chapter-item:hover {
    flex: 1;
    /* Maintain size, no accordion expansion */
    opacity: 1;
    /* Use CSS Variable to drive the Z-translation, keeping rotation intact */
    --translate-z: 50px;

    /* background: removed to avoid grey void issues */
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    z-index: 10;
}

.chapter-item:hover .chapter-decor {
    opacity: 0.1;
    /* Subtle glow */
}

.chapter-item:hover .chapter-content {
    transform: translateY(0);
    opacity: 1;
}

.chapter-item:hover .chapter-title {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.05em;
}

.chapter-item:hover .chapter-meta-container {
    opacity: 1;
    transform: translateY(0);
}

/* Dim others - Depth of field effect */
.chapter-list:hover .chapter-item:not(:hover) {
    opacity: 0.4;
    --translate-z: -20px;
    /* Push back slightly */
    filter: blur(2px) grayscale(0.5);
}

/* Signature Wrapper - Reimagined Horizontal */
.signature-wrapper {
    position: absolute;
    top: 25%;
    /* Pushed down significantly */
    left: 0;
    width: 100%;

    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* Digital Signature (Author Link & Socials) */
.digital-signature {
    position: relative;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: #fff;
    opacity: 0.5;
    background: transparent;
    padding: 0.5rem 1rem;
    border: none;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.digital-signature:hover {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    /* Subtle backing on hover */
    border-radius: 4px;
}

/* 
   Prevent flicker by setting a fixed minimum width 
   that accommodates the longest text ("MY STORY // BENSON SIM").
*/
.digital-signature {
    min-width: 260px;
}

/* --- COMMS HUD (Redesigned Socials with 3D Flip) --- */
.magnetic-social-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-flip-container {
    perspective: 1000px;
    width: 190px;
    /* Only text width initially */
    height: 60px;
    cursor: auto;
    transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    /* Animate width */
}

/* Expand on Hover */
.social-flip-container:hover {
    width: 500px;
    /* Expand to fit HUD */
}

.social-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    transform-style: preserve-3d;
}

.social-flip-container:hover .social-flipper {
    transform: rotateX(180deg);
}

.social-front,
.social-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Front: The Label (Transparent, No Box) */
.social-front {
    background: transparent;
    backdrop-filter: none;
    border: none;
    color: #fff;
    z-index: 2;
}

.comm-label-lg {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: #fff;
    opacity: 0.5;
    /* Match digital signature grey */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

/* Back: The HUD */
.social-back {
    transform: rotateX(180deg);
    /* Initially hidden via rotation */
}

/* Comm HUD Styling (Lives in Back) */
.comm-hud {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    gap: 1.5rem;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    justify-content: center;
    min-width: 500px;
    /* Prevent squashing during transit */
}

/* Hover effects apply to the flipped state */
.comm-hud:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Bracket Decor */
.comm-hud::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--accent-color);
    border-left: 2px solid var(--accent-color);
}

.comm-hud::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--accent-color);
    border-right: 2px solid var(--accent-color);
}

.comm-group {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.comm-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: bold;
}

.comm-links {
    display: flex;
    gap: 0.8rem;
}

.comm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.comm-icon svg {
    width: 100%;
    height: 100%;
}

.comm-icon:hover {
    opacity: 1;
    transform: scale(1.1);
    color: var(--accent-color);
    filter: drop-shadow(0 0 5px var(--accent-color));
}

.comm-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
}

/* Warp Transition (Sci-Fi Exit) */
.warp-out {
    animation: warpZoom 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity, filter;
    /* Performance boost */
}

@keyframes warpZoom {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: scale(3);
        /* Hard zoom */
        opacity: 0;
        filter: blur(20px) brightness(3);
        /* Blinding speed */
    }
}

/* --- STORY PAGE: DATA STREAM THEME --- */

.story-container {
    padding-bottom: 5rem;
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* Full viewport height */
    overflow-y: scroll;
    /* Enable internal scrolling */
    scroll-behavior: smooth;
}

/* Timeline Stucture */
.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* Compact spacing */
}

/* 
   Ensure title doesn't flicker/wrap during decryption animation 
   by preventing wrapping and handling overflow 
*/
.story-chapter-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Optional: Ensure a minimum height if it still jumps vertically */
    min-height: 1.2em;
}

/* Timeline Central Line */
.timeline-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: var(--accent-color);
    /* Solid Core */
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0.6;
    /* Visible but not overwhelming */
    box-shadow: 0 0 10px var(--accent-color), 0 0 4px #fff;
    /* Laser Glow */
    width: 2px;
}

/* Static Sci-Fi Look - No Pulse */
.timeline-line::after {
    display: none;
}


/* Timeline Marker (Diamond) */
.timeline-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #000;
    border: 1px solid var(--accent-color);
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 10;
    box-shadow: 0 0 10px var(--accent-color);
}

/* Timeline Milestones */
.timeline-milestone {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    margin: 1rem 0;
    /* Reduced margin */
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timeline-milestone.active {
    opacity: 1;
    transform: translateY(0);
}

.milestone-marker {
    width: 12px;
    height: 12px;
    background: #000;
    border: 1px solid var(--accent-color);
    transform: rotate(45deg);
    box-shadow: 0 0 5px var(--accent-color);
    position: relative;
    z-index: 2;
}

.milestone-label {
    position: absolute;
    left: 50%;
    margin-left: 45px;
    /* Offset for line */
    padding-left: 15px;
    /* Gap from border to text */
    background: none;
    border-left: 1px solid var(--accent-color);
    /* Vertical bracket */
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: flex-start;
    backdrop-filter: none;
}

.milestone-year {
    font-size: 0.75rem;
    color: var(--accent-color);
    background: none;
    padding: 0;
    border: none;
    font-weight: normal;
    font-family: 'Consolas', monospace;
    opacity: 0.8;
}

.milestone-title {
    font-size: 0.9rem;
    font-weight: normal;
    color: #ccc;
    /* dimmer white */
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
}

.milestone-desc {
    font-size: 0.75rem;
    color: #888;
    font-family: 'Inter', sans-serif;
    margin-top: 5px;
    max-width: 300px;
    /* Prevent wide text */
    line-height: 1.4;
}

.milestone-label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -30px;
    /* Reach back towards marker */
    width: 30px;
    height: 1px;
    background: var(--accent-color);
    opacity: 0.8;
}

.milestone-label::after {
    display: none;
}

/* Sections */
.story-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-section.active {
    opacity: 1;
    transform: translateY(0);
}

.story-section.left-align {
    flex-direction: row;
    text-align: right;
}

.story-section.left-align .content-box {
    margin-right: 5rem;
}

.story-section.left-align .visual-box {
    margin-left: 5rem;
}

/* For variation, alternating layout could be added here if needed, 
   but currently all are left-align per design choice or user pref. 
   Adding right-align support just in case. */
.story-section.right-align {
    flex-direction: row-reverse;
    text-align: left;
}

.story-section.right-align .content-box {
    margin-left: 5rem;
}

.story-section.right-align .visual-box {
    margin-right: 5rem;
}

/* Content Box */
.content-box {
    width: 40%;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.visual-box {
    width: 45%;
    position: relative;
}


/* Scanline overlay removed as per user request */

/* Hero Section Restore */
.story-hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 100;
    /* Increased to ensure it's above overlay effects */
    padding-top: 60px;
    /* Nav spacing */
    pointer-events: none;
    /* Let clicks pass through empty space if needed, but text needs to be selectable? */
}

.story-hero h1,
.story-hero p,
.story-hero .scroll-indicator {
    pointer-events: auto;
    /* Re-enable pointer events for content */
}

.glitch-title {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    margin: 0;
}

/* Image Captions */
.image-caption {
    font-family: 'Consolas', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #888;
    margin-top: 2.5rem;
    /* significantly increased to clear the holo-frame corners */
    padding: 0 15px;
    border-left: 2px solid var(--accent-color);
    /* Side border data-style */
    text-align: left;
    letter-spacing: 0.05em;
    position: relative;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
}

.image-caption::before {
    content: '/// VISUAL_DATA_LOG';
    display: block;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
    opacity: 1;
}

/* Adjust caption alignment based on section */
.story-section.right-align .image-caption {
    text-align: right;
    border-left: none;
    border-right: 2px solid var(--accent-color);
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0.03), transparent);
}

.hero-subtitle {
    font-family: 'Consolas', monospace;
    color: var(--accent-color);
    margin-top: 1rem;
    letter-spacing: 0.3em;
    font-size: 0.9rem;
    opacity: 0.7;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-family: 'Consolas', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.2em;
    animation: pulse 2s infinite;
}

.arrow-down {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #fff);
    position: relative;
}

.arrow-down::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: translateX(-50%) rotate(45deg);
}




/* Content Box */
.content-box {
    width: 40%;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    text-align: left;
    /* Explicitly force left alignment */
}

.content-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
    opacity: 0.5;
}

/* Renamed to avoid collision with global .section-title */
.story-chapter-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
    position: relative;
    text-align: left;
    margin-top: 0;
}

/* Text Styling */
.section-text {
    font-size: 0.95rem;
    /* Reduced from default/1rem */
    line-height: 1.6;
    color: #ddd;
    margin-bottom: 0;
    text-align: left;
}

.story-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    font-size: 0.95rem;
    /* Match text size */
    text-align: left;
}

.story-list li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    border-left: 2px solid var(--accent-color);
    text-align: left;
}

.story-list strong {
    color: #fff;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    display: block;
    /* Make title stick out */
    margin-bottom: 0.2rem;
}


/* Hologram Visuals */
.visual-box {
    width: 45%;
    position: relative;
    /* perspective removed to match index tile behavior (self-contained perspective) */
}

.holo-frame {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* WHITE Border */
    background: rgba(0, 0, 0, 0.5);
    text-align: left;

    /* Parallax Transform */
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.1s linear, box-shadow 0.3s ease;
    /* Fast transform for mouse, smooth shadow */
    will-change: transform;
}

.holo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Removed tints */
    filter: none;
    opacity: 1;
    transition: all 0.5s ease;
}

/* Technical Corners for Holo Frame - Updated to WHITE */
.holo-frame::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: translateZ(20px);
    /* Pop out */
}

.holo-frame::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: translateZ(20px);
    /* Pop out */
}

/* Add a reflection effect similar to cards */
.holo-frame:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

/* Footer / Terminate */
.story-footer {
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.footer-status {
    font-family: 'Consolas', monospace;
    color: #444;
    letter-spacing: 0.3em;
}

.terminate-btn {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1rem 3rem;
    background: rgba(255, 0, 0, 0.05);
    /* Red tint */
    transition: all 0.3s ease;
    letter-spacing: 0.2em;
}

.terminate-btn:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    border-color: #fff;
}

/* Image Captions */
.image-caption {
    font-family: 'Consolas', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #888;
    margin-top: 2.5rem;
    padding: 0 15px;
    border-left: 2px solid var(--accent-color);
    text-align: left;
    letter-spacing: 0.05em;
    position: relative;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
}

.image-caption::before {
    content: attr(data-title);
    display: block;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
    opacity: 1;
}

/* Adjust caption alignment based on section */
.story-section.right-align .image-caption {
    text-align: right;
    border-left: none;
    border-right: 2px solid var(--accent-color);
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0.03), transparent);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .story-hero {
        padding: 0 1rem;
    }

    .scroll-indicator {
        bottom: 80px;
        /* Move up to clear progress bar */
    }

    /* 1. Timeline Line - Strict Left */
    .timeline-line {
        left: 20px !important;
        transform: none !important;
        width: 2px;
        opacity: 0.8;
        background: var(--accent-color) !important;
        /* Ensure solid color */
    }

    /* 2. Markers - Strict Left on Line */
    .timeline-marker,
    .milestone-marker {
        left: 20px !important;
        /* Center on line */
        transform: translate(-50%, 0) rotate(45deg) !important;
        margin: 0 !important;
        top: 0;
        /* Reset top for milestones if needed, but flex handles it usually */
    }

    .timeline-marker {
        top: 2rem;
        /* Push down slightly in section */
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    /* 3. Milestones - Right of Line */
    .timeline-milestone {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 50px;
        /* Clear the line */
        margin-left: 0;
        width: 100%;
        padding-right: 20px;
        /* Add right padding */
        text-align: left;
        box-sizing: border-box;
        /* Ensure padding doesn't overflow width */
    }

    .milestone-marker {
        position: absolute;
        top: 5px;
        /* Align with text top approx */
    }

    .milestone-label {
        position: relative;
        left: auto;
        margin-left: 0;
        padding-left: 15px;
        /* Keep bracket gap */
        width: 100%;
        border-left: 1px solid var(--accent-color);
        white-space: normal;
        /* Ensure text wraps */
        word-wrap: break-word;
        /* Prevent overflow */
        padding-right: 0;
        /* Handled by parent */
    }

    .milestone-label::before {
        /* The horizontal connector line */
        width: 15px;
        left: -15px;
    }

    .milestone-year {
        white-space: normal;
    }

    .milestone-title {
        white-space: normal !important;
        /* Force wrap */
        word-wrap: break-word !important;
        display: block;
        width: 100%;
    }

    /* 4. Story Sections - Right of Line */
    .story-section.left-align,
    .story-section.right-align {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
        /* Reset wrapper padding, handle inside */
        margin-left: 0;
        width: 100%;
    }

    .content-box,
    .visual-box {
        width: calc(100% - 70px);
        /* Full width minus left gap (50px) and right gap (20px) */
        margin-left: 50px !important;
        /* Clear the line */
        margin-right: 20px !important;
        /* Ensure right margin */
        margin-bottom: 2rem;
        padding: 1.5rem;
        /* Reduce padding */
        box-sizing: border-box;
        /* Ensure correct width calculation */
    }

    .story-section.left-align .content-box,
    .story-section.right-align .content-box {
        margin-right: 20px;
    }

    .story-section.left-align .visual-box,
    .story-section.right-align .visual-box {
        margin-right: 20px;
    }

    /* Typography Adjustments */
    .glitch-title {
        font-size: 3rem;
        line-height: 1;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 0.7rem;
        padding: 0 1rem;
    }

    .story-chapter-title {
        font-size: 1.2rem;
        word-wrap: break-word;
    }
}

/* Slideshow Component */
.slideshow-container {
    position: relative;
    width: 100%;
    /* Fix collapse due to absolute children */
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio Fallback */
    height: 0;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slideshow Controls */
.slider-nav {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 5;
}

.nav-btn {
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: var(--accent-color);
    color: #000;
}

/* Story List Styling */
.story-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    font-family: 'Consolas', monospace;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.6;
}

.story-list li {
    margin-bottom: 0.8rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent-color);
}

.story-list strong {
    color: #fff;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    display: block;
    /* Make title stick out */
    margin-bottom: 0.2rem;
}


/* --- IMMERSIVE AVIATION SLIDESHOW --- */
.immersive-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: relative;
    /* Hide scrollbar for immersion */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.immersive-container::-webkit-scrollbar {
    display: none;
}

/* Slide Structure */
.story-slide {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    background-color: #000;
}

.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Hidden by default for transition */
    transform: scale(1.0);
    /* Transition replaced by animation on active */
    transition: opacity 1.5s ease-out;
    will-change: transform, opacity;
}

@keyframes zoomBreath {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.0);
    }
}

.story-slide.active .slide-image {
    opacity: 1;
    animation: zoomBreath 30s ease-in-out infinite;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Floating Content HUD */
.slide-content {
    position: absolute;
    bottom: 8%;
    left: 4%;
    max-width: 650px;
    z-index: 10;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    border-left: 1px solid var(--accent-color);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease 0.5s;
    /* Delay start */
}

.story-slide.active .slide-content {
    opacity: 1;
    transform: translateX(0);
}

.content-header {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.content-header::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.story-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #cccccc;
}

/* Scanline Transition Effect */
.scan-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: var(--accent-color);
    transform: scaleY(0);
    transform-origin: top;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.story-slide.active .scan-transition {
    animation: scanWipe 0.6s ease-in-out;
}

@keyframes scanWipe {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 1;
    }

    50% {
        transform: scaleY(1);
        opacity: 0.5;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: 0;
    }
}

/* Immersive Mobile Overrides */
@media (max-width: 768px) {
    .story-slide {
        display: flex;
        flex-direction: column;
    }

    .slide-image {
        position: relative;
        flex: 1;
        height: auto;
        /* Fill remaining space */
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .slide-content {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: none;
        padding: 1.5rem;
        padding-bottom: 6rem;
        /* Space for HUD */
        background: #0a0a0a;
        /* Opaque background */
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        clip-path: none;
        transform: none !important;
        /* Disable transform anim on mobile */
        opacity: 1 !important;
        /* Always visible */
    }

    .story-slide.active .slide-content {
        transform: none;
    }

    .content-header::after {
        display: none;
        /* simplify header */
    }

    /* Mobile HUD Overrides */
    .hud-layer {
        pointer-events: none;
    }

    /* Mobile HUD Overrides */
    .hud-layer {
        display: none !important;
        /* Hide Desktop HUD completely */
    }

    /* Dedicated Mobile Progress Dock */
    #mobile-progress-dock {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1rem 1.5rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        background: #000000;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        /* More subtle border */
        align-items: center;
        z-index: 2147483647;
    }

    .mobile-bar-track {
        flex-grow: 1;
        height: 4px;
        /* Slightly thinner */
        background: rgba(255, 255, 255, 0.1);
        /* Darker track */
        border-radius: 2px;
        margin-right: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .mobile-bar-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background: rgba(255, 255, 255, 0.6);
        /* Less bright fill */
        box-shadow: none;
        /* Removed glow */
        transition: width 0.1s linear;
    }

    .mobile-exit-btn {
        color: rgba(255, 255, 255, 0.6);
        /* Subtle text */
        font-family: 'Space Mono', monospace;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        padding: 0.5rem;
        line-height: 1;
        transition: color 0.3s;
    }

    .mobile-exit-btn:active {
        color: #fff;
        /* Brighten on tap */
    }
}

/* Mission HUD (Fixed) */
.hud-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hud-top {
    display: flex;
    justify-content: flex-end;
    /* Align to right */
    align-items: flex-start;
}

.hud-bottom {
    display: flex;
    justify-content: center;
    /* Center align */
    align-items: flex-end;
    width: 100%;
}

/* Progress Indicator */
.mission-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hud-close-btn {
    pointer-events: auto;
    /* Enable clicking */
    font-family: 'Space Mono', monospace;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    margin-top: 1.5rem;
    transition: all 0.3s;
    line-height: 1;
}

.hud-close-btn:hover {
    color: #ff3333;
    /* Red close color */
    text-shadow: 0 0 8px #ff0000;
    transform: scale(1.1);
}

.progress-text {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}

.progress-bar {
    width: 150px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 5px;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.3s ease;
}

.nav-back-btn {
    pointer-events: auto;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}

.nav-back-btn:hover {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
}

.scroll-hint-corner {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    opacity: 0.5;
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* --- Magnetic Cursor & Button Styles --- */
body,
html,
a,
button,
.chapter-item,
.enter-prompt {
    cursor: none !important;
    /* Hide default cursor to use custom one */
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: difference;
    /* Ensures visibility */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Outer Ring (Circle -> Square) */
.cursor-inner {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    /* Start as Circle */
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    background: transparent;
}

/* Center Square */
.custom-cursor::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 0;
    /* Square dot */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Active State (Hovering Button) */
.custom-cursor.active .cursor-inner {
    border-radius: 0;
    /* Morph to Square */
    border-color: #00ff41;
    /* Sci-Fi Green */
    transform: scale(1.5);
    /* Slight expansion */
    background: rgba(0, 255, 65, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    /* Glow */
}

/* Inner square changes color too */
.custom-cursor.active::after {
    background: #00ff41;
    transform: translate(-50%, -50%) scale(0.5);
    /* Shrink slightly */
}

/* Hide corner brackets from previous design */
.cursor-inner::before,
.cursor-inner::after {
    content: none;
}

/* Magnetic Button Base Style */
.magnetic-btn {
    display: inline-block;
}

/* Typewriter Cursor */
.cursor-blink {
    color: #fff;
    font-weight: 100;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}


@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Camera Viewfinder HUD */
.hud-corner {
    position: fixed;
    z-index: 100;
    font-family: 'Outfit', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    /* Readable against light bg */
}



.hud-bl {
    bottom: 2rem;
    left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Bottom Right: Exposure Settings */
/* Bottom Right: Exposure Settings */
.hud-br {
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: row;
    /* Horizontal Layout */
    align-items: center;
    gap: 1rem;
    pointer-events: none;
}

.hud-row {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    /* Very tight gap */
    pointer-events: auto;

    /* Default: Subtle / Invisible Container */
    background: transparent;
    padding: 0.4rem 0.1rem;
    /* Minimized padding */
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
    backdrop-filter: none;
    opacity: 0.7;
}

.hud-row:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    padding: 0.4rem 0.6rem;
    opacity: 1;
}

.hud-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 0.1rem;
    /* Minimal label margin */
}

.hud-val {
    min-width: 2rem;
    /* Reduced width */
    text-align: center;
    color: #fff;
    font-weight: 500;
}

.adj-btn {
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;

    /* Animation Properties */
    width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.hud-row:hover .adj-btn {
    width: 1.2rem;
    /* Reveal width */
    opacity: 1;
    pointer-events: auto;
    margin: 0 0.2rem;
}

.adj-btn:hover {
    text-shadow: 0 0 8px #fff;
    transform: scale(1.2);
}

.hud-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6rem;
    width: 1.5rem;
    text-align: left;
}

.hud-val {
    width: 3rem;
    text-align: center;
    color: #fff;
}

.adj-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.adj-btn:hover {
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* Viewfinder Brackets */
.cam-bracket {
    position: fixed;
    width: 3rem;
    height: 3rem;
    border: 2px solid rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 99;
}

.cam-bracket.tl {
    top: 1.5rem;
    left: 1.5rem;
    border-right: none;
    border-bottom: none;
}

.cam-bracket.tr {
    top: 1.5rem;
    right: 1.5rem;
    border-left: none;
    border-bottom: none;
}

.cam-bracket.bl {
    bottom: 1.5rem;
    left: 1.5rem;
    border-right: none;
    border-top: none;
}

.cam-bracket.br {
    bottom: 1.5rem;
    right: 1.5rem;
    border-left: none;
    border-top: none;
}

/* Center Crosshair */
.center-crosshair {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 99;
}

.center-crosshair::before,
.center-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
}

.center-crosshair::before {
    top: 9px;
    left: 0;
    width: 100%;
    height: 2px;
}

.center-crosshair::after {
    top: 0;
    left: 9px;
    width: 2px;
    height: 100%;
}

/* Specific Data Styles */
.hud-coords {
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Ambient Particles */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Behind content but above bg */
    pointer-events: none;
    overflow: hidden;
}

.ambient-particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    pointer-events: none;
}


/* Bottom Left: Focus/Coords */

/* =========================================
   MOBILE RESPONSIVENESS (max-width: 768px)
   ========================================= */
/* =========================================
   MOBILE RESPONSIVENESS (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {

    /* Allow Body Scroll Override if needed, but container scroll is safer */
    /* .projects-container handles the scroll */

    /* 0. Container Layout Override */
    .projects-content {
        justify-content: flex-start !important;
        /* Start from top, don't center vertically */
        padding-top: 0;
    }

    .projects-container {
        overflow-y: auto !important;
        /* Force scroll */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll */
    }

    /* 1. Layout: Vertical Stack */
    .chapter-list {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        /* Let it grow */
        position: relative !important;
        /* Remove fixed/absolute centering to allow scroll flow */
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 45vh !important;
        /* Push down massively using viewport height */
        padding-top: 2rem;
        padding-bottom: 20vh;
        /* Space at bottom */
        gap: 4rem;
        /* More space between vertical items */
        perspective: none;
        /* Flatten 3D for clarity */
        overflow: visible;
        /* Let content spill */
        align-items: center;
        /* Center items */
    }

    /* 2. Tiles: Larger & Tappable */
    .chapter-item {
        width: 80vw;
        /* Wide for mobile */
        max-width: 400px;
        aspect-ratio: 4 / 5;
        height: auto;
        opacity: 1;
        transform: none !important;
        /* Disable tilt */
        margin-top: 0 !important;
        /* Remove stagger */
        flex: none;
        /* Don't flex shrink */
    }

    .chapter-item:nth-child(even) {
        margin-top: 0;
    }

    /* 3. Typography & HUD Repositioning */
    .section-title {
        font-size: 2.5rem;
        position: absolute;
        top: 5rem;
        width: 100%;
        text-align: center;
        line-height: 1.1;
    }

    .signature-wrapper {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 15rem;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        align-items: center;
        gap: 1rem;
        z-index: 50;
        pointer-events: auto;
        bottom: auto;
    }

    /* RESET PARENT WRAPPER style for social icons */
    .signature-wrapper .digital-signature.social-sig {
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        padding: 0;
        width: 100%;
        max-width: 95vw;
        /* Increased from 300px to fit labels */
        pointer-events: none;
        /* Let clicks pass through to icons */
    }

    /* Apply Box Style to the Icons Container instead */
    .social-icons {
        margin: 0;
        padding: 0.8rem 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        /* Reduced gap to fit content */
        width: 100%;
        background: #111;
        /* Solid Dark Background */
        border: 1px solid rgba(255, 255, 255, 0.3);
        pointer-events: auto;
        /* Re-enable clicks */
        z-index: 100;
        position: relative;
    }

    .social-group {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.8rem;
        /* Reduced gap */
        align-items: center;
        width: auto !important;
    }

    .social-group-label {
        font-family: 'Space Mono', monospace;
        font-size: 0.55rem;
        /* Slightly smaller to ensure fit */
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        margin-right: 0.2rem;
    }

    .social-spacer {
        width: 1px;
        height: 12px;
        /* Shorter spacer */
        background: rgba(255, 255, 255, 0.3);
        margin: 0 0.1rem;
        flex-shrink: 0;
    }

    .sig-label {
        display: none !important;
    }

    /* Clean Icon Styles */
    .social-icons a {
        display: flex !important;
        /* Force Flex */
        width: 20px;
        /* Slightly smaller icons on mobile if needed, or keep 24 */
        height: 20px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border: none;
        background: transparent;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateZ(0);
        flex-shrink: 0;
        /* Prevent squashing */
    }

    /* SVG Styling - Direct and Explicit */
    .social-icons svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
        color: white;
    }

    /* Force Stroke Color on all SVG parts */
    .social-icons svg * {
        stroke: white !important;
        stroke-width: 2px !important;
        fill: none !important;
        vector-effect: non-scaling-stroke;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        transition: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Force stroke on all child elements */
    .social-icons svg path,
    .social-icons svg rect,
    .social-icons svg line,
    .social-icons svg polygon,
    .social-icons svg circle {
        stroke: #fff !important;
        stroke-width: 2px !important;
        fill: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
    }

    /* HIDE HUD ON MOBILE */
    .hud-layer,
    .cam-bracket,
    .center-crosshair,
    .time-readout,
    .af-status,
    .bg-grid,
    .hud-corner,
    .hud-row,
    .af-bracket,
    .custom-cursor {
        display: none !important;
    }

    * {
        cursor: auto !important;
        /* Reset to system default (invisible on touch) */
    }

    /* Ensure video covers all on mobile */
    .bg-video {
        position: fixed;
        /* Fix background so only content scrolls */
        height: 100vh;
        width: 100vw;
    }
}

/* FINAL OVERRIDE FIX FOR SOCIAL GROUPS */
@media (max-width: 1024px) {
    .social-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.8rem !important;
        width: auto !important;
        max-width: none !important;
    }

    .social-group-label {
        display: inline-block !important;
        margin-right: 0.5rem !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }

    .social-icons a {
        display: flex !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }
}

/* =========================================
   GLOBAL SOCIAL STYLES (Applies to ALL screens)
   ========================================= */

/* LABEL STYLING: Visible by default, centered */
.social-sig .sig-label {
    display: block !important;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: #fff;
    letter-spacing: 0.1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: all 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

/* BOX STYLING: Hidden by default (opacity 0), appears on hover */
.social-icons {
    display: flex !important;
    position: relative !important;
    /* Relative allows parent to scale to its size */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    background: #111 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 4px !important;
    opacity: 0 !important;
    /* HIDDEN INITIALLY */
    pointer-events: none !important;
    /* No clicks initially */
    white-space: nowrap !important;
    transition: opacity 0.3s ease !important;
    z-index: 20;
}

/* Reset Parent Wrapper */
.digital-signature.social-sig {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    position: relative;
    width: auto !important;
    cursor: pointer;
}

/* --- HOVER INTERACTIONS (Desktop) --- */

/* Reveal Icons on Hover */
.digital-signature.social-sig:hover .social-icons {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hide Label on Hover */
.digital-signature.social-sig:hover .sig-label {
    opacity: 0 !important;
    transform: translate(-50%, 0px);
}

/* --- MOBILE OVERRIDE (Already handled above, but ensuring flow) --- */
@media (max-width: 1024px) {

    /* On Mobile, just show the icons always, no hover needed */
    .social-icons {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sig-label {
        display: none !important;
    }
}

/* Inner Elements */
.social-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1rem !important;
    width: auto !important;
}

.social-group-label {
    display: block !important;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    /* Increased opacity for clarity */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.8rem;
    white-space: nowrap;
    text-shadow: none !important;
    /* Remove inherited glow */
    font-weight: 600;
    /* Slightly bolder */
}

.social-spacer {
    display: block !important;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 0.5rem;
}

.social-icons a {
    display: flex !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
}