@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* ================================================================
   PAGE TRANSITION WRAPPER
   ================================================================ */
.page-transition-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sliding-out-left {
  transform: translateX(-100%) scale(0.95);
  opacity: 0;
}
.sliding-out-right {
  transform: translateX(100%) scale(0.95);
  opacity: 0;
}
.sliding-in-left {
  transform: translateX(-100vw);
  opacity: 0;
}
.sliding-in-right {
  transform: translateX(100vw);
  opacity: 0;
}

/* ================================================================
   SLIDE CONTROLS (Edge Arrows)
   ================================================================ */
.era-nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  background: rgba(3, 3, 5, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.era-nav-arrow i {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.era-nav-arrow-left {
  left: 20px;
}
.era-nav-arrow-left:hover {
  transform: translateY(-50%) translateX(-4px);
  border-color: var(--theme-accent);
  box-shadow: 0 0 20px var(--theme-accent-alpha);
}
.era-nav-arrow-left:hover i {
  transform: translateX(-2px);
}

.era-nav-arrow-right {
  right: 20px;
}
.era-nav-arrow-right:hover {
  transform: translateY(-50%) translateX(4px);
  border-color: var(--theme-accent);
  box-shadow: 0 0 20px var(--theme-accent-alpha);
}
.era-nav-arrow-right:hover i {
  transform: translateX(2px);
}

/* Tooltip hints above/below arrows */
.era-nav-label {
  position: absolute;
  top: -30px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.6;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 600;
  transition: opacity 0.3s ease;
}
.era-nav-arrow:hover .era-nav-label {
  opacity: 1;
}

/* ================================================================
   RETRO THEME (PAST ERA)
   ================================================================ */
.theme-retro {
  --theme-accent: #ffb800;
  --theme-accent-alpha: rgba(255, 184, 0, 0.25);
  --theme-bg: #120c06;
  --theme-card-bg: rgba(25, 18, 10, 0.75);
  --theme-border: rgba(255, 184, 0, 0.25);
  --theme-border-hover: rgba(255, 184, 0, 0.6);
  --theme-text: #ffeab3;
  --theme-text-muted: #a6917c;

  /* Transparent so the fixed ::after bg image shows through the whole page */
  background-color: transparent !important;
  color: var(--theme-text) !important;
  font-family: 'VT323', monospace !important;
  font-size: 1.25rem;
}

/* ── Full-page fixed retro background image ── */
.theme-retro::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* The arcade room image */
  background-image: url('images/past_era_retro_bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Warm + bright: sepia gives amber tone, brightness lifted to 0.78, warm color overlay via mix-blend won't work on pseudo so use a layered bg */
  filter: sepia(0.65) contrast(1.1) brightness(0.78) saturate(1.35) hue-rotate(-5deg);
  /* Sits below everything including content and scanlines */
  z-index: -1;
  /* Subtle CRT flicker */
  animation: retroBgFlicker 8s ease-in-out infinite;
  /* Warm amber tint overlay baked on top via mix */
  /* We add a warm pseudo-gradient on top of the image via background layers */
}

/* Warm amber colour wash on top of the image — makes the whole page feel warm */
.theme-retro::before {
  /* Keep CRT scanlines on ::before but also layer warm amber wash */
  content: ' ';
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  /* Layer 1: warm amber overlay   Layer 2: CRT scanlines   Layer 3: RGB fringe */
  background:
    linear-gradient(rgba(255, 150, 20, 0.12), rgba(255, 150, 20, 0.12)),
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.20) 50%),
    linear-gradient(90deg, rgba(255, 80, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
  background-size: 100% 100%, 100% 4px, 6px 100%;
  z-index: 99999;
  pointer-events: none;
}

/* (Scanlines + warm overlay moved into .theme-retro::before above) */

/* ── Past Era: hero overlay stacking ── */
.theme-retro .hero {
  position: relative;
  overflow: hidden;
  /* Light dark-to-transparent gradient at top so navbar text stays legible */
  background: linear-gradient(
    180deg,
    rgba(18, 12, 6, 0.45) 0%,
    transparent 25%,
    transparent 75%,
    rgba(18, 12, 6, 0.35) 100%
  ) !important;
}

/* Make sure content layers are above the fixed bg */
.theme-retro .hero .hero-overlay,
.theme-retro .hero .hero-photo-mosaic {
  position: relative;
  z-index: 2;
}

/* CRT flicker keyframes */
@keyframes retroBgFlicker {
  0%, 100% { opacity: 1; }
  48%       { opacity: 1; }
  49%       { opacity: 0.93; }
  50%       { opacity: 1; }
  92%       { opacity: 1; }
  93%       { opacity: 0.96; }
  94%       { opacity: 1; }
}

/* Ensure all sections on the past page are also transparent so the fixed bg shows through */
.theme-retro .past-section,
.theme-retro .main-content,
.theme-retro .page-transition-wrapper {
  background: transparent !important;
}

/* CRITICAL: make the era-bg div transparent so our fixed retro image shows through */
.theme-retro .era-bg {
  background-color: transparent !important;
  background: transparent !important;
}

/* Also remove any solid bg on sections so the image bleeds through */
.theme-retro section,
.theme-retro .video-section,
.theme-retro .past-section {
  background: transparent !important;
}

/* ================================================================
   DZENITH V1.0 — WARM GLOWING HERO TITLE
   ================================================================ */
.theme-retro .hero-title {
  /* Bright warm amber-to-gold gradient text */
  background: linear-gradient(
    180deg,
    #fff7d6 0%,
    #ffda6b 30%,
    #ffb800 65%,
    #e07b00 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  /* Override font & sizing */
  font-family: 'Press Start 2P', monospace !important;
  font-size: clamp(2rem, 5.5vw, 3.8rem) !important;
  line-height: 1.35 !important;
  letter-spacing: 2px !important;

  /* drop-shadow works correctly on clip-text unlike text-shadow.
     Stack multiple to build: pixel offset → core glow → mid → outer halo */
  filter:
    drop-shadow(3px 3px 0px rgba(80, 35, 0, 0.95))
    drop-shadow(0px 0px 6px  rgba(255, 210, 50, 1.0))
    drop-shadow(0px 0px 18px rgba(255, 155, 10, 0.95))
    drop-shadow(0px 0px 40px rgba(255, 110,  0, 0.75))
    drop-shadow(0px 0px 80px rgba(255,  80,  0, 0.45)) !important;

  /* Reveal + then pulse glow like a neon arcade sign */
  animation: titleReveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s both,
             retroTitleGlow 3s ease-in-out 1.6s infinite !important;
}

/* Pulse the glow intensity gently */
@keyframes retroTitleGlow {
  0%, 100% {
    filter:
      drop-shadow(3px 3px 0px rgba(80, 35, 0, 0.95))
      drop-shadow(0px 0px 6px  rgba(255, 210, 50, 1.0))
      drop-shadow(0px 0px 18px rgba(255, 155, 10, 0.95))
      drop-shadow(0px 0px 40px rgba(255, 110,  0, 0.75))
      drop-shadow(0px 0px 80px rgba(255,  80,  0, 0.45));
  }
  50% {
    filter:
      drop-shadow(3px 3px 0px rgba(80, 35, 0, 0.95))
      drop-shadow(0px 0px 10px rgba(255, 230, 80, 1.0))
      drop-shadow(0px 0px 30px rgba(255, 175, 30, 1.0))
      drop-shadow(0px 0px 60px rgba(255, 125,  0, 0.9))
      drop-shadow(0px 0px 110px rgba(255, 90,  0, 0.6));
  }
}

/* Hero subtitle warm treatment */
.theme-retro .hero-subtitle {
  color: #ffeab3 !important;
  font-family: 'VT323', monospace !important;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem) !important;
  filter: drop-shadow(0 0 8px rgba(255, 160, 20, 0.6)) drop-shadow(0 0 20px rgba(255, 100, 0, 0.3)) !important;
}

/* Hero era tag + dept text warm glow */
.theme-retro .hero-era-tag,
.theme-retro .hero-dept {
  color: #ffda6b !important;
  filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.7)) drop-shadow(0 0 20px rgba(255, 120, 0, 0.4)) !important;
  border-color: rgba(255, 184, 0, 0.35) !important;
  background: rgba(60, 30, 0, 0.5) !important;
  backdrop-filter: blur(6px) !important;
}

