/* =========================================================
   SENSIA VISUAL MOTION SYSTEM V5.2
   Global institutional animated environment
   ========================================================= */

:root {
  --sensia-motion-blue: #3b82f6;
  --sensia-motion-blue-soft: #74b8ff;
  --sensia-motion-navy: #07111f;
}

/* ---------------------------------------------------------
   GLOBAL SPACE ENVIRONMENT
   --------------------------------------------------------- */

body {
  position: relative;
  min-height: 100vh;
  background: #020813;
}

.sensia-global-space {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 52% -10%,
      rgba(25, 91, 205, .18),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      #020714 0%,
      #030b19 48%,
      #020713 100%
    );
}

.sensia-space-stars,
.sensia-space-nebula,
.sensia-space-wave,
.sensia-space-dust {
  position: absolute;
  inset: 0;
}

/* stars */

.sensia-space-stars-a {
  opacity: .58;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.92) 0 1px,
      transparent 1.25px
    ),
    radial-gradient(
      circle,
      rgba(72,159,255,.95) 0 1px,
      transparent 1.3px
    ),
    radial-gradient(
      circle,
      rgba(166,211,255,.78) 0 .7px,
      transparent 1px
    );

  background-size:
    141px 141px,
    197px 197px,
    257px 257px;

  background-position:
    17px 39px,
    79px 21px,
    47px 113px;

  animation:
    sensiaStarsDriftA 36s linear infinite;
}

.sensia-space-stars-b {
  opacity: .30;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.80) 0 .8px,
      transparent 1px
    ),
    radial-gradient(
      circle,
      rgba(53,138,255,.85) 0 .8px,
      transparent 1.1px
    );

  background-size:
    93px 93px,
    173px 173px;

  background-position:
    31px 17px,
    103px 77px;

  animation:
    sensiaStarsDriftB 52s linear infinite;
}

/* nebula */

.sensia-space-nebula-a::before,
.sensia-space-nebula-a::after,
.sensia-space-nebula-b::before,
.sensia-space-nebula-b::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
}

.sensia-space-nebula-a::before {
  width: 72vw;
  height: 30vw;
  left: 18%;
  top: -10%;
  transform: rotate(-10deg);

  background:
    radial-gradient(
      ellipse,
      rgba(22, 104, 231, .26),
      rgba(15, 68, 154, .07) 48%,
      transparent 74%
    );

  animation:
    sensiaNebulaFloatA 18s ease-in-out infinite alternate;
}

.sensia-space-nebula-a::after {
  width: 75vw;
  height: 27vw;
  right: -30%;
  top: 28%;
  transform: rotate(-15deg);

  background:
    radial-gradient(
      ellipse,
      rgba(20, 88, 207, .23),
      rgba(11, 57, 135, .07) 48%,
      transparent 73%
    );

  animation:
    sensiaNebulaFloatB 24s ease-in-out infinite alternate;
}

.sensia-space-nebula-b::before {
  width: 50vw;
  height: 22vw;
  left: -18%;
  bottom: 5%;

  background:
    radial-gradient(
      ellipse,
      rgba(27, 95, 190, .16),
      transparent 72%
    );

  animation:
    sensiaNebulaFloatC 22s ease-in-out infinite alternate;
}

.sensia-space-nebula-b::after {
  width: 40vw;
  height: 18vw;
  right: 12%;
  bottom: -4%;

  background:
    radial-gradient(
      ellipse,
      rgba(45, 126, 244, .11),
      transparent 72%
    );

  animation:
    sensiaNebulaFloatD 20s ease-in-out infinite alternate;
}

/* orbital / energy waves */

.sensia-space-wave-a {
  inset: auto -12vw 12% 38vw;
  height: 32vh;
  opacity: .30;

  border-radius: 50%;

  border-top:
    1px solid rgba(67, 143, 255, .24);

  transform:
    rotate(-10deg)
    skewX(-12deg);

  box-shadow:
    0 -18px 75px rgba(25, 105, 235, .10);

  animation:
    sensiaWaveFloat 14s ease-in-out infinite alternate;
}

