body {
    margin: 0;
    padding: 0;
    background-color: #1a0b1c;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

.background-swirl {
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, #3d144c 0%, #110518 40%, #000 100%);
    opacity: 0.8;
    z-index: 0;
    animation: spin 60s linear infinite;
}

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

.crt-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 10;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

.header-container {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 300px;
    height: 36px;
    background: #111;
    border: 2px solid #2a1130;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
    transition: all 1s cubic-bezier(0.8, 0, 0.2, 1);
    z-index: 50;
}

.header-container.site-mode {
    position: fixed;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    transform: none; /* Clear translate */
    animation: none !important; /* Force clear shake animation */
    height: 60px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #F5B041;
    background: rgba(13, 6, 18, 0.9);
    box-shadow: 0 5px 30px rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-container.site-mode .loading-bar-container {
    display: none;
}

.site-title {
    position: static;
    transform: none;
    margin: 0;
    color: #F5B041;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 2s ease 1s;
    text-shadow: 0 0 20px rgba(245, 176, 65, 0.8), 0 0 40px rgba(245, 176, 65, 0.5);
}

.header-container.site-mode .site-title {
    opacity: 1;
}

.loading-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #E74C3C, #F5B041, #00F5D4, #E74C3C);
    background-size: 200% 100%;
    animation: flow 2s linear infinite;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}

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

.loading-text {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-weight: 900;
    font-style: italic;
    font-size: 14px;
    text-shadow: 0 0 5px #000, 1px 1px 0 #000;
    letter-spacing: 2px;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.5s ease;
}

.header-container.site-mode .loading-bar-fill,
.header-container.site-mode .loading-text {
    opacity: 0;
}

.shake-anim {
    animation: bar-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes bar-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px) rotate(-1deg); }
    40% { transform: translateX(5px) rotate(1deg); }
    60% { transform: translateX(-3px) rotate(-1deg); }
    80% { transform: translateX(3px) rotate(1deg); }
    100% { transform: translateX(0); }
}

.main-wrapper {
    position: relative;
    z-index: 5;
    margin-top: 40px; /* space for header */
}

.text-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 60; /* above everything for the massive text */
    transition: opacity 1s ease;
}

.dom-text-particle {
    position: absolute;
    transform: translate(-50%, -50%) scale(0.1);
    font-family: 'Impact', 'Segoe UI Black', sans-serif;
    font-weight: 900; font-style: italic;
    text-align: center; white-space: nowrap;
    opacity: 1;
    animation: dom-text-anim 1.5s cubic-bezier(0.2, 1.2, 0.3, 1) forwards;
}

@keyframes dom-text-anim {
    0% { transform: translate(-50%, -50%) scale(0.1) rotate(-5deg); opacity: 0; }
    15% { transform: translate(-50%, -60%) scale(var(--target-scale)) rotate(var(--target-rot)); opacity: 1; }
    80% { transform: translate(-50%, -80%) scale(calc(var(--target-scale) * 0.9)) rotate(calc(var(--target-rot) * 0.5)); opacity: 1; }
    100% { transform: translate(-50%, -100%) scale(0.5); opacity: 0; }
}

.container {
    box-shadow: 0 0 60px rgba(0,0,0,1), 0 0 100px rgba(231, 76, 60, 0.2);
    border-radius: 8px;
    padding: 10px;
    background: #0d0612;
    border: 2px solid #3d144c;
    transform: perspective(800px) rotateX(2deg);
    transition: transform 2s cubic-bezier(0.7, 0, 0.3, 1), filter 2s ease, opacity 2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: max-content;
    margin: 0 auto;
    box-sizing: border-box;
    will-change: transform, filter, opacity;
}

.zoom-to-bg {
    transform: perspective(800px) rotateX(0deg) scale(6) !important;
    filter: blur(8px) brightness(0.3);
    opacity: 0.5;
    z-index: 1 !important;
}

canvas {
    background-color: #0d0e15;
    border: 2px solid #2a1130;
    border-radius: 4px;
    display: block;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.9);
}

