/* ============================================================
   IMMERSIVE HERO — hero.css  (complete rewrite)
   ============================================================ */

/* ── Google Font import ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Raleway:wght@300;400;600&display=swap');

/* ══════════════════════════════════════════════════════════
   #HOME — FULL-SCREEN IMMERSIVE HERO
══════════════════════════════════════════════════════════ */
#home {
  position: relative !important;
  min-height: 100vh !important;
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #010812 !important;   /* deep space fallback */
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   LAYER 1 — DEEP SPACE CANVAS (stars, shooting stars, nebula)
══════════════════════════════════════════════════════════ */
#space-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   LAYER 2 — AURORA BOREALIS
══════════════════════════════════════════════════════════ */
.aurora-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.aurora {
  position: absolute;
  left: -40%;
  border-radius: 50%;
  filter: blur(55px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: aurora-wave 18s ease-in-out infinite;
}

.aurora-1 {
  width: 200%;
  height: 50%;
  top: -8%;
  background: radial-gradient(ellipse at center,
    rgba(0, 220, 130, 0.30) 0%,
    rgba(0, 180, 100, 0.12) 50%,
    transparent 70%);
  animation-duration: 18s;
  animation-delay: 0s;
  transform-origin: 60% 50%;
}
.aurora-2 {
  width: 180%;
  height: 45%;
  top: -12%;
  left: -20%;
  background: radial-gradient(ellipse at center,
    rgba(0, 160, 255, 0.25) 0%,
    rgba(0, 100, 220, 0.10) 50%,
    transparent 70%);
  animation-duration: 22s;
  animation-delay: -6s;
  transform-origin: 40% 60%;
}
.aurora-3 {
  width: 160%;
  height: 40%;
  top: -5%;
  left: 10%;
  background: radial-gradient(ellipse at center,
    rgba(80, 0, 240, 0.18) 0%,
    rgba(60, 0, 180, 0.08) 50%,
    transparent 70%);
  animation-duration: 26s;
  animation-delay: -12s;
  transform-origin: 50% 45%;
}
.aurora-4 {
  width: 220%;
  height: 55%;
  top: -15%;
  left: -50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 255, 200, 0.14) 0%,
    transparent 60%);
  animation-duration: 30s;
  animation-delay: -4s;
  transform-origin: 55% 55%;
}

@keyframes aurora-wave {
  0%   { opacity: 0;    transform: scaleX(1)    scaleY(1)    rotate(-4deg) translateX(0); }
  15%  { opacity: 0.90; }
  40%  { opacity: 0.75; transform: scaleX(1.12) scaleY(1.20) rotate(2deg)  translateX(40px); }
  70%  { opacity: 0.85; transform: scaleX(0.95) scaleY(1.15) rotate(-2deg) translateX(-25px); }
  85%  { opacity: 0.70; }
  100% { opacity: 0;    transform: scaleX(1)    scaleY(1)    rotate(-4deg) translateX(0); }
}

/* ══════════════════════════════════════════════════════════
   LAYER 3 — ANIMATED CSS EARTH
══════════════════════════════════════════════════════════ */
.earth-wrap {
  position: absolute;
  bottom: -20vmin;
  left: 50%;
  transform: translateX(-50%);
  width: 72vmin;
  height: 72vmin;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

/* Atmospheric outer halo */
.earth-atmosphere-outer {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 32%,
    rgba(80, 200, 255, 0.14) 0%,
    rgba(30, 120, 220, 0.07) 45%,
    transparent 70%);
  filter: blur(10px);
  animation: atm-breathe 9s ease-in-out infinite alternate;
}
@keyframes atm-breathe {
  from { opacity: 0.65; transform: scale(1); }
  to   { opacity: 1.00; transform: scale(1.04); }
}

/* The sphere itself */
.earth-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    inset -22% -12% 0 rgba(0, 0, 30, 0.80),
    0 0  60px rgba(30, 100, 220, 0.22),
    0 0 120px rgba(20,  80, 180, 0.10);
}

