/* ═══════════════════════════════════════════════════════════════════════════
   SWEN CUBILETTE - RETRO SYNTHWAVE PORTFOLIO
   A neon-drenched, 80s-inspired design system
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FONT FACES ─────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'VCR';
    src: url('Fonts/VCR_OSD_MONO_1.001.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PixelStart';
    src: url('Fonts/prstart.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yoster';
    src: url('Fonts/yoster.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zig';
    src: url('Fonts/zig_____.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ─── CSS VARIABLES ──────────────────────────────────────────────────────── */
:root {
    /* Neon Colors */
    --neon-magenta: #ff00ff;
    --neon-cyan: #00ffff;
    --neon-pink: #ff6ec7;
    --neon-purple: #7b2fff;
    --neon-orange: #ff6b35;
    --neon-yellow: #fffc00;

    /* Dark Backgrounds */
    --dark-void: #0a0a1a;
    --dark-purple: #1a0a2e;
    --dark-blue: #0d0d2b;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b8b8d0;

    /* Glow Effects */
    --glow-magenta: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-magenta), 0 0 40px var(--neon-magenta);
    --glow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
    --glow-pink: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 40px var(--neon-pink);

    /* Typography */
    --font-display: 'VCR', 'Courier New', monospace;
    --font-heading: 'Zig', 'Impact', sans-serif;
    --font-body: 'Yoster', 'Arial', sans-serif;
    --font-accent: 'PixelStart', 'Courier New', monospace;

    /* Spacing */
    --section-padding: 100px 5%;
    --container-max: 1400px;
}

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: transparent;
    /* Transparent to show rain behind */
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    background-color: var(--dark-void);
    /* Background moves here */
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
}

/* ─── SCANLINE OVERLAY ───────────────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Lighter scanlines for dark theme visibility */
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.03) 0px,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 3px);
    pointer-events: none;
    z-index: 9999;
    opacity: 0.7;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}

/* ─── HERO SECTION ───────────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(10, 10, 26, 0.7) 0%,
            rgba(26, 10, 46, 0.5) 50%,
            rgba(10, 10, 26, 0.9) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
.site-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 10vw, 7rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--neon-cyan);
    text-shadow: var(--glow-cyan);
    margin-bottom: 10px;
    animation: flicker 3s infinite alternate;
    display: inline-block;
    /* Constrain width for binary overlay */

    /* Text Scanline Mask */
    background: repeating-linear-gradient(to bottom,
            var(--neon-cyan) 0px,
            var(--neon-cyan) 3px,
            rgba(0, 255, 255, 0.5) 3px,
            rgba(0, 255, 255, 0.5) 6px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.site-tagline {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: var(--neon-magenta);
    text-shadow: var(--glow-magenta);
    letter-spacing: 0.3em;
    margin-bottom: 40px;
}

h2,
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--neon-pink);
    text-shadow: var(--glow-pink);
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: flicker-magenta 3s infinite alternate;

    /* Text Scanline Mask */
    background: repeating-linear-gradient(to bottom,
            var(--neon-pink) 0px,
            var(--neon-pink) 3px,
            rgba(255, 0, 255, 0.5) 3px,
            rgba(255, 0, 255, 0.5) 6px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Randomized Flicker Timings */
#about .section-title {
    animation-duration: 3.5s;
    animation-delay: 0.2s;
}

#publications .section-title {
    animation-duration: 2.8s;
    animation-delay: 1.5s;
}

#experience .section-title {
    animation-duration: 4.2s;
    animation-delay: 0.8s;
}

h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--neon-cyan);
    margin-bottom: 15px;
}

p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto 20px;
}

/* ─── NAVIGATION ─────────────────────────────────────────────────────────── */
.main-nav {
    position: relative;
    z-index: 2;
    margin-top: 30px;
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 60px;
    /* Increased gap to prevent glow overlap */
}

.nav-link {
    font-family: var(--font-accent);
    font-size: clamp(0.6rem, 1.5vw, 0.9rem);
    color: var(--text-primary);
    padding: 12px 25px;
    border: none;
    /* Removed standard border for pixel effect */
    /* Pixel Border Effect */
    box-shadow:
        inset 0 0 0 2px var(--neon-magenta),
        /* Inner border */
        4px 4px 0px 0px var(--neon-cyan);
    /* Hard shadow for blocky look */
    transition: all 0.1s steps(2);
    /* Stepped transition for retro feel */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    background: transparent;
    margin: 5px;
    /* Spacing for the shadow */
}

/* Hover Effect: Shift and Swap Colors */
.nav-link:hover {
    transform: translate(2px, 2px);
    /* "Press" button effect */
    color: var(--neon-cyan);
    box-shadow:
        inset 0 0 0 2px var(--neon-cyan),
        2px 2px 0px 0px var(--neon-magenta);
    /* Shadow shrinks and changes color */
    text-shadow: 2px 2px 0px var(--neon-magenta);

    /* Flare Effect */
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: flare 0.7s infinite linear;
}

@keyframes flare {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Active State */
.nav-link:active {
    transform: translate(4px, 4px);
    box-shadow:
        inset 0 0 0 2px var(--neon-magenta),
        0px 0px 0px 0px var(--neon-cyan);
}

.nav-link:hover {
    color: var(--neon-magenta);
    text-shadow: var(--glow-magenta);
    box-shadow: 0 0 20px var(--neon-magenta), inset 0 0 20px rgba(255, 0, 255, 0.1);
    transform: translateY(-3px);
}

/* ─── SECTIONS ───────────────────────────────────────────────────────────── */
.section {
    padding: var(--section-padding);
    position: relative;
    background: linear-gradient(180deg, var(--dark-void) 0%, var(--dark-purple) 50%, var(--dark-void) 100%);
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}

.section-content {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ─── GRID PERSPECTIVE EFFECT ────────────────────────────────────────────── */
.grid-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background:
        linear-gradient(180deg, rgba(10, 10, 26, 1) 0%, transparent 20%),
        repeating-linear-gradient(90deg,
            var(--neon-magenta) 0px,
            transparent 1px,
            transparent 80px),
        repeating-linear-gradient(0deg,
            var(--neon-magenta) 0px,
            transparent 1px,
            transparent 40px);
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
    opacity: 0.3;
    z-index: 0;
}

/* ─── CARDS ──────────────────────────────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.card {
    background: rgba(13, 13, 43, 0.6);
    padding: 30px;
    border: 1px solid var(--neon-purple);
    /* Keep thin border for definition */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    /* Blocky Pixel Border Effect */
    box-shadow:
        5px 5px 0 0 #000,
        /* Spacing */
        10px 10px 0 0 var(--neon-purple);
    /* Solid Shadow */
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(123, 47, 255, 0.3), 0 0 30px rgba(0, 255, 255, 0.1);
    border-color: var(--neon-cyan);
}

/* ─── GALLERY GRID ───────────────────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    /* Strict corners for pixel look */
    cursor: pointer;
    transition: all 0.3s ease;

    /* Blocky Pixel Border Effect */
    border: 2px solid var(--neon-magenta);
    box-shadow:
        4px 4px 0 0 #000,
        8px 8px 0 0 var(--neon-cyan);
}

.gallery-item:hover {
    transform: translate(-2px, -2px);
    /* Pop up slightly */
    border-color: var(--neon-cyan);
    box-shadow:
        6px 6px 0 0 #000,
        12px 12px 0 0 var(--neon-magenta);
    z-index: 10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}



.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 26, 0.8) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* ─── LIGHTBOX ───────────────────────────────────────────────────────────── */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 26, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid var(--neon-magenta);
    box-shadow: 0 0 50px rgba(255, 0, 255, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--neon-cyan);
    cursor: pointer;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    text-shadow: var(--glow-cyan);
    transform: rotate(90deg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--neon-magenta);
    cursor: pointer;
    padding: 20px;
    transition: all 0.3s ease;
    user-select: none;
}

.lightbox-nav:hover {
    text-shadow: var(--glow-magenta);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* ─── BACK NAVIGATION ────────────────────────────────────────────────────── */
.back-nav {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.back-link {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    color: var(--neon-cyan);
    padding: 10px 20px;
    border: 2px solid var(--neon-cyan);
    transition: all 0.3s ease;
    text-transform: uppercase;
    display: inline-block;
}

.back-link:hover {
    text-shadow: var(--glow-cyan);
    box-shadow: 0 0 20px var(--neon-cyan);
    background: rgba(0, 255, 255, 0.1);
}

/* ─── PAGE HEADER ────────────────────────────────────────────────────────── */
.page-header {
    padding: 150px 5% 80px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(10, 10, 26, 0.8) 0%,
            rgba(26, 10, 46, 0.6) 50%,
            rgba(10, 10, 26, 0.95) 100%);
    z-index: 1;
}

.page-header .page-title {
    position: relative;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 8vw, 5rem);
    color: var(--neon-cyan);
    text-shadow: var(--glow-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: flicker 3s infinite alternate;
    /* Added flicker effect */
    display: inline-block;
    /* Constrain width for binary overlay */

    /* Text Scanline Mask */
    background: repeating-linear-gradient(to bottom,
            var(--neon-cyan) 0px,
            var(--neon-cyan) 3px,
            rgba(0, 255, 255, 0.5) 3px,
            rgba(0, 255, 255, 0.5) 6px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer {
    padding: 60px 5% 40px;
    /* More top padding for horizon */
    text-align: center;
    margin-top: 4rem;
    position: relative;
    border-top: 2px solid var(--neon-cyan);
    box-shadow: 0 -5px 20px rgba(0, 255, 255, 0.2);
    background-color: #050505;
    overflow: hidden;
    /* Clip the 3D grid */
}

/* 3D Synthwave Grid Floor */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;

    /* Grid Pattern: Thicker (2px) and Brighter */
    background-image:
        linear-gradient(to bottom, rgba(255, 0, 255, 0.6) 2px, transparent 2px),
        linear-gradient(to right, rgba(255, 0, 255, 0.6) 2px, transparent 2px);
    background-size: 50px 50px;

    /* 3D Perspective Transform */
    transform: perspective(150px) rotateX(45deg) scale(1.5);
    transform-origin: top center;

    /* Horizon Fade Mask (Transparent at top, Opaque at bottom) */
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);

    pointer-events: none;
    z-index: 0;
}

/* Ensure content sits above the grid */
.footer p,
.footer-links {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px #000;
    /* Legibility */
}

.footer p {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.footer-link {
    color: var(--neon-magenta);
    transition: all 0.3s ease;
}

.footer-link:hover {
    text-shadow: var(--glow-magenta);
}

/* ─── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow: var(--glow-cyan);
        opacity: 1;
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        opacity: 0.8;
    }
}

/* ─── MUSIC WIDGET ───────────────────────────────────────────────────────── */
.music-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 10, 26, 0.9);
    border: 1px solid var(--neon-cyan);
    padding: 15px;
    z-index: 99999;
    font-family: var(--font-display);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
}

