/* The environment spans the document. Only two viewport planes move on scroll. */
body { isolation: isolate; background: #060913; }
.cosmos { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: -1; overflow: clip; pointer-events: none; background: radial-gradient(ellipse at 85% 12%, #142448 0, #080e21 45%, #060913 85%); }
.star-plane { position: absolute; inset: -148px -16px; background-repeat: repeat; background-size: 960px 800px; }
.stars-far { background-image: url('../assets/deep-field.svg'); opacity: .9; }
/* Match the journey's starting position before JS paints its first frame. */
.stars-mid { background-image: url('../assets/stars-mid.svg'); background-position: 110px 134px; opacity: .85; transform: translate3d(0,48px,0); }
.stars-near { background-image: url('../assets/stars-near.svg'); background-position: 30px 194px; transform: translate3d(0,112px,0); }
@media (min-width: 801px) and (pointer: fine) {
  .stars-mid { transform: translate3d(0,60px,0); }
  .stars-near { transform: translate3d(0,140px,0); }
}
.hero, .operations, .contact { position: relative; isolation: isolate; overflow: clip; background: transparent; }
.impact, .work-section, .toolkit, .experience { position: relative; isolation: isolate; }
.hero:after { display: none; }
.space-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.nebula-shift { position: absolute; width: min(1180px, 95vw); aspect-ratio: 3 / 2; top: -5%; right: -8%; opacity: var(--beat-light, 1); }
.nebula-drift { display: block; width: 100%; opacity: .8; animation: nebula-drift 28s ease-in-out infinite alternate; animation-play-state: paused; }
.nebula-drift img { width: 100%; height: auto; mix-blend-mode: screen; }
.space-scene .nebula-shift { mask-image: radial-gradient(ellipse at center, black 30%, transparent 73%); }
/* Edge atmosphere shares the existing field; no new image or ambient loop. */
.transit-scene { inset: -48px 0; }
.transit-scene .transit-plane { width: min(680px, 100%); top: 5%; right: -12%; aspect-ratio: 1.5; background: radial-gradient(ellipse, #638db333, #314c7314 38%, transparent 70%); }
.impact .transit-plane { top: -12%; right: 8%; width: min(580px, 100%); }
.work-section .transit-plane { top: 28%; right: -16%; background: url('../assets/cosmic-nebula-mobile.webp') center / cover; opacity: calc(.22 * var(--beat-light, 1)); --scene-angle: -12deg; transform: rotate(var(--scene-angle)); }
.toolkit .transit-plane { right: auto; left: -16%; top: 0; background: radial-gradient(ellipse, #7967a733, #35446c14 42%, transparent 70%); }
.experience .transit-plane { top: 12%; right: -8%; background: radial-gradient(ellipse, #b1977226, #4d587514 40%, transparent 70%); }
.hero-copy { padding-block: 16px; }
.hero-intro, .hero-credential { color: #bec9d9; }
.hero-copy:before { content: ''; position: absolute; inset: -40px -50px; z-index: -1; background: radial-gradient(ellipse, #080e1df0 25%, #080e1d99 55%, transparent 73%); pointer-events: none; }
.orbit-grid { opacity: .5; }
.orbit-map { perspective: var(--story-perspective); }
.orbit-lines { color: #d0dffa; }
.orbit-depth circle { stroke-opacity: .35; }
.orbit-note { background: #090f20e8; border-color: #5a6a865e; }
.orbit-center { background: radial-gradient(ellipse 27% 24% at center, #080e20ed, transparent); }
.orbit-ambient { transform-origin: 280px 280px; animation: orbit-ambient 90s linear infinite; animation-play-state: paused; }
.cosmic-spark { position: absolute; width: 3px; height: 3px; background: #f0ecdf; border-radius: 50%; opacity: .6; animation: star-twinkle 5.5s ease-in-out infinite; animation-play-state: paused; }
.cosmic-spark:after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: #ccdfff18; }
.spark-one { left: 57%; top: 17%; }
.spark-two { left: 89%; top: 72%; animation-delay: -2s; }
.spark-three { left: 27%; top: 84%; animation-delay: -4s; }
.operations .nebula-shift { width: min(950px, 84vw); right: auto; left: -22%; top: 2%; --scene-angle: 16deg; transform: rotate(var(--scene-angle)); }
.operations .nebula-drift { opacity: .55; }
.process-chapters, .section-heading, .experience-copy, .section-kicker, .metrics, .toolkit-grid { position: relative; }
.process-chapters article { background: linear-gradient(90deg, transparent, #080d1ad9 18%, #080d1ad9 90%, transparent); }
.contact .nebula-shift { top: -45%; right: -5%; width: min(1250px, 110vw); }
.contact .nebula-drift { opacity: .42; animation-duration: 56s; }
.contact .cosmic-spark { animation-duration: 9s; }
.contact:before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 85% 80%, #b99a6920, transparent 65%), linear-gradient(180deg, transparent, #080e2080), linear-gradient(90deg, #080e20ea, #142c4938); }
.case-study { background: #0b1321f5; }
.case-featured { background: linear-gradient(110deg, #142139f5, #0b1321f5); }
.toolkit-grid article { background: linear-gradient(180deg, #0a1020b8, #0a102050); padding: 30px 18px 18px; }
.focus-note { background: #0a1020bd; }
.experience-portrait { background: #0b1321ec; border-color: #435574; }
.experience-copy { background: radial-gradient(ellipse, #080e1de6 25%, transparent 74%); }
.section-heading h2, .section-kicker h2, .contact h2 { text-shadow: 0 2px 18px #060913; }
html[data-motion-running] .space-scene[data-in-view] .nebula-drift,
html[data-motion-running] .space-scene[data-in-view] .cosmic-spark,
html[data-motion-running] .hero[data-motion-active] .orbit-ambient { animation-play-state: running; }
@keyframes nebula-drift { from { transform: translate3d(-6px, -4px, 0) rotate(-.5deg); } to { transform: translate3d(8px, 7px, 0) rotate(.5deg); } }
@keyframes star-twinkle { 0%, 100% { opacity: .3; } 45% { opacity: .95; } 70% { opacity: .55; } }
@keyframes orbit-ambient { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .case-study { transition: translate .18s ease, border-color .18s ease; }
  .case-study:hover { translate: 0 -3px; border-color: #7b93b4; }
  .text-link { transition: color .2s ease, border-color .2s ease; }
  .text-link:hover { border-color: #d6b58f; }
}
@media (max-width: 800px) {
  .nebula-shift { width: 900px; max-width: 150vw; right: -35%; top: 5%; }
  .nebula-drift { animation-duration: 36s; }
  .operations .nebula-shift { width: 740px; max-width: 125vw; left: -32%; top: 15%; }
  .contact .nebula-shift { width: 900px; max-width: 150vw; right: -40%; top: 0; }
  .orbit-ambient { animation-duration: 110s; }
  .transit-scene .transit-plane { width: min(480px, 100%); max-width: 100%; }
  .work-section .transit-plane { right: -24%; top: 42%; opacity: calc(.2 * var(--beat-light, 1)); }
  .toolkit .transit-plane { left: -24%; top: 10%; }
  .contact .nebula-drift { animation-duration: 64s; }
}
@media (max-width: 600px) {
  .hero .nebula-shift { top: 40%; right: -15%; width: 660px; max-width: 145vw; }
  .hero .nebula-drift { opacity: .95; }
  .hero-copy:before { inset: -30px -25px; background: radial-gradient(ellipse, #080e1ded 20%, #080e1da6 50%, transparent 75%); }
  .hero-layout { gap: 12px; }
  .orbit-map { margin-top: 10px; }
  .orbit-center { background: radial-gradient(ellipse 33% 28% at center, #080e20ef, transparent); }
  .stars-far { background-size: 720px 600px; }
  .stars-mid, .stars-near { background-size: 800px 667px; }
  .process-chapters article { background: linear-gradient(90deg, #080e1dd9, #080e1d99); }
  .toolkit-grid article { padding-inline: 16px; }
  .contact .nebula-drift { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .nebula-drift, .cosmic-spark, .orbit-ambient { animation: none; }
}