/* ============================================
   Gaming Zone - VISUAL EFFECTS
   Animated Gradient Orbs & Glassmorphism
   ============================================ */

/* ==================== ANIMATED BACKGROUND ==================== */
.animated-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   overflow: hidden;
   background: var(--bg-primary);
   pointer-events: none;
}

/* Gradient Orbs - Optimized for 60FPS */
.gradient-orb {
   display: none;
   /* Disabled for performance */
   position: absolute;
   border-radius: 50%;
   filter: blur(20px);
   opacity: 0.12;
   animation: float 20s infinite ease-in-out;
   pointer-events: none;
   
   transform: translateZ(0);
}

.orb-1 {
   width: 400px;
   height: 400px;
   background: var(--accent-cyan);
   top: -150px;
   left: -150px;
   animation-delay: 0s;
}

.orb-2 {
   width: 350px;
   height: 350px;
   background: var(--accent-purple);
   bottom: -100px;
   right: -100px;
   animation-delay: -7s;
}

.orb-3 {
   width: 280px;
   height: 280px;
   background: var(--accent-pink);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation-delay: -14s;
}

@keyframes float {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   25% {
      transform: translate(50px, -50px) scale(1.1);
   }

   50% {
      transform: translate(-30px, 30px) scale(0.9);
   }

   75% {
      transform: translate(-50px, -30px) scale(1.05);
   }
}

