/* Pre-home veil. */

.ace-intro-screen {
  position: fixed;
  inset: 0;
  z-index: var(--ace-z-intro);
  display: none;
  place-content: center;
  padding: var(--ace-gutter);
  background-color: var(--ace-ink);
  transition:
    opacity var(--ace-dur-slow) var(--ace-ease-soft),
    transform var(--ace-dur-slow) var(--ace-ease-soft);
}

/* `.ace-intro` is dropped the moment the veil starts lifting, so the hero
   entrance plays underneath it; `.is-leaving` keeps the screen mounted. */
.ace-intro .ace-intro-screen,
.ace-intro-screen.is-leaving { display: grid; }

.ace-intro-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.ace-intro-screen.is-leaving {
  opacity: 0;
  transform: scale(1.035);
}

/* --- Signature ------------------------------------------------------------ */

/* The glyph is a mask; the gradient behind it is the ink. Sweeping the
   gradient's transparent half off the glyph writes the stroke left to right.
   200% background over a 50% colour stop maps the sweep exactly edge to edge. */
.ace-intro__mark {
  position: relative;
  width: clamp(12rem, 40vw, 21rem);
  aspect-ratio: 91 / 54;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  background-image: linear-gradient(
    96deg,
    var(--ace-gold) 0%,
    var(--ace-gold) 44%,
    var(--ace-gold-bright) 49%,
    var(--ace-gold) 50.5%,
    transparent 52%
  );
  -webkit-mask: url("../assets/logo-mark.svg") no-repeat center / contain;
  mask: url("../assets/logo-mark.svg") no-repeat center / contain;
  animation: ace-intro-write 1.5s var(--ace-ease-inout) .15s both;
}

@keyframes ace-intro-write {
  to { background-position: 0 0; }
}

/* --- Page while the veil is up -------------------------------------------- */

.ace-intro { overflow: hidden; }

.ace-intro .ace-hero__content > *,
.ace-intro .ace-hero__media { animation-play-state: paused; }