.music-status {
    color: var(--neon-cyan);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    display: flex;
    justify-content: space-between;
}

#music-state {
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.music-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.music-btn {
    background: transparent;
    border: 1px solid var(--neon-magenta);
    color: var(--neon-magenta);
    font-family: var(--font-accent);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.3s ease;
    flex-grow: 1;
}

.music-btn:hover {
    background: var(--neon-magenta);
    color: #fff;
    box-shadow: 0 0 10px var(--neon-magenta);
}

.volume-slider {
    width: 60px;
    accent-color: var(--neon-cyan);
}

@keyframes flicker-magenta {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow: var(--glow-magenta);
        opacity: 1;
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        opacity: 0.8;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 10px var(--neon-magenta);
    }

    50% {
        box-shadow: 0 0 30px var(--neon-magenta), 0 0 60px var(--neon-magenta);
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-in {
    animation: slide-up 0.6s ease forwards;
}

/* ─── SCROLL INDICATOR ───────────────────────────────────────────────────── */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    display: block;
    width: 30px;
    height: 50px;
    border: 2px solid var(--neon-magenta);
    border-radius: 25px;
    position: relative;
}

.scroll-indicator span::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 10px;
    background: var(--neon-magenta);
    border-radius: 3px;
    animation: scroll-dot 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes scroll-dot {
    0% {
        opacity: 1;
        top: 10px;
    }

    100% {
        opacity: 0;
        top: 30px;
    }
}

/* ─── RESPONSIVE DESIGN ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-list {
        flex-direction: column;
        align-items: center;
    }

    .nav-link {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

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

    .section {
        padding: 60px 5%;
    }

    .lightbox-nav {
        font-size: 2rem;
        padding: 10px;
    }

    .lightbox-prev {
        left: 5px;
    }

    .lightbox-next {
        right: 5px;
    }
}

@media (max-width: 480px) {
    .site-title {
        letter-spacing: 0.05em;
    }

    .site-tagline {
        letter-spacing: 0.1em;
    }
}

/* ─── ABOUT SECTION LAYOUT ───────────────────────────────────────────────── */
.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    text-align: left;
}

.about-image-wrapper {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    position: relative;
}

.about-image {
    width: 100%;
    border: 3px solid var(--neon-cyan);
    box-shadow: 10px 10px 0 var(--neon-magenta), 0 0 20px rgba(0, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.about-image:hover {
    transform: translate(-5px, -5px);
    box-shadow: 15px 15px 0 var(--neon-magenta), 0 0 30px rgba(0, 255, 255, 0.6);
}

.about-text {
    flex: 1.5;
    min-width: 300px;
}

.about-text p {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .about-image-wrapper {
        max-width: 300px;
    }
}

/* ─── GLITCH EFFECT ──────────────────────────────────────────────────────── */
.gallery-item {
    /* Existing styles are fine, just ensuring relative positioning is set */
    position: relative;
    overflow: hidden;
    /* Keeps the glitch contained */
}

/* Pseudo-elements for the glitch layers */
.gallery-item::before,
.gallery-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img-url);
    /* Set via JS */
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.gallery-item:hover::before {
    opacity: 1;
    animation: glitch-anim-1 0.6s infinite steps(2) alternate-reverse;
    background-color: rgba(255, 0, 255, 1);
    /* Magenta channel */
    background-blend-mode: multiply;
    mix-blend-mode: screen;
    filter: blur(1px);
}

.gallery-item:hover::after {
    opacity: 1;
    animation: glitch-anim-2 0.5s infinite steps(2) alternate-reverse;
    background-color: rgba(0, 255, 255, 1);
    /* Cyan channel */
    background-blend-mode: multiply;
    mix-blend-mode: screen;
    filter: blur(1px);
}

/* Glitch Keyframes */
@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(80% 0 10% 0);
        transform: translate(-10px, 5px);
    }

    20% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(10px, -5px);
    }

    40% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(-5px, 10px);
    }

    60% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(5px, -10px);
    }

    80% {
        clip-path: inset(90% 0 5% 0);
        transform: translate(-10px, 5px);
    }

    100% {
        clip-path: inset(15% 0 60% 0);
        transform: translate(10px, -5px);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(5px, -5px);
    }

    20% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(-5px, 5px);
    }

    40% {
        clip-path: inset(30% 0 60% 0);
        transform: translate(10px, -10px);
    }

    60% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(-10px, 10px);
    }

    80% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(5px, -5px);
    }

    100% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(-5px, 5px);
    }
}

/* ─── CRT FILTER OVERLAY ─────────────────────────────────────────────────── */
.crt-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    /* Above image, below hover effects if necessary */

    /* Vignette */
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7);

    /* Scanlines */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.2));
    background-size: 100% 4px;

    /* Subtle RGB separation suggestion via blend mode */
    mix-blend-mode: overlay;
    opacity: 0.8;
}

/* Ensure the image container has relative positioning for the absolute overlay */
.gallery-item {
    position: relative;
}

/* ─── NAV TEXT GLITCH ────────────────────────────────────────────────────── */
.nav-link {
    /* Existing styles preserved, just ensuring overflow is visible for the glitch to spill out if needed */
    overflow: visible;
}

/* Glitch Layers */
.nav-link::before,
.nav-link::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Changed from #0a0a1a to transparent */
    opacity: 0;
    pointer-events: none;
}

/* Hover State */
.nav-link:hover::before {
    opacity: 1;
    color: var(--neon-cyan);
    z-index: 1;
    animation: glitch-anim-1 0.4s infinite linear alternate-reverse;
    text-shadow: 2px 0 5px var(--neon-magenta);
    /* Added blur radius */
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px, 0);
    filter: drop-shadow(0 0 8px var(--neon-cyan));
    /* Extra outer glow */
}

.nav-link:hover::after {
    opacity: 1;
    color: var(--neon-magenta);
    z-index: 2;
    animation: glitch-anim-2 0.4s infinite linear alternate-reverse;
    text-shadow: -2px 0 5px var(--neon-cyan);
    /* Added blur radius */
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: translate(2px, 0);
    filter: drop-shadow(0 0 8px var(--neon-magenta));
    /* Extra outer glow */
}

/* ─── BORDER GLITCH ANIMATION ────────────────────────────────────────────── */
@keyframes border-glitch {
    0% {
        box-shadow:
            inset 0 0 0 2px var(--neon-cyan),
            2px 2px 0px 0px var(--neon-magenta);
    }

    20% {
        box-shadow:
            inset 0 0 0 2px var(--neon-magenta),
            4px -2px 0px 0px var(--neon-cyan);
    }

    40% {
        box-shadow:
            inset 0 0 0 2px var(--neon-cyan),
            -2px 4px 0px 0px var(--neon-magenta);
    }

    60% {
        box-shadow:
            inset 0 0 0 2px var(--neon-magenta),
            2px 2px 0px 0px var(--neon-cyan);
    }

    80% {
        box-shadow:
            inset 0 0 0 2px var(--neon-cyan),
            -1px -1px 0px 0px var(--neon-magenta);
    }

    100% {
        box-shadow:
            inset 0 0 0 2px var(--neon-magenta),
            2px 2px 0px 0px var(--neon-cyan);
    }
}

.nav-link:hover {
    /* Existing hover styles */
    transform: translate(2px, 2px);
    color: var(--neon-cyan);
    text-shadow: 2px 2px 0px var(--neon-magenta);

    /* Add the glitch animation */
    animation: border-glitch 0.3s infinite linear alternate;
}

/* ─── BINARY CODE TITLE OVERLAY ──────────────────────────────────────────── */
.binary-title-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    /* Above text fill but below interaction if any */
    overflow: visible;
    /* Allow "emanating" effect if we animate positions later */
}

.binary-digit {
    position: absolute;
    font-family: var(--font-display);
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
    user-select: none;
    animation: digit-steam 2s infinite linear;
    /* Steam rises continuously */
}

@keyframes digit-steam {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
        text-shadow: 0 0 2px var(--neon-cyan);
    }

    20% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) translateX(var(--drift-x, 0));
        /* Rise up and drift */
        text-shadow: 0 0 10px var(--neon-cyan);
    }
}