/* ==================== GLASS CARD BASE ==================== */
.glass-card {
   background: var(--glass-bg);
   
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   /* Lighter shadow for perf */
   transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-card:hover {
   background: var(--glass-bg-light);
   border-color: var(--glass-border-hover);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

/* Glass Card with Glow Effect */
.glass-card-glow {
   background: var(--glass-bg);
   
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-card-glow:hover {
   border-color: var(--accent-cyan);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

/* ==================== NEON GLOW EFFECTS ==================== */
.glow-cyan {
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.glow-purple {
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.glow-pink {
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.text-glow-cyan {
   text-shadow: 0 0 15px rgba(43, 80, 188, 0.5);
}

.text-glow-purple {
   text-shadow: 0 0 15px rgba(124, 138, 255, 0.5);
}

.hero-title-glow {
   text-shadow: 0 0 25px rgba(43, 80, 188, 0.5), 0 0 50px rgba(124, 138, 255, 0.3);
   animation: glow-pulse 4s infinite ease-in-out;
   
   /* Hardware Acceleration */
}

@keyframes glow-pulse {

   0%,
   100% {
      text-shadow: 0 0 25px rgba(43, 80, 188, 0.5), 0 0 50px rgba(124, 138, 255, 0.3);
   }

   50% {
      text-shadow: 0 0 40px rgba(43, 80, 188, 0.7), 0 0 70px rgba(124, 138, 255, 0.5);
   }
}

/* ==================== BRANDING & HUD EFFECTS ==================== */

/* Glitch Effect for Branding */
.text-glitch {
   position: relative;
   display: inline-block;
}

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

.text-glitch::before {
   left: 2px;
   text-shadow: -2px 0 var(--accent-pink);
   clip: rect(44px, 450px, 56px, 0);
   animation: glitch-anim 5s infinite linear alternate-reverse;
}

.text-glitch::after {
   left: -2px;
   text-shadow: -2px 0 var(--accent-cyan);
   clip: rect(44px, 450px, 56px, 0);
   animation: glitch-anim-2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
   0% {
      clip: rect(31px, 9999px, 94px, 0);
   }

   20% {
      clip: rect(62px, 9999px, 42px, 0);
   }

   40% {
      clip: rect(13px, 9999px, 78px, 0);
   }

   60% {
      clip: rect(85px, 9999px, 14px, 0);
   }

   80% {
      clip: rect(55px, 9999px, 33px, 0);
   }

   100% {
      clip: rect(22px, 9999px, 86px, 0);
   }
}

@keyframes glitch-anim-2 {
   0% {
      clip: rect(67px, 9999px, 21px, 0);
   }

   20% {
      clip: rect(12px, 9999px, 88px, 0);
   }

   40% {
      clip: rect(43px, 9999px, 5px, 0);
   }

   60% {
      clip: rect(91px, 9999px, 64px, 0);
   }

   80% {
      clip: rect(25px, 9999px, 49px, 0);
   }

   100% {
      clip: rect(8px, 9999px, 72px, 0);
   }
}

/* Scanning HUD Overlay */
.portal-hud-overlay {
   position: absolute;
   inset: -40px;
   border: 1px solid rgba(43, 80, 188, 0.15);
   border-radius: 50%;
   pointer-events: none;
   z-index: 5;
   animation: rotateHud 10s linear infinite;
}

.hud-scanning-line {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   animation: scan-line 4s linear infinite;
   opacity: 0.6;
}

.hover-glow:hover {
   box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

.glitch-effect {
   position: relative;
}

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

.card-blur-bg {
   position: relative;
   overflow: hidden;
   background: rgba(15, 23, 42, 0.6) !important;
}

.card-accent-line {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

@keyframes rotateHud {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

@keyframes scan-line {
   0% {
      top: 0;
      opacity: 0;
   }

   10% {
      opacity: 0.6;
   }

   90% {
      opacity: 0.6;
   }

   100% {
      top: 100%;
      opacity: 0;
   }
}

.hud-bracket {
   position: absolute;
   width: 20px;
   height: 20px;
   border: 2px solid var(--accent-cyan);
   opacity: 0.3;
}

.bracket-tl {
   top: 0;
   left: 0;
   border-right: none;
   border-bottom: none;
}

.bracket-tr {
   top: 0;
   right: 0;
   border-left: none;
   border-bottom: none;
}

.bracket-bl {
   bottom: 0;
   left: 0;
   border-right: none;
   border-top: none;
}

.bracket-br {
   bottom: 0;
   right: 0;
   border-left: none;
   border-top: none;
}

/* ==================== GRADIENT TEXT ==================== */
.gradient-text {
   background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* ==================== MESH BACKGROUND (Legacy Support) ==================== */
.mesh-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   overflow: hidden;
   background: var(--bg-primary);
   pointer-events: none;
}

.mesh-gradient {
   position: absolute;
   width: 600px;
   height: 600px;
   background: var(--accent-cyan);
   border-radius: 50%;
   filter: blur(40px);
   /* Reduced from 100px */
   opacity: 0.3;
   top: -200px;
   left: -200px;
   animation: float 20s infinite ease-in-out;
}

.mesh-grid {
   display: none;
}

/* ==================== HOLO BACKGROUND (Legacy Support) ==================== */
.holo-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: -1;
   overflow: hidden;
}

.holo-bg::before {
   content: '';
   position: absolute;
   width: 400px;
   height: 400px;
   background: var(--accent-purple);
   border-radius: 50%;
   filter: blur(40px);
   /* Reduced from 100px */
   opacity: 0.2;
   top: 20%;
   right: -100px;
   animation: float 25s infinite ease-in-out;
   animation-delay: -5s;
}

.holo-bg::after {
   content: '';
   position: absolute;
   width: 300px;
   height: 300px;
   background: var(--accent-pink);
   border-radius: 50%;
   filter: blur(30px);
   /* Reduced from 80px */
   opacity: 0.15;
   bottom: 10%;
   left: 10%;
   animation: float 18s infinite ease-in-out;
   animation-delay: -10s;
}

/* ==================== CURSOR EFFECTS ==================== */
#cursor-spotlight {
   position: fixed;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(43, 80, 188, 0.08) 0%, transparent 70%);
   pointer-events: none;
   z-index: 9998;
   transform: translate(-50%, -50%);
   transition: opacity 0.3s ease;
   opacity: 0;
}

body:hover #cursor-spotlight {
   opacity: 1;
}

/* ==================== DECORATIVE FLOATING SHAPES ==================== */
.hero-decorations {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
}

.decor-shape {
   position: absolute;
   opacity: 0.6;
   filter: blur(8px);
   animation: float-slow 15s infinite ease-in-out;
}

.decor-circle {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 2px solid var(--accent-cyan);
   background: radial-gradient(circle, rgba(43, 80, 188, 0.1), transparent);
}

.decor-triangle {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 86px solid var(--accent-purple);
   opacity: 0.2;
   transform: rotate(15deg);
}

.decor-emoji {
   font-size: 4rem;
   filter: drop-shadow(0 0 20px var(--accent-pink));
   animation: float-random 20s infinite linear;
}

/* Positions */
.shape-1 {
   top: 10%;
   left: 5%;
   animation-delay: 0s;
}

.shape-2 {
   top: 20%;
   right: 10%;
   animation-delay: -5s;
}

.shape-3 {
   bottom: 15%;
   left: 15%;
   animation-delay: -10s;
}

.shape-4 {
   bottom: 30%;
   right: 5%;
   animation-delay: -3s;
}

/* Dashboard/Status Animations */
@keyframes float-slow {

   0%,
   100% {
      transform: translate(0, 0) rotate(0deg);
   }

   50% {
      transform: translate(20px, -20px) rotate(10deg);
   }
}

@keyframes float-random {
   0% {
      transform: translate(0, 0) rotate(0deg);
   }

   33% {
      transform: translate(30px, -50px) rotate(120deg);
   }

   66% {
      transform: translate(-20px, 40px) rotate(240deg);
   }

   100% {
      transform: translate(0, 0) rotate(360deg);
   }
}

/* ============================================
   CYBER PORTAL ANIMATION (EVOLVED HERO)
   ============================================ */

.cyber-portal-container {
   position: relative;
   width: 400px;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   perspective: 1200px;
   transform-style: preserve-3d;
}

/* 3D Tilted Grid Floor */
.portal-grid-floor {
   position: absolute;
   width: 200%;
   height: 200%;
   background:
      linear-gradient(rgba(43, 80, 188, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(43, 80, 188, 0.1) 1px, transparent 1px);
   background-size: 40px 40px;
   transform: rotateX(75deg) translateZ(-100px);
   opacity: 0.3;
   animation: grid-scroll 20s linear infinite;
   mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
   -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
}

@keyframes grid-scroll {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: 0 40px;
   }
}

/* Main Portal Rings */
.portal-ring {
   position: absolute;
   border-radius: 50%;
   transform-style: preserve-3d;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.portal-ring-outer {
   width: 320px;
   height: 320px;
   border: 1px solid rgba(43, 80, 188, 0.4);
   border-left: 2px solid var(--accent-cyan);
   border-right: 2px solid var(--accent-purple);
   animation: spin-3d-slow 20s linear infinite;
}

.portal-ring-inner {
   width: 240px;
   height: 240px;
   border: 1px dashed rgba(124, 138, 255, 0.5);
   border-top: 2px solid var(--accent-pink);
   animation: spin-3d-reverse 15s linear infinite;
}

.portal-core-glow {
   position: absolute;
   width: 100px;
   height: 100px;
   background: radial-gradient(circle, var(--accent-cyan), transparent 70%);
   filter: blur(40px);
   opacity: 0.6;
   animation: pulse-core 4s ease-in-out infinite;
}

/* Floating Game Icons in 3D Space */
.cyber-icon-float {
   position: absolute;
   font-size: 32px;
   color: #fff;
   text-shadow: 0 0 15px var(--accent-cyan);
   animation: float-3d 8s ease-in-out infinite;
}

.icon-ps-3d {
   transform: translate3d(-120px, -80px, 50px);
   color: #003791;
   text-shadow: 0 0 20px rgba(0, 55, 145, 0.8);
   animation-delay: 0s;
}

.icon-xbox-3d {
   transform: translate3d(120px, -40px, -20px);
   color: #107c10;
   text-shadow: 0 0 20px rgba(16, 124, 16, 0.8);
   animation-delay: -2s;
}

.icon-steam-3d {
   transform: translate3d(0px, 120px, 80px);
   color: #1b2838;
   text-shadow: 0 0 20px rgba(102, 192, 244, 0.8);
   animation-delay: -4s;
}

@keyframes spin-3d-slow {
   0% {
      transform: rotateX(60deg) rotateZ(0deg);
   }

   100% {
      transform: rotateX(60deg) rotateZ(360deg);
   }
}

@keyframes spin-3d-reverse {
   0% {
      transform: rotateX(60deg) rotateZ(360deg);
   }

   100% {
      transform: rotateX(60deg) rotateZ(0deg);
   }
}

@keyframes float-3d {

   0%,
   100% {
      transform: translate3d(var(--tx, 0), var(--ty, 0), var(--tz, 0));
   }

   50% {
      transform: translate3d(var(--tx, 0), calc(var(--ty, 0) - 20px), var(--tz, 0));
   }
}

@keyframes pulse-core {

   0%,
   100% {
      transform: scale(1);
      opacity: 0.6;
   }

   50% {
      transform: scale(1.2);
      opacity: 0.8;
   }
}

/* Main Text in Center */
.portal-text-container {
   transform: translateZ(50px);
   z-index: 10;
}

.portal-text-svg {
   width: 180px;
   height: 100px;
   filter: drop-shadow(0 0 15px rgba(43, 80, 188, 0.6));
}


/* ============================================
   LIVING SHAPES (CUSTOM GRAPHICAL ICONS)
   ============================================ */

.living-shape-container {
   position: relative;
   width: 64px;
   height: 64px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto 20px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   overflow: hidden;
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.living-shape-container::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at center, var(--accent-color, var(--accent-cyan)), transparent 80%);
   opacity: 0.05;
   transition: opacity 0.4s ease;
}

.feature-card-glass:hover .living-shape-container {
   transform: translateY(-5px) scale(1.05);
   border-color: rgba(var(--accent-rgb, 6, 182, 212), 0.5);
   background: rgba(var(--accent-rgb, 6, 182, 212), 0.05);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.feature-card-glass:hover .living-shape-container::after {
   opacity: 0.15;
}

/* Base Icon Style */
.shape-svg {
   width: 32px;
   height: 32px;
   stroke: var(--accent-color, var(--accent-cyan));
   stroke-width: 1.5;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
   filter: drop-shadow(0 0 8px var(--accent-color, var(--accent-cyan)));
   z-index: 2;
}

/* Specific Animations */
.shape-pulse .path {
   stroke-dasharray: 100;
   stroke-dashoffset: 100;
   animation: pulse-draw-anim 3s ease-in-out infinite;
}

@keyframes pulse-draw-anim {
   0% {
      stroke-dashoffset: 100;
   }

   40% {
      stroke-dashoffset: 0;
   }

   60% {
      stroke-dashoffset: 0;
   }

   100% {
      stroke-dashoffset: -100;
   }
}

.shape-user .head {
   animation: head-float 3s ease-in-out infinite;
}

@keyframes head-float {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-3px);
   }
}

.shape-shield .shield-body {
   animation: shield-pulse 4s ease-in-out infinite;
}

@keyframes shield-pulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 1;
   }

   50% {
      transform: scale(1.05);
      opacity: 0.8;
   }
}

/* Tiny Price Tag Icon (for Product Detail) */
.price-tag-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   margin-right: 12px;
   vertical-align: middle;
}

/* ============================================
   PRODUCT CARD ENHANCEMENTS (PLACEHOLDERS & META)
   ============================================ */

.product-card-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.2);
   position: relative;
   overflow: hidden;
}

.product-card-placeholder::before {
   content: '';
   position: absolute;
   width: 200%;
   height: 200%;
   background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(43, 80, 188, 0.1), transparent);
   animation: rotate-conic 10s linear infinite;
}

