/* Reserve the browser's vertical scrollbar gutter throughout the opening and
   the finished page. This keeps the reference cover and its centered opening
   frame in the same content box, so the artwork cannot jump horizontally when
   the page becomes scrollable. Overlay-scrollbar platforms simply ignore the
   reservation. */
html {
  scrollbar-gutter: stable;
}

html.is-hhh-opening {
  height: 100%;
  overflow-y: scroll;
  overscroll-behavior: none;
  scrollbar-color: transparent transparent;
}

html.is-hhh-opening body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.is-hhh-opening::-webkit-scrollbar {
  width: 15px;
  background: transparent;
}

html.is-hhh-opening::-webkit-scrollbar-track {
  background: #050505;
}

html.is-hhh-opening::-webkit-scrollbar-thumb {
  background: transparent;
}

/* The opening is an overlay. The live Chromatic Waves canvas and the cover
   remain underneath it, so the intro uses the same background animation as
   the finished cover instead of a second, unrelated gray background. */
.hhh-opening {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  user-select: none;
  touch-action: none;
  pointer-events: none;
}

.hhh-opening__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #050505;
  opacity: .92;
  will-change: opacity;
}

.hhh-opening__word-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hhh-opening__word-box {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 112px);
  aspect-ratio: 1600 / 1117;
  overflow: hidden;
  /* The zoom frame itself must stay transparent. The cover WebP has alpha
     around its artwork, and a black frame here would turn that alpha into a
     larger black rectangle while the image expands. */
  background: transparent;
  will-change: width, height, transform, opacity;
}

.hhh-opening__word-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #000;
  color: rgba(255, 255, 255, .74);
  font: 500 clamp(12px, 1.2vw, 18px)/1 Arial, Helvetica, sans-serif;
  letter-spacing: .07em;
  will-change: transform, opacity, filter;
}

.hhh-opening__cover-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  will-change: opacity;
}

.hhh-opening__cover-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* Hide only the final artwork while the intro words are on screen. The wave
   canvas itself stays alive and visible beneath the dimming veil. */
html.hhh-cover-opening-hidden .portfolio-cover-2026__art,
html.hhh-cover-opening-hidden .portfolio-cover-2026__portrait-colors,
html.hhh-cover-opening-hidden .portfolio-cover-2026__line-clip,
html.hhh-cover-opening-hidden .portfolio-cover-2026__black-board {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.is-hhh-opening .portfolite-header,
html.is-hhh-opening .cursor-ring,
html.is-hhh-opening .cursor-dot,
html.is-hhh-opening .hhh-global-nav,
html.is-hhh-opening .hhh-global-cursor {
  opacity: 0 !important;
  pointer-events: none;
}

@media (max-width: 700px), (pointer: coarse) {
  .hhh-opening__word-box {
    width: 72px;
  }

  .hhh-opening__word-text {
    font-size: 13px;
  }

  .hhh-opening__cover-thumb img {
    opacity: .92;
  }

}

@media (prefers-reduced-motion: reduce) {
  .hhh-opening { display: none; }
}