.sensia-space-wave-b {
  inset: 4% 32vw auto -15vw;
  height: 25vh;
  opacity: .20;

  border-radius: 50%;

  border-bottom:
    1px solid rgba(66, 143, 255, .22);

  transform:
    rotate(7deg)
    skewX(10deg);

  animation:
    sensiaWaveFloatB 18s ease-in-out infinite alternate;
}

/* luminous dust */

.sensia-space-dust {
  opacity: .18;

  background:
    radial-gradient(
      circle at 12% 18%,
      #5aaaff 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 67% 26%,
      #ffffff 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 82% 62%,
      #408cff 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 35% 74%,
      #79bbff 0 1px,
      transparent 1.5px
    );

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

/* ---------------------------------------------------------
   HERO — INCREASED MOTION FIDELITY
   --------------------------------------------------------- */

.hero-v51 .knowledge-system {
  transform-style: preserve-3d;

  transition:
    transform 600ms
    cubic-bezier(.22,1,.36,1);
}

.hero-v51 .knowledge-card {
  transform-style: preserve-3d;

  will-change:
    transform,
    border-color,
    box-shadow;

  animation:
    sensiaCardBreathe
    6.8s
    ease-in-out
    infinite;

  animation-delay:
    calc(
      var(--sensia-card-index, 0)
      * -410ms
    );
}

.hero-v51 .cards-left .knowledge-card:nth-child(1),
.hero-v51 .cards-right .knowledge-card:nth-child(1) {
  --sensia-card-index: 1;
}

.hero-v51 .cards-left .knowledge-card:nth-child(2),
.hero-v51 .cards-right .knowledge-card:nth-child(2) {
  --sensia-card-index: 2;
}

.hero-v51 .cards-left .knowledge-card:nth-child(3),
.hero-v51 .cards-right .knowledge-card:nth-child(3) {
  --sensia-card-index: 3;
}

.hero-v51 .cards-left .knowledge-card:nth-child(4),
.hero-v51 .cards-right .knowledge-card:nth-child(4) {
  --sensia-card-index: 4;
}

.hero-v51 .cards-left .knowledge-card:nth-child(5),
.hero-v51 .cards-right .knowledge-card:nth-child(5) {
  --sensia-card-index: 5;
}

.hero-v51 .knowledge-card:hover {
  transform:
    translateY(-5px)
    translateZ(20px)
    scale(1.015);

  border-color:
    rgba(102, 184, 255, .72);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 40px rgba(45,126,244,.09),
    0 20px 52px rgba(0,0,0,.30),
    0 0 24px rgba(35,126,255,.16),
    0 0 54px rgba(28,100,223,.09);
}

.hero-v51 .card-icon-svg {
  transition:
    transform 450ms
    cubic-bezier(.22,1,.36,1),
    filter 450ms ease;
}

.hero-v51 .knowledge-card:hover .card-icon-svg {
  transform:
    scale(1.10)
    rotate(-2deg);

  filter:
    drop-shadow(
      0 0 5px
      rgba(108,194,255,.85)
    )
    drop-shadow(
      0 0 17px
      rgba(36,124,255,.45)
    );
}

/* animated connector pulse */

.hero-v51 .connector {
  stroke-dasharray: 7 9;

  animation:
    sensiaConnectorFlow
    4.8s
    linear
    infinite;
}

.hero-v51 .connector:nth-of-type(2n) {
  animation-delay: -2.4s;
}

/* spine bloom */

.hero-v51 .spine-line {
  animation:
    sensiaSpineBreath
    4.8s
    ease-in-out
    infinite;
}

.hero-v51 .spine-halo {
  animation:
    sensiaHaloPulse
    3.7s
    ease-in-out
    infinite;
}

.hero-v51 .spine-base-v51 {
  animation:
    sensiaBaseGlow
    5s
    ease-in-out
    infinite;
}

/* ---------------------------------------------------------
   PLATFORM-WIDE ANIMATED CARDS
   Added by JS only to safe card candidates
   --------------------------------------------------------- */

.sensia-motion-card {
  position: relative;
  isolation: isolate;

  transform:
    translate3d(0,0,0);

  transition:
    transform 480ms
    cubic-bezier(.22,1,.36,1),
    border-color 360ms ease,
    background-color 360ms ease,
    box-shadow 420ms ease;

  will-change:
    transform,
    box-shadow;
}

.sensia-motion-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: inherit;

  opacity: 0;

  background:
    radial-gradient(
      circle at var(--sensia-pointer-x, 50%)
      var(--sensia-pointer-y, 50%),
      rgba(67, 148, 255, .15),
      transparent 42%
    );

  transition:
    opacity 300ms ease;

  pointer-events: none;
}