.placeholder-icon-wrap {
   position: relative;
   z-index: 2;
   transform: scale(2);
   filter: drop-shadow(0 0 10px var(--accent-cyan));
   opacity: 0.5;
}

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

   to {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

/* Unique Platform Placeholders */
.placeholder-steam .gear {
   animation: rotate 8s linear infinite;
   transform-origin: center;
}

.placeholder-ps .symbol {
   animation: symbol-float 4s ease-in-out infinite;
   opacity: 0.6;
}

.placeholder-ps .symbol:nth-child(2) {
   animation-delay: -1s;
}

.placeholder-ps .symbol:nth-child(3) {
   animation-delay: -2s;
}

@keyframes symbol-float {

   0%,
   100% {
      transform: translate(0, 0) rotate(0deg);
      opacity: 0.3;
   }

   50% {
      transform: translate(10px, -15px) rotate(45deg);
      opacity: 0.8;
   }
}

.placeholder-xbox .x-path {
   stroke-dasharray: 100;
   animation: draw-neon 4s infinite alternate;
}

/* Service-Specific Placeholders */
.placeholder-netflix {
   background: radial-gradient(circle at center, rgba(229, 9, 20, 0.1), transparent) !important;
}

.placeholder-netflix .icon-box {
   color: #e50914;
   animation: n-pulse 2s infinite;
}

@keyframes n-pulse {

   0%,
   100% {
      transform: scale(1);
      filter: drop-shadow(0 0 5px #e50914);
   }

   50% {
      transform: scale(1.1);
      filter: drop-shadow(0 0 15px #e50914);
   }
}

.placeholder-google {
   background: radial-gradient(circle at center, rgba(66, 133, 244, 0.1), transparent) !important;
}

.placeholder-apple {
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent) !important;
}

.placeholder-spotify {
   background: radial-gradient(circle at center, rgba(30, 215, 96, 0.1), transparent) !important;
}

.placeholder-spotify .icon-box {
   color: #1ed760;
   animation: rotate 10s linear infinite;
}

/* Redesigned Premium Button - Cyber Action Bar */
.btn-premium-add {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 12px;
   height: 38px;
   min-width: 38px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   color: var(--accent-cyan);
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
   position: relative;
   overflow: hidden;
   text-decoration: none;
   gap: 8px;
}

.btn-premium-add::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(43, 80, 188, 0.2), transparent);
   transition: left 0.5s ease;
}

.btn-premium-add:hover::before {
   left: 100%;
}

.btn-premium-add span {
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   display: none;
   white-space: nowrap;
   position: relative;
   z-index: 2;
}

.btn-premium-add:hover {
   min-width: 110px;
   background: rgba(43, 80, 188, 0.1);
   border-color: var(--accent-cyan);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.btn-premium-add:hover span {
   display: block;
   animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateX(-5px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

/* Mini Meta Tags for Cards */
.card-meta-tag {

   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 2px 8px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
   font-size: 0.7rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.card-meta-tag i {
   font-size: 0.6rem;
   color: var(--accent-cyan);
}

/* Auth Page Enhancements */
.auth-page-wrapper {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 40px 20px;
   z-index: 5;
   position: relative;
   overflow: hidden;
}

.input-glass {
   background: rgba(255, 255, 255, 0.03) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   border-radius: 12px !important;
   color: white !important;
   height: 50px;
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
   outline: none !important;
}

.input-glass:focus {
   background: rgba(255, 255, 255, 0.07) !important;
   border-color: var(--accent-cyan) !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   transform: translateY(-1px);
}

.form-group-cyber label {
   display: block;
   margin-bottom: 8px;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text-muted);
}

/* Shared Auth UI Classes */
.auth-card {
   padding: 50px;
   width: 100%;
   max-width: 480px;
   border-radius: 30px;
   position: relative;
   overflow: hidden;
   background: rgba(15, 23, 42, 0.6) !important;
}

.card-accent-line {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: var(--gradient-primary);
}

.input-icon-wrapper {
   position: relative;
}

.icon-accent {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--accent-cyan);
   opacity: 0.6;
}

.auth-form-cyber {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.label-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
}

.full-width {
   width: 100%;
}

.mb-30 {
   margin-bottom: 30px;
}

.mt-30 {
   margin-top: 30px;
}

.mt-10 {
   margin-top: 10px;
}

.ml-10 {
   margin-left: 10px;
}

.h-55 {
   height: 55px;
}

/* Artistic Placeholder System */
.artistic-placeholder {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
   background: radial-gradient(circle at center, rgba(15, 23, 42, 0.8), #060814);
   display: flex;
   align-items: center;
   justify-content: center;
}

.artistic-placeholder-detail {
   width: 100%;
   height: 350px;
   position: relative;
   overflow: hidden;
   background: radial-gradient(circle at center, rgba(15, 23, 42, 0.8), #060814);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
}

.placeholder-art {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.8;
   transition: transform 0.5s ease, opacity 0.5s ease;
   filter: brightness(0.9) contrast(1.1);
}

.product-card:hover .placeholder-art {
   transform: scale(1.05);
   opacity: 1;
   filter: brightness(1.1) contrast(1.2);
}

.placeholder-overlay-glow {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 50%, rgba(43, 80, 188, 0.1), transparent 70%);
   pointer-events: none;
   mix-blend-mode: screen;
   animation: placeholder-pulse 4s infinite ease-in-out;
}

@keyframes placeholder-pulse {

   0%,
   100% {
      opacity: 0.3;
      transform: scale(1);
   }

   50% {
      opacity: 0.6;
      transform: scale(1.1);
   }
}

.link-cyan {
   color: var(--accent-cyan);
   text-decoration: none;
   font-size: 0.75rem;
}

.link-purple {
   color: var(--accent-purple);
   font-weight: bold;
   text-decoration: none;
}

/* ============================================
   GLASS OBSIDIAN HERO - CINEMATIC SYSTEM
   ============================================ */

.cinematic-hero {
   height: 600px;
   display: flex;
   justify-content: center;
   align-items: center;
   perspective: 2000px;
   overflow: visible !important;
}

/* Bokeh Field */
.bokeh-field {
   position: absolute;
   inset: -100px;
   pointer-events: none;
   z-index: 1;
}

.bokeh {
   position: absolute;
   border-radius: 50%;
   filter: blur(60px);
   opacity: 0.15;
   animation: bokehFloat 15s infinite ease-in-out;
}

.b1 {
   width: 400px;
   height: 400px;
   background: var(--accent-cyan);
   top: 10%;
   left: 10%;
}

.b2 {
   width: 350px;
   height: 350px;
   background: var(--accent-purple);
   bottom: 10%;
   right: 10%;
   animation-delay: -5s;
}

.b3 {
   width: 300px;
   height: 300px;
   background: #2b50bc;
   top: 40%;
   left: 50%;
   animation-delay: -10s;
}

@keyframes bokehFloat {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   33% {
      transform: translate(30px, -50px) scale(1.1);
   }

   66% {
      transform: translate(-20px, 40px) scale(0.9);
   }
}

/* Obsidian Shard */
.obsidian-shard-wrapper {
   position: relative;
   z-index: 10;
   transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.obsidian-shard {
   position: relative;
   width: 240px;
   height: 320px;
   background: rgba(15, 23, 42, 0.8);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   transform: rotateX(10deg) rotateY(-10deg);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

.shard-reflection {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
   pointer-events: none;
}

.shard-light-sweep {
   position: absolute;
   top: -100%;
   left: -100%;
   width: 300%;
   height: 300%;
   background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%);
   animation: lightSweep 6s infinite ease-in-out;
}

@keyframes lightSweep {
   0% {
      transform: translate(-20%, -20%);
   }

   100% {
      transform: translate(20%, 20%);
   }
}

/* Logo Minimal */
.gz-svg-minimal {
   width: 140px;
   height: auto;
   filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

.gz-text-premium {
   font-family: 'Orbitron', sans-serif;
   font-weight: 900;
   font-size: 80px;
   fill: white;
   letter-spacing: 4px;
   animation: logoPulse 4s infinite ease-in-out;
}

@keyframes logoPulse {

   0%,
   100% {
      opacity: 0.9;
      filter: drop-shadow(0 0 10px rgba(43, 80, 188, 0.3));
   }

   50% {
      opacity: 1;
      filter: drop-shadow(0 0 30px rgba(43, 80, 188, 0.6));
   }
}

/* Minimal HUD */
.minimal-hud {
   position: absolute;
   inset: -40px;
   pointer-events: none;
   z-index: 5;
}

.hud-line {
   position: absolute;
   left: 50%;
   width: 1px;
   height: 60px;
   background: linear-gradient(to bottom, transparent, var(--accent-cyan), transparent);
   transform: translateX(-50%);
   opacity: 0.4;
}

.hud-line.top {
   top: -20px;
}

.hud-line.bottom {
   bottom: -20px;
}

.hud-tag {
   position: absolute;
   bottom: -50px;
   left: 50%;
   transform: translateX(-50%);
   font-family: 'Rajdhani', sans-serif;
   font-size: 0.7rem;
   letter-spacing: 4px;
   color: rgba(255, 255, 255, 0.3);
   text-transform: uppercase;
}

/* Ambient Icons */
.ambient-icon {
   position: absolute;
   font-size: 1.5rem;
   color: white;
   opacity: 0.1;
   filter: blur(1px);
   animation: iconFloat 10s infinite ease-in-out;
}

.ambient-icon.ps {
   top: 20%;
   left: 20%;
   animation-delay: 0s;
}

.ambient-icon.xbox {
   top: 70%;
   right: 25%;
   animation-delay: -3s;
}

.ambient-icon.steam {
   top: 30%;
   right: 15%;
   animation-delay: -6s;
}

@keyframes iconFloat {

   0%,
   100% {
      transform: translateY(0) rotate(0deg);
   }

   50% {
      transform: translateY(-20px) rotate(10deg);
   }
}

/* ============================================
   HERO ICON SHOWCASE - NO BADGE
   ============================================ */

.hero-icon-showcase {
   position: relative;
   width: 100%;
   max-width: 600px;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.hero-glow-blob {
   position: absolute;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, rgba(43, 80, 188, 0.15), transparent 70%);
   border-radius: 50%;
   filter: blur(60px);
   animation: blobPulse 6s infinite ease-in-out;
}

@keyframes blobPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 0.3;
   }

   50% {
      transform: scale(1.2);
      opacity: 0.5;
   }
}

.floating-icon-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
   position: relative;
   z-index: 5;
}

.floating-icon {
   width: 80px;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2.5rem;
   color: white;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   
   animation: iconFloatNew 5s infinite ease-in-out;
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
}

.floating-icon:hover {
   transform: translateY(-10px) scale(1.1);
   border-color: var(--accent-cyan);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.floating-icon.playstation {
   color: #003791;
   animation-delay: 0s;
}

.floating-icon.xbox {
   color: #107c10;
   animation-delay: 0.5s;
}

.floating-icon.steam {
   color: #1b2838;
   animation-delay: 1s;
}

.floating-icon.windows {
   color: #00adef;
   animation-delay: 1.5s;
}

.floating-icon.twitch {
   color: #9146ff;
   animation-delay: 2s;
}

.floating-icon.discord {
   color: #5865f2;
   animation-delay: 2.5s;
}

@keyframes iconFloatNew {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-15px);
   }
}

.orbit-ring {
   position: absolute;
   border: 1px dashed rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   pointer-events: none;
}

.ring-1 {
   width: 500px;
   height: 500px;
   animation: orbitSpin 30s linear infinite;
}

.ring-2 {
   width: 400px;
   height: 400px;
   animation: orbitSpin 25s linear infinite reverse;
}

@keyframes orbitSpin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* ============================================
   ANIMATED GZ LOGO - LINE DRAWING EFFECT
   ============================================ */

.gz-animated-logo {
   position: relative;
   width: 100%;
   max-width: 400px;
   height: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.gz-glow-pulse {
   position: absolute;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, rgba(43, 80, 188, 0.2), transparent 70%);
   border-radius: 50%;
   filter: blur(40px);
   animation: glowPulse 3s infinite ease-in-out;
}

@keyframes glowPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 0.4;
   }

   50% {
      transform: scale(1.3);
      opacity: 0.7;
   }
}

