/* A sentence as big as the screen, held in the middle while the scroll lights its words in turn, one sentence at a time. Needs ../base/base.css. */

/* ---------- a sentence as big as the screen, its words lit by the scroll (Star's frase) ---------- */
.frase{position:relative}
/* tall enough that a unit of the timeline costs the same scroll as before the hold after each sentence was added (2026-10-06) */
.fr-palco{height:417vh;height:417svh}
.fr-fissa{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center}
.fr-t{font-family:var(--serif);font-size:clamp(40px,5.6vw,88px);font-weight:300;line-height:1.04;letter-spacing:var(--track);text-align:center}
.fr-seg,.fr-l{display:block}
.fr-seg+.fr-seg{margin-top:.36em}
.fr-b{color:var(--blu-t)}
/* one sentence at a time, like subtitles: the three share one place in the middle; the one being read is .on, the ones read are
   .was (gone upward), the ones to come wait a little lower. Opacity and a rise only: no blur, the tiles hold a canvas (rule 3) */
.fr-vivo .fr-t{display:grid}
.frase.fr-vivo .fr-seg{grid-area:1/1;align-self:center;margin:0;opacity:0;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
.frase.fr-vivo .fr-seg.on{pointer-events:auto}   /* big-sentence.js scrubs their scale and opacity (the zoom through) */
.fr-nw{white-space:nowrap}
.fr-p{display:inline-block}

.fr-vivo .fr-p{opacity:.24;will-change:opacity}
@media (max-width:759px){.fr-l{display:inline}.fr-t{text-wrap:balance}}
@media (max-width:640px){.fr-palco{height:367vh;height:367svh}.fr-t{font-size:clamp(32px,9vw,42px);line-height:1.08}}

@media (prefers-reduced-motion:reduce){
  .fr-palco{height:auto}
  .fr-fissa{position:static;height:auto;padding-block:calc(var(--sez) * 1.1)}
  .fr-vivo .fr-p{opacity:1}
}