/* A quiet orbital scene. Geometry is decorative; the core remains the focal point. */
.hero { background-image: radial-gradient(ellipse at 80% 45%, var(--wash), transparent 52%); }
.core-visual { perspective: 1000px; }
.core-visual picture {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Mask the composited picture too, so its transformed rectangular layer
     cannot leave a faint screen-blended box around the masked image. */
  mix-blend-mode: normal;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 58%, transparent 94%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 58%, transparent 94%);
  transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 20px)
    rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg));
  transition: transform 1100ms var(--ease-out);
}
.core-visual img {
  display: block;
  opacity: .76;
  mix-blend-mode: normal;
  /* Reach full transparency at every edge, including non-square layouts. */
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 55%, rgb(0 0 0 / .85) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 55%, rgb(0 0 0 / .85) 72%, transparent 100%);
}
.orbital-field {
  position: absolute;
  inset: 4% -4%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(var(--orbit-x, 0px), var(--orbit-y, 0px), 0) rotateX(55deg) rotateZ(-28deg);
  transition: transform 1500ms var(--ease-out);
}
.orbit { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; }
.orbit-outer { border-color: color-mix(in srgb, var(--lime) 16%, transparent); animation: orbital-turn 42s linear infinite; }
.orbit-inner { inset: 10%; border-style: dashed; border-color: color-mix(in srgb, var(--lime) 11%, transparent); animation: orbital-turn 58s linear infinite reverse; }
.orbit-track { inset: -9%; border-color: color-mix(in srgb, var(--text) 5%, transparent); }
.orbit > i { position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--quiet-lime); opacity: .65; }
.orbit-inner > i { width: 4px; height: 4px; top: -2px; }
.satellite { position: absolute; z-index: 3; pointer-events: none; animation: satellite-drift 9s ease-in-out infinite; }
.satellite i { display: block; width: 7px; height: 7px; border: 1px solid var(--edge-light); border-radius: 50%; }
.satellite-one { top: 22%; right: 12%; }
.satellite-two { top: 60%; left: 11%; animation-delay: -4s; animation-duration: 12s; }
.satellite-two i { width: 8px; height: 8px; border-radius: 50%; }
.coordinate-top::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--edge-light); vertical-align: middle; margin-right: 10px; }
.motion-toggle {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  cursor: pointer;
}
.motion-toggle:hover { color: var(--text); }
.motion-symbol { width: 12px; font-size: .875rem; }
.motion-toggle:disabled { opacity: .5; cursor: default; }
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 20;
  pointer-events: none;
  background: var(--quiet-lime);
  opacity: .5;
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
}
/* Small moving edge details echo the orbital geometry across the page. */
.work-card { overflow: hidden; }
.work-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge-light), transparent);
  pointer-events: none;
  animation: edge-travel 9s ease-in-out infinite;
}
.work-card:nth-child(2)::after { animation-delay: -3s; }
.work-card:nth-child(3)::after { animation-delay: -6s; }
.studio-label { position: relative; }
.studio-label::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  left: -15px;
  top: 54px;
  z-index: -1;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: rotateX(55deg) rotateZ(-20deg);
  pointer-events: none;
}
@keyframes orbital-turn { to { transform: rotate(360deg); } }
@keyframes satellite-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  50% { transform: translate3d(5px, -15px, 0) rotate(8deg); }
}
@keyframes edge-travel {
  0% { transform: translateX(0); opacity: 0; }
  15%, 70% { opacity: .7; }
  100% { transform: translateX(500%); opacity: 0; }
}
.orbit, .satellite, .work-card::after { animation-play-state: paused; }
.hero.ambient-active .orbit, .hero.ambient-active .satellite,
.work.ambient-active .work-card::after { animation-play-state: running; }
html.page-hidden .orbit, html.page-hidden .satellite,
html.page-hidden .work-card::after { animation-play-state: paused; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; }
html.motion-paused .hero-line, html.motion-paused .hero-copy > p,
html.motion-paused .hero-copy > a, html.motion-paused .header .brand-mark i {
  animation: none;
  opacity: 1;
  transform: none;
}
html.motion-paused { scroll-behavior: auto; }
html.motion-paused .reveal { opacity: 1; transform: none; transition: none; }
html.motion-paused .service, html.motion-paused .work-card { --lift: 0px; }
html.motion-paused .core-visual picture, html.motion-paused .orbital-field,
html.motion-paused .button.primary::before, html.motion-paused .core-glow { transition: none; }
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .orbit, .satellite, .work-card::after { animation: none; }
  .motion-toggle { display: none; }
}
@media (max-width: 700px) {
  .orbital-field { inset: 10% 3%; opacity: .65; }
  .satellite-one { right: 16%; }
  .studio-label::after { width: 75px; height: 75px; left: auto; right: -5px; top: -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit, .satellite, .work-card::after { animation: none; }
  .core-visual picture { transform: none; transition: none; }
  .reading-progress { display: none; }
}