/* One decorative layer; all content keeps its original native scroll flow. */
.hero-sequence { position: relative; }
.logo-transition-slot { height: 0; }
.logo-motion-ready .logo-transition-slot { height: clamp(280px, 38svh, 340px); }
.logo-transition { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.logo-motion-ready .logo-transition { display: block; }
.logo-frame {
  --logo-size: min(78vw, 660px, 72svh);
  position: fixed; top: calc(50svh - var(--logo-size) / 2);
  left: calc(50% - var(--logo-size) / 2);
  width: var(--logo-size); height: var(--logo-size);
  perspective: 1200px; opacity: .12;
}
.logo-face { width: 100%; height: 100%; transform: rotateY(180deg); transform-style: preserve-3d; }
.logo-face svg, .logo-sparks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo-sparks { pointer-events: none; }
@media (max-width: 800px) {
  .logo-frame { --logo-size: min(94vw, 64svh); }
  .logo-motion-ready .logo-transition-slot { height: clamp(220px, 34svh, 280px); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-motion-ready .logo-transition-slot { height: 0; }
  .logo-motion-ready .logo-transition { display: none; }
}