html.fouc-factor{ opacity:0; filter:alpha(opacity=0); } 
		
		:root {
    /* CITADELLE RED (Default) */
    --bg-color: #050505;
    --primary: #ff0000;
    --secondary: #550000;
    --text-main: #ffffff;
    --scanline-tint: rgba(255, 0, 0, 0.06);
    --font-tech: 'Share Tech Mono', monospace;
    --font-seg: 'Almendra', serif;
    --font-mono: 'VT323', monospace;
    --white: #ffffff;
    --grey: #333333;
    --red: #ff0000;
    --dark-grey: #222222;
    --selection-bg: #ff0033;  /* Red selection background */
    --selection-color: #0a0a0a; /* Dark text on selection */
}

/* WORDSTAR BLUE (Classic) */
body.classic-mode {
    --bg-color: #0000AA;
    --primary: #FFFF00;
    --secondary: #00FFFF;
    --text-main: #FFFFFF;
    --scanline-tint: rgba(255, 255, 255, 0.1);
    --white: #ffffff;
    --grey: #333333;
    --red: #FFFF00;
    --dark-grey: #222222;
    --selection-bg: #FFFF00;  /* Yellow selection for blue theme */
    --selection-color: #0000AA; /* Blue text on selection */
}

/* === SELECTION STYLES === */
::selection {
    background: var(--selection-bg);
    color: var(--selection-color);
    text-shadow: none;
}

::-moz-selection {  /* Firefox prefix */
    background: var(--selection-bg);
    color: var(--selection-color);
    text-shadow: none;
}

		body {
			background-color: var(--bg-color);
			color: var(--text-main);
			margin: 0;
			font-family: var(--font-tech);
			overflow-x: hidden;
			transition: background-color 0.5s ease;
		}

		/* --- SCANLINE OVERLAY --- */
		body::after {
			content: " ";
			display: block;
			position: fixed;
			top: 0; left: 0; bottom: 0; right: 0;
			background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
						linear-gradient(90deg, var(--scanline-tint), rgba(0, 0, 0, 0.02), var(--scanline-tint));
			background-size: 100% 2px, 3px 100%;
			pointer-events: none;
			z-index: 999;
		}

		a { text-decoration: none; color: inherit; transition: 0.3s; }
		a:hover { color: var(--primary); text-shadow: 0 0 8px var(--primary); }

		/* --- 1. THE GLITCH TRIANGLE (Top Left Anchor) --- */
		.fixed-rail {
			position: fixed;
			top: 20px;
			left: 20px;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			gap: 10px;
			mix-blend-mode: exclusion;
		}

		/* --- BACKGROUND ANCHOR (The Rotating Triangle) --- */
