:root{    --primary-color:#00DBDE;   --accent-color:#00DBDE;   /* Digital Cyan */    /* The Orange */    --accent-cyan:#FFFFFF;   /* Secondary accent white */    /* Cyan from flyer */    --bg-color:#000000;   /* The Orange background */    --text-color:#00DBDE;   /* Main text cyan */    --card-bg:rgba(0,219,222,0.1);   --border-color:#00DBDE;   --font-heading:'Syncopate',sans-serif;   --font-body:'Space Grotesk',sans-serif;}*{    margin:0;   padding:0;   box-sizing:border-box;}html,body{    margin:0;   padding:0;   width:100%;   overflow-x:hidden;   /* Prevent horizontal scroll */}body{    font-family:var(--font-body);   background-color:#000000;   /* Grid Background Removed for 3D Wavy Grid */    /* background-image:... */    /* background-size:... */    color:var(--text-color);   min-height:100vh;   overflow-y:auto;   /* Allow vertically scrolling */    display:flex;   flex-direction:column;   justify-content:center;   align-items:center;   cursor:crosshair;   /* Brutalist cursor */}/* Noise Texture Overlay */body::after{    display:none;   /* Hide noise texture for cleaner look */    content:"";   position:fixed;   top:0;   left:0;   width:100%;   height:100%;   pointer-events:none;   z-index:9998;   /* Behind the text canvas but above background */    opacity:0.07;   background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');}#bg-canvas{    position:fixed;   top:0;   left:0;   width:100vw;   height:100vh;   z-index:0;   /* Allow clicks to pass through */    pointer-events:none;   mix-blend-mode:screen;   /* Blend nicely with text */}/* Scanline Overlay for Industrial Look */.background-overlay{    display:block;   position:fixed;   top:0;   left:0;   width:100vw;   height:100vh;   background:linear-gradient(rgba(18,16,16,0) 50%,           rgba(0,0,0,0.1) 50%),linear-gradient(90deg,           rgba(255,0,0,0.03),           rgba(0,255,0,0.01),           rgba(0,0,255,0.03));   background-size:100% 4px,3px 100%;   pointer-events:none;   z-index:9999;}.container{    position:relative;   z-index:1;   width:100%;   max-width:100vw;   /* Strict width control */    overflow-x:hidden;   /* Extra insurance for right-side space */    padding:4rem 2rem;   /* Add vertical spacing */    display:flex;   flex-direction:column;   align-items:center;   min-height:100%;   /* Ensure it takes full height */    justify-content:flex-start;   /* Removed space-between to avoid stretching */    gap:2rem;   /* Add gap between elements */}/* Marquee Styles */.marquee-wrapper{    width:120vw;   background:var(--accent-cyan);   color:var(--text-color);   padding:0.1rem 0;   overflow:hidden;   white-space:nowrap;   position:absolute;   top:85%;   /* Lowered from 50% */    left:-10vw;   transform:translateY(-50%) rotate(-10deg);   border-top:4px solid black;   border-bottom:4px solid black;   z-index:0;   opacity:0.5;   /* Lowered from 0.9 to match intro */    pointer-events:none;}.marquee-content{    display:inline-block;   animation:scroll 20s linear infinite;   font-family:var(--font-heading);   font-weight:700;   font-size:1.0rem;   text-transform:uppercase;}@keyframes scroll{    0%{        transform:translateX(0);  }    100%{        transform:translateX(-50%);  }}header{    text-align:center;   margin-top:2rem;   background:transparent;   z-index:2;   /* Removed border to focus on image */}.flyer-img{    display:none;   /* Hidden by default per request */    max-width:90%;   width:350px;   /* Adjust as needed */    height:auto;   filter:drop-shadow(8px 8px 0px rgba(0,0,0,1));}.header-small-title{    display:block;   font-family:'Syncopate',sans-serif;   font-size:2rem;   font-weight:700;   color:var(--text-color);   letter-spacing:0.1em;   cursor:pointer;   margin-bottom:1rem;   text-transform:uppercase;   text-shadow:none;   /* No effects */}h1.glitch{    font-family:var(--font-heading);   font-size:4rem;   font-weight:900;   text-transform:uppercase;   color:var(--text-color);   letter-spacing:-0.05em;   line-height:0.9;   text-shadow:none;   animation:none;   /* Removed neon glow */}.subtitle{    font-family:'Helvetica Neue',sans-serif;   font-weight:700;   font-size:1rem;   letter-spacing:0.2em;   color:var(--text-color);   margin-top:0.5rem;   text-transform:uppercase;   background:var(--text-color);   color:var(--bg-color);   display:inline-block;   padding:0.2rem 0.5rem;}main{    width:100%;   display:flex;   justify-content:center;   align-items:flex-start;   /* Changed from center to prevent clipping of long content */    flex-grow:1;   margin-top:2rem;   /* Add some spacing from nav */}.card.glass{    background:rgba(0,0,0,0.9);   /* Darker,less transparent background */    /* backdrop-filter:blur(10px);REMOVED for performance */    border:2px solid var(--border-color);   padding:3rem;   border-radius:0;   width:100%;   max-width:500px;   box-shadow:10px 10px 0px var(--border-color);   text-align:center;   transition:transform 0.2s ease,box-shadow 0.2s ease;   mix-blend-mode:normal;   will-change:transform;   /* Hint to browser */}.card.glass:hover{    transform:translate(-5px,-5px);   box-shadow:20px 20px 0px var(--border-color);   border-color:var(--border-color);}h2{    font-family:var(--font-heading);   margin-bottom:1.5rem;   font-weight:900;   letter-spacing:-0.02em;   font-size:2.5rem;   text-transform:uppercase;   border-bottom:4px solid var(--text-color);   padding-bottom:0.5rem;}.instruction{    font-size:1rem;   color:var(--text-color);   margin-bottom:2rem;   font-weight:600;   line-height:1.4;}/* Intro Mode Styles */body.intro-mode .container{    justify-content:center;   height:100vh;   /* Full viewport height for centering */    cursor:pointer;}.intro-title-wrapper{    position:relative;   display:none;   margin:0 auto;}.intro-title{    font-family:'Syncopate',sans-serif;   font-weight:900;   font-size:6rem;   /* Huge text */    text-transform:uppercase;   color:var(--text-color);   letter-spacing:-0.05em;   line-height:0.9;   text-align:center;   /* Removed heartbeat animation */    pointer-events:auto;   /* Enable hover interaction */    text-shadow:       -2px -2px 2px rgba(255,255,255,0.4),       2px 2px 5px rgba(0,0,0,0.5),       5px 5px 10px rgba(0,0,0,0.3);   transition:color 0.1s;}.intro-title:hover{    color:#fff;   /* 10% Shake & Radiating Noise */    animation:noise-aura 0.2s infinite linear;}@keyframes noise-aura{    0%{        transform:translate(0,0);       text-shadow:           0 0 0 transparent,           0 0 0 transparent;  }    10%{        transform:translate(0.02px,-0.02px);       text-shadow:           -2px 0 2px rgba(0,219,222,0.7),           2px 0 2px rgba(255,0,0,0.7);  }    20%{        transform:translate(-0.02px,0.02px);       text-shadow:           0 -2px 4px rgba(0,219,222,0.7),           0 2px 4px rgba(255,0,0,0.7),           0 0 10px rgba(255,255,255,0.5);  }    30%{        transform:translate(0.01px,-0.01px);       text-shadow:           -3px -2px 0 rgba(0,255,255,0.5),           3px 2px 0 rgba(255,0,0,0.5);  }    40%{        transform:translate(-0.01px,0.01px);       text-shadow:           2px 0 8px rgba(0,219,222,0.8),           -2px 0 8px rgba(255,59,29,0.8);  }    50%{        transform:translate(0.02px,0.02px);       text-shadow:           0 0 15px rgba(255,255,255,0.8),           -2px -2px 0 rgba(0,255,255,0.6);  }    60%{        transform:translate(-0.02px,-0.02px);       text-shadow:           0 3px 2px rgba(0,219,222,0.7),           0 -3px 2px rgba(255,0,0,0.7);  }    70%{        transform:translate(0.01px,0.02px);       text-shadow:           -3px 0 12px rgba(0,255,255,0.6),           3px 0 12px rgba(255,0,0,0.6);  }    80%{        transform:translate(-0.01px,-0.02px);       text-shadow:           1px 1px 0 rgba(0,219,222,0.8),           -1px -1px 0 rgba(255,0,0,0.8);  }    90%{        transform:translate(0.02px,-0.01px);       text-shadow:           -2px 0 2px rgba(0,255,255,0.6),           2px 0 2px rgba(255,0,0,0.6),           0 0 20px rgba(255,255,255,0.4);  }    100%{        transform:translate(0,0);       text-shadow:           0 0 0 transparent,           0 0 0 transparent;  }}.intro-hint{    position:absolute;   bottom:-15px;   left:5px;   font-family:var(--font-body);   font-size:0.9rem;   font-weight:900;   color:var(--text-color);   letter-spacing:0.1em;   opacity:0.8;   background:var(--text-color);   color:var(--bg-color);   padding:2px 6px;   line-height:1;}body.intro-mode .container .main-nav,body.intro-mode .container main{    display:none;   opacity:0;}body.intro-mode .container header{    margin-top:0;   /* Center perfectly */    transform:scale(1);}/* In Intro Mode:Show Text,Hide Image */body.intro-mode .container .intro-title-wrapper{    display:inline-block;}body.intro-mode .container .flyer-img,body.intro-mode .container .header-small-title{    display:none;}/* Fix Footer Position in Intro Mode */body.intro-mode footer{    position:absolute;   bottom:0;   left:0;   width:100%;   margin-top:0;   background:transparent;   border-top:none;   padding-bottom:2rem;}/* Events Active Mode - Header remains text */body.events-active .marquee-wrapper{    display:none;}/* Move Marquee in Intro Mode to avoid overlap */body.intro-mode .marquee-wrapper{    top:80%;   /* Moved Up */    /* Move to bottom */    transform:translateY(-50%) rotate(0deg);   /* Flatten rotation */    opacity:0.5;   /* Consistent opacity */}@keyframes heartbeat{    0%{        transform:scale(1);  }    50%{        transform:scale(1.02);  }    100%{        transform:scale(1);  }}/* Navigation Styles */.main-nav{    display:flex;   gap:1rem;   margin-bottom:2rem;   flex-wrap:wrap;   justify-content:center;   z-index:2;}.nav-btn{    background:rgba(0,0,0,0.5);   /* Transparent black for glass effect */    backdrop-filter:blur(10px);   /* Standard blur */    -webkit-backdrop-filter:blur(10px);   /* For Safari */    border:3px solid var(--text-color);   color:var(--text-color);   font-family:var(--font-heading);   font-size:1.2rem;   font-weight:700;   padding:10px 20px;   cursor:pointer;   text-transform:uppercase;   transition:all 0.2s ease;   min-width:120px;}.nav-btn:hover{    background:var(--text-color);   color:var(--accent-cyan);   transform:translateY(-3px);   box-shadow:5px 5px 0px rgba(0,0,0,1);}.input-group{    margin-bottom:1.5rem;   text-align:left;}label{    display:block;   font-family:var(--font-heading);   font-size:0.9rem;   margin-bottom:0.3rem;   color:var(--text-color);   text-transform:uppercase;}input{    width:100%;   padding:15px;   background:transparent;   border:3px solid var(--border-color);   border-radius:0;   color:var(--text-color);   font-family:var(--font-body);   font-size:1.1rem;   font-weight:bold;   transition:all 0.2s ease;}input::placeholder{    color:rgba(0,0,0,0.5);}input:focus{    outline:none;   border-color:var(--text-color);   background:rgba(0,0,0,0.05);   box-shadow:4px 4px 0px var(--text-color);}.neon-button{    width:100%;   padding:18px;   margin-top:1rem;   background:var(--text-color);   border:none;   color:var(--bg-color);   font-family:var(--font-heading);   font-size:1.5rem;   font-weight:900;   cursor:pointer;   position:relative;   overflow:hidden;   transition:all 0.2s ease;   text-transform:uppercase;   letter-spacing:0.05em;}.neon-button:hover{    background:white;   color:black;   box-shadow:10px 10px 0px var(--accent-cyan);   transform:translate(-4px,-4px);}.neon-button:active{    transform:translate(0,0);   box-shadow:none;}#message{    margin-top:1.5rem;   font-size:0.9rem;   min-height:1.2em;   font-weight:bold;}#message.success{    color:var(--text-color);   text-shadow:none;}footer{    width:100%;   margin-top:3rem;   padding:2rem;   text-align:center;   border-top:4px solid var(--text-color);   background:rgba(255,255,255,0.1);}#memberCounter{    display:inline-block;   background:var(--text-color);   color:var(--bg-color);   padding:0.5rem 1rem;   font-weight:900;   text-transform:uppercase;   letter-spacing:0.1em;   margin-bottom:1rem;   transform:rotate(0deg);   /* Straightened */    border:2px solid white;   transition:background 0.3s ease;}#memberCounter.updating{    animation:update-flash 0.5s ease;}@keyframes update-flash{    0%{        transform:rotate(0deg) scale(1);       background:var(--text-color);  }    50%{        transform:rotate(0deg) scale(1.1);       background:var(--accent-cyan);       color:black;  }    100%{        transform:rotate(0deg) scale(1);       background:var(--text-color);  }}footer p{    font-size:0.7rem;   color:var(--text-color);   font-weight:700;   letter-spacing:0.1em;   text-transform:uppercase;}/* Animations - Subtle Analog Noise instead of Glitch */@keyframes shake{    0%{        transform:translate(1px,1px) rotate(0deg);  }    10%{        transform:translate(-1px,-2px) rotate(-1deg);  }    20%{        transform:translate(-3px,0px) rotate(1deg);  }    30%{        transform:translate(3px,2px) rotate(0deg);  }    40%{        transform:translate(1px,-1px) rotate(1deg);  }    50%{        transform:translate(-1px,2px) rotate(-1deg);  }    60%{        transform:translate(-3px,1px) rotate(0deg);  }    70%{        transform:translate(3px,1px) rotate(-1deg);  }    80%{        transform:translate(-1px,-1px) rotate(1deg);  }    90%{        transform:translate(1px,2px) rotate(0deg);  }    100%{        transform:translate(1px,-2px) rotate(-1deg);  }}header:hover{    animation:shake 0.5s;   animation-iteration-count:infinite;}/* Mobile Responsiveness */@media (max-width:768px){    h1.glitch{        font-size:8vw;       /* Responsive font size */   }    .card.glass{        padding:2rem;       width:90%;       /* Ensure card fits within screen */        margin:0 auto;  }    /* Intro Title Mobile Fix */    .intro-title{        font-size:9.5vw;       /* Significantly reduced to guarantee fit */        padding:0 5px;       width:100%;       line-height:1.1;       display:block !important;       visibility:visible !important;       opacity:1 !important;       margin-bottom:2rem;       /* Ensure space for CLICK hint */   }    /* Force wrapper to be visible and robust */    body.intro-mode .container .intro-title-wrapper{        display:block !important;       width:100% !important;       opacity:1 !important;  }    /* Adjust Marquee */    .marquee-wrapper{        font-size:0.8rem;       padding:0.3rem 0;       border-top-width:2px;       border-bottom-width:2px;  }    /* Intro Marquee Position */    body.intro-mode .marquee-wrapper{        top:85%;  }    footer{        padding:1rem;  }    #memberCounter{        font-size:0.8rem;       padding:0.3rem 0.6rem;  }    footer p{        font-size:0.6rem;  }}@media (max-width:480px){    .container{        padding:2rem 1rem;       /* Reduce padding on very small screens */   }    .header-small-title{        font-size:1.5rem;       /* Smaller header title */   }}/* --- Advanced Button Animations (Loader Style) --- */.astro-loader-btn{    position:relative;   overflow:hidden;   background:linear-gradient(135deg,rgb(26,26,26) 0%,rgb(10,10,10) 100%);   border:1px solid var(--border-color);   box-shadow:rgba(0,0,0,0.4) 0px 8px 32px,rgba(0,219,222,0.1) 0px 1px 0px inset,rgba(0,0,0,0.5) 0px -1px 0px inset;   transition:all 0.4s cubic-bezier(0.4,0,0.2,1);   /* Ensure existing button sizing is respected but layout allows for absolute children */    display:inline-flex;   align-items:center;   justify-content:center;   z-index:1;}.astro-loader-btn:hover{    transform:translateY(-2px);   box-shadow:0 12px 40px rgba(0,0,0,0.5),       inset 0 1px 0 rgba(0,219,222,0.15),       inset 0 -1px 0 rgba(0,0,0,0.6),       0 0 0 2px rgba(0,219,222,0.3);   border-color:var(--accent-cyan);}/* Background gradient loader effect */.btn-loader-bg{    position:absolute;   top:0;   left:0;   height:100%;   width:100%;   z-index:1;   background-color:transparent;   pointer-events:none;   /* Scanline mask */    mask:repeating-linear-gradient(90deg,transparent 0,transparent 4px,black 5px,black 6px);   -webkit-mask:repeating-linear-gradient(90deg,transparent 0,transparent 4px,black 5px,black 6px);}.btn-loader-animator{    content:'';   position:absolute;   top:0;   left:0;   width:100%;   height:100%;   /* Cyan Gradient Mix */    background-image:       radial-gradient(circle at 50% 50%,#00DBDE 0%,transparent 50%),       radial-gradient(circle at 45% 45%,#00FFFF 0%,transparent 45%),       radial-gradient(circle at 55% 55%,#22D3EE 0%,transparent 45%);   /* Central spotlight mask */    mask:radial-gradient(circle at 50% 50%,transparent 0%,transparent 10%,black 25%);   -webkit-mask:radial-gradient(circle at 50% 50%,transparent 0%,transparent 10%,black 25%);   animation:btn-transform-anim 3s infinite alternate,btn-opacity-anim 5s infinite;   animation-timing-function:cubic-bezier(0.6,0.8,0.5,1);   filter:drop-shadow(0 0 6px rgba(0,219,222,0.4));   /* Reduced intensity */    opacity:0.6;   /* Moderate light */}/* Text Container */.btn-text-content{    position:relative;   z-index:2;   display:flex;   gap:0.1em;   /* Tighter letter spacing for Syncopate */    pointer-events:none;}.btn-letter{    display:inline-block;   color:#fff;   opacity:0;   /* Starts invisible,handled by delay or fallback */    animation:btn-letter-anim 4s infinite linear;   /* Animation delay is set in JS */}/* Animations */@keyframes btn-transform-anim{    0%{        transform:translate(-30%);  }    100%{        transform:translate(30%);  }}@keyframes btn-opacity-anim{    0%,   100%{        opacity:0;  }    20%{        opacity:0.8;  }    80%{        opacity:0;  }}@keyframes btn-letter-anim{    0%{        opacity:0.3;       text-shadow:none;  }    5%{        opacity:1;       text-shadow:0 0 5px #00DBDE,0 0 10px #00DBDE;       /* Moderate glow */        transform:scale(1.1) translateY(-1px);       color:white;  }    20%{        opacity:0.7;       /* Keep visible longer */        transform:scale(1);       text-shadow:none;       color:var(--text-color);  }    100%{        opacity:0.3;       color:var(--text-color);  }}/* --- Title Special Animation (Loader Style Adaption) --- */.astro-loader-title{    position:relative;   display:inline-block;   /* Keep text flow */    /* No border or box shadow by default for the title,just the glowing effects */    background:transparent;   padding:0 1rem;   /* Slight padding for the glow effects to not clip */}/* Specific overrides for the Title size */.astro-loader-title .btn-loader-bg{    /* Make the background scanline effect more subtle and wider for the title */    mask:repeating-linear-gradient(90deg,transparent 0,transparent 4px,black 5px,black 10px);   -webkit-mask:repeating-linear-gradient(90deg,transparent 0,transparent 4px,black 5px,black 10px);   opacity:0.5;}.astro-loader-title .btn-loader-animator{    /* Adjust gradient for larger area */    background-image:       radial-gradient(circle at 50% 50%,rgba(0,219,222,0.4) 0%,transparent 60%),       radial-gradient(circle at 45% 45%,rgba(0,255,255,0.3) 0%,transparent 50%),       radial-gradient(circle at 55% 55%,rgba(34,211,238,0.3) 0%,transparent 50%);   filter:drop-shadow(0 0 15px rgba(0,219,222,0.6));}.astro-loader-title .btn-text-content{    /* Ensure the text breaks out if needed,though title is usually one line */    justify-content:center;}.astro-loader-title .btn-letter{    /* Text Shadow optimization for big text */    animation:title-letter-anim 6s infinite linear;}@keyframes title-letter-anim{    0%{        opacity:0.15;       text-shadow:none;       color:rgba(0,219,222,0.3);  }    5%{        opacity:1;       text-shadow:0 0 10px #00DBDE,0 0 20px #00DBDE,0 0 40px #00DBDE;       /* Intense glow */        transform:scale(1.05) translateY(-2px);       color:#fff;  }    20%{        opacity:0.8;       transform:scale(1);       text-shadow:0 0 5px #00DBDE;       color:var(--text-color);  }    100%{        opacity:0.15;       color:rgba(0,219,222,0.3);       text-shadow:none;  }}/* --- New Navigation Button Style (Shiny Gradient Pills) --- */.nav-shiny-btn{    position:relative;   display:inline-flex;   align-items:center;   justify-content:space-between;   gap:0.75rem;   padding:0.6rem 1.5rem;   border-radius:9999px;   /* Rounded full */    background:linear-gradient(135deg,rgba(8,51,68,0.4) 0%,rgba(0,0,0,0.6) 100%);   /* sky-900/40 to black */    border:2px solid rgba(0,219,222,0.3);   /* Cyan border (sky-500/30 equiv) */    box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);   /* shadow-2xl */    backdrop-filter:blur(24px);   /* backdrop-blur-xl */    overflow:hidden;   cursor:pointer;   transition:all 0.5s cubic-bezier(0,0,0.2,1);   /* ease-out */    text-decoration:none;   -webkit-tap-highlight-color:transparent;   /* Reset generic button styles */    color:white;   font-family:var(--font-heading);   text-transform:uppercase;   min-width:140px;}.nav-shiny-btn:hover{    box-shadow:0 20px 25px -5px rgba(0,219,222,0.3),0 10px 10px -5px rgba(0,219,222,0.1);   /* shadow-sky */    transform:scale(1.02) translateY(-4px);   border-color:rgba(0,219,222,0.6);   background:linear-gradient(135deg,rgba(8,51,68,0.6) 0%,rgba(0,0,0,0.8) 100%);}.nav-shiny-btn:active{    transform:scale(0.95);}/* Shiny Sweep Effect */.shiny-sweep{    position:absolute;   inset:0;   width:100%;   height:100%;   background:linear-gradient(90deg,transparent,rgba(0,219,222,0.3),transparent);   transform:translateX(-100%);   transition:transform 1s ease-out;   pointer-events:none;}.nav-shiny-btn:hover .shiny-sweep{    transform:translateX(100%);}/* Glow Effect */.shiny-glow{    position:absolute;   inset:0;   border-radius:9999px;   background:linear-gradient(90deg,rgba(0,219,222,0.1),rgba(0,219,222,0.2),rgba(0,219,222,0.1));   opacity:0;   transition:opacity 0.5s ease;   pointer-events:none;}.nav-shiny-btn:hover .shiny-glow{    opacity:1;}/* Content Wrapper */.shiny-content{    position:relative;   z-index:10;   display:flex;   align-items:center;   gap:0.75rem;   width:100%;}.shiny-text{    flex:1;   text-align:left;   font-size:1rem;   /* text-sm equivalent roughly */    font-weight:700;   color:white;   text-shadow:0 1px 2px rgba(0,0,0,0.5);   transition:color 0.3s;}.nav-shiny-btn:hover .shiny-text{    color:#fff;   text-shadow:0 0 8px rgba(0,219,222,0.5);}.shiny-icon{    opacity:0.4;   transition:all 0.3s;   display:flex;   align-items:center;}.nav-shiny-btn:hover .shiny-icon{    opacity:1;   transform:translateX(4px);}