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

html.intro-pending,
html.intro-pending body,
html.intro-revealing,
html.intro-revealing body { overflow: hidden; }

html.intro-pending:not(.intro-active) .site-shell { visibility: hidden; }

.portfolio-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050607;
  color: #f4f4f1;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  outline: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path 780ms cubic-bezier(0.76, 0, 0.24, 1);
}

.intro-identity {
  position: absolute;
  top: 45px;
  left: max(48px, calc((100vw - 1624px) / 2));
  font-size: 13px;
  letter-spacing: 0.02em;
}

.intro-identity span {
  display: block;
  margin-top: 5px;
  color: #777b7e;
  font-size: 11px;
}

.intro-stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 48px;
  transform: translate(var(--intro-x, 0px), var(--intro-y, 0px));
  transition: transform 280ms ease-out, opacity 240ms ease;
}

.intro-mark { position: relative; width: 150px; height: 87px; margin-bottom: 48px; transform: perspective(850px) rotateX(var(--intro-tilt-y, 0deg)) rotateY(var(--intro-tilt-x, 0deg)); transition: transform 280ms ease-out; }
.intro-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro-letter { transform-box: fill-box; transform-origin: center; }
.intro-letter-a { animation: introMarkLeft 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.intro-letter-o { animation: introMarkRight 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.intro-caption { margin: 0; font-size: 13px; letter-spacing: 0.025em; animation: introCaptionArrive 650ms 80ms both; }
.intro-loading-line { width: 152px; height: 1px; margin-top: 56px; overflow: hidden; background: #25282a; }
.intro-loading-line span { display: block; width: 50%; height: 100%; background: #a3aba7; animation: introLoading 1500ms ease-in-out infinite; }
.intro-status { margin: 16px 0 0; color: #929895; font-size: 10px; letter-spacing: 0.07em; }
.portfolio-intro.has-video-error .intro-loading-line span { animation: none; width: 100%; background: #777b7e; }
.intro-footer { position: absolute; bottom: 36px; left: 48px; right: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.intro-hint { color: #777b7e; font-size: 11px; }
.intro-skip { padding: 12px 0 12px 16px; border: 0; background: none; color: #b3b8b5; font: inherit; font-size: 12px; cursor: pointer; }
.intro-skip span { display: inline-block; margin-left: 15px; transition: transform 180ms ease; }
.intro-skip:hover { color: #f4f4f1; }
.intro-skip:hover span { transform: translate(2px, -2px); }
.intro-skip:focus-visible { outline: 1px solid #f4f4f1; outline-offset: 6px; }
.portfolio-intro.is-leaving { clip-path: inset(0 0 100% 0); pointer-events: none; }
.portfolio-intro.is-leaving .intro-stage { opacity: 0; }
html.intro-pending .hero-copy > *,
html.intro-pending .hero-note,
html.intro-pending .hero-footer,
html.intro-pending .hero-visual,
html.intro-pending .site-header { opacity: 0; }
.intro-arriving .site-header { animation: introHeaderArrive 900ms cubic-bezier(0.22, 0.7, 0.3, 1) both; }
.intro-arriving .hero.hero-entering .hero-visual > video { animation-duration: 2000ms; }
.hero-visual.is-video-waiting video { visibility: hidden; }
.hero-visual.is-video-arriving { animation: introVideoArrive 650ms ease-out both; }

@keyframes introMarkLeft { from { opacity: 0; transform: translate(-34px, 13px) rotate(-7deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introMarkRight { from { opacity: 0; transform: translate(34px, -13px) rotate(7deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introCaptionArrive { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes introLoading { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@keyframes introVideoArrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes introHeaderArrive { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 860px) {
  .intro-identity { top: 28px; left: 24px; }
  .intro-footer { left: 24px; right: 24px; bottom: 24px; justify-content: flex-end; }
  .intro-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-intro, .intro-stage { transition: none; }
  .portfolio-intro *, .hero-visual.is-video-arriving { animation: none; }
}
@media print { .portfolio-intro { display: none !important; } html.intro-pending .site-shell { visibility: visible; } }