/* Isolated space concept for portfolio-credits-test.html. */
@font-face {
  font-family: "Visio Science Gothic";
  src: url("../fonts/ScienceGothic-Visio.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.visio-portfolio-credits-test-page .visio-work-intro-eyebrow,
.visio-portfolio-credits-test-page .visio-work-capability-signal > span,
.visio-portfolio-credits-test-page .visio-work-intro-closing p,
.visio-portfolio-credits-test-page .visio-reference-kicker,
.visio-portfolio-credits-test-page .visio-reference-tile-type,
.visio-portfolio-credits-test-page .visio-reference-expand {
  font-family: "Visio Science Gothic", "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
}

.visio-portfolio-credits-test-page .visio-reference-tile-type {
  letter-spacing: 0;
}

.visio-space-accessible-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.visio-portfolio-credits-test-page > .visio-site-nav,
.visio-portfolio-credits-test-page.has-compact-header > .visio-site-nav {
  position: fixed;
  height: clamp(68px, 6vw, 86px);
  padding: 0 clamp(18px, 4.8vw, 72px);
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
  transition: background-color 620ms ease,
              border-color 620ms ease,
              box-shadow 620ms ease,
              backdrop-filter 620ms ease;
}

.visio-portfolio-credits-test-page.has-header-background > .visio-site-nav {
  background: rgba(5, 5, 5, 0.97);
  border-bottom-color: rgba(255, 0, 0, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.visio-portfolio-credits-test-page > .visio-site-nav .visio-hero-brand-full,
.visio-portfolio-credits-test-page.has-compact-header > .visio-site-nav .visio-hero-brand-full {
  opacity: 1;
  transform: none;
}

.visio-portfolio-credits-test-page > .visio-site-nav .visio-hero-brand-compact,
.visio-portfolio-credits-test-page.has-compact-header > .visio-site-nav .visio-hero-brand-compact {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.94);
}

.visio-portfolio-credits-test-page > .visio-site-nav .visio-hero-links,
.visio-portfolio-credits-test-page.has-compact-header > .visio-site-nav .visio-hero-links {
  gap: clamp(14px, 2.4vw, 34px);
  font-size: clamp(0.8rem, 0.22vw + 0.76rem, 0.98rem);
}

.visio-portfolio-credits-test-page > .visio-site-nav .visio-hero-brand,
.visio-portfolio-credits-test-page > .visio-site-nav .visio-hero-links {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.92);
}

.visio-portfolio-credits-test-page .visio-space-intro {
  min-height: max(860px, 100svh);
  color: #fff;
  background:
    radial-gradient(ellipse at 16% 18%, rgba(36, 49, 77, 0.34), transparent 38%),
    radial-gradient(ellipse at 88% 34%, rgba(81, 8, 20, 0.3), transparent 42%),
    linear-gradient(154deg, #080a12 0%, #030308 46%, #0a0207 76%, #010104 100%);
}

.visio-portfolio-credits-test-page .visio-space-intro::before {
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 26% 48%, rgba(255, 0, 0, 0.12), transparent 34%),
    radial-gradient(ellipse at 70% 38%, rgba(75, 90, 125, 0.14), transparent 32%),
    linear-gradient(108deg, transparent 31%, rgba(255, 255, 255, 0.025) 48%, transparent 63%);
  filter: blur(28px);
  opacity: 0.9;
  will-change: transform, opacity;
  animation: visioSpaceAtmosphere 24s ease-in-out infinite alternate;
}

.visio-portfolio-credits-test-page .visio-space-intro::after {
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, 0.22) 68%, rgba(0, 0, 0, 0.68) 118%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), transparent 18%, transparent 76%, rgba(0, 0, 0, 0.38));
  opacity: 1;
  animation: none;
}

.visio-space-canvas,
.visio-space-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.visio-space-aurora {
  z-index: 1;
  overflow: hidden;
  opacity: 0.7;
  mix-blend-mode: screen;
  contain: paint;
  isolation: isolate;
}

