:root {
  /* Deep Space Colors */
  --bg-dark: #000000;
  --bg-light: #050a14;
  --cobalt: #3b82f6;
  --purple: #8b5cf6;
  --silver: #f3f4f6;
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
}

body {
  background: radial-gradient(
    circle at center,
    var(--bg-light) 0%,
    var(--bg-dark) 100%
  );
  color: var(--silver);
  font-family: "Space Grotesk", sans-serif;
  overflow-x: hidden;
  cursor: none;
}

/* Ambient Nebula Background - Darker & Subtler */
.nebula-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.glow-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  will-change: transform; /* Hint to GPU */
  animation: floatBlob 25s infinite alternate ease-in-out;
  /* Removed expensive filter: blur() */
}

.glow-1 {
  top: -20%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  /* Baked-in blur using gradient */
  background: radial-gradient(
    circle,
    rgba(49, 46, 129, 0.8) 0%,
    rgba(49, 46, 129, 0) 70%
  );
  animation-delay: 0s;
}

.glow-2 {
  bottom: -20%;
  right: -10%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(
    circle,
    rgba(23, 37, 84, 0.8) 0%,
    rgba(23, 37, 84, 0) 70%
  );
  animation-delay: -5s;
}

.glow-3 {
  top: 30%;
  left: 30%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(
    circle,
    rgba(15, 23, 42, 0.8) 0%,
    rgba(15, 23, 42, 0) 70%
  );
  opacity: 0.4;
  animation-delay: -10s;
}

/* Mobile Background Intensity Fix */
@media (max-width: 768px) {
  .glow-blob {
    opacity: 0.4; /* Slightly brighter on mobile */
    filter: blur(60px); /* More blur for better spread */
  }
  .glow-1 {
    width: 140vw; /* Significantly larger relative to viewport width */
    height: 140vw;
    top: -30%;
    left: -20%;
  }
  .glow-2 {
    width: 140vw;
    height: 140vw;
    bottom: -30%;
    right: -20%;
  }
  .glow-3 {
    width: 100vw;
    height: 100vw;
    left: 0;
  }
}

@keyframes floatBlob {
  /* Përdor translate3d(x, y, 0) në vend të translate(x, y) */
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(40px, 60px, 0) scale(1.05);
  }
}

/* --- CUSTOM VISIBLE SCROLLBAR --- */

/* Firefox */
html {
  /* Let Lenis handle the smoothing. Auto prevents conflicts. */
  scroll-behavior: auto !important;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px; /* Width must be > 0 to be visible */
}

::-webkit-scrollbar-track {
  background: #050a14; /* Matches body background */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(34, 211, 238, 0.3); /* Cyan with opacity */
  border-radius: 5px; /* Rounded corners */
  border: 2px solid #050a14; /* Padding effect */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #22d3ee; /* Bright Cyan on hover */
  box-shadow: 0 0 10px #22d3ee; /* Glow effect */
}

/* Utilities */
.glass-panel {
  /* Më shumë opacity, më pak blur */
  background: rgba(15, 23, 42, 0.85);
  /* Hiqe ose ule në minimum backdrop-filter */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.text-outline {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
  color: transparent;
  transition: 0.3s;
}

.text-outline:hover {
  color: white;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  -webkit-text-stroke: 1px transparent;
}

/* Cursor - Energy Orb */
#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  /* CHANGE THIS: Increased from 9999 to 20000 to sit above Terminal (z-10000) and Preloader */
  z-index: 20000;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

#cursor-dot {
  width: 6px;
  height: 6px;
  background: #22d3ee;
  box-shadow: 0 0 15px #22d3ee;
}

#cursor-ring {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  transition:
    width 0.2s,
    height 0.2s,
    background-color 0.2s,
    border-color 0.2s;
}

body.hovering #cursor-ring {
  width: 60px;
  height: 60px;
  background: rgba(34, 211, 238, 0.05);
  border-color: #22d3ee;
}

/* Preloader Styles */
#preloader {
  position: fixed;
  inset: 0;
  background-color: #000;
  z-index: 10001; /* Above everything */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
}

.loader-bar-container {
  width: 200px;
  height: 2px;
  background: rgba(34, 211, 238, 0.2);
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  background: #22d3ee;
  width: 0%;
  box-shadow: 0 0 10px #22d3ee;
}

/* Animations */
.char {
  display: inline-block;
  transform-origin: 50% 100%;
  white-space: pre;
}

.scramble-active {
  font-family: "JetBrains Mono", monospace;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
  color: #22d3ee;
}

/* Slow Spin Animation for Background Elements */
@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animate-spin-slow {
  animation: spin-slow 60s linear infinite;
}

/* 3D Tilt Wrapper */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.tilt-inner {
  transform: translateZ(20px);
}

/* Spotlight Effect */
.spotlight-group {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

.spotlight-card {
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.spotlight-group:hover .spotlight-card::before {
  opacity: 1;
}

.spotlight-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(34, 211, 238, 0.1),
    transparent 40%
  );
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.spotlight-group:hover .spotlight-card::after {
  opacity: 1;
}

canvas#nebula {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#navbar {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll Light Meteor */
#scroll-light {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee, #ffffff);
  z-index: 9999;
  width: 0%;
  box-shadow: 0 0 20px 2px rgba(34, 211, 238, 0.6);
  transition: width 0.1s ease-out;
  border-radius: 0 4px 4px 0;
}

#scroll-light::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, transparent, white);
  filter: blur(2px);
}

