/* ==========================================================================
   XPLOROO · Xploroo Globe (Phase 36)
   xploroo-globe.css — Standalone signature page (xplorooglobe.html): a
   cinematic space environment with an interactive Three.js globe, animated
   destination pins, glowing travel routes and floating stat widgets.
   Entirely scoped under `.xg-*`, so this never touches any other page.

   Palette — Royal Purple / Cherry Magenta / Electric Blue / Deep Indigo /
   Midnight Navy / Titanium Silver only. No yellow, orange, or cheap
   rainbow gradients anywhere in this file.
   ========================================================================== */

.xg-page {
  --xg-purple:  #5B21B6;
  --xg-magenta: #C026D3;
  --xg-blue:    #2563EB;
  --xg-indigo:  #312E81;
  --xg-navy:    #0F172A;
  --xg-silver:        #C7CCD9;
  --xg-silver-bright: #F5F7FB;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--xg-navy);
  isolation: isolate;
}

/* ==========================================================================
   CINEMATIC SPACE BACKGROUND
   ========================================================================== */
.xg-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.xg-bg__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 15% 8%, rgba(91, 33, 182, 0.35), transparent 55%),
    radial-gradient(110% 90% at 88% 18%, rgba(192, 38, 212, 0.22), transparent 55%),
    radial-gradient(140% 100% at 50% 100%, rgba(37, 99, 235, 0.22), transparent 60%),
    linear-gradient(180deg, #05050c 0%, #0a0a16 40%, var(--xg-navy) 100%);
}
/* Slow aurora-like drifting gradient band */
.xg-bg__aurora {
  position: absolute;
  inset: -10% -10%;
  background:
    linear-gradient(100deg, transparent 10%, rgba(91, 33, 182, 0.18) 30%, rgba(192, 38, 212, 0.14) 45%, transparent 60%, rgba(37, 99, 235, 0.16) 78%, transparent 92%);
  background-size: 220% 220%;
  filter: blur(60px);
  animation: xg-aurora-drift 40s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0.8;
  will-change: background-position;
}
@keyframes xg-aurora-drift {
  0%   { background-position: 0% 30%; }
  100% { background-position: 100% 70%; }
}
/* Atmospheric fog near the bottom for depth */
.xg-bg__fog {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15, 23, 42, 0.85) 100%);
}
.xg-bg__nebula {
  position: absolute;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.22;
  animation: xg-nebula-pulse 16s ease-in-out infinite;
  will-change: opacity, transform;
}
.xg-bg__nebula--a { top: -10%; left: -8%; background: var(--xg-purple); }
.xg-bg__nebula--b { bottom: -14%; right: -10%; background: var(--xg-blue); animation-delay: 6s; }
@keyframes xg-nebula-pulse {
  0%, 100% { opacity: 0.16; transform: scale(1); }
  50%      { opacity: 0.28; transform: scale(1.08); }
}

/* Starfield canvas (js/xploroo-globe-stars.js) */
.xg-stars-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   LAYOUT — hero split
   ========================================================================== */
.xg-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding: clamp(6rem, 4.5rem + 4vw, 8rem) var(--container-pad) clamp(3rem, 2rem + 3vw, 5rem);
  max-width: var(--container-max);
  margin-inline: auto;
}
@media (max-width: 980px) {
  .xg-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: clamp(5.5rem, 4.5rem + 3vw, 7rem);
  }
  /* Globe moves above the text content on mobile/tablet */
  .xg-globe-stage { order: -1; margin-bottom: var(--space-6); }
}

/* Desktop-only refinement (Phase 38/39) — a calmer 45/55 split with more
   breathing room between the two columns, and content that starts right
   below the sticky header instead of floating in a full-viewport-tall
   section. Tablet/mobile above (the max-width: 980px block) are untouched. */
@media (min-width: 1025px) {
  .xg-hero {
    min-height: 0;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    column-gap: clamp(3rem, 1.5rem + 5vw, 7rem);
    padding-top: 2.25rem;
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  }
}

/* -------------------------------------------------------------------------
   Left content
   ------------------------------------------------------------------------- */
