/* Local tears in the world, never horizontal section dividers. */
main { overflow: clip; }
.section { border-top: 0; }
.hero, #game { overflow: visible; }
.play, .homecoming, .closing { overflow: clip; }
.comic-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.comic-card img { box-shadow: 0 20px 60px #0005; border: 1px solid var(--line); }
.comic-card figcaption { padding: 15px 3px 0; background: transparent; }
.comic-card:before { left: -15px; }
.nexus-stage { padding-bottom: 30px; }
.label-south { bottom: 0; }

.rift-breach {
  position: absolute;
  width: 480px;
  aspect-ratio: 2 / 3;
  z-index: 0;
  pointer-events: none;
  isolation: isolate;
}
.breach-art { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.breach-window {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: polygon(79% 12%, 72% 27%, 65% 34%, 61% 43%, 53% 49%, 49% 61%, 38% 72%, 25% 86%, 20% 86%, 33% 68%, 39% 57%, 46% 46%, 58% 37%, 63% 26%, 75% 16%);
}
.breach-entity {
  position: absolute;
  left: 36%;
  top: 41%;
  width: 31%;
  height: auto;
  opacity: .88;
  filter: drop-shadow(0 0 12px #ff385280);
  animation: emergence 11s ease-in-out infinite;
}
.breach-mist {
  position: absolute;
  z-index: 3;
  width: 54%;
  height: 32%;
  border-radius: 50%;
  filter: blur(17px);
  opacity: .2;
  background: radial-gradient(ellipse at 60% 70%, #a6bec8ad, #a6bec82b 38%, transparent 69%);
  animation: escaping-steam 12s ease-in-out infinite;
}
.mist-one { left: 21%; top: 30%; rotate: -25deg; }
.mist-two { left: 7%; top: 60%; rotate: 25deg; animation-delay: -6s; opacity: .13; }
.breach-story { width: 430px; right: -20px; top: -25px; rotate: 12deg; opacity: .85; }
.hero-grid, .chapter-heading, .story-panels, .play > .wrap, .homecoming > .wrap, .closing > .wrap { z-index: 3; }
.destruction-debris { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.debris-piece { position: absolute; width: 65px; height: 65px; }
.destruction-fragment { display: block; width: 100%; height: 100%; animation: fractured-drift 14s ease-in-out infinite; }
.piece-near { top: 14%; right: 3%; rotate: 30deg; opacity: .7; }
.piece-far { width: 32px; height: 32px; bottom: 12%; left: 3%; rotate: -25deg; opacity: .4; }
.piece-far .destruction-fragment { animation-delay: -7s; }
.hero .piece-near { top: 74%; right: 3%; width: 90px; height: 90px; }
.hero .piece-far { left: 38%; bottom: 20%; }
.play .piece-near { right: 1%; top: 6%; }
.homecoming .piece-near { top: 3%; right: 6%; }

@keyframes escaping-steam {
  0%, 100% { translate: 0 8px; scale: .8; opacity: .07; }
  50% { translate: -14px -27px; scale: 1.16; opacity: .23; }
}
@keyframes emergence {
  0%, 100% { translate: 0 3px; opacity: .55; }
  50% { translate: 3px -8px; opacity: .9; }
}
@keyframes fractured-drift { 50% { translate: 5px -18px; rotate: 7deg; } }

@media (min-width: 1700px) {
  .breach-story { right: 0; width: 450px; }
}
@media (max-width: 800px) {
  .breach-story { position: relative; width: 210px; right: auto; top: auto; margin: 10px auto 30px; rotate: 18deg; opacity: .85; }
  .breach-mist { filter: blur(10px); }
  .debris-piece { width: 38px; height: 38px; }
  .piece-far { width: 22px; height: 22px; }
  .hero .piece-near { width: 48px; height: 48px; right: 0; top: 48%; }
  .hero .piece-far { display: none; }
  .nexus-stage { padding-bottom: 40px; }
  .label-south { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .breach-mist, .breach-entity, .destruction-fragment { animation: none !important; }
}