/* Смена имени между онбордингом и дашбордом (js/intro.js). Зверёк стоит под
   центром экрана, над его головой на стебельке — табличка с именем. */

.intro,
.wipe {
  --pet: min(26vh, 200px);
  --cell: calc(var(--pet) / 16);
}

.intro {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 1);
  overflow: hidden;
  user-select: none;
}

/* The scene is one layer so a torn band can clone all of it: purple, sign and critter. */
.intro__scene,
.intro__band,
.intro__bg,
.intro__veil { position: absolute; inset: 0; }
.intro__band { pointer-events: none; }

/* Our surface: breaks in over the purple at the takeover (clip-path, js/intro.js). */
.intro__veil {
  background: var(--bg);
  clip-path: inset(50% 0 50% 0);
}

/* Thin lines of our page seen through the purple while it breaks. */
.intro__peek {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

/* The wipe's critter and the scene's one share a spot, so the hand-over does not show. */
.intro__pet,
.wipe__mark {
  position: absolute;
  left: 50%;
  top: 64%;
  width: var(--pet);
  height: var(--pet);
  margin: calc(var(--pet) / -2) 0 0 calc(var(--pet) / -2);
}
.intro__pet { perspective: 900px; }
.intro__critter { position: absolute; inset: 0; }
.intro__critter .mascot,
.wipe__mark .mascot { display: block; width: 100%; height: 100%; }

/* Stalk: continues the one drawn on the critter's head (column 7, from row 4 up). */
.intro__stalk {
  position: absolute;
  left: calc(var(--cell) * 7);
  bottom: calc(var(--cell) * 12);
  width: var(--cell);
  height: calc(var(--cell) * 3.2);
  background: var(--mc-shade);
  transform-origin: 50% 100%;
  visibility: hidden;
}

/* The sign is the cheat sheet grown big: paper, a pixel drop shadow, a cyan line. */
.intro__board {
  position: absolute;
  left: calc(var(--cell) * 7.5);
  bottom: calc(var(--cell) * 15);
  padding: 0.2em 0.45em 0.3em;
  font-size: clamp(2rem, 8vw, 4.75rem);
  background: var(--mc-paper);
  box-shadow: 0 calc(var(--cell) * 0.8) 0 var(--mc-shade);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  visibility: hidden;
  transition: background-color 300ms var(--ease-in-out), box-shadow 300ms var(--ease-in-out);
}
.intro__board::after {
  content: "";
  position: absolute;
  left: 0.45em;
  right: 0.45em;
  bottom: 0.14em;
  height: 0.07em;
  background: var(--mc-line);
  transition: opacity 300ms var(--ease-in-out);
}
.intro.is-grown .intro__stalk,
.intro.is-grown .intro__board { visibility: visible; }
.intro.is-ours .intro__board { background: transparent; box-shadow: none; }
/* The sign is gone, so the long stalk folds back into the critter's head. */
.intro__stalk { transition: transform 300ms var(--ease-in-out); }
.intro.is-ours .intro__stalk { transform: scaleY(0); }
.intro.is-ours .intro__board::after { opacity: 0; }

.intro__brand {
  --logo-mark: var(--brand);
  font-size: clamp(2rem, 8vw, 4.75rem);
  color: var(--mc-ink);
  transition: color 300ms var(--ease-in-out);
}
.intro__brand .logo__mark { transition: color 300ms var(--ease-in-out); }
.intro__brand .logo__mark.is-off { display: none; }
.intro.is-ours .intro__brand {
  --logo-mark: var(--intro-mark, var(--accent-text));
  color: var(--intro-word, var(--text));
}

.intro__skip {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--on-accent);
  opacity: 0.72;
  transition: color 300ms var(--ease-in-out);
}
.intro.is-ours .intro__skip { color: var(--text-3); }

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