.sensia-motion-card:hover {
  transform:
    translateY(-5px)
    perspective(900px)
    rotateX(
      var(--sensia-tilt-x, 0deg)
    )
    rotateY(
      var(--sensia-tilt-y, 0deg)
    );

  border-color:
    rgba(82, 162, 255, .48) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 45px rgba(0,0,0,.20),
    0 0 28px rgba(28,111,241,.09);
}

.sensia-motion-card:hover::after {
  opacity: 1;
}

/* card reveal */

.sensia-motion-reveal {
  opacity: 0;
  transform:
    translateY(18px)
    scale(.985);
}

.sensia-motion-reveal.is-visible {
  opacity: 1;
  transform:
    translateY(0)
    scale(1);

  transition:
    opacity 750ms
    cubic-bezier(.22,1,.36,1),
    transform 750ms
    cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes sensiaStarsDriftA {
  from {
    transform: translate3d(0,0,0);
  }

  to {
    transform: translate3d(-45px,24px,0);
  }
}

@keyframes sensiaStarsDriftB {
  from {
    transform: translate3d(0,0,0);
  }

  to {
    transform: translate3d(35px,-20px,0);
  }
}

@keyframes sensiaNebulaFloatA {
  from {
    transform:
      translate3d(-2%,0,0)
      rotate(-10deg)
      scale(.97);
  }

  to {
    transform:
      translate3d(3%,3%,0)
      rotate(-7deg)
      scale(1.06);
  }
}

@keyframes sensiaNebulaFloatB {
  from {
    transform:
      translate3d(0,-1%,0)
      rotate(-15deg)
      scale(.98);
  }

  to {
    transform:
      translate3d(-5%,4%,0)
      rotate(-11deg)
      scale(1.05);
  }
}

@keyframes sensiaNebulaFloatC {
  from {
    transform:
      translate3d(0,0,0)
      scale(.95);
  }

  to {
    transform:
      translate3d(5%,-4%,0)
      scale(1.07);
  }
}

@keyframes sensiaNebulaFloatD {
  from {
    transform:
      translate3d(0,0,0);
  }

  to {
    transform:
      translate3d(-4%,-3%,0);
  }
}

@keyframes sensiaWaveFloat {
  from {
    transform:
      translate3d(0,0,0)
      rotate(-10deg)
      skewX(-12deg);
  }

  to {
    transform:
      translate3d(-4%,-8%,0)
      rotate(-13deg)
      skewX(-12deg);
  }
}

@keyframes sensiaWaveFloatB {
  from {
    transform:
      translate3d(0,0,0)
      rotate(7deg)
      skewX(10deg);
  }

  to {
    transform:
      translate3d(6%,5%,0)
      rotate(10deg)
      skewX(10deg);
  }
}

@keyframes sensiaDustPulse {
  0%,
  100% {
    opacity: .10;
  }

  50% {
    opacity: .27;
  }
}

@keyframes sensiaCardBreathe {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -3px;
  }
}

@keyframes sensiaConnectorFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -64;
  }
}

@keyframes sensiaSpineBreath {
  0%,
  100% {
    filter: brightness(.90);
  }

  50% {
    filter: brightness(1.38);
  }
}

@keyframes sensiaHaloPulse {
  0%,
  100% {
    scale: .93;
    opacity: .74;
  }

  50% {
    scale: 1.13;
    opacity: 1;
  }
}

@keyframes sensiaBaseGlow {
  0%,
  100% {
    filter: brightness(.88);
  }

  50% {
    filter: brightness(1.25);
  }
}

/* ---------------------------------------------------------
   ACCESSIBILITY / PERFORMANCE
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sensia-global-space *,
  .hero-v51 .knowledge-card,
  .hero-v51 .connector,
  .hero-v51 .spine-line,
  .hero-v51 .spine-halo,
  .hero-v51 .spine-base-v51 {
    animation: none !important;
  }

  .sensia-motion-card,
  .sensia-motion-reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}