/* ── Scrolling surface (continent simulation) ── */
.earth-surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  animation: earth-spin 45s linear infinite;
  background:
    /* Ice caps */
    radial-gradient(ellipse 14% 5%  at 50% 2%,  rgba(220,240,255,0.55) 0%, transparent 100%),
    radial-gradient(ellipse 14% 5%  at 50% 98%, rgba(220,240,255,0.45) 0%, transparent 100%),
    /* North America */
    radial-gradient(ellipse  9% 15% at 28% 32%, #2d7a4f 0%, #1a5e2a 55%, transparent 100%),
    /* Greenland */
    radial-gradient(ellipse  5%  5% at 36% 14%, #c5dce8 0%, transparent 100%),
    /* South America */
    radial-gradient(ellipse  6% 13% at 33% 64%, #3a8b47 0%, #2a6b35 55%, transparent 100%),
    /* Europe */
    radial-gradient(ellipse  5%  8% at 50% 26%, #3d8b5e 0%, transparent 100%),
    /* Africa */
    radial-gradient(ellipse  7% 17% at 52% 54%, #4caf50 0%, #388e3c 45%, #1b5e20 100%),
    /* Asia (large) */
    radial-gradient(ellipse 15% 13% at 68% 34%, #2d7a4f 0%, #4caf50 35%, #2a6b35 70%, transparent 100%),
    /* India */
    radial-gradient(ellipse  4%  9% at 63% 50%, #388e3c 0%, transparent 100%),
    /* Southeast Asia */
    radial-gradient(ellipse  5%  5% at 77% 55%, #2d7a4f 0%, transparent 100%),
    /* Australia */
    radial-gradient(ellipse  6%  6% at 76% 66%, #8d6e63 0%, #5d4037 55%, transparent 100%),
    /* Ocean deep */
    linear-gradient(180deg,
      #0c3d70 0%,
      #0a5090 12%,
      #0d60a5 28%,
      #0a5090 50%,
      #083e7c 72%,
      #062e60 88%,
      #041e44 100%);
}
@keyframes earth-spin {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ── Cloud layer ── */
.earth-clouds {
  position: absolute;
  top: 0; left: 0;
  width: 300%;
  height: 100%;
  animation: cloud-drift 75s linear infinite;
  background:
    radial-gradient(ellipse  9% 3.5% at 12% 22%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(ellipse 13% 4.0% at 32% 15%, rgba(255,255,255,0.42) 0%, transparent 100%),
    radial-gradient(ellipse  7% 2.5% at 54% 32%, rgba(255,255,255,0.46) 0%, transparent 100%),
    radial-gradient(ellipse 10% 3.5% at 74% 20%, rgba(255,255,255,0.38) 0%, transparent 100%),
    radial-gradient(ellipse  8% 3.0% at 88% 28%, rgba(255,255,255,0.42) 0%, transparent 100%),
    radial-gradient(ellipse 12% 3.5% at 18% 58%, rgba(255,255,255,0.32) 0%, transparent 100%),
    radial-gradient(ellipse  7% 2.5% at 44% 70%, rgba(255,255,255,0.36) 0%, transparent 100%),
    radial-gradient(ellipse  9% 3.0% at 66% 52%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(ellipse  6% 2.0% at 82% 64%, rgba(255,255,255,0.28) 0%, transparent 100%),
    transparent;
  opacity: 0.85;
}
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ── Day/Night terminator ── */
.earth-terminator {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(108deg,
    transparent  0%,
    transparent  50%,
    rgba(0, 0, 20, 0.28) 62%,
    rgba(0, 0, 20, 0.70) 75%,
    rgba(0, 0, 15, 0.92) 100%);
}

/* ── Atmospheric rim glow ── */
.earth-glow-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(80, 180, 255, 0.14);
  box-shadow:
    0 0  35px rgba(30, 120, 255, 0.20),
    0 0  90px rgba(30, 100, 220, 0.10),
    inset 0 0 30px rgba(30, 120, 255, 0.08);
  animation: rim-pulse 6s ease-in-out infinite alternate;
}
@keyframes rim-pulse {
  from { box-shadow: 0 0 35px rgba(30,120,255,0.20), 0 0 90px rgba(30,100,220,0.10); opacity: 0.7; }
  to   { box-shadow: 0 0 55px rgba(30,120,255,0.38), 0 0 130px rgba(30,100,220,0.18); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   LAYER 4 — FLOATING CLIMATE PARTICLES
══════════════════════════════════════════════════════════ */
.floating-leaves-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.leaf-particle {
  position: absolute;
  bottom: -40px;
  opacity: 0;
  animation: leaf-rise var(--leaf-dur, 9s) var(--leaf-delay, 0s) ease-in infinite;
  user-select: none;
}
@keyframes leaf-rise {
  0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)   translateX(0); }
  10%  { opacity: 0.8; }
  50%  { opacity: 0.6; transform: translateY(-48vh) rotate(200deg) translateX(var(--leaf-sway, 60px)); }
  90%  { opacity: 0.2; }
  100% { opacity: 0;   transform: translateY(-95vh) rotate(420deg) translateX(0); }
}

/* ══════════════════════════════════════════════════════════
   LAYER 5 — ORBIT SYSTEM
══════════════════════════════════════════════════════════ */
.orbit-system {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  width: 0;
  height: 0;
}

.orbit-path {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--r, 360px);
  height: var(--r, 360px);
  margin-top: calc(var(--r, 360px) / -2);
  margin-left: calc(var(--r, 360px) / -2);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.055);
  animation: orbit-spin var(--dur, 20s) linear infinite;
}
.orbit-path:nth-child(2n) { animation-direction: reverse; }

.orbit-obj {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 6px rgba(76, 175, 125, 0.7));
  animation: orbit-counter var(--dur, 20s) linear infinite;
  line-height: 1;
}
.orbit-path:nth-child(2n) .orbit-obj { animation-direction: reverse; }

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-counter {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(-360deg); }
}

/* ══════════════════════════════════════════════════════════
   LAYER 6 — HERO CONTENT
══════════════════════════════════════════════════════════ */
.hero-content-new {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 28px 200px;
  max-width: 1100px;
  width: 100%;
  min-height: 100vh;
  gap: 0;
}

/* ── Logo badge ── */
.hero-logo-badge { margin-bottom: 32px; }
.hero-logo-badge-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(212, 175, 55, 0.60);
  box-shadow:
    0 0  30px rgba(212, 175, 55, 0.55),
    0 0  70px rgba(212, 175, 55, 0.25),
    0 0 130px rgba(76,  175, 125, 0.15);
  animation: logo-levitate 5s ease-in-out infinite;
}
@keyframes logo-levitate {
  0%, 100% {
    transform: translateY(0px);
    box-shadow:
      0 0 30px rgba(212,175,55,0.55),
      0 0 70px rgba(212,175,55,0.25),
      0 0 130px rgba(76,175,125,0.15);
  }
  50% {
    transform: translateY(-10px);
    box-shadow:
      0 0 55px rgba(212,175,55,0.80),
      0 0 110px rgba(212,175,55,0.40),
      0 0 180px rgba(76,175,125,0.22);
  }
}


/* ── MEGA SLOGAN WRAPPER ── */
.mega-slogan-wrap { margin-bottom: 32px; }

/* ── MEGA SLOGAN ── */
.mega-slogan {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: clamp(2.4rem, 6.8vw, 5.8rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;

  /* Animated gradient text */
  background: linear-gradient(
    135deg,
    #00e5ff  0%,
    #4cdd9e 18%,
    #ffffff  36%,
    #ffd740 54%,
    #4cdd9e 72%,
    #00e5ff 100%
  );
  background-size: 280% 280%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  animation: gradient-shift 7s ease infinite;
  filter:
    drop-shadow(0 0  30px rgba(0,  229, 255, 0.40))
    drop-shadow(0 0  70px rgba(76, 175, 125, 0.22));
}
.mega-slogan em {
  font-style: normal;
  display: block;
  font-size: 1.08em;
  letter-spacing: 0.04em;
  -webkit-text-fill-color: transparent;
}
@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Globe icons flanking the slogan */
.slogan-globe-icon {
  display: inline-block;
  font-size: 0.65em;
  vertical-align: middle;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.55));
  animation: globe-pulse 8s linear infinite;
  margin: 0 8px;
}
@keyframes globe-pulse {
  0%   { transform: rotate(0deg)   scale(1.0); }
  25%  { transform: rotate(90deg)  scale(1.08); }
  50%  { transform: rotate(180deg) scale(1.0); }
  75%  { transform: rotate(270deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1.0); }
}

/* ── Secondary quote ── */
.hero-secondary-msg {
  margin-bottom: 22px;
  padding: 18px 36px;
  background: rgba(255, 255, 255, 0.038);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 50px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-secondary-msg p {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: clamp(0.92rem, 2.0vw, 1.15rem);
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}

/* ── Topic subtitle line ── */
.hero-topic-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 38px;
  font-family: 'Raleway', 'Segoe UI', sans-serif;
  font-size: clamp(0.74rem, 1.6vw, 0.92rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.40);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.topic-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf7d;
  flex-shrink: 0;
  box-shadow: 0 0 10px #4caf7d;
  animation: dot-blink 2.4s ease-in-out infinite;
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.55); }
}

/* ── CTA buttons override ── */
.hero-content-new .hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-content-new .btn-primary,
.hero-content-new .btn-secondary {
  min-width: 150px;
}

/* ── Scroll indicator ── */
.scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  color: rgba(255, 255, 255, 0.30);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: scroll-fade 2.5s ease-in-out infinite;
}
.scroll-line {
  width: 1.5px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.45));
  animation: scroll-drop 2.5s ease-in-out infinite;
}
@keyframes scroll-drop {
  0%, 100% { transform: scaleY(0.3) translateY(-10px); opacity: 0; }
  50%       { transform: scaleY(1.0) translateY(0px);  opacity: 1; }
}
@keyframes scroll-fade {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.8; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .earth-wrap { width: 90vmin; height: 90vmin; bottom: -32vmin; }
  .orbit-path { display: none; }
  .mega-slogan { font-size: clamp(2.2rem, 8.5vw, 4rem); }
  .hero-content-new { padding: 100px 20px 220px; }
}
@media (max-width: 600px) {
  .earth-wrap { width: 110vmin; height: 110vmin; bottom: -45vmin; }
  .mega-slogan { font-size: clamp(1.9rem, 10vw, 3rem); }
  .hero-secondary-msg { padding: 14px 18px; border-radius: 20px; }
  .hero-topic-line { flex-wrap: wrap; justify-content: center; }
  .aurora { filter: blur(40px); }
}
@media (max-width: 400px) {
  .mega-slogan { font-size: clamp(1.6rem, 11vw, 2.5rem); }
}

/* ══════════════════════════════════════════════════════════
   FADE-UP KEYFRAME (used by inline animations)
══════════════════════════════════════════════════════════ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}