/* St. Joseph's Central School – "SJCS Motion" effects.
   Hidden start states apply only when the motion script is running (html.sjm-js)
   and are removed for visitors who prefer reduced motion. */
:root{--sjm-dur:900ms;--sjm-delay:0ms;--sjm-ease:cubic-bezier(.22,1,.36,1);--sjm-dist:60px;--sjm-step:120ms;--sjl-dur:6s}

/* ---------- entrance: start states ---------- */
.sjm-js .sjm-pending{transition:opacity var(--sjm-dur) var(--sjm-ease) var(--sjm-delay),transform var(--sjm-dur) var(--sjm-ease) var(--sjm-delay),filter var(--sjm-dur) var(--sjm-ease) var(--sjm-delay),clip-path var(--sjm-dur) var(--sjm-ease) var(--sjm-delay)}
.sjm-js .sjm-pending.sjm-rise{opacity:0;transform:translate3d(0,var(--sjm-dist),0)}
.sjm-js .sjm-pending.sjm-fall{opacity:0;transform:translate3d(0,calc(var(--sjm-dist) * -1),0)}
.sjm-js .sjm-pending.sjm-slide-left{opacity:0;transform:translate3d(calc(var(--sjm-dist) * -1.4),0,0)}
.sjm-js .sjm-pending.sjm-slide-right{opacity:0;transform:translate3d(calc(var(--sjm-dist) * 1.4),0,0)}
.sjm-js .sjm-pending.sjm-zoom-in{opacity:0;transform:scale(.82)}
.sjm-js .sjm-pending.sjm-zoom-out{opacity:0;transform:scale(1.14)}
.sjm-js .sjm-pending.sjm-pop{opacity:0;transform:scale(.6);--sjm-ease:cubic-bezier(.34,1.56,.64,1)}
.sjm-js .sjm-pending.sjm-blur-in{opacity:0;filter:blur(14px);transform:scale(1.04)}
.sjm-js .sjm-pending.sjm-flip-up{opacity:0;transform:perspective(900px) rotateX(55deg) translate3d(0,40px,0);transform-origin:50% 100%}
.sjm-js .sjm-pending.sjm-flip-left{opacity:0;transform:perspective(900px) rotateY(-60deg);transform-origin:0 50%}
.sjm-js .sjm-pending.sjm-swing{opacity:0;transform:perspective(900px) rotateY(80deg);transform-origin:0 50%}
.sjm-js .sjm-pending.sjm-rotate-in{opacity:0;transform:rotate(-12deg) scale(.86)}
.sjm-js .sjm-pending.sjm-skew-in{opacity:0;transform:skewY(6deg) translate3d(0,50px,0)}
.sjm-js .sjm-pending.sjm-curtain{clip-path:inset(0 0 100% 0)}
.sjm-js .sjm-pending.sjm-wipe-right{clip-path:inset(0 100% 0 0)}
.sjm-js .sjm-pending.sjm-circle{clip-path:circle(0% at 50% 50%)}
.sjm-js .sjm-in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
.sjm-js .sjm-in.sjm-circle{clip-path:circle(75% at 50% 50%)}