/* ─── TYPEWRITER CURSOR ──────────────────────────────────────────────────── */
.typing-cursor {
    display: inline-block;
    color: var(--neon-magenta);
    text-shadow: var(--glow-magenta);
    margin-left: 2px;
    animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ─── CUSTOM CURSOR ──────────────────────────────────────────────────────── */
@media (pointer: fine) {

    html,
    body,
    button,
    a,
    * {
        cursor: none !important;
        /* Hide default cursor */
    }
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 18px;
    pointer-events: none;
    z-index: 99999;
    /* Pixel art scaling */
    image-rendering: pixelated;

    /* Frame 1: Arms Down (Cyan) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath fill='%230ff' d='M2 0h1v1H2zm6 0h1v1H8zM0 1h1v1H0zm2 1h1v1H2zm6 1h1v1H8zm2-1h1v1h-1zM2 2h7v1H2zm-1 1h2v1H1zm3 0h3v1H4zm5 0h2v1H9zM0 4h11v1H0zm0 1h1v2H0zm2 0h7v1H2zm9 0h1v2h-1zM2 6h1v2H2zm6 0h1v2H8zm-5 0h1v1H3zm3 0h1v1H6z'/%3E%3C/svg%3E");
    background-size: cover;

    /* Glow */
    filter: drop-shadow(0 0 5px var(--neon-cyan));

    /* Animation: Step between frames */
    animation: invader-move 0.8s steps(1) infinite;

    /* Center the cursor on the mouse point */
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, filter 0.2s;
}

/* Frame 2: Arms Up Animation */
@keyframes invader-move {
    50% {
        /* Frame 2: Arms Up (Cyan) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath fill='%230ff' d='M2 0h1v1H2zm6 0h1v1H8zM0 2h1v1H0zm10 0h1v1h-1zM2 1h1v1H2zm6 0h1v1H8zM2 2h7v1H2zm-1 1h2v1H1zm3 0h3v1H4zm5 0h2v1H9zM0 4h11v1H0zm1 1h1v1H1zm9 0h1v1h-1zM2 5h1v1H2zm6 0h1v1H8zm-4 1h3v1H4z'/%3E%3C/svg%3E");
    }
}

/* Hover State: Magenta Color */
.custom-cursor.hover {
    filter: drop-shadow(0 0 8px var(--neon-magenta)) hue-rotate(300deg);
    /* Shift Cyan (180) to Magenta (300) approx */
}

/* Active/Click State: Shrink */
.custom-cursor.active {
    transform: translate(-50%, -50%) scale(0.8);
}

/* ─── PHANTOM INVADER ────────────────────────────────────────────────────── */
/* ─── PHANTOM INVADER ────────────────────────────────────────────────────── */
.phantom-invader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    cursor: crosshair;
    z-index: 999;
    /* Brighter visibility */
    opacity: 0.6;

    /* Pixel art scaling */
    image-rendering: pixelated;

    /* Frame 1: Legs Open (Squid) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath fill='%230ff' d='M3 0h5v1H3zm-1 1h7v1H2zm-1 1h9v1H1zm0 1h2v1H1zm7 0h2v1H8zm-8 1h11v1H0zm0 1h1v2H0zm2 0h7v1H2zm9 0h1v2h-1zM2 6h1v2H2zm8 0h1v2h-1zM4 6h3v1H4z'/%3E%3C/svg%3E");
    background-size: cover;

    /* Glow */
    filter: drop-shadow(0 0 10px var(--neon-cyan)) blur(0.5px);

    /* Frame Animation */
    animation: phantom-wiggle 0.3s steps(1) infinite;

    /* JS controls transform now, so no transition on movement needed for physics loop */
    transition: opacity 1s ease-out;
}

/* CRT Scanline Overlay for Phantom */
.phantom-invader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Horizontal scanlines */
    background: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 2px,
            rgba(0, 0, 0, 0.3) 3px,
            rgba(0, 0, 0, 0.3) 4px);
    opacity: 0.7;
    pointer-events: none;
}

@keyframes phantom-wiggle {

    0%,
    100% {
        /* Frame 1: Legs Open */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath fill='%230ff' d='M3 0h5v1H3zm-1 1h7v1H2zm-1 1h9v1H1zm0 1h2v1H1zm7 0h2v1H8zm-8 1h11v1H0zm0 1h1v2H0zm2 0h7v1H2zm9 0h1v2h-1zM2 6h1v2H2zm8 0h1v2h-1zM4 6h3v1H4z'/%3E%3C/svg%3E");
    }

    50% {
        /* Frame 2: Legs Closed */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath fill='%230ff' d='M3 0h5v1H3zm-1 1h7v1H2zm-1 1h9v1H1zm0 1h2v1H1zm7 0h2v1H8zm-8 1h11v1H0zm0 1h1v2H0zm2 0h1v2H2zm6 0h1v2H8zm2 0h1v2h-1zM3 6h2v1H3zm4 0h2v1H6z'/%3E%3C/svg%3E");
    }
}

/* ─── PHANTOM SKULL VARIANT ───────────────────────────────────────────────── */
.phantom-skull {
    /* Use animation to override base phantom animation */
    animation: phantom-skull-static 1s steps(1) infinite !important;
}

@keyframes phantom-skull-static {

    0%,
    100% {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath fill='%230ff' d='M3 0h6v1H3zm-1 1h8v1H2zm-1 1h10v1H1zm0 1h1v4H0zm11 0h1v4h-1zM1 6h1v2H1zm10 0h1v2h-1zM2 8h1v1H2zm9 0h1v1h-1zM3 9h6v2H3zm-1 2h1v2H2zm4 0h1v2H6zm4 0h1v2h-1zM3 11h1v2H3zm6 0h1v2H9zM0 12h2v1H0zm4 0h1v1H4zm3 0h1v1H7zm3 0h2v1h-2zM4 5h1v1H4zm3 0h1v1H7zM3 6h2v1H3zm4 0h2v1H7z'/%3E%3C/svg%3E");
    }
}

/* ─── PHANTOM EYE VARIANT ─────────────────────────────────────────────────── */
.phantom-eye {
    /* Large single eye sprite (open) */
    animation: phantom-blink 4s steps(1) infinite !important;
}

@keyframes phantom-blink {

    0%,
    85%,
    100% {
        /* Eye open */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%230ff' d='M4 0h6v1H4zm-2 1h10v1H2zm-1 1h12v2H1zm0 2h1v2H0zm13 0h1v2h-1zM1 5h1v2H1zm12 0h1v2h-1zM2 7h10v1H2zM4 8h6v1H4zM5 2h4v1H5zM4 3h6v1H4zM5 4h4v2H5zM6 4h2v1H6z'/%3E%3Cpath fill='%23000' d='M6 4h2v1H6z'/%3E%3C/svg%3E");
    }

    86%,
    89% {
        /* Eye closed (horizontal line) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%230ff' d='M4 4h6v2H4z'/%3E%3C/svg%3E");
    }
}

/* ─── PHOTO INTERACTION TOOLTIPS ─────────────────────────────────────────── */
.about-image-wrapper {
    position: relative;
    /* Ensure wrapper is the anchor */
    overflow: visible;
    /* Allow tooltip to go outside */
}

.photo-tooltip {
    position: absolute;
    bottom: 115%;
    /* Distinctly above the image */
    left: 50%;
    transform: translateX(-50%);
    background: #050505;
    color: var(--neon-magenta);
    border: 2px solid var(--neon-magenta);
    padding: 10px 15px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 9999;
    /* Force on top of EVERYTHING */
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    border-radius: 4px;

    /* Animation */
    animation: tooltip-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom center;
    animation: tooltip-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom center;
}

/* Angry Tooltip Variant */
.photo-tooltip.angry {
    border-color: #ff0055;
    color: #ff0055;
    box-shadow: 0 0 20px #ff0055;
    background: #1a0005;
    font-weight: bold;
    font-size: 1.1rem;
    z-index: 10000;
}

.photo-tooltip.angry::after {
    border-color: #ff0055 transparent transparent transparent;
}

/* Tooltip Arrow */
.photo-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--neon-magenta) transparent transparent transparent;
}

@keyframes tooltip-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }

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

/* ─── GAME OF LIFE (THINGS.HTML) ─────────────────────────────────────────── */
.life-section {
    padding: 2rem 5%;
    text-align: center;
}

.life-controls {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.canvas-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    background: #000;
}

#life-grid {
    display: block;
    width: 100%;
    cursor: crosshair;
}

.life-instructions {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-family: var(--font-accent);
}

.neon-btn {
    background: transparent;
    border: 2px solid var(--neon-magenta);
    color: var(--neon-magenta);
    padding: 10px 25px;
    font-family: var(--font-display);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    letter-spacing: 1px;
}

.neon-btn:hover {
    background: var(--neon-magenta);
    color: #000;
    box-shadow: 0 0 15px var(--neon-magenta);
}

/* Variant for Start button */
#life-start.neon-btn {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

#life-start.neon-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 15px var(--neon-cyan);
}

/* ─── TOASTY EASTER EGG ──────────────────────────────────────────────────── */
#toasty-guy {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    height: auto;
    z-index: 9999;
    transform: translate(100%, 100%);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

#toasty-guy.show-toasty {
    transform: translate(0, 0);
}

/* ─── HOLY WATER EASTER EGG ──────────────────────────────────────────────── */
.holy-water-bottle {
    position: fixed;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background-image: url('Assets/HolyWater.png');
    background-size: 800px 100px;
    background-position: 0 0;
    z-index: 10000;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px var(--neon-cyan));
}

.holy-water-bottle.dropping {
    animation: bottle-drop 1s ease-in forwards;
}

.holy-water-bottle.breaking {
    animation: bottle-break 2s steps(7) forwards;
}

@keyframes bottle-drop {
    to {
        top: 50vh;
        transform: translateX(-50%) translateY(-50%);
    }
}

@keyframes bottle-break {
    0% {
        background-position: 0 0;
    }

    12.5% {
        background-position: -100px 0;
    }

    25% {
        background-position: -200px 0;
    }

    37.5% {
        background-position: -300px 0;
    }

    50% {
        background-position: -400px 0;
    }

    62.5% {
        background-position: -500px 0;
    }

    75% {
        background-position: -600px 0;
    }

    87.5% {
        background-position: -700px 0;
    }

    100% {
        background-position: -700px 0;
        opacity: 0;
    }
}