.gz-svg-animated {
   width: 280px;
   height: auto;
   position: relative;
   z-index: 10;
}

.gz-letter {
   stroke-dasharray: 800;
   stroke-dashoffset: 800;
   animation: drawLine 3s ease forwards, fillIn 1s ease 2.5s forwards;
}

.letter-z {
   animation-delay: 0.5s, 3s;
}

@keyframes drawLine {
   to {
      stroke-dashoffset: 0;
   }
}

@keyframes fillIn {
   to {
      fill: white;
      fill-opacity: 0.9;
   }
}

.gz-orbit {
   position: absolute;
   border: 1px dashed rgba(43, 80, 188, 0.15);
   border-radius: 50%;
   pointer-events: none;
}

.gz-orbit.ring-1 {
   width: 350px;
   height: 350px;
   animation: orbitSpin 25s linear infinite;
}

.gz-orbit.ring-2 {
   width: 280px;
   height: 280px;
   animation: orbitSpin 20s linear infinite reverse;
}

/* ============================================
   PREMIUM STATS BAR
   ============================================ */

.hero-stats-premium {
   display: flex;
   gap: 30px;
   margin-bottom: 50px;
}

.stat-card-glow {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 20px 30px;
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
}

.stat-card-glow:hover {
   transform: translateY(-5px);
   border-color: rgba(43, 80, 188, 0.3);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.stat-icon {
   font-size: 1.5rem;
   color: var(--accent-cyan);
   margin-bottom: 5px;
}

.stat-icon.gold {
   color: #fbbf24;
}

.stat-icon.cyan {
   color: #2b50bc;
}

.stat-value {
   font-family: 'Orbitron', sans-serif;
   font-weight: 700;
   font-size: 1.8rem;
   color: white;
}

.stat-value.gold {
   color: #fbbf24;
}

.stat-value.cyan {
   color: #2b50bc;
}

.stat-label {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: #64748b;
}

/* ============================================
   PREMIUM ACTION BUTTONS
   ============================================ */

.hero-actions-premium {
   display: flex;
   gap: 20px;
}

.btn-fire {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 15px 35px;
   background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
   color: white;
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   text-decoration: none;
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.btn-fire:hover {
   transform: translateY(-3px) scale(1.03);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.btn-fire i {
   animation: flicker 1s infinite;
}

@keyframes flicker {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.7;
   }
}

.btn-outline-glow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 15px 35px;
   background: transparent;
   color: white;
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 12px;
   cursor: pointer;
   text-decoration: none;
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
}

.btn-outline-glow:hover {
   border-color: var(--accent-cyan);
   color: var(--accent-cyan);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   transform: translateY(-3px);
}

/* ============================================
   QUANTUM AURORA HERO - MATCHING SITE VIBE
   ============================================ */

.hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(30px);
   animation: orbFloat 15s infinite ease-in-out;
   pointer-events: none;
   
   transform: translateZ(0);
}

.orb-1 {
   width: 300px;
   height: 300px;
   background: var(--accent-cyan);
   top: 0;
   left: 10%;
   opacity: 0.2;
}

.orb-2 {
   width: 250px;
   height: 250px;
   background: var(--accent-purple);
   bottom: 0;
   right: 10%;
   opacity: 0.15;
   animation-delay: -5s;
}

.orb-3 {
   width: 200px;
   height: 200px;
   background: #ff0080;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0.1;
   animation-delay: -10s;
}

@keyframes orbFloat {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   25% {
      transform: translate(30px, -40px) scale(1.1);
   }

   50% {
      transform: translate(-20px, 30px) scale(0.95);
   }

   75% {
      transform: translate(40px, 20px) scale(1.05);
   }
}

/* GZ Prism Card */
.gz-prism-card {
   position: relative;
   width: 280px;
   height: 350px;
   background: rgba(15, 23, 42, 0.5);
   
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}

