/**
 * Cube Animation with Static Triangles
 * Center cube breathing effect only
 */

/* ============================================
   ANIMATION CONTAINER
   ============================================ */
.cube-animation-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.cube-animation-wrapper svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   TRIANGLE GROUP STYLES
   ============================================ */
.triangle-group {
  /* cursor: pointer; */
  pointer-events: bounding-box;
}

/* ============================================
   TRIANGLE STYLES - STATIC POSITION
   ============================================ */
.orbit-triangle {
  fill: #1ea8bb;
  filter: drop-shadow(0 0 12px rgba(30, 168, 187, 0.9));
  transform-origin: center;
}

/* ============================================
   LABEL STYLES
   ============================================ */
.triangle-label {
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  fill: #000;
  opacity: 1;
  transition: fill 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.triangle-group:hover .triangle-label {
  fill: #000;
  opacity: 1;
}

/* ============================================
   CUBE/CENTER IMAGE - BREATHING
   Moves 40px up and down
   ============================================ */
.cube-image {
  animation: breatheCube 4s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes breatheCube {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* ============================================
   SHADOW - STAYS IN PLACE, SCALES ONLY
   Grows when cube is down (close), shrinks when cube is up (far)
   ============================================ */
.cube-shadow-ellipse {
  animation: breatheShadow 4s ease-in-out infinite;
  transform-origin: center center;
  transform-box: fill-box;
}

@keyframes breatheShadow {
  0%, 100% {
    /* Cube is down/close - shadow is larger and darker */
    transform: scale(1, 1);
    opacity: 0.4;
  }
  50% {
    /* Cube is up/far - shadow is smaller and lighter */
    transform: scale(0.7, 0.6);
    opacity: 0.15;
  }
}

/* ============================================
   ORBITAL ARCS - SUBTLE BREATHING
   ============================================ */
.orbital-elements {
  animation: breatheOrbit 4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes breatheOrbit {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
}

/* ============================================
   ORBITAL ARC STYLES
   ============================================ */
.orbital-stroke {
  fill: none;
  stroke: #1ea8bb;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.orbital-stroke-shadow {
  fill: none;
  stroke: #000;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
  stroke-opacity: 0.2;
}

/* ============================================
   REDUCED MOTION ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .cube-image,
  .cube-shadow-ellipse,
  .orbital-elements {
    animation: none !important;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .cube-animation-wrapper {
    max-width: 100%;
    padding: 0 20px;
  }
  
  .triangle-label {
    font-size: 10px;
  }
}