/* ===== model-orbits: wireframe + 5 text chips (no circles) ===== */


    /* ==========================================
       CSS CUSTOMIZATION VARIABLES
       ========================================== */
    .wireframe-cube-svg {
      --bg-color: #05131b;
      --bg-color: red;         /* Dark background color */
      --line-color: #38bdf8;       /* Primary wireframe line color */
      --line-color-alt: #0284c7;   /* Secondary / depth line color */
      --node-color: #ffffff;       /* Vertex / dot color */
      --glow-color: #0ea5e9;       /* Ambient central glow color */
    }

    /* Applying CSS variables to elements */
    .bg-rect { fill: var(--bg-color); }
    .bg-glow-stop-1 { stop-color: var(--glow-color); }
    .bg-glow-stop-2 { stop-color: var(--bg-color); }

    .grid-line-back { stroke: var(--line-color-alt); }
    .grid-line-mid  { stroke: var(--line-color); }
    .grid-line-front { stroke: var(--line-color); }

    .node-deep { fill: var(--line-color-alt); }
    .node-mid  { fill: var(--line-color); }
    .node-front { fill: var(--node-color); }
  


/*.model-orbits {
  position: relative;
  margin-left: 10%;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url("../../assets/img/cubePerMix.svg") center / contain no-repeat; 
}*/




/*.model-orbits {
  perspective: 400px;
}*/
/*.model-orbits::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 1%;
  margin-left: 0%;
  background: url("../../assets/img/cubePerMix.svg") center / contain no-repeat;
  transform: scale(1.15);
  filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.3));
}*/

.model-orbits {
    position: relative; /* Required so the absolute-positioned shadow aligns properly */
}

/* 1. The Floor Shadow underneath the cube */
.model-orbits::before {
    content: "";
    position: absolute;
    opacity: .15;
    bottom: -14px; /* Pushed down further to match your scale(1.15) cube */
    left: 50%;
    transform: translateX(-50%);
    width: 70%;    /* Controls how wide the shadow stretches */
    height: 23px;  /* Controls how thick the shadow is */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 80%);
    /* z-index removed so it stays inside the container right behind the SVG */
}

/* 2. Your SVG Cube */
.model-orbits::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: 1%;
    margin-left: 0%;
    background: url(../../assets/img/cubePerMix2.svg) center / contain no-repeat;
    transform: scale(1.15);
}




/* All five text areas share one chip style */
.model-orbits b,
.model-orbits .model-label {
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: 46%;
  padding: 16px 24px;
  background: #a9efff;
  background: none;
  color: #000;
  line-height: 1.25;
  border-radius: 0;            /* set to taste */
}
.model-orbits .model-label small {
  display: block;
  margin-top: 2px;
  font-size: 0.8em;
  font-weight: 400;
  color: #000;
  opacity: 1;
}

/* Desktop layout: center chip + four around it */
.model-orbits b {
  /*top: 54.5%; left: 50%;*/
  top: 48%; left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: auto;
  text-align: center;
  font-weight: 700;
  letter-spacing: .08em;
  z-index: 2;
  background: #ffffff40;
}
.model-orbits .l-one   { 
    top: 6%;
    left: 83%;
    /*rotate: 90deg;*/
}

/*.model-orbits .l-two   { 
    top: -5%;
    left: 4%;
}*/

.model-orbits .l-two   { 
    top: -1%;
    left: -1%;
}

.model-orbits .l-three { 
    top: 76%;
    left: -14%;
    /*rotate: -90deg;*/
}

/*.model-orbits .l-four  { 
    bottom: -5%;
    left: 52%;
}*/

.model-orbits .l-four  { 
    bottom: -1%;
    left: 62%;
}

/* Mobile: stack the chips over the wireframe */
/*@media (max-width: 700px) {
  .model-orbits {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 16px;
    background-size: cover;
  }
  .model-orbits b,
  .model-orbits .model-label {
    position: static;
    transform: none;
    width: 100%;
    max-width: 320px;
    padding: 16px 24px;
  }

  .model-orbits b { 
    margin-top: -49px;
    order: -1; 
  }

  .model-orbits .l-one   { 
    top: 12%;
    left: 83%;
    rotate: 0deg;
}

.model-orbits .l-two   { 
    top: -5%;
    left: 4%;
}

.model-orbits .l-three { 
    top: 72%;
    left: -14%;
    rotate: 0deg;
}

.model-orbits .l-four  { 
    bottom: -5%;
    left: 52%;
}
}*/


@media (max-width: 700px) {
  .model-orbits {
    display: block;              /* no flex */
    aspect-ratio: 1 / 1;         /* keeps the box a fixed square */
    width: min(100%, 340px);
    margin: 0 auto;
    margin-top: -30px;
    margin-bottom: 30px;              /* replaces the 10% left margin */
    padding: 0;
    background-size: contain;    /* not cover */
  }

  .model-orbits b,
  .model-orbits .model-label {
    position: absolute;          /* top/left/right/bottom work again */
    width: max-content;
    max-width: 42%;
    margin: 0;                   /* no more margin hacks */
    padding: 0;
    font-size: 12px;
    rotate: 0deg;                /* cancels desktop 90/-90 rotation */
    transform: none;
  }

  .model-orbits b {
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    order: 0;
  }

  /* move these freely; percentages are of the square container */
  .model-orbits .l-one   { top: -6%;     left: 50%; }
  .model-orbits .l-two   { top: 7%;    left: -4%;  }
  .model-orbits .l-three { top: 87%;    left: 69%; }
  .model-orbits .l-four  { bottom: -1%;  left: 6%; }
}