.landing-intro[hidden] { display: none; }

body.landing-intro-open { overflow: hidden; }

.landing-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--white);
  color: var(--black);
  opacity: 0;
  transition: opacity 380ms ease;
}

.landing-intro.is-ready { opacity: 1; }

.landing-intro__enter {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  place-content: center;
  justify-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.landing-intro__portrait {
  position: relative;
  display: block;
  width: clamp(220px, 34vmin, 380px);
  aspect-ratio: 1;
  overflow: hidden;
  background: #000;
  opacity: 0;
  transform: scale(.975);
  transition: opacity 580ms ease, transform 580ms cubic-bezier(.2, .75, .25, 1);
}

.landing-intro__portrait::after {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--black) 22%, transparent);
  content: "";
  pointer-events: none;
}

.landing-intro.is-ready .landing-intro__portrait {
  opacity: 1;
  transform: scale(1);
}

.landing-intro__portrait video {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  object-fit: cover;
}

.landing-intro__enter:hover .landing-intro__portrait,
.landing-intro__enter:focus-visible .landing-intro__portrait {
  transform: scale(1.018);
}

.landing-intro__enter:focus-visible { outline: 1px solid var(--black); outline-offset: -8px; }

.landing-intro.is-exiting {
  opacity: 0;
  pointer-events: none;
  transition-duration: 460ms;
}

.landing-intro.is-exiting .landing-intro__portrait {
  transform: scale(1.12);
  transition-duration: 460ms;
}

@media (max-width: 620px) {
  .landing-intro__portrait { width: clamp(210px, 68vw, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-intro,
  .landing-intro__portrait { transition: none; }

  .landing-intro__enter:hover .landing-intro__portrait,
  .landing-intro__enter:focus-visible .landing-intro__portrait,
  .landing-intro.is-exiting .landing-intro__portrait { transform: none; }
}