/*!
 * Themeasy — Sticky Scroll-Sync
 *
 * A pinned media column that swaps in step with a scrolling list of content
 * blocks (the "scrollytelling" pattern).
 *
 * Layering:
 * - Desktop (JS active): a two-column grid. The media column is `position:
 *   sticky`; GSAP crossfades the stage media and recedes the inactive steps as
 *   each step crosses the viewport centre. The inline per-step media is hidden.
 * - Editor (--static): the same two-column composition, minus the scroll
 *   mechanics — steps keep their natural height, nothing is dimmed and the
 *   progress rail is hidden, so the widget stays compact and editable in place.
 *   The stage follows the pointer (themeasy-el-preview.min.js).
 * - Fallback (touch / reduced motion / no GSAP): a single column with each
 *   step's media shown inline above its text. The sticky stage is hidden,
 *   nothing is dimmed, and the widget reads as a plain content list.
 *
 * Tokens consumed: --tms-primary-color, --tms-heading-color, --tms-body-color,
 * --tms-surface-color, --tms-border-color, --tms-white-color (public --tms-*
 * design API).
 *
 * @author Themeasy
 * @link https://themeasy.co
 * @since 1.0.0
 */
.tms-scroll-sync{--tms-sy-offset:96px;--tms-sy-gap:64px;--tms-sy-media-width:46%;--tms-sy-media-height:70vh;--tms-sy-step-min-height:70vh;--tms-sy-step-gap:48px;--tms-sy-radius:24px;--tms-sy-index-size:40px;--tms-sy-index-border:1.5px;--tms-sy-index-gap:12px;--tms-sy-icon-gap:10px;--tms-sy-fade:.6s;--tms-sy-accent:var(--tms-primary-color,#6c5ce7);--tms-sy-ease:cubic-bezier(.22, 1, .36, 1);width:100%;position:relative}.tms-scroll-sync__layout{display:block}.tms-scroll-sync__media-col{display:none}.tms-scroll-sync__media-stage{width:100%;height:var(--tms-sy-media-height);border-radius:var(--tms-sy-radius);background-color:var(--tms-surface-color,#fff);isolation:isolate;position:relative;overflow:hidden}.tms-scroll-sync__media{opacity:0;transition:opacity var(--tms-sy-fade) var(--tms-sy-ease);position:absolute;top:0;bottom:0;left:0;right:0}.tms-scroll-sync__media.is-active{opacity:1}.tms-scroll-sync__media-inner{position:absolute;top:0;bottom:0;left:0;right:0}.tms-scroll-sync:not(.tms-scroll-sync--static):not(.tms-scroll-sync--fallback) .tms-scroll-sync__media-inner{will-change:transform}.tms-scroll-sync__media-inner .tms-scroll-sync__image{object-fit:cover;width:100%;height:100%;display:block}.tms-scroll-sync__steps{position:relative}.tms-scroll-sync__step{flex-direction:column;justify-content:center;display:flex;position:relative}.tms-scroll-sync__step:not(:last-child){margin-bottom:var(--tms-sy-step-gap)}.tms-scroll-sync__step-media{border-radius:var(--tms-sy-radius);aspect-ratio:4/3;width:100%;margin-bottom:24px;position:relative;overflow:hidden}.tms-scroll-sync__step-media .tms-scroll-sync__media-inner{position:absolute}.tms-scroll-sync__step-body{flex-direction:column;display:flex}.tms-scroll-sync__step-meta{align-items:center;gap:var(--tms-sy-index-gap);margin-bottom:14px;display:flex}.tms-scroll-sync__step-index{width:var(--tms-sy-index-size);height:var(--tms-sy-index-size);font-family:var(--tms-heading-font);font-variant-numeric:tabular-nums;color:var(--tms-sy-accent);border:var(--tms-sy-index-border) solid var(--tms-border-color,#8080804d);transition:color .4s var(--tms-sy-ease), border-color .4s var(--tms-sy-ease), background-color .4s var(--tms-sy-ease);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:.875rem;font-weight:700;display:inline-flex}.tms-scroll-sync__step.is-active .tms-scroll-sync__step-index{color:var(--tms-white-color,#fff);background-color:var(--tms-sy-accent);border-color:var(--tms-sy-accent)}.tms-scroll-sync--index-plain .tms-scroll-sync__step-index{background-color:#0000;border:0;width:auto;height:auto}.tms-scroll-sync--index-plain .tms-scroll-sync__step.is-active :where(.tms-scroll-sync__step-index){color:var(--tms-sy-accent);background-color:#0000;border-color:#0000}.tms-scroll-sync__step-eyebrow{font-family:var(--tms-accent-font);letter-spacing:.18em;text-transform:uppercase;color:var(--tms-sy-accent);transition:color .4s var(--tms-sy-ease);font-size:.75rem;font-weight:600}.tms-scroll-sync__step-title{color:var(--tms-heading-color,#0a0c14);margin:0 0 14px;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.12}.tms-scroll-sync__step-text{color:var(--tms-body-color,#4b5563);margin:0;font-size:1rem;line-height:1.7}.tms-scroll-sync__step-text>:last-child{margin-bottom:0}.tms-scroll-sync__button{align-items:center;gap:var(--tms-sy-icon-gap);-webkit-appearance:none;appearance:none;color:var(--tms-white-color,#fff);background-color:var(--tms-sy-accent);cursor:pointer;transition:transform .4s var(--tms-sy-ease), background-color .3s ease, color .3s ease, border-color .3s ease;border:1px solid #0000;border-radius:100px;align-self:flex-start;margin-top:28px;padding:14px 28px;font-family:inherit;font-size:.875rem;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.tms-scroll-sync__button:hover{transform:translateY(-2px)}.tms-scroll-sync__button:focus-visible{transform:translateY(-2px)}.tms-scroll-sync__button-icon{transition:transform .4s var(--tms-sy-ease);flex:none;justify-content:center;align-items:center;font-size:1.15em;line-height:0;display:inline-flex}.tms-scroll-sync__button-icon svg{fill:currentColor;width:1em;height:1em}.tms-scroll-sync__button-icon svg[fill=none]{fill:none;stroke:currentColor}.tms-scroll-sync__button-icon img{width:1em;height:1em}.tms-scroll-sync__button-icon i{font-size:inherit;line-height:1}.tms-scroll-sync__button:hover .tms-scroll-sync__button-icon{transform:translate(4px)}.tms-scroll-sync__button:focus-visible .tms-scroll-sync__button-icon{transform:translate(4px)}.tms-scroll-sync--icon-left .tms-scroll-sync__button{flex-direction:row-reverse}.tms-scroll-sync--icon-left .tms-scroll-sync__button:hover .tms-scroll-sync__button-icon{transform:translate(-4px)}.tms-scroll-sync--icon-left .tms-scroll-sync__button:focus-visible .tms-scroll-sync__button-icon{transform:translate(-4px)}.tms-scroll-sync__progress{background-color:var(--tms-border-color,#80808040);border-radius:100px;width:2px;display:none;position:absolute;top:0;bottom:0;overflow:hidden}.tms-scroll-sync__progress:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.tms-scroll-sync__progress:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.tms-scroll-sync__progress:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.tms-scroll-sync__progress:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.tms-scroll-sync__progress-fill{transform-origin:top;border-radius:inherit;background-color:var(--tms-sy-accent);position:absolute;top:0;bottom:0;left:0;right:0;transform:scaleY(0)}@media (min-width:768px){.tms-scroll-sync__layout{grid-template-columns:var(--tms-sy-media-width) 1fr;gap:var(--tms-sy-gap);align-items:start;display:grid}.tms-scroll-sync--media-right .tms-scroll-sync__layout{grid-template-columns:1fr var(--tms-sy-media-width)}.tms-scroll-sync--media-right .tms-scroll-sync__media-col{order:2}.tms-scroll-sync__media-col{top:var(--tms-sy-offset);display:block;position:sticky}.tms-scroll-sync__step-media{display:none}.tms-scroll-sync__step{min-height:var(--tms-sy-step-min-height)}.tms-scroll-sync__step:not(:last-child){margin-bottom:0}.tms-scroll-sync__steps{padding-inline-start:var(--tms-sy-gap)}.tms-scroll-sync:not(.tms-scroll-sync--static):not(.tms-scroll-sync--fallback) .tms-scroll-sync__step{opacity:.4;transition:opacity .5s var(--tms-sy-ease)}.tms-scroll-sync:not(.tms-scroll-sync--static):not(.tms-scroll-sync--fallback) .tms-scroll-sync__step.is-active{opacity:1}.tms-scroll-sync:not(.tms-scroll-sync--static):not(.tms-scroll-sync--fallback) .tms-scroll-sync__progress{display:block}}.tms-scroll-sync--static .tms-scroll-sync__step{min-height:0}.tms-scroll-sync--static .tms-scroll-sync__step:not(:last-child){margin-bottom:var(--tms-sy-step-gap)}.tms-scroll-sync--static .tms-scroll-sync__steps{padding-inline-start:0}.tms-scroll-sync--fallback .tms-scroll-sync__layout{display:block}.tms-scroll-sync--fallback .tms-scroll-sync__media-col{display:none}.tms-scroll-sync--fallback .tms-scroll-sync__step-media{display:block}.tms-scroll-sync--fallback .tms-scroll-sync__step{opacity:1;min-height:0}.tms-scroll-sync--fallback .tms-scroll-sync__step:not(:last-child){margin-bottom:var(--tms-sy-step-gap)}.tms-scroll-sync--fallback .tms-scroll-sync__steps{padding-inline-start:0}.tms-scroll-sync--fallback .tms-scroll-sync__progress{display:none}@media (prefers-reduced-motion:reduce){.tms-scroll-sync__button,.tms-scroll-sync__button-icon,.tms-scroll-sync__media,.tms-scroll-sync__step,.tms-scroll-sync__step-index,.tms-scroll-sync__step-eyebrow{transition:none}}