.screen-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    transition: opacity 0.1s ease-out;
}

.screen-flash.active {
    opacity: 1;
    transition: opacity 0.02s ease-in, opacity 0.15s ease-out 0.02s;
}

.phantom-invader.fleeing {
    animation: phantom-flee 0.8s ease-out forwards;
}

@keyframes phantom-flee {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.5) translateY(-100px);
    }

    100% {
        opacity: 0;
        transform: scale(0) translateY(-200px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   WOLOLO EASTER EGG
   ═══════════════════════════════════════════════════════════════════════ */
.wololo-mode {
    filter: invert(1) hue-rotate(180deg);
    /* Invert and preserve some color relationships */
    transition: filter 0.5s ease;
}

#wololo-shaman {
    /* Initial state handled inline in HTML, but animation class here */
    pointer-events: none;
}

.shaman-rise {
    animation: shamanRise 2s ease-out forwards;
}

@keyframes shamanRise {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.5);
    }

    20% {
        opacity: 1;
    }

    100% {
        /* Move UP 100px from starting point */
        transform: translateX(-50%) translateY(-100px) scale(1.5);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   UFO ABDUCTION EASTER EGG
   ═══════════════════════════════════════════════════════════════════════ */
.ufo-container {
    position: fixed;
    z-index: 100000;
    width: 100px;
    height: 100px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: ufoEnter 1s ease-out forwards;
}

.ufo-sprite {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px var(--neon-cyan));
    position: relative;
    z-index: 2;
    animation: ufoHover 2s ease-in-out infinite;
}

.ufo-beam {
    position: absolute;
    top: 50%;
    /* Starts from center/bottom of UFO */
    left: 50%;
    transform: translateX(-50%);
    width: 0px;
    /* Expands */
    height: 0px;
    /* Expands */
    background: linear-gradient(to bottom, rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0));
    z-index: 1;
    opacity: 0;
    transition: all 0.5s ease;
    border-radius: 50% 50% 0 0;
    /* Beam shape */
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.ufo-container.beaming .ufo-beam {
    width: 80px;
    height: 200px;
    /* Reach down to cursor */
    opacity: 0.8;
}

.ufo-container.flying-away {
    animation: ufoLeave 1s ease-in forwards;
}

/* Animations */
@keyframes ufoEnter {
    0% {
        top: -200px;
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    /* Top set by JS */
}

@keyframes ufoHover {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes ufoLeave {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(20deg) translateY(-100vh);
        opacity: 0;
    }
}

/* Cursor Abduction State */
.custom-cursor.abducted {
    transition: all 2s ease-in;
    transform: translate(-50%, -50%) scale(0) rotate(720deg) !important;
    filter: brightness(10) blur(5px);
    /* Gets beamed up */
}

/* ═══════════════════════════════════════════════════════════════════════
   SQUIRREL GHOST EASTER EGG
   ═══════════════════════════════════════════════════════════════════════ */
.squirrel-ghost {
    position: fixed;
    /* Physics controlled (top/left 0, transform handled by JS) */
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    z-index: 99999;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    cursor: pointer;

    /* Ghostly Effects */
    opacity: 0.8;
    filter: drop-shadow(0 0 10px var(--neon-magenta)) blur(0.5px);

    /* Animation: Only Wiggle (Movement is JS) */
    animation: squirrelWiggle 0.6s steps(1) infinite;

    transition: filter 0.3s, opacity 1s ease-out;
}

/* CRT Scanline Overlay */
.squirrel-ghost::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 2px,
            rgba(0, 0, 0, 0.3) 3px,
            rgba(0, 0, 0, 0.3) 4px);
    opacity: 0.6;
    pointer-events: none;
}

.squirrel-ghost:hover {
    filter: drop-shadow(0 0 20px var(--neon-cyan));
    transform: scale(1.1);
    /* JS handles X/Y, this might conflict. Ideally apply scale to inner element or filter */
}

/* Wiggle Animation Frames */
/* Wiggle Animation Frames: Idle Tail Wag */
@keyframes squirrelWiggle {

    0%,
    100% {
        /* Frame 1: Idle (Standard) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff00ff' d='M5 2h3v1h1v1h-1v1h-1v2h-1v1h-1v1h-1v1H3v1h1v-1h3v-1h2v-1h1v-1h1v-1h1v-1h-1v-1h-1V3h-1V2H5zM2 9h2v1H2v3h2v1h3v-1H6v-1h2v1h3v-1h1v-2h-1V8h-1V7h-2v2H8v1H5V9H2z'/%3E%3C/svg%3E");
    }

    50% {
        /* Frame 2: Tail Wag (Fixed Typo) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff00ff' d='M5 3h3v1h1v1h-1v1h-1v2h-1v1h-1v1h-1v1H3v1h1v-1h3v-1h2v-1h1v-1h1v-1h1v-1h-1v-1h-1V4h-1V3H5zM2 9h2v1H2v3h2v1h3v-1H6v-1h2v1h3v-1h1v-2h-1V8h-1V7h-2v2H8v1H5V9H2z'/%3E%3C/svg%3E");
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   NEON RAIN
   ═══════════════════════════════════════════════════════════════════════ */
#neon-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Above hero gradient (1), behind content (10) */
    pointer-events: none;
    opacity: 0;
    /* Default hidden, JS handles fade in */
    transition: opacity 2s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════════
   MESSAGING / CTA
   ═══════════════════════════════════════════════════════════════════════ */
.cta-button {
    display: inline-block;
    margin-top: 50px;
    /* More space from menu */
    padding: 12px 25px;
    /* Smaller */
    font-family: var(--font-heading);
    font-size: 1.1rem;
    /* Smaller font */
    color: #fff;
    background-color: transparent;
    border: 2px solid var(--neon-pink);
    box-shadow: 0 0 15px var(--neon-pink), inset 0 0 15px var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 100;
    overflow: hidden;
    /* For flare */
}

/* Anamorphic Lens Flare Animation */
.cta-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(0, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.1) 80%,
            transparent);
    transform: skewX(-20deg);
    animation: anamorphic-flare 3s infinite linear;
    pointer-events: none;
}

@keyframes anamorphic-flare {
    0% {
        left: -150%;
    }

    20% {
        left: 150%;
    }

    /* Fast pass */
    100% {
        left: 150%;
    }

    /* Wait */
}

.cta-button:hover {
    background-color: var(--neon-pink);
    color: #000;
    box-shadow: 0 0 40px var(--neon-pink), 0 0 80px var(--neon-pink);
    /* Intense glow */
    text-shadow: none;
    transform: scale(1.05);
    /* Slight grow */
}

.cta-button:active {
    transform: scale(0.95);
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOOKING PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.booking-options {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.booking-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--neon-cyan);
    padding: 20px;
    color: var(--neon-cyan);
    text-decoration: none;
    transition: all 0.3s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    /* Sci-Fi Corner Cut */
}

.booking-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px var(--neon-cyan);
    transform: translateX(10px);
}

.booking-btn .btn-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin: 10px 0 5px;
}

.booking-btn .btn-sub {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.booking-btn .btn-icon {
    font-size: 2rem;
}

/* Square Specific */
.square-btn {
    border-color: var(--neon-magenta);
    color: var(--neon-magenta);
}

.square-btn:hover {
    background: rgba(255, 0, 255, 0.1);
    box-shadow: 0 0 20px var(--neon-magenta);
}

/* ═══════════════════════════════════════════════════════════════════════
   RETRO SHOOTER EASTER EGG
   ═══════════════════════════════════════════════════════════════════════ */
.retro-shooter {
    position: fixed;
    bottom: 20px;
    left: -350px;
    /* Start off-screen LEFT */

    /* CROP STRATEGY:
       Frame Width assumed ~300px based on aspect.
       Container Width < Frame Width to crop right edge bleed.
    */
    width: 240px;
    /* 60px narrower than frame to hide bleed */
    height: 600px;
    /* Tall scale */

    background-image: url('Assets/shooter.png');
    background-repeat: no-repeat;

    /* Fixed Frame Scale: 6 frames * 300px = 1800px */
    background-size: 1800px 100%;

    image-rendering: pixelated;
    z-index: 100;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Slide In State (Slides Right) */
.retro-shooter.enter {
    transform: translateX(400px);

    /* Pixel-based animation for precision */
    /* 0px to -1500px covers the 6 frames (0, -300, -600, -900, -1200, -1500) */
    animation: shoot-cycle-pixels 0.8s steps(5) infinite alternate 0.5s;
}

/* Slide Out State */
.retro-shooter.exit {
    transform: translateX(-400px);
}

@keyframes shoot-cycle-pixels {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -1500px 0;
    }
}

/* Contact Specific */
.contact-btn {
    border-color: var(--neon-yellow);
    color: var(--neon-yellow);
}

.contact-btn:hover {
    background: rgba(255, 252, 0, 0.1);
    box-shadow: 0 0 20px var(--neon-yellow);
}


/* Ensure content sits above rain */
.hero-content,
.main-nav,
.section-content,
.footer {
    position: relative;
    z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCREENSAVER MODE
   ═══════════════════════════════════════════════════════════════════════ */
/* When active, content fades out, but Background/Canvas stays visible */
body.screensaver-active .hero-content,
body.screensaver-active .main-nav,
body.screensaver-active .section-content,
body.screensaver-active .footer,
body.screensaver-active .custom-cursor,
body.screensaver-active #toasty-guy {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
    /* Prevent clicks while hidden */
}

/* Ensure body doesn't flash white or anything during transition */
body {
    transition: background-color 1s;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCREENSAVER MODE
   ═══════════════════════════════════════════════════════════════════════ */
/* When active, content fades out, but Background/Canvas stays visible */
body.screensaver-active .hero-content,
body.screensaver-active .main-nav,
body.screensaver-active .section-content,
body.screensaver-active .footer,
body.screensaver-active .custom-cursor,
body.screensaver-active #toasty-guy {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
    /* Prevent clicks while hidden */
}

/* Ensure body doesn't flash white or anything during transition */
body {
    transition: background-color 1s;
}

/* ═══════════════════════════════════════════════════════════════════════
   MEDUSA EASTER EGG (LIGHTNING)
   ═══════════════════════════════════════════════════════════════════════ */
.lightning-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    animation: lightning 0.8s ease-out forwards;
}