/* Retro styles */
.theme-retro h1, .theme-retro h2, .theme-retro h3, .theme-retro h4, .theme-retro h5, .theme-retro .logo-brand-text, .theme-retro .section-label {
  font-family: 'Press Start 2P', monospace !important;
  letter-spacing: 0px !important;
  color: var(--theme-accent) !important;
  text-shadow: 2px 2px 0px #4d3300, 0px 0px 8px var(--theme-accent-alpha);
}

.theme-retro h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; line-height: 1.3 !important; }
.theme-retro h2 { font-size: clamp(1.4rem, 3vw, 2rem) !important; }
.theme-retro h3 { font-size: clamp(1.1rem, 2vw, 1.4rem) !important; }
.theme-retro .logo-brand-text { font-size: 1.1rem !important; }

/* Retro border lines and buttons */
.theme-retro .glass-card, 
.theme-retro .sponsor-info-card, 
.theme-retro .testimonial, 
.theme-retro nav ul li a::after, 
.theme-retro .btn, 
.theme-retro .user-avatar, 
.theme-retro .slider button {
  border: 3px double var(--theme-accent) !important;
  border-radius: 0px !important;
  background: var(--theme-card-bg) !important;
  box-shadow: 4px 4px 0px #4d3300 !important;
  backdrop-filter: none !important;
}

