.hero-symbol--cinematic {
  animation: none;
  transform: none;
  opacity: 1;
  pointer-events: none;
  gap: 32px;
}

.logo-stage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1264 / 848;
}

.hero-symbol--cinematic .logo-stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1) invert(1) brightness(1.12);
  mix-blend-mode: screen;
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

.hero-symbol--cinematic .logo-piece {
  visibility: hidden;
}

/* These clips reveal the original uploaded mark; they do not redraw it. */
.logo-piece--one {
  clip-path: polygon(0 0, 45.3% 0, 46.5% 56.6%, 0 100%);
  transform-origin: 27% 38%;
}
.logo-piece--two {
  clip-path: polygon(45.3% 0, 100% 0, 100% 25%, 56.8% 32.5%, 46.5% 56.6%);
  transform-origin: 56% 26%;
}
.logo-piece--three {
  clip-path: polygon(0 100%, 46.5% 56.6%, 56.8% 32.5%, 64.1% 50.5%, 64.1% 100%);
  transform-origin: 49% 69%;
}
.logo-piece--four {
  clip-path: polygon(100% 25%, 100% 100%, 64.1% 100%, 64.1% 50.5%, 56.8% 32.5%);
  transform-origin: 77% 60%;
}

.hero-symbol--cinematic.is-animating .logo-piece {
  visibility: visible;
  will-change: transform;
}
.hero-symbol--cinematic[data-logo-state="loading"] .logo-piece {
  visibility: hidden;
}
.hero-symbol--cinematic.is-animating .logo-assembled,
.hero-symbol--cinematic.is-animating .logo-caption {
  opacity: 0;
}
.hero-symbol--cinematic.has-exited {
  visibility: hidden;
}
.hero-symbol--cinematic .logo-fragment{visibility:hidden;pointer-events:none}
.hero-symbol--cinematic.is-fragmenting .logo-fragment{visibility:visible;will-change:transform,opacity}
.hero-symbol--cinematic .logo-caption {
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .18em;
}

@media (max-width: 640px) {
  .hero-symbol--cinematic {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(72vw, 300px);
    margin: 0 auto 8px;
    padding: 0;
    align-self: center;
    gap: 18px;
  }
  .hero-symbol--cinematic .logo-caption {
    display: block;
    text-align: center;
    font-size: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-enabled="true"]) .hero-symbol--cinematic,
  html:not([data-motion-enabled="true"]) .hero-symbol--cinematic.has-exited {
    visibility: visible;
    transform: none !important;
  }
  html:not([data-motion-enabled="true"]) .hero-symbol--cinematic .logo-assembled,
  html:not([data-motion-enabled="true"]) .hero-symbol--cinematic .logo-caption {
    opacity: 1 !important;
  }
  html:not([data-motion-enabled="true"]) .hero-symbol--cinematic .logo-piece {
    visibility: hidden !important;
  }
  html:not([data-motion-enabled="true"]) .hero-symbol--cinematic .logo-fragment{visibility:hidden!important}
}
/* Keep the desktop flex item and percentage-sized stage measurable. */
@media(min-width:641px){.hero-symbol--cinematic{min-width:0;width:100%}}
.logo-stage{flex:none;width:100%;max-width:520px}