/* Tech Stack Scanner Animation */
.tech-card {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(34, 211, 238, 0.1);
  transition: all 0.4s ease;
}

.tech-card:hover {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(34, 211, 238, 0.05);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.1);
}

/* Kjo është vija lazer që skanon */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(34, 211, 238, 0.2),
    transparent
  );
  transform: translateY(-100%);
  transition: none;
}

.tech-card:hover .scan-line {
  animation: scan 1.5s linear infinite;
}

@keyframes scan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Numrat teknik në cepa */
.tech-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 10px;
  right: 10px;
}

/* About Section Specifics */
/* --- ABOUT US / THE CREW SECTION STYLES --- */

/* 1. Stili Bazë i Unazave (Default: Cyan për Developer) */
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, 0.2); /* Cyan Base */
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
  pointer-events: none; /* Që të mos pengojë klikimet */
}

/* 2. Unazat Specifike për Developer (Cyan) */
.orbit-1 {
  width: 110%;
  height: 110%;
  border-top-color: #22d3ee;
  animation: spin-slow 20s linear infinite;
}

.orbit-2 {
  width: 130%;
  height: 130%;
  border-bottom-color: #22d3ee;
  animation: spin-slow 25s linear infinite reverse;
}

/* 3. Unazat Specifike për Marketing (Vjollcë/Rozë) 
   Kjo mbishkruan ngjyrën Cyan me ngjyrën e Marketingut */
.orbit-ring-marketing {
  border-color: rgba(168, 85, 247, 0.2); /* Purple Base Override */
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
}

.orbit-m-1 {
  width: 110%;
  height: 110%;
  border-top-color: #d946ef; /* Pink/Fuchsia Highlight */
  animation: spin-slow 20s linear infinite;
}

.orbit-m-2 {
  width: 130%;
  height: 130%;
  border-bottom-color: #a855f7; /* Purple Highlight */
  animation: spin-slow 25s linear infinite reverse;
}

/* 4. Animacioni i Rrotullimit */
@keyframes spin-slow {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* --- FAQ / DATA ARCHIVE STYLES --- */

/* The Container for each question */
.faq-item {
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

/* Hover State */
.faq-item:hover {
  border-color: rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.02);
}

/* ACTIVE STATE (When opened) */
.faq-item.active {
  border-color: #22d3ee;
  background: rgba(34, 211, 238, 0.05);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.1);
}

/* The Plus/Cross Icon Animation */
.faq-icon {
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: #22d3ee;
}

/* The Answer (Hidden by default) */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); /* Smooth 'decrypt' effect */
}

/* --- FIX: Rregullimi i prerjes se shkronjave ne titull --- */
#hero-title div {
  overflow: visible !important;
}

/* --- COSMIC WORK SECTION --- */

/* Korniza e kartës (Mission Card) */
.mission-card {
  background: rgba(5, 10, 20, 0.9); /* Më e errët, më pak transparente */
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease; /* Hiq 'all' për performancë */
  /* backdrop-filter: blur(10px);  <-- HIQE KËTË, nuk duket shumë mbi imazh dhe e rëndon kartën */
}

/* Efekti Hover - Dritë Neoni */
.mission-card:hover {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.1);
  transform: translateY(-10px) scale(1.02);
}

/* HUD Corners (Kllapat në cepa) */
.hud-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.mission-card:hover .hud-corner {
  opacity: 1;
  border-color: #22d3ee;
  width: 30px;
  height: 30px;
}

.corner-tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
}
.corner-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
}

/* Tech Tags */
.tech-pill {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: #22d3ee;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Navigation Active State */
.nav-scramble.active {
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.nav-scramble.active::before {
  content: ">";
  position: absolute;
  left: -12px;
  color: #22d3ee;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* --- HIDE CUSTOM CURSOR ON MOBILE --- */
@media (max-width: 1024px) or (hover: none) {
  #cursor-dot,
  #cursor-ring {
    display: none !important;
  }

  body {
    cursor: auto !important; /* Kthen kursorin normal (prekjen) */
  }
}

/* --- HIDE SCROLLBAR FOR SLIDER --- */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.tech-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
  border-width: 1px;
}

/* --- LARGE SCREEN FIXES --- */
@media (min-width: 1600px) {
  /* Cap the size of the background blobs so they don't consume the screen */
  .glow-1,
  .glow-2,
  .glow-3 {
    width: 800px;
    height: 800px;
    filter: blur(80px); /* Smooth out the blur on 4k */
  }

  /* Re-position them slightly to stay centered */
  .glow-1 {
    top: -10%;
    left: 10%;
  }
  .glow-2 {
    bottom: -10%;
    right: 10%;
  }

  /* Ensure the container doesn't look like a thin strip */
  .max-w-7xl {
    max-width: 1600px; /* Allow wider layout on 4K screens */
  }
}

/* --- TERMINAL CURSOR FIX --- */
/* Restore standard cursor inside the terminal for better usability */
#cmd-terminal {
  cursor: default; /* Show standard arrow inside the terminal window */
}

#cmd-input {
  cursor: text; /* Show 'I-beam' text cursor on the input field */
}

/* Update the existing #preloader block by adding the animation property */
#preloader {
  position: fixed;
  inset: 0;
  background-color: #000;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;

  /* ADD THIS LINE: 6s delay before forcing it to hide over 0.5s */
  animation: preloaderFailsafe 0.5s ease-in-out 6s forwards;
}

/* Add the keyframes for the failsafe */
@keyframes preloaderFailsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}