.theme-retro .btn-primary {
  background: var(--theme-accent) !important;
  color: #000 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.8rem !important;
  height: auto !important;
  padding: 12px 24px !important;
}
.theme-retro .btn-primary:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0px #4d3300 !important;
}
.theme-retro .btn-glass {
  background: transparent !important;
  color: var(--theme-accent) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.8rem !important;
  height: auto !important;
  padding: 12px 24px !important;
}
.theme-retro .btn-glass:hover {
  background: var(--theme-accent-alpha) !important;
  transform: translate(2px, 2px) !important;
}

/* Navigation items styling */
.theme-retro nav ul li a, .theme-retro .logo-brand {
  font-family: 'VT323', monospace !important;
  font-size: 1.5rem !important;
}
.theme-retro nav ul li a.active {
  color: var(--theme-accent) !important;
}

/* Custom retro block cursor elements */
.theme-retro-cursor-ring {
  width: 20px !important;
  height: 20px !important;
  border-radius: 0% !important;
  border: 2px solid var(--theme-accent) !important;
  background: var(--theme-accent-alpha) !important;
}
.theme-retro-cursor-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 0% !important;
  background: var(--theme-accent) !important;
}

/* ================================================================
   2. PRESENT (Normal/Current)
   Clean, modern, high-contrast, electric lime green vibe
   ================================================================ */
body.theme-normal,
body[data-era="present"] {
  /* Override the theme-specific variables */
  --theme-accent: #000000;
  --theme-accent-alpha: rgba(0, 0, 0, 0.15);
  --theme-bg: #cbf526; /* vibrant electric lime green */
  --theme-card-bg: #000000;
  --theme-border: #000000;
  --theme-border-hover: #000000;
  --theme-text: #000000;
  --theme-text-muted: #1e293b;

  /* CRITICAL FIX: Override the CORE variables from style.css for precision present era styling */
  --bg-card: rgba(0, 0, 0, 0.04);
  --border-light: rgba(0, 0, 0, 0.15);
  --border-hover: rgba(0, 0, 0, 0.4);
  --text-main: #000000;
  --text-muted: #1e293b;
  
  background-color: #cbf526 !important;
  background: #cbf526 !important;
  color: #000000 !important;
}

body.theme-normal .era-bg,
body[data-era="present"] .era-bg,
.era-bg.era-present {
  background-color: #cbf526 !important;
  background: #cbf526 !important;
  opacity: 1 !important;
}

body[data-era="present"] .era-bg::before,
body[data-era="present"] .era-bg::after {
  display: none !important;
}

/* Present page custom styling */
.theme-normal h1, 
.theme-normal h2, 
.theme-normal h3, 
.theme-normal h4, 
.theme-normal h5, 
.theme-normal .logo-brand-text, 
.theme-normal .section-label,
.theme-normal nav ul li a,
.theme-normal .logo-bar {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
  text-shadow: none !important;
}

.theme-normal nav ul li a.active::after,
.theme-normal nav ul li a:hover::after {
  background: #000000 !important;
}

.theme-normal nav ul li a {
  color: rgba(0, 0, 0, 0.8) !important;
  font-weight: 600;
}

.theme-normal nav ul li a:hover,
.theme-normal nav ul li a.active {
  color: #000000 !important;
}