.glitch-triangle {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80vh;
    height: 80vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.15;
    animation: rotateTriangle 60s linear infinite;
}
.rotator {
    display: inline-block; /* Necessary for rotation to work */
    animation: spin 5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* The SVG Triangle Styling */
.glitch-triangle path {
    fill: none;
    stroke: var(--primary); /* Uses current theme color */
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

@keyframes rotateTriangle {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

		.anchor-logo {
			width: 30px;
			height: 30px;
		}

		.left-rail {
			position: fixed;
			top: 100px;
			left: 20px;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.menu-trigger {
			background: transparent;
			border: 1px solid #333;
			color: var(--text-main);
			cursor: pointer;
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.menu-trigger:hover {
			border-color: var(--primary);
		}

		.witch-symbol {
			stroke: var(--primary);
		}

		.mono-caption {
			font-family: var(--font-mono);
			font-size: 10px;
			writing-mode: vertical-rl;
			color: var(--primary);
		}

		/* --- 2. THE CINEMA DRAWER (Full Screen Slide-out) --- */
		.term-trigger {
			position: fixed;
			top: 20px;
			right: 20px;
			z-index: 1001;
			border: 1px solid var(--primary);
			color: var(--primary);
			background: rgba(0,0,0,0.9);
			padding: 8px 12px;
			font-family: var(--font-tech);
			cursor: pointer;
			font-size: 0.8rem;
			text-transform: uppercase;
		}

		#cinema-drawer {
			position: fixed; top: 0; left: -100%; 
			width: 100%; height: 100vh;
			background: #000; 
			z-index: 2000; 
			border-right: 2px solid var(--primary);
			transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			display: flex; flex-direction: column;
			padding: 60px 20px;
			box-sizing: border-box;
		}

		.cinema-screen {
			width: 100%;
			height: 60%;
			border: 1px solid #333;
			background: #111;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
		}

		.splash-logo {
			width: 100%;
			height: auto;
			margin-bottom: 20px;
		}

		.logo-text {
			fill: var(--white);
		}

		.logo-dot {
			fill: var(--dark-grey);
		}

		.logo-x {
			fill: var(--white);
		}

		/* --- STAGGERED LOOPING GLITCH EFFECTS --- */

/* 1. Typewriter Reveal - Base timing: 0s start */
.logo-text {
    opacity: 0;
    animation: typewriterReveal 4s steps(30) infinite;
}

/* --- STAGGERED LOOPING GLITCH EFFECTS (Multi-instance support) --- */

/* Container - constrained size */
.splash-logo-container, .logo-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: auto;
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    animation: neonPulse 3s ease-in-out 1.2s infinite;
}

.splash-logo-container svg, .logo-container svg {
    width: 100%;
    height: auto;
    display: block;
}

/* 1. Typewriter Reveal - Base timing: 0s start */
.logo-text {
    opacity: 0;
    animation: typewriterReveal 4s steps(30) infinite;
}

/* 2. The Red X - delays start slightly, glitches independently */
.logo-x {
    fill: var(--red);
    opacity: 0;
    animation: 
        typewriterReveal 4s steps(30) 0.3s infinite,
        rgbGlitch 0.4s ease-in-out 1.5s infinite;
}

/* 3. The Dot - pops in last */
.logo-dot {
    opacity: 0;
    animation: typewriterReveal 4s steps(30) 0.6s infinite;
}

/* 5. Scanline Sweep - constant background texture */
.splash-logo-container::after, .logo-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    background-size: 100% 6px;
    pointer-events: none;
    opacity: 0;
    animation: fadeInScanline 0.1s 0.8s forwards, scanlinesSweep 2s linear 0.8s infinite;
}

/* --- KEYFRAMES --- */
@keyframes typewriterReveal {
    0%, 30% { opacity: 0; clip-path: inset(0 100% 0 0); }
    35% { opacity: 1; }
    85%, 100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes rgbGlitch {
    0%, 90%, 100% { transform: translate(0, 0); filter: drop-shadow(0 0 5px var(--red)); }
    92% { transform: translate(-3px, 1px); filter: drop-shadow(-2px 0 red) drop-shadow(2px 0 cyan); }
    94% { transform: translate(3px, -1px); filter: drop-shadow(2px 0 red) drop-shadow(-2px 0 cyan); }
    96% { transform: translate(-2px, 2px); filter: drop-shadow(-1px 0 red) drop-shadow(1px 0 cyan); }
    98% { transform: translate(2px, -2px); filter: drop-shadow(1px 0 red) drop-shadow(-1px 0 cyan); }
}

@keyframes neonPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 5px rgba(255, 0, 0, 0.3)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 30px rgba(255, 0, 0, 0.6)); }
}

@keyframes scanlinesSweep {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}

@keyframes fadeInScanline {
    to { opacity: 1; }
}
/* --- KEYFRAMES --- */
@keyframes typewriterReveal {
    0%, 30% { opacity: 0; clip-path: inset(0 100% 0 0); }
    35% { opacity: 1; }
    85%, 100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes rgbGlitch {
    0%, 90%, 100% { transform: translate(0, 0); filter: drop-shadow(0 0 5px var(--red)); }
    92% { transform: translate(-3px, 1px); filter: drop-shadow(-2px 0 red) drop-shadow(2px 0 cyan); }
    94% { transform: translate(3px, -1px); filter: drop-shadow(2px 0 red) drop-shadow(-2px 0 cyan); }
    96% { transform: translate(-2px, 2px); filter: drop-shadow(-1px 0 red) drop-shadow(1px 0 cyan); }
    98% { transform: translate(2px, -2px); filter: drop-shadow(1px 0 red) drop-shadow(-1px 0 cyan); }
}

@keyframes neonPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 5px rgba(255, 0, 0, 0.3)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 30px rgba(255, 0, 0, 0.6)); }
}