.xg-hero__content {
  position: relative;
  z-index: 2;
}
.xg-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0.45em 1.1em;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #ffffff;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(199, 204, 217, 0.4);
  box-shadow: 0 0 24px rgba(91, 33, 182, 0.35);
  opacity: 0;
  animation: xg-fade-up 900ms var(--ease-out) 150ms forwards;
}
.xg-label__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xg-magenta);
  box-shadow: 0 0 10px 2px rgba(192, 38, 212, 0.8);
  animation: xg-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes xg-dot-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}

.xg-title {
  margin: 0;
  font-size: clamp(3rem, 2.2rem + 4.5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: var(--ls-tighter);
  color: #ffffff;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 35%, var(--xg-silver-bright) 50%, #ffffff 70%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(91, 33, 182, 0.4);
  animation: xg-fade-up 1000ms var(--ease-out) 280ms forwards, xg-title-shine 7s ease-in-out infinite 1.3s;
  opacity: 0;
}
@keyframes xg-title-shine {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

.xg-subtitle {
  margin: var(--space-5) 0 0;
  max-width: 30rem;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  animation: xg-fade-up 900ms var(--ease-out) 480ms forwards;
}
@media (max-width: 980px) {
  .xg-subtitle { margin-inline: auto; }
}
.xg-subtitle em {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--fs-md, var(--fs-base));
  font-weight: var(--fw-regular);
  color: var(--xg-silver);
}

.xg-cta-row {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-4);
  opacity: 0;
  animation: xg-fade-up 900ms var(--ease-out) 680ms forwards;
}
@media (max-width: 980px) {
  .xg-cta-row { justify-content: center; }
}

.xg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 1.05em 2.2em;
  font-family: var(--font-display);
  font-size: var(--fs-md, var(--fs-base));
  font-weight: var(--fw-bold);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: linear-gradient(120deg, var(--xg-magenta) 0%, var(--xg-purple) 55%, var(--xg-blue) 100%);
  box-shadow: 0 14px 40px -10px rgba(91, 33, 182, 0.6), 0 0 0 1px rgba(199, 204, 217, 0.3);
  transition: transform 320ms var(--ease-emphasis), box-shadow 320ms var(--ease-emphasis);
  text-decoration: none;
}
.xg-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 56px -10px rgba(192, 38, 212, 0.65), 0 0 0 1px rgba(199, 204, 217, 0.5);
}
.xg-btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* -------------------------------------------------------------------------
   Right side — globe stage
   ------------------------------------------------------------------------- */
.xg-globe-stage {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  animation: xg-fade-in 1400ms var(--ease-out) 300ms forwards;
}
/* ==========================================================================
   GLOBE SHOWCASE — premium replaceable PNG holder (Phase 37)
   No Three.js, no canvas, no WebGL. `#xploroo-globe-image` is the only
   thing that ever needs to change — everything below is pure CSS chrome
   around it: glass ring, titanium metallic border, purple/cherry/blue
   ambient glow, floating + breathing-glow animation on the holder, and an
   independent slow rotation on the image itself.
   ========================================================================== */
.xg-holder {
  position: relative;
  width: 650px;
  height: 650px;
  max-width: 92vw;
  max-height: 92vw;
  margin-inline: auto;
  animation: xg-holder-float 9s ease-in-out infinite;
  will-change: transform;
}
@media (max-width: 1024px) {
  .xg-holder { width: 500px; height: 500px; }
}
@media (max-width: 640px) {
  .xg-holder { width: 340px; height: 340px; }
}
/* Desktop-only refinement (Phase 38/39) — tablet/mobile above are
   untouched. The holder is capped at its own column width so it can
   never clip or overflow, however narrow a given desktop viewport is.
   Sized ~20% down from the previous 680px pass so it fits the hero more
   naturally. Placed after the tablet/mobile overrides above so it
   correctly wins the cascade at min-width: 1025px. */
