body.is-intro-running { overflow: hidden; }

html[data-intro="pending"] [data-home-reveal],
html[data-intro="running"] [data-home-reveal] {
  opacity: 0;
  transform: translateY(1rem);
}

html:not([data-intro]) [data-home-reveal] {
  transition: opacity 650ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-animation {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  overflow: hidden;
  contain: strict;
  place-items: center;
  color: var(--intro-fg);
  background: var(--intro-bg);
  transform: translateZ(0);
  will-change: transform;
}

.intro-animation::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.23;
  background-image: linear-gradient(90deg, transparent 49.9%, rgba(255, 255, 255, 0.12) 50%, transparent 50.1%);
  pointer-events: none;
}

.intro-animation__inner { width: min(84vw, 70rem); }

.intro-animation__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.intro-animation__mark img {
  width: clamp(9rem, 20vw, 15rem);
  height: auto;
  opacity: 0;
  transform: scale(0.72);
  will-change: opacity, transform;
}

.intro-animation__brand-mask,
.intro-animation__signature-mask { overflow: hidden; }

.intro-animation__brand {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(115%);
  will-change: transform;
}

.intro-animation__signature {
  width: 100%;
  margin: clamp(1.3rem, 2.5vw, 2rem) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(110%);
  will-change: opacity, transform;
}

.intro-animation__counter {
  position: absolute;
  right: clamp(1.25rem, 4vw, 4.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.intro-animation.is-playing .intro-animation__mark img {
  animation: intro-mark var(--mark-duration) var(--intro-ease) var(--mark-delay) forwards;
}

.intro-animation.is-playing .intro-animation__brand {
  animation: intro-brand var(--brand-duration) var(--intro-ease) var(--brand-delay) forwards;
}

.intro-animation.is-playing .intro-animation__signature {
  animation: intro-signature var(--signature-duration) ease-out var(--signature-delay) forwards;
}

.intro-animation.is-playing {
  animation: intro-exit var(--exit-duration) var(--intro-ease) var(--exit-delay) forwards;
}

@keyframes intro-mark {
  0% { opacity: 0; transform: scale(0.72); }
  62% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes intro-brand { to { transform: translateY(0); } }
@keyframes intro-signature { to { opacity: 1; transform: translateY(0); } }
@keyframes intro-exit { to { transform: translateY(-100%); } }

@media (max-width: 720px) {
  .intro-animation__inner { width: calc(100vw - 1.5rem); }
  .intro-animation__signature { max-width: 18rem; margin-inline: auto; line-height: 1.8; }
}

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