/* ================================================================
   ROLLING LANGUAGE SWITCH - styles                           (v306.4)
   Pairs with ab-langflip-v306.js. Every element here exists only for
   the ~0.7s of a language switch and is removed afterwards.
     abf-s  hidden holder for the real text node (still read by AT)
     abf-w  aria-hidden, [data-no-i18n] container (inline)
     abf-l  one layer: data-p s(tatic) i(n), data-m u(nit) v(fade)
            l(etters) w(ords) r(nav: paired letters)
     abf-ln one measured line of the real text (nowrap), abf-n the forced
            break between two lines - so a copy wraps exactly like the
            text it stands in for (text-wrap: balance included)
     abf-u  a whole text (or line) as one piece, abf-d a word (never
            breaks; in a roll it is the window its letters rise into),
     abf-c  a letter (or a word in word mode), abf-g a space
     abf-c[data-k]   a new column: ::before = the new glyph, rising from
                     one step below
     abf-d[data-gh="o"] > abf-o   an old line, standing where it stood
                     (--gx/--gy), clipped to its band; its abf-c[data-x]
                     columns rise out of it
     nav (r):  abf-c[data-k] ::after = the reel strip (old glyph), and
               abf-c[data-gh] old glyphs with no new column
   Glyphs are generated content, so these hold no DOM text.
   Only transform and opacity animate.
   Per-layer custom properties (set by the script from the host's font
   and the glyphs of the old and new text):
     --lh line height, --ls travel (>= the window's height), --ld offset
     that keeps nav reel baselines on the --ls grid, --ct/--cb how far
     the window reaches above/below the line box
   ================================================================ */
/* A short, explicit reset (not all:unset, which costs ~500 declarations per element): host rules such
   as ".chip > *" must not add boxes, margins or flex settings to these. Transform and opacity stay
   un-!important so the animations can drive them. */
abf-w,abf-l,abf-u,abf-d,abf-c,abf-g,abf-s,abf-ln,abf-n,abf-o{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;outline:0!important;float:none!important;position:static!important;inset:auto!important;width:auto!important;height:auto!important;min-width:0!important;max-width:none!important;flex:0 1 auto!important;order:0!important;align-self:auto!important;vertical-align:baseline!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;word-spacing:inherit!important;text-transform:inherit!important;line-height:inherit!important;filter:none!important;clip-path:none!important;transition:none!important;animation:none;transform:none;opacity:1}
abf-w,abf-l{display:inline!important;pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}
abf-g{display:inline!important}
abf-g::before{content:" "}
abf-ln{display:inline!important;white-space:nowrap!important}
abf-n{display:inline!important}
abf-n::before{content:"\A";white-space:pre}
abf-u{display:inline-block!important;white-space:nowrap!important;text-indent:0!important}
abf-l[data-m="v"]>abf-u{display:inline!important;white-space:inherit!important}
abf-ln>abf-u{display:inline!important}
abf-d{display:inline-block!important;white-space:nowrap!important;text-indent:0!important}
abf-c{display:inline-block!important;white-space:pre!important}
abf-u::before,abf-c::before{content:attr(data-c)}
abf-l[data-p="x"]{visibility:hidden!important}
abf-s{display:block!important;position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important}

/* ---------------- the roll ----------------
   A word is the window its columns rise into: clipped to its line box plus however far the glyphs
   reach (--ct above, --cb below, measured from the actual glyphs, Armenian fallbacks included), a
   little wider than the word so wide glyphs and italics are never cut. clip-path, not overflow:hidden,
   so the inline-block keeps its text baseline. */
abf-l[data-m="l"] abf-d:not([data-gh]),abf-l[data-m="w"] abf-d:not([data-gh]),abf-l[data-m="r"]>abf-d:not([data-gh]){clip-path:inset(calc(-1 * var(--ct,.04em)) -.35em calc(-1 * var(--cb,.04em)))!important}
abf-c[data-k],abf-c[data-gh],abf-c[data-x]{position:relative!important;line-height:var(--lh)!important}
/* every column starts moving at once and the left-to-right ripple is in the arrival: later columns take
   a little longer. New columns rise from one step below (nav: from below their reel). */
abf-c[data-k]{animation:abf-roll var(--du,620ms) cubic-bezier(.16,1,.3,1) both!important;animation-delay:var(--b,0ms)!important;animation-duration:calc(var(--du,620ms) + var(--i,0) * var(--s,0ms))!important}
@keyframes abf-roll{from{transform:translate3d(0,var(--t0,var(--ls,1.32em)),0)}to{transform:translate3d(0,0,0)}}
/* stacked roll (everything but the nav): the new glyph also fades in on its way up, so the old and the
   new text never sit on top of each other at full strength */
abf-l[data-m="l"] abf-c[data-k],abf-l[data-m="w"] abf-c[data-k]{animation-name:abf-rise!important}
@keyframes abf-rise{from{transform:translate3d(0,var(--ls,1.32em),0);opacity:0}30%{opacity:1}to{transform:translate3d(0,0,0);opacity:1}}
/* old columns rise and fade out of their band, in a share (--x) of the new ones' time */
abf-c[data-x]{animation:abf-out var(--du,620ms) cubic-bezier(.3,0,.25,1) both!important;animation-delay:var(--b,0ms)!important;animation-duration:calc((var(--du,620ms) + var(--i,0) * var(--s,0ms)) * var(--x,.5))!important}
@keyframes abf-out{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(0,calc(-.7 * var(--ls,1.32em)),0);opacity:0}}
/* an old line: a zero-width box at the start of the new line it maps to, moved to where the old line
   stood, clipped to that line's band (open to the right, where the line runs) */