/* words, typewriter, underline */
.sjm-word{display:inline-block;white-space:pre}
.sjm-js .sjm-pending .sjm-word{opacity:0;transform:translate3d(0,.6em,0) rotate(4deg);filter:blur(4px)}
.sjm-js .sjm-split-words .sjm-word{transition:opacity calc(var(--sjm-dur) * .8) var(--sjm-ease),transform calc(var(--sjm-dur) * .8) var(--sjm-ease),filter calc(var(--sjm-dur) * .8) var(--sjm-ease);transition-delay:calc(var(--sjm-delay) + var(--sjm-step) * var(--w,0))}
.sjm-js .sjm-pending.sjm-split-words{opacity:1}
.sjm-js .sjm-pending .sjm-char{opacity:0}
.sjm-char{transition:opacity .01s linear;transition-delay:calc(var(--sjm-delay) + var(--sjm-step) * var(--c,0) * .35)}
.sjm-js .sjm-pending.sjm-typewriter{opacity:1}
.sjm-typewriter.sjm-in .elementor-heading-title::after{content:"";display:inline-block;width:.08em;height:1em;margin-left:.05em;background:currentColor;vertical-align:-.12em;animation:sjm-caret 1s steps(1) infinite}
@keyframes sjm-caret{50%{opacity:0}}
.sjm-underline .elementor-heading-title{background-image:linear-gradient(transparent 62%,var(--e-global-color-secondary,#F4B223) 62%,var(--e-global-color-secondary,#F4B223) 88%,transparent 88%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size calc(var(--sjm-dur) * 1.2) var(--sjm-ease) calc(var(--sjm-delay) + 200ms)}
.sjm-underline.sjm-in .elementor-heading-title,.sjm-underline:not(.sjm-pending) .elementor-heading-title{background-size:100% 100%}
.sjm-js .sjm-pending.sjm-underline{opacity:0;transform:translate3d(0,20px,0)}

/* stagger children */
.sjm-js .sjm-pending.sjm-stagger,.sjm-js .sjm-pending.sjm-stagger-3d{opacity:1;transform:none}
.sjm-js .sjm-stagger > .sjm-child,.sjm-js .sjm-stagger-3d > .sjm-child,.sjm-js .sjm-stagger > .e-con-inner > .sjm-child,.sjm-js .sjm-stagger-3d > .e-con-inner > .sjm-child{transition:opacity var(--sjm-dur) var(--sjm-ease),transform var(--sjm-dur) var(--sjm-ease);transition-delay:calc(var(--sjm-delay) + var(--sjm-step) * var(--i,0))}
.sjm-js .sjm-pending.sjm-stagger .sjm-child{opacity:0;transform:translate3d(0,var(--sjm-dist),0)}
.sjm-js .sjm-pending.sjm-stagger-3d .sjm-child{opacity:0;transform:perspective(1000px) rotateX(-35deg) rotateY(18deg) translate3d(0,var(--sjm-dist),-80px);transform-origin:50% 0}

/* ---------- hover ---------- */
.sjh-lift{transition:transform .45s var(--sjm-ease),box-shadow .45s var(--sjm-ease)}
.sjh-lift:hover{transform:translate3d(0,-8px,0);box-shadow:0 24px 48px -20px rgba(14,42,71,.35)}
.sjh-tilt{transform-style:preserve-3d;transition:transform .35s ease-out;will-change:transform}
.sjh-glow{transition:box-shadow .4s ease}
.sjh-glow:hover{box-shadow:0 0 0 2px var(--e-global-color-secondary,#F4B223),0 18px 40px -18px var(--e-global-color-secondary,#F4B223)}
.sjh-shine{position:relative;overflow:hidden}
.sjh-shine::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .8s ease;pointer-events:none;z-index:5}
.sjh-shine:hover::after{left:130%}
.sjh-zoom-img img{transition:transform 1.1s var(--sjm-ease)}
.sjh-zoom-img{overflow:hidden}
.sjh-zoom-img:hover img{transform:scale(1.08)}
.sjh-magnetic{transition:transform .25s ease-out}
.sjh-grow{transition:transform .4s var(--sjm-ease)}
.sjh-grow:hover{transform:scale(1.04)}

/* ---------- continuous ---------- */
.sjl-float{animation:sjl-float var(--sjl-dur) ease-in-out infinite}
@keyframes sjl-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.sjl-pulse{animation:sjl-pulse var(--sjl-dur) ease-in-out infinite}
@keyframes sjl-pulse{0%,100%{scale:1}50%{scale:1.04}}
.sjl-spin{animation:sjl-spin calc(var(--sjl-dur) * 4) linear infinite}
@keyframes sjl-spin{to{rotate:360deg}}
.sjl-sway{animation:sjl-sway var(--sjl-dur) ease-in-out infinite;transform-origin:50% 0}
@keyframes sjl-sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.sjl-ken-burns{overflow:hidden}
.sjl-ken-burns img,.sjl-ken-burns.e-con::before,.sjl-ken-burns > .elementor-background-overlay{animation:sjl-kb calc(var(--sjl-dur) * 3) ease-in-out infinite alternate}
@keyframes sjl-kb{from{scale:1}to{scale:1.12}}
.sjl-gradient{background-size:300% 300% !important;animation:sjl-grad calc(var(--sjl-dur) * 2) ease infinite}
@keyframes sjl-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.sjl-marquee,.sjl-ticker-up{overflow:hidden;--sjl-dur:30s}
.sjl-marquee > .e-con-inner,.sjl-marquee:not(:has(> .e-con-inner)){flex-wrap:nowrap !important}
.sjl-marquee .sjl-track{display:flex;gap:inherit;width:max-content;animation:sjl-marquee var(--sjl-dur) linear infinite}
.sjl-marquee:hover .sjl-track,.sjl-ticker-up:hover .sjl-track,.sjl-marquee:focus-within .sjl-track,.sjl-ticker-up:focus-within .sjl-track{animation-play-state:paused}
@keyframes sjl-marquee{to{transform:translate3d(-50%,0,0)}}
.sjl-ticker-up .sjl-track{display:flex;flex-direction:column;gap:inherit;animation:sjl-ticker var(--sjl-dur) linear infinite}
@keyframes sjl-ticker{to{transform:translate3d(0,-50%,0)}}

/* phones: optional off switch */
@media (max-width:767px){
	.sjm-js .sjm-nomobile-yes.sjm-pending{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}
}

/* Elementor editor: show everything while editing, animate only in Preview. */
.elementor-editor-active .sjm-pending{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}
.elementor-editor-active .sjm-pending .sjm-word,.elementor-editor-active .sjm-pending .sjm-char,.elementor-editor-active .sjm-pending .sjm-child{opacity:1 !important;transform:none !important;filter:none !important}

@media (prefers-reduced-motion:reduce){
	.sjm-pending,.sjm-pending *,.sjm-word,.sjm-char,.sjm-child{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important;transition:none !important}
	.sjl-float,.sjl-pulse,.sjl-spin,.sjl-sway,.sjl-ken-burns img,.sjl-gradient,.sjl-marquee .sjl-track,.sjl-ticker-up .sjl-track{animation:none !important}
	.sjh-lift:hover,.sjh-grow:hover,.sjh-zoom-img:hover img{transform:none}
}