/* SJA Learning — homepage motion (1 Nov 2026): the SJA-Website-Revamp demo's motion.css, verbatim. Loaded with revamp.css on the homepage. */
/* Faint dots respond to an invisible force around the native cursor. */
.motion-dotfield{position:fixed;inset:0;overflow:hidden;z-index:6;pointer-events:none;contain:strict;opacity:.82}
.motion-dot{display:block;position:absolute;border-radius:50%;background:var(--accent-line);pointer-events:none}
.motion-dot.is-teal{background:var(--teal-line)}
.motion-ready .motion-dot{transition:transform 700ms cubic-bezier(.16,.84,.3,1.25)}
body:has(dialog[open]) .motion-dotfield{visibility:hidden}
.motion-ready .motion-reveal{transition:opacity 600ms ease,translate 600ms cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .motion-reveal.is-pending{opacity:0;translate:0 24px}
.motion-ready .motion-reveal.is-revealed{opacity:1;translate:0 0}
.motion-ready .path-card,.motion-ready .resource-card,.motion-ready .plan-card{transition:opacity 600ms ease,translate 550ms cubic-bezier(.2,.7,.2,1),transform 250ms ease,box-shadow 250ms ease}
.motion-ready .path-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(85,64,199,.09)}
.motion-ready .path-card.caiib:hover{box-shadow:0 12px 30px rgba(17,110,91,.09)}
.motion-ready .plan-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(85,64,199,.09)}
.motion-ready .resource-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(85,64,199,.09)}
.motion-ready .art-sheet{transition:rotate 350ms ease,translate 350ms ease}
.motion-ready .resource-card:hover .art-sheet{rotate:4deg;translate:0 -4px}
.motion-ready .button{position:relative;overflow:hidden;isolation:isolate;transition:transform 200ms ease,box-shadow 200ms ease}
.motion-ready .button:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.23),transparent 90%);translate:-150% 0;transform:skewX(-18deg)}
.motion-ready .button:not(:disabled):hover:after{animation:sja-button-sheen 650ms ease both}
.motion-ready .button>span,.motion-ready .text-link>span:last-child,.motion-ready .path-title>span,.motion-ready .paper-arrow{transition:translate 220ms ease}
.motion-ready .button:hover>span,.motion-ready .text-link:hover>span:last-child{translate:3px 0}
.motion-ready .path-card:hover .path-title>span{translate:3px -3px}
.motion-ready .paper-row:hover .paper-arrow{translate:2px -2px}
.motion-ready.motion-pointer .desk-card{transform:perspective(1000px) rotateX(var(--motion-tilt-y,0deg)) rotateY(var(--motion-tilt-x,0deg)) rotate(-2deg);transform-origin:50% 50%}
.motion-ready .floating-note{animation:sja-note-float 6s ease-in-out infinite}
.motion-ready .spark-one{animation:sja-star-sway 7s ease-in-out infinite}
.motion-ready .closing-star{animation:sja-star-sway 9s ease-in-out infinite}
.motion-ready .session-book{animation:sja-book-bob 5s ease-in-out infinite}
.motion-ready .sun{animation:sja-sun-turn 32s linear infinite}
.motion-ready .underlined:after{transform-origin:0 50%;animation:sja-underline-in 900ms 100ms cubic-bezier(.2,.7,.2,1) both}
.motion-sparkle{position:fixed;z-index:80;pointer-events:none;color:var(--brand);font-size:17px;line-height:1;animation:sja-click-spark 620ms cubic-bezier(.15,.7,.25,1) both;will-change:transform,opacity}
.motion-sparkle.is-teal{color:var(--teal)}
.motion-preference{display:flex;justify-content:flex-end;margin-top:15px}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;border:1px solid var(--accent-line);border-radius:20px;background:transparent;color:var(--brand);font-size:10px;line-height:1.5;cursor:pointer}
.motion-toggle>span:first-child{font-size:14px}
.motion-toggle:hover{background:var(--accent-soft)}
.motion-toggle:disabled{color:var(--muted);cursor:default}
.motion-ready.motion-sleeping .floating-note,.motion-ready.motion-sleeping .spark-one,.motion-ready.motion-sleeping .closing-star,.motion-ready.motion-sleeping .session-book,.motion-ready.motion-sleeping .sun{animation-play-state:paused}
@keyframes sja-note-float{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-7px)}}
@keyframes sja-star-sway{0%,100%{rotate:-7deg}50%{rotate:10deg}}
@keyframes sja-book-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -3px;rotate:-3deg}}
@keyframes sja-sun-turn{to{transform:rotate(360deg)}}
@keyframes sja-button-sheen{from{translate:-150% 0}to{translate:150% 0}}
@keyframes sja-underline-in{from{transform:rotate(-2deg) scaleX(.05);opacity:.3}to{transform:rotate(-2deg) scaleX(1);opacity:1}}
@keyframes sja-click-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(var(--spark-rotation)) scale(.6)}}
@media(hover:none),(pointer:coarse){.motion-sparkle{display:none!important}.motion-ready .path-card:hover,.motion-ready .resource-card:hover,.motion-ready .plan-card:hover{transform:none}.motion-ready .resource-card:hover .art-sheet{rotate:0deg;translate:0 0}.motion-ready .motion-dot{transition:none}}
@media(prefers-reduced-motion:reduce){.motion-sparkle{display:none!important}.motion-reveal.is-pending{opacity:1!important;translate:none!important}.motion-ready .floating-note,.motion-ready .spark-one,.motion-ready .closing-star,.motion-ready .session-book,.motion-ready .sun,.motion-ready .underlined:after,.motion-ready .button:after{animation:none!important}.motion-ready.motion-pointer .desk-card{transform:rotate(-2deg)}.motion-ready .motion-reveal,.motion-ready .art-sheet,.motion-ready .motion-dot{transition:none!important}}