.gz-prism-card:hover {
   transform: translateY(-10px) scale(1.02);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.prism-glow {
   position: absolute;
   inset: -50px;
   background: radial-gradient(circle at center, rgba(43, 80, 188, 0.2), transparent 60%);
   pointer-events: none;
}

.prism-content {
   display: flex;
   gap: 10px;
   position: relative;
   z-index: 5;
}

.gz-letter-prism {
   font-family: 'Orbitron', sans-serif;
   font-weight: 900;
   font-size: 6rem;
   background: linear-gradient(135deg, #0de8df 0%, #6366f1 50%, #ff0080 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: prismShift 5s ease infinite;
   text-shadow: 0 0 40px rgba(43, 80, 188, 0.3);
}

@keyframes prismShift {

   0%,
   100% {
      filter: hue-rotate(0deg);
   }

   50% {
      filter: hue-rotate(30deg);
   }
}

.prism-shimmer {
   position: absolute;
   top: -100%;
   left: -100%;
   width: 300%;
   height: 300%;
   background: linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%);
   animation: shimmerMove 4s ease-in-out infinite;
}

@keyframes shimmerMove {
   0% {
      transform: translate(-30%, -30%);
   }

   100% {
      transform: translate(30%, 30%);
   }
}

/* ============================================
   GZ LOGO REVEAL ANIMATION
   ============================================ */

.gz-logo-reveal {
   width: 180px;
   height: auto;
   opacity: 0;
   animation: logoReveal 2.5s ease forwards;
   filter: drop-shadow(0 0 30px rgba(43, 80, 188, 0.4));
}

@keyframes logoReveal {
   0% {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      filter: drop-shadow(0 0 0 transparent);
   }

   50% {
      opacity: 1;
      clip-path: inset(0 50% 0 0);
      filter: drop-shadow(0 0 20px rgba(43, 80, 188, 0.3));
   }

   100% {
      opacity: 1;
      clip-path: inset(0 0 0 0);
      filter: drop-shadow(0 0 40px rgba(43, 80, 188, 0.5));
   }
}

/* ============================================
   BESPOKE SVG GZ EMBLEM
   ============================================ */

.gz-custom-svg {
   width: 220px;
   height: auto;
   filter: drop-shadow(0 0 15px rgba(43, 80, 188, 0.3));
}

.letter-path {
   stroke-dasharray: 400;
   stroke-dashoffset: 400;
   animation: svgLineDraw 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.z-path {
   animation-delay: 0.8s;
}

@keyframes svgLineDraw {
   0% {
      stroke-dashoffset: 400;
      fill-opacity: 0;
   }

   60% {
      stroke-dashoffset: 0;
      fill-opacity: 0;
   }

   100% {
      stroke-dashoffset: 0;
      fill-opacity: 0.1;
      /* Subtle fill at end */
   }
}

/* Enhanced Prism Card for SVG */
.gz-prism-card:hover .gz-custom-svg {
   filter: drop-shadow(0 0 30px rgba(43, 80, 188, 0.6));
   transform: scale(1.05);
   transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
}

/* ============================================
   PORTAL OF INFINITE GAMING - 3D TUNNEL
   ============================================ */

.hyperspace-tunnel {
   position: absolute;
   inset: -200px;
   background: radial-gradient(circle at center, #040b18 0%, #000 100%);
   transform-style: preserve-3d;
   animation: tunnelFloat 10s ease-in-out infinite;
}

.tunnel-ring {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   border: 2px solid transparent;
   border-top-color: var(--accent-cyan);
   border-bottom-color: var(--accent-purple);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   opacity: 0;
   animation: tunnelZoom 4s linear infinite;
}

.ring-1 {
   width: 100px;
   height: 100px;
   animation-delay: 0s;
}

.ring-2 {
   width: 200px;
   height: 200px;
   animation-delay: 0.8s;
}

.ring-3 {
   width: 300px;
   height: 300px;
   animation-delay: 1.6s;
}

.ring-4 {
   width: 400px;
   height: 400px;
   animation-delay: 2.4s;
}

.ring-5 {
   width: 500px;
   height: 500px;
   animation-delay: 3.2s;
}

@keyframes tunnelZoom {
   0% {
      transform: translate(-50%, -50%) scale(0.1);
      opacity: 0;
   }

   10% {
      opacity: 1;
   }

   100% {
      transform: translate(-50%, -50%) scale(2);
      opacity: 0;
   }
}

.data-stream {
   position: absolute;
   width: 2px;
   height: 100px;
   background: linear-gradient(to bottom, transparent, #4ade80, transparent);
   opacity: 0.5;
   animation: streamFlow 2s linear infinite;
}

.stream-1 {
   left: 30%;
   top: 0;
   animation-duration: 1.5s;
}

.stream-2 {
   left: 70%;
   top: 20%;
   animation-duration: 2.5s;
}

.stream-3 {
   left: 50%;
   top: 60%;
   animation-duration: 2s;
}

@keyframes streamFlow {
   0% {
      transform: translateY(-100%) scaleY(1);
      opacity: 0;
   }

   50% {
      opacity: 0.8;
   }

   100% {
      transform: translateY(500px) scaleY(2);
      opacity: 0;
   }
}

/* Floating Controller */
.floating-controller-container {
   position: relative;
   z-index: 20;
   animation: controllerHover 4s ease-in-out infinite;
}

.master-controller-svg {
   width: 320px;
   height: auto;
   filter: drop-shadow(0 0 30px rgba(43, 80, 188, 0.4));
   transition: transform 0.1s ease-out;
}

.controller-glow {
   position: absolute;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, rgba(43, 80, 188, 0.3), transparent 70%);
   filter: blur(50px);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: pulseGlow 3s infinite;
}

@keyframes controllerHover {

   0%,
   100% {
      transform: translateY(0) rotate(0deg);
   }

   50% {
      transform: translateY(-15px) rotate(2deg);
   }
}

.controller-btn {
   transition: fill 0.3s ease;
}

.controller-btn:hover {
   fill: white;
   filter: drop-shadow(0 0 10px white);
}

/* ============================================
   GZ SHOCKWAVE SINGULARITY
   ============================================ */

.gz-shockwave-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 600px;
   height: 600px;
   pointer-events: none;
   z-index: 1;
}

.gz-centerpiece {
   position: relative;
   z-index: 10;
   animation: floatLogo 6s ease-in-out infinite;
}

.shockwave {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   border: 1px solid transparent;
   opacity: 0;
   animation: shockwaveExpand 4s linear infinite;
}

.wave-1 {
   width: 100px;
   height: 100px;
   border-color: var(--accent-cyan);
   animation-delay: 0s;
}

.wave-2 {
   width: 100px;
   height: 100px;
   border-color: var(--accent-purple);
   animation-delay: 1.3s;
}

.wave-3 {
   width: 100px;
   height: 100px;
   border-color: #ff0080;
   animation-delay: 2.6s;
}

.energy-burst {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 1px;
   height: 1px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   animation: energyPulse 3s ease-in-out infinite;
}

@keyframes shockwaveExpand {
   0% {
      width: 50px;
      height: 50px;
      opacity: 0.8;
      border-width: 2px;
   }

   100% {
      width: 500px;
      height: 500px;
      opacity: 0;
      border-width: 0px;
   }
}

@keyframes energyPulse {

   0%,
   100% {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   }

   50% {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   }
}

@keyframes floatLogo {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-15px);
   }
}

/* ============================================
   THE MAGNUM OPUS - HOLOGRAPHIC NEURAL INTERFACE
   ============================================ */

/* 1. Quantum Lattice Background */
.quantum-lattice {
   position: absolute;
   inset: -50%;
   width: 200%;
   height: 200%;
   background:
      linear-gradient(rgba(43, 80, 188, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124, 138, 255, 0.1) 1px, transparent 1px);
   background-size: 60px 60px;
   transform: rotateX(60deg) rotateZ(0deg);
   transform-style: preserve-3d;
   animation: latticeFlow 20s linear infinite;
}

