/* ---- letter-reveal: the tutorial's arriving title ---------------------------
   Ported from ng-extend (branch eyewire-ii-community),
   src/components/TutorialStep.vue: the letter by letter title reveal and the
   chip entrances EyeWire II's tutorial cards use. Class names prefixed
   letrev- mechanically; every value as shipped. The per letter stagger is
   set by letter-reveal.js: 0.06s per letter on a modal card, min(i*0.015,
   0.18) on a pointer callout, exactly the two rhythms upstream ships. */

@keyframes letrev-chipFadeIn {
  0%   { opacity: 0; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0px); }
}
.letrev-chip {
  animation: letrev-chipFadeIn 0.3s ease-out both;
}

@keyframes letrev-letterReveal {
  0%   { opacity: 0; transform: translateY(8px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.letrev-letter {
  display: inline-block;
  opacity: 0;
  animation: letrev-letterReveal 0.4s ease-out forwards;
}
/* a whole word wraps as one, so the stagger never breaks a word mid-line */
.letrev-word { display: inline-block; white-space: nowrap; }
.letrev-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  opacity: 0;
  animation: letrev-letterReveal 0.4s ease-out 0s forwards;
}
.letrev-icon svg { width: 26px; height: 26px; vertical-align: middle; }

/* the demo card is the tutorial's real chip chrome, carried from
   TutorialStep.vue .chip and .chip .title: the 30px padded 8px radius
   card, its 135deg midnight gradient, the 20px blur saturate backdrop,
   the double shadow, 18px weight 300 body over a grid with 15px row gap,
   and the 22px flex-centered title. Positional deviation only: the game
   absolutely positions chips beside their pointer targets; the demo card
   sits in flow. */
.letrev-demo-chip {
  width: auto;
  max-width: min(80vw, calc(100vw - 24px));
  color: #d0e8ff;
  padding: 30px;
  padding-bottom: 20px;
  border-radius: 8px;
  display: grid;
  justify-items: center;
  font-size: 18px;
  font-weight: 300;
  grid-row-gap: 15px;
  border: 1px solid rgba(160, 200, 240, 0.22);
  background: linear-gradient(135deg, rgba(8, 12, 26, 0.95), rgba(14, 10, 36, 0.93));
  backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 0 20px rgba(80, 140, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.45);
}
.letrev-demo-chip .letrev-title {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
}
.letrev-demo-chip p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .letrev-chip, .letrev-letter, .letrev-icon { animation: none; opacity: 1; }
}