/*
 * AI24Solutions homepage sphere V8
 *
 * True visual depth:
 * rear arcs -> metallic sphere -> front arcs
 *
 * No WebGL, no paid module, no JavaScript dependency.
 */


/* =========================================================
   SCENE
   ========================================================= */

body.theme-v13 .ai24-light-sphere {
  isolation: isolate;

  perspective: 1100px;

  transform-style:
    preserve-3d;
}


/* =========================================================
   DEPTH ORDER
   ========================================================= */

body.theme-v13 .ai24-orbit-system--back {
  z-index:
    2;
}


body.theme-v13 .ai24-sphere-core {
  z-index:
    4;
}


body.theme-v13 .ai24-orbit-system--front {
  z-index:
    5;
}


body.theme-v13 .ai24-sphere-label-overlay {
  z-index:
    6;
}


body.theme-v13 .ai24-sphere-card {
  z-index:
    7;
}


body.theme-v13 .ai24-light-sphere__caption {
  z-index:
    8;
}


/* =========================================================
   THREE FIXED SPATIAL PLANES
   ========================================================= */

/*
 * The planes remain geometrically stable.
 *
 * Motion happens ON the planes instead of changing the
 * plane itself. This keeps front/back occlusion physically
 * coherent throughout the animation.
 */

body.theme-v13 .ai24-orbit-plane {
  width:
    430px !important;

  height:
    430px !important;

  margin:
    -215px 0 0 -215px !important;

  animation:
    none !important;

  transform-style:
    preserve-3d;
}


body.theme-v13 .ai24-orbit-plane--horizontal {
  transform:
    rotateZ(-5deg)
    rotateX(72deg) !important;
}


body.theme-v13 .ai24-orbit-plane--diagonal-a {
  transform:
    rotateZ(58deg)
    rotateX(69deg) !important;
}


body.theme-v13 .ai24-orbit-plane--diagonal-b {
  transform:
    rotateZ(-58deg)
    rotateX(70deg) !important;
}


/* =========================================================
   FRONT / REAR OCCLUSION
   ========================================================= */

/*
 * For a plane tilted with positive rotateX:
 *
 * local upper semicircle = rear
 * local lower semicircle = front
 *
 * The clipping belongs to the plane itself, so it follows
 * each of the three different spatial orientations.
 */

body.theme-v13
.ai24-orbit-system--back
.ai24-orbit-plane {
  clip-path:
    inset(0 0 50% 0);

  -webkit-clip-path:
    inset(0 0 50% 0);
}


body.theme-v13
.ai24-orbit-system--front
.ai24-orbit-plane {
  clip-path:
    inset(50% 0 0 0);

  -webkit-clip-path:
    inset(50% 0 0 0);
}


/* =========================================================
   MOVING ORBIT ENERGY
   ========================================================= */

body.theme-v13 .ai24-orbit-track {
  border:
    0 !important;

  border-radius:
    50%;

  background:
    conic-gradient(
      from 0deg,

      rgba(112,100,238,.11) 0deg,

      rgba(112,100,238,.35) 42deg,

      rgba(86,142,233,.27) 105deg,

      rgba(72,189,223,.38) 164deg,

      rgba(86,142,233,.17) 224deg,

      rgba(112,100,238,.31) 292deg,

      rgba(112,100,238,.11) 360deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,

      transparent
        calc(100% - 1.55px),

      #000
        calc(100% - 1.25px)
    );

  mask:
    radial-gradient(
      farthest-side,

      transparent
        calc(100% - 1.55px),

      #000
        calc(100% - 1.25px)
    );

  animation:
    ai24OrbitEnergyFlow
    16s linear infinite !important;

  will-change:
    transform;
}


body.theme-v13
.ai24-orbit-plane--diagonal-a
.ai24-orbit-track {
  animation-duration:
    21s !important;

  animation-direction:
    reverse !important;
}


body.theme-v13
.ai24-orbit-plane--diagonal-b
.ai24-orbit-track {
  animation-duration:
    25s !important;
}


@keyframes ai24OrbitEnergyFlow {
  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }
}


/* Rear light is deliberately quieter. */

body.theme-v13
.ai24-orbit-system--back
.ai24-orbit-track {
  opacity:
    .50;
}


/* Front light is visible over the metallic surface. */

body.theme-v13
.ai24-orbit-system--front
.ai24-orbit-track {
  opacity:
    .92;

  filter:
    drop-shadow(
      0 0 2px
      rgba(73,139,221,.10)
    );
}


/* =========================================================
   MOVING SIGNALS
   ========================================================= */

body.theme-v13 .ai24-orbit-signal {
  will-change:
    transform;

  box-shadow:
    0 0 0 2px
      rgba(255,255,255,.52),

    0 0 10px
      currentColor;
}


/*
 * Orbit radius = 215px.
 * Front/back copies use identical timings,
 * therefore they visually form ONE particle.
 */

body.theme-v13 .ai24-orbit-signal--h1 {
  animation:
    ai24DepthSignalH1
    9.8s linear infinite !important;
}


body.theme-v13 .ai24-orbit-signal--h2 {
  animation:
    ai24DepthSignalH2
    9.8s linear infinite !important;
}


body.theme-v13 .ai24-orbit-signal--a {
  animation:
    ai24DepthSignalA
    12.4s linear infinite !important;
}


body.theme-v13 .ai24-orbit-signal--b {
  animation:
    ai24DepthSignalB
    14.8s linear infinite !important;
}


