/*
 * AI24Solutions hero V7
 * metallic sphere + three spatial orbital planes
 */


/* =========================================================
   BOARD
   ========================================================= */

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

  min-height: 505px;
  overflow: hidden;

  border: 1px solid rgba(137,151,178,.17);

  background:
    radial-gradient(
      circle at 51% 48%,
      rgba(85,116,175,.055),
      transparent 39%
    ),
    radial-gradient(
      circle at 91% 8%,
      rgba(64,184,220,.07),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.985),
      rgba(247,249,252,.985) 58%,
      rgba(241,245,250,.985)
    );

  box-shadow:
    0 20px 48px rgba(53,67,94,.06),
    inset 0 1px 0 rgba(255,255,255,.99);
}


body.theme-v13 .ai24-light-sphere__grid {
  opacity: .40;

  background-image:
    linear-gradient(
      rgba(108,126,157,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(108,126,157,.05) 1px,
      transparent 1px
    );

  background-size: 48px 48px;
}


/* =========================================================
   OLD ORBIT SYSTEM DISABLED
   ========================================================= */

body.theme-v13 .ai24-light-sphere__ring,
body.theme-v13 .ai24-light-sphere__dot {
  display: none !important;
}


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

   Все три окружности имеют один центр.
   Различается именно наклон плоскости.
   Сфера лежит выше orbit-system и закрывает задние участки,
   что создаёт эффект прохождения орбиты за сферой.
   ========================================================= */

body.theme-v13 .ai24-orbit-system {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 2;

  width: 452px;
  height: 452px;

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

  transform-style: preserve-3d;

  pointer-events: none;
}


body.theme-v13 .ai24-orbit-plane {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 430px;
  height: 430px;

  margin:
    -215px 0 0 -215px;

  border-radius: 50%;

  transform-style: preserve-3d;

  will-change: transform;
}


/* плоскость почти горизонтально вокруг экватора */

body.theme-v13 .ai24-orbit-plane--horizontal {
  transform:
    rotateZ(-4deg)
    rotateX(72deg);

  animation:
    ai24PlaneHorizontal
    12s ease-in-out infinite;
}


/* диагональ ↗ */

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

  animation:
    ai24PlaneA
    15s ease-in-out infinite;
}


/* диагональ ↘ */

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

  animation:
    ai24PlaneB
    17s ease-in-out infinite;
}


/* =========================================================
   ORBIT TRACKS
   ========================================================= */

body.theme-v13 .ai24-orbit-track {
  position: absolute;
  inset: 0;

  border-radius: 50%;

  border:
    1.25px solid rgba(82,142,223,.27);

  box-shadow:
    0 0 7px rgba(82,142,223,.035);

  pointer-events: none;
}


body.theme-v13
.ai24-orbit-plane--horizontal
.ai24-orbit-track {
  border-color:
    rgba(67,184,216,.28);
}


body.theme-v13
.ai24-orbit-plane--diagonal-a
.ai24-orbit-track {
  border-color:
    rgba(109,98,235,.27);
}


body.theme-v13
.ai24-orbit-plane--diagonal-b
.ai24-orbit-track {
  border-color:
    rgba(82,142,223,.25);
}


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

   Точка является дочерним элементом конкретной plane.
   Поэтому она физически движется в ТОЙ ЖЕ transform-plane,
   что и линия орбиты.
   ========================================================= */

body.theme-v13 .ai24-orbit-signal {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 8px;
  height: 8px;

  margin:
    -4px 0 0 -4px;

  border-radius: 50%;

  z-index: 3;

  will-change: transform;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.42),
    0 0 12px currentColor;
}


body.theme-v13 .ai24-orbit-signal--h1 {
  color: #43b8d8;
  background: #43b8d8;

  animation:
    ai24SignalH1
    9.6s linear infinite;
}


body.theme-v13 .ai24-orbit-signal--h2 {
  width: 5px;
  height: 5px;

  margin:
    -2.5px 0 0 -2.5px;

  color: #568ee9;
  background: #568ee9;

  animation:
    ai24SignalH2
    9.6s linear infinite;
}


body.theme-v13 .ai24-orbit-signal--a {
  color: #7064ee;
  background: #7064ee;

  animation:
    ai24SignalA
    11.8s linear infinite;
}


body.theme-v13 .ai24-orbit-signal--b {
  color: #568ee9;
  background: #568ee9;

  animation:
    ai24SignalB
    13.8s linear infinite;
}


/* exact radius = 215px */

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

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


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

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


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

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


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

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


/* =========================================================
   SUBTLE MOVEMENT OF THE PLANES
   ========================================================= */

@keyframes ai24PlaneHorizontal {
  0%,
  100% {
    transform:
      rotateZ(-4deg)
      rotateX(72deg);
  }

  50% {
    transform:
      rotateZ(2deg)
      rotateX(69deg);
  }
}


@keyframes ai24PlaneA {
  0%,
  100% {
    transform:
      rotateZ(58deg)
      rotateX(69deg);
  }

  50% {
    transform:
      rotateZ(63deg)
      rotateX(72deg);
  }
}


