/* ============================================================
   Hero headline flip — the "Every language." showreel
   Built by js/lipsmatch-hero-flip.js into [data-lm-flip].
   NOTE: html { font-size: 62.5% }, so 1rem = 10px.
   ============================================================ */

.lmflip {
  /* the accent half of the headline: Playfair italic, with fallbacks
     that actually carry Devanagari, Arabic, CJK and the rest */
  font-family: 'Playfair Display', 'Noto Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  /* No nowrap here on purpose: where the reel cannot run (see disable()
     in the JS) this is a plain headline again and must be free to break
     across lines like any other text. Only the stacked words are nowrap. */
}

/* The real headline text, for screen readers and for search engines.
   It never changes; only the decorative reel beside it does. */
.lmflip__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Words are stacked in here, so the box carries the width. JS animates
   that width to whichever script is on screen: the headline stretches
   and settles instead of jumping or clipping. */
.lmflip__box {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  height: 1em;
  transition: width .22s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

/* A lap dissolve, not a flip: the outgoing word drifts up a fraction of
   a line and softens while the incoming one settles into place. Slow on
   purpose, and slightly slower on the way out than in, so the two never
   read as a hard cut. Each word then holds for a beat and a half, which
   is enough to actually read it. */
.lmflip__word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-0.16em);
  filter: blur(3px);
  transition: opacity .46s ease, transform .6s cubic-bezier(0.22, 1, 0.36, 1),
              filter .46s ease;
  pointer-events: none;
}
.lmflip__word.is-on {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .38s ease .08s, transform .6s cubic-bezier(0.22, 1, 0.36, 1),
              filter .38s ease .08s;
}
/* Right-to-left scripts still start at the same edge as everything else. */
.lmflip__word[dir="rtl"] { left: 0; right: auto; text-align: left; }

/* Incoming frames rise into the gate while the reel is running; when it
   stops, the headline simply settles with no wind-down wobble. */
.lmflip__box.is-running .lmflip__word { transform: translateY(0.16em); }
.lmflip__box.is-running .lmflip__word.is-on { transform: none; }

/* Playhead: a hairline under the word that JS drives across once per
   hold, like a film timeline running under the frame. Its transform and
   duration are set per word in js/lipsmatch-hero-flip.js. */
.lmflip__line {
  position: absolute;
  left: 0;
  /* width is set per word by the JS, so the playhead ends where the word
     ends rather than running on to the reserved English width */
  width: 0;
  bottom: -0.12em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0) 0%,
    rgba(var(--accent-rgb), .9) 25%,
    rgba(var(--accent-rgb), .9) 75%,
    rgba(var(--accent-rgb), 0) 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.lmflip__box.is-running .lmflip__line { opacity: .5; }

/* Latin scripts keep the Playfair italic the headline is set in. Every
   other script has no italic worth the name, and sits optically larger
   at the same size, so it steps down and stands upright. */
.lmflip__word:not([lang="en"]):not([lang="es"]):not([lang="fr"]):not([lang="de"]):not([lang="it"]):not([lang="pt"]):not([lang="tr"]):not([lang="fi"]):not([lang="nl"]):not([lang="pl"]):not([lang="cs"]):not([lang="sv"]):not([lang="vi"]):not([lang="id"]):not([lang="fil"]):not([lang="sw"]) {
  font-style: normal;
  font-size: 0.86em;
}

@media (prefers-reduced-motion: reduce) {
  .lmflip__box { transition: none; }
  .lmflip__word { transition: none; }
  .lmflip__line { display: none; }
}