@media (min-width: 1025px) {
  .xg-holder {
    width: min(544px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Cleaner, more premium hero: no floating stat widgets around the
     globe on desktop (they were already hidden below 1200px, so this
     doesn't touch tablet/mobile — it just makes the desktop hero match). */
  .xg-stats {
    display: none;
  }
}
@keyframes xg-holder-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* Ambient glow blobs — purple / cherry magenta / electric blue, softly
   breathing behind the glass ring so the globe reads as "suspended in
   space" rather than sitting flat on the page. */
.xg-holder__glow {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
  animation: xg-holder-breathe 6s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity, transform;
}
.xg-holder__glow--purple  { background: radial-gradient(circle, var(--xg-purple), transparent 68%); }
.xg-holder__glow--magenta { background: radial-gradient(circle at 70% 30%, var(--xg-magenta), transparent 60%); animation-delay: 1.4s; opacity: 0.4; }
.xg-holder__glow--blue    { background: radial-gradient(circle at 25% 75%, var(--xg-blue), transparent 60%); animation-delay: 2.8s; opacity: 0.4; }
@keyframes xg-holder-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.06); }
}

/* Glass ring + titanium metallic border — same travelling-comet border
   technique used across the VIP luxury module, recoloured to titanium
   silver so it reads as a physical bezel holding the globe. */
@property --xg-holder-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.xg-holder__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.09), transparent 45%),
    linear-gradient(165deg, rgba(91, 33, 182, 0.22), rgba(15, 23, 42, 0.85) 60%, rgba(37, 99, 235, 0.16));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    var(--shadow-xl),
    inset 0 2px 24px rgba(0, 0, 0, 0.45),
    inset 0 -2px 30px rgba(37, 99, 235, 0.18),
    0 0 90px rgba(91, 33, 182, 0.35);
  overflow: hidden;
}
.xg-holder__border {
  --xg-holder-angle: 0deg;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from var(--xg-holder-angle),
    transparent 0deg,
    transparent 250deg,
    rgba(199, 204, 217, 0.4) 295deg,
    var(--xg-silver-bright) 325deg,
    rgba(199, 204, 217, 0.4) 345deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.85;
  animation: xg-holder-border-travel 16s linear infinite;
  pointer-events: none;
}
@keyframes xg-holder-border-travel {
  to { --xg-holder-angle: -360deg; }
}
/* Luxury reflection sheen sweeping slowly across the glass */
.xg-holder__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 46%, transparent 62%);
  background-size: 240% 240%;
  animation: xg-holder-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes xg-holder-sheen {
  0%   { background-position: 180% 0%; }
  55%, 100% { background-position: -60% 0%; }
}

.xg-holder__frame {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  overflow: hidden;
}
.xg-holder__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  animation: xg-holder-spin 20s linear infinite;
  filter: drop-shadow(0 0 40px rgba(91, 33, 182, 0.45));
}
@keyframes xg-holder-spin {
  /* Reversed direction (counter-clockwise) so the image reads as the
     Earth naturally rotating rather than spinning like a clock, and
     scaled up ~10% (constant across the animation, only the rotation
     angle changes) to zoom the image itself — the holder/frame size and
     clip are untouched, so this only ever crops in a little more of the
     same image, never stretches it. */
  from { transform: scale(1.1) rotate(0deg); }
  to   { transform: scale(1.1) rotate(-360deg); }
}
/* Graceful placeholder if assets/images/globe.png hasn't been added yet —
   hides the broken-image icon and lets the glass/titanium holder itself
   carry the premium look on its own. */
.xg-holder__image--missing {
  display: none;
}
.xg-holder__frame:has(.xg-holder__image--missing)::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.16), transparent 45%), radial-gradient(circle, var(--xg-indigo), var(--xg-navy) 75%);
  box-shadow: 0 0 60px rgba(91, 33, 182, 0.45), inset 0 0 40px rgba(0, 0, 0, 0.5);
  animation: xg-holder-breathe 6s ease-in-out infinite;
}

/* Floating stars / tiny glowing particles around the holder */
.xg-holder__particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--xg-silver-bright);
  box-shadow: 0 0 8px 2px rgba(199, 204, 217, 0.6);
  opacity: 0;
  animation: xg-holder-particle 7s ease-in-out infinite;
  pointer-events: none;
}
.xg-holder__particle--1 { top: 6%;  left: -2%;  animation-delay: 0s; }
.xg-holder__particle--2 { top: 22%; right: -3%; animation-delay: 1.1s; background: var(--xg-magenta); box-shadow: 0 0 10px 2px rgba(192, 38, 212, 0.6); }
.xg-holder__particle--3 { top: 68%; left: -4%;  animation-delay: 2.3s; }
.xg-holder__particle--4 { bottom: 10%; right: -2%; animation-delay: 3.4s; background: var(--xg-blue); box-shadow: 0 0 10px 2px rgba(37, 99, 235, 0.6); }
.xg-holder__particle--5 { top: 46%; left: -6%;  animation-delay: 4.6s; width: 3px; height: 3px; }
.xg-holder__particle--6 { top: 88%; right: -5%; animation-delay: 5.7s; width: 5px; height: 5px; }
@keyframes xg-holder-particle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
  50%      { opacity: 0.85; transform: translateY(-14px) scale(1.1); }
}