.visio-space-aurora::after {
  content: "";
  position: absolute;
  top: 11%;
  left: 18%;
  width: 64%;
  height: 45%;
  background:
    radial-gradient(ellipse at 38% 48%, rgba(255, 34, 50, 0.1), rgba(128, 0, 42, 0.028) 48%, transparent 74%),
    radial-gradient(ellipse at 67% 43%, rgba(255, 95, 76, 0.08), rgba(118, 0, 45, 0.024) 50%, transparent 76%);
  filter: blur(56px);
  will-change: transform, opacity;
  animation: visioSpaceAuroraGlow 17s ease-in-out infinite alternate;
}

.visio-space-aurora svg {
  position: absolute;
  top: 10%;
  left: 17%;
  width: 66%;
  height: 48%;
  overflow: visible;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: visioSpaceAuroraDrift 34s ease-in-out infinite alternate;
}

.visio-aurora-haze {
  fill: url(#visio-aurora-haze);
  filter: blur(54px);
  opacity: 0.12;
  transform-origin: center;
  animation: visioSpaceAuroraHaze 25s ease-in-out -9s infinite alternate;
}

.visio-aurora-veil {
  opacity: 0.12;
  transform-box: fill-box;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.visio-aurora-veil-a {
  fill: url(#visio-aurora-veil-a);
  animation: visioSpaceAuroraVeilA 21s cubic-bezier(0.42, 0, 0.58, 1) -7s infinite alternate;
}

.visio-aurora-veil-b {
  fill: url(#visio-aurora-veil-b);
  animation: visioSpaceAuroraVeilB 27s cubic-bezier(0.42, 0, 0.58, 1) -16s infinite alternate;
}

.visio-aurora-flow-layer {
  transform-box: fill-box;
  transform-origin: center;
}

.visio-aurora-bloom {
  transform-box: fill-box;
  transform-origin: center;
  mix-blend-mode: screen;
  opacity: 0.02;
  will-change: opacity, transform;
}

.visio-aurora-bloom-a {
  fill: url(#visio-aurora-bloom-a);
  animation: visioSpaceAuroraBloomA 26s cubic-bezier(0.45, 0, 0.55, 1) -11s infinite;
}

.visio-aurora-bloom-b {
  fill: url(#visio-aurora-bloom-b);
  animation: visioSpaceAuroraBloomB 31s cubic-bezier(0.45, 0, 0.55, 1) -23s infinite;
}

.visio-aurora-grain {
  fill: #fff;
  opacity: 0.1;
  mix-blend-mode: soft-light;
  transform-box: fill-box;
  transform-origin: center;
  animation: visioSpaceAuroraGrain 19s ease-in-out -6s infinite alternate;
}

.visio-space-canvas {
  z-index: 2;
  display: block;
}

.visio-space-intro:not(.is-space-ready) .visio-space-moon:not(.has-orbit-preview),
.visio-space-intro:not(.is-space-ready) .visio-space-earth:not(.has-orbit-preview),
.visio-space-intro:not(.is-space-ready) .visio-space-mars:not(.has-orbit-preview),
.visio-space-intro:not(.is-space-ready) .visio-space-sun:not(.has-orbit-preview) {
  opacity: 0;
}

.visio-space-moon {
  position: absolute;
  z-index: 2;
  top: 24%;
  right: 18%;
  width: clamp(75.24px, 7.524vw, 117.04px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../images/space/moon-photoreal-v1-web.png") center / contain no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(224, 232, 255, 0.14))
    drop-shadow(0 0 28px rgba(116, 132, 170, 0.08));
  opacity: var(--visio-sky-depth-opacity, 0.82);
  scale: var(--visio-sky-depth-scale, 1);
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: visioSpaceMoonDrift 32s ease-in-out infinite alternate;
}

.visio-space-moon::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.08), transparent 40%),
    radial-gradient(circle at 35% 32%, transparent 0 38%, rgba(8, 12, 20, 0.08) 70%, rgba(2, 4, 10, 0.32) 100%);
  mix-blend-mode: multiply;
}

.visio-space-earth {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 55%;
  width: clamp(102.72px, 10.272vw, 162.93px);
  aspect-ratio: 1;
  overflow: visible;
  border-radius: 50%;
  background: url("../images/space/earth-photoreal-v1-web.png") center / contain no-repeat;
  filter:
    drop-shadow(0 0 4px rgba(218, 246, 255, 0.54))
    drop-shadow(0 0 18px rgba(64, 173, 255, 0.22));
  opacity: var(--visio-sky-depth-opacity, 0.82);
  scale: var(--visio-sky-depth-scale, 1);
  transform: translate(-50%, -50%);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: paint;
  pointer-events: none;
}

.visio-space-earth::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: inherit;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.13), transparent 34%);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.visio-space-earth::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 31% 35%, transparent 0 48%, rgba(0, 7, 24, 0.14) 74%, rgba(0, 2, 12, 0.5) 100%);
  box-shadow: inset 2px 0 5px rgba(164, 224, 255, 0.14);
}

