/* Custom properties */
@property --pulse {
  syntax: '<length>';
  inherits: false;
  initial-value: 80px;
}

@property --pulse2 {
  syntax: '<length>';
  inherits: false;
  initial-value: 56px;
}

@property --r {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Earth */
.earth {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 70vh;
  height: 70vh;
  border-radius: 50%;
  background-image: url('earth.png');
  background-repeat: repeat-x;
  background-size: cover;
  animation: earth 40s linear infinite, pulse 2s linear infinite alternate-reverse;
  filter: brightness(0.6) contrast(0.8);
  box-shadow:
    0 -1px 1px 1px rgba(255, 255, 255, 0.5),
    -1px 1px 1px 1px rgba(100, 190, 200, 0.6),
    0 0 var(--pulse) -20px rgba(100, 190, 200, 0.5),
    inset 0 0 76px -10px rgba(100, 190, 200, 0.4),
    inset 0 0 var(--pulse2) -10px rgba(100, 190, 200, 0.3);
  z-index: -1;
  
   transform-style: preserve-3d;
  /* Performance optimizations */
  backface-visibility: hidden;
  perspective: 1000px;
  
  /* Hint to browser for hardware acceleration */
  @media (max-width: 768px) {
    will-change: background-position;
  }
}

/* Earth pseudo-elements */
.earth::before,
.earth::after {
  content: '';
  position: absolute;
  left: calc(70vh * 0.25);
  height: calc(70vh * 0.015);
  border-radius: 45%;
  filter: blur(10px) brightness(0.6);
  transform: translate3d(0, 0, 0) rotate(var(--r));
  animation: rotation 10s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.earth::before {
  width: 14%;
  box-shadow:
    inset 0 0 70px 90px rgba(164, 116, 120, 0.6),
    0 0 140px 70px rgba(164, 116, 120, 0.5);
}

.earth::after {
  width: 7%;
  height: calc(70vh * 0.015);
  box-shadow:
    inset 0 0 70px -50px rgba(255, 255, 255, 0.7),
    inset 0 0 70px 90px rgba(229, 188, 119, 0.6),
    0 0 130px 50px rgba(229, 188, 119, 0.5);
}

/* Keyframes */
@keyframes earth {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -199% 0;
  }
}

@keyframes pulse {
  0% {
    --pulse: 8rem;
    --pulse2: 5.6rem;
    --r: 0deg;
  }
  100% {
    --pulse: 10rem;
    --pulse2: 3.6rem;
    --r: 180deg;
  }
}

@keyframes rotation {
  from {
    --r: 0deg;
  }
  to {
    --r: 180deg;
  }
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
  .earth {
    width: 40vh;
    height: 40vh;

    
    /* Use transform3d for hardware acceleration */
    transform: translate3d(-50%, -50%, 0);
    
    /* Disable pulse animation on mobile for better performance */
    animation: earth 60s linear infinite;
    
    /* Enable hardware acceleration */
    will-change: background-position;
    
    /* Reduce filter complexity */
    filter: brightness(0.65) contrast(0.75);
  }
  
  /* Simplify pseudo-elements on mobile */
  .earth::before,
  .earth::after {
    /* Reduce blur for better performance */
    filter: blur(8px) brightness(0.7);
    /* Use transform3d for hardware acceleration */
    transform: translate3d(0, 0, 0) rotate(var(--r));
    will-change: transform;
    /* Slower animation to reduce CPU load */
    animation: rotation 15s linear infinite;
  }
  
  .earth::before {
    /* Simplified shadow */
    box-shadow:
      inset 0 0 50px 60px rgba(164, 116, 120, 0.5),
      0 0 100px 50px rgba(164, 116, 120, 0.4);
  }
  
  .earth::after {
    /* Simplified shadow */
    box-shadow:
      inset 0 0 50px -30px rgba(255, 255, 255, 0.6),
      inset 0 0 50px 60px rgba(229, 188, 119, 0.5),
      0 0 100px 40px rgba(229, 188, 119, 0.4);
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .earth {
    animation: none;
  }
  
  .earth::before,
  .earth::after {
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}