@keyframes lightning {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    /* FLASH! */
    15% {
        opacity: 0.1;
    }

    25% {
        opacity: 0.8;
    }

    /* Aftershock */
    100% {
        opacity: 0;
    }
}

.crimson-tint::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* Stronger Tint + Vignette */
    background: radial-gradient(circle, rgba(255, 0, 0, 0.1) 0%, rgba(139, 0, 0, 0.4) 60%, rgba(50, 0, 0, 0.95) 100%);
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.6);

    mix-blend-mode: hard-light;
    /* Intense bleeding effect */
    pointer-events: none;
    z-index: 9000;
    animation: pulse-red 1.5s infinite alternate ease-in-out;
    will-change: opacity;
}

@keyframes pulse-red {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 0.7;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOOD TEXT EFFECT (Refined)
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   BLOOD TEXT EFFECT (Refined)
   ═══════════════════════════════════════════════════════════════════════ */
.blood-text {
    position: relative;
    /* 1. STOP the blue flicker animation */
    animation: none !important;

    /* 2. OVERRIDE BLUE SCANLINES WITH RED SCANLINES (Crucial Fix) */
    background: repeating-linear-gradient(to bottom,
            #ff0000 0px,
            #ff0000 3px,
            rgba(255, 0, 0, 0.5) 3px,
            rgba(255, 0, 0, 0.5) 6px) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    /* 3. ETHEREAL BLEND */
    mix-blend-mode: hard-light;
    opacity: 0.95;

    /* 4. ANIMATION SEQUENCE */
    /* Intro: Fade in from nothing (1s) */
    /* Pulse: Breathe between subtle and strong (Forever, starting after 1s) */
    animation:
        blood-intro 1s ease-in-out forwards,
        blood-pulse 3s infinite alternate ease-in-out 1s !important;

    transition: all 1s ease-in-out;
}

@keyframes blood-intro {
    0% {
        opacity: 0;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0);
    }

    100% {
        opacity: 0.95;
        text-shadow:
            0 0 5px rgba(255, 0, 0, 0.6),
            0 0 15px rgba(255, 0, 0, 0.3);
    }
}

@keyframes blood-pulse {
    0% {
        /* Subtle State (The "Low" point) */
        text-shadow:
            0 0 5px rgba(255, 0, 0, 0.6),
            0 0 15px rgba(255, 0, 0, 0.3);
    }

    100% {
        /* Intense State (The "High" point) */
        text-shadow:
            0 0 10px rgba(255, 0, 0, 0.9),
            0 0 30px rgba(255, 0, 0, 0.7),
            0 0 50px rgba(100, 0, 0, 0.5);
    }
}

/* HIGHLY OPTIMIZED FOR MOBILE */
@keyframes blood-pulse-mobile {
    0% {
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.6);
    }

    100% {
        text-shadow: 0 0 12px rgba(255, 0, 0, 0.9);
    }
}

/* The Blood Overlay - Masked to Text */
.blood-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* The Dripping Blood Texture */
    background: url('Assets/blood_drips.png') repeat-x;
    background-size: 80px 100%;
    background-position: 0 -100px;

    /* Masking Magic */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Visuals */
    text-shadow: none;
    opacity: 0;
    z-index: 5;
    pointer-events: none;

    /* Animation */
    animation: blood-drip-fill 4s ease-out forwards;
}

/* The Top Splash Overlay - Masked to Text */
.blood-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Random Spots */
    background-image:
        url('Assets/snes_blood_splash.gif'),
        url('Assets/snes_blood_splash.gif'),
        url('Assets/snes_blood_splash.gif'),
        url('Assets/snes_blood_splash.gif');

    /* Position LOW enough to hit text (25%-40%) */
    background-position:
        15% 25%,
        75% 35%,
        40% 30%,
        90% 28%;

    background-repeat: no-repeat;

    /* Vary Sizes */
    background-size:
        60px 60px,
        50px 50px,
        70px 70px,
        55px 55px;

    /* Visual Pop */
    filter: brightness(1.5) drop-shadow(0 0 2px #ff0000);

    /* Masking Magic */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    opacity: 0;
    z-index: 6;
    pointer-events: none;

    /* Animation */
    animation: blood-splash-impact 0.5s ease-out 0.8s forwards;
}

@keyframes blood-drip-fill {
    0% {
        opacity: 0;
        background-position: 0 -150px;
        filter: brightness(2);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        background-position: 0 0;
    }
}

@keyframes blood-splash-impact {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOONLIGHT TAGLINE EFFECT
   ═══════════════════════════════════════════════════════════════════════ */
.moonlight-text {
    /* Override standard magenta colors */
    color: #aaccff !important;
    text-shadow:
        0 0 10px #4da6ff,
        0 0 20px #0055aa,
        0 0 40px #002244 !important;
    transition: all 1s ease;

    /* Stop any existing animation to let the color persist */
    animation: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BINARY DIGIT OVERRIDE (BLOOD MODE)
   ═══════════════════════════════════════════════════════════════════════ */
.blood-text .binary-digit {
    color: #ff0000 !important;
    text-shadow: 0 0 5px #ff0000 !important;
    opacity: 0.8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SQUIRREL GHOST EASTER EGG
   ═══════════════════════════════════════════════════════════════════════ */
.squirrel-ghost {
    position: fixed;
    width: 120px;
    height: 120px;
    background-image: url('Assets/squirrel_ghost.gif');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9999;
    cursor: pointer;
    /* Floating Animation */
    animation: squirrel-float 2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 10px var(--neon-magenta));
    pointer-events: auto;
}

@keyframes squirrel-float {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOOD MODE VIGNETTE
   ═══════════════════════════════════════════════════════════════════════ */
.crimson-tint::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(255, 0, 0, 0.2) 85%, rgba(200, 0, 0, 0.9) 100%);
    pointer-events: none;
    z-index: 9000;
    /* High but below overlays */
    animation: vignette-pulse 4s infinite alternate;
    will-change: opacity;
}

@keyframes vignette-pulse {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0.8;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOOD MOON RISE
   ═══════════════════════════════════════════════════════════════════════ */
.blood-moon-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    /* Wider than moon to prevent glow clipping */
    height: 800px;
    bottom: 87%;
    /* Tiny bit higher (87%) */

    display: flex;
    /* Center the moon */
    justify-content: center;
    align-items: flex-end;
    /* Align to bottom initially */

    z-index: -1;
    /* Behind Text */
    overflow: hidden;
    /* THE MASK */
    pointer-events: none;

    /* Soften the rise edge */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 15%);
    mask-image: linear-gradient(to top, transparent 0%, black 15%);

    animation: moon-wrapper-fade 2s ease-out forwards;
    /* Soften the rise edge */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 15%);
    mask-image: linear-gradient(to top, transparent 0%, black 15%);

    animation: moon-wrapper-fade 2s ease-out forwards;
    transition: opacity 0.5s ease-out;
}

.blood-moon {
    width: 450px;
    /* Fixed size inside wider wrapper */
    height: auto;
    filter: drop-shadow(0 0 60px #ff0000);

    transform: translateY(100%);
    animation: blood-moon-rise 25s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════════════════
   JUMP SCARE (System Crash)
   ═══════════════════════════════════════════════════════════════════════ */
.do-not-press-btn {
    position: fixed;
    z-index: 9999;
    padding: 15px 30px;
    background: linear-gradient(135deg, #ff0000 0%, #500000 100%);
    color: #fff;
    border: 2px solid #ff3333;
    font-family: 'VCR', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0000;
    cursor: pointer;
    box-shadow:
        0 0 20px rgba(255, 0, 0, 0.6),
        inset 0 0 20px rgba(255, 0, 0, 0.4);
    animation: hazard-pulse 0.8s infinite alternate;
    overflow: hidden;
    /* clip-path removed per user request */
    border-radius: 6px;
    letter-spacing: 2px;
}

.do-not-press-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(0, 0, 0, 0.1) 10px,
            rgba(0, 0, 0, 0.1) 20px);
    animation: hazard-stripe-move 2s linear infinite;
    z-index: -1;
}

.do-not-press-btn:hover {
    background: #ff0000;
    box-shadow: 0 0 60px #ff0000, 0 0 100px #ff0000;
    text-shadow: 0 0 10px #fff;
}

@keyframes hazard-pulse {
    from {
        transform: scale(1);
        box-shadow: 0 0 20px #ff0000;
        border-color: #ff3333;
    }

    to {
        transform: scale(1.05);
        box-shadow: 0 0 40px #ff0000, 0 0 70px #ff0000;
        border-color: #fff;
    }
}

@keyframes hazard-stripe-move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Crash Overlay */
.system-crash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: crash-flash 0.1s infinite;
}

.crash-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.crash-skull {
    width: 300px;
    image-rendering: pixelated;
    animation: glitch-anim-1 0.2s infinite linear alternate-reverse;
}

.crash-text {
    color: #ff0000;
    font-family: 'VCR', monospace;
    font-size: 4rem;
    text-align: center;
    text-shadow: 5px 0 #fff, -5px 0 #0000ff;
    animation: glitch-anim-2 0.3s infinite linear alternate-reverse;
}

/* Body Distortion */
body.crash-active {
    filter: invert(1) contrast(300%);
    animation: violent-shake 0.1s infinite;
    overflow: hidden;
}

