/* ===== IONOSPHERE Performance Overrides (GPU-friendly) ===== */

/* 1) Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
  .rave-pulse{ display:none !important; }
}

/* 2) Low-power mode (set by JS detection) */
html.iono-lowpower *{
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
}

html.iono-lowpower .rave-pulse{ display:none !important; }
html.iono-lowpower .vignette{ opacity:.85 !important; }
html.iono-lowpower .earthBand::after{ display:none !important; } /* removes blend/blur ring */
html.iono-lowpower .earthBand::before{ filter: blur(14px) !important; opacity:.65 !important; }
html.iono-lowpower .earthBand{ transition:none !important; }
html.iono-lowpower .card,
html.iono-lowpower .panel{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.iono-lowpower .card,
html.iono-lowpower .btn{
  box-shadow: 0 10px 26px rgba(0,0,0,.42) !important;
}

/* 3) Reduce expensive blur on small screens / low density */
@media (max-width: 720px){
  .rave-pulse{ filter: blur(14px) !important; }
  .earthBand::before{ filter: blur(18px) !important; }
}

/* 4) Make images naturally responsive */
img{ max-width:100%; height:auto; }


/* ===== Earth blend + ultra-light drift (minimal GPU cost) ===== */
.earthWrap{
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  /* soft glow to merge into starfield */
  box-shadow:
    0 0 0 1px rgba(120,180,255,.10),
    0 0 22px rgba(120,180,255,.18),
    0 0 60px rgba(120,180,255,.10);
}
.earth{
  display:block;
  width:100%;
  height:auto;
  border-radius:50%;
  /* feather the edge so it blends into space (Safari-friendly) */
  -webkit-mask-image: radial-gradient(circle at center, #000 62%, rgba(0,0,0,0) 80%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  mask-image: radial-gradient(circle at center, #000 62%, rgba(0,0,0,0) 80%);
  filter: saturate(1.04) contrast(1.03);
}

/* subtle drift (no JS, very slow, cheap) */
@keyframes ionoEarthDrift{
  0%   { transform: translate3d(-0.8%,  0.4%, 0) scale(1.01) rotate(-0.25deg); }
  50%  { transform: translate3d( 0.8%, -0.6%, 0) scale(1.02) rotate( 0.25deg); }
  100% { transform: translate3d(-0.8%,  0.4%, 0) scale(1.01) rotate(-0.25deg); }
}
.earthWrap{ will-change: transform; animation: ionoEarthDrift 90s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .earthWrap{ animation:none !important; }
}



/* Stronger but still GPU-cheap title glow */
html.iono-min .center3d .word,
html.iono-static .center3d .word,
html.iono-static .word[aria-label="IONOSPHERE"]{
  text-shadow:
    0 0 14px rgba(120,180,255,.55),
    0 0 32px rgba(0,255,214,.28),
    0 0 60px rgba(255,60,190,.22);
  animation: ionoTitlePulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  html.iono-min .center3d .word,
  html.iono-static .center3d .word,
  html.iono-static .word[aria-label="IONOSPHERE"]{
    animation:none !important;
  }
}

@keyframes ionoTitlePulse{
  0%,100%{
    text-shadow:
      0 0 12px rgba(120,180,255,.45),
      0 0 26px rgba(0,255,214,.20),
      0 0 44px rgba(255,60,190,.16);
  }
  50%{
    text-shadow:
      0 0 18px rgba(120,180,255,.70),
      0 0 42px rgba(0,255,214,.40),
      0 0 80px rgba(255,60,190,.32);
  }
}
50%{
    opacity: 1;
    text-shadow:
      0 0 14px rgba(160,200,255,.40),
      0 0 30px rgba(255,60,190,.18);
  }
}


/* Mobile-only neon dropdown nav (minimal CPU/GPU) */
.ionoNavSelectWrap{
  display:none;
  margin: 10px auto 0;
  width: min(520px, 92vw);
}
.ionoNavSelect{
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(10,10,14,.45);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(160,200,255,.28);
  outline: none;
  box-shadow:
    
    0 0 0 1px rgba(0,255,214,.14),
    0 0 22px rgba(120,180,255,.16),
    0 0 44px rgba(255,60,190,.10);
  -webkit-appearance: none;
  appearance: none;
}
.ionoNavSelect:focus{
  border-color: rgba(0,255,214,.38);
  box-shadow:
    0 0 0 1px rgba(0,255,214,.18),
    0 0 22px rgba(120,180,255,.16),
    0 0 46px rgba(255,60,190,.12);
}
/* tiny caret */
.ionoNavSelectWrap::after{
  content:"▾";
  position:absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.72);
  pointer-events:none;
}
.ionoNavSelectWrap{ position: relative; }

