/* Basic resets */
:root{
	--panel-width: 320px;
	--bg: #151515;
	--accent: #000;
    /* Add responsive variables */
    --spacing-scale: 1;
    --font-scale: 1;
}
*{
	box-sizing:border-box;
    margin: 0;
    padding: 0;
}
html,body{
	height:100%;
	margin:0;
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
    overflow: hidden;
}

#scene-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Responsive base sizing */
@media screen and (min-width: 2560px) {
    :root {
        --spacing-scale: 1.5;
        --font-scale: 1.25;
    }
}

@media screen and (max-width: 1366px) {
    :root {
        --spacing-scale: 0.85;
        --font-scale: 0.95;
    }
}

body{
	background:var(--bg);
    scroll-behavior: smooth;
    background-attachment: fixed;
}

/* ---------------NAVIGATION MENU--------------- */

/* Circular Hamburger button */
.hamburger{
	position:fixed;
	top: calc(55px * var(--spacing-scale));
	right: calc(55px * var(--spacing-scale));
	width: calc(56px * var(--spacing-scale));
	height: calc(56px * var(--spacing-scale));
	border-radius:50%;
	border:0;
	background:#ffffff00;
	border:1px solid rgb(255, 255, 255);
	box-shadow:0 4px 12px rgba(0,0,0,0.12);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:1001;
	padding:0;
}
.hamburger{
	--hamburger-top:55px;
	--hamburger-right:55px;
	--hamburger-size:56px;
	position:fixed;
	top:var(--hamburger-top);
	right:var(--hamburger-right);
	width:var(--hamburger-size);
	height:var(--hamburger-size);
	border-radius:50%;
	border:0;
	background:#ffffff00;
	border:1px solid rgb(255, 255, 255);
	box-shadow:0 4px 12px rgba(0,0,0,0.12);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:1001;
	padding:0;
}
.hamburger:focus{outline:1px solid #ffffff5e;outline-offset:10px}

/* Position bars absolutely so they center inside the circular button */
.hamburger{position:fixed;}
.hamburger .bar{position:absolute;left:50%;top:50%;width:22px;height:2px;background:#ffffff;border-radius:2px;transform-origin:center center;transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .18s ease;display:block}

.hamburger .bar-middle{transform:translate(-50%,-50%)}
.hamburger .bar-top{transform:translate(-50%,-50%) translateY(-8px)}
.hamburger .bar-bottom{transform:translate(-50%,-50%) translateY(8px)}

/* Transform to X when open */
.hamburger.open .bar-top{transform:translate(-50%,-50%) rotate(45deg)}
.hamburger.open .bar-middle{opacity:0;transform:translate(-50%,-50%)}
.hamburger.open .bar-bottom{transform:translate(-50%,-50%) rotate(-45deg)}


.side-panel{
	position:fixed;
	top: calc(200px * var(--spacing-scale));
	right:0;
	height:100vh;
	width: calc(var(--panel-width) * var(--spacing-scale));
	max-width:100%;
	background: #ffffff19;
	box-shadow: -8px 0 24px rgba(0,0,0,0.12);
	overflow:hidden;
	transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .28s ease;
	z-index:1000;
	padding: calc(48px * var(--spacing-scale)) calc(28px * var(--spacing-scale));
	transform:translateX(110%); /* hidden by default off-screen */
	opacity:0;
	pointer-events:none;
}

/* Responsive adjustments for different screen sizes */
@media screen and (max-width: 768px) {
    .side-panel {
        width: 100%;
        top: 0;
        padding: calc(32px * var(--spacing-scale)) calc(20px * var(--spacing-scale));
    }
}

.side-panel[aria-hidden="false"]{transform:translateX(0);opacity:1;pointer-events:auto}

.menu-list{list-style:none;margin:4px 0 0 0;padding:0;display:flex;flex-direction:column;gap:18px}

.menu-list a{display:inline-block;text-decoration:none;color:#ffffff;font-weight:300;font-size:20px;transition:transform .18s ease,font-weight .18s ease,color .18s ease}

.menu-list a{font-family: 'Montserrat', sans-serif;}

.menu-list a:hover,.menu-list a:focus{transform:scale(1.12);font-weight:500}

/* Active/current page style: keep enlarged and medium weight so user knows which page is open */
.menu-list a.active,
.menu-list a[aria-current="page"]{
	transform: scale(1.12);
	font-weight:500;
}

/* Larger screens: slightly bigger text */
@media(min-width:900px){
	:root{--panel-width:360px}
	.menu-list a{font-size:22px}
}

/* Ensure main content is visible behind panel */
main,header,footer{position:relative;z-index:0}

/* Button label (menu / close) - orbiting around the hamburger */
:root{
    --label-orbit-radius: 100px; /* distance from hamburger center to label when closed */
}
.button-label{
    /* anchor label at the hamburger center using the same variables as the button */
    position:fixed;
    top: 85px;
    right: 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight:300;
    font-size:16px;
    color:#ffffff;
    cursor:default;
    z-index:1001;
    pointer-events:none; /* label non-interactive */
    transform-origin: center center;
    transform: rotate(0deg) translateX(calc(-1 * var(--label-orbit-radius))) translateY(-50%);
    transition: transform .48s cubic-bezier(.2,.9,.2,1), color .18s ease, font-weight .18s ease;
}
.button-label.open{
    font-weight:500;
    /* rotate 90deg and keep same radius so the label moves around the circle to the bottom */
    transform: rotate(-90deg) translateX(-70px) translateY(-50%);
}

/* ---------------CRT SCAN LINES--------------- */

        /* CRT Overlay Container */
        .crt-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }

        .scanlines,
        .glitch,
        .flicker,
        .vignette,
        .chromatic,
        .screen-tear,
        .glitch-lines,
        .glitch-line {
            pointer-events: none;
        }

        /* Scanlines with flicker */
        .scanlines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 200vh;
            background: repeating-linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0px,
                rgba(0, 0, 0, 0) 1px,
                rgba(0, 0, 0, 0.5) 2px,
                rgba(0, 0, 0, 0.5) 3px
            );
            animation: scanlineMove 8s linear infinite, scanlineFlicker 0.1s infinite;
        }

        /* Glitch Effect on entire screen */
        .glitch {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            animation: glitchScreen 4s infinite;
        }

        /* Screen flicker */
        .flicker {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.02);
            animation: flicker 0.12s infinite alternate;
        }

        /* Screen curve vignette */
        .vignette {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(
                ellipse at center,
                transparent 0%,
                rgba(0, 0, 0, 0.5) 100%
            );
        }

        /* Random glitch bars */
        .glitch-lines {
            position: absolute;
            width: 100vw;
            height: 100vh;
            background: transparent;
        }

        .glitch-line {
            position: absolute;
            left: 0;
            width: 100vw;
            height: 1px;
            background: rgba(255, 255, 255, 0.8);
            opacity: 0;
        }

        .glitch-line:nth-child(1) {
            top: 15%;
            animation: glitchLine1 3s infinite;
        }

        .glitch-line:nth-child(2) {
            top: 45%;
            animation: glitchLine2 4s infinite;
        }

        .glitch-line:nth-child(3) {
            top: 70%;
            animation: glitchLine3 5s infinite;
        }

        .glitch-line:nth-child(4) {
            top: 85%;
            animation: glitchLine4 3.5s infinite;
        }

        /* Horizontal screen tear */
        .screen-tear {
            position: absolute;
            width: 100vw;
            height: 3px;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 0, 0, 0.5), 
                rgba(0, 255, 0, 0.5), 
                rgba(0, 0, 255, 0.5), 
                transparent
            );
            animation: screenTear 6s infinite;
            opacity: 0;
        }

        @keyframes scanlineMove {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-50%);
            }
        }

        @keyframes scanlineFlicker {
            0%, 100% {
                opacity: 0.95;
            }
            50% {
                opacity: 0.85;
            }
        }

        @keyframes glitchScreen {
            0%, 80%, 100% {
                transform: translate(0, 0);
                filter: none;
            }
            81% {
                transform: translate(-2px, 2px);
            }
            82% {
                transform: translate(2px, -2px);
            }
            83% {
                transform: translate(-1px, 1px);
            }
            84% {
                transform: translate(1px, -1px);
            }
            85% {
                transform: translate(0, 0);
                filter: hue-rotate(90deg);
            }
        }

        @keyframes flicker {
            0% {
                opacity: 0.1;
            }
            100% {
                opacity: 0.3;
            }
        }

        @keyframes glitchLine1 {
            0%, 88%, 100% {
                opacity: 0;
                transform: translateX(0);
            }
            89% {
                opacity: 1;
                transform: translateX(-50px);
            }
            90% {
                opacity: 0.8;
                transform: translateX(50px);
            }
            91% {
                opacity: 0;
            }
        }

        @keyframes glitchLine2 {
            0%, 75%, 100% {
                opacity: 0;
                transform: translateX(0) scaleY(1);
            }
            76% {
                opacity: 1;
                transform: translateX(30px) scaleY(3);
            }
            77% {
                opacity: 0.7;
                transform: translateX(-30px) scaleY(2);
            }
            78% {
                opacity: 0;
            }
        }

        @keyframes glitchLine3 {
            0%, 92%, 100% {
                opacity: 0;
                transform: translateX(0);
            }
            93% {
                opacity: 1;
                transform: translateX(100px);
            }
            94% {
                opacity: 0.5;
                transform: translateX(-80px);
            }
            95% {
                opacity: 0;
            }
        }

        @keyframes glitchLine4 {
            0%, 70%, 100% {
                opacity: 0;
                transform: translateX(0) scaleY(1);
            }
            71% {
                opacity: 0.9;
                transform: translateX(-60px) scaleY(4);
            }
            72% {
                opacity: 0.6;
                transform: translateX(40px) scaleY(2);
            }
            73% {
                opacity: 0;
            }
        }

        @keyframes screenTear {
            0%, 85%, 100% {
                opacity: 0;
                top: 20%;
            }
            86% {
                opacity: 1;
                top: 20%;
            }
            87% {
                opacity: 0.8;
                top: 60%;
            }
            88% {
                opacity: 0;
                top: 80%;
            }
        }

        @keyframes textGlitch {
            0%, 90%, 100% {
                text-shadow: 0 0 10px #00ff00;
            }
            91% {
                text-shadow: -2px 0 red, 2px 0 cyan, 0 0 10px #00ff00;
            }
            92% {
                text-shadow: 2px 0 red, -2px 0 cyan, 0 0 10px #00ff00;
            }
            93% {
                text-shadow: 0 0 10px #00ff00;
            }
        }

        /* RGB Chromatic aberration */
        .chromatic {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            animation: chromatic 3s infinite;
        }

        @keyframes chromatic {
            0%, 94%, 100% {
                opacity: 0;
            }
            95% {
                opacity: 1;
                filter: drop-shadow(-2px 0 red) drop-shadow(2px 0 cyan);
            }
            96% {
                opacity: 0.8;
                filter: drop-shadow(2px 0 red) drop-shadow(-2px 0 cyan);
            }
            97% {
                opacity: 0;
            }
        }

        /* =====================
           Responsive adjustments for home styles
           ===================== */
        @media (max-width: 900px) {
            .hamburger{ --hamburger-top: 20px; --hamburger-right: 20px; --hamburger-size: 48px; }
            .button-label{ top: 60px; right: 14px; font-size:14px; }
            .side-panel{ top: 80px; width: 85%; left: 50%; right: auto; transform: translate(-50%, 0); }
            .menu-list a{ font-size: 18px; }
        }

        @media (max-width: 480px) {
            .button-label{ display:none }
            .menu-list a{ font-size: 16px }
            body{ background-attachment: scroll } /* avoid parallax/attachment issues on some mobile browsers */
        }

