/* JH Tattoos — homepage-only branded intro overlay.
   Purely additive: the overlay is [hidden] by default in the HTML, so the
   homepage is fully visible and functional if js/intro.js never runs.
   See js/intro.js for the show/hide logic and timing. */

.jh-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0e0d0c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jh-intro-logo {
  width: clamp(100px, 14vw, 168px);
  height: clamp(100px, 14vw, 168px);
  object-fit: contain;
  opacity: 0;
  transform: scale(.88);
  transition: opacity .45s ease, transform .45s ease;
}

.jh-intro.jh-intro-in .jh-intro-logo {
  opacity: 1;
  transform: scale(1);
}

.jh-intro.jh-intro-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.jh-intro.jh-intro-out .jh-intro-logo {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .4s ease, transform .4s ease;
}