@layer components {
  /* ===== Three.js Earth System Styles v4.0 ===== */

  /* Three.js Container */
  .three-earth-container {
    position: fixed;
    inset: 0;
    z-index: var(--z-none);
    pointer-events: auto;
    overflow: hidden;
    contain: strict;
    isolation: isolate;
    cursor: grab;
    visibility: visible;
    will-change: opacity;
    transition:
      opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }

  .three-earth-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform;
    image-rendering: auto;
  }

  .three-earth-container.error {
    background:
      radial-gradient(circle at 72% 78%, rgb(21 62 110 / 26%), transparent 34%),
      linear-gradient(145deg, #02040a, #070b18 58%, #02030a);
  }

  .three-earth-container.error::before {
    content: "";
    position: absolute;
    right: clamp(-8rem, -8vw, -2rem);
    bottom: clamp(-15rem, -18vw, -7rem);
    width: min(72vw, 46rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: url("https://img.abdulkerimsesli.de/earth/textures/earth_day.webp");
    background-size: cover;
    box-shadow:
      inset -7rem -2rem 8rem rgb(0 3 12 / 88%),
      inset 1rem 0 2.5rem rgb(95 170 255 / 12%),
      0 0 1.2rem rgb(80 157 255 / 28%),
      0 0 5rem rgb(42 109 196 / 18%);
    transform: rotate(-11deg);
  }

  .three-earth-container.error::after {
    content: "";
    position: absolute;
    top: 14%;
    left: 9%;
    width: clamp(2.5rem, 6vw, 5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      url("https://img.abdulkerimsesli.de/earth/textures/moon_texture.webp") center / cover,
      #aaa;
    box-shadow:
      inset -1.1rem -0.25rem 1.6rem rgb(0 0 0 / 72%),
      0 0 1.8rem rgb(210 223 255 / 14%);
    opacity: 0.86;
  }

  /* Loading & Error States */
  .three-earth-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: var(--three-earth-error-width);
    text-align: center;
    color: color-mix(in srgb, var(--clr-white) 90%, transparent);
    font-family: var(--font-sans);
    -webkit-backdrop-filter: var(--blur-md);
    backdrop-filter: var(--blur-md);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--three-earth-error-bg) 90%, transparent);
    border: var(--size-1) solid var(--border-color);
    box-shadow: var(--component-shadow-depth-2);
    opacity: 1;
    transition: opacity var(--transition-base);
  }

  .three-earth-error.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* merged duplicate background definition removed to avoid duplicate selector */

  .three-earth-error p {
    margin: 0 0 var(--size-r-0-5);
  }

  .three-earth-error .retry-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--component-fill-primary);
    color: var(--clr-white);
    border: var(--size-1) solid var(--card-border);
    cursor: pointer;
  }

  .three-earth-error .retry-btn:hover {
    background: var(--component-fill-secondary);
  }

  /* Section-based Opacity Transitions */
  .three-earth-container[data-section="hero"] {
    opacity: 0.96;
  }

  .three-earth-container[data-section="features"] {
    opacity: 1;
  }

  .three-earth-container[data-section="section3"] {
    opacity: 1;
    pointer-events: none;
  }

  .three-earth-container[data-section="site-footer"] {
    opacity: 0.28;
    visibility: visible;
    pointer-events: none;
  }

  body[data-active-overlay="footer"] .three-earth-container {
    opacity: 0.72;
    visibility: visible;
    pointer-events: none;
    transition-delay: 0s;
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .three-earth-container {
      transition: none;
    }
  }
}