.reveal-card {
    background: linear-gradient(135deg, #1f1124 0%, #0d0612 100%);
    border: 2px solid #3d144c;
    border-radius: 12px;
    padding: 40px;
    color: white;
    box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(231, 76, 60, 0.1);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    
    opacity: 0;
    pointer-events: none;
    transition: translate 1s cubic-bezier(0.25, 1, 0.5, 1), scale 1s cubic-bezier(0.25, 1, 0.5, 1), rotate 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease, filter 0.5s ease;
    z-index: 20;
    will-change: translate, scale, rotate, opacity, filter;
    cursor: pointer;
}

.card-corner {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-family: 'Times New Roman', Times, serif;
    color: #FFF;
}
.card-corner.top-left { top: 15px; left: 15px; }
.card-corner.bottom-right { bottom: 15px; right: 15px; transform: rotate(180deg); }

.card-1 .card-corner span { color: #E74C3C; } /* Spades */
.card-2 .card-corner span { color: #C0392B; } /* Hearts */
.card-3 .card-corner span { color: #27AE60; } /* Clubs */
.card-4 .card-corner span { color: #2980B9; } /* Diamonds */

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

.reveal-card h2 {
    margin: 0 0 10px 0;
    color: #F5B041;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.reveal-card p {
    margin: 0;
    font-size: 1rem;
    color: #e0e0e0;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* RESPONSIVE LAYOUT LOGIC */

@media (max-width: 900px) {
    /* MOBILE LAYOUT */
    .content-grid {
        display: block;
        position: relative;
        width: 324px; /* 300px canvas + 24px padding/border */
        height: 624px;
    }
    .tetrisContainer {
        position: absolute;
        top: 0; left: 0;
    }
    .reveal-card {
        position: absolute;
        width: 340px; /* Overlap edges */
        height: 180px; /* Overlap top and bottom */
        left: -8px; /* Offset the larger width */
        scale: 0.8; rotate: 0deg; translate: 0 0;
        box-sizing: border-box;
    }
    .card-1 { top: -10px; }
    .card-2 { top: 120px; }
    .card-3 { top: 250px; }
    .card-4 { top: 380px; }
    
    .card-1.revealed { opacity: 1; pointer-events: auto; z-index: 41 !important; scale: 1; rotate: -3deg; translate: -5px 5px; }
    .card-2.revealed { opacity: 1; pointer-events: auto; z-index: 42 !important; scale: 1; rotate: 2deg; translate: 5px -5px; }
    .card-3.revealed { opacity: 1; pointer-events: auto; z-index: 43 !important; scale: 1; rotate: -2deg; translate: -3px 8px; }
    .card-4.revealed { opacity: 1; pointer-events: auto; z-index: 44 !important; scale: 1; rotate: 4deg; translate: 5px -10px; }
    
    .reveal-card.focused {
        z-index: 100 !important;
        box-shadow: 0 20px 60px rgba(0,0,0,1), 0 0 40px rgba(245, 176, 65, 0.4) !important;
        filter: brightness(1.2);
    }
    
    .card-1.focused { scale: 1.05; rotate: -3deg; translate: -5px -15px !important; }
    .card-2.focused { scale: 1.05; rotate: 2deg; translate: 5px -15px !important; }
    .card-3.focused { scale: 1.05; rotate: -2deg; translate: -3px -15px !important; }
    .card-4.focused { scale: 1.05; rotate: 4deg; translate: 5px -15px !important; }
}

@media (min-width: 901px) {
    /* DESKTOP LAYOUT */
    .content-grid {
        display: grid;
        grid-template-columns: 280px 300px 280px;
        grid-template-rows: 300px 300px;
        gap: 30px;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
    }
    .card-1 { grid-column: 1; grid-row: 1; width: 100%; height: 100%; translate: -30px 10px; rotate: -4deg; scale: 0.8; }
    .card-2 { grid-column: 1; grid-row: 2; width: 100%; height: 100%; translate: -10px -20px; rotate: 3deg; scale: 0.8; }
    .tetrisContainer { 
        grid-column: 2; grid-row: 1 / span 2; 
        transition: transform 2s cubic-bezier(0.7, 0, 0.3, 1), filter 2s ease, opacity 2s ease;
    }
    .card-3 { grid-column: 3; grid-row: 1; width: 100%; height: 100%; translate: 30px 15px; rotate: 5deg; scale: 0.8; }
    .card-4 { grid-column: 3; grid-row: 2; width: 100%; height: 100%; translate: 10px -15px; rotate: -2deg; scale: 0.8; }
    
    .reveal-card.revealed {
        opacity: 1;
        pointer-events: auto;
        scale: 1;
    }

    /* SITE MODE OVERRIDES FOR DESKTOP - CHAOTIC LAYOUT WITH INDEPENDENT TRANSFORMS */
    .content-grid.site-mode .reveal-card {
        transition: scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 1s ease;
    }
    
    /* Common unhover transition */
    .content-grid.site-mode .card-1,
    .content-grid.site-mode .card-2,
    .content-grid.site-mode .card-3,
    .content-grid.site-mode .card-4 {
        transition: translate 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.05s, 
                    scale 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s, 
                    rotate 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s, 
                    filter 0.6s ease !important;
    }
    
    .content-grid.site-mode .card-1 { translate: 80px 10px; scale: 1.15; }
    .content-grid.site-mode .card-2 { translate: 60px -20px; scale: 1.1; }
    .content-grid.site-mode .card-3 { translate: -80px 15px; scale: 1.2; }
    .content-grid.site-mode .card-4 { translate: -60px -15px; scale: 1.15; }
    
    /* Hover Active state driven by JS */
    /* Slide vertically away from neighbor first, then scale up */
    .content-grid.site-mode .reveal-card.hover-active {
        transition: translate 0.4s ease, 
                    scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s, 
                    rotate 0.3s ease, 
                    filter 0.4s ease !important;
    }
    
    .content-grid.site-mode .card-1.hover-active {
        translate: 80px -20px; scale: 1.25; rotate: 0deg; filter: brightness(1.3);
    }
    .content-grid.site-mode .card-2.hover-active {
        translate: 60px 10px; scale: 1.25; rotate: 0deg; filter: brightness(1.3);
    }
    .content-grid.site-mode .card-3.hover-active {
        translate: -80px -15px; scale: 1.25; rotate: 0deg; filter: brightness(1.3);
    }
    .content-grid.site-mode .card-4.hover-active {
        translate: -60px 15px; scale: 1.25; rotate: 0deg; filter: brightness(1.3);
    }
}