/*
 * Sneeze It motion layer: the CSS half of motion.js. Copy both unchanged.
 *
 * Every hidden starting state is scoped under html.m-on, so without JS, with a failed
 * load, or under prefers-reduced-motion the page is simply in its final state.
 * Only opacity, translate and scale animate.
 */

/* Reveal on scroll */
.m-on [data-reveal]:not(.m-in){opacity:0;translate:0 12px}
.m-on [data-reveal="fade"]:not(.m-in){translate:none}
.m-on [data-reveal="stagger"]:not(.m-in){opacity:1;translate:none}
.m-on [data-reveal="stagger"]:not(.m-in) > *{opacity:0;translate:0 12px}
.m-on [data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1)}
.m-on [data-reveal="stagger"] > *{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--m-i,0) * 90ms)}

/* Sequences: steps wait hidden until their moment */
.m-on [data-sequence] [data-step]{transition:opacity .45s cubic-bezier(.2,.7,.2,1),translate .45s cubic-bezier(.2,.7,.2,1)}
.m-on [data-sequence] [data-step]:not(.m-show){opacity:0;translate:0 8px}
.m-on [data-sequence].m-out [data-step]{opacity:0;transition-duration:.35s}

/* A step with data-spin: .m-busy parts show while it works, .m-done parts after */
.m-on [data-spin]:not(.done) .m-done{display:none}
[data-spin] .m-busy{display:none}
.m-on [data-spin]:not(.done) .m-busy{display:inline-block}
.m-spinner{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.7;vertical-align:-2px;animation:m-spin .8s linear infinite}
@keyframes m-spin{to{rotate:1turn}}

/* Typing caret while data-type is running */
.m-typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:m-caret .9s steps(1) infinite}
@keyframes m-caret{50%{opacity:0}}

/* One-off flash on a row or card (data-flash on a step, or data-on="x:flash") */
.m-flash,.m-flash > td{animation:m-flash 1.4s ease-out 1}
@keyframes m-flash{0%,100%{background-color:transparent}20%{background-color:rgba(168,106,0,.16)}}

/* Tab panels slide in when swapped */
.m-on [role="tabpanel"]:not([hidden]){animation:m-tab .34s cubic-bezier(.2,.7,.2,1)}
@keyframes m-tab{from{opacity:0;translate:10px 0}to{opacity:1;translate:0 0}}

/* data-glow: a very slow magenta blush drifting behind a hero. The host needs
   position:relative and isolation:isolate; the glow sits at z-index -1 inside it. */
[data-glow]{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:-1}
[data-glow]::before,[data-glow]::after{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.55;will-change:translate}
[data-glow]::before{left:-10%;bottom:-35%;background:radial-gradient(circle,rgba(236,46,145,.45),transparent 65%);animation:m-drift-a 22s ease-in-out infinite alternate}
[data-glow]::after{right:-12%;bottom:-25%;background:radial-gradient(circle,rgba(245,156,200,.6),transparent 65%);animation:m-drift-b 26s ease-in-out infinite alternate}
@keyframes m-drift-a{from{translate:0 0}to{translate:18% -12%}}
@keyframes m-drift-b{from{translate:0 0}to{translate:-16% -18%}}

@media (prefers-reduced-motion:reduce){
  [data-glow]::before,[data-glow]::after,.m-spinner,.m-flash,.m-flash > td,.m-typing::after{animation:none}
}