/* Main overlay container */
.interactive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex; /* Changed from none to flex */
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.interactive-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Glitch overlay effect */
.overlay-glitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    animation: overlayGlitch 6s infinite;
}

@keyframes overlayGlitch {
    0%, 94%, 100% {
        opacity: 0;
    }
    95% {
        opacity: 0.05;
        transform: translateX(-3px);
        filter: hue-rotate(90deg);
    }
    96% {
        opacity: 0.08;
        transform: translateX(3px);
    }
    97% {
        opacity: 0;
        transform: translateX(0);
    }
}

/* Main content container */
.overlay-content {
    position: relative;
    max-width: 900px;
    width: 90%;
    padding: 3rem 2rem;
    animation: contentFadeIn 0.8s ease-out;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header with animated border */
.overlay-header {
    position: relative;
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 3rem;
    border: 2px solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.03);
}

/* Animated corner brackets */
.header-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 255, 255, 0.8);
}

.header-corner.top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    animation: cornerPulse 2s ease-in-out infinite;
}

.header-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    animation: cornerPulse 2s ease-in-out infinite 0.5s;
}

.header-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    animation: cornerPulse 2s ease-in-out infinite 1s;
}

.header-corner.bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    animation: cornerPulse 2s ease-in-out infinite 1.5s;
}

