/* Intro identity: orbital motion stays behind the original DS mark.
   The base portfolio geometry, palette, layout and labels remain unchanged. */
.intro-orbit{
  isolation:isolate;
  --ds-orbit-accent:#8171be;
}
.intro-orbit .orbit{
  transform-origin:50% 50%;
  backface-visibility:hidden;
  animation-play-state:paused;
}
.intro-orbit .o1{
  animation:ds-orbit-revolve 44s linear infinite;
  animation-play-state:paused;
}
.intro-orbit .o2{
  animation:ds-orbit-tilt 25s linear infinite reverse;
  animation-play-state:paused;
}
.intro-orbit .o3{
  animation:ds-orbit-precess 34s linear infinite;
  animation-play-state:paused;
}
/* Small satellites make the circular ring's revolution visible. */
.intro-orbit .o1::before,
.intro-orbit .o2::after,
.intro-orbit .o3::before{
  content:"";
  position:absolute;
  display:block;
  border-radius:50%;
  pointer-events:none;
}
.intro-orbit .o1::before{
  top:-4px;
  left:calc(50% - 4px);
  width:8px;
  height:8px;
  background:#7264ab;
  box-shadow:0 0 0 5px rgba(114,100,171,.12),0 0 14px rgba(114,100,171,.22);
}
.intro-orbit .o2::after{
  bottom:12%;
  left:5%;
  width:7px;
  height:7px;
  background:#8b78bc;
  box-shadow:0 0 0 4px rgba(139,120,188,.11);
}
.intro-orbit .o3::before{
  top:10%;
  right:10%;
  width:6px;
  height:6px;
  background:#b1a5d3;
  box-shadow:0 0 0 4px rgba(177,165,211,.13);
}
/* The center stays fixed. Only an outer halo breathes. */
.intro-orbit .orbit-sun{
  z-index:2;
  isolation:isolate;
}
.intro-orbit .orbit-sun::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(139,120,188,.38);
  box-shadow:0 0 30px rgba(139,120,188,.12);
  pointer-events:none;
  animation:ds-orbit-halo 5.5s ease-in-out infinite;
  animation-play-state:paused;
}
.intro-orbit .orbit-label{
  z-index:3;
  animation:ds-orbit-label-drift 6s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.intro-orbit .orbit-label-2{animation-delay:-2s}
.intro-orbit .orbit-label-3{animation-delay:-4s}
/* Only animate while the illustration is visible. */
.intro-orbit.orbit-in-view .orbit,
.intro-orbit.orbit-in-view .orbit-sun::after,
.intro-orbit.orbit-in-view .orbit-label{
  animation-play-state:running;
}
@keyframes ds-orbit-revolve{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes ds-orbit-tilt{
  from{transform:rotate(0deg) rotateX(58deg)}
  to{transform:rotate(360deg) rotateX(58deg)}
}
@keyframes ds-orbit-precess{
  from{transform:rotate(-35deg) scaleX(.54)}
  to{transform:rotate(325deg) scaleX(.54)}
}
@keyframes ds-orbit-halo{
  from{transform:scale(.98);opacity:.28}
  to{transform:scale(1.075);opacity:.72}
}
@keyframes ds-orbit-label-drift{
  from{transform:translate3d(0,0,0);opacity:.86}
  to{transform:translate3d(0,-4px,0);opacity:1}
}
@media(max-width:700px){
  /* Match existing 240px layout while keeping the text fully readable. */
  .intro-orbit .orbit-sun::after{inset:-5px}
  .intro-orbit .o1::before{width:7px;height:7px;top:-3px;left:calc(50% - 3.5px)}
}
@media(prefers-reduced-motion:reduce){
  .intro-orbit .orbit,
  .intro-orbit .orbit-sun::after,
  .intro-orbit .orbit-label{
    animation:none!important;
  }
  /* Preserve exactly the static approved illustration. */
  .intro-orbit .o2{transform:rotateX(58deg)}
  .intro-orbit .o3{transform:rotate(-35deg) scaleX(.54)}
}