.scene {
  position: absolute;
  top: clamp(90px, 20%, 185px);
  left: 8%;
  z-index: 1;
  width: 84%;
  max-width: 600px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .38s ease, transform .38s ease;
  pointer-events: none;
}

.scene svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.panel:is(:hover, :focus-visible) .scene {
  opacity: 1;
  transform: translateY(0);
}

.scene-industry .torch {
  transform: translateY(-10px);
}

.scene-industry .weld-assembly,
.scene-industry .piece-left,
.scene-industry .piece-right {
  transform-box: view-box;
}

.scene-industry .sparks,
.scene-industry .seam,
.scene-industry .weld-glow {
  opacity: 0;
}

.industry:is(:hover, :focus-visible) .weld-assembly {
  animation: assembly-flow 6.4s linear infinite;
}

.industry:is(:hover, :focus-visible) .piece-left {
  animation: left-piece-join 6.4s linear infinite;
}

.industry:is(:hover, :focus-visible) .piece-right {
  animation: right-piece-join 6.4s linear infinite;
}

.industry:is(:hover, :focus-visible) .torch {
  animation: torch-dip 6.4s ease-in-out infinite;
}

.industry:is(:hover, :focus-visible) .sparks,
.industry:is(:hover, :focus-visible) .weld-glow {
  animation: welding-sparks 6.4s ease-in-out infinite;
}

.industry:is(:hover, :focus-visible) .seam {
  animation: welding-seam 6.4s ease-in-out infinite;
}

.scene-urban .tree {
  transform-origin: center bottom;
  transform-box: fill-box;
}

.urban:is(:hover, :focus-visible) .tree-one {
  animation: tree-sway 4.5s ease-in-out infinite;
}

.urban:is(:hover, :focus-visible) .tree-two {
  animation: tree-sway 5s .35s ease-in-out infinite reverse;
}

.urban:is(:hover, :focus-visible) .bicycle {
  animation: bicycle-ride 7.2s cubic-bezier(.35, 0, .2, 1) infinite;
}

.scene-urban .wheel {
  transform-origin: center;
  transform-box: fill-box;
}

.urban:is(:hover, :focus-visible) .wheel {
  animation: wheel-spin 2s linear infinite;
}

.scene-urban .rack-light {
  opacity: 0;
}

.urban:is(:hover, :focus-visible) .rack-light {
  animation: rack-arrival 7.2s ease-in-out infinite;
}

.scene-urban .swing-rider {
  transform-origin: 50% 0;
  transform-box: fill-box;
}

.urban:is(:hover, :focus-visible) .swing-rider {
  animation: swing-rock 3.2s ease-in-out infinite;
}

@keyframes assembly-flow {
  0%, 66% { transform: translateX(0); opacity: 1; }
  78% { transform: translateX(580px); opacity: 1; }
  79% { transform: translateX(580px); opacity: 0; }
  80% { transform: translateX(-580px); opacity: 0; }
  82% { transform: translateX(-580px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes left-piece-join {
  0%, 25% { transform: translateX(0); }
  33%, 79% { transform: translateX(12px); }
  80%, 100% { transform: translateX(0); }
}

@keyframes right-piece-join {
  0%, 25% { transform: translateX(0); }
  33%, 79% { transform: translateX(-12px); }
  80%, 100% { transform: translateX(0); }
}

@keyframes torch-dip {
  0%, 27%, 68%, 100% { transform: translateY(-10px); }
  35%, 59% { transform: translateY(0); }
}

@keyframes welding-sparks {
  0%, 34%, 65%, 100% { opacity: 0; }
  38%, 45%, 51%, 57%, 62% { opacity: 1; }
  42%, 48%, 54%, 59% { opacity: .38; }
}

@keyframes welding-seam {
  0%, 34% { opacity: 0; stroke-dashoffset: 33; }
  45%, 62% { opacity: 1; stroke-dashoffset: 0; }
  70%, 79% { opacity: .52; stroke-dashoffset: 0; }
  80%, 100% { opacity: 0; stroke-dashoffset: 33; }
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

@keyframes bicycle-ride {
  0% { opacity: 0; transform: translateX(-48px); }
  9% { opacity: 1; }
  70%, 88% { opacity: 1; transform: translateX(150px); }
  100% { opacity: 0; transform: translateX(150px); }
}

@keyframes wheel-spin {
  to { transform: rotate(360deg); }
}

@keyframes rack-arrival {
  0%, 69%, 100% { opacity: 0; }
  74%, 87% { opacity: 1; }
}

@keyframes swing-rock {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}

@media (max-width: 800px) {
  .panel {
    min-height: clamp(540px, 72svh, 660px);
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
  }

  .panel .scene {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 600px;
    flex: none;
    margin: 0 auto 20px;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .panel .panel-content { flex: none; }

  .industry.mobile-active .weld-assembly { animation: assembly-flow 6.4s linear infinite; }
  .industry.mobile-active .piece-left { animation: left-piece-join 6.4s linear infinite; }
  .industry.mobile-active .piece-right { animation: right-piece-join 6.4s linear infinite; }
  .industry.mobile-active .torch { animation: torch-dip 6.4s ease-in-out infinite; }
  .industry.mobile-active .sparks,
  .industry.mobile-active .weld-glow { animation: welding-sparks 6.4s ease-in-out infinite; }
  .industry.mobile-active .seam { animation: welding-seam 6.4s ease-in-out infinite; }

  .urban.mobile-active .tree-one { animation: tree-sway 4.5s ease-in-out infinite; }
  .urban.mobile-active .tree-two { animation: tree-sway 5s .35s ease-in-out infinite reverse; }
  .urban.mobile-active .bicycle { animation: bicycle-ride 7.2s cubic-bezier(.35, 0, .2, 1) infinite; }
  .urban.mobile-active .wheel { animation: wheel-spin 2s linear infinite; }
  .urban.mobile-active .rack-light { animation: rack-arrival 7.2s ease-in-out infinite; }
  .urban.mobile-active .swing-rider { animation: swing-rock 3.2s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene * { animation: none !important; transition: none !important; }
  .scene-industry .piece-left { transform: translateX(12px); }
  .scene-industry .piece-right { transform: translateX(-12px); }
  .scene-industry .torch { transform: translateY(-10px); }
  .scene-industry .seam { opacity: .52; stroke-dashoffset: 0; }
  .scene-urban .rack-light { opacity: 1; }
  .panel:is(:hover, :focus-visible) .scene-urban .rack-light { opacity: 1; }
}