/* Studio backdrop for the BM prototype. Logo geometry stays in logo-shapes.json. */
:root {
  --studio-paper: #f7faff;
  --studio-blue: #eaf3ff;
  --studio-lilac: #eee8fa;
  --ink: #242038;
  --accent: #734ac5;
}
.hero {
  isolation: isolate;
  --light-x: 0px;
  --light-y: 0px;
  --shadow-x: 0px;
  --shadow-y: 0px;
  --shadow-scale: 1;
  background: var(--studio-paper);
}
.studio-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(112deg, #fcfdff 8%, #f8fbff 35%, var(--studio-blue) 70%, var(--studio-lilac));
}
.studio-parallax {
  position: absolute;
  inset: -6%;
  transform: translate3d(var(--light-x), var(--light-y), 0);
  will-change: transform;
}
.studio-drift {
  position: absolute;
  inset: -12% -12% -5% 32%;
  background:
    radial-gradient(ellipse at 80% 22%, #b3a0ef75 0%, #d5c5f645 27%, transparent 59%),
    radial-gradient(ellipse at 45% 50%, #96d3ff85 0%, #bfdfff55 35%, transparent 69%);
  animation: studio-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.studio-light {
  position: absolute;
  inset: -16% -14% -10% 40%;
  background: radial-gradient(ellipse at 56% 42%, #ffffffec 0%, #ffffffa0 20%, #ffffff30 42%, transparent 66%);
  transform: rotate(-14deg);
  animation: studio-light 19s ease-in-out infinite alternate;
  will-change: transform;
}
.studio-floor {
  position: absolute;
  width: 150%;
  height: 62%;
  left: 2%;
  bottom: -34%;
  border-radius: 50% 50% 0 0 / 32% 32% 0 0;
  border-top: 1px solid #ffffffce;
  background: linear-gradient(180deg, #e6edfc85, #f8fbff 37%, #ffffff 72%);
  box-shadow: 0 -24px 80px #ffffff90;
}
.studio-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fcfdfff5 0%, #fcfdffe0 19%, #fcfdff75 38%, transparent 58%),
              linear-gradient(0deg, white, #ffffff00 15%);
}
#view::after {
  width: 61%;
  height: 8%;
  left: 20%;
  bottom: 6%;
  background: radial-gradient(ellipse, #62599d4d 0%, #9694c322 42%, transparent 72%);
  filter: blur(13px);
  transform: translate3d(var(--shadow-x), var(--shadow-y), 0) scaleX(var(--shadow-scale));
  will-change: transform;
}
.foot { align-items: center; color: #675c7d; }
.foot-copy { display: flex; flex-direction: column; gap: 6px; }
.foot-copy span:last-child { font-size: 9px; color: #756b87; letter-spacing: .03em; }
#background { background: #ffffffb5; font-size: 11px; min-height: 40px; padding: 10px 16px; }
#background[aria-pressed=true] { background: #7551b8; color: white; }
.hero[data-motion=paused] .studio-drift,
.hero[data-motion=paused] .studio-light { animation-play-state: paused; }
.hero[data-background=original] {
  background: radial-gradient(ellipse at 90% 20%,#e2cffa90,transparent 55%),linear-gradient(140deg,#f9fbff,#e8f2ff 60%,#f4ecfb);
}
.hero[data-background=original] .studio-background { visibility: hidden; }
.hero[data-background=original] #view::after {
  background: #6960a532;
  filter: blur(22px);
  transform: none;
}
@keyframes studio-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 3%, 0) scale(1.09); }
}
@keyframes studio-light {
  from { transform: translate3d(2%, -2%, 0) rotate(-14deg); }
  to { transform: translate3d(-5%, 4%, 0) rotate(-8deg); }
}
@media (max-width: 650px) {
  .studio-drift { inset: 21% -36% -8% 6%; }
  .studio-light { inset: 20% -35% -10% 0; }
  .studio-floor { left: -50%; width: 220%; height: 38%; bottom: -17%; }
  .studio-background::after {
    background: linear-gradient(180deg, #fcfdfff5 0%, #fcfdfff0 28%, #fcfdff80 45%, transparent 65%),
                linear-gradient(0deg, white, #ffffff00 13%);
  }
  .foot { bottom: 16px; gap: 12px; }
  .foot-copy { gap: 4px; }
  .foot-copy span:last-child { font-size: 8px; }
  #background { flex-shrink: 0; font-size: 9px; padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-drift, .studio-light { animation: none; }
  .studio-parallax { transform: none; }
}