/* The source artwork and its crop stay fixed. These overlays share its 1024px
   coordinate system and disappear completely after the opening sequence. */
.paper-opening #hero .opening-motion-stage {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  aspect-ratio:1;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
  contain:layout paint;
}
.paper-opening #hero .opening-motion-plane {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  clip-path:polygon(0 52%,38% 52%,43% 64%,53% 60%,54% 34%,67% 34%,70% 55%,73% 35%,81% 26%,89% 23%,89% 14%,100% 14%,100% 100%,0 100%);
  mask-image:linear-gradient(#000 0 86%,transparent 100%);
}
.paper-opening #hero .opening-motion-stage svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.paper-opening #hero .opening-bridge-sentinel {
  position:absolute;
  left:28%;
  top:56%;
  width:56%;
  height:16%;
  pointer-events:none;
}
.paper-opening #hero .opening-paper-light,
.paper-opening #hero .opening-paper-shade {
  position:absolute;
  top:0;
  left:-30%;
  width:160%;
  height:100%;
  opacity:0;
  pointer-events:none;
}
.paper-opening #hero .opening-paper-light {
  background:linear-gradient(112deg,transparent 28%,#ffffff08 39%,#ffffff90 49%,#ffffff12 60%,transparent 72%);
  mix-blend-mode:soft-light;
}
.paper-opening #hero .opening-paper-shade {
  background:linear-gradient(112deg,transparent 30%,#00000005 43%,#00000025 51%,#00000004 61%,transparent 73%);
  mix-blend-mode:multiply;
}
.paper-opening #hero .opening-route,
.paper-opening #hero .opening-route-pulse {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:0;
}
.paper-opening #hero .opening-route { stroke:#5d6158; stroke-width:1.1; stroke-dasharray:100; stroke-dashoffset:100; }
.paper-opening #hero .opening-route-pulse { stroke:#fff; stroke-width:2.4; stroke-dasharray:7 93; stroke-dashoffset:100; }
.paper-opening #hero h1,
.paper-opening #hero .opening-lead,
.paper-opening #hero .opening-cta { z-index:2; }
.paper-opening #hero .opening-replay {
  position:absolute;
  left:7.1cqw;
  bottom:2.2cqw;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 0;
  border:0;
  border-bottom:1px solid #ffffff3d;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#f7f7f2b8;
  font-family:inherit;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.03em;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.paper-opening #hero .opening-replay span { font-size:16px; line-height:1; }
.paper-opening #hero .opening-replay:hover { color:#fff; border-color:#ffffffa6; }
.paper-opening #hero .opening-replay:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.paper-opening #hero .opening-replay[hidden] { display:none; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .paper-opening #hero .opening-cta .button { transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s; }
  .paper-opening #hero .opening-cta .button:hover { transform:translateY(-2px); box-shadow:0 8px 15px #00000020; }
  .paper-opening #hero .opening-cta .button span { transition:transform .3s cubic-bezier(.22,1,.36,1); }
  .paper-opening #hero .opening-cta .button:hover span { transform:translate(2px,-2px); }
}
@media(min-width:640px) {
  .paper-opening #hero .opening-motion-mobile { display:none; }
}
@media(max-width:639px) {
  .paper-opening #hero > .opening-motion-desktop { display:none; }
  .paper-opening #hero .opening-replay { left:7%; bottom:2.8cqw; font-size:10px; padding:6px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .paper-opening #hero .opening-motion-stage,
  .paper-opening #hero .opening-replay { display:none; }
}