/* Glitch Animations */
@keyframes violent-shake {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }

    50% {
        transform: translate(20px, -20px) rotate(5deg);
    }

    75% {
        transform: translate(-20px, -20px) rotate(-5deg);
    }

    100% {
        transform: translate(20px, 20px) rotate(5deg);
    }
}

@keyframes crash-flash {
    0% {
        background: #000;
    }

    50% {
        background: #1a0000;
    }

    100% {
        background: #330000;
    }
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
        transform: translate(-10px, 5px);
    }

    20% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(10px, -5px);
    }

    40% {
        clip-path: inset(10% 0 50% 0);
        transform: translate(-5px, 10px);
    }

    60% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(5px, -10px);
    }

    80% {
        clip-path: inset(30% 0 20% 0);
        transform: translate(10px, 10px);
    }

    100% {
        clip-path: inset(10% 0 60% 0);
        transform: translate(-10px, -10px);
    }
}

@keyframes glitch-anim-2 {
    0% {
        text-shadow: 5px 0 #fff, -5px 0 #0000ff;
    }

    50% {
        text-shadow: -5px 0 #00ff00, 5px 0 #ff00ff;
    }

    100% {
        text-shadow: 5px 2px #fff, -5px -2px #0000ff;
    }
}

/* CRT Turn Off Animation */
@keyframes crt-off {
    0% {
        transform: scale(1, 1);
        filter: brightness(1);
    }

    40% {
        transform: scale(1, 0.005);
        filter: brightness(5);
    }

    80% {
        transform: scale(0, 0.005);
    }

    100% {
        transform: scale(0, 0);
    }
}

.crt-turn-off {
    animation: crt-off 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Final Black Void */
.black-void {
    background: #000 !important;
}

.final-message-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'VCR', monospace;
    font-size: 3rem;
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000;
    z-index: 20000;
    white-space: nowrap;
}

.typing-cursor-red {
    display: inline-block;
    width: 15px;
    height: 3rem;
    background: #ff0000;
    animation: blink 0.5s infinite;
    vertical-align: sub;
    margin-left: 5px;
}

@keyframes moon-wrapper-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes blood-moon-rise {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
        /* Lowered "a tad" from -10% */
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   GUESTBOOK / COMMENT SECTION (WordPress Cyberpunk Style)
   ═══════════════════════════════════════════════════════════════════════ */
.guestbook-section {
    padding: 60px 20px;
    background: #050505;
    border-top: 1px solid #333;
}

.guestbook-container {
    max-width: 800px;
    margin: 0 auto;
}

.comment-header {
    margin-bottom: 40px;
    border-bottom: 2px solid var(--neon-cyan);
    padding-bottom: 10px;
}

.signal-text {
    font-family: 'VCR', monospace;
    color: var(--neon-cyan);
    font-size: 1.2rem;
    text-shadow: 0 0 5px var(--neon-cyan);
}

/* Comment List */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 20, 40, 0.4);
    border-left: 3px solid var(--neon-purple);
    transition: all 0.3s ease;
}

.comment-item:hover {
    background: rgba(0, 20, 40, 0.7);
    border-left-color: var(--neon-cyan);
    box-shadow: -5px 0 10px rgba(0, 255, 255, 0.2);
}

/* Avatar (Hexagon Style) */
.comment-avatar {
    flex-shrink: 0;
}

.avatar-hex {
    width: 60px;
    height: 60px;
    position: relative;
    background: var(--neon-purple);
    /* Acts as Border */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Inner Background (The "Hole") */
.avatar-hex::before {
    content: "";
    position: absolute;
    inset: 2px;
    /* Border Thickness */
    background: linear-gradient(135deg, #444, #111);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

/* Icon / Content */
.avatar-hex::after {
    content: "👤";
    font-size: 1.5rem;
    filter: grayscale(1);
    z-index: 2;
}

/* Body */
.comment-body {
    flex-grow: 1;
}

.comment-meta {
    margin-bottom: 10px;
    font-family: 'VCR', monospace;
    font-size: 0.9rem;
    color: #888;
}

.comment-author {
    color: var(--neon-magenta);
    font-weight: bold;
    font-size: 1.1rem;
    margin-right: 10px;
}

.comment-date {
    color: #666;
}

.comment-content p {
    color: #ddd;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
}

/* Actions */
.comment-actions {
    margin-top: 15px;
}

.reply-btn {
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    padding: 5px 15px;
    font-family: 'VCR', monospace;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.reply-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan);
}

/* Comment Form (Terminal Style) */
/* Comment Form (Cyberpunk HUD Style) */
.comment-respond {
    margin-top: 60px;
    padding: 30px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-left: 5px solid var(--neon-cyan);
    background: linear-gradient(135deg, rgba(0, 20, 20, 0.9), rgba(0, 0, 0, 0.95));
    position: relative;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.05);
}

.comment-respond::before {
    content: "SECURE_CHANNEL_ESTABLISHED // ENCRYPTION: ON";
    position: absolute;
    top: -10px;
    right: 10px;
    font-family: 'VCR', monospace;
    font-size: 0.7rem;
    color: var(--neon-cyan);
    background: #000;
    padding: 0 10px;
}

.respond-title {
    color: #fff;
    font-family: 'VCR', monospace;
    margin-bottom: 25px;
    padding-left: 0;
    border-left: none;
    text-shadow: 0 0 5px var(--neon-cyan);
    letter-spacing: 2px;
}

.form-row {
    margin-bottom: 25px;
    position: relative;
}

/* Cyberpunk Inputs */
.comment-form input,
.comment-form textarea {
    width: 100%;
    background: rgba(0, 10, 10, 0.8);
    border: 1px solid #336666;
    color: var(--neon-green);
    font-family: 'VCR', monospace;
    /* More techy than Courier */
    padding: 15px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s;

    /* Scanline Background Texture */
    background-image: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 0, 0.05) 3px,
            transparent 3px);
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: #336666;
    opacity: 0.7;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--neon-green);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2), inset 0 0 10px rgba(0, 255, 0, 0.1);
    background-color: rgba(0, 20, 10, 0.9);
}

/* Corner Decorations for Input Containers */
.form-row::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--neon-green);
    border-right: 2px solid var(--neon-green);
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.form-row:hover::after {
    opacity: 1;
}

.comment-form textarea {
    height: 120px;
    resize: vertical;
}

/* Glitch Button */
.submit-btn {
    background: var(--neon-purple);
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-family: 'VCR', monospace;
    font-size: 1.2rem;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
}

.submit-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    /* Contrast */
    box-shadow: 0 0 20px var(--neon-cyan);
    text-shadow: none;
}

.submit-btn:hover::before {
    left: 100%;
    /* Sweep effect */
}

.submit-btn.success {
    background: var(--neon-green) !important;
    color: #000 !important;
    box-shadow: 0 0 30px var(--neon-green);
}

/* ═══════════════════════════════════════════════════════════════════════
   GOOGLE CALENDAR MONITOR
   ═══════════════════════════════════════════════════════════════════════ */
.calendar-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    perspective: 1000px;
}

.monitor-frame {
    position: relative;
    padding: 10px;
    background: #000;
    border: 4px solid #336666;
    /* Dark Cyan Frame */
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.1);
    border-bottom: 20px solid #1a3333;
    /* Thick chin */
    overflow: hidden;
}

/* Tech Decoration on Chin */
.monitor-frame::after {
    content: "AVAILABILITY_MATRIX // EXT_LINK";
    position: absolute;
    bottom: 4px;
    right: 15px;
    font-family: 'VCR', monospace;
    font-size: 0.7rem;
    color: var(--neon-cyan);
    opacity: 0.7;
    pointer-events: none;
}

/* Make White Calendar Dark via Filters */
.monitor-frame iframe {
    width: 100%;
    height: 600px;
    /* Taller for mobile */
    filter: invert(0.92) hue-rotate(180deg) contrast(1.1);
    /* Inverts white to dark/black, shifts blue to orange, then we hue-rotate back approx */
    /* Adjust hue-rotate as needed to get desired accent colors */
    border-radius: 4px;
    position: relative;
    z-index: 2;
    /* Above loader */
}

/* Loading State ( Behind Iframe ) */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
    border-top: 3px solid var(--neon-cyan);
    border-right: 3px solid var(--neon-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.loading-text {
    font-family: 'VCR', monospace;
    color: var(--neon-green);
    font-size: 1rem;
    animation: blink 0.5s infinite alternate;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .monitor-frame iframe {
        height: 500px;
    }
}

/* ─── CUSTOM SYNTHWAVE CALENDAR ──────────────────────────────────────────── */
.calendar-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: rgba(10, 10, 26, 0.8);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--neon-cyan);
    padding-bottom: 10px;
}

#current-month-year {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--neon-magenta);
    text-shadow: var(--glow-magenta);
    margin: 0;
    /* Override h2 margin */
    min-width: 250px;
    text-align: center;
}

.cal-nav-btn {
    background: transparent;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: var(--font-display);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 15px;
    transition: all 0.3s ease;
}

.cal-nav-btn:hover {
    background: var(--neon-cyan);
    color: var(--dark-void);
    box-shadow: 0 0 15px var(--neon-cyan);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    flex-grow: 1;
}

.cal-day-header {
    text-align: center;
    font-family: var(--font-accent);
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding-bottom: 10px;
}

.cal-day {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    min-height: 80px;
    padding: 5px;
    transition: all 0.3s ease;
}

.cal-day:hover {
    border-color: var(--neon-purple);
    background: rgba(123, 47, 255, 0.1);
}

.cal-day.today {
    border: 1px solid var(--neon-cyan);
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2);
}

.cal-day.today .cal-date-num {
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
    font-weight: bold;
}