@keyframes ai24DepthSignalH1 {
  from {
    transform:
      rotate(8deg)
      translateX(215px)
      rotate(-8deg);
  }

  to {
    transform:
      rotate(368deg)
      translateX(215px)
      rotate(-368deg);
  }
}


@keyframes ai24DepthSignalH2 {
  from {
    transform:
      rotate(188deg)
      translateX(215px)
      rotate(-188deg);
  }

  to {
    transform:
      rotate(548deg)
      translateX(215px)
      rotate(-548deg);
  }
}


@keyframes ai24DepthSignalA {
  from {
    transform:
      rotate(116deg)
      translateX(215px)
      rotate(-116deg);
  }

  to {
    transform:
      rotate(476deg)
      translateX(215px)
      rotate(-476deg);
  }
}


@keyframes ai24DepthSignalB {
  from {
    transform:
      rotate(246deg)
      translateX(215px)
      rotate(-246deg);
  }

  to {
    transform:
      rotate(606deg)
      translateX(215px)
      rotate(-606deg);
  }
}


body.theme-v13
.ai24-orbit-system--back
.ai24-orbit-signal {
  opacity:
    .62;
}


body.theme-v13
.ai24-orbit-system--front
.ai24-orbit-signal {
  opacity:
    1;
}


/* =========================================================
   METALLIC SPHERE
   ========================================================= */

body.theme-v13 .ai24-sphere-core {
  width:
    226px !important;

  height:
    226px !important;

  margin:
    -113px 0 0 -113px !important;

  border:
    1px solid
    rgba(101,114,138,.31) !important;

  background:
    radial-gradient(
      circle at 29% 19%,

      #ffffff 0%,

      #fbfcfe 7%,

      #edf1f6 17%,

      #d5dce6 32%,

      #aab5c5 49%,

      #7e8fa5 68%,

      #526176 84%,

      #39465a 100%
    ) !important;

  box-shadow:
    inset 31px 26px 46px
      rgba(255,255,255,.72),

    inset -36px -39px 56px
      rgba(38,49,69,.31),

    inset -8px 13px 28px
      rgba(86,142,233,.10),

    0 22px 46px
      rgba(57,72,98,.18),

    0 0 55px
      rgba(72,189,223,.045) !important;
}


/*
 * Keep original semantic text in DOM but do not paint it.
 * Visible copy is the independent overlay above the front arcs.
 */

body.theme-v13
.ai24-sphere-core
> strong,

body.theme-v13
.ai24-sphere-core
> span {
  visibility:
    hidden;
}


/* =========================================================
   METAL HIGHLIGHTS
   ========================================================= */

body.theme-v13 .ai24-sphere-core::before {
  background:
    radial-gradient(
      ellipse at center,

      rgba(255,255,255,.99) 0%,

      rgba(255,255,255,.57) 37%,

      rgba(202,220,245,.17) 59%,

      transparent 75%
    ) !important;
}


body.theme-v13 .ai24-sphere-core::after {
  background:
    linear-gradient(
      102deg,

      rgba(112,100,238,.035),

      rgba(86,142,233,.105),

      rgba(72,189,223,.09)
    ) !important;
}


/* =========================================================
   CENTER COPY ABOVE FRONT ORBITS
   ========================================================= */

body.theme-v13 .ai24-sphere-label-overlay {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    176px;

  transform:
    translate(-50%, -50%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  pointer-events:
    none;
}


body.theme-v13
.ai24-sphere-label-overlay
strong {
  display:
    block;

  color:
    #172235;

  font-size:
    22px;

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -.025em;

  text-shadow:
    0 1px 0
      rgba(255,255,255,.96),

    0 0 10px
      rgba(255,255,255,.34);
}


body.theme-v13
.ai24-sphere-label-overlay
span {
  display:
    inline-block;

  margin-top:
    9px;

  padding:
    5px 10px;

  color:
    #35455e;

  background:
    rgba(255,255,255,.74);

  border:
    1px solid
    rgba(255,255,255,.58);

  border-radius:
    999px;

  box-shadow:
    0 4px 12px
      rgba(48,61,84,.05);

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0;
}


/* =========================================================
   READABLE SURROUNDING LABELS
   ========================================================= */

body.theme-v13 .ai24-sphere-card {
  background:
    rgba(255,255,255,.965) !important;

  border-color:
    rgba(132,147,175,.18) !important;

  box-shadow:
    0 9px 22px
      rgba(52,65,91,.055),

    inset 0 1px 0
      rgba(255,255,255,1) !important;
}


body.theme-v13
.ai24-sphere-card
strong {
  color:
    #1f2b3d !important;

  font-weight:
    750 !important;
}


body.theme-v13
.ai24-sphere-card
small {
  color:
    #68778c !important;

  font-weight:
    540 !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  body.theme-v13
  .ai24-orbit-track,

  body.theme-v13
  .ai24-orbit-signal {
    animation:
      none !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
  body.theme-v13
  .ai24-orbit-system--back,

  body.theme-v13
  .ai24-orbit-system--front {
    display:
      none !important;
  }

  body.theme-v13
  .ai24-sphere-label-overlay {
    display:
      none;
  }

  body.theme-v13
  .ai24-sphere-core
  > strong,

  body.theme-v13
  .ai24-sphere-core
  > span {
    visibility:
      visible;
  }
}