@keyframes latticeFlow {
   0% {
      transform: rotateX(60deg) translateY(0);
   }

   100% {
      transform: rotateX(60deg) translateY(60px);
   }
}

.grid-fade {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle, transparent 20%, #000 70%);
}

/* 2. The Neural Core */
.neural-core-wrapper {
   position: relative;
   width: 300px;
   height: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
   transform-style: preserve-3d;
   animation: coreFloat 6s ease-in-out infinite;
}

.core-outer-ring {
   position: absolute;
   width: 280px;
   height: 280px;
   border: 1px dashed rgba(43, 80, 188, 0.4);
   border-radius: 50%;
   animation: spinReverse 15s linear infinite;
}

.core-inner-ring {
   position: absolute;
   width: 220px;
   height: 220px;
   border: 2px solid rgba(124, 138, 255, 0.6);
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-radius: 50%;
   animation: spinForward 8s linear infinite;
}

.core-nucleus {
   position: relative;
   z-index: 20;
   animation: nucleusPulse 3s ease-in-out infinite;
}

.magnum-path {
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: magnumDraw 4s ease-out forwards infinite;
}

.core-energy-field {
   position: absolute;
   inset: 40px;
   background: radial-gradient(circle, rgba(0, 255, 255, 0.2), transparent 70%);
   filter: blur(30px);
   mix-blend-mode: screen;
   animation: energyFlicker 0.1s infinite;
}

@keyframes spinForward {
   to {
      transform: rotate(360deg);
   }
}

@keyframes spinReverse {
   to {
      transform: rotate(-360deg);
   }
}

@keyframes coreFloat {

   0%,
   100% {
      transform: translateY(0) rotateX(10deg);
   }

   50% {
      transform: translateY(-20px) rotateX(-10deg);
   }
}

@keyframes magnumDraw {
   0% {
      stroke-dashoffset: 600;
      opacity: 0;
   }

   10% {
      opacity: 1;
   }

   50% {
      stroke-dashoffset: 0;
   }

   90% {
      opacity: 1;
   }

   100% {
      stroke-dashoffset: 0;
      opacity: 0;
   }
}

/* 3. Holographic UI */
.holo-ui-layer {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.holo-card {
   position: absolute;
   padding: 10px 15px;
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   
   transform: translateZ(50px);
}

.card-tl {
   top: 20%;
   left: 10%;
   transform: rotateY(15deg);
}

.card-tr {
   top: 15%;
   right: 12%;
   transform: rotateY(-15deg);
}

.card-bl {
   bottom: 20%;
   left: 15%;
   transform: rotateY(10deg);
}

.card-br {
   bottom: 25%;
   right: 10%;
   transform: rotateY(-10deg);
}

.holo-header {
   font-size: 0.6rem;
   color: #64748b;
   letter-spacing: 2px;
   margin-bottom: 2px;
}

.holo-value {
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
   font-size: 1.2rem;
   color: white;
}

.text-success {
   color: #4ade80;
}

.text-warning {
   color: #facc15;
}

.text-cyan {
   color: #2b50bc;
}

.text-purple {
   color: #a855f7;
}


/* ============================================
   CINEMATIC LIQUID CHROME HERO
   ============================================ */

.chrome-typography-container {
   position: relative;
   transform-style: preserve-3d;
   perspective: 1000px;
   animation: chromeFloat 6s ease-in-out infinite;
}

.gz-chrome-svg {
   width: 400px;
   height: auto;
   filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.letter-chrome {
   stroke-dasharray: 800;
   stroke-dashoffset: 0;
   animation: chromeStrokeDraw 2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.letter-scan {
   stroke-dasharray: 100 800;
   stroke-dashoffset: 800;
   opacity: 0.8;
   mix-blend-mode: overlay;
   animation: scanLight 4s ease-in-out infinite;
}

/* Realistic Reflection */
.chrome-reflection {
   position: absolute;
   bottom: -20px;
   left: 0;
   width: 100%;
   height: 60px;
   background: radial-gradient(ellipse at center, rgba(43, 80, 188, 0.15) 0%, transparent 70%);
   filter: blur(20px);
   transform: rotateX(80deg);
   opacity: 0.6;
   animation: reflectionPulse 4s ease-in-out infinite;
}

/* Atmospheric Fog */
.cinematic-fog {
   position: absolute;
   inset: -100px;
   pointer-events: none;
   z-index: 1;
}

.fog-layer {
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02), transparent 40%);
   filter: blur(40px);
   animation: fogDrift 20s linear infinite;
}

.layer-2 {
   animation-direction: reverse;
   animation-duration: 30s;
   opacity: 0.5;
}

@keyframes chromeFloat {

   0%,
   100% {
      transform: translateY(0) rotateX(5deg);
   }

   50% {
      transform: translateY(-15px) rotateX(-5deg);
   }
}

@keyframes scanLight {
   0% {
      stroke-dashoffset: 800;
   }

   100% {
      stroke-dashoffset: -800;
   }
}

@keyframes reflectionPulse {

   0%,
   100% {
      opacity: 0.6;
      transform: rotateX(80deg) scale(1);
   }

   50% {
      opacity: 0.8;
      transform: rotateX(80deg) scale(1.2);
   }
}

@keyframes fogDrift {
   0% {
      transform: translate(0, 0);
   }

   100% {
      transform: translate(-50px, -20px);
   }
}


/* ============================================
   ULTIMATE PARTICLE SWARM HERO
   ============================================ */

#particle-container {
   background: radial-gradient(circle at center, #040b18 0%, #000 100%);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

canvas#particle-canvas {
   display: block;
   width: 100%;
   height: 100%;
   mix-blend-mode: screen;
}

/* ============================================
   ORBITAL COMMAND CENTER STYLES
   ============================================ */

:root {
   --accent-gold: #fbbf24;
   --accent-amber: #f59e0b;
}

.text-gold {
   color: var(--accent-gold);
}

#command-center-container {
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   perspective: 1000px;
}

.tactical-grid-bg {
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 40px 40px;
   mask-image: radial-gradient(circle, black 40%, transparent 80%);
}

.orbital-reactor {
   position: relative;
   width: 300px;
   height: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.progress-ring-circle {
   stroke-dasharray: 816;
   stroke-dashoffset: 816;
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
   transition: stroke-dashoffset 1s linear;
   filter: drop-shadow(0 0 10px var(--accent-gold));
   animation: fillProgress 10s linear forwards;
}

@keyframes fillProgress {
   to {
      stroke-dashoffset: 100;
   }
}

.ring-track {
   position: absolute;
   width: 260px;
   height: 260px;
   border: 1px dashed rgba(255, 255, 255, 0.1);
   border-radius: 50%;
}

.data-ring {
   position: absolute;
   border-radius: 50%;
   border: 2px solid transparent;
   border-top-color: var(--accent-cyan);
   border-bottom-color: var(--accent-purple);
   opacity: 0.7;
}

.ring-inner {
   width: 280px;
   height: 280px;
   animation: spin 10s linear infinite;
}

.ring-outer {
   width: 320px;
   height: 320px;
   animation: spinReverse 15s linear infinite;
   border-left-color: var(--accent-gold);
   border-right-color: var(--accent-gold);
}

.reactor-core {
   position: absolute;
   text-align: center;
   z-index: 20;
}

.core-logo-img {
   width: 100px;
   height: auto;
   margin-bottom: 5px;
}

.core-status {
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
   font-size: 0.9rem;
   letter-spacing: 2px;
   color: var(--accent-gold);
   text-shadow: 0 0 10px var(--accent-gold);
   animation: pulse 2s infinite;
}

/* Widgets */
.dashboard-widgets {
   position: absolute;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

.widget {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.4);
   
   padding: 15px;
   border-radius: 12px;
   border-left: 3px solid var(--accent-gold);
   width: 140px;
   transition: transform 0.3s ease;
}

.widget-left {
   left: 5%;
}

.widget-right {
   right: 5%;
   border-left: none;
   border-right: 3px solid var(--accent-cyan);
   text-align: right;
}

.widget:hover {
   transform: translateY(-50%) scale(1.05);
   background: rgba(0, 0, 0, 0.6);
}

.widget-header {
   font-size: 0.7rem;
   color: #94a3b8;
   margin-bottom: 5px;
   letter-spacing: 1px;
}

.widget-value {
   font-family: 'Rajdhani', sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

@keyframes spinReverse {
   from {
      transform: rotate(360deg);
   }

   to {
      transform: rotate(0deg);
   }
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }
}


/* ============================================
   ZERO-GRAVITY GZ HERO
   ============================================ */

#zero-gravity-container {
   transform-style: preserve-3d;
}