@keyframes ai24PlaneB {
  0%,
  100% {
    transform:
      rotateZ(-58deg)
      rotateX(70deg);
  }

  50% {
    transform:
      rotateZ(-63deg)
      rotateX(67deg);
  }
}


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

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

  left: 50%;
  top: 50%;

  z-index: 4;

  width: 226px;
  height: 226px;

  margin:
    -113px 0 0 -113px;

  padding: 29px;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  border-radius: 50%;

  border:
    1px solid rgba(105,118,142,.31);

  background:
    radial-gradient(
      circle at 31% 21%,
      #ffffff 0%,
      #fbfcfe 8%,
      #eef2f7 18%,
      #d3dae4 35%,
      #a9b4c4 54%,
      #7d8da3 73%,
      #4d5c72 100%
    );

  box-shadow:
    inset 30px 25px 44px rgba(255,255,255,.69),
    inset -35px -38px 55px rgba(42,53,73,.30),
    inset -8px 13px 27px rgba(82,142,223,.12),
    0 22px 46px rgba(59,74,101,.19),
    0 0 58px rgba(82,142,223,.07);

  animation:
    ai24MetalSphereFloat
    7.2s ease-in-out infinite;
}


/* chrome highlight */

body.theme-v13 .ai24-sphere-core::before {
  content: "";

  position: absolute;

  left: 23px;
  top: 16px;

  width: 130px;
  height: 80px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.98),
      rgba(255,255,255,.52) 38%,
      rgba(202,221,250,.15) 59%,
      transparent 74%
    );

  transform:
    rotate(-18deg);

  mix-blend-mode: screen;

  pointer-events: none;
}


/* cool brand reflection */

body.theme-v13 .ai24-sphere-core::after {
  content: "";

  position: absolute;

  left: 24px;
  right: 26px;
  bottom: 22px;

  height: 61px;

  border-radius: 50%;

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

  border-top-color:
    rgba(255,255,255,.51);

  background:
    linear-gradient(
      100deg,
      rgba(112,100,238,.035),
      rgba(82,142,223,.12),
      rgba(67,184,216,.105)
    );

  transform:
    rotate(-9deg);

  pointer-events: none;
}


/* =========================================================
   READABLE CENTRAL COPY
   ========================================================= */

body.theme-v13 .ai24-sphere-core strong {
  position: relative;

  z-index: 6;

  display: block;

  margin: 0;

  color: #172235;

  font-size: 23px;
  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -.025em;

  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 12px rgba(255,255,255,.36);
}


body.theme-v13 .ai24-sphere-core span {
  position: relative;

  z-index: 6;

  display: inline-block;

  margin-top: 10px;

  padding:
    5px 9px;

  color: #35455e;

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

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

  border-radius: 999px;

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 0;
}


/* =========================================================
   READABLE CARDS
   ========================================================= */

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

  width: 210px;

  min-height: 72px;

  padding:
    15px 18px;

  border:
    1px solid rgba(132,147,175,.19);

  border-radius: 18px;

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

  box-shadow:
    0 9px 22px rgba(52,65,91,.06),
    inset 0 1px 0 #fff;

  -webkit-backdrop-filter:
    blur(11px);

  backdrop-filter:
    blur(11px);
}


body.theme-v13 .ai24-sphere-card__index {
  display: none !important;
}


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

  margin-bottom: 5px;

  color: #1f2b3d;

  font-size: 14px;
  font-weight: 750;

  line-height: 1.25;
}


body.theme-v13 .ai24-sphere-card small {
  display: block;

  color: #68778d;

  font-size: 10.5px;
  font-weight: 540;

  line-height: 1.35;
}


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

  color: #59687e;

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

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

  font-size: 10.5px;
  font-weight: 650;
}


/* =========================================================
   METAL MOTION
   ========================================================= */

@keyframes ai24MetalSphereFloat {
  0%,
  100% {
    transform:
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translateY(-3px)
      scale(1.006);
  }
}


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

@media (prefers-reduced-motion: reduce) {
  body.theme-v13 .ai24-orbit-plane,
  body.theme-v13 .ai24-orbit-signal,
  body.theme-v13 .ai24-sphere-core {
    animation: none !important;
  }
}


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

@media (max-width: 680px) {
  body.theme-v13 .ai24-orbit-system {
    display: none;
  }

  body.theme-v13 .ai24-sphere-core {
    position: relative;

    left: auto;
    top: auto;

    width: 100%;
    height: auto;

    margin: 0;

    padding: 20px;

    border-radius: 18px;

    animation: none;

    background:
      linear-gradient(
        135deg,
        #fafbfd,
        #dfe5ed 50%,
        #aab6c6
      );
  }

  body.theme-v13 .ai24-sphere-core::before,
  body.theme-v13 .ai24-sphere-core::after {
    display: none;
  }

  body.theme-v13 .ai24-sphere-card {
    position: relative;

    inset: auto;

    width: 100%;
    max-width: none;

    min-height: 0;

    padding: 13px 15px;
  }
}