.theme-normal .site-footer {
  background: #ffffff !important;
  color: #000000 !important;
  border-top: 3px solid #000000 !important;
}
.theme-normal .site-footer h2,
.theme-normal .site-footer a,
.theme-normal .site-footer .copyright-info {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.theme-normal .site-footer .footer-social ul li a {
  color: #000000 !important;
  border: 2px solid #000000 !important;
}
.theme-normal .site-footer .footer-social ul li a:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

.theme-normal .btn-primary {
  background: #000000 !important;
  color: #cbf526 !important;
  border: 2px solid #000000 !important;
}
.theme-normal .btn-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

.theme-normal .btn-glass {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  backdrop-filter: blur(10px) !important;
}
.theme-normal .btn-glass:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

.theme-normal .era-nav-arrow {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}
.theme-normal .era-nav-arrow i {
  color: #000000 !important;
}

/* Present hero section */
#home,
#home.hero,
#home.present-hero,
.hero.present-hero {
  background-color: #cbf526 !important;
  background: #cbf526 !important;
  min-height: auto;
  padding: 90px 0 60px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.hero.present-hero .hero-grid {
  display: none !important;
}

.hero.present-hero .hero-cta-group,
.hero.present-hero .hero-scroll-hint {
  display: none !important;
}

/* Watermark background text */
.present-hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Outfit', 'Share Tech Mono', sans-serif;
  font-size: clamp(6rem, 20vw, 22rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.12) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.12) !important;
  -webkit-text-stroke: 0px !important;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  text-transform: uppercase;
}

/* Central present hero overlay content */
.present-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 900px;
  padding: 0 24px;
  margin: 0 auto;
}

