/* ============================================================
   THE CREATIVITY LAB — Cinematic opening (page-load overture)
   .cl-intro · fullscreen overture: eyebrow + wordmark reveal,
   thin progress line, then a clean wipe-up to reveal the hero.
   Mirrors the studio motion language (--ease-out) + the menu's
   setTimeout-driven, freeze-safe staging.
   ============================================================ */

.cl-intro {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transform: translateY(0);
  transition: transform 0.82s var(--ease-out);
  will-change: transform;
}
/* the wipe-up that reveals the page */
.cl-intro.is-exit { transform: translateY(-100%); }

.cl-intro__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.2vw, 26px);
  padding: 24px; text-align: center;
}

/* eyebrow */
.cl-intro__eyebrow {
  font-family: var(--font-label); font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 9px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.cl-intro__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mg-orange); }
.cl-intro.is-reveal .cl-intro__eyebrow,
.cl-intro.is-exit   .cl-intro__eyebrow { opacity: 1; transform: none; }

/* wordmark with clip-reveal */
.cl-intro__logo { display: block; overflow: hidden; padding-bottom: 0.1em; }
.cl-intro__mark {
  display: inline-block;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: 1;
  font-size: clamp(2.4rem, 8.2vw, 6rem); color: var(--text-primary);
  transform: translateY(112%);
  transition: transform 0.9s var(--ease-out) 0.1s;
}
.cl-intro__mark .thin { font-weight: var(--fw-regular); color: var(--text-secondary); }
.cl-intro__mark .accent { color: var(--mg-orange); }
.cl-intro.is-reveal .cl-intro__mark,
.cl-intro.is-exit   .cl-intro__mark { transform: none; }

/* thin progress line */
.cl-intro__bar {
  position: relative; width: min(200px, 38vw); height: 1px; overflow: hidden;
  background: var(--border-default);
  opacity: 0; transition: opacity 0.5s var(--ease-out) 0.18s;
}
.cl-intro.is-reveal .cl-intro__bar { opacity: 1; }
.cl-intro__bar .fill {
  position: absolute; inset: 0; background: var(--text-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.25s var(--ease-out) 0.24s;
}
.cl-intro.is-reveal .cl-intro__bar .fill { transform: scaleX(1); }

/* scroll lock while the overture plays */
html.cl-intro-lock, html.cl-intro-lock body { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .cl-intro, .cl-intro * { transition: none !important; }
  .cl-intro__mark, .cl-intro__eyebrow { transform: none; opacity: 1; }
  .cl-intro__bar .fill { transform: scaleX(1); }
}