/* Ambient motion stays visible; interaction accents are local to their targets. */
.stars {
  animation: cosmic-shimmer 10s ease-in-out infinite alternate;
}
.cosmic-starfield {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .7;
  pointer-events: none;
}
.effect-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 90;
  background: linear-gradient(90deg, #81dfff, #b1a4ff 72%, #f0c6ef);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.portal-header {
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.portal-header.is-scrolled {
  background-color: #080d1aef;
  border-color: #a6d8ff35;
  box-shadow: 0 10px 32px #02050b50;
}

/* Individual translate preserves the scene's existing scale and orbit rotation. */
.orbital-scene .planet,
.orbital-scene .planet-halo {
  translate: var(--scene-x, 0px) var(--scene-y, 0px);
  transition: translate .55s cubic-bezier(.2, .8, .2, 1);
}
.orbital-scene .orbit {
  translate: calc(var(--scene-x, 0px) * -.35) calc(var(--scene-y, 0px) * -.35);
  transition: translate .8s cubic-bezier(.2, .8, .2, 1);
}
.orbital-scene .coordinate {
  translate: calc(var(--scene-x, 0px) * -.6) calc(var(--scene-y, 0px) * -.6);
  transition: translate .8s cubic-bezier(.2, .8, .2, 1);
}
.planet::before {
  content: '';
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 18% 45%, transparent 0 13px, #9bdfff0c 14px 15px, transparent 16px 23px);
  opacity: .72;
  animation: planet-contours 48s linear infinite;
  pointer-events: none;
}
.browser-hero .planet-surface {
  animation: surface-drift 42s linear infinite;
}
.orbital-scene .orbit-one::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #caf0ff;
  box-shadow: 0 0 12px #a3dfff70;
  left: 50%;
  top: 0;
  animation: satellite-signal 3.8s ease-in-out infinite;
}
@supports (offset-path: ellipse(50% 50% at 50% 50%)) {
  .orbital-scene .orbit-one::after {
    left: 0;
    top: 0;
    offset-path: ellipse(50% 50% at 50% 50%);
    animation: orbit-travel 22s linear infinite, satellite-signal 3.8s ease-in-out infinite;
  }
}
.orbital-scene .orbit-two {
  animation: orbit-precession 32s ease-in-out infinite alternate;
}
.orbital-scene .satellite-one {
  animation: satellite-drift 9s ease-in-out infinite;
}
.orbital-scene .satellite-two {
  animation: satellite-drift 12s ease-in-out infinite reverse;
}
.status-dot {
  animation: status-signal 4s ease-in-out infinite;
}
.scroll-cue > span {
  animation: cue-drift 2.8s ease-in-out infinite;
}
.closing-orbit {
  animation: closing-turn 32s linear infinite;
}

.entered {
  animation: section-arrive .65s cubic-bezier(.2, .8, .2, 1) backwards;
}
.app-launch::before,
.knowledge-item::before {
  transition: opacity .25s;
}
.knowledge-item {
  transition: background-color .25s, border-color .25s, translate .25s;
}
.knowledge-item:hover,
.knowledge-item:focus-visible {
  border-color: #a7e5ff90;
  translate: 0 -3px;
}
.news-row {
  position: relative;
  isolation: isolate;
  transition: background-color .25s, border-color .25s;
}
.news-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--pointer-x, -300px) var(--pointer-y, -300px), #91e1ff0b, transparent 75%);
}
.news-row > span,
.round-arrow,
.button > span,
.text-link > span,
.text-button > span {
  transition: translate .25s cubic-bezier(.2, .8, .2, 1), background-color .25s;
}
.news-row:hover > span,
.news-row:focus-visible > span,
.app-launch:hover .round-arrow,
.app-launch:focus-visible .round-arrow,
.text-link:hover > span,
.text-link:focus-visible > span,
.text-button:hover > span,
.text-button:focus-visible > span {
  translate: 3px -2px;
}
.button:hover > span,
.button:focus-visible > span {
  translate: 2px -1px;
}
.button:active {
  transform: translateY(1px) scale(.985);
  transition-duration: .1s;
}
.docs-search input {
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.docs-search input:focus {
  border-color: #91e1ff;
  box-shadow: 0 0 0 4px #91e1ff0a;
}
dialog[open] {
  animation: dialog-arrive .28s cubic-bezier(.2, .8, .2, 1) both;
}
dialog[open]::backdrop {
  animation: backdrop-arrive .25s ease-out both;
}

html[data-visible=no] *,
html[data-visible=no] *::before,
html[data-visible=no] *::after,
[data-in-view=no] *,
[data-in-view=no] *::before,
[data-in-view=no] *::after {
  animation-play-state: paused !important;
}
@keyframes cosmic-shimmer {
  from { opacity: .32; }
  to { opacity: .62; }
}
@keyframes planet-contours {
  to { transform: rotate(360deg); }
}
@keyframes orbit-travel {
  to { offset-distance: 100%; }
}
@keyframes orbit-precession {
  from { transform: rotate(19deg); }
  to { transform: rotate(34deg); }
}
@keyframes satellite-signal {
  50% { opacity: .55; scale: .72; }
}
@keyframes satellite-drift {
  50% { translate: 9px -12px; }
}
@keyframes status-signal {
  50% { opacity: .55; }
}
@keyframes cue-drift {
  50% { translate: 0 5px; }
}
@keyframes closing-turn {
  to { rotate: 360deg; }
}
@keyframes section-arrive {
  from { opacity: .82; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes dialog-arrive {
  from { opacity: .6; translate: 0 12px; scale: .98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes backdrop-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 720px) {
  .cosmic-starfield { opacity: .56; }
  .planet::before { animation-duration: 60s; }
  .orbital-scene .orbit-one::after { animation-duration: 30s, 4.8s; }
  .orbital-scene .orbit-two { animation-duration: 42s; }
}