/* ===================== BASE ===================== */
html { scroll-behavior: auto; } /* Lenis handles smooth scroll */
body { cursor: none; }
@media (max-width: 1024px){ body{ cursor:auto; } .cursor-dot,.cursor-ring{ display:none; } }

::selection{ background:#38BDF8; color:#071E3D; }

.font-display{ font-family:'Space Grotesk', sans-serif; }
.font-body{ font-family:'Inter', sans-serif; }
.font-mono{ font-family:'JetBrains Mono', monospace; }

.text-gradient{
  background:linear-gradient(90deg,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===================== LOADER ===================== */
.loader{
  position:fixed; inset:0; z-index:999;
  background:#040F20;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; }
.loader-logo{ width:60px; height:60px; animation:loaderSpin 2.2s ease-in-out infinite; }
@keyframes loaderSpin{ 0%,100%{ transform:rotate(0deg) scale(1); } 50%{ transform:rotate(180deg) scale(1.08); } }
.loader-bar-track{ width:160px; height:2px; background:rgba(248,250,252,0.1); border-radius:10px; margin-top:1.4rem; overflow:hidden; }
.loader-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg,#2563EB,#38BDF8); border-radius:10px; }

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,#2563EB,#38BDF8);
  z-index:100; box-shadow:0 0 12px #38BDF8AA;
}

/* ===================== CURSOR ===================== */
.cursor-dot{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:#38BDF8; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
}
.cursor-ring{
  position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(56,189,248,0.5); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:width 0.25s, height 0.25s, border-color 0.25s;
}
.cursor-ring.hover{ width:56px; height:56px; border-color:#38BDF8; }

/* ===================== LOGO ANIMATED ===================== */
.logo-anim{ position:relative; width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-ring{ position:absolute; inset:0; width:100%; height:100%; animation:logoSpin 4s linear infinite; }
@keyframes logoSpin{ to{ transform:rotate(360deg); } }
.logo-icon{ width:16px; height:16px; color:#38BDF8; animation:logoPulse 2.4s ease-in-out infinite; }
@keyframes logoPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.15); opacity:0.7; } }

/* ===================== NAVBAR ===================== */
#navbar.scrolled{ background:rgba(4,15,32,0.75); backdrop-filter:blur(14px); border-bottom:1px solid rgba(248,250,252,0.06); }
.nav-link{ position:relative; transition:color 0.3s; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:#38BDF8; transition:width 0.3s; }
.nav-link:hover{ color:#F8FAFC; }
.nav-link:hover::after{ width:100%; }

/* ===================== HERO VIDEO ===================== */
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:brightness(0.5) saturate(1.1); }
.hero-video-overlay{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(7,30,61,0.55) 0%, rgba(4,15,32,0.85) 100%); }

/* ===================== GRADIENT ANIMATED BG (Hero) ===================== */
.gradient-anim-bg{
  background:linear-gradient(120deg, #071E3D, #1e3a6e, #071E3D, #163a5c, #071E3D);
  background-size:400% 400%;
  animation:gradientMove 16s ease infinite;
}
@keyframes gradientMove{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* Floating blur blobs */
.floating-blur{ position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35; z-index:1; pointer-events:none; }
.blur-1{ width:420px; height:420px; background:#2563EB; top:-100px; left:-80px; animation:floatBlob 12s ease-in-out infinite; }
.blur-2{ width:360px; height:360px; background:#38BDF8; bottom:-120px; right:-60px; animation:floatBlob 14s ease-in-out infinite reverse; }
.blur-3{ width:280px; height:280px; background:#6d5ce7; top:40%; left:60%; animation:floatBlob 10s ease-in-out infinite; }
@keyframes floatBlob{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-40px) scale(1.1); }
}

/* ===================== EYEBROW / LABELS ===================== */
.eyebrow-chip{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
  padding:0.5rem 1rem; border-radius:100px; color:#38BDF8;
  border:1px solid rgba(56,189,248,0.3); background:rgba(56,189,248,0.06);
}
.eyebrow-label{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; color:#38BDF8;
}

/* ===================== GLASSMORPHISM ===================== */
.glass-card{
  background:rgba(248,250,252,0.04);
  border:1px solid rgba(248,250,252,0.08);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
}

/* ===================== NEON HOVER / BORDER ANIMATION ===================== */
.neon-hover{
  position:relative; transition:transform 0.4s ease, box-shadow 0.4s ease;
  transform-style:preserve-3d;
}
.neon-hover:hover{
  box-shadow:0 0 0 1px rgba(56,189,248,0.5), 0 20px 60px rgba(37,99,235,0.25), 0 0 40px rgba(56,189,248,0.15);
  transform:translateY(-6px);
}

.animated-border{
  position:relative; border:1px solid rgba(248,250,252,0.15);
  overflow:hidden;
}
.animated-border::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  background:conic-gradient(from 0deg, transparent, #38BDF8, transparent 30%);
  animation:borderSpin 3s linear infinite;
  z-index:-1; opacity:0; transition:opacity 0.3s;
}
.animated-border:hover::before{ opacity:1; }
@keyframes borderSpin{ to{ transform:rotate(360deg); } }

/* ===================== BUTTON GLOW / RIPPLE ===================== */
.btn-glow{ position:relative; overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.btn-glow:hover{ transform:scale(1.045); box-shadow:0 0 30px rgba(56,189,248,0.5); }
.btn-glow .icon-move{ transition:transform 0.3s ease; }
.btn-glow:hover .icon-move{ transform:translate(3px,-3px); }
.btn-glow::after{
  content:''; position:absolute; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,0.5); transform:translate(-50%,-50%) scale(0);
  top:var(--ry,50%); left:var(--rx,50%); pointer-events:none;
}
.btn-glow:active::after{ animation:ripple 0.6s ease-out; }
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(18); opacity:0; } }

/* ===================== HERO FLOATING CARDS ===================== */
.hero-float-card{ animation:floatY 5s ease-in-out infinite; }
.hero-float-card-2{
  position:absolute; bottom:-30px; left:-30px; width:150px;
  animation:floatY 6s ease-in-out infinite reverse;
}
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

/* ===================== SCROLL INDICATOR (hero) ===================== */
.scroll-indicator{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(248,250,252,0.3); border-radius:20px;
  z-index:5;
}
.scroll-indicator span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; border-radius:4px;
  background:#38BDF8; transform:translateX(-50%);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ top:6px; opacity:1; } 80%{ top:24px; opacity:0; } 100%{ top:6px; opacity:0; } }

/* ===================== LAYER TRANSFORMATION (About) ===================== */
.layer{ opacity:0; transform:translateY(50px); transition:opacity 0.9s ease, transform 0.9s ease; }
.layer.in{ opacity:1; transform:translateY(0); }

/* ===================== CARD REVEAL (opacity > translateY > blur > normal) ===================== */
.card-reveal{ opacity:0; transform:translateY(36px); filter:blur(6px); transition:opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease; }
.card-reveal.in{ opacity:1; transform:translateY(0); filter:blur(0); }

/* ===================== COUNTRY MAP ===================== */
.pulse-ring{ animation:pulseRing 2.4s ease-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes pulseRing{ 0%{ opacity:0.6; transform:scale(1); } 100%{ opacity:0; transform:scale(2.8); } }
.route-line{ stroke-dasharray:6 6; animation:dashMove 2s linear infinite; }
@keyframes dashMove{ to{ stroke-dashoffset:-24; } }
.country-dot{ cursor:pointer; }
.country-dot circle:first-child{ transition:r 0.3s ease; }
.country-dot:hover circle:first-child{ r:11; }

/* ===================== TIMELINE ===================== */
.timeline-track{ position:relative; padding-left:2.5rem; }
.timeline-track::before{
  content:''; position:absolute; left:6px; top:0; bottom:0; width:2px;
  background:rgba(248,250,252,0.1);
}
.timeline-progress{
  position:absolute; left:6px; top:0; width:2px; height:0%;
  background:linear-gradient(180deg,#2563EB,#38BDF8);
  box-shadow:0 0 10px #38BDF8;
}
.timeline-item{ position:relative; margin-bottom:2.5rem; opacity:0; transform:translateX(-20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.timeline-item.in{ opacity:1; transform:translateX(0); }
.timeline-dot{
  position:absolute; left:-2.5rem; top:6px; width:14px; height:14px; border-radius:50%;
  background:#071E3D; border:2px solid #38BDF8;
}
.timeline-item.in .timeline-dot{ box-shadow:0 0 14px #38BDF8; }

/* ===================== GALLERY SCROLL SCRUB ===================== */
.gallery-scrub-track{ display:flex; gap:2rem; padding:0 6vw; }
.gallery-scrub-img{
  flex:0 0 340px; height:420px; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(248,250,252,0.08);
  will-change:transform, opacity, filter;
}

/* ===================== FAQ ===================== */
.faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-item.open .faq-answer{ max-height:200px; }
.faq-icon{ transition:transform 0.3s ease; }
.faq-item.open .faq-icon{ transform:rotate(180deg); }

/* ===================== FORM ===================== */
.form-input{
  width:100%; margin-top:0.5rem; padding:0.85rem 1rem; border-radius:12px;
  background:rgba(248,250,252,0.05); border:1px solid rgba(248,250,252,0.12);
  color:#F8FAFC; font-size:0.9rem; transition:border-color 0.3s;
}
.form-input:focus{ outline:none; border-color:#38BDF8; box-shadow:0 0 0 3px rgba(56,189,248,0.15); }
.form-input::placeholder{ color:rgba(248,250,252,0.3); }

/* ===================== SPLIT TEXT CHARS ===================== */
.split-hero .char{ display:inline-block; will-change:transform, opacity; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}