.cal-date-num {
    position: absolute;
    top: 5px;
    left: 8px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* BUSY INDICATOR */
.busy-bar {
    margin-top: 25px;
    /* Space for date number */
    height: 8px;
    width: 90%;
    margin-left: 5%;
    background: var(--neon-magenta);
    box-shadow: 0 0 8px var(--neon-magenta);
    border-radius: 2px;
    margin-bottom: 4px;
    /* Space between multiple events */
    position: relative;
    overflow: hidden;
}

/* Scanline effect on busy bar */
.busy-bar::after {
    content: "BUSY";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-accent);
    font-size: 6px;
    color: #fff;
    line-height: 8px;
    text-align: center;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Mobile responsiveness for calendar */
@media (max-width: 600px) {
    .cal-day {
        min-height: 50px;
    }

    .busy-bar {
        height: 6px;
        margin-top: 20px;
    }

    .busy-bar::after {
        display: none;
        /* Hide text on small screens */
    }
}

/* ─── COMMENT REPLIES ────────────────────────────────────────────────────── */
.reply-list {
    margin-left: 50px;
    margin-top: 15px;
    padding-left: 15px;
    border-left: 2px solid var(--neon-purple);
}

.reply-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--neon-purple);
    font-size: 0.9rem;
}

.reply-author {
    color: var(--neon-pink);
    font-weight: bold;
    margin-right: 10px;
}

.reply-content {
    color: var(--text-secondary);
}

.reply-date {
    display: block;
    font-size: 0.7rem;
    color: #555;
    margin-top: 5px;
}

.reply-input {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 5px;
    margin-right: 5px;
    font-family: var(--font-accent);
}

/* ─── CRYPTO TERMINAL ────────────────────────────────────────────────────── */
.crypto-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.crypto-modal.active {
    display: flex;
}

.terminal-content {
    background: rgba(10, 10, 26, 0.95);
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1);
    padding: 30px;
    width: 90%;
    max-width: 500px;
    position: relative;
    /* Corner Accents */
    background-image:
        linear-gradient(to right, var(--neon-cyan) 2px, transparent 2px),
        linear-gradient(to bottom, var(--neon-cyan) 2px, transparent 2px);
    background-size: 20px 20px;
    background-position: top left;
    background-repeat: no-repeat;
}

.terminal-title {
    color: var(--neon-cyan);
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: 25px;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    text-shadow: 0 0 10px var(--neon-cyan);
    animation: none !important;
    border-bottom: 2px solid var(--neon-cyan);
    padding-bottom: 10px;
    width: 100%;
}

.close-terminal {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--neon-magenta);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.coin-selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.coin-btn {
    background: transparent;
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary);
    padding: 8px 15px;
    font-family: var(--font-accent);
    cursor: pointer;
    transition: all 0.3s ease;
}

.coin-btn.active,
.coin-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--dark-void);
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.qr-display {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    padding: 20px;
    background: #fff;
    /* White background for QR contrast */
    border: 2px solid var(--neon-cyan);
    width: 220px;
    margin: 0 auto 20px;
}

.address-box {
    margin-bottom: 20px;
}

.address-box label {
    display: block;
    color: var(--neon-magenta);
    font-family: var(--font-accent);
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.address-row {
    display: flex;
    gap: 10px;
}

#wallet-address {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 10px;
    font-family: monospace;
    font-size: 0.9rem;
}

.copy-btn {
    background: var(--neon-purple);
    border: none;
    color: #fff;
    padding: 0 20px;
    font-family: var(--font-accent);
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    box-shadow: 0 0 10px var(--neon-purple);
}

.terminal-status {
    text-align: center;
    font-size: 0.7rem;
    color: #555;
    font-family: monospace;
    border-top: 1px dashed #333;
    padding-top: 10px;
}

/* New Button Style for Booking Page */
.booking-btn.crypto-btn {
    border-color: var(--neon-purple);
    color: var(--neon-purple);
}

.booking-btn.crypto-btn:hover {
    background: rgba(123, 47, 255, 0.1);
    box-shadow: 0 0 20px var(--neon-purple);
}

.booking-btn.crypto-btn .btn-icon {
    text-shadow: 0 0 10px var(--neon-purple);
}

.network-badge {
    text-align: center;
    color: var(--neon-yellow);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding: 5px;
    border: 1px dashed var(--neon-yellow);
    text-shadow: 0 0 5px var(--neon-yellow);
    background: rgba(255, 252, 0, 0.1);
}

/* Phantom Death Glitch */
.glitch-death {
    animation: glitch-die 0.5s steps(5) forwards !important;
    pointer-events: none;
}

@keyframes glitch-die {
    0% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(0deg);
        opacity: 1;
    }

    20% {
        transform: scale(1.2) rotate(10deg) skewX(20deg);
        filter: invert(1);
        opacity: 0.8;
    }

    40% {
        transform: scale(0.8) rotate(-10deg) skewY(-10deg);
        filter: hue-rotate(90deg);
        opacity: 0.6;
    }

    60% {
        transform: scale(1.5) translate(10px, -10px);
        filter: contrast(200%);
        opacity: 0.4;
    }

    80% {
        transform: scale(0.5);
        filter: grayscale(1);
        opacity: 0.2;
    }

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

/* GHOST SCOREBOARD (CYBERPUNK HUD) */
#ghost-score {
    position: fixed;
    top: 20px;
    right: 20px;
    font-family: 'VCR', 'Courier New', monospace;
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 0 0 5px var(--neon-magenta), 0 0 10px var(--neon-magenta);
    z-index: 99999;
    pointer-events: none;

    /* HUDBox Style */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(20, 0, 20, 0.6));
    padding: 15px 25px;
    border: 2px solid var(--neon-magenta);
    border-radius: 4px;
    box-shadow:
        0 0 15px rgba(255, 0, 255, 0.3),
        inset 0 0 20px rgba(255, 0, 255, 0.1);

    /* Tech Accents */
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            0 100%);

    /* Scanlines */
    background-image: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(255, 0, 255, 0.1) 3px);
    transition: transform 0.1s;
}

#ghost-score::before {
    content: "WARNING: SPECTRAL ACTIVITY";
    display: block;
    font-size: 0.6rem;
    color: var(--neon-cyan);
    letter-spacing: 2px;
    margin-bottom: 5px;
    opacity: 0.8;
    text-shadow: none;
}

#ghost-score.score-update {
    animation: score-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes score-pop {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px var(--neon-magenta);
    }

    50% {
        transform: scale(1.2);
        text-shadow: 0 0 20px var(--neon-magenta), 0 0 40px #fff;
        color: #fff;
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 5px var(--neon-magenta);
    }
}

/* COMMENT IMAGE ATTACHMENTS */
.comment-image-attachment {
    margin-top: 10px;
    border-left: 2px solid var(--neon-magenta);
    padding-left: 10px;
}

.comment-image-attachment img {
    max-height: 100px;
    border: 1px solid #336666;
    border-radius: 4px;
    cursor: zoom-in;
    transition: all 0.2s;
}

.comment-image-attachment img:hover {
    box-shadow: 0 0 10px var(--neon-magenta);
}

/* Form Preview */
.comment-image-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 255, 255, 0.1);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px dashed var(--neon-cyan);
    font-family: 'VCR', monospace;
    font-size: 0.8rem;
    color: var(--neon-cyan);
}

.preview-thumb {
    height: 50px;
    width: auto;
    border: 1px solid var(--neon-cyan);
}

.clear-img-btn {
    background: transparent;
    border: none;
    color: var(--neon-red);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Lightbox Content Wrapper */
.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
    pointer-events: auto;
    /* Ensure clicks work */
}

/* Override existing lightbox img styles for this wrapper */
.lightbox-content img {
    max-height: 80vh;
    /* Leave room for button */
    width: auto;
    object-fit: contain;
    border: 3px solid var(--neon-magenta);
    box-shadow: 0 0 50px rgba(255, 0, 255, 0.5);
    margin-bottom: 20px;
}

/* Lightbox Discuss Button */
.lightbox-discuss-btn {
    position: relative;
    /* Changed from absolute */
    transform: none;
    left: auto;
    bottom: auto;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 10px 20px;
    font-family: 'VCR', monospace;
    cursor: pointer;
    transition: all 0.3s;
}

.lightbox-discuss-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 20px var(--neon-cyan);
}

/* ─── GHOSTBUSTERS EASTER EGG (SLIMER MODE) ────────────────────────────── */
:root {
    --neon-slimer: #39ff14;
    --glow-slimer: 0 0 10px var(--neon-slimer), 0 0 20px var(--neon-slimer), 0 0 40px var(--neon-slimer);
}

/* Binary Code Overlay - Fix Position & Container */
.binary-title-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.binary-digit {
    position: absolute;
    font-family: monospace;
    font-weight: bold;
    color: var(--neon-cyan);
    opacity: 0;
    user-select: none;
    /* Use linear rising steam effect */
    animation: binary-steam 3s infinite linear;
    pointer-events: none;
}

/* Allow steam to rise outside the tight text box */
.binary-title-overlay {
    overflow: visible;
}

@keyframes binary-steam {
    0% {
        opacity: 0;
        transform: translateY(10px) translateX(0) scale(0.8);
    }

    20% {
        opacity: 0.8;
        transform: translateY(0) translateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) translateX(var(--drift-x)) scale(1.2);
        text-shadow: 0 0 10px currentColor;
    }
}

.slimer-mode .site-title {
    color: var(--neon-slimer) !important;
    text-shadow: var(--glow-slimer) !important;
    background: repeating-linear-gradient(to bottom,
            var(--neon-slimer) 0px,
            var(--neon-slimer) 3px,
            rgba(57, 255, 20, 0.5) 3px,
            rgba(57, 255, 20, 0.5) 6px) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: flicker-slimer 0.2s infinite alternate !important;
}

.slimer-mode .binary-digit {
    color: var(--neon-slimer) !important;
    text-shadow: 0 0 5px var(--neon-slimer) !important;
}