abf-d[data-gh="o"]{display:inline-block!important;width:0!important;position:relative!important;left:var(--gx,0px)!important;top:var(--gy,0px)!important;clip-path:inset(calc(-1 * var(--ct,.04em)) -100em calc(-1 * var(--cb,.04em)) -.35em)!important}
abf-d[data-gh="o"]::before{content:"\200B"}
abf-o{display:block!important;position:absolute!important;left:0!important;top:0!important;white-space:nowrap!important;line-height:var(--lh)!important}

/* nav reels: the old glyph, one step above the column, rising out as the new glyph rises in */
abf-c[data-r]::after{content:attr(data-r);position:absolute;left:50%;transform:translateX(-50%);white-space:pre;text-align:center;line-height:var(--ls,var(--lh));pointer-events:none}
abf-c[data-k="u"]::after{bottom:calc(100% + var(--ld,0px))}
/* ...and the old glyph fades as it goes: where the old label was longer or shorter, its glyphs stand in
   the new label's columns for a moment, and fading them keeps that moment from reading as a misprint */
abf-c[data-r]::after{animation:abf-fo var(--du,620ms) ease-in both;animation-delay:var(--b,0ms);animation-duration:calc((var(--du,620ms) + var(--i,0) * var(--s,0ms)) * .42)}
/* the outer columns of a word anchor their reel inside the word, so a wide passing glyph never sticks out
   of the label (scrollWidth stays the label's own: the nav fitter measures it) */
abf-d>abf-c[data-k]:first-child::after{left:0;transform:none;text-align:left}
abf-d>abf-c[data-k]:last-child::after{left:auto;right:0;transform:none;text-align:right}
/* nav: old glyphs that have no new column sit where they were and rise out of a zero-width window */
abf-d[data-gh]:not([data-gh="o"]){width:0!important;clip-path:inset(calc(-1 * var(--ct,.04em)) -100em calc(-1 * var(--cb,.04em)) 0)!important}
abf-c[data-gh]{animation:abf-gh var(--dg,300ms) cubic-bezier(.3,.7,.2,1) both!important;animation-delay:var(--b,0ms)!important}
abf-c[data-gh]::before{content:"\200B"}
abf-c[data-gh]::after{content:attr(data-r);position:absolute;left:0;top:0;white-space:pre;text-align:left;line-height:var(--lh);pointer-events:none}
/* ...and fold to nothing once out of sight, so they stop counting towards anyone's scrollWidth */
@keyframes abf-gh{from{transform:translate3d(0,0,0)}99%{transform:translate3d(0,calc(-1 * var(--ls,1.32em)),0)}to{transform:translate3d(0,calc(-1 * var(--ls,1.32em)),0) scale(0)}}


/* text the translator rewrites structurally (accent titles) or gradient text: the element slides as one */
[data-abf-el="o"]{animation:abf-eo 100ms cubic-bezier(.55,0,.85,.4) both!important}
[data-abf-el="i"]{animation:abf-ei 480ms cubic-bezier(.16,1,.3,1) both!important}
[data-abf-d="1"]{animation-delay:10ms!important}[data-abf-d="2"]{animation-delay:20ms!important}[data-abf-d="3"]{animation-delay:30ms!important}
[data-abf-d="4"]{animation-delay:40ms!important}[data-abf-d="5"]{animation-delay:50ms!important}[data-abf-d="6"]{animation-delay:60ms!important}
[data-abf-d="7"]{animation-delay:70ms!important}[data-abf-d="8"]{animation-delay:80ms!important}[data-abf-d="9"]{animation-delay:90ms!important}
@keyframes abf-eo{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(0,-.32em,0);opacity:0}}
@keyframes abf-ei{from{transform:translate3d(0,.5em,0);opacity:0}45%{opacity:1}to{transform:translate3d(0,0,0);opacity:1}}

/* crossfade: long text, anything over budget, reduced motion. The new lines fade in while the old
   lines (ghosts, where they stood) fade out. */
abf-l[data-p="i"][data-m="v"]>abf-u,abf-l[data-p="i"][data-m="v"]>abf-ln>abf-u{animation:abf-fi var(--du,220ms) ease-out both!important;animation-delay:var(--fd,0ms)!important}
abf-o[data-f]{animation:abf-fo var(--fo,140ms) cubic-bezier(.2,0,.4,1) both!important}
@keyframes abf-fo{from{opacity:1}to{opacity:0}}
@keyframes abf-fi{from{opacity:0}to{opacity:1}}

/* reduced motion: never move, only fade (the script also builds fades only) */
@media (prefers-reduced-motion: reduce){
  [data-abf-el="o"]{animation-name:abf-fo!important;animation-delay:0ms!important}
  [data-abf-el="i"],abf-c[data-k]{animation-name:abf-fi!important;animation-delay:0ms!important}
  abf-c[data-x]{animation-name:abf-fo!important;animation-delay:0ms!important}
  abf-c[data-k]::after,abf-d[data-gh]{display:none!important}
  abf-c[data-r]::after{animation:none}
}

/* if the v138 fader is still wired underneath, keep its fade out of the way */
html[data-abf-on] body.ab-lang-out .ab-lang-fade,html[data-abf-on] body.ab-lang-in .ab-lang-fade{opacity:1!important;transform:none!important;transition:none!important}
