/* Four related palettes. The first face retains the original electric blue. */
.home-page {
  --scene-accent-rgb: 117, 217, 255;
  --scene-glow-rgb: 8, 133, 228;
}
.cube-face {
  --face-accent-rgb: 117, 217, 255;
  --face-glow-rgb: 8, 133, 228;
  --face-top: #0c1d34ed;
  --face-base: #061120f5;
  --face-bottom: #0a2038f2;
  --face-button: #086ac1;
  --face-button-hover: #0b82dc;
  --art-hue: 0deg;
  border-color: rgba(var(--face-accent-rgb), .44);
  background: linear-gradient(145deg, var(--face-top), var(--face-base) 58%, var(--face-bottom));
  box-shadow: inset 0 0 60px rgba(var(--face-glow-rgb), .055),
    0 0 30px rgba(var(--face-glow-rgb), .15), 0 0 100px rgba(var(--face-glow-rgb), .055);
}
.face-projects {
  --face-accent-rgb: 155, 179, 255;
  --face-glow-rgb: 77, 100, 239;
  --face-top: #141d41ed;
  --face-base: #0a1027f5;
  --face-bottom: #14244bf2;
  --face-button: #3e4fac;
  --face-button-hover: #4d60cc;
  --art-hue: 23deg;
}
.face-trust {
  --face-accent-rgb: 210, 175, 255;
  --face-glow-rgb: 149, 77, 223;
  --face-top: #25183fed;
  --face-base: #110c22f5;
  --face-bottom: #291c46f2;
  --face-button: #6840a8;
  --face-button-hover: #7c4fbe;
  --art-hue: 58deg;
}
.face-contact {
  --face-accent-rgb: 170, 192, 255;
  --face-glow-rgb: 100, 117, 239;
  --face-top: #191d3eed;
  --face-base: #0c1025f5;
  --face-bottom: #1b2449f2;
  --face-button: #4c55a7;
  --face-button-hover: #626bc2;
  --art-hue: 36deg;
}
.cube-face::after { border-color: rgba(var(--face-accent-rgb), .07); }
.face-content::before { background: radial-gradient(ellipse at 50% 0, rgba(var(--face-glow-rgb), .11), transparent 62%); }
.face-content h1 span, .face-content h2 span { color: rgb(var(--face-accent-rgb)); }
.face-corner { color: rgb(var(--face-accent-rgb)); }
.face-index { color: rgba(var(--face-accent-rgb), .65); }
.face-index span { color: rgba(var(--face-accent-rgb), .35); }
.face-illustration { filter: hue-rotate(var(--art-hue)) drop-shadow(0 0 20px rgba(var(--face-glow-rgb), .12)); }
.face-content .button { background: var(--face-button); border-color: rgba(var(--face-accent-rgb), .48); }
.face-content .button:hover {
  background: var(--face-button-hover);
  border-color: rgb(var(--face-accent-rgb));
  box-shadow: 0 5px 30px rgba(var(--face-glow-rgb), .25);
}
.cube-ready .face-content { scrollbar-color: rgba(var(--face-accent-rgb), .3) transparent; }
.client-mark { background: rgba(var(--face-glow-rgb), .065); border-color: rgba(var(--face-accent-rgb), .14); }
.contact-tile { background: #141b36c9; border-color: rgba(var(--face-accent-rgb), .25); }
.contact-tile .contact-phone, .contact-tile .eyebrow { color: rgb(var(--face-accent-rgb)); }

/* Outside light and the controls interpolate in the same frame as the rotation. */
.cube-ready .cube-shadow { background: radial-gradient(ellipse, rgba(var(--scene-glow-rgb), .23), transparent 66%); }
.home-page .header-contact > span, .home-page .header-contact:hover,
.home-page .primary-nav > a:hover { color: rgb(var(--scene-accent-rgb)); }
.scene-nav button[aria-current="true"] { color: rgb(var(--scene-accent-rgb)); }
.scene-nav button[aria-current="true"]::after {
  background: rgb(var(--scene-accent-rgb));
  box-shadow: 0 0 14px rgba(var(--scene-glow-rgb), .45);
  transition: height .2s;
}
.cube-actions > button { border-color: rgba(var(--scene-accent-rgb), .28); color: rgb(var(--scene-accent-rgb)); }
.cube-actions > button:hover { background: rgba(var(--scene-glow-rgb), .2); border-color: rgb(var(--scene-accent-rgb)); }
.scroll-cue { color: rgba(var(--scene-accent-rgb), .5); }
.scroll-cue svg { stroke: rgba(var(--scene-accent-rgb), .8); }

/* Only the two currently blending atmospheres are visible and animated. */
.space-background { background: #02050c; }
.space-background::before { content: none; }
.scene-atmosphere { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; }
.scene-atmosphere.is-visible { visibility: visible; }
.atmosphere-vision { opacity: 1; background: radial-gradient(ellipse at 50% 45%, #102b59 0%, #071124 38%, #02050c 76%); }
.atmosphere-vision::before { content: ""; position: absolute; inset: 6% 9% 8%; background: radial-gradient(ellipse, #0c6caa21, transparent 65%); }

/* 02 — moving packets along precise, angular signal routes. */
.atmosphere-systems { background: radial-gradient(ellipse at 50% 48%, #1d3066 0%, #0c1433 39%, #030611 78%); }
.systems-glow {
  position: absolute; inset: 15% -15%;
  background: radial-gradient(ellipse at 18% 58%, #486beb24, transparent 32%), radial-gradient(ellipse at 83% 36%, #6b4ee52b, transparent 30%);
  animation: systems-breathe 12s ease-in-out infinite alternate;
}
.systems-plane {
  position: absolute; inset: -35%; transform: rotate(-32deg);
  background: repeating-linear-gradient(90deg, transparent 0 119px, #879eff0c 119px 120px);
  mask-image: radial-gradient(ellipse, transparent 24%, #0007 48%, transparent 73%);
}
.signal-routes, .orbital-field, .contact-waves { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.route-lines { stroke: #8495fb; stroke-opacity: .16; stroke-width: 1; }
.route-signals path {
  stroke: #b4c5ff; stroke-width: 1.5; stroke-opacity: .72; stroke-linecap: round;
  stroke-dasharray: 45 900; animation: signal-travel var(--duration, 9s) linear var(--delay, 0s) infinite;
}
.signal-beacon {
  position: absolute; width: 5px; height: 5px; border: 1px solid #adbcff; border-radius: 50%;
  box-shadow: 0 0 24px 6px #728aff35; animation: beacon-pulse 4s ease-in-out infinite;
}
.beacon-left { left: 11%; top: 39%; }
.beacon-right { right: 12%; top: 69%; animation-delay: -2s; }
@keyframes signal-travel { from { stroke-dashoffset: 945; } to { stroke-dashoffset: 0; } }
@keyframes systems-breathe { to { transform: translate3d(2%, -3%, 0) scale(1.08); opacity: .55; } }
@keyframes beacon-pulse { 0%, 100% { opacity: .22; transform: scale(.7); } 50% { opacity: .85; transform: scale(1.4); } }

/* 03 — violet orbital paths and a sparse, gently twinkling constellation. */
.atmosphere-trust { background: radial-gradient(ellipse at 50% 44%, #342053 0%, #170e2c 40%, #06050f 79%); }
.orbital-nebula {
  position: absolute; inset: -10%;
  background: radial-gradient(ellipse at 22% 40%, #9555c529, transparent 28%), radial-gradient(ellipse at 79% 68%, #5344c42c, transparent 28%);
  animation: nebula-orbit 20s ease-in-out infinite alternate;
}
.orbit > ellipse { stroke: #c49af0; stroke-width: 1; stroke-opacity: .15; }
.orbit > .orbit-signal {
  stroke: #dfc4ff; stroke-width: 1.7; stroke-opacity: .7; stroke-linecap: round;
  stroke-dasharray: 3 97; animation: orbit-travel 23s linear infinite;
}
.orbit-two > .orbit-signal { animation-duration: 29s; animation-direction: reverse; animation-delay: -9.57s; stroke: #a6a8ff; }
.orbit-three > .orbit-signal { animation-duration: 37s; animation-delay: -13s; opacity: .5; }
.orbit-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; left: var(--x); top: var(--y);
  background: #ddc4ff; box-shadow: 0 0 12px 2px #bc88ff45; opacity: .3;
  animation: star-breathe var(--duration, 7s) ease-in-out var(--delay, 0s) infinite alternate;
}
.orbit-star:nth-child(3n) { width: 3px; height: 3px; }
@keyframes orbit-travel { to { stroke-dashoffset: -100; } }
@keyframes nebula-orbit { to { transform: rotate(12deg) scale(1.08); opacity: .5; } }
@keyframes star-breathe { from { opacity: .12; transform: scale(.75); } to { opacity: .65; transform: scale(1.25); } }

/* 04 — soft periwinkle light curtains, wave traces and vertical signals. */
.atmosphere-contact { background: radial-gradient(ellipse at 50% 48%, #252c57 0%, #11162f 40%, #040711 80%); }
.aurora {
  position: absolute; top: -35%; height: 170%; width: 45%; border-radius: 50%;
  background: radial-gradient(ellipse, #8e8bfa18 0%, #536dba0c 35%, transparent 67%);
  transform: rotate(24deg); animation: aurora-drift 18s ease-in-out infinite alternate;
}
.aurora-one { left: -12%; }
.aurora-two { right: -12%; transform: rotate(-24deg); animation-name: aurora-return; animation-delay: -9s; }
.contact-dotfield {
  position: absolute; inset: 0; background: radial-gradient(circle, #a7b2ff36 .7px, transparent 1.2px) 0 0 / 36px 36px;
  mask-image: radial-gradient(ellipse, transparent 35%, #0008 72%, transparent 98%);
}
.contact-waves path {
  stroke: #9ca9f3; stroke-opacity: .14; stroke-width: 1;
  stroke-dasharray: 220 900; animation: wave-travel 18s linear var(--delay, 0s) infinite;
}
.contact-beam {
  position: absolute; top: 100%; width: 1px; height: 180px;
  background: linear-gradient(transparent, #bacaffaa, transparent); opacity: 0;
  box-shadow: 0 0 14px #939fff44; animation: contact-signal 12s ease-in-out infinite;
}
.beam-one { left: 14%; }
.beam-two { right: 14%; animation-delay: -6s; animation-duration: 15s; }
@keyframes aurora-drift { to { transform: translate3d(14%, 3%, 0) rotate(15deg) scaleX(1.15); opacity: .45; } }
@keyframes aurora-return { to { transform: translate3d(-14%, -3%, 0) rotate(-15deg) scaleX(1.15); opacity: .45; } }
@keyframes wave-travel { to { stroke-dashoffset: -1120; } }
@keyframes contact-signal { 0% { transform: translateY(0); opacity: 0; } 18%, 65% { opacity: .6; } 100% { transform: translateY(-125vh); opacity: 0; } }

/* Pause, hidden tab and reduced motion apply to every scene, including SVG. */
.space-background *::before, .space-background *::after { animation-play-state: paused; }
.cube-ready .space-background *::before, .cube-ready .space-background *::after { animation-play-state: running; }
.cube-ready .scene-atmosphere:not(.is-visible),
.cube-ready .scene-atmosphere:not(.is-visible) * { animation-play-state: paused; }
.home-page:not(.cube-ready) .space-background *,
.home-page:not(.cube-ready) .space-background *::before,
.home-page:not(.cube-ready) .space-background *::after { animation-play-state: paused; }
.motion-paused .space-background *, .motion-paused .space-background *::before, .motion-paused .space-background *::after,
.page-hidden .space-background *, .page-hidden .space-background *::before, .page-hidden .space-background *::after { animation-play-state: paused !important; }
@media (max-width: 620px) {
  .signal-routes, .orbital-field, .contact-waves { width: 150%; left: -25%; }
  .signal-beacon.beacon-left, .beam-one { left: 4%; }
  .signal-beacon.beacon-right, .beam-two { right: 4%; }
  .contact-dotfield { background-size: 27px 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .space-background *, .space-background *::before, .space-background *::after { animation: none !important; }
}