.gravity-core {
   position: relative;
   transform-style: preserve-3d;
   transition: transform 0.1s ease-out;
   /* Smooth but responsive */
   z-index: 20;
}

.gz-gravity-svg {
   width: 350px;
   height: auto;
   filter: drop-shadow(0 20px 50px rgba(43, 80, 188, 0.3));
}

.debris-field {
   position: absolute;
   inset: 0;
   pointer-events: none;
   transform-style: preserve-3d;
}

.debris {
   position: absolute;
   background: rgba(255, 255, 255, 0.1);
   
   border: 1px solid rgba(255, 255, 255, 0.2);
   transform-style: preserve-3d;
}

/* Random Debris Positions & Sizes */
.d1 {
   width: 40px;
   height: 40px;
   top: 20%;
   left: 20%;
   animation: floatG 6s infinite ease-in-out;
}

.d2 {
   width: 20px;
   height: 20px;
   top: 70%;
   left: 80%;
   animation: floatG 5s infinite ease-in-out reverse;
}

.d3 {
   width: 60px;
   height: 60px;
   top: 60%;
   left: 30%;
   animation: floatG 8s infinite ease-in-out 1s;
   border-radius: 50%;
}

.d4 {
   width: 30px;
   height: 30px;
   top: 15%;
   left: 70%;
   animation: floatG 7s infinite ease-in-out 0.5s;
   transform: rotate(45deg);
}

.d5 {
   width: 10px;
   height: 10px;
   top: 50%;
   left: 50%;
   background: #2b50bc;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   animation: floatG 4s infinite;
}

@keyframes floatG {

   0%,
   100% {
      transform: translate3d(0, 0, 0) rotate(0deg);
   }

   50% {
      transform: translate3d(0, -20px, 20px) rotate(10deg);
   }
}

/* ============================================
   ZERO-GRAVITY TYPOGRAPHY UPDATE
   ============================================ */