.visio-space-earth-globe,
.visio-space-sun-globe,
.visio-space-moon-globe {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.visio-space-earth.is-globe-loading:not(.has-globe-preview),
.visio-space-sun.is-globe-loading:not(.has-globe-preview),
.visio-space-moon.is-globe-loading:not(.has-globe-preview),
.visio-space-earth.has-orbit-preview:not(.has-globe-preview):not(.is-earth-3d),
.visio-space-sun.has-orbit-preview:not(.has-globe-preview):not(.is-sun-3d),
.visio-space-moon.has-orbit-preview:not(.has-globe-preview):not(.is-moon-3d) {
  visibility: hidden;
}

.visio-space-earth.is-earth-3d,
.visio-space-sun.is-sun-3d,
.visio-space-moon.is-moon-3d,
.visio-space-earth.has-globe-preview,
.visio-space-sun.has-globe-preview,
.visio-space-moon.has-globe-preview {
  background: none;
}

.visio-space-earth.is-earth-3d::before,
.visio-space-earth.is-earth-3d::after,
.visio-space-moon.is-moon-3d::after,
.visio-space-earth.has-globe-preview::before,
.visio-space-earth.has-globe-preview::after,
.visio-space-moon.has-globe-preview::after {
  content: none;
}

.visio-space-earth.is-earth-3d .visio-space-earth-globe,
.visio-space-sun.is-sun-3d .visio-space-sun-globe,
.visio-space-moon.is-moon-3d .visio-space-moon-globe {
  display: block;
}

.visio-globe-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.visio-space-sun-globe,
.visio-space-sun-preview {
  inset: -12%;
  width: 124%;
  height: 124%;
}

.visio-space-mars {
  position: absolute;
  z-index: 2;
  top: 20%;
  left: 40%;
  width: clamp(48px, 4.42vw, 71px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #020102 url("../images/space/mars-nasa-valles-marineris-web.jpg") center / cover no-repeat;
  filter:
    drop-shadow(0 0 5px rgba(255, 159, 108, 0.34))
    drop-shadow(0 0 18px rgba(189, 57, 36, 0.18));
  opacity: var(--visio-sky-depth-opacity, 0.82);
  scale: var(--visio-sky-depth-scale, 1);
  transform: translate(-50%, -50%);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: paint;
  pointer-events: none;
}

.visio-space-sun {
  position: absolute;
  z-index: 2;
  top: 70%;
  left: 2%;
  width: clamp(168px, 16.4vw, 258px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../images/space/sun-photoreal-v1-web.png") center / contain no-repeat;
  filter:
    drop-shadow(0 0 11px rgba(255, 130, 66, 0.34))
    drop-shadow(0 0 36px rgba(216, 42, 22, 0.18));
  opacity: var(--visio-sky-depth-opacity, 0.72);
  scale: var(--visio-sky-depth-scale, 1);
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: visioSpaceSunBreathe 10.5s ease-in-out infinite alternate;
}

.visio-space-sun::before {
  content: "";
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 168, 85, 0.13) 0 23%, rgba(220, 52, 24, 0.07) 42%, rgba(139, 0, 14, 0.025) 60%, transparent 74%);
  filter: blur(12px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: visioSpaceSunCorona 8.8s ease-in-out infinite alternate;
}

.visio-space-sun::after {
  content: none;
}

.visio-space-sun.is-sun-3d,
.visio-space-sun.has-globe-preview {
  animation: none;
  opacity: calc(0.65 + var(--visio-sky-depth-opacity, 0.72) * 0.35);
  filter: drop-shadow(0 0 13px rgba(255, 104, 36, 0.38))
    drop-shadow(0 0 32px rgba(210, 40, 12, 0.2));
}

.visio-space-sun.is-sun-3d::before,
.visio-space-sun.has-globe-preview::before {
  animation: none;
  opacity: 0.62;
}

.visio-space-moon.is-moon-3d,
.visio-space-moon.has-globe-preview {
  filter: drop-shadow(0 0 9px rgba(205, 218, 240, 0.08));
}

.visio-portfolio-credits-test-page .visio-work-intro-header {
  z-index: 5;
  animation: none;
}

.visio-portfolio-credits-test-page .visio-space-stage {
  min-height: clamp(500px, 49vw, 680px);
  margin-top: clamp(-64px, -4vw, -34px);
  perspective: 900px;
  transform-style: preserve-3d;
}

.visio-space-meteor-canvas {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  display: block;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.visio-space-word-field {
  position: absolute;
  z-index: 6;
  inset: -10%;
  overflow: visible;
  perspective: 780px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.visio-space-word {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  color: rgba(255, 255, 255, 0.95);
  font-family: "Visio Science Gothic", "Visio Roc Grotesk", Helvetica, Arial, sans-serif;
  font-size: clamp(0.78rem, 0.72vw + 0.55rem, 1.45rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.92;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform-style: preserve-3d;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.visio-space-word-primary,
.visio-space-word-secondary {
  display: block;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.24);
}

.visio-space-word-primary {
  position: relative;
  z-index: 2;
  font-size: 1em;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.visio-space-word-primary.has-vector-depth,
.visio-space-word-secondary.has-vector-depth {
  line-height: 0;
  text-shadow: none;
}

.visio-space-word-vector {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  backface-visibility: hidden;
  pointer-events: none;
}

.visio-space-word.is-fly-through .visio-space-word-primary,
.visio-space-word.is-fly-through .visio-space-word-secondary {
  text-shadow: none;
}

.visio-space-word-secondary {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.7em;
  letter-spacing: 0.04em;
  transform: translate3d(12px, 10px, -72px) scale(0.92);
  transform-origin: left top;
  opacity: 0.76;
  animation: none;
}

.visio-space-word-secondary.has-vector-depth {
  color: #000;
  opacity: 1;
}

.visio-space-word.is-static {
  width: min(38vw, 300px);
  white-space: normal;
  opacity: 0.74;
  transform: translate(-50%, -50%);
}

.visio-black-hole {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(112px, 14.175vw, 209px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 40%, rgba(0, 0, 0, 0.98) 50%, rgba(0, 0, 0, 0.68) 60%, transparent 73%);
  filter: drop-shadow(0 0 20px rgba(68, 0, 8, 0.2));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.visio-black-hole::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -18%;
  border-radius: 44% 56% 61% 39% / 54% 41% 59% 46%;
  border: 0;
  background:
    radial-gradient(ellipse 72% 24% at 30% 42%, rgba(255, 36, 31, 0.2), transparent 72%),
    radial-gradient(ellipse 58% 19% at 74% 59%, rgba(132, 0, 25, 0.22), transparent 76%),
    radial-gradient(ellipse 26% 61% at 55% 46%, rgba(236, 22, 29, 0.1), transparent 78%);
  filter: blur(18px);
  opacity: 0.3;
  box-shadow: none;
  animation: visioBlackHoleLensing 5.8s ease-in-out infinite alternate;
}

.visio-black-hole-core {
  position: absolute;
  z-index: 3;
  inset: 27%;
  display: block;
  border-radius: 50%;
  background: #000;
  box-shadow:
    0 0 5px 4px #000,
    0 0 15px 8px rgba(0, 0, 0, 0.94),
    inset -5px -4px 12px rgba(35, 0, 4, 0.38);
}

@media (min-width: 681px) {
  .visio-black-hole {
    background: radial-gradient(circle, #000 0 41%, rgba(0, 0, 0, 0.98) 51%, rgba(0, 0, 0, 0.64) 62%, transparent 78%);
    filter: drop-shadow(0 0 48px rgba(68, 0, 8, 0.16));
  }

  .visio-black-hole::after {
    inset: -28%;
    filter: blur(24px);
    opacity: 0.24;
  }
}

.visio-portfolio-credits-test-page .visio-work-intro-lead {
  position: relative;
  z-index: 8;
  max-width: 49rem;
  margin-top: clamp(54px, 6vw, 94px);
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.84);
}

.visio-portfolio-credits-test-page .visio-work-intro-closing {
  z-index: 8;
  margin-top: clamp(38px, 4vw, 58px);
}

.visio-portfolio-credits-test-page .visio-work-intro-closing p {
  color: rgba(255, 72, 65, 0.94);
  text-shadow: 0 0 24px rgba(255, 0, 0, 0.3);
}

.visio-portfolio-credits-test-page .visio-work-intro-down-signal {
  background: #ff4841;
  box-shadow: 0 0 14px rgba(255, 72, 65, 0.42);
}

.visio-portfolio-credits-test-page .visio-work-intro-down-signal::after {
  border-color: #ff4841;
  filter: drop-shadow(0 0 5px rgba(255, 72, 65, 0.46));
}

.visio-portfolio-credits-test-page .visio-work-intro-bottom-fade {
  z-index: 7;
  height: clamp(82px, 7vw, 110px);
  background: #fff;
}

.visio-space-intro:not(.is-space-active)::before,
.visio-space-intro:not(.is-space-active) .visio-space-aurora,
.visio-space-intro:not(.is-space-active) .visio-space-aurora::after,
.visio-space-intro:not(.is-space-active) .visio-space-aurora svg,
.visio-space-intro:not(.is-space-active) .visio-aurora-haze,
.visio-space-intro:not(.is-space-active) .visio-aurora-veil,
.visio-space-intro:not(.is-space-active) .visio-aurora-bloom,
.visio-space-intro:not(.is-space-active) .visio-aurora-grain,
.visio-space-intro:not(.is-space-active) .visio-black-hole::after,
.visio-space-intro:not(.is-space-active) .visio-space-moon,
.visio-space-intro:not(.is-space-active) .visio-space-sun,
.visio-space-intro:not(.is-space-active) .visio-space-sun::before {
  animation-play-state: paused !important;
}

@keyframes visioSpaceAtmosphere {
  0% { opacity: 0.7; transform: translate3d(-2%, 1%, 0) scale(1.02); }
  52% { opacity: 1; transform: translate3d(2%, -1.5%, 0) scale(1.08); }
  100% { opacity: 0.78; transform: translate3d(-0.5%, 2%, 0) scale(1.04); }
}

@keyframes visioSpaceEarthClouds {
  from { transform: translateX(-8%) rotate(-4deg); }
  to { transform: translateX(9%) rotate(5deg); }
}

@keyframes visioSpaceAuroraDrift {
  0% { opacity: 1; transform: translate3d(-1.6%, 1.2%, 0) rotate(-0.6deg) scale(1.02); }
  48% { opacity: 1; transform: translate3d(1.5%, -1.8%, 0) rotate(0.8deg) scale(1.055); }
  100% { opacity: 1; transform: translate3d(-0.5%, 0.6%, 0) rotate(-0.2deg) scale(1.035); }
}

@keyframes visioSpaceAuroraGlow {
  from { opacity: 0.18; transform: translate3d(-3%, 2%, 0) scale(0.94); }
  to { opacity: 0.52; transform: translate3d(3%, -2%, 0) scale(1.08); }
}

@keyframes visioSpaceAuroraHaze {
  0% { opacity: 0.06; transform: translate3d(-3%, 2%, 0) scale(0.88, 0.94); }
  46% { opacity: 0.22; transform: translate3d(2%, -3%, 0) scale(1.08, 1.14); }
  100% { opacity: 0.09; transform: translate3d(-1%, 1%, 0) scale(0.96, 1.04); }
}

@keyframes visioSpaceAuroraVeilA {
  0% { opacity: 0.08; transform: translate3d(-2%, 3%, 0) scale(0.94, 0.86) skewY(-1deg); }
  28% { opacity: 0.2; transform: translate3d(1%, -2%, 0) scale(1.04, 1.08) skewY(0.8deg); }
  54% { opacity: 0.46; transform: translate3d(2.5%, -4%, 0) scale(1.1, 1.16) skewY(-0.4deg); }
  76% { opacity: 0.14; transform: translate3d(-0.5%, 1%, 0) scale(0.98, 0.96) skewY(0.6deg); }
  100% { opacity: 0.28; transform: translate3d(-2%, -1%, 0) scale(1.06, 1.04) skewY(-0.7deg); }
}

@keyframes visioSpaceAuroraVeilB {
  0% { opacity: 0.05; transform: translate3d(3%, -2%, 0) scale(1.08, 0.9) skewY(0.8deg); }
  24% { opacity: 0.32; transform: translate3d(-1%, 2%, 0) scale(0.96, 1.08) skewY(-0.9deg); }
  49% { opacity: 0.12; transform: translate3d(-3%, 4%, 0) scale(1.02, 1.15) skewY(0.4deg); }
  72% { opacity: 0.42; transform: translate3d(2%, -3%, 0) scale(1.12, 0.98) skewY(-0.6deg); }
  100% { opacity: 0.08; transform: translate3d(1%, 1%, 0) scale(0.94, 1.04) skewY(0.7deg); }
}

@keyframes visioSpaceAuroraBloomA {
  0%, 12% { opacity: 0.015; transform: translate3d(-1.5%, 1%, 0) scale(0.94, 0.9); }
  30% { opacity: 0.12; transform: translate3d(0.5%, -1%, 0) scale(1.02, 1); }
  49% { opacity: 0.72; transform: translate3d(1.5%, -2%, 0) scale(1.1, 1.08); }
  65% { opacity: 0.34; transform: translate3d(0%, 0.5%, 0) scale(1.04, 1.13); }
  84% { opacity: 0.08; transform: translate3d(-1%, 1.5%, 0) scale(0.98, 1.04); }
  100% { opacity: 0.015; transform: translate3d(-1.5%, 1%, 0) scale(0.94, 0.9); }
}

@keyframes visioSpaceAuroraBloomB {
  0%, 18% { opacity: 0.01; transform: translate3d(2%, -1%, 0) scale(1.04, 0.92); }
  36% { opacity: 0.1; transform: translate3d(0.5%, 1%, 0) scale(0.98, 1.03); }
  54% { opacity: 0.58; transform: translate3d(-1.5%, 2%, 0) scale(1.08, 1.12); }
  70% { opacity: 0.26; transform: translate3d(-0.5%, -0.5%, 0) scale(1.12, 1.02); }
  88% { opacity: 0.06; transform: translate3d(1%, -1.5%, 0) scale(1.02, 0.96); }
  100% { opacity: 0.01; transform: translate3d(2%, -1%, 0) scale(1.04, 0.92); }
}

@keyframes visioSpaceAuroraGrain {
  0% { opacity: 0.068; transform: translate3d(-0.7%, 0.4%, 0) scale(1.015); }
  48% { opacity: 0.13; transform: translate3d(0.5%, -0.6%, 0) scale(1.03); }
  100% { opacity: 0.09; transform: translate3d(0.8%, 0.5%, 0) scale(1.02); }
}

@keyframes visioBlackHoleLensing {
  from { opacity: 0.16; transform: scale(0.94); }
  to { opacity: 0.34; transform: scale(1.04); }
}

@keyframes visioSpaceMoonDrift {
  from { transform: translate3d(-4px, 3px, 0) rotate(-1.2deg); }
  to { transform: translate3d(5px, -4px, 0) rotate(1.6deg); }
}

@keyframes visioSpaceSunBreathe {
  from { transform: translate(-50%, -50%) scale(0.99) rotate(-0.2deg); }
  to { transform: translate(-50%, -50%) scale(1.01) rotate(0.2deg); }
}

@keyframes visioSpaceSunCorona {
  from { opacity: 0.52; transform: scale(0.94) rotate(-2deg); }
  to { opacity: 0.68; transform: scale(1.07) rotate(3deg); }
}

@media (max-width: 900px) {
  .visio-portfolio-credits-test-page > .visio-site-nav,
  .visio-portfolio-credits-test-page.has-compact-header > .visio-site-nav {
    height: 62px;
    padding: 0 14px;
  }

  .visio-portfolio-credits-test-page .visio-space-stage {
    min-height: 540px;
  }

  .visio-space-aurora svg {
    top: 13%;
    left: 19%;
    width: 62%;
    height: 46%;
  }
}

@media (max-width: 680px) {
  .visio-portfolio-credits-test-page > .visio-site-nav.is-mobile-menu-open .visio-hero-links {
    color: rgba(255, 255, 255, 0.96);
    background: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-shadow: none;
  }

  .visio-portfolio-credits-test-page > .visio-site-nav.is-mobile-menu-open .visio-hero-links a {
    color: inherit;
  }

  .visio-portfolio-credits-test-page .visio-space-intro {
    min-height: 900px;
    padding-top: 88px;
  }

  .visio-portfolio-credits-test-page .visio-space-stage {
    min-height: 500px;
    margin-top: -18px;
  }

  .visio-space-word {
    font-size: clamp(0.66rem, 3vw, 0.9rem);
  }

  .visio-space-word-secondary {
    top: 70%;
    left: 54%;
    transform: translate3d(0, 32%, -72px) scale(0.92);
  }

  .visio-black-hole {
    width: clamp(132px, 41vw, 174px);
  }

  .visio-space-moon {
    top: 126px;
    right: 28px;
    width: 57.2px;
  }

  .visio-space-sun {
    display: none;
  }

  .visio-space-earth {
    display: none;
  }

  .visio-space-mars {
    display: none;
  }

  .visio-space-aurora {
    opacity: 0.64;
    /* Soft gradients keep the mobile atmosphere without SVG noise/blur passes. */
    background:
      radial-gradient(ellipse at 42% 35%, rgba(207, 19, 55, 0.16), transparent 62%),
      radial-gradient(ellipse at 68% 48%, rgba(93, 114, 153, 0.09), transparent 58%);
  }

  .visio-space-aurora svg {
    display: none;
  }

  .visio-space-aurora::after {
    filter: none;
  }

  .visio-portfolio-credits-test-page .visio-work-intro-lead {
    max-width: 21rem;
    margin-top: 50px;
    color: rgba(255, 255, 255, 0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-portfolio-credits-test-page .visio-space-intro::before,
  .visio-space-aurora,
  .visio-space-aurora svg,
  .visio-space-aurora path,
  .visio-space-aurora::after,
  .visio-black-hole,
  .visio-black-hole::after,
  .visio-space-moon,
  .visio-space-earth,
  .visio-space-earth::before,
  .visio-space-mars,
  .visio-space-sun,
  .visio-space-sun::before,
  .visio-space-sun::after,
  .visio-space-word-secondary {
    animation: none !important;
  }
}

/* Keep the shared sky in one coordinate system on the home and references pages. */
.visio-space-intro [data-visio-space-caption] {
  animation: none !important;
  transform: none !important;
  translate: 0 var(--visio-caption-offset, 0px);
  opacity: 1;
}

.visio-space-intro [data-visio-space-caption].is-caption-enhanced {
  opacity: 0;
}

.visio-space-intro [data-visio-space-caption].is-caption-visible {
  opacity: 1;
  transition: opacity 850ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .visio-space-intro [data-visio-space-caption].is-caption-enhanced {
    opacity: 1;
    transition: none;
  }
}

:root {
  --visio-space-locked-height: max(100svh, clamp(900px, 84.9vw, 1176px));
}

.visio-portfolio-credits-test-page .visio-space-intro,
.visio-index-page .visio-home-space {
  box-sizing: border-box;
  height: var(--visio-space-locked-height);
  min-height: var(--visio-space-locked-height);
}

.visio-index-page .visio-home-space-scene {
  height: 100%;
}

.visio-portfolio-credits-test-page .visio-space-intro {
  margin-bottom: 0;
}

/* Keep the prompt and arrow origin inside the sky; only the tip may cross the boundary. */
.visio-portfolio-credits-test-page .visio-space-boundary-prompt {
  position: absolute;
  top: calc(var(--visio-space-locked-height) - 70px);
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  align-content: start;
  overflow: visible;
  z-index: 8;
  animation: none;
  pointer-events: none;
}

/* Continue the visible CSS and SVG atmosphere from the shared session clock. */
.visio-space-intro::before,
.visio-space-intro .visio-space-aurora::after,
.visio-space-intro .visio-space-aurora svg,
.visio-space-intro .visio-aurora-haze,
.visio-space-intro .visio-aurora-veil,
.visio-space-intro .visio-aurora-bloom,
.visio-space-intro .visio-aurora-grain,
.visio-space-intro .visio-space-moon,
.visio-space-intro .visio-space-sun,
.visio-space-intro .visio-space-sun::before {
  animation-delay: var(--visio-space-sync-delay, 0s) !important;
}