:root{
  --bg:#07090D;
  --dark:#0D1117;
  --gold:#B68C4A;
  --gold2:#8D6A36;
  --ivory:#F3EEE5;
  --muted:#D4CFC5;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--ivory);
  font-family:Inter,sans-serif;
}

#intro{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(182,140,74,.16),transparent 30%),
    radial-gradient(circle at 50% 50%,rgba(243,238,229,.035),transparent 45%),
    linear-gradient(180deg,#07090D 0%,#030405 100%);
  will-change:opacity;
}

#intro::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(243,238,229,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,238,229,.014) 1px, transparent 1px);
  background-size:70px 70px;
  opacity:.14;
  z-index:1;
}

#intro::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%,transparent 0%,transparent 42%,rgba(7,9,13,.64) 78%,rgba(7,9,13,.96) 100%),
    linear-gradient(180deg,rgba(7,9,13,.90),transparent 30%,transparent 62%,rgba(7,9,13,.98));
}

#map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  will-change:transform;
}

.sphere{fill:rgba(243,238,229,.014)}

.graticule{
  fill:none;
  stroke:rgba(243,238,229,.038);
  stroke-width:.34;
}

.country-glow{
  fill:rgba(182,140,74,.018);
  stroke:none;
}

.country-shadow{
  fill:none;
  stroke:rgba(0,0,0,.48);
  stroke-width:1.12;
}

.country{
  fill:rgba(243,238,229,.052);
  stroke:rgba(243,238,229,.14);
  stroke-width:.38;
}

.nepal{
  fill:rgba(182,140,74,.70);
  stroke:var(--gold);
  stroke-width:1.6;
  filter:drop-shadow(0 0 18px rgba(182,140,74,.95));
}

.uk{
  fill:rgba(243,238,229,.055);
  stroke:rgba(243,238,229,.15);
}

.uk.active{
  fill:rgba(182,140,74,.62);
  stroke:var(--gold);
  stroke-width:1.45;
  filter:drop-shadow(0 0 17px rgba(182,140,74,.92));
}

.route-muted{
  fill:none;
  stroke:rgba(141,106,54,.18);
  stroke-width:.54;
  stroke-linecap:round;
  opacity:0;
}

.primary-glow{
  fill:none;
  stroke:rgba(182,140,74,.20);
  stroke-width:16;
  stroke-linecap:round;
  filter:blur(8px);
  opacity:0;
}

.primary-route{
  fill:none;
  stroke:var(--gold);
  stroke-width:2.5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(182,140,74,.85));
  opacity:0;
}

.aircraft{
  fill:var(--gold);
  opacity:0;
  filter:drop-shadow(0 0 14px rgba(182,140,74,.92));
}

.center-aircraft{
  fill:var(--gold);
  opacity:.68;
  filter:drop-shadow(0 0 10px rgba(182,140,74,.72));
}

.network-plane{
  fill:rgba(141,106,54,.38);
  opacity:0;
}

@media (max-width: 720px) {
  .country-shadow {
    stroke-width: 0.6;
  }

  .country,
  .uk,
  .uk.active {
    stroke-width: 0.2;
  }

  .primary-glow {
    stroke-width: 8;
  }

  .primary-route {
    stroke-width: 1.4;
  }
}

/* PREMIUM TITLE */
.cinematic-title{
  position:absolute;
  left:50%;
  bottom:clamp(58px,8.8vh,96px);
  transform:translateX(-50%) translateY(10px);
  z-index:30;
  width:min(1050px,88vw);
  text-align:center;
  pointer-events:none;
  opacity:0;
  will-change:opacity,transform;
}

.cinematic-title h1{
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  font-size:clamp(2.25rem,4.15vw,4.65rem);
  line-height:1.02;
  letter-spacing:.15px;
  color:var(--ivory);
  text-shadow:0 14px 46px rgba(0,0,0,.82);
}

.cinematic-title .rule{
  width:150px;
  height:1px;
  margin:24px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.96;
}