@keyframes cornerPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Title styling */
.overlay-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.title-glitch {
    position: relative;
    color: #00ffff;
    font-family: "Bebas Neue", 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    animation: titleGlitch 4s infinite;
}

.title-glitch::before,
.title-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.title-glitch::before {
    animation: glitchBefore 3s infinite;
    color: #ff00ff;
    z-index: -1;
}

.title-glitch::after {
    animation: glitchAfter 3s infinite;
    color: #00ff00;
    z-index: -2;
}

@keyframes titleGlitch {
    0%, 90%, 100% {
        transform: translateX(0);
    }
    91% {
        transform: translateX(-2px);
    }
    92% {
        transform: translateX(2px);
    }
    93% {
        transform: translateX(0);
    }
}

@keyframes glitchBefore {
    0%, 94%, 100% {
        opacity: 0;
    }
    95% {
        opacity: 0.7;
        transform: translateX(-3px);
    }
}

@keyframes glitchAfter {
    0%, 94%, 100% {
        opacity: 0;
    }
    95% {
        opacity: 0.7;
        transform: translateX(3px);
    }
}

.title-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Instructions grid */
.instructions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Instruction cards */
.instruction-card {
    position: relative;
    padding: 1.5rem;
    background: rgba(0, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
    opacity: 0;
    animation: cardFadeIn 0.6s ease-out forwards;
}

.instruction-card[data-delay="0"] { animation-delay: 0.1s; }
.instruction-card[data-delay="1"] { animation-delay: 0.2s; }
.instruction-card[data-delay="2"] { animation-delay: 0.3s; }
.instruction-card[data-delay="3"] { animation-delay: 0.4s; }

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.instruction-card:hover {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

/* Card glow effect */
.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 8px;
}

.instruction-card:hover .card-glow {
    opacity: 1;
}

/* Card icon */
.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: rgba(0, 255, 255, 0.8);
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.card-icon svg {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.4));
}