.present-dz-logo {
  width: 145px;
  height: 145px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.present-tagline {
  font-family: 'Share Tech Mono', 'VT323', monospace !important;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  margin-top: 4px;
}

.present-title {
  font-family: 'Share Tech Mono', 'VT323', monospace !important;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: none !important;
  padding: 0 !important;
  margin: 8px 0 12px !important;
  text-align: center;
  line-height: 1.1;
}

.present-description {
  font-family: 'Share Tech Mono', 'VT323', monospace !important;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
  font-weight: 600;
  max-width: 680px;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-align: center;
  line-height: 1.5;
}

/* Floating SVG Doodles */
.doodles-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.doodle-svg {
  position: absolute;
  color: #000000 !important;
  stroke: #000000 !important;
  pointer-events: none;
  animation: doodleDrift 8s ease-in-out infinite alternate;
}

.doodle-headphones { width: 130px; height: 130px; top: 4%; left: 2%; transform: rotate(-12deg); animation-delay: 0s; }
.doodle-laptop     { width: 120px; height: 120px; top: 3%; left: 25%; transform: rotate(-8deg); animation-delay: 2s; }
.doodle-watch      { width: 110px; height: 110px; top: 3%; right: 24%; transform: rotate(12deg); animation-delay: 4s; }
.doodle-controller { width: 120px; height: 120px; top: 40%; left: 1%; transform: rotate(-18deg); animation-delay: 1.5s; }
.doodle-phone      { width: 100px; height: 100px; top: 40%; right: 2%; transform: rotate(22deg); animation-delay: 3s; }

/* Social Floating Icons (top right) */
.doodle-social {
  position: absolute;
  top: 5%;
  right: 4%;
  width: 130px;
  height: 130px;
}

.social-reaction-icon {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: socialBounce 4s ease-in-out infinite alternate;
}

.social-heart { background: #f1a94e !important; top: 0; right: 25px; animation-delay: 0s; }
.social-like  { background: #8ec379 !important; top: 30px; left: 0; font-size: 0.95rem; animation-delay: 0.5s; }
.social-share { background: #46a2e8 !important; top: 45px; right: 0; font-size: 0.95rem; animation-delay: 1s; }
.social-love  { background: #ea647f !important; top: 85px; left: 30px; animation-delay: 1.5s; }

@keyframes socialBounce {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-8px) scale(1.06); }
}

/* Scrolling Marquee */
.present-marquee {
  background: #cbf526 !important;
  border-top: 2.5px solid #000000 !important;
  border-bottom: 2.5px solid #000000 !important;
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  width: 100vw;
  position: relative;
  z-index: 10;
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marqueeScroll 25s linear infinite;
}

.marquee-track span {
  font-family: 'Share Tech Mono', 'VT323', monospace !important;
  font-size: 1.25rem;
  font-weight: 900;
  color: #000000 !important;
  letter-spacing: 0.06em;
  padding-right: 2rem;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Present Cards Section */
.present-cards-section {
  position: relative;
  width: 100%;
  background: #cbf526 !important;
  padding: 50px 0 80px;
  z-index: 2;
  overflow: hidden;
}

.present-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.present-card,
.present-cards-section .reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.present-card {
  background: #000000 !important;
  border: none !important;
  border-radius: 24px !important;
  color: #cbf526 !important;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.present-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

.present-card h3 {
  font-family: 'Share Tech Mono', 'VT323', monospace !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #cbf526 !important;
  -webkit-text-fill-color: #cbf526 !important;
  margin-bottom: 12px;
  letter-spacing: 0.02em !important;
}

.present-card p {
  font-family: 'Share Tech Mono', 'VT323', monospace !important;
  font-size: 0.92rem !important;
  color: #cbf526 !important;
  -webkit-text-fill-color: #cbf526 !important;
  line-height: 1.45;
  font-weight: 600 !important;
}

.present-cards-section .doodle-star {
  width: 90px;
  height: 90px;
  bottom: 20%;
  left: 3%;
  color: #799e12 !important;
  stroke: #799e12 !important;
}

.present-cards-section .doodle-sparkle {
  width: 65px;
  height: 65px;
  bottom: 8%;
  left: 8%;
  color: #ea647f !important;
  stroke: #ea647f !important;
}

.present-cards-section .doodle-reload {
  width: 75px;
  height: 75px;
  bottom: 15%;
  right: 5%;
  color: #ea647f !important;
  stroke: #ea647f !important;
}

/* ================================================================
   SCI-FI THEME (FUTURE ERA)
   ================================================================ */
.theme-scifi {
  --theme-accent: #00f0ff;
  --theme-accent-purple: #8b5cf6;
  --theme-accent-alpha: rgba(0, 240, 255, 0.15);
  --theme-bg: #020208;
  --theme-card-bg: rgba(5, 10, 25, 0.6);
  --theme-border: rgba(0, 240, 255, 0.2);
  --theme-border-hover: rgba(0, 240, 255, 0.8);
  --theme-text: #e0f2fe;
  --theme-text-muted: #7dd3fc;
  
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

/* Future grid and holograms background */
.theme-scifi::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
}

/* Future fonts */
.theme-scifi h1, .theme-scifi h2, .theme-scifi h3, .theme-scifi h4, .theme-scifi h5, .theme-scifi .logo-brand-text, .theme-scifi .section-label {
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px !important;
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, var(--theme-accent) 50%, var(--theme-accent-purple) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.3));
}

.theme-scifi .section-label {
  font-size: 0.8rem;
  letter-spacing: 0.3em !important;
}

/* Future tech cards & borders */
.theme-scifi .glass-card, 
.theme-scifi .event-content, 
.theme-scifi .single_propram,
.theme-scifi .single-event-details,
.theme-scifi .single-event-map {
  border: 1px solid var(--theme-border) !important;
  background: var(--theme-card-bg) !important;
  border-radius: 8px !important;
  /* Tech angled corners */
  clip-path: polygon(
    0 0, 
    calc(100% - 15px) 0, 
    100% 15px, 
    100% 100%, 
    15px 100%, 
    0 calc(100% - 15px)
  ) !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.1) !important;
}

/* Glowing tech border lines on hover */
.theme-scifi .glass-card:hover, 
.theme-scifi .event-content:hover,
.theme-scifi .single_propram:hover {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.3) !important;
}

/* Cyber buttons */
.theme-scifi .btn {
  font-family: 'Orbitron', sans-serif !important;
  border-radius: 4px !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}
.theme-scifi .btn-primary {
  background: transparent !important;
  border: 2px solid var(--theme-accent) !important;
  color: var(--theme-accent) !important;
  box-shadow: 0 0 15px var(--theme-accent-alpha) !important;
}
.theme-scifi .btn-primary:hover {
  background: var(--theme-accent) !important;
  color: #000 !important;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.6) !important;
}
.theme-scifi .btn-glass {
  background: transparent !important;
  border: 2px solid var(--theme-accent-purple) !important;
  color: var(--theme-accent-purple) !important;
}
.theme-scifi .btn-glass:hover {
  background: var(--theme-accent-purple) !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.6) !important;
}

/* Custom Sci-fi HUD custom cursor ring */
.theme-scifi-cursor-ring {
  border: 1px dashed var(--theme-accent) !important;
  box-shadow: 0 0 8px var(--theme-accent) !important;
  border-radius: 50% !important;
}
.theme-scifi-cursor-dot {
  background: var(--theme-accent) !important;
  box-shadow: 0 0 10px var(--theme-accent) !important;
}

/* Badge styles */
.theme-scifi .event-category-badge {
  background: rgba(0, 240, 255, 0.15) !important;
  border: 1px solid var(--theme-accent) !important;
  color: var(--theme-accent) !important;
  text-shadow: 0 0 5px var(--theme-accent);
}
.theme-scifi .event-title {
  font-family: 'Orbitron', sans-serif !important;
  color: var(--theme-text) !important;
}
.theme-scifi .date-text {
  color: var(--theme-accent) !important;
  text-shadow: 0 0 8px var(--theme-accent-alpha);
}
.theme-scifi iframe {
  filter: invert(0.9) hue-rotate(180deg) saturate(1.5) !important;
}