.flht-intro {
  --intro-travel: clamp(1080px, 155svh, 1520px);
  position: relative;
  width: 100%;
  height: 100svh;
  margin: 0;
}

.flht-intro.is-cinematic { height: calc(100svh + var(--intro-travel)); }
.flht-intro-frame {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: clip;
  isolation: isolate;
  background: var(--portfolio-charcoal);
}
.flht-intro.is-cinematic .flht-intro-frame { background: none; }
.flht-intro-frame :is(canvas, .flht-workstation-poster) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.flht-workstation-poster { visibility: hidden; }
.flht-intro-frame canvas { visibility: hidden; }
.flht-intro-frame.has-workstation canvas { visibility: visible; }

.flht-intro-mark {
  position: absolute;
  top: clamp(19px, 4.5svh, 52px);
  left: clamp(18px, 4.5vw, 84px);
  width: clamp(115px, 13vw, 188px);
  opacity: var(--intro-mark, 1);
  filter: drop-shadow(0 0 20px #151516);
}
.flht-intro-mark img { display: block; width: 100%; height: auto; }

.flht-intro-skip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  position: absolute;
  right: clamp(17px, 4.5vw, 84px);
  bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding-inline: 14px;
  color: #f0ebfc !important;
  background: #292733dd;
  border: 1px solid #d4c7f375;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 650;
}
.flht-intro-skip:is(:hover, :focus-visible) { background: #493a76; outline: 2px solid var(--portfolio-blue); outline-offset: 2px; }
.flht-intro-skip svg { width: 20px; height: 20px; }
.flht-intro-frame[data-past] .flht-intro-mark:not(:focus-visible) {
  visibility: hidden;
}
#portfolio-start { height: 0; width: 100%; scroll-margin-top: 0; outline: 0; }
.flht-intro.is-cinematic + #portfolio-start { margin-block-start: calc(-1 * min(22svh, 205px)); }
.flht-page-content {
  position: relative;
  z-index: 1;
  display: flow-root;
  background: var(--portfolio-paper);
}
.flht-intro.is-cinematic ~ .flht-page-content { border-top: 1px solid var(--portfolio-line); }

@media (prefers-reduced-motion: reduce) {
  .flht-intro.is-cinematic { height: 100svh; }
  .flht-intro.is-cinematic + #portfolio-start { margin-block-start: 0; }
}

@media (scripting: none) {
  .flht-intro { display: none; }
}