/* style.css */
/* 1. THEME VARIABLES */
:root {
  --bg-color: #141414;
  --text-color: rgba(255, 255, 255, 0.7);
  --social-media-color: #888;
  --grid-color: #00ff6a;
  --grid-glow: 0 0 8px #00ff6a;
  --logo-filter: none;
  --header-logo-filter: none;
  --accent: #00ff6a;
  --overlay-bg: rgba(0, 0, 0, 0.85);
  --lightbox-bg: #1a1a1a;
  --lightbox-border: rgba(255, 255, 255, 0.06);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-text: rgba(255, 255, 255, 0.8);
  --input-placeholder: rgba(255, 255, 255, 0.25);
}
body.light-theme {
  --bg-color: #2de276;
  --text-color: #141414;
  --social-media-color: #141414;
  --grid-color: #000000;
  --grid-glow: none;
  --logo-filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(14%) hue-rotate(314deg) brightness(99%) contrast(84%);
  --header-logo-filter: var(--logo-filter);
  --accent: #141414;
  --overlay-bg: rgba(45, 226, 118, 0.9);
  --lightbox-bg: #ffffff;
  --lightbox-border: rgba(0, 0, 0, 0.08);
  --input-bg: rgba(0, 0, 0, 0.04);
  --input-border: rgba(0, 0, 0, 0.12);
  --input-text: #141414;
  --input-placeholder: rgba(0, 0, 0, 0.3);
}
/* 2. GENERAL */
body { margin:0; height:100vh; width:100vw; background-color:var(--bg-color); overflow:hidden; display:flex; justify-content:center; align-items:center; transition:background-color .4s ease; }
/* 3. LOADING SCREEN */
.loading-screen { position:fixed; inset:0; z-index:9999; background:#000; display:flex; justify-content:center; align-items:center; transition:opacity .8s ease, visibility .8s ease; }
.loading-screen.fade-out { opacity:0; visibility:hidden; }
#loading-canvas { position:absolute; inset:0; width:100%; height:100%; }
.loading-word { position:relative; z-index:2; font-family:"VT323",monospace; font-size:clamp(36px,8vw,72px); color:#00ff6a; letter-spacing:8px; text-transform:lowercase; opacity:0; transition:opacity .6s ease, text-shadow .6s ease; }
.loading-word.visible { opacity:1; text-shadow:0 0 20px rgba(0,255,106,0.5), 0 0 60px rgba(0,255,106,0.2); }
.loading-word.glitch { animation:glitchFlicker .15s steps(2) 3; }
@keyframes glitchFlicker { 0%{opacity:1;transform:translate(0)} 25%{opacity:.7;transform:translate(-2px,1px)} 50%{opacity:1;transform:translate(1px,-1px)} 75%{opacity:.8;transform:translate(-1px,0)} 100%{opacity:1;transform:translate(0)} }
/* 4. MAIN SITE */
.main-site { opacity:0; transition:opacity .8s ease; width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
.main-site.visible { opacity:1; }
/* 5. LAYOUT */
.ui-top-left,.ui-top-right,.ui-bottom-left,.ui-bottom-right { position:fixed; z-index:1000; }
.ui-top-left { top:25px; left:25px; }
.ui-top-right { top:20px; right:20px; }
.ui-bottom-left { bottom:25px; left:25px; }
.ui-bottom-right { bottom:25px; right:25px; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.header-logo { width:40px; height:auto; filter:var(--header-logo-filter); transition:filter .4s ease; }
.social-link { color:var(--social-media-color); text-decoration:none; display:flex; align-items:center; font-family:"VT323",monospace; font-size:16px; transition:color .4s ease; }
.social-link i { font-size:20px; margin-right:8px; }
.social-link span { text-transform:uppercase; }
.social-link:hover { color:var(--text-color); }
.location-display { font-family:"VT323",monospace; font-size:16px; color:var(--text-color); transition:color .4s ease; display:flex; }
#location-text.typing::after { content:"_"; animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0} }
/* 6. NOTIFY / EARLY ACCESS BUTTON */
.notify-btn { background:transparent; border:1px solid var(--input-border); color:var(--social-media-color); font-family:"VT323",monospace; font-size:14px; padding:6px 14px; cursor:pointer; display:flex; align-items:center; gap:8px; border-radius:2px; transition:color .3s ease, border-color .3s ease; letter-spacing:0.5px; }
.notify-btn:hover { color:var(--accent); border-color:var(--accent); }
.notify-btn i { font-size:13px; }
/* 7. THEME TOGGLE */
.theme-toggle { border:none; background:transparent; cursor:pointer; padding:0; color:var(--text-color); transition:color .4s ease, transform .2s ease; display:flex; justify-content:center; align-items:center; font-size:20px; }
.theme-toggle:hover { transform:scale(1.1); }
.theme-toggle .fa-sun { display:none; }
.theme-toggle .fa-moon { display:block; }
body.light-theme .theme-toggle .fa-sun { display:block; }
body.light-theme .theme-toggle .fa-moon { display:none; }
/* 8. CENTER ANIMATION & GRID */
.animation-container { position:relative; width:450px; height:400px; perspective:600px; }
.logo-wrapper { position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:10; }
.logo-wrapper img { width:100px; filter:var(--logo-filter); transition:filter .4s ease; }
.binary-glow-container { position:absolute; bottom:-15px; left:0; right:0; height:100%; transform-style:preserve-3d; transform:rotateX(75deg); }
.binary-grid { display:grid; justify-content:center; align-content:center; width:100%; height:100%; }
.binary-char { font-family:"VT323",monospace; font-size:16px; color:var(--grid-color); text-shadow:var(--grid-glow); opacity:0; transform:scale(0); transition:opacity .1s linear, transform .1s linear, color .4s ease, text-shadow .4s ease; }
/* 9. EMAIL LIGHTBOX */
.lightbox-overlay { position:fixed; inset:0; z-index:5000; background:var(--overlay-bg); display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.lightbox-overlay.active { opacity:1; visibility:visible; }
.lightbox-content { background:var(--lightbox-bg); border:1px solid var(--lightbox-border); border-radius:4px; padding:48px 40px 40px; width:380px; max-width:90vw; position:relative; text-align:center; transform:translateY(20px) scale(0.97); transition:transform .35s cubic-bezier(0.16,1,0.3,1); }
.lightbox-overlay.active .lightbox-content { transform:translateY(0) scale(1); }
.lightbox-close { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--social-media-color); font-size:16px; cursor:pointer; padding:4px; transition:color .2s ease; }
.lightbox-close:hover { color:var(--text-color); }
.lightbox-header { margin-bottom:20px; }
.lightbox-logo { width:36px; height:auto; filter:var(--logo-filter); transition:filter .4s ease; }
.lightbox-title { font-family:"VT323",monospace; font-size:22px; color:var(--accent); margin:0 0 12px; letter-spacing:0.5px; line-height:1.3; font-weight:normal; }
.lightbox-subtitle { font-family:"VT323",monospace; font-size:15px; color:var(--social-media-color); margin:0 0 28px; letter-spacing:0.3px; line-height:1.4; }
.form-row { display:flex; gap:0; }
.form-row input[type="email"] { flex:1; background:var(--input-bg); border:1px solid var(--input-border); border-right:none; border-radius:2px 0 0 2px; padding:10px 14px; font-family:"VT323",monospace; font-size:15px; color:var(--input-text); outline:none; transition:border-color .2s ease; letter-spacing:0.5px; }
.form-row input[type="email"]::placeholder { color:var(--input-placeholder); }
.form-row input[type="email"]:focus { border-color:var(--accent); }
.submit-btn { background:var(--accent); border:1px solid var(--accent); border-radius:0 2px 2px 0; color:#141414; padding:10px 16px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:opacity .2s ease; }
.submit-btn:hover { opacity:0.85; }
.form-success { display:none; align-items:center; justify-content:center; gap:8px; font-family:"VT323",monospace; font-size:16px; color:var(--accent); letter-spacing:0.5px; }
.form-success.show { display:flex; }
.hp-field { display:none; }