/* ==== intro (see CONTRACT.md) ====
   Everything inside #intro. #intro itself (fixed, z 30) lives in style.css. */

.intro-bg { position: absolute; inset: 0; background: var(--bg); touch-action: none; }

/* the 3D beat's paper: the Codrops demo's lavender / blue-grey gradient with a fine grain */
.intro-paper { position: absolute; inset: 0; pointer-events: none;
  background-color: #bccbeb;
  background-image: var(--paper-grain, linear-gradient(transparent, transparent)),
    radial-gradient(90% 75% at 56% 12%, rgba(202, 216, 247, .95) 0%, rgba(202, 216, 247, 0) 70%),
    linear-gradient(180deg, #bfcdee 0%, #bccbec 40%, #b3c0e5 78%, #aebade 100%);
  background-size: 128px 128px, 100% 100%, 100% 100%;
  opacity: 0; transition: opacity 1.1s var(--ease); }
.intro-paper.in { opacity: 1; }
.intro-paper.out { opacity: 0; transition: opacity .5s var(--ease) .3s; }  /* with the scene's fade in the flight */

.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;
  user-select: none; -webkit-user-select: none;
  opacity: 0; transition: opacity 1.1s var(--ease); }
.intro-canvas.in { opacity: 1; }

/* one sentence at a time, centered */
.intro-line { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 max(24px, 6vw); margin: 0;
  font-size: clamp(28px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12;
  color: var(--fg); pointer-events: none;
  opacity: 0; filter: blur(8px); transform: translateY(10px);
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); }
.intro-line > span { display: block; max-width: 34ch; text-wrap: balance; }
.intro-line.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.intro-line.out { opacity: 0; filter: blur(6px); transform: translateY(-8px);
  transition-duration: .3s, .3s, .3s; }
.intro-line em { font-style: italic; font-weight: 500; letter-spacing: -.015em;
  display: inline-block; opacity: 0; transform: translateY(6px);
  transition: opacity .6s var(--ease) .18s, transform .6s var(--ease) .18s; }
.intro-line.in em { opacity: 1; transform: translateY(0); }

/* wordmark */
.intro-mark { --mark-s: 1; --mark-y: 0px; position: absolute; left: 50%; top: 50%; margin: 0; white-space: nowrap;
  font-size: clamp(64px, 10vw, 140px); font-weight: 600; letter-spacing: -.04em; line-height: 1;
  color: var(--fg); pointer-events: none; will-change: transform, opacity, filter;
  opacity: 0; filter: blur(8px);
  transform: translate(-50%, calc(-50% + var(--mark-y) + 10px)) scale(var(--mark-s));
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); }
.intro-mark.in { opacity: 1; filter: blur(0);
  transform: translate(-50%, calc(-50% + var(--mark-y))) scale(var(--mark-s)); }
.intro-mark.up { transition: opacity .7s var(--ease), filter .7s var(--ease), transform 1.1s var(--ease); }
.intro-mark.out { opacity: 0; filter: blur(4px);
  transition: opacity .5s var(--ease), filter .5s var(--ease), transform 1.1s var(--ease); }

/* scroll hint: a single quiet dot */
.intro-hint { position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom, 0px) + 18px);
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--fg);
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.intro-hint.on { animation: intro-pulse 2.4s var(--ease) infinite; }
@keyframes intro-pulse {
  0%, 100% { opacity: .16; transform: translateY(0); }
  50% { opacity: .42; transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-line, .intro-line.in, .intro-line.out, .intro-line em, .intro-line.in em, .intro-canvas, .intro-paper, .intro-paper.out {
    transition-duration: .3s; transition-delay: 0s; filter: none; transform: none; }
  .intro-mark, .intro-mark.in, .intro-mark.up, .intro-mark.out { transition-duration: .3s; filter: none;
    transform: translate(-50%, calc(-50% + var(--mark-y))) scale(var(--mark-s)); }
  .intro-hint.on { animation: none; opacity: .3; }
}