@keyframes scanlinesSweep {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}

@keyframes fadeInScanline {
    to { opacity: 1; }
}
		/* --- 3. HERMES POPOUT (Bottom Right Anchor) --- */
		.hermes-anchor {
			position: fixed;
			bottom: 30px;
			right: 20px;
			z-index: 1500;
		}

		.hermes-btn {
			width: 50px; height: 50px;
			background: #000;
			border: 1px solid var(--primary);
			color: var(--primary);
			border-radius: 50%;
			font-family: var(--font-seg);
			font-size: 1.5rem;
			cursor: pointer;
			box-shadow: 0 0 10px rgba(255,0,0,0.2);
			display: flex; align-items: center; justify-content: center;
		}
		.hermes-btn:hover { background: var(--primary); color: #000; }

		.hermes-window {
			display: none;
			position: absolute;
			bottom: 70px; right: 0;
			width: 300px;
			background: rgba(5, 5, 5, 0.95);
			border: 1px solid var(--primary);
			backdrop-filter: blur(10px);
			padding: 15px;
			box-shadow: -5px 5px 20px rgba(0,0,0,0.5);
		}

		.hermes-output {
			height: 150px;
			background: #111;
			border: 1px solid #333;
			color: #ccc;
			font-family: var(--font-mono);
			font-size: 0.8rem;
			padding: 10px;
			overflow-y: auto;
			margin-bottom: 10px;
			white-space: pre-wrap;
		}

		/* --- MAIN LAYOUT (Vertical Mobile Frame) --- */
		main {
			max-width: 600px; /* Forces the Mobile Vertical look on Desktop */
			margin: 0 auto;
			border-left: 1px solid #1a1a1a;
			border-right: 1px solid #1a1a1a;
			background: rgba(0,0,0,0.2);
			min-height: 100vh;
		}

		section {
			padding: 40px 20px;
			border-bottom: 1px solid #1a1a1a;
			position: relative;
		}

		/* --- TITLE LOGO INTEGRATION --- */
		.mega-title {
			font-family: var(--font-seg);
			font-size: 4.5rem; /* Increased size */
			line-height: 0.8;
			color: var(--text-main);
			letter-spacing: -2px;
		}
		
		.title-o-logo {
			height: 0.7em; /* Matches font height */
			width: 0.7em;
			vertical-align: baseline;
			margin-bottom: -5px; /* Fine tune vertical alignment */
			animation: spin 10s linear infinite;
			filter: drop-shadow(0 0 10px var(--primary)); /* Makes it glow with theme */
		}
		
		@keyframes spin { 100% { transform: rotate(360deg); } }

		/* --- SIGIL HASH --- */
		.sigil-container {
			text-align: center;
			padding: 20px 0;
		}
		canvas#sigilCanvas {
			max-width: 100%;
			height: auto;
			border: 1px solid #333;
			background: rgba(0,0,0,0.5);
		}
		input.sigil-input {
			background: transparent;
			border: none;
			border-bottom: 2px solid var(--primary);
			color: var(--text-main);
			font-family: var(--font-tech);
			font-size: 1.5rem;
			width: 100%;
			text-align: center;
			margin-top: 15px;
			outline: none;
		}

		/* --- FOOTER STYLES --- */
		.footer-white {
			background: var(--primary);
			padding: 40px 20px;
			text-align: center;
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: 1px;
			position: relative; 
			z-index: 2;
		}
		
		.footer-grey {
			background-color: var(--grey);
			color: #555;
			padding: 40px 20px;
			text-align: center;
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: 1px;
			position: relative; 
			z-index: 2;
		}
		
		.footer-grey a { color: #888; text-decoration: none; margin: 0 10px; }
		.footer-grey a:hover { color: #fff; }

	.power-btn {
    background: transparent;
    border: 1px solid var(--grey);
    color: var(--text-main);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 10px;
    margin-top: 10px;
}

.power-btn.power-on {
    color: var(--bg-color);  /* Uses the background color for text - dark on red, dark blue on yellow */
    border-color: var(--primary);
    background: var(--primary);
}
		
		.w-2 { width: 0.5rem; }
		.h-2 { height: 0.5rem; }
		.bg-zinc-900 { background-color: #18181b; }
		.rounded-full { border-radius: 9999px; }

		/* --- 6. MENU OVERLAY (The Cube Riot) --- */
		.menu-overlay {
			position: fixed; inset: 0; background: rgba(5,5,5,0.98);
			z-index: 2000; display: none;
			flex-direction: column; align-items: center; justify-content: center;
			backdrop-filter: blur(5px);
			overflow-y: auto;
			padding: 40px 20px;
		}
		
		.menu-grid { 
			display: flex; 
			flex-wrap: wrap; 
			justify-content: center; 
			gap: 60px;
			max-width: 1200px;
			margin: 0 auto;
		}
		
		.menu-btn {
			background: transparent;
			border: 1px solid var(--primary);
			color: var(--primary);
			padding: 10px 20px;
			cursor: pointer;
			font-family: var(--font-tech);
			margin-bottom: 30px;
		}
		
		/* 3D Prisms */
		.prism-wrapper { position: relative; }
		.prism-label { text-align:center; font-size:10px; color:var(--red); margin-bottom:15px; letter-spacing: 3px; }
		.prism-scene { width: 120px; height: 80px; perspective: 800px; }
		.prism {
			width: 100%; height: 100%; position: relative;
			transform-style: preserve-3d;
			transform: translateZ(-35px);
			animation: spinPrism 8s infinite linear;
		}
		.prism:hover { animation-play-state: paused; }
		
		.face {
			position: absolute; width: 120px; height: 80px;
			border: 1px solid var(--red); background: rgba(0,0,0,0.9);
			color: white; display: flex; align-items: center; justify-content: center;
			font-size: 12px; font-weight: bold; text-transform: uppercase; cursor: pointer;
			box-shadow: 0 0 10px rgba(255,0,51,0.2);
			text-align: center;
			line-height: 1.2;
		}
		/* 3-Sided Logic */
		.face-1 { transform: rotateY(0deg) translateZ(35px); }
		.face-2 { transform: rotateY(120deg) translateZ(35px); }
		.face-3 { transform: rotateY(240deg) translateZ(35px); }
		@keyframes spinPrism { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
		
		/* --- FOOTER 3D --- */
		.footer-3d {
			height: 300px;
			position: relative;
			background: #000;
			overflow: hidden;
			border-top: 1px solid var(--primary);
		}
		#three-footer { width: 100%; height: 100%; }
		
		.footer-content {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			pointer-events: none;
			display: flex; align-items: center; justify-content: center;
			z-index: 2;
		}
		.footer-content a { pointer-events: auto; background: #000; padding: 5px; font-size: 10px; border: 1px solid #333; }
		
		#toq-qr {
			max-width: 100px;
			cursor: pointer;
			margin-top: 20px;
		}
		
		#toq-qr.expanded {
			max-width: 300px;
		}
		
		.menu-link {
			color: var(--primary);
			text-decoration: none;
		}
		
		.menu-link:hover {
			text-decoration: underline;
		}
		
		#system-message, #status-message {
			font-family: var(--font-mono);
			font-size: 10px;
			margin: 5px 0;
		}
		
		marquee {
			color: var(--primary);
			font-family: var(--font-mono);
		}
		
		/* Fix for duplicate footers */
		.footer-grey:last-of-type {
			position: relative;
			z-index: 1;
		}
		/* --- 1. THE RED SCROLLBAR --- */
::-webkit-scrollbar {
    width: 16px; /* Thin and slick */
}
::-webkit-scrollbar-track {
    background: var(--black); 
}
::-webkit-scrollbar-thumb {
    background: var(--red); 
    border-radius: 0; /* Keep it square/sharp for the tech feel */
}
::-webkit-scrollbar-thumb:hover {
    background: #ff3355; /* Slight glow on hover */
}
/* --- VHS RED JUMP/BOUNCE EFFECT --- */
/* --- 1. THE RED FLASH (Global Tint) --- */
/* Keeps the screen flash, but slightly more subtle to let lines pop */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #ff0000;
  mix-blend-mode: hard-light; 
  opacity: 0;
  z-index: 9998;
  pointer-events: none;
  animation: vhs-red-bloom 8s infinite linear;
}

/* --- 2. THE BROKEN TRACKING LINES (The "Bounce") --- */
body::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: 5vh; /* Much thinner container */
  
  /* 
     We paint 3 distinct lines using multiple background gradients.
     Format: linear-gradient(...) Position / Size No-Repeat 
  */
  background: 
    /* A. Main Center Line: White-hot, spans 80% of width, 2px thick */
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0.95) 60%, transparent 100%) 
    center center / 80% 2px no-repeat,
    
    /* B. Top Adornment: Sharp Red, Left side, Short (200px), 1px thick */
    linear-gradient(90deg, transparent, #ff0000, transparent) 
    20% 10% / 200px 1px no-repeat,
    
    /* C. Bottom Adornment: Faint Red, Right side, Medium (350px), 1px thick */
    linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.6), transparent) 
    70% 90% / 350px 1px no-repeat;

  top: -10vh; /* Start off screen */
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: screen; /* Makes the lines glow */
  opacity: 0;
  
  /* 8s loop, same as the flash */
  animation: vhs-tracking-bounce 8s infinite linear;
}

