/* Shared scroll motion (assets/okto-motion.js). Hold states only apply while
   the script runs, so content never depends on it. */
.okto-motion .okto-hold-lines,.okto-motion .okto-hold-list .okto-lead,.okto-motion .okto-hold-list .okto-row>*{opacity:0}
.okto-motion .okto-hold-list .okto-row{border-color:transparent!important;border-image-source:none!important}
.okto-motion .okto-hold-image{clip-path:inset(100% 0 0 0)}

/* Headline lines rise inside their own mask; gradient words paint in after. */
.okto-line{display:block;clip-path:inset(-0.3em -0.6em -0.14em -0.6em)}
.okto-line-inner{display:block;white-space:nowrap;will-change:transform}

/* List dividers draw from the left before their row arrives. */
.okto-rule{position:absolute;left:0;right:0;transform-origin:left center;pointer-events:none}

/* Buttons: the label rolls up to a copy of itself and the arrow leans toward its direction. */
.okto-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.okto-roll-text{display:inline-block}
.okto-roll::after{content:attr(data-label);content:attr(data-label) / "";position:absolute;left:0;top:100%;white-space:nowrap}
.okto-roll-text,.okto-roll::after,.okto-action .button-arrow{transition:transform .36s cubic-bezier(.22,1,.36,1)}
.okto-action:is(:hover,:focus-visible) .okto-roll-text,.okto-action:hover .okto-roll::after,.okto-action:focus-visible .okto-roll::after{transform:translateY(-100%)}
.okto-action:is(:hover,:focus-visible) .button-arrow[data-dir=ne]{transform:translate(3px,-3px)}
.okto-action:is(:hover,:focus-visible) .button-arrow[data-dir=e]{transform:translateX(4px)}
.okto-action:is(:hover,:focus-visible) .button-arrow[data-dir=s]{transform:translateY(3px)}

@media(prefers-reduced-motion:reduce){
 .okto-roll-text,.okto-roll::after,.okto-action .button-arrow{transition:none}
 .okto-action:is(:hover,:focus-visible) :is(.okto-roll-text,.button-arrow),.okto-action:hover .okto-roll::after,.okto-action:focus-visible .okto-roll::after{transform:none}
}
:is(.motion-paused,.bp-motion-paused) :is(.okto-roll-text,.button-arrow),:is(.motion-paused,.bp-motion-paused) .okto-roll::after{transition:none}
@media print{
 .okto-motion :is(.okto-hold-lines,.okto-hold-list .okto-lead,.okto-hold-list .okto-row>*){opacity:1!important}
 .okto-motion .okto-hold-image{clip-path:none!important}
}