.site-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111313;
  opacity: 1;
  transition: opacity 700ms cubic-bezier(.4, 0, .2, 1);
}

.site-intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.intro-collage {
  position: absolute;
  inset: -5%;
  display: grid;
  grid-template-columns: 1.08fr .92fr 1fr;
  gap: 3px;
  transform: scale(1.02);
}

.intro-collage span {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  filter: saturate(.72) brightness(.52);
  will-change: transform;
  backface-visibility: hidden;
}

.intro-collage span::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  top: 7.5%;
  color: rgba(255,255,255,.76);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.35px;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  animation: label-arrive 900ms ease forwards;
}

.intro-collage span:nth-child(1) { background-image: url('assets/lobby.jpg'); background-position:52% center; animation: panel-left 2.35s cubic-bezier(.16,.76,.24,1) forwards; }
.intro-collage span:nth-child(2) { background-image: url('assets/residential-kitchen.jpg'); background-position:center 50%; animation: panel-center 2.35s cubic-bezier(.16,.76,.24,1) forwards; }
.intro-collage span:nth-child(3) { background-image: url('assets/event-hero.png'); background-position:50% center; animation: panel-right 2.35s cubic-bezier(.16,.76,.24,1) forwards; }
.intro-collage span:nth-child(1)::after { animation-delay: 260ms; }
.intro-collage span:nth-child(2)::after { animation-delay: 440ms; }
.intro-collage span:nth-child(3)::after { animation-delay: 620ms; }

.site-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10,11,11,.18), rgba(10,11,11,.77));
}

.intro-logo {
  position: relative;
  z-index: 2;
  width: min(760px, 68vw);
  aspect-ratio: 1123 / 794;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  -webkit-mask: url('assets/logo-white.png') center / contain no-repeat;
  mask: url('assets/logo-white.png') center / contain no-repeat;
  filter: drop-shadow(0 12px 35px rgba(0,0,0,.42));
  transform: scale(.94);
  opacity: 0;
  animation: logo-arrive 1.25s cubic-bezier(.2,.8,.2,1) 120ms forwards;
}

.intro-logo-image {
  position: relative;
  z-index: 2;
  width: min(760px, 68vw);
  height: auto;
  opacity: 0;
  mix-blend-mode: screen;
  filter: drop-shadow(0 12px 35px rgba(0,0,0,.55));
  transform: scale(.94);
  animation: logo-arrive 1.25s cubic-bezier(.2,.8,.2,1) 120ms forwards;
}

.intro-logo span {
  background-position: center;
  background-size: cover;
  transform: scale(1.12);
  animation: logo-image-drift 2.8s cubic-bezier(.2,.7,.2,1) forwards;
}

.intro-logo span:nth-child(1) { background-image: url('assets/lobby.jpg'); }
.intro-logo span:nth-child(2) { background-image: url('assets/contractor-interior.jpg'); }
.intro-logo span:nth-child(3) { background-image: url('assets/event-hero.png'); }

.intro-rule {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% + min(210px, 19vw));
  width: 0;
  height: 1px;
  background: rgba(255,255,255,.68);
  transform: translateX(-50%);
  animation: rule-open 1.1s cubic-bezier(.2,.8,.2,1) 650ms forwards;
}

@keyframes panel-left { from { transform:scale(1.07) translate3d(-1.1%,0,0); } to { transform:scale(1.025) translate3d(.45%,0,0); } }
@keyframes panel-center { from { transform:scale(1.07) translate3d(0,-1%,0); } to { transform:scale(1.025) translate3d(0,.35%,0); } }
@keyframes panel-right { from { transform:scale(1.07) translate3d(1.1%,0,0); } to { transform:scale(1.025) translate3d(-.45%,0,0); } }
@keyframes label-arrive { to { opacity: 1; transform: none; } }
@keyframes logo-arrive { to { transform: scale(1); opacity: 1; } }
@keyframes logo-image-drift { to { transform: scale(1.01) translateX(-2%); } }
@keyframes rule-open { to { width: min(420px, 38vw); } }

.site-intro.still .intro-collage,
.site-intro.still .intro-collage span,
.site-intro.still .intro-logo,
.site-intro.still .intro-logo-image,
.site-intro.still .intro-logo span,
.site-intro.still .intro-rule { animation: none; }
.site-intro.still .intro-logo { opacity: 1; transform: none; }
.site-intro.still .intro-logo-image { opacity: .88; transform: none; }
.site-intro.still .intro-rule { width: min(420px, 38vw); }
.site-intro.still .intro-collage span::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .intro-collage,.intro-logo,.intro-logo span,.intro-rule { animation: none; }
  .intro-logo { opacity: 1; transform: none; }
  .intro-rule { width: min(420px, 38vw); }
}

@media (max-width: 700px) {
  .intro-collage { grid-template-columns: 1fr 1fr; }
  .intro-collage span:nth-child(2) { display: none; }
  .intro-logo { width: 82vw; }
  .intro-logo-image { width: 82vw; }
  .intro-collage span::after { font-size: 9px; letter-spacing: 1.5px; }
}