/* ---------- Animated headline ---------- */
.sr-ah{--sr-ah-cursor:var(--sr-brand)}
.sr-ah__words{display:inline-block;position:relative;vertical-align:top;text-align:left;color:var(--sr-brand);
  white-space:nowrap;transition:width .5s var(--sr-ease)}
.sr-ah__word{display:inline-block;position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.sr-ah__word.is-visible{position:relative;opacity:1}
.sr-ah__word i{font-style:normal;display:inline-block}
.sr-ah__word.is-static{animation:none!important}

/* Word effects */
.sr-ah--flip .sr-ah__words,
.sr-ah--swirl .sr-ah__words,
.sr-ah--blinds .sr-ah__words{perspective:300px}
.sr-ah--flip .sr-ah__word{transform-origin:50% 100%;backface-visibility:hidden}
.sr-ah--flip .sr-ah__word.is-visible{animation:sr-ah-flip-in .6s both}
.sr-ah--flip .sr-ah__word.is-hidden{animation:sr-ah-flip-out .6s both}
@keyframes sr-ah-flip-in{0%{transform:rotateX(180deg);opacity:0}35%{transform:rotateX(120deg);opacity:0}65%{opacity:0}100%{transform:rotateX(360deg);opacity:1}}
@keyframes sr-ah-flip-out{0%{transform:rotateX(0);opacity:1}35%{transform:rotateX(-40deg);opacity:1}65%{opacity:0}100%{transform:rotateX(180deg);opacity:0}}

.sr-ah--drop-in .sr-ah__word.is-visible{animation:sr-ah-drop-in .6s both}
.sr-ah--drop-in .sr-ah__word.is-hidden{animation:sr-ah-drop-out .6s both}
@keyframes sr-ah-drop-in{0%{opacity:0;transform:translateX(-100%)}60%{opacity:1;transform:translateX(8%)}100%{opacity:1;transform:translateX(0)}}
@keyframes sr-ah-drop-out{0%{opacity:1;transform:translateX(0)}40%{opacity:1;transform:translateX(-8%)}100%{opacity:0;transform:translateX(110%)}}

.sr-ah--drop-in .sr-ah__words,
.sr-ah--slide .sr-ah__words,
.sr-ah--slide-down .sr-ah__words{overflow:hidden;vertical-align:bottom}
.sr-ah--slide .sr-ah__word.is-visible{animation:sr-ah-up-in .6s both}
.sr-ah--slide .sr-ah__word.is-hidden{animation:sr-ah-up-out .6s both}
.sr-ah--slide-down .sr-ah__word.is-visible{animation:sr-ah-down-in .6s both}
.sr-ah--slide-down .sr-ah__word.is-hidden{animation:sr-ah-down-out .6s both}
@keyframes sr-ah-up-in{0%{opacity:0;transform:translateY(100%)}60%{opacity:1;transform:translateY(-12%)}100%{opacity:1;transform:translateY(0)}}
@keyframes sr-ah-up-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-100%)}}
@keyframes sr-ah-down-in{0%{opacity:0;transform:translateY(-100%)}60%{opacity:1;transform:translateY(12%)}100%{opacity:1;transform:translateY(0)}}
@keyframes sr-ah-down-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(100%)}}

/* Letter effects: the word stays shown and its letters move */
.sr-ah--letters .sr-ah__word{opacity:1}
.sr-ah--letters .sr-ah__word:not(.is-visible):not(.is-hidden){visibility:hidden}
.sr-ah--swirl .sr-ah__word i,
.sr-ah--blinds .sr-ah__word i,
.sr-ah--wave .sr-ah__word i{opacity:0}
.sr-ah--letters .sr-ah__word i.is-static{opacity:1;animation:none!important;transform:none}

.sr-ah--swirl .sr-ah__word i{transform-style:preserve-3d}
.sr-ah--swirl i.in{animation:sr-ah-swirl-in .5s both}
.sr-ah--swirl i.out{animation:sr-ah-swirl-out .5s both}
@keyframes sr-ah-swirl-in{0%{transform:rotateY(180deg);opacity:0}100%{transform:rotateY(360deg);opacity:1}}
@keyframes sr-ah-swirl-out{0%{transform:rotateY(0);opacity:1}100%{transform:rotateY(-180deg);opacity:0}}

