/* site-craft motion kit v1 transform/opacity only · ease-out-quint · entrances once · RTL-first · reduced-motion + no-JS safe Requires motion.js and the head snippet that adds .m-js to (see MOTION.md). */ :root{ --m-ease:cubic-bezier(.22,1,.36,1); --m-ink:#1c2a37;--m-ink-rgb:28,42,55; --m-accent:#8c483d;--m-accent-rgb:140,72,61; --m-soft-rgb:217,231,233; --m-card:#fffdf9;--m-bg:#f8f5ef; } /* ---------- reveal + stagger ---------- */ .m-js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--m-ease),transform .8s var(--m-ease)} .m-js [data-reveal].m-in{opacity:1;transform:none} .m-js [data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--m-ease),transform .8s var(--m-ease);transition-delay:calc(var(--m-i,0) * var(--m-step,110ms))} .m-js [data-stagger].m-in>*{opacity:1;transform:none} /* ---------- word rise (data-split) ---------- */ .m-split .m-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .18em;margin:-.08em 0 -.18em} .m-split .m-w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--m-ease);transition-delay:calc(var(--m-i,0) * 55ms)} .m-split.m-in .m-w>span{transform:none} /* ---------- draw: underline / strike / circle ---------- */ [data-draw]{position:relative;white-space:nowrap} [data-draw]::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.1em;height:.32em;pointer-events:none;background:var(--m-draw,var(--m-accent));opacity:var(--m-draw-op,.6); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 80 18, 120 9 S 180 6, 197 12' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 80 18, 120 9 S 180 6, 197 12' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; transform-origin:right center} html[dir="ltr"] [data-draw]::after{transform-origin:left center} [data-draw="strike"]::after{bottom:auto;top:48%;height:.2em;left:-4%;right:-4%;--m-draw-op:1; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 50 2, 100 10, 150 5 S 190 7, 198 5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 50 2, 100 10, 150 5 S 190 7, 198 5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")} [data-draw="circle"]::after{inset:-22% -10%;height:auto;--m-draw-op:.75; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M104 5 C 34 3, 4 20, 9 36 C 16 58, 172 60, 193 35 C 205 18, 158 1, 78 8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M104 5 C 34 3, 4 20, 9 36 C 16 58, 172 60, 193 35 C 205 18, 158 1, 78 8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")} .m-js [data-draw]::after{transform:scaleX(0);transition:transform .9s var(--m-ease) var(--m-delay,.35s)} .m-js [data-draw].m-in::after{transform:scaleX(1)} .m-js [data-draw="circle"]::after{transform:scale(.6) rotate(-10deg);opacity:0;transition:transform .7s var(--m-ease) var(--m-delay,.35s),opacity .3s ease-out var(--m-delay,.35s)} .m-js [data-draw="circle"].m-in::after{transform:rotate(-3deg);opacity:var(--m-draw-op)} /* ---------- slam (stamp / one-word answer) ---------- */ [data-slam]{display:inline-block;transform:rotate(var(--m-rot,-6deg))} .m-js [data-slam]{opacity:0;transform:rotate(calc(var(--m-rot,-6deg) * 2.4)) scale(2)} .m-js [data-slam].m-in{opacity:1;transform:rotate(var(--m-rot,-6deg));transition:opacity .2s ease-out var(--m-delay,.3s),transform .6s var(--m-ease) var(--m-delay,.3s)} /* ---------- progress bar + topbar ---------- */ .m-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;background:var(--m-accent);transform-origin:right center;transform:scaleX(var(--m-sp,0))} html[dir="ltr"] .m-progress{transform-origin:left center} [data-topbar]{transition:box-shadow .3s,background-color .3s} [data-topbar].m-scrolled{box-shadow:0 8px 24px rgba(var(--m-ink-rgb),.08)} /* ---------- ticker ---------- */ .m-ticker{overflow:hidden;direction:ltr} .m-ticker-track{display:flex;width:max-content;animation:m-marquee var(--m-speed,40s) linear infinite} [data-ticker="ltr"] .m-ticker-track{animation-name:m-marquee-ltr} .m-ticker-group{display:flex;align-items:center;flex:0 0 auto} .m-ticker-group>*{unicode-bidi:plaintext;white-space:nowrap} .m-ticker:hover .m-ticker-track{animation-play-state:paused} @keyframes m-marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}} @keyframes m-marquee-ltr{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- timeline (process) ---------- */ .m-tl{position:relative;--m-p:0} .m-tl .m-tl-list{position:relative;display:grid;gap:30px;margin:0;padding:0;list-style:none} .m-tl-track{position:absolute;top:0;bottom:36px;left:50%;width:3px;margin-left:-1.5px;border-radius:3px;background:rgba(var(--m-ink-rgb),.1)} .m-tl-fill{position:absolute;inset:0;border-radius:3px;background:var(--m-ink);transform-origin:top center;transform:scaleY(var(--m-p))} .m-tl-dot{position:absolute;top:0;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--m-ink);box-shadow:0 0 0 6px rgba(var(--m-ink-rgb),.14);transform:translateY(var(--m-tip,0px));opacity:calc(var(--m-p) * 60)} .m-tl-item{position:relative;display:grid;grid-template-columns:1fr 76px 1fr;align-items:center} @media(min-width:761px){.m-tl-item+.m-tl-item{margin-top:-64px}} .m-tl-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--m-bg);border:2px solid rgba(var(--m-ink-rgb),.18);color:var(--m-ink);font-weight:700;font-size:1.15em;transition:background .45s,border-color .45s,color .45s,transform .6s var(--m-ease)} .m-tl-node b,.m-tl-node svg{grid-area:1/1;color:inherit;transition:opacity .35s,transform .45s var(--m-ease)} .m-tl-node svg{width:22px;height:22px;opacity:0;transform:scale(.3) rotate(-30deg)} .m-tl-item.is-done .m-tl-node{background:var(--m-ink);border-color:var(--m-ink);color:var(--m-card)} .m-tl-item.is-done .m-tl-node b{opacity:0;transform:scale(.3)} .m-tl-item.is-done .m-tl-node svg{opacity:1;transform:none} .m-tl-item.is-on .m-tl-node{transform:scale(1.14)} .m-tl-item.is-on .m-tl-node b{opacity:1;transform:none} .m-tl-item.is-on .m-tl-node svg{opacity:0;transform:scale(.3)} .m-tl-item.is-on .m-tl-node::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(var(--m-ink-rgb),.35);animation:m-pulse 2s ease-out infinite} .m-tl-card{grid-column:1;grid-row:1;position:relative;background:var(--m-card);border-radius:16px;padding:24px 26px 22px;border:1px solid rgba(var(--m-ink-rgb),.08);box-shadow:0 10px 20px rgba(var(--m-ink-rgb),.06);transition:box-shadow .45s,border-color .45s,opacity .9s var(--m-ease),transform .9s var(--m-ease)} .m-tl-item:nth-child(even) .m-tl-card{grid-column:3} .m-tl.is-live .m-tl-card{opacity:0;transform:translateX(48px)} .m-tl.is-live .m-tl-item:nth-child(even) .m-tl-card{transform:translateX(-48px)} .m-tl.is-live .m-tl-item.is-seen:nth-child(n) .m-tl-card{opacity:1;transform:none} .m-tl-item.is-on .m-tl-card{border-color:rgba(var(--m-ink-rgb),.2);box-shadow:0 24px 48px rgba(var(--m-ink-rgb),.13)} .m-tl-end{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px;text-align:center} .m-tl-end-mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--m-bg);border:2px dashed rgba(var(--m-ink-rgb),.28);color:var(--m-ink);transition:background .5s,color .5s,border-color .5s,transform .8s var(--m-ease)} .m-tl-end-mark svg{width:34px;height:34px} .m-tl.is-complete .m-tl-end-mark{background:var(--m-accent);border:2px solid var(--m-accent);color:var(--m-card);transform:rotate(-24deg) scale(1.1)} @media(max-width:760px){ .m-tl .m-tl-list{gap:18px} .m-tl-track{left:auto;right:21px;margin:0;bottom:22px} .m-tl-dot{left:auto;right:1.5px;margin:-7px -7px 0 0} .m-tl-item{grid-template-columns:44px 1fr;column-gap:14px;align-items:start} .m-tl-node{grid-column:1;width:44px;height:44px;margin-top:20px;font-size:1em} .m-tl-card,.m-tl-item:nth-child(even) .m-tl-card{grid-column:2;padding:18px} .m-tl.is-live .m-tl-card,.m-tl.is-live .m-tl-item:nth-child(even) .m-tl-card{transform:translateX(-28px)} .m-tl-end{flex-direction:row;gap:14px;margin-top:20px;text-align:start} .m-tl-end-mark{width:44px;height:44px} .m-tl-end-mark svg{width:22px;height:22px} } html[dir="ltr"] .m-tl.is-live .m-tl-card{transform:translateX(-48px)} html[dir="ltr"] .m-tl.is-live .m-tl-item:nth-child(even) .m-tl-card{transform:translateX(48px)} @media(max-width:760px){ html[dir="ltr"] .m-tl-track{right:auto;left:21px} html[dir="ltr"] .m-tl-dot{right:auto;left:1.5px;margin:-7px 0 0 -7px} html[dir="ltr"] .m-tl.is-live .m-tl-card,html[dir="ltr"] .m-tl.is-live .m-tl-item:nth-child(even) .m-tl-card{transform:translateX(28px)} } /* ---------- parallax ---------- */ [data-parallax]{transform:translate3d(0,var(--m-py,0px),0) scale(var(--m-scale,1.12));will-change:transform} /* ---------- desktop: spotlight ---------- */ @media(hover:hover) and (pointer:fine){ :where([data-spot]){position:relative} [data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s; background:radial-gradient(var(--m-spot-size,340px) circle at var(--m-mx,50%) var(--m-my,50%),rgba(var(--m-soft-rgb),.9),transparent 65%);mix-blend-mode:multiply} [data-spot="dark"]::after{background:radial-gradient(300px circle at var(--m-mx,50%) var(--m-my,50%),rgba(255,255,255,.13),transparent 65%);mix-blend-mode:normal} [data-spot]:hover::after{opacity:1} } /* ---------- small loops (attention, use sparingly) ---------- */ .m-shine{position:relative;overflow:hidden;isolation:isolate} .m-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);animation:m-shine 5s var(--m-ease) infinite} @keyframes m-shine{0%,72%{left:-60%}100%{left:130%}} .m-pulse{position:relative} .m-pulse::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:m-pulse 2.4s ease-out infinite;pointer-events:none} @keyframes m-pulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}} .m-drift{transform-origin:50% 30%;animation:m-drift 26s ease-in-out infinite alternate} @keyframes m-drift{from{transform:scale(1)}to{transform:scale(1.09) translateY(-1.2%)}} .m-nudge{animation:m-nudge 8s ease-in-out infinite} @keyframes m-nudge{0%,90%,100%{transform:none}93%{transform:rotate(-8deg) scale(1.06)}96%{transform:rotate(8deg) scale(1.06)}} details.m-details[open]>:not(summary){animation:m-fade .35s var(--m-ease)} @keyframes m-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ .m-ticker-track,.m-shine::after,.m-pulse::before,.m-drift,.m-nudge,.m-tl-item.is-on .m-tl-node::after,details.m-details[open]>:not(summary){animation:none} [data-reveal],[data-stagger]>*,.m-split .m-w>span,[data-slam],.m-tl-card{transition:none!important} [data-parallax]{transform:none} }