/* intro3: cold-open motion graphic ("one drop of ink"). Owned by the intro agent.
   The overlay is created by assets/js/intro3.mjs; nothing here hides the page. */

.gmp-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #000; /* covers the page from the very first paint of the overlay */
  contain: strict;
  /* a swipe must still scroll the page underneath */
  touch-action: manipulation;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* the veil fades in over a page that has already painted (JS adds .is-fade before
   insertion, then .is-in); when nothing has painted yet it covers instantly */
.gmp-intro.is-fade {
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gmp-intro.is-fade.is-in {
  opacity: 1;
}

/* once the canvas has drawn its first frame, the canvas itself is the veil
   (opaque black, then an ink stain eats it), so the page can show through */
.gmp-intro.is-live {
  background: transparent;
}

/* the exit has begun: the page below must be clickable immediately */
.gmp-intro.is-exit {
  pointer-events: none;
}

.gmp-intro__cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Hand-off: while the veil is up the hero headline letters wait below their
   mask line, and they rise (home3's own .55s transition) as the stain opens.
   Pure visual override: the real .is-in state is never touched, and the class
   is removed on every exit path (finish, timeout, input, error). */
html.gmp-intro-hold .sw-copy .g3-c > i {
  transition: none !important;
  transform: translateY(112%) rotate(6deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .gmp-intro {
    display: none !important;
  }
}