/* ========================================
   Phase 8: Visual FX & The Boot Sequence
   CRT Overlay Effects
   ======================================== */

/* Container for all screen effects */
.screen-fx {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: visible; /* Changed from hidden to allow scrolling effects */
    will-change: transform; /* Optimize for animations */

/* 1. The Scanlines */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%; /* Make taller to allow scrolling */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.05) 50%,
        rgba(0, 0, 0, 0.05)
    );
    background-size: 100% 4px;
    animation: scanline-scroll 8s linear infinite;
    opacity: 0.5; /* Reduced for better text readability */
    will-change: transform; /* Optimize animation */

@keyframes scanline-scroll {
    0% {
        transform: translateY(0);

    100% {
        transform: translateY(4px);

/* 2. The Vignette & Glow */
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 60%,
        rgba(0, 0, 0, 0.3) 100%
    );
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.7);
    pointer-events: none;

/* 3. The Noise (Static) */
.noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px
        );
    animation: noise-shift 0.2s steps(4) infinite;
    pointer-events: none;

@keyframes noise-shift {
    0% {
        transform: translate(0, 0);

    10% {
        transform: translate(-2px, 2px);

    20% {
        transform: translate(2px, -2px);

    30% {
        transform: translate(-2px, -2px);

    40% {
        transform: translate(2px, 2px);

    50% {
        transform: translate(-2px, 0);

    60% {
        transform: translate(2px, 0);

    70% {
        transform: translate(0, -2px);

    80% {
        transform: translate(0, 2px);

    90% {
        transform: translate(-1px, 1px);

    100% {
        transform: translate(1px, -1px);

/* 4. The Flicker (Barely perceptible) */
.flicker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    animation: flicker 8s ease-in-out infinite;
    pointer-events: none;

@keyframes flicker {
    0%, 100% {
        opacity: 0;

    50% {
        opacity: 0.02;

/* 5. Chromatic Aberration (Optional, subtle) */
.chromatic-aberration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.15;

.chromatic-aberration::before,
.chromatic-aberration::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;

.chromatic-aberration::before {
    filter: blur(0.5px);
    transform: translateX(-0.5px);
    mix-blend-mode: screen;

.chromatic-aberration::after {
    filter: blur(0.5px);
    transform: translateX(0.5px);
    mix-blend-mode: screen;

/* Boot Sequence Styles */
.boot-sequence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--surface-0, #000000);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto Mono', monospace;
    color: var(--signal-cyan, #00F0FF);
    pointer-events: none;

.boot-sequence.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;

.boot-terminal {
    text-align: left;
    max-width: 600px;
    padding: 2rem;
    font-size: 0.9rem;
    line-height: 1.6;

.boot-line {
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: boot-fade-in 0.3s ease-in forwards;

.boot-line.visible {
    opacity: 1;

.boot-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--signal-cyan, #00F0FF);
    margin-left: 4px;
    animation: blink 1s infinite;
    vertical-align: baseline;

@keyframes blink {
    0%, 50% {
        opacity: 1;

    51%, 100% {
        opacity: 0;

@keyframes boot-fade-in {
    from {
        opacity: 0;

    to {
        opacity: 1;

.boot-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10001;
    opacity: 0;
    pointer-events: none;

.boot-flash.active {
    animation: flash 0.2s ease-out;

@keyframes flash {
    0% {
        opacity: 0;

    50% {
        opacity: 1;

    100% {
        opacity: 0;

/* Ready Screen (Insert Coin Protocol) - Terminal/Pip-Boy Aesthetic */
.ready-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(18, 20, 24, 0.85); /* Slightly transparent to let boot terminal show through */
    backdrop-filter: blur(1px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10002;
    pointer-events: auto;

.ready-screen.hidden {
    display: none !important;

.ready-content {
    text-align: center;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 90%;

/* The Terminal Header - Subtle, muted green */
.blink-text {
    color: #4A9B5A; /* Muted terminal green - like old CRT monitors */
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-shadow: 0 0 2px rgba(74, 155, 90, 0.3); /* Very subtle glow */
    animation: terminal-blink 2s ease-in-out infinite;
    margin-bottom: var(--spacing-lg, 24px);
    line-height: 1.4;
    text-align: center;
    max-width: 100%;
    word-wrap: break-word;
    opacity: 0.9;

@keyframes terminal-blink {
    0%, 100% { 
        opacity: 0.9;

    50% { 
        opacity: 0.6;

/* The Subtitle - Terminal metadata style */
.subtitle {
    color: var(--text-secondary, #A1A7B3);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    margin-bottom: var(--spacing-2xl, 48px);
    opacity: 0.7;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-weight: 300;
    letter-spacing: 0.03em;

.subtitle span {
    color: #4A9B5A;
    font-weight: 400;
    opacity: 0.9;

/* The Terminal Button - Subtle, minimal */
.cyber-button {
    background: transparent;
    border: 1px solid #4A9B5A;
    color: #4A9B5A;
    padding: 10px 24px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: clamp(0.75rem, 1.3vw, 0.9rem);
    font-weight: 400;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.15s ease;
    box-shadow: 0 0 1px rgba(74, 155, 90, 0.2);
    outline: none;
    position: relative;
    overflow: hidden;
    opacity: 0.85;

.cyber-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(74, 155, 90, 0.08), transparent);
    transition: left 0.4s ease;

.cyber-button:hover::before {
    left: 100%;

.cyber-button:hover {
    background: rgba(74, 155, 90, 0.05);
    color: #5AB56A;
    border-color: #5AB56A;
    box-shadow: 0 0 3px rgba(74, 155, 90, 0.3);
    opacity: 1;
    transform: none; /* No scaling - keep it subtle */

.cyber-button:active {
    transform: none;
    background: rgba(74, 155, 90, 0.1);
    box-shadow: inset 0 0 2px rgba(74, 155, 90, 0.2);

.cyber-button:focus {
    outline: 1px solid #4A9B5A;
    outline-offset: 3px;
    opacity: 1;

/* Decryption Effect for Stat Changes */
.stat-value.decrypting {
    color: var(--text-primary, #FFFFFF) !important;
    font-weight: 700;
    animation: decrypt-scramble 0.5s steps(10) forwards;

@keyframes decrypt-scramble {
    0% {
        opacity: 1;

    50% {
        opacity: 0.8;

    100% {
        opacity: 1;

/* Accessibility: Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .scanlines,
    .noise,
    .flicker,
    .chromatic-aberration {
        animation: none !important;
        opacity: 0 !important;

    .boot-sequence {
        display: none !important;

    .stat-value.decrypting {
        animation: none !important;

    .blink-text {
        animation: none !important;
        opacity: 1 !important;

    .cyber-button::before {
        animation: none !important;

/* High contrast mode: Disable effects */
@media (prefers-contrast: more) {
    .screen-fx {
        display: none !important;

/* ========================================
   PIXEL PERFECT PARTNERS
   Industrial Zen Cinematic Experience
   ======================================== */

/* --- CRT & HARDWARE FX --- */

:root {
    --crt-flicker: 0.02;
    --term-green: #4A9B5A;
    --term-amber: #FFB800;
    --term-off: #111;

/* 1. The CRT Warmup (The "Blink") - Industrial Zen */
@keyframes crt-warmup {
    0% {
        transform: scale(1, 0.001);
        opacity: 0;
        filter: brightness(0) contrast(0);

    5% {
        transform: scale(1, 0.1);
        opacity: 0.1;
        filter: brightness(0.2) contrast(0.3);

    10% {
        transform: scale(1, 0.3);
        opacity: 0.3;
        filter: brightness(0.5) contrast(0.6);

    20% {
        transform: scale(1, 0.6);
        opacity: 0.6;
        filter: brightness(1.2) contrast(1.1);

    30% {
        transform: scale(1, 0.8);
        opacity: 0.8;
        filter: brightness(1.5) contrast(1.2);

    40% {
        transform: scale(1, 0.95);
        opacity: 0.95;
        filter: brightness(1.8) contrast(1.3);

    50% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(2) contrast(1.4);

    60% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1.5) contrast(1.2);

    70% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1.2) contrast(1.1);

    80% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1.1) contrast(1.05);

    90% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1.05) contrast(1.02);

    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1) contrast(1);

@keyframes crt-turn-on {
    0% {
        transform: scale(1, 0.002);
        opacity: 0;
        filter: brightness(3);

    30% {
        transform: scale(1, 0.002);
        opacity: 1;

    60% {
        transform: scale(1, 1);
        opacity: 1;

    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1);

.crt-warmup {
    animation: crt-warmup 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;

.crt-startup {
    animation: crt-turn-on 0.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;

/* 2. Hardware Scanlines (Persistent) - Updated */
.scanlines {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.1) 50%,
        rgba(0,0,0,0.1)
    );
    background-size: 100% 3px;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.6;

/* 3. The Glitch (Chromatic Aberration) - Text Rendering */
.glitch-effect {
    animation: glitch-anim 3s infinite linear alternate-reverse;

@keyframes glitch-anim {
    0% { 
        text-shadow: -2px 0 var(--signal-crimson, #FF2A2A), 2px 0 var(--signal-cyan, #00F0FF);
        transform: translateX(0);

    2% { 
        text-shadow: 2px 0 var(--signal-crimson, #FF2A2A), -2px 0 var(--signal-cyan, #00F0FF);
        transform: translateX(-1px);

    4% { 
        text-shadow: none;
        transform: translateX(0);

    100% { 
        text-shadow: none;
        transform: translateX(0);

/* Chromatic Aberration for Text Rendering (Hard Sci-Fi) */
@keyframes text-chromatic-aberration {
    0%, 100% {
        text-shadow: 
            0 0 0 rgba(255, 42, 42, 0),
            0 0 0 rgba(0, 240, 255, 0);
        transform: translateX(0);
        filter: hue-rotate(0deg);

    10% {
        text-shadow: 
            -0.5px 0 0 rgba(255, 42, 42, 0.8),
            0.5px 0 0 rgba(0, 240, 255, 0.8);
        transform: translateX(-0.3px);
        filter: hue-rotate(5deg);

    20% {
        text-shadow: 
            0.5px 0 0 rgba(255, 42, 42, 0.6),
            -0.5px 0 0 rgba(0, 240, 255, 0.6);
        transform: translateX(0.3px);
        filter: hue-rotate(-5deg);

    30% {
        text-shadow: 
            -1px 0 0 rgba(255, 42, 42, 0.4),
            1px 0 0 rgba(0, 240, 255, 0.4);
        transform: translateX(-0.5px);
        filter: hue-rotate(10deg);

    40% {
        text-shadow: 
            0 0 0 rgba(255, 42, 42, 0),
            0 0 0 rgba(0, 240, 255, 0);
        transform: translateX(0);
        filter: hue-rotate(0deg);

    50% {
        text-shadow: 
            0.3px 0 0 rgba(255, 42, 42, 0.3),
            -0.3px 0 0 rgba(0, 240, 255, 0.3);
        transform: translateX(0.2px);
        filter: hue-rotate(-3deg);

    60% {
        text-shadow: 
            -0.3px 0 0 rgba(255, 42, 42, 0.3),
            0.3px 0 0 rgba(0, 240, 255, 0.3);
        transform: translateX(-0.2px);
        filter: hue-rotate(3deg);

    70%, 100% {
        text-shadow: 
            0 0 0 rgba(255, 42, 42, 0),
            0 0 0 rgba(0, 240, 255, 0);
        transform: translateX(0);
        filter: hue-rotate(0deg);

.text-glitch {
    animation: text-chromatic-aberration 0.15s steps(10) forwards;

/* Subtle persistent glitch for loading states */
@keyframes subtle-glitch {
    0%, 90%, 100% {
        text-shadow: none;
        transform: translateX(0);

    91% {
        text-shadow: -0.2px 0 0 rgba(255, 42, 42, 0.3), 0.2px 0 0 rgba(0, 240, 255, 0.3);
        transform: translateX(-0.1px);

    92% {
        text-shadow: 0.2px 0 0 rgba(255, 42, 42, 0.3), -0.2px 0 0 rgba(0, 240, 255, 0.3);
        transform: translateX(0.1px);

    93% {
        text-shadow: none;
        transform: translateX(0);

.text-glitch-subtle {
    animation: subtle-glitch 8s ease-in-out infinite;

/* 4. Breathing UI (Ready Screen) */
@keyframes breathe-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.3); }
    50% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.3); border-color: rgba(0, 240, 255, 0.8); }

.ui-breathe {
    animation: breathe-glow 4s ease-in-out infinite;

/* 5. The Tactile Button */
.tactile-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);

.tactile-btn:hover {
    letter-spacing: 0.2em;
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 15px var(--signal-cyan);

.tactile-btn:active {
    transform: scale(0.98);

/* Text Typewriter Effect */
@keyframes text-typewriter {
    from {
        width: 0;
        opacity: 0;

    to {
        width: 100%;
        opacity: 1;

.text-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--term-green, #4A9B5A);
    animation: text-typewriter 0.5s steps(20) forwards, blink-cursor 1s step-end infinite;

@keyframes blink-cursor {
    0%, 50% {
        border-color: var(--term-green, #4A9B5A);

    51%, 100% {
        border-color: transparent;

/* Audio hook class for typing effect */
.typing {
    /* This class is added during typing for audio engine integration */

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}