/* ==================================================
   ФОНОВАЯ СЕТКА
================================================== */

.big-statement-light::before{
/*   content:""; */

  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(49,95,214,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(49,95,214,.045) 1px,
      transparent 1px
    );

  background-size:76px 76px;

  mask-image:
    linear-gradient(
      90deg,
      transparent 5%,
      black 48%,
      black 100%
    );
}


/* ==================================================
   БОЛЬШАЯ АНИМАЦИЯ
================================================== */

.statement-space{
  position:absolute;

  width:clamp(620px,62vw,1050px);
  aspect-ratio:1;

  right:-17%;
  top:50%;

  transform:translateY(-50%);

  pointer-events:none;
}


/* мягкое большое свечение */
.statement-space::before{
  content:"";

  position:absolute;

  width:55%;
  height:55%;

  left:22.5%;
  top:22.5%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(79,124,255,.23) 0%,
      rgba(79,124,255,.10) 35%,
      transparent 70%
    );

  filter:blur(40px);

  animation:statementPulse 7s ease-in-out infinite;
}


@keyframes statementPulse{

  0%,100%{
    transform:scale(.92);
    opacity:.6;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }

}


/* ==================================================
   ОРБИТЫ
================================================== */

.statement-orbit{
  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

  border:1px solid rgba(49,95,214,.17);

  transform:
    translate(-50%,-50%)
    rotate(-20deg);
}


.orbit-one{
  width:92%;
  height:58%;

  animation:statementOrbitOne 24s linear infinite;
}


.orbit-two{
  width:72%;
  height:88%;

  border-color:rgba(49,95,214,.11);

  animation:statementOrbitTwo 31s linear infinite reverse;
}


.orbit-three{
  width:52%;
  height:52%;

  border-color:rgba(49,95,214,.18);

  animation:statementOrbitThree 18s linear infinite;
}


@keyframes statementOrbitOne{

  to{
    transform:
      translate(-50%,-50%)
      rotate(340deg);
  }

}


@keyframes statementOrbitTwo{

  to{
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }

}


@keyframes statementOrbitThree{

  to{
    transform:
      translate(-50%,-50%)
      rotate(340deg);
  }

}


/* ==================================================
   БОЛЬШОЕ ЭНЕРГЕТИЧЕСКОЕ ЯДРО
================================================== */

.statement-energy{
  position:absolute;

  left:50%;
  top:50%;

  width:31%;
  aspect-ratio:1;

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

  border-radius:50%;

  background:
    radial-gradient(
      circle at 38% 33%,
      rgba(255,255,255,.95),
      rgba(164,190,255,.72) 13%,
      rgba(79,124,255,.38) 34%,
      rgba(49,95,214,.12) 58%,
      transparent 72%
    );

  box-shadow:
    0 0 80px rgba(79,124,255,.16),
    0 0 180px rgba(79,124,255,.13);

  animation:energyFloat 8s ease-in-out infinite;
}


.statement-energy::before,
.statement-energy::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

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


.statement-energy::before{
  width:125%;
  height:42%;

  border:1px solid rgba(49,95,214,.26);

  transform:
    translate(-50%,-50%)
    rotate(-18deg);
}


.statement-energy::after{
  width:7px;
  height:7px;

  background:#315FD6;

  box-shadow:
    0 0 0 8px rgba(49,95,214,.07),
    0 0 30px rgba(49,95,214,.65);
}


/* точка, движущаяся вокруг ядра */
.statement-energy span{
  position:absolute;

  top:50%;
  left:-14%;

  width:7px;
  height:7px;

  margin-top:-3px;

  border-radius:50%;

  background:#315FD6;

  box-shadow:
    0 0 18px rgba(49,95,214,.75);

  transform-origin:207% center;

  animation:energySatellite 10s linear infinite;
}


@keyframes energySatellite{

  to{
    transform:rotate(360deg);
  }

}


@keyframes energyFloat{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translateY(-5px)
      scale(.98);
  }

  50%{
    transform:
      translate(-50%,-50%)
      translateY(8px)
      scale(1.04);
  }

}


/* ==================================================
   CONTENT
================================================== */

.big-statement-light-inner{
  position:relative;
  z-index:2;
}


/* ==================================================
   HEADING
================================================== */

.big-statement-light h2{
  position:relative;

  max-width:1050px;

  margin:0;

  color:#0D1524;

  font-size:clamp(52px,7vw,105px);
  line-height:.89;

  font-weight:300;
  letter-spacing:-.07em;
}


/* часть текста делаем синей */
.big-statement-light h2 span{
  display:block;

  max-width:970px;

  color:#315FD6;
}


/* ==================================================
   НИЖНЯЯ ЧАСТЬ
================================================== */

.statement-description{
  display:grid;

  grid-template-columns:1fr minmax(320px,560px);

  align-items:end;

  gap:60px;

  margin-top:clamp(55px,7vw,95px);
}


.statement-description p{
  position:relative;

  margin:0;

  color:#58677D;

  font-size:clamp(18px,1.7vw,23px);
  line-height:1.55;

  letter-spacing:-.015em;
}


/* ==================================================
   БОЛЬШАЯ СТРЕЛКА
================================================== */

.statement-arrow{
  color:#315FD6;

  font-size:clamp(60px,7vw,100px);
  line-height:.7;

  font-weight:300;

  transform-origin:center;

  transition:
    transform .7s cubic-bezier(.22,1,.36,1);
}


.big-statement-light:hover .statement-arrow{
  transform:
    translate(8px,8px)
    rotate(12deg);
}


/* ==================================================
   ДЕКОРАТИВНАЯ ЛИНИЯ
================================================== */

.statement-description p::before{
  content:"";

  position:absolute;

  left:0;
  top:-26px;

  width:62px;
  height:1px;

  background:#315FD6;

  box-shadow:0 0 15px rgba(49,95,214,.28);
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:1000px){

  .big-statement-light{
    min-height:auto;
  }


  .statement-space{
    width:760px;

    right:-390px;

    opacity:.68;
  }


  .big-statement-light h2{
    max-width:850px;
  }


  .statement-description{
    grid-template-columns:120px 1fr;
  }

}


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

@media(max-width:767px){

  .big-statement-light{
    min-height:690px;

    padding:88px 0;
  }


  .big-statement-light::before{
    background-size:52px 52px;
  }


  .big-statement-light h2{
    max-width:100%;

    font-size:clamp(43px,12.5vw,62px);
    line-height:.92;
  }


  .statement-description{
    grid-template-columns:1fr;

    gap:27px;

    margin-top:48px;
  }


  .statement-description p{
    max-width:520px;

    font-size:16px;
  }


  .statement-description p::before{
    top:-18px;

    width:45px;
  }


  .statement-arrow{
    font-size:58px;
  }


  /* большая анимация остаётся большой и на телефоне */
  .statement-space{
    width:570px;

    right:-390px;
    top:54%;

    opacity:.52;
  }


  .statement-energy{
    width:29%;
  }

}