@keyframes flicker-slimer {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
        text-shadow: var(--glow-slimer);
    }

    20%,
    24%,
    55% {
        opacity: 0.5;
        text-shadow: none;
    }
}

/* Bustin' Ghost Flyby Animation */
/* Bustin' Ghost Flyby Animation */
.bustin-ghost {
    position: absolute;
    /* Changed from fixed to absolute */
    top: 50%;
    left: 50%;
    width: 350px;
    z-index: 10000;
    pointer-events: none;
    filter: drop-shadow(0 0 20px var(--neon-slimer));
    transform: translate(-50%, -50%);
    animation: bustin-hero-flyby 12s linear forwards;
}

@keyframes bustin-hero-flyby {
    0% {
        left: -100vw;
        /* Start way off screen left */
        top: 200%;
        transform: translate(-50%, -50%) rotate(-10deg) scale(0.8);
    }

    20% {
        left: -20vw;
        top: -50%;
        transform: translate(-50%, -50%) rotate(10deg) scale(1);
    }

    40% {
        left: 120vw;
        /* Fly past to the right */
        top: 50%;
        transform: translate(-50%, -50%) rotate(-5deg) scale(1.1);
    }

    60% {
        left: 80vw;
        top: 150%;
        transform: translate(-50%, -50%) rotate(15deg) scale(0.9);
    }

    80% {
        left: 20%;
        top: 80%;
        transform: translate(-50%, -50%) rotate(-10deg) scale(1.2);
    }

    100% {
        left: 50%;
        /* Center of hero-content */
        top: -15%;
        /* Target: Site Title (at the top of hero-content) */
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

/* ─── SLIME RAIN (Ghostbusters Easter Egg) ─────────────────────────────────── */
.slime-drop {
    position: absolute;
    top: -30px;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--neon-slimer);
    text-shadow: 0 0 8px var(--neon-slimer), 0 0 15px var(--neon-slimer);
    pointer-events: none;
    animation: slime-fall linear forwards;
}

@keyframes slime-fall {
    0% {
        top: -30px;
        opacity: 1;
    }

    100% {
        top: 110vh;
        opacity: 0.5;
    }
}

/* ─── MOBILE RESPONSIVE SCALING ─────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Performance: Disable heavy CSS animations */
    body::before {
        display: none !important;
        /* Kill scanlines */
    }


    /* Ghost Score Counter - Fix Scaling & Position */
    /* Ghost Score Counter - Fix Scaling & Position */
    #ghost-score {
        font-size: 0.65rem;
        /* Slightly larger fonts for readability */
        padding: 8px 12px;
        top: 5px;
        right: 5px;
        transform-origin: top right;
        clip-path: none;
        /* Remove clip-path on mobile to prevent cutoff */
        border-radius: 2px;
        width: auto;
        min-width: 120px;
        max-width: 180px;
    }

    #ghost-score::before {
        display: none;
        /* Hide "WARNING: SPECTRAL ACTIVITY" on mobile */
    }

    /* Music Widget - Scale & Safe Area */
    /* Music Widget - Scale & Safe Area */
    .music-widget {
        transform: none !important;
        /* Avoid scale transform bugs */
        bottom: 20px;
        /* Lift above potential browser bars */
        left: 10px;
        width: 140px;
        /* Hard set width */
        padding: 8px;
        font-size: 0.7rem;
    }

    .music-controls {
        gap: 5px;
    }

    .volume-slider {
        display: none;
        /* Hide slider on mobile to save space */
    }

    /* COMPACT HERO LAYOUT FOR MOBILE */
    /* Reduce title size and spacing to fit everything */
    .site-title {
        font-size: 2.5rem;
        /* Force smaller size */
        margin-bottom: 5px;
        display: inline-block;
        /* Critical: Hug text width */
        width: auto;
        max-width: 90vw;
        /* Prevent overflow */
        position: relative;
    }

    /* Confine the steam horizontally on mobile */
    .binary-title-overlay {
        width: 80% !important;
        /* Spawns digits closer to center */
        left: 10% !important;
        /* Center the 80% block */
    }

    .site-tagline {
        font-size: 0.8rem;
        margin-bottom: 20px;
        /* Reduced from 40px */
    }

    .nav-list {
        gap: 15px 30px;
        /* Tighter grid */
        margin-top: 15px;
        /* Reduced from 30px */
    }

    .nav-link {
        font-size: 0.7rem;
        /* Slightly smaller nav items */
        padding: 8px 15px;
    }

    /* Check Availability Button - Smaller & Safer */
    .cta-button {
        transform: scale(0.75);
        /* 75% size */
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 110px;
        /* Increased clearance for scroll indicator */
    }

    /* Back/Home Navigation */
    .back-nav {
        padding: 5px 10px;
        z-index: 100;
    }

    .back-link {
        font-size: 0.5rem;
        padding: 5px 10px;
        letter-spacing: 0.05em;
    }

    /* Booking Page */
    .booking-page .hero-content {
        padding-top: 60px;
    }

    /* Easter Egg Elements */
    .bustin-ghost {
        width: 175px;
    }

    .blood-moon {
        width: 200px;
    }

    .blood-moon-wrapper {
        width: 350px;
        height: 400px;
        bottom: 95%;
    }

    /* FIX: Mobile Viewport Height Stability */
    .hero {
        min-height: 100svh;
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 0 40px;
    }

    /* Keep Index page hero fixed/contained if desired, but allow overflow for others */
    body:not(.booking-page):not(.pricing-page) .hero {
        min-height: 100svh;
        overflow: visible;
    }

    /* RED PULSE MOBILE OPTIMIZATION */
    .blood-text {
        animation:
            blood-intro 1s ease-in-out forwards,
            blood-pulse-mobile 3s infinite alternate ease-in-out 1s !important;
        will-change: text-shadow, opacity;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOOKING PAGE MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Booking Page Hero Title Override */
    .mission-title {
        font-size: 1.5rem !important;
        /* Force smaller size for long titles */
        margin-bottom: 0.5rem !important;
        line-height: 1.1;
        width: 100% !important;
        text-align: center;
    }

    .booking-page .site-tagline {
        font-size: 0.7rem;
        margin-bottom: 1.5rem !important;
        letter-spacing: 0.1em;
    }

    .booking-options {
        gap: 15px !important;
        width: 100% !important;
    }

    .hero-content {
        padding-top: 50px !important;
        width: 100%;
    }

    /* Buttons (Stripe, Inquiry, Donate) */
    .booking-btn {
        padding: 15px !important;
        width: 90% !important;
        max-width: 320px;
        margin: 10px auto !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        background: #080808 !important;
        /* Solid background to prevent firework transparency */
        clip-path: none !important;
        border: 2px solid currentColor;
        /* Force border visibility */
        border-radius: 4px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important;
    }

    .booking-btn .btn-text {
        font-size: 1.2rem !important;
    }

    .booking-btn .btn-sub {
        font-size: 0.6rem !important;
    }

    /* MODAL SCALING FIX FOR MOBILE */
    .terminal-content {
        width: 94% !important;
        max-width: 94% !important;
        padding: 10px !important;
        max-height: 85vh;
        overflow-y: auto;
        border-width: 2px !important;
        margin: 10px auto;
    }

    .terminal-title {
        font-size: 0.9rem !important;
        /* SIGNIFICANTLY smaller to fit "PROTOCOL: INQUIRY" */
        margin-bottom: 10px !important;
        line-height: 1.2;
        padding-bottom: 5px;
        letter-spacing: 1px;
    }

    .terminal-grid {
        padding: 5px !important;
        margin: 0 !important;
    }

    .inquiry-intro {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }

    .inquiry-list {
        margin-bottom: 15px !important;
    }

    .inquiry-list li {
        font-size: 0.75rem !important;
        margin-bottom: 5px !important;
    }

    .financial-notice {
        padding: 8px !important;
        margin-bottom: 15px !important;
    }

    .financial-notice p {
        font-size: 0.75rem !important;
    }

    .crypto-modal {
        padding: 10px;
    }

    .booking-btn .btn-icon {
        font-size: 1.5rem !important;
        margin-bottom: 5px;
    }

    /* Calendar Scaling */
    .calendar-wrapper {
        margin: 20px auto !important;
    }

    .calendar-container {
        padding: 10px !important;
    }

    .calendar-header {
        margin-bottom: 10px;
    }

    #current-month-year {
        font-size: 1.2rem !important;
        min-width: unset !important;
        /* Allow collapse */
    }

    .cal-nav-btn {
        font-size: 1rem !important;
        padding: 2px 10px !important;
    }

    /* Calendar Grid Compactness */
    .cal-day {
        min-height: 45px !important;
        /* Much smaller cells */
        padding: 2px !important;
    }

    .cal-date-num {
        font-size: 0.7rem !important;
        top: 2px;
        left: 4px;
    }

    .busy-bar {
        height: 4px !important;
        margin-top: 15px !important;
    }

    /* Monitor Frame adjustment */
    .monitor-frame iframe {
        height: 400px !important;
        /* Shorter iframe if used */
    }

    .monitor-frame {
        border-width: 2px !important;
        border-bottom-width: 10px !important;
        /* Smaller chin */
        padding: 5px !important;
    }
}

.mission-title {
    font-size: clamp(1.8rem, 8vw, 3.5rem);
    margin-bottom: 2rem;
    line-height: 1.1;
    text-align: center;
}

/* Fatal Error Easter Egg Mobile Fix */
@media (max-width: 768px) {
    .final-message-container {
        font-size: 1.5rem !important;
        white-space: normal !important;
        width: 90% !important;
        text-align: center !important;
    }
}

/* ─── RAIN CANVAS ────────────────────────────────────────────────────────── */
#neon-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999 !important;
    /* Performance: Render OVER content */
}