/* Product scenes: slow independent drift, small opposite hover movements. */
.gallery-stage {
  --scene-spread: 0px;
  height: 590px;
  overflow: visible;
  perspective: 1200px;
}
.gallery-stage::before {
  inset: 4% -15% 0 -10%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brand) 13%, transparent), transparent 66%);
}
.orbit-one { width: 106%; height: 68%; left: -8%; top: 16%; }
.orbit-two { width: 97%; height: 60%; left: -4%; top: 20%; }
.hero-desktop {
  position: absolute;
  width: 101%;
  left: -28px;
  top: 105px;
  z-index: 1;
  border: 5px solid #252c36;
  border-radius: 16px;
  background: var(--surface);
  overflow: clip;
  box-shadow: 0 32px 65px #0000002b, 0 5px 15px #00000016;
  transform: rotate(-9deg) translateX(calc(var(--scene-spread) * -1));
  transition: transform 1.8s cubic-bezier(.2,.65,.3,1), box-shadow 1.8s ease;
}
.hero-desktop img {
  width: 100%;
  height: auto;
  aspect-ratio: 1360 / 850;
}
.mini-window-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 23px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 7px;
  line-height: 1.4;
  color: var(--subtle);
}
.mini-window-bar > span:first-child { display: flex; gap: 3px; }
.mini-window-bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
}
.mini-window-bar .icon { width: 10px; height: 10px; opacity: .5; }
.hero-phone-front {
  width: 239px;
  right: -4px;
  top: 62px;
  transform: rotate(9deg) translateX(var(--scene-spread));
  transition: transform 1.8s cubic-bezier(.2,.65,.3,1);
}
.gallery-stage .floating-note { bottom: 35px; left: 8px; }
.gallery-stage .visual-label { right: 0; top: 14px; }
.feature-media { --scene-spread: 0px; --scene-tilt: 0deg; }
.feature-phone {
  transform: translateX(-50%) rotate(calc(-8deg - var(--scene-tilt))) translateX(calc(var(--scene-spread) * -1));
  transition: transform 1.35s cubic-bezier(.2,.65,.3,1);
}
.notes-media .feature-phone {
  transform: translateX(-50%) rotate(calc(9deg + var(--scene-tilt))) translateX(var(--scene-spread));
}
.media-callout {
  transform: rotate(calc(3deg + var(--scene-tilt))) translateX(var(--scene-spread));
  transition: transform 1.35s cubic-bezier(.2,.65,.3,1);
}
.small-note {
  transform: rotate(calc(-7deg - var(--scene-tilt))) translateX(calc(var(--scene-spread) * -1));
  transition: transform 1.35s cubic-bezier(.2,.65,.3,1);
}
.showcase-float { perspective: 1600px; padding-block: 8px; }
.showcase-float .app-window {
  transform: rotateX(0) rotateY(0) rotateZ(0);
  transform-origin: center;
  transition: transform 1.35s cubic-bezier(.2,.65,.3,1), box-shadow 1.35s ease;
  box-shadow: 0 24px 58px #00000020;
}
@keyframes scene-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@keyframes scene-counter-drift {
  0%, 100% { translate: 0 -7px; }
  50% { translate: 0 5px; }
}
.hero-desktop, .feature-phone {
  animation: scene-drift 8s ease-in-out infinite;
}
.hero-phone-front {
  animation: scene-counter-drift 9s ease-in-out infinite;
}
.floating-note, .media-callout, .small-note {
  animation: scene-counter-drift 8.5s ease-in-out infinite;
}
.showcase-float .app-window {
  animation: scene-drift 10s ease-in-out infinite;
}
[data-floating] .hero-desktop,
[data-floating] .hero-phone-front,
[data-floating] .feature-phone,
[data-floating] .floating-note,
[data-floating] .media-callout,
[data-floating] .small-note,
[data-floating] .app-window { animation-play-state: paused; }
[data-floating-active] .hero-desktop,
[data-floating-active] .hero-phone-front,
[data-floating-active] .feature-phone,
[data-floating-active] .floating-note,
[data-floating-active] .media-callout,
[data-floating-active] .small-note,
[data-floating-active] .app-window { animation-play-state: running; }

@media (hover:hover) and (pointer:fine) {
  .gallery-stage:hover { --scene-spread: 22px; }
  .feature-media:hover { --scene-spread: 16px; --scene-tilt: 1.2deg; }
  .showcase-float:hover .app-window {
    transform: translateY(-4px) rotateX(1.6deg) rotateY(-2.6deg) rotateZ(-.65deg);
    box-shadow: 12px 34px 72px #0000002b;
  }
}
@media (hover:hover) and (pointer:fine) and (max-width:1150px) {
  .gallery-stage:hover { --scene-spread: 14px; }
}
@media (hover:hover) and (pointer:fine) and (max-width:700px) {
  .gallery-stage:hover { --scene-spread: 12px; }
  .feature-media:hover { --scene-spread: 12px; --scene-tilt: 1deg; }
  .showcase-float:hover .app-window {
    transform: translateY(-3px) rotateX(1.2deg) rotateY(-1.8deg) rotateZ(-.5deg);
  }
}
details[data-closing] > summary .summary-plus::after { transform: rotate(90deg); }
[data-theme=light] #gallery-desktop-image[src*='/dark/'],
[data-theme=dark] #gallery-desktop-image[src*='/light/'] { visibility: hidden; }

@media (max-width:1150px) {
  .gallery-stage { height: 545px; }
  .hero-desktop { width: 98%; left: 6px; top: 118px; }
  .hero-phone-front { width: 218px; right: -1px; top: 55px; }
  .gallery-stage .floating-note { bottom: 25px; left: 0; }
}
@media (min-width:701px) and (max-width:900px) {
  .gallery-stage { height: 505px; }
  .hero-desktop { width: 101%; left: 4px; top: 125px; border-width: 4px; border-radius: 12px; }
  .hero-phone-front { width: 187px; right: -2px; top: 70px; }
  .mini-window-bar { min-height: 19px; padding: 4px 7px; font-size: 5px; }
  .mini-window-bar .icon { width: 8px; height: 8px; }
}
@media (max-width:700px) {
  .gallery-stage { height: 455px; }
  .hero-desktop { width: 96%; left: -6px; top: 105px; border-width: 4px; border-radius: 12px; }
  .hero-phone-front { width: 194px; right: 3px; top: 25px; }
  .gallery-stage .floating-note { bottom: 9px; left: 3px; }
  .gallery-stage .visual-label { right: 7px; top: 0; }
  .mini-window-bar { min-height: 19px; padding: 4px 7px; font-size: 5px; }
  .mini-window-bar .icon { width: 8px; height: 8px; }
  .orbit-one { width: 105%; left: -4%; height: 69%; }
  .orbit-two { width: 97%; left: 0; height: 61%; }
  @keyframes scene-drift {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
  }
}
@media (max-width:375px) {
  .gallery-stage { height: 405px; }
  .hero-desktop { width: 99%; left: -4px; top: 100px; border-width: 3px; }
  .hero-phone-front { width: 170px; right: 1px; top: 27px; border-width: 6px; border-radius: 28px; }
  .gallery-stage .floating-note { bottom: 6px; left: 0; }
}
@media (prefers-reduced-motion:reduce) {
  [data-floating] * { animation: none !important; transition: none !important; }
  .gallery-stage, .feature-media { --scene-spread: 0px !important; --scene-tilt: 0deg !important; }
  .showcase-float:hover .app-window { transform: none; }
}