/* =========================================================
   Contexto — hero-flashcard.css
   The live "regenerating sentence" card: a self-contained widget.
   Pairs with js/hero-flashcard.js (same name, same folder level)
   and the markup block in templates/landing.html.

   Everything here is scoped to .hero-flashcard and carries no
   assumption about where the card sits, so the widget can be
   dropped on another page as-is. The rules that place and tilt it
   inside the landing hero are scoped to .landing-hero__demo and
   live in landing.css instead.

   Custom properties eyeballed from an app screenshot are tagged
   "verify against app".
   ========================================================= */

.hero-flashcard {
  /* ---- verify against app ---------------------------------------- */
  --card-radius: 24px;            /* verify against app */
  --card-bg: #fcfcfc;             /* verify against app */
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);  /* verify against app */
  --word-size: 2.5rem;            /* 40px — verify against app */
  --word-weight: 700;             /* verify against app */
  --sentence-size: 1.625rem;      /* 26px — verify against app */
  --sentence-weight: 500;         /* verify against app */
  --sentence-bar-color: #e05656;  /* verify against app (lighter than brand red) */
  --sentence-bar-width: 4px;      /* verify against app */
  --question-color: #7a7a7a;      /* verify against app */
  --question-size: 0.9375rem;     /* 15px — verify against app */
  --btn-radius: 14px;             /* verify against app */
  --btn-green: #3ebd5d;           /* "Perfectly" — verify against app */
  --btn-orange: #f79420;          /* "Somewhat" — verify against app */
  --btn-red: #cb2b2b;             /* "Barely" — verify against app */
  --btn-text-size: 1.0625rem;     /* 17px — verify against app */
  /* ---- animation tuning (not from screenshot) --------------------- */
  --word-mark-color: #d32f2f;     /* highlight color of the word inside the sentence */
  --card-pad: 28px;

  font-family: "Dosis", -apple-system, BlinkMacSystemFont, sans-serif;
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  color: #000;
}

/* Fixed anchor: the target word. Never moves, never re-types. */
.hero-flashcard__word {
  font-size: var(--word-size);
  font-weight: var(--word-weight);
  line-height: 1.15;
  margin: 20px 0 28px;
}

/* Sentence block: left red bar, left-aligned text, like in-app.
   The outer div reserves the height of the longest sentence (set by the
   script) so nothing below ever shifts; the bar hugs the current text. */
.hero-flashcard__sentence-outer {
  margin: 0 4px 26px;
}

.hero-flashcard__sentence-wrap {
  display: flex;
  align-items: stretch;
  text-align: left;
  gap: 14px;
}

.hero-flashcard__sentence-wrap::before {
  content: "";
  flex: 0 0 var(--sentence-bar-width);
  border-radius: 2px;
  background: var(--sentence-bar-color);
}

.hero-flashcard__sentence {
  font-size: var(--sentence-size);
  font-weight: var(--sentence-weight);
  line-height: 1.35;
  min-height: 1.35em; /* keeps the bar one line tall between sentences */
}

/* Characters start hidden, revealed by the typewriter */
.hero-flashcard__sentence .tw-char {
  visibility: hidden;
}

.hero-flashcard__sentence .tw-char.is-on {
  visibility: visible;
}

/* The target word inside the sentence */
.hero-flashcard__word-mark {
  display: inline-block;   /* so transform applies */
  font-weight: 700;
  color: var(--word-mark-color);
}

.hero-flashcard__word-mark.is-pulsing {
  animation: hero-flashcard-pulse 350ms ease-out;
}

@keyframes hero-flashcard-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ~150ms clear between sentences */
.hero-flashcard__sentence.is-clearing {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.hero-flashcard__question {
  font-size: var(--question-size);
  font-weight: 500;
  color: var(--question-color);
  margin-bottom: 14px;
}

.hero-flashcard__buttons {
  display: flex;
  gap: 12px;
}

.hero-flashcard__btn {
  flex: 1 1 0;
  font-family: inherit;
  font-size: var(--btn-text-size);
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: var(--btn-radius);
  padding: 18px 6px;
  cursor: pointer;
  transition: transform 90ms ease-out, filter 90ms ease-out;
}

.hero-flashcard__btn--perfectly { background: var(--btn-green); }
.hero-flashcard__btn--somewhat  { background: var(--btn-orange); }
.hero-flashcard__btn--barely    { background: var(--btn-red); }

.hero-flashcard__btn:active,
.hero-flashcard__btn.is-pressed {
  transform: scale(0.95);
  filter: brightness(0.92);
}

.hero-flashcard__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: no typewriter, no pulse; swaps are a simple crossfade */
@media (prefers-reduced-motion: reduce) {
  .hero-flashcard__word-mark.is-pulsing { animation: none; }
  .hero-flashcard__sentence.is-clearing {
    transition: opacity 200ms ease-out;
  }
}