/* Slow purple light streaks drifting past the holder */
.xg-holder__streak {
  position: absolute;
  width: 1px;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(192, 38, 212, 0.55), transparent);
  opacity: 0;
  animation: xg-holder-streak 12s linear infinite;
  pointer-events: none;
}
.xg-holder__streak--1 { top: -6%; left: 12%; animation-delay: 0.5s; }
.xg-holder__streak--2 { top: -8%; right: 18%; animation-delay: 6s; background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.5), transparent); }
@keyframes xg-holder-streak {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: 0.8; }
  70%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(720px); }
}

@media (prefers-reduced-motion: reduce) {
  .xg-holder,
  .xg-holder__glow,
  .xg-holder__border,
  .xg-holder__sheen,
  .xg-holder__image,
  .xg-holder__particle,
  .xg-holder__streak {
    animation: none !important;
  }
}

/* ==========================================================================
   LIVE TRAVEL STATS — floating widgets
   ========================================================================== */
.xg-stats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.xg-stat {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2xl);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(199, 204, 217, 0.25);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6);
  animation: xg-float 7s ease-in-out infinite;
  opacity: 0;
}
.xg-stat__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  background: linear-gradient(135deg, rgba(199, 204, 217, 0.32), rgba(91, 33, 182, 0.35));
  border: 1px solid rgba(199, 204, 217, 0.4);
}
.xg-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: #ffffff;
  line-height: 1;
}
.xg-stat__label {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--xg-silver);
}

.xg-stat--1 { top: 10%;  left: 2%;   animation-delay: 0s; }
.xg-stat--2 { top: 2%;   left: 55%;  animation-delay: 1.2s; }
.xg-stat--3 { top: 40%;  left: -3%;  animation-delay: 2.4s; }
.xg-stat--4 { bottom: 26%; left: 58%; animation-delay: 0.8s; }
.xg-stat--5 { bottom: 8%; left: 4%;  animation-delay: 3.2s; }
.xg-stat--6 { top: 62%;  left: 82%;  animation-delay: 1.8s; }

@media (max-width: 1200px) {
  .xg-stats { display: none; }
}

@keyframes xg-float {
  0%, 100% { transform: translateY(0); opacity: 0.95; }
  50%      { transform: translateY(-12px); opacity: 1; }
}

/* ==========================================================================
   Entrance animation keyframes (shared)
   ========================================================================== */
@keyframes xg-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes xg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Cursor light — a soft glow following the pointer across the hero,
   reinforced "glass reflects light" micro-interaction. Desktop only. */
.xg-cursor-light {
  position: fixed;
  z-index: 3;
  width: 22rem;
  height: 22rem;
  margin: -11rem 0 0 -11rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 38, 212, 0.10), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease-standard);
  will-change: transform;
}
.xg-cursor-light.is-active {
  opacity: 1;
}
@media (hover: none), (max-width: 980px) {
  .xg-cursor-light { display: none; }
}

/* ==========================================================================
   Reduced motion — keep everything visible and legible, drop the loops
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .xg-bg__aurora,
  .xg-bg__nebula,
  .xg-label__dot,
  .xg-title,
  .xg-stat,
  .xg-holder,
  .xg-holder__glow,
  .xg-holder__border,
  .xg-holder__sheen,
  .xg-holder__image,
  .xg-holder__particle,
  .xg-holder__streak,
  .xg-globe-stage {
    animation: none !important;
  }
  .xg-label,
  .xg-title,
  .xg-subtitle,
  .xg-cta-row,
  .xg-globe-stage {
    opacity: 1 !important;
    transform: none !important;
  }
  .xg-stat {
    opacity: 1;
  }
}