/* OnScroll transition effects. Managed in WebMaster > OnScroll effects. Values come from --sx-* variables. */
:root{--sx-d:800ms;--sx-del:0ms;--sx-dist:60px;--sx-z:.82;--sx-r:14deg;--sx-b:12px;--sx-op:0;--sx-ease:cubic-bezier(.22,1,.36,1)}
main{overflow-x:clip}
.sfx{transition:opacity var(--sx-d) var(--sx-ease) var(--sx-del),transform var(--sx-d) var(--sx-ease) var(--sx-del),filter var(--sx-d) var(--sx-ease) var(--sx-del),clip-path var(--sx-d) var(--sx-ease) var(--sx-del);will-change:opacity,transform}
.sfx.sfx-reset{transition:none!important}
.sfx:not(.in){opacity:var(--sx-op)}
.sfx.in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
.sfx[data-e="zoom-in"]:not(.in){transform:scale(var(--sx-z))}
.sfx[data-e="zoom-out"]:not(.in){transform:scale(calc(2 - var(--sx-z)))}
.sfx[data-e="fade-up"]:not(.in){transform:translateY(var(--sx-dist))}
.sfx[data-e="fade-down"]:not(.in){transform:translateY(calc(var(--sx-dist) * -1))}
.sfx[data-e="fade-left"]:not(.in){transform:translateX(calc(var(--sx-dist) * -1))}
.sfx[data-e="fade-right"]:not(.in){transform:translateX(var(--sx-dist))}
.sfx[data-e="slide-up"]:not(.in){transform:translateY(calc(var(--sx-dist) * 2.5));opacity:1}
.sfx[data-e="slide-down"]:not(.in){transform:translateY(calc(var(--sx-dist) * -2.5));opacity:1}
.sfx[data-e="slide-left"]:not(.in){transform:translateX(calc(var(--sx-dist) * -2.5));opacity:1}
.sfx[data-e="slide-right"]:not(.in){transform:translateX(calc(var(--sx-dist) * 2.5));opacity:1}
.sfx[data-e="zoom-up"]:not(.in){transform:translateY(var(--sx-dist)) scale(var(--sx-z))}
.sfx[data-e="zoom-down"]:not(.in){transform:translateY(calc(var(--sx-dist) * -1)) scale(var(--sx-z))}
.sfx[data-e="flip-x"]:not(.in){transform:perspective(900px) rotateX(70deg)}
.sfx[data-e="flip-y"]:not(.in){transform:perspective(900px) rotateY(70deg)}
.sfx[data-e="flip-left"]:not(.in){transform:perspective(900px) rotateY(-70deg);transform-origin:left center}
.sfx[data-e="flip-right"]:not(.in){transform:perspective(900px) rotateY(70deg);transform-origin:right center}
.sfx[data-e="rotate-left"]:not(.in){transform:translateX(calc(var(--sx-dist) * -1)) rotate(calc(var(--sx-r) * -1))}
.sfx[data-e="rotate-right"]:not(.in){transform:translateX(var(--sx-dist)) rotate(var(--sx-r))}
.sfx[data-e="blur"]:not(.in){filter:blur(var(--sx-b))}
.sfx[data-e="blur-up"]:not(.in){filter:blur(var(--sx-b));transform:translateY(var(--sx-dist))}
.sfx[data-e="skew-left"]:not(.in){transform:translateX(calc(var(--sx-dist) * -1)) skewX(var(--sx-r))}
.sfx[data-e="skew-right"]:not(.in){transform:translateX(var(--sx-dist)) skewX(calc(var(--sx-r) * -1))}
.sfx[data-e="bounce-up"]{--sx-ease:cubic-bezier(.34,1.7,.5,1)}
.sfx[data-e="bounce-up"]:not(.in){transform:translateY(calc(var(--sx-dist) * 1.6))}
.sfx[data-e="drop"]{--sx-ease:cubic-bezier(.34,1.7,.5,1)}
.sfx[data-e="drop"]:not(.in){transform:translateY(calc(var(--sx-dist) * -1.6))}
.sfx[data-e="swing"]{--sx-ease:cubic-bezier(.34,1.45,.55,1)}
.sfx[data-e="swing"]:not(.in){transform:perspective(900px) rotateX(-70deg);transform-origin:top center}
.sfx[data-e="expand-x"]:not(.in){transform:scaleX(.25)}
.sfx[data-e="expand-y"]:not(.in){transform:scaleY(.25);transform-origin:top center}
.sfx[data-e="reveal-left"]:not(.in){clip-path:inset(0 100% 0 0);opacity:1}
.sfx[data-e="reveal-up"]:not(.in){clip-path:inset(100% 0 0 0);opacity:1}
@media (prefers-reduced-motion:reduce){.sfx.sfx-respect{transition:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}}