/* Card title */
.card-title {
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0 0 0.5rem 0;
    text-align: center;
}

/* Card description */
.card-description {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Footer section */
.overlay-footer {
    text-align: center;
}

.footer-divider {
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 255, 255, 0.5), 
        transparent
    );
    margin: 0 auto 2rem auto;
}

/* Close/Enter button */
.close-overlay-btn {
    position: relative;
    padding: 1rem 3rem;
    background: rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: 4px;
    color: rgba(0, 255, 255, 1);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.close-overlay-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 1);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-arrow {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.close-overlay-btn:hover .btn-arrow {
    transform: translateX(5px);
}

/* Button scanline effect */
.btn-scanline {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: btnScan 2s linear infinite;
}

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

/* Footer hint */
.footer-hint {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    margin-top: 1rem;
}

/* Corner accents */
.corner-accent {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    pointer-events: none;
}

.corner-accent.corner-tl {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    animation: cornerGlow 3s ease-in-out infinite;
}

.corner-accent.corner-tr {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
    animation: cornerGlow 3s ease-in-out infinite 0.75s;
}

.corner-accent.corner-bl {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
    animation: cornerGlow 3s ease-in-out infinite 1.5s;
}

.corner-accent.corner-br {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    animation: cornerGlow 3s ease-in-out infinite 2.25s;
}

@keyframes cornerGlow {
    0%, 100% {
        opacity: 0.3;
        box-shadow: 0 0 0 rgba(0, 255, 255, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .overlay-content {
        padding: 2rem 1rem;
    }
    
    .title-glitch {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }
    
    .instructions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .close-overlay-btn {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }
    
    .corner-accent {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: 480px) {
    .overlay-header {
        padding: 1.5rem 0.5rem;
        margin-bottom: 2rem;
    }
    
    .title-glitch {
        font-size: 2rem;
    }
    
    .title-subtitle {
        font-size: 0.85rem;
        letter-spacing: 2px;
    }
    
    .instruction-card {
        padding: 1rem;
    }
    
    .card-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .close-overlay-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
    }
}