/* The interactive artwork is scoped independently of gallery components. */
#hero-scene {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

#hero-scene::before {
  position: absolute;
  z-index: -1;
  inset: 8% -6%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(9, 133, 169, 0.1),
    rgba(2, 5, 12, 0) 65%
  );
  content: "";
  pointer-events: none;
}

#studio-canvas {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 750ms ease;
}

.scene-ready #studio-canvas {
  opacity: 1;
}
.scene-dragging #studio-canvas {
  cursor: grabbing;
}
#studio-canvas:focus-visible {
  outline: 1px solid rgba(46, 230, 255, 0.7);
  outline-offset: -12px;
  border-radius: 20px;
}
#studio-canvas[hidden] {
  display: none;
}

#hero-scene .scene-fallback {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  perspective: 650px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms ease;
}

#hero-scene.scene-ready .scene-fallback {
  opacity: 0;
}
#hero-scene .scene-fallback i {
  position: absolute;
  display: block;
  width: 63%;
  height: 63%;
  top: 16%;
  left: 16%;
  border: clamp(14px, 3vw, 33px) solid transparent;
  border-radius: 48%;
  background:
    linear-gradient(#020a13, #030d18) padding-box,
    conic-gradient(
        from 40deg,
        #9abbbf,
        #074963 10%,
        #02151f 30%,
        #97f5ff 46%,
        #f0ffff 49%,
        #085e71 58%,
        #031922 76%,
        #b5ffad 90%,
        #acdce2
      )
      border-box;
  box-shadow:
    inset 5px 5px 12px #0008,
    10px 8px 24px #0008;
  transform: rotateY(38deg) rotateZ(0deg) translateX(-22%);
}
#hero-scene .scene-fallback i:nth-child(2) {
  transform: rotateY(38deg) rotateZ(120deg) translateX(-22%);
}
#hero-scene .scene-fallback i:nth-child(3) {
  transform: rotateY(38deg) rotateZ(240deg) translateX(-22%);
}
#hero-scene .scene-fallback b {
  position: absolute;
  inset: -4%;
  border: 1px solid #5d9cab55;
  border-radius: 50%;
  transform: rotateX(67deg) rotateY(-18deg);
}

#scene-motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#scene-motion svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
#scene-motion:disabled,
[data-scene-mode]:disabled {
  cursor: default;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  #studio-canvas,
  #hero-scene .scene-fallback {
    transition: none;
  }
}