:root {
--mo-accent:      var(--gold, #e7c98f);
--mo-accent-soft: var(--gold-text, #eed6a2);
--mo-accent-grad: var(--gold-grad, linear-gradient(100deg,#f8e0a8 0%,#e7c98f 52%,#c9a35c 100%));
--mo-deep:        var(--bg-deep, #05060b);
--mo-ink:         var(--text, #f4f1ea);
--mo-warm: 255,138,61;
--mo-hot:  255,71,126;
--mo-lit:  255,193,69;
}
html.mo [data-fx~="drift"]      { transform: translate3d(0, calc(var(--p, 0) * -13px), 0); will-change: transform; }
html.mo [data-fx~="drift-soft"] { transform: translate3d(0, calc(var(--p, 0) * -6px), 0); }
html.mo [data-fx~="drift-far"]  { transform: translate3d(0, calc(var(--p, 0) * -24px), 0); }
@media (max-width: 900px) {
html.mo [data-fx~="drift"],
html.mo [data-fx~="drift-soft"],
html.mo [data-fx~="drift-far"] { transform: none; will-change: auto; }
}
html.mo [data-fx~="glow"] {
filter: drop-shadow(0 0 calc(var(--near, 0) * 22px) rgba(var(--mo-lit), calc(var(--near, 0) * .30)));
}
html.mo [data-fx~="ignite"] {
color: color-mix(in srgb, var(--mo-accent-soft) calc(40% + var(--near, 0) * 60%), currentColor);
text-shadow: 0 0 calc(var(--near, 0) * 16px) rgba(var(--mo-lit), calc(var(--near, 0) * .40));
}
html.mo [data-fx~="wash"] { position: relative; }
html.mo [data-fx~="wash"]::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: calc(var(--near, 0) * .85);
transition: opacity .34s ease;
background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
rgba(var(--mo-lit), .10), rgba(var(--mo-lit), .03) 42%, transparent 68%);
}
@media (hover: hover) and (pointer: fine) {
html.mo [data-fx~="wash"]:hover::after { opacity: 1; }
html.mo [data-fx~="lift"] { transition: transform .34s cubic-bezier(.2,.7,.3,1); }
html.mo [data-fx~="lift"]:hover { transform: translateY(-3px); }
}
html.mo [data-fx~="ambient"] {
isolation: isolate; position: relative;
overflow: clip visible;
}
html.mo [data-fx~="ambient"]::after {
content: '';
position: absolute;
z-index: -1;
left: 50%; bottom: max(-18%, -140px);
width: min(120vw, 1400px); aspect-ratio: 2.4;
transform: translate(-50%, calc(var(--p, 0) * 26px));
pointer-events: none;
opacity: calc(var(--near, 0) * .8);
background: radial-gradient(ellipse at 50% 50%,
rgba(var(--mo-warm), .13) 0%, rgba(var(--mo-hot), .06) 38%, transparent 70%);
}
html.mo [data-fx~="edge"] { position: relative; }
html.mo [data-fx~="edge"]::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--mo-lit), calc(.10 + var(--near, 0) * .30)) 22%,
rgba(255,255,255, calc(.22 + var(--near, 0) * .34)) 50%,
rgba(var(--mo-lit), calc(.10 + var(--near, 0) * .30)) 78%,
transparent 100%);
box-shadow: 0 10px 34px -16px rgba(var(--mo-lit), calc(var(--near, 0) * .34));
transition: box-shadow .5s ease;
}
html.mo [data-fx~="depart"] {
--mo-away: max(0, calc(var(--p, 0) * -1));
transform: scale(calc(1 - var(--mo-away) * .05));
opacity: calc(1 - var(--mo-away) * .55);
transform-origin: 50% 0%;
will-change: transform, opacity;
}
.mo-grain {
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
display: none;
overflow: hidden;
}
html.mo-lit .mo-grain { display: block; animation: mo-grain-in 1.4s ease both; }
@keyframes mo-grain-in { from { opacity: 0; } to { opacity: 1; } }
.mo-grain::before,
.mo-grain::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.mo-grain::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
opacity: var(--mo-grain-amount, .05);
mix-blend-mode: overlay;
inset: -50%;
animation: mo-grain-move 1s steps(1) infinite;
}
@keyframes mo-grain-move {
0%   { transform: translate3d(0, 0, 0); }
12%  { transform: translate3d(-2%, 1%, 0); }
25%  { transform: translate3d(1%, -2%, 0); }
37%  { transform: translate3d(-1%, -1%, 0); }
50%  { transform: translate3d(2%, 1%, 0); }
62%  { transform: translate3d(-2%, 2%, 0); }
75%  { transform: translate3d(1%, 1%, 0); }
87%  { transform: translate3d(-1%, 2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.mo-grain::before { animation: none; }
}
.mo-grain::after {
background: radial-gradient(ellipse 118% 82% at calc(var(--lx, .5) * 100%) calc(var(--ly, .42) * 100%),
transparent 42%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.55) 100%);
transition: background .9s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
.mo-grain::after { transition: none; }
}
html.mo [data-fill] { position: relative; }
html.mo [data-fill]::before {
content: '';
position: absolute;
top: -1px; left: 0;
height: 2px; width: 100%;
background: var(--mo-accent-grad);
transform: scaleX(var(--fill, 0));
transform-origin: 0 50%;
}
html.mo [data-sheen] {
background-image: var(--mo-accent-grad);
background-size: 260% 100%;
animation: mo-sheen 7s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mo-sheen { 0%,100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } }
html.mo [data-sheen="text"] {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (hover: hover) and (pointer: fine) {
html.mo [data-magnet] {
transform: translate(var(--px, 0px), var(--py, 0px));
transition: transform .34s cubic-bezier(.2,.8,.3,1);
}
html.mo [data-magnet]:active { transition-duration: .08s; }
}
.mo-rail {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 120;
pointer-events: none;
opacity: var(--scroll-on, 0);
transition: opacity .4s ease;
background: rgba(var(--mo-lit), .10);
}
.mo-rail::before {
content: '';
position: absolute; inset: 0;
background: var(--mo-accent-grad);
transform: scaleX(var(--scroll, 0));
transform-origin: 0 50%;
}
.mo-rail::after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateX(calc(var(--scroll, 0) * var(--rail-w, 100vw)));
will-change: transform;
width: 10px; height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: var(--mo-rail-dot, radial-gradient(circle at 50% 38%, #ffe7a6 0%, #ffc145 34%, #ff8a3d 66%, #ff477e 100%));
box-shadow: 0 0 10px rgba(var(--mo-lit), .55), 0 0 22px rgba(var(--mo-warm), .28);
}
[data-count] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
html.mo [data-reveal]:not([data-reveal=""]) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.mo [data-fx~="drift"], html.mo [data-fx~="drift-soft"], html.mo [data-fx~="drift-far"],
html.mo [data-fx~="glow"], html.mo [data-fx~="ignite"], html.mo [data-magnet] {
transform: none !important; filter: none !important; text-shadow: none !important;
}
html.mo [data-sheen] { animation: none !important; background-position: 0 50%; }
html.mo [data-fx~="ambient"]::after { display: none; }
html.mo [data-fill]::before { transform: scaleX(1); }
html.mo [data-fx~="depart"] { transform: none !important; opacity: 1 !important; }
.mo-grain, html.mo-lit .mo-grain { animation: none !important; }
.mo-grain::before { display: none; }
.mo-rail { display: none; }
}
@media (max-width: 900px) {
.mo-grain, html.mo-lit .mo-grain,
.mo-grain::before, .mo-grain::after { display: none; }
}