/* Gesture (direction C, brand/explorations/16-website-directions). Layered over site.css on the landing page; the type is the site's. The difference is how things move.
   - A word crosses over on its own beat (weave.js queues them STAGGER ms apart): it rises into place and a vermilion
     thread draws under it, then fades. A word going back drops into ink the same way.
   - A new language turns in like a page, hinged at its left edge.
   - The level marker slides between presets while the mix slides (weave.js) and the words cross on the way.
   - The bar rises from the page edge with a bookmark ribbon following it.
   Everything here is off under prefers-reduced-motion. */

:root{--turn:cubic-bezier(.2,.75,.25,1);--spring:cubic-bezier(.3,1.45,.45,1)}

/* ---------------------------------------------------------------- a word crossing */
.x-in,.x-out{display:inline-block;position:relative;animation:.56s var(--turn) both;transform-origin:50% 100%}
.x-in{animation-name:cross-in}
.x-out{animation-name:cross-out}
.x-in::after{content:'';position:absolute;left:0;right:0;bottom:.02em;height:1.5px;background:var(--accent);transform-origin:left;
  animation:thread .9s var(--turn) both;animation-delay:inherit;pointer-events:none}
@keyframes cross-in{
  0%{opacity:0;transform:translateY(.42em) rotateX(-75deg);filter:blur(2px);color:var(--ink)}
  55%{opacity:1;filter:none}
  100%{transform:none}}
@keyframes cross-out{
  0%{opacity:0;transform:translateY(-.36em) rotateX(70deg);color:var(--woven)}
  60%{opacity:1}
  100%{transform:none;color:inherit}}
@keyframes thread{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* at 100% the whole sentence turns over to the original once the last word has crossed, and back */
.x-whole{animation:whole .7s var(--turn) both}
@keyframes whole{0%{opacity:0;transform:translateY(.3em);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}

/* ---------------------------------------------------------------- a language turning in */
.pick-btn.turn,.book-head.turn{animation:turn .7s var(--turn) both;transform-origin:0 60%}
.book-head.turn{transform-origin:0 50%}
@keyframes turn{
  0%{transform:perspective(900px) rotateY(-96deg);opacity:0}
  35%{opacity:1}
  100%{transform:perspective(900px) rotateY(0)}}

/* ---------------------------------------------------------------- the levels: one marker that travels */
@media (min-width:861px){
  .levels{position:relative}
  .levels button,.levels button[aria-pressed=true]{border-top-color:transparent}
  .levels::after{content:'';position:absolute;top:-1px;left:0;width:25%;height:2px;background:var(--ink);transition:transform .7s var(--turn),opacity .3s;opacity:0}
  .levels:has([aria-pressed=true])::after{opacity:1}
  .levels:has(:nth-child(1)[aria-pressed=true])::after{transform:translateX(0)}
  .levels:has(:nth-child(2)[aria-pressed=true])::after{transform:translateX(100%)}
  .levels:has(:nth-child(3)[aria-pressed=true])::after{transform:translateX(200%)}
  .levels:has(:nth-child(4)[aria-pressed=true])::after{transform:translateX(300%)}
}
.levels b{transition:font-weight .2s}

/* ---------------------------------------------------------------- the slider thumb answers the hand */
input[type=range]::-webkit-slider-thumb{transition:transform .18s var(--spring),box-shadow .18s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 2px 8px #1c191740}

/* ---------------------------------------------------------------- the bar: rises from the page edge, a ribbon after it */
.bar{transition:transform .62s var(--spring)}
.bar::before{content:'';position:absolute;left:max(var(--gutter),calc(50% - 380px - 44px));top:-30px;width:18px;height:31px;background:var(--accent);
  clip-path:polygon(0 0,50% 9px,100% 0,100% 100%,0 100%);transform:scaleY(0);transform-origin:bottom;
  transition:transform .7s var(--spring) .16s}
.bar.on::before{transform:none}
.bar .in>*{transition:opacity .4s ease .18s,transform .5s var(--turn) .18s}
.bar:not(.on) .in>*{opacity:0;transform:translateY(10px)}

/* ---------------------------------------------------------------- the word card unfolds from the word */
.card{transform:perspective(700px) rotateX(-22deg) translateY(-6px);transform-origin:50% 0;transition:opacity .2s ease,transform .32s var(--turn)}
.card.above{transform:perspective(700px) rotateX(22deg) translateY(6px);transform-origin:50% 100%}
.card.on{transform:none}

@media (prefers-reduced-motion:reduce){
  .x-in,.x-out,.x-in::after,.turn,.x-whole{animation:none!important}
  .bar::before{transform:none}
  .bar:not(.on) .in>*{opacity:1;transform:none}
}