/* --- KEYFRAMES --- */

@keyframes vhs-red-bloom {
  0%, 90% { opacity: 0; }
  91% { opacity: 0.4; } /* Quick red flash */
  93% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes vhs-tracking-bounce {
  0%, 90% { 
    top: -10vh;
    opacity: 0;
  }
  91% { 
    opacity: 1;
  }
  /* The lines slide rapidly down */
  96% { 
    top: 110vh; 
    opacity: 1;
  }
  100% { 
    top: 110vh;
    opacity: 0;
  }
}
		  /* ----------  CRT overlay  ---------- */
        #crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  /* Inner shadow creates the curved screen vignette look */
  box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

.scanline {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5) 50%);
  background-size: 100% 4px;
  /* Combines the rolling movement with a flicker */
  animation: scanline 10s linear infinite, flicker 0.15s infinite;
}

/* Moves the lines */
@keyframes scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* Creates the electrical flicker */
@keyframes flicker {
  0% { opacity: 0.3; }
  50% { opacity: 0.4; }
  100% { opacity: 0.3; }
}		
#toq-qr {
  width: 188px;
  border: 1px solid var(--white);
  padding: 2px;
  background: #000;
  cursor: zoom-in;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 10001;
}

#toq-qr:hover,
#toq-qr:active {  /* ← Fixed: changed #to-qr to #toq-qr */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  border-color: var(--red);
}