.gravity-text {
   font-family: 'Orbitron', sans-serif;
   font-weight: 900;
   font-size: 180px;
   line-height: 1;
   margin: 0;
   letter-spacing: -5px;
   background: linear-gradient(135deg, #fff 0%, #cbd5e1 40%, #2b50bc 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   filter: drop-shadow(0 20px 50px rgba(43, 80, 188, 0.4));
   transform: translateZ(50px);
}

/* Magnetic Button */
.btn-magnetic-gravity {
   position: relative;
   padding: 15px 40px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 30px;
   color: white;
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
   font-size: 1.1rem;
   letter-spacing: 2px;
   text-decoration: none;
   overflow: hidden;
   
   transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-magnetic-gravity:hover {
   border-color: var(--accent-cyan);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.btn-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient-primary);
   opacity: 0;
   z-index: -1;
   transition: opacity 0.3s ease;
}

.btn-magnetic-gravity:hover .btn-fill {
   opacity: 0.2;
}


/* ============================================
   REFERENCED ESPORTS LOGO ANIMATION
   ============================================ */

.esports-logo-svg {
   width: 500px;
   height: 500px;
   filter: drop-shadow(0 0 20px rgba(0, 180, 216, 0.4));
}

/* Animation: Ring Segments Drawing */
.ring-segment {
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: drawStroke 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Animation: Decor Pop-in */
.decor-shape {
   opacity: 0;
   transform-origin: center;
   animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s forwards;
}

/* Animation: Letters Typing/Drawing */
.letter-g {
   stroke-dasharray: 500;
   stroke-dashoffset: 500;
   animation: drawStroke 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

.letter-z {
   stroke-dasharray: 400;
   stroke-dashoffset: 400;
   animation: drawStroke 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards;
}

@keyframes drawStroke {
   to {
      stroke-dashoffset: 0;
   }
}

@keyframes popIn {
   from {
      opacity: 0;
      transform: scale(0);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

.debris-field {
   position: absolute;
   inset: 0;
   pointer-events: none;
   transform-style: preserve-3d;
}

.debris {
   position: absolute;
   background: rgba(255, 255, 255, 0.1);
   
   border: 1px solid rgba(255, 255, 255, 0.2);
   transform-style: preserve-3d;
}

/* Random Debris Positions & Sizes */
.d1 {
   width: 40px;
   height: 40px;
   top: 20%;
   left: 20%;
   animation: floatG 6s infinite ease-in-out;
}

.d2 {
   width: 20px;
   height: 20px;
   top: 70%;
   left: 80%;
   animation: floatG 5s infinite ease-in-out reverse;
}

.d3 {
   width: 60px;
   height: 60px;
   top: 60%;
   left: 30%;
   animation: floatG 8s infinite ease-in-out 1s;
   border-radius: 50%;
}

.d4 {
   width: 30px;
   height: 30px;
   top: 15%;
   left: 70%;
   animation: floatG 7s infinite ease-in-out 0.5s;
   transform: rotate(45deg);
}

.d5 {
   width: 10px;
   height: 10px;
   top: 50%;
   left: 50%;
   background: #2b50bc;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   animation: floatG 4s infinite;
}

@keyframes floatG {

   0%,
   100% {
      transform: translate3d(0, 0, 0) rotate(0deg);
   }

   50% {
      transform: translate3d(0, -20px, 20px) rotate(10deg);
   }
}

/* ============================================
   ZERO-GRAVITY TYPOGRAPHY UPDATE
   ============================================ */

.gravity-text {
   font-family: 'Orbitron', sans-serif;
   font-weight: 900;
   font-size: 180px;
   line-height: 1;
   margin: 0;
   letter-spacing: -5px;
   background: linear-gradient(135deg, #fff 0%, #cbd5e1 40%, #2b50bc 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   filter: drop-shadow(0 20px 50px rgba(43, 80, 188, 0.4));
   transform: translateZ(50px);
}

/* Magnetic Button */
.btn-magnetic-gravity {
   position: relative;
   padding: 15px 40px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 30px;
   color: white;
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
   font-size: 1.1rem;
   letter-spacing: 2px;
   text-decoration: none;
   overflow: hidden;
   
   transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-magnetic-gravity:hover {
   border-color: var(--accent-cyan);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

.btn-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient-primary);
   opacity: 0;
   z-index: -1;
   transition: opacity 0.3s ease;
}

.btn-magnetic-gravity:hover .btn-fill {
   opacity: 0.2;
}


/* ============================================
   REFERENCED ESPORTS LOGO ANIMATION
   ============================================ */

.esports-logo-svg {
   width: 500px;
   height: 500px;
   filter: drop-shadow(0 0 20px rgba(0, 180, 216, 0.4));
}

/* Animation: Ring Segments Drawing */
.ring-segment {
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: drawStroke 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Animation: Decor Pop-in */
.decor-shape {
   opacity: 0;
   transform-origin: center;
   animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s forwards;
}

/* Animation: Letters Typing/Drawing */
.letter-g {
   stroke-dasharray: 500;
   stroke-dashoffset: 500;
   animation: drawStroke 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

.letter-z {
   stroke-dasharray: 400;
   stroke-dashoffset: 400;
   animation: drawStroke 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards;
}

@keyframes drawStroke {
   to {
      stroke-dashoffset: 0;
   }
}

@keyframes popIn {
   from {
      opacity: 0;
      transform: scale(0);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}


/* ============================================
   REFINED GZ CONSTRUCTION HERO - LOOPING ANIMATION
   ============================================ */

.gz-refined-svg {
   width: 300px;
   height: auto;
   overflow: visible;
}

.gz-outline-text {
   fill: transparent;
   stroke: #00B4D8;
   stroke-width: 2px;
   stroke-dasharray: 500;
   stroke-dashoffset: 500;
   animation: gzLoopAnimation 6s ease-in-out infinite;
   filter: drop-shadow(0 0 15px rgba(0, 180, 216, 0.5));
}

/* Looping Animation: Draw in → Hold → Fade out → Repeat */
@keyframes gzLoopAnimation {

   /* Phase 1: Start invisible */
   0% {
      stroke-dashoffset: 500;
      fill: transparent;
      stroke: #00B4D8;
      opacity: 0;
      filter: drop-shadow(0 0 5px rgba(0, 180, 216, 0.3));
   }

   /* Phase 2: Fade in and start drawing */
   5% {
      opacity: 1;
      stroke-dashoffset: 500;
   }

   /* Phase 3: Drawing complete */
   35% {
      stroke-dashoffset: 0;
      fill: transparent;
      stroke: #00B4D8;
      filter: drop-shadow(0 0 20px rgba(0, 180, 216, 0.8));
   }

   /* Phase 4: Fill in with glow */
   45% {
      stroke-dashoffset: 0;
      fill: rgba(0, 180, 216, 0.15);
      stroke: white;
      filter: drop-shadow(0 0 30px rgba(0, 180, 216, 1));
   }

   /* Phase 5: Hold visible state */
   60% {
      stroke-dashoffset: 0;
      fill: rgba(0, 180, 216, 0.15);
      stroke: white;
      opacity: 1;
      filter: drop-shadow(0 0 25px rgba(0, 180, 216, 0.8));
   }

   /* Phase 6: Start fading out (reverse draw) */
   75% {
      stroke-dashoffset: 0;
      fill: transparent;
      stroke: #00B4D8;
      opacity: 0.8;
      filter: drop-shadow(0 0 15px rgba(0, 180, 216, 0.5));
   }

   /* Phase 7: Disappearing (reverse stroke) */
   95% {
      stroke-dashoffset: -500;
      fill: transparent;
      opacity: 0.2;
      filter: drop-shadow(0 0 5px rgba(0, 180, 216, 0.2));
   }

   /* Phase 8: Fully hidden, ready to restart */
   100% {
      stroke-dashoffset: -500;
      fill: transparent;
      opacity: 0;
      filter: drop-shadow(0 0 0px rgba(0, 180, 216, 0));
   }
}

/* Alternative: Breathing Glow Effect between cycles */
.gz-outline-text::after {
   animation: gzBreathingGlow 6s ease-in-out infinite;
}

@keyframes gzBreathingGlow {

   0%,
   100% {
      filter: drop-shadow(0 0 10px rgba(0, 180, 216, 0.4));
   }

   50% {
      filter: drop-shadow(0 0 40px rgba(0, 180, 216, 1));
   }
}

/* ============================================
   QUANTUM SINGULARITY HERO (BLACK HOLE)
   ============================================ */

.singularity-bg {
   position: absolute;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
   pointer-events: none;
}

.singularity-core {
   width: 150px;
   height: 150px;
   background: #000;
   border-radius: 50%;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   filter: blur(2px);
   z-index: 10;
   animation: corePulse 4s infinite ease-in-out;
}

.event-horizon {
   position: absolute;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: radial-gradient(circle, transparent 40%, rgba(43, 80, 188, 0.1) 60%, transparent 75%);
   animation: horizonRotate 20s linear infinite;
}

.energy-rings .ring {
   position: absolute;
   border: 1px dashed rgba(43, 80, 188, 0.3);
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.ring-1 {
   width: 350px;
   height: 350px;
   animation: spin 15s linear infinite;
}

.ring-2 {
   width: 450px;
   height: 450px;
   animation: spinReverse 25s linear infinite;
   opacity: 0.5;
}

.ring-3 {
   width: 280px;
   height: 280px;
   border-style: dotted;
   animation: spin 10s linear infinite;
   opacity: 0.7;
}

.gravitational-lensing {
   position: absolute;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(43, 80, 188, 0.05) 0%, transparent 70%);
   animation: lensPulse 6s infinite ease-in-out;
}

@keyframes corePulse {

   0%,
   100% {
      transform: scale(1);
      filter: blur(2px);
   }

   50% {
      transform: scale(1.1);
      filter: blur(5px);
   }
}

@keyframes lensPulse {

   0%,
   100% {
      opacity: 0.3;
      transform: scale(1);
   }

   50% {
      opacity: 0.6;
      transform: scale(1.2);
   }
}

@keyframes horizonRotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* GZ Energy Surge */
.gz-outline-text {
   animation: slowConstruction 8s cubic-bezier(0.4, 0, 0.2, 1) forwards, gzEnergySurge 2s infinite 8s ease-in-out;
}

@keyframes gzEnergySurge {

   0%,
   100% {
      filter: drop-shadow(0 0 15px rgba(0, 180, 216, 0.5));
      stroke-width: 2px;
   }

   50% {
      filter: drop-shadow(0 0 30px rgba(0, 180, 216, 1));
      stroke-width: 3px;
   }
}

/* ============================================
   OVERRIDING FINAL HERO STYLES
   ============================================ */

#singularity-hero-container {
   min-height: 500px !important;
   background: radial-gradient(circle at center, #040b18 0%, #000 70%) !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
}

.singularity-core {
   width: 130px !important;
   height: 130px !important;
   background: #000 !important;
   border-radius: 50% !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
   z-index: 5 !important;
   animation: coreBreatheFinal 8s infinite ease-in-out !important;
}

.energy-rings .ring {
   position: absolute !important;
   border: 2px dashed rgba(0, 180, 216, 0.3) !important;
   border-radius: 50% !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
}

.ring-1 {
   width: 300px !important;
   height: 300px !important;
   animation: spin 20s linear infinite !important;
}

.ring-2 {
   width: 420px !important;
   height: 420px !important;
   animation: spinReverse 40s linear infinite !important;
}

.gz-refined-svg {
   width: 220px !important;
   /* Smaller */
   z-index: 10 !important;
}

.gz-outline-text {
   stroke: white !important;
   stroke-width: 4px !important;
   stroke-dasharray: 600 !important;
   stroke-dashoffset: 600 !important;
   animation: constructionUltraSlow 12s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes constructionUltraSlow {
   0% {
      stroke-dashoffset: 600;
      fill: transparent;
   }

   70% {
      stroke-dashoffset: 0;
      fill: transparent;
   }

   100% {
      stroke-dashoffset: 0;
      fill: rgba(255, 255, 255, 0.1);
   }
}

@keyframes coreBreatheFinal {

   0%,
   100% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }
}


/* ============================================
   TRANS-VOID HERO REFINEMENT
   ============================================ */

#singularity-hero-container {
   background: transparent !important;
   /* Remove black bg */
   min-height: 400px !important;
}

.singularity-core {
   background: rgba(0, 0, 0, 0.5) !important;
   /* Semi-transparent core */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08);
}

/* Ensure GZ is visible and punchy */
.gz-outline-text {
   stroke: #00B4D8 !important;
   /* Force Cyan stroke for visibility */
   stroke-width: 5px !important;
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
   opacity: 1 !important;
   animation: constructionVisible 8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes constructionVisible {
   0% {
      stroke-dashoffset: 600;
      fill: transparent;
   }

   70% {
      stroke-dashoffset: 0;
      fill: transparent;
   }

   100% {
      stroke-dashoffset: 0;
      fill: rgba(255, 255, 255, 0.1);
      stroke: white;
   }
}/* Performance Optimization: Disable expensive effects during scroll */
body.is-scrolling *, 
body.is-scrolling *::before, 
body.is-scrolling *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}