/* Homepage-only: the background stays in the viewport, outside scrolling content. */
body.aware-home {
  isolation: isolate;
  background: #020712;
  padding-bottom: 64px;
}

.aware-home > main {
  position: relative;
  z-index: 1;
}

.home-globe-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.home-globe-position {
  position: absolute;
  left: 72%;
  top: 53%;
  width: clamp(48rem, 88vw, 100rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .62;
}

.home-globe-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  /* Fade only the outer empty margin; no rotating square edges. */
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%);
  mask-image: radial-gradient(circle, #000 52%, transparent 70%);
  animation: aware-globe-turn 240s linear infinite;
  animation-play-state: paused;
}

.aware-home[data-background-motion="running"] .home-globe-image {
  animation-play-state: running;
  will-change: transform;
}

.home-globe-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,7,18,.56), rgba(2,7,18,.2) 60%, rgba(2,7,18,.3)),
    linear-gradient(180deg, rgba(2,7,18,.24), transparent 26%, transparent 75%, rgba(2,7,18,.4));
}

/* Preserve the existing panels, while letting the globe continue behind every section. */
.aware-home .hero-bg { opacity: .35; }
.aware-home .respectful-space {
  background: linear-gradient(150deg, rgba(8,19,38,.42), rgba(4,11,23,.36));
}

/* Give the shield/orbit composition its own clear space beside the globe. */
@media (min-width: 901px) {
  .aware-home .hero-visual {
    transform: translateX(clamp(-9rem, -10vw, -5rem));
  }
}

.home-motion-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(118,212,255,.3);
  border-radius: 999px;
  background: rgba(4,13,28,.94);
  color: #d8f3ff;
  font: inherit;
  font-size: .875rem;
  line-height: 1.25;
  cursor: pointer;
}
.home-motion-toggle[hidden] { display: none; }
.home-motion-toggle:hover { border-color: #77d8ff; }
.home-motion-toggle:focus-visible { outline: 2px solid #77d8ff; outline-offset: 4px; }
.home-motion-icon { width: 1em; text-align: center; }

@keyframes aware-globe-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .home-globe-position { left: 64%; width: 60rem; opacity: .5; }
}

@media (max-width: 600px) {
  .home-globe-position { left: 65%; top: 48%; width: 44rem; opacity: .44; }
  .home-globe-backdrop::after { background: rgba(2,7,18,.27); }
}

@media (prefers-reduced-motion: reduce) {
  .aware-home .home-globe-image { animation: none; will-change: auto; }
  /* Existing decorative hero motion also respects the visitor's preference. */
  .aware-home .scene, .aware-home .scene *, .aware-home .scene::before,
  .aware-home .scene *::before, .aware-home .scene *::after { animation: none !important; }
  .home-motion-toggle { display: none; }
}

@media print {
  .home-globe-backdrop, .home-motion-toggle { display: none; }
}