#toq-qr.expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3.5);
  z-index: 999999;
  border-color: var(--white);
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.9), 0 0 50px rgba(255, 255, 255, 0.8);
  cursor: zoom-out;
}
		
/* Export button styling */
.export-btn {
    background: transparent;
    border: 1px solid var(--primary, #FF0000);
    color: var(--primary, #FF0000);
    padding: 8px 15px;
    margin-top: 15px;
    font-family: var(--font-seg, monospace);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.export-btn:hover {
    background: var(--primary, #FF0000);
    color: #000;
    box-shadow: 0 0 20px var(--primary, #FF0000);
    transform: scale(1.02);
}

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

.classic-mode .export-btn {
    border-color: #FFFF00;
    color: #FFFF00;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}

.classic-mode .export-btn:hover {
    background: #FFFF00;
    color: #000;
    box-shadow: 0 0 20px #FFFF00;
}

.btn-icon {
    font-size: 14px;
    filter: drop-shadow(0 0 5px currentColor);
}

.btn-text {
    font-weight: bold;
}

/* Container for buttons if you want them side by side */
.export-container {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.export-container .export-btn {
    width: auto;
    flex: 1;
}
/* --- GYRO-CORE LOGO SYSTEM --- */
.gyro-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    perspective: 500px; /* Deep 3D space */
}

/* The Anchor Logo (Center) */
.anchor-logo {
    width: 40px;
    height: 40px;
    z-index: 10;
    filter: drop-shadow(0 0 5px var(--red));
    transition: transform 0.3s ease;
}

.gyro-container:hover .anchor-logo {
    transform: scale(1.1);
}

/* The Orbital Rings */
.gyro-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    border-radius: 50%;
    pointer-events: none; /* Let clicks pass through to logo */
}

/* Ring 1: The Red Orbit */
.ring-1 {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border: 1px solid var(--red);
    border-left-color: transparent;
    border-right-color: transparent;
    animation: gyro-spin 4s infinite linear;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* Ring 2: The White Ellipse */
.ring-2 {
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    animation: gyro-spin-reverse 7s infinite linear;
}

/* Ring 3: The Fast Data Stream */
.ring-3 {
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    border-top: 2px solid #333;
    animation: gyro-tumble 5s infinite linear;
}

/* Animations */
@keyframes gyro-spin {
    0% { transform: rotateX(70deg) rotateZ(0deg); }
    100% { transform: rotateX(70deg) rotateZ(360deg); }
}

@keyframes gyro-spin-reverse {
    0% { transform: rotateX(-70deg) rotateY(20deg) rotateZ(360deg); }
    100% { transform: rotateX(-70deg) rotateY(20deg) rotateZ(0deg); }
}

@keyframes gyro-tumble {
    0% { transform: rotateY(0deg) rotateZ(45deg); }
    100% { transform: rotateY(360deg) rotateZ(45deg); }
}

/* --- THE GLITCH TRIANGLE OVERLAY --- */
.glitch-triangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20; /* Top layer for clicking */
    cursor: pointer;
    background: transparent;
}

.glitch-triangle:active {
    background: rgba(255, 0, 0, 0.1);
}

/* --- MENU TRIGGER PRIME --- */
.menu-trigger-prime {
    background: #050505;
    border: 1px solid #333;
    color: var(--red);
    width: 50px; /* Bigger touch target */
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 1px #000;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.menu-trigger-prime:hover {
    border-color: var(--red);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    transform: translateY(-2px);
}

.menu-trigger-prime:active {
    background: var(--red);
    color: #000;
    transform: translateY(1px);
}

.trigger-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 2px;
}

.trigger-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Optional: Scanline effect on button */
.menu-trigger-prime::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    animation: btn-scan 2s infinite linear;
    pointer-events: none;
}

@keyframes btn-scan {
    0% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.rail-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'VT323', monospace;
    color: #555;
    margin: 20px 0;
    letter-spacing: 4px;
    font-size: 14px;
}
/* --- GYRO-CORE LOGO SYSTEM --- */
.gyro-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    perspective: 500px; /* Deep 3D space */
}

/* The Anchor Logo (Center) */
.anchor-logo {
    width: 40px;
    height: 40px;
    z-index: 10;
    filter: drop-shadow(0 0 5px var(--red));
    transition: transform 0.3s ease;
}

.gyro-container:hover .anchor-logo {
    transform: scale(1.1);
}

/* The Orbital Rings (The missing piece) */
.gyro-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    border-radius: 50%;
    pointer-events: none; /* Let clicks pass through to logo */
}

/* Ring 1: The Red Orbit */
.ring-1 {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border: 1px solid var(--red);
    border-left-color: transparent;
    border-right-color: transparent;
    animation: gyro-spin 4s infinite linear;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* Ring 2: The White Ellipse */
.ring-2 {
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    animation: gyro-spin-reverse 7s infinite linear;
}

/* Ring 3: The Fast Data Stream */
.ring-3 {
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    border-top: 2px solid #333;
    animation: gyro-tumble 5s infinite linear;
}

/* Glitch Link Position */
.glitch-link {
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 10px;
    color: #444;
    text-decoration: none;
}

/* Animations */
@keyframes gyro-spin {
    0% { transform: rotateX(70deg) rotateZ(0deg); }
    100% { transform: rotateX(70deg) rotateZ(360deg); }
}

@keyframes gyro-spin-reverse {
    0% { transform: rotateX(-70deg) rotateY(20deg) rotateZ(360deg); }
    100% { transform: rotateX(-70deg) rotateY(20deg) rotateZ(0deg); }
}

@keyframes gyro-tumble {
    0% { transform: rotateY(0deg) rotateZ(45deg); }
    100% { transform: rotateY(360deg) rotateZ(45deg); }
}

/* Menu Trigger Styling Update */
.menu-trigger-prime {
    background: #050505;
    border: 1px solid #333;
    color: var(--red);
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 1px #000;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.trigger-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    opacity: 0.8;
}