/* Show dropdown + hide button links on small screens */
@media (max-width: 640px){
  nav.nav .ionoNavSelectWrap{ display:block; }
  nav.nav > a{ display:none; }
}
/* Subtle breathing glow for static + minimal (cheap: opacity only) */
html.iono-min .earthWrap::before,
html.iono-static .earthWrap::before{
  content:"";
  position:absolute;
  inset:-10%;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(120,180,255,.18) 0%,
    rgba(0,255,214,.10) 35%,
    rgba(255,60,190,.08) 55%,
    rgba(0,0,0,0) 72%);
  opacity:.14;
  pointer-events:none;
  animation: ionoEarthBreatheGlow 6.8s ease-in-out infinite;
}
html.iono-lowpower .earthWrap::before{ animation:none !important; opacity:.10; }
@media (prefers-reduced-motion: reduce){
  html.iono-min .earthWrap::before,
  html.iono-static .earthWrap::before{ animation:none !important; opacity:.10; }
}
@keyframes ionoEarthBreatheGlow{
  0%,100%{ opacity:.11; }
  50%{ opacity:.20; }
}
/* Earth layer baseline (needed on pages that don't load style.css) */
.earthBand{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
}
/* Keep foreground UI above */
header, nav, .nav, .panel, .card, .center3d{ position: relative; z-index: 20; }
/* Disable Earth drift on Home so the planet stays perfectly centered */
body.page-home .earthWrap{
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
body.page-home .earthBand{
  place-items: center !important;
  align-content: center !important;
}
body.page-home .earthVideo{
  transform: none !important;
}
/* earthVideo fallback: if video isn't present, ensure the image is visible */
body.page-home #earthImg{ opacity: 1; }
/* Earth visibility z-fix (ensure canvas doesn't cover Earth) */
#starfield{
  position: fixed;
  inset: 0;
  z-index: 0;
}
.earthBand{
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.vignette, .rave-pulse{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
header, nav, .nav, .panel, .card, .center3d{
  position: relative;
  z-index: 10;
}
/* Ensure earth image/video is visible */
.earthWrap{ opacity: 1 !important; transform: none !important; }
.earth{ opacity: 1 !important; }
/* Home Earth sizing (index.html doesn't load style.css) */
body.page-home .earthBand{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  pointer-events: none;
  z-index: 1;
}
body.page-home .earthWrap{
  width: min(92vmin, 920px);
  height: min(92vmin, 920px);
  max-width: calc(100vh - 170px);
  max-height: calc(100vh - 170px);
  opacity: 1 !important;
  transform: none !important;
  animation: ionoEarthBreath 7.5s ease-in-out infinite;
}
body.page-home .earth,
body.page-home .earthVideo{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Very cheap "alive" feel (scale only) */
@media (prefers-reduced-motion: reduce){
  body.page-home .earthWrap{ animation:none !important; }
}
@keyframes ionoEarthBreath{
  0%,100%{ transform: scale(1.00); }
  50%{ transform: scale(1.015); }
}
/* Index MP4 Earth (centered, no tiling) */
body.page-home #starfield{ position: fixed; inset:0; z-index:0; }
body.page-home .earthBand{
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  pointer-events: none;
}
body.page-home .earthWrap{
  position: relative;
  width: min(92vmin, 920px);
  height: min(92vmin, 920px);
  max-width: calc(100vh - 170px);
  max-height: calc(100vh - 170px);
  border-radius: 50%;
  overflow: hidden;
  place-self: center;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important; /* keep it stable; MP4 provides motion */
}
body.page-home .earth,
body.page-home .earthVideo{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}
/* UI above */
body.page-home .vignette, body.page-home .rave-pulse{ position:fixed; inset:0; z-index:2; pointer-events:none; }
body.page-home header, body.page-home nav, body.page-home .nav, body.page-home .center3d{ position: relative; z-index: 10; }
/* Home (index) Earth: rely on wrapper clip instead of CSS masks (prevents tiling on Safari) */
body.page-home .earth,
body.page-home .earthVideo{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-repeat: initial !important;
  mask-repeat: initial !important;
  -webkit-mask-size: initial !important;
  mask-size: initial !important;
  filter: none !important;
}

/* Keep the IONOSPHERE 3D title centered over the Earth */
body.page-home .center3d{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 12;
  pointer-events: none; /* keeps clicks on nav; titleTrigger still works via its own role */
}
body.page-home #titleTrigger{ pointer-events: auto; }
/* HOME_NO_MASK_CLIP: prevent any Safari mask tiling by using wrapper clipping only */
body.page-home .earthWrap{
  width: min(92vmin, 920px) !important;
  height: min(92vmin, 920px) !important;
  max-width: calc(100vh - 170px) !important;
  max-height: calc(100vh - 170px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  transform: none !important;
  animation: none !important;
}
body.page-home .earth,
body.page-home .earthVideo{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important; /* wrapper provides circle */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  filter: none !important;
}
/* Also disable decorative rim pseudo on home (can look like oval on some composites) */
body.page-home .earth::after,
body.page-home .earthWrap::after{
  content: none !important;
}
/* Ensure Earth band is centered */
body.page-home .earthBand{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Flatten 3D context on Home to avoid WebKit mirroring */
body.page-home .center3d,
body.page-home .center3d .word{
  transform-style: flat !important;
  -webkit-transform-style: flat !important;
}

/* === HOME EARTH FIX: disable any WebKit masks to stop tiling; wrapper clip only === */
body.page-home .earthWrap{
  border-radius:50% !important;
  overflow:hidden !important;
}
body.page-home .earth,
body.page-home .earthVideo{
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

.ionoNavSelectWrap{filter:drop-shadow(0 0 10px rgba(120,180,255,.10));} /* Dropdown idle glow */