.sr-ah--blinds .sr-ah__word i{transform-origin:50% 0}
.sr-ah--blinds i.in{animation:sr-ah-blinds-in .5s both}
.sr-ah--blinds i.out{animation:sr-ah-blinds-out .5s both}
@keyframes sr-ah-blinds-in{0%{transform:rotateX(-90deg);opacity:0}60%{transform:rotateX(18deg);opacity:1}100%{transform:rotateX(0);opacity:1}}
@keyframes sr-ah-blinds-out{0%{transform:rotateX(0);opacity:1}100%{transform:rotateX(90deg);opacity:0}}

.sr-ah--wave i.in{animation:sr-ah-wave-in .5s both}
.sr-ah--wave i.out{animation:sr-ah-wave-out .5s both}
@keyframes sr-ah-wave-in{0%{transform:translateY(40%) scale(0);opacity:0}60%{transform:translateY(-12%) scale(1.15);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes sr-ah-wave-out{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}

/* Typing */
.sr-ah--typing .sr-ah__word i{position:absolute;visibility:hidden}
.sr-ah--typing .sr-ah__word.is-visible i.in{position:relative;visibility:visible}
.sr-ah--typing .sr-ah__words{padding-right:3px;vertical-align:bottom;transition:background .15s}
.sr-ah--typing .sr-ah__words::after{content:"";position:absolute;right:0;top:12%;height:76%;width:2px;background:var(--sr-ah-cursor)}
.sr-ah--typing.is-running .sr-ah__words::after{animation:sr-ah-blink .9s steps(1) infinite}
.sr-ah--typing .sr-ah__words.is-selected{background:var(--sr-brand-tint)}
.sr-ah--typing .sr-ah__words.is-selected::after{visibility:hidden}
.sr-ah--typing .sr-ah__word.is-visible{min-height:1em}
@keyframes sr-ah-blink{0%{opacity:1}50%{opacity:0}}

/* Clip */
.sr-ah--clip .sr-ah__words{overflow:hidden;vertical-align:bottom;padding-right:2px;transition:width .6s var(--sr-ease)}
.sr-ah--clip .sr-ah__words::after{content:"";position:absolute;right:0;top:10%;height:80%;width:2px;background:var(--sr-ah-cursor);opacity:0;transition:opacity .2s}
.sr-ah--clip .sr-ah__words.is-clipping::after{opacity:1}

/* Highlighted word with a drawn shape */
.sr-ah__hl{position:relative;display:inline-block;isolation:isolate;color:var(--sr-brand)}
.sr-ah__shape{position:absolute;left:-4%;top:-22%;width:108%;height:144%;overflow:visible;pointer-events:none;z-index:-1}
.sr-ah__shape path{fill:none;stroke:var(--sr-accent,#F97316);stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.sr-ah.is-drawn .sr-ah__shape path{stroke-dashoffset:0;
  transition:stroke-dashoffset var(--sr-ah-draw,1200ms) cubic-bezier(.45,.05,.3,1) calc(var(--sr-ah-i,0) * var(--sr-ah-draw,1200ms))}
.sr-ah.is-fading .sr-ah__shape{opacity:0;transition:opacity .4s}
.sr-ah.is-still .sr-ah__shape path{transition:none}
.sr-ah--shape-underline .sr-ah__shape,
.sr-ah--shape-underline_double .sr-ah__shape,
.sr-ah--shape-underline_zigzag .sr-ah__shape,
.sr-ah--shape-curly .sr-ah__shape{top:auto;bottom:-.28em;height:.5em;left:0;width:100%}
/* Underline shapes are drawn below the text, so the headline needs room underneath or the
   line sits on top of whatever follows. "Space under the headline" adds to this. */
.sr-ah--shape-underline,
.sr-ah--shape-underline_double,
.sr-ah--shape-underline_zigzag,
.sr-ah--shape-curly{padding-bottom:.34em}

@media (prefers-reduced-motion:reduce){
  .sr-ah__words,.sr-ah__word,.sr-ah__word i{animation:none!important;transition:none!important}
  .sr-ah__shape path{stroke-dashoffset:0;transition:none!important}
}

/* On a phone a long rotating phrase used to run off the side of the screen, because the
   words are set to never wrap. Wrapping is allowed on small screens, except for the two
   effects whose width is animated (typing and clip), which are kept on one line and
   clipped to the space available. */
@media (max-width:600px){
  .sr-ah__words{white-space:normal;max-width:100%}
  .sr-ah__word{white-space:normal}
  .sr-ah--clip .sr-ah__words,
  .sr-ah--typing .sr-ah__words{white-space:nowrap;max-width:100%;overflow:hidden}
  .sr-ah__hl{overflow-wrap:anywhere}
}