/* Production homepage opener. The supplied drawing enters in architectural
   sections, then the completed arch becomes the camera target. */
#intro{
  --intro-violet:#57068c;
  --intro-paper:#fff;
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--intro-violet);
  perspective:950px;
  perspective-origin:50% 44%;
}

#intro{transition:opacity .42s ease}

#intro::before,
#intro::after,
.intro-arch-stage::before,
.intro-arch-stage::after{content:none!important}

.intro-arch-stage{
  position:relative;
  z-index:2;
  width:min(84vh,94vw);
  aspect-ratio:1;
  transform-origin:50% 60%;
  transform-style:preserve-3d;
  transition:
    transform .52s cubic-bezier(.7,0,1,.42),
    opacity .26s ease .26s,
    filter .36s ease;
  will-change:transform,opacity,filter;
}

.intro-stroke{
  --from-x:0;
  --from-y:0;
  --from-z:-760px;
  --from-rx:0deg;
  --from-ry:0deg;
  --from-rz:0deg;
  --trail-x:0;
  --trail-y:0;
  --trail-far-x:0;
  --trail-far-y:0;
  --trail-near-x:0;
  --trail-near-y:0;
  position:absolute;
  inset:0;
  opacity:0;
  transform-style:preserve-3d;
  will-change:transform,opacity,filter;
}

.intro-stroke img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  clip-path:var(--piece-clip);
  filter:brightness(0) invert(1);
}

/* The rectangles form one complete, non-overlapping copy of the supplied SVG.
   Their independent entrances read as architectural strokes assembling. */
.intro-stroke-1{--piece-clip:inset(0 0 74.8% 0);--from-y:-112vh;--from-z:-980px;--from-rx:-58deg;--from-rz:-2deg;--trail-y:-3.4rem;--trail-far-y:-7rem;--trail-near-y:-.8rem;--delay:0s}
.intro-stroke-2{--piece-clip:inset(24.8% 0 63.8% 0);--from-x:112vw;--from-z:-720px;--from-ry:58deg;--from-rz:2deg;--trail-x:3.6rem;--trail-far-x:7.5rem;--trail-near-x:.9rem;--delay:.12s}
.intro-stroke-3{--piece-clip:inset(35.8% 67.8% 17.8% 0);--from-x:-112vw;--from-z:-760px;--from-ry:-58deg;--from-rz:-3deg;--trail-x:-3.6rem;--trail-far-x:-7.5rem;--trail-near-x:-.9rem;--delay:.24s}
.intro-stroke-4{--piece-clip:inset(35.8% 49.8% 17.8% 31.8%);--from-x:-70vw;--from-y:90vh;--from-z:-900px;--from-rx:42deg;--from-ry:-44deg;--from-rz:-4deg;--trail-x:-2.8rem;--trail-y:3.6rem;--trail-far-x:-5.8rem;--trail-far-y:7.4rem;--trail-near-x:-.7rem;--trail-near-y:.9rem;--delay:.38s}
.intro-stroke-5{--piece-clip:inset(35.8% 31.8% 17.8% 49.8%);--from-x:70vw;--from-y:90vh;--from-z:-900px;--from-rx:42deg;--from-ry:44deg;--from-rz:4deg;--trail-x:2.8rem;--trail-y:3.6rem;--trail-far-x:5.8rem;--trail-far-y:7.4rem;--trail-near-x:.7rem;--trail-near-y:.9rem;--delay:.48s}
.intro-stroke-6{--piece-clip:inset(35.8% 0 17.8% 67.8%);--from-x:112vw;--from-z:-760px;--from-ry:58deg;--from-rz:3deg;--trail-x:3.6rem;--trail-far-x:7.5rem;--trail-near-x:.9rem;--delay:.24s}
.intro-stroke-7{--piece-clip:inset(81.8% 49.8% 0 0);--from-x:-48vw;--from-y:108vh;--from-z:-820px;--from-rx:58deg;--from-ry:-28deg;--from-rz:-2deg;--trail-x:-2.4rem;--trail-y:4rem;--trail-far-x:-5rem;--trail-far-y:8rem;--trail-near-x:-.6rem;--trail-near-y:1rem;--delay:.36s}
.intro-stroke-8{--piece-clip:inset(81.8% 0 0 49.8%);--from-x:48vw;--from-y:108vh;--from-z:-820px;--from-rx:58deg;--from-ry:28deg;--from-rz:2deg;--trail-x:2.4rem;--trail-y:4rem;--trail-far-x:5rem;--trail-far-y:8rem;--trail-near-x:.6rem;--trail-near-y:1rem;--delay:.36s}

.playing .intro-stroke{
  animation:introStrokeIn 1.2s var(--delay) linear both;
}

@keyframes introStrokeIn{
  0%{
    opacity:0;
    transform:translate3d(var(--from-x),var(--from-y),var(--from-z)) rotateX(var(--from-rx)) rotateY(var(--from-ry)) rotateZ(var(--from-rz)) scale(.62);
    filter:drop-shadow(var(--trail-far-x) var(--trail-far-y) 8px rgba(255,255,255,.14)) drop-shadow(var(--trail-x) var(--trail-y) 3px rgba(255,255,255,.34));
    animation-timing-function:linear;
  }
  6%{
    opacity:.88;
    transform:translate3d(var(--from-x),var(--from-y),var(--from-z)) rotateX(var(--from-rx)) rotateY(var(--from-ry)) rotateZ(var(--from-rz)) scale(.62);
    filter:drop-shadow(var(--trail-far-x) var(--trail-far-y) 9px rgba(255,255,255,.18)) drop-shadow(var(--trail-x) var(--trail-y) 3px rgba(255,255,255,.48));
    animation-timing-function:cubic-bezier(.075,.82,.165,1);
  }
  64%{
    opacity:1;
    transform:translate3d(0,0,58px) rotateX(0) rotateY(0) rotateZ(0) scale(1.032);
    filter:drop-shadow(var(--trail-near-x) var(--trail-near-y) 1px rgba(255,255,255,.34));
    animation-timing-function:cubic-bezier(.2,1.22,.32,1);
  }
  84%{
    transform:translate3d(0,-.2rem,-10px) scale(.996);
    filter:drop-shadow(0 0 0 rgba(255,255,255,0));
    animation-timing-function:cubic-bezier(.22,1,.36,1);
  }
  100%{opacity:1;transform:none;filter:none}
}

#intro.zoom .intro-arch-stage{
  transform:translate3d(0,7vh,320px) scale(4.7);
  opacity:0;
  filter:blur(3px);
}

#intro.exit{pointer-events:none;opacity:0}

@media(max-width:600px){
  .intro-arch-stage{width:min(78vh,112vw)}
}