/* Shared motion layer for the JOVILAP sample sites. Colors come from --m-bg, --m-ink, --m-accent, --m-accent2 set per site. */
@property --mbeam{syntax:'<angle>';inherits:false;initial-value:0deg}
html.m-loading .hero *,html.m-loading .hero{animation-play-state:paused!important}
.m-loader{position:fixed;inset:0;z-index:9999;background:var(--m-bg);color:var(--m-ink);display:grid;place-content:center;justify-items:center;gap:22px;animation:mOut .65s cubic-bezier(.7,0,.3,1) 1.55s forwards}
.m-name{font:700 clamp(20px,3.2vw,30px)/1.1 var(--m-font,system-ui,sans-serif);letter-spacing:.02em;display:flex;gap:.02em}
.m-name i{font-style:normal;display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px);animation:mUp .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.75s + var(--i)*30ms)}
.m-name i.sp{width:.3em}
.m-bar{width:150px;height:2px;background:color-mix(in srgb,var(--m-ink) 15%,transparent);overflow:hidden;border-radius:2px}
.m-bar::after{content:"";display:block;height:100%;background:var(--m-accent);transform:scaleX(0);transform-origin:left;animation:mGrow 1.3s cubic-bezier(.4,0,.2,1) .15s forwards}
/* stripes (lawn) */
.m-stripes{display:grid;grid-template-columns:repeat(8,12px);gap:4px;height:72px}
.m-stripes i{background:var(--m-accent);border-radius:3px;transform:scaleY(0);animation:mGrowY .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.08s + var(--i)*70ms)}
.m-stripes i:nth-child(even){background:var(--m-accent2);transform-origin:bottom}
.m-stripes i:nth-child(odd){transform-origin:top}
/* gauge (auto) */
.m-gauge{width:150px;height:84px;position:relative}
.m-gauge svg{width:100%;height:100%;overflow:visible}
.m-gauge .arc{fill:none;stroke:color-mix(in srgb,var(--m-ink) 15%,transparent);stroke-width:8;stroke-linecap:round}
.m-gauge .fill{fill:none;stroke:var(--m-accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:mDash 1.2s cubic-bezier(.4,0,.2,1) .15s forwards}
.m-gauge .needle{transform-origin:75px 78px;transform:rotate(-90deg);animation:mNeedle 1.2s cubic-bezier(.4,0,.2,1.3) .15s forwards}
/* bricks (construction) */
.m-bricks{display:grid;gap:5px;width:132px}
.m-bricks div{display:flex;gap:5px}
.m-bricks div:nth-child(2){margin-left:18px}
.m-bricks i{height:20px;flex:1;border-radius:2px;background:var(--m-accent);opacity:0;transform:translateY(-28px);animation:mDrop .45s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.1s + var(--i)*80ms)}
.m-bricks div:nth-child(2) i{background:var(--m-accent2)}
/* hero/heading word blur-in */
.m-w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(12px)}
.m-go .m-w{animation:mUp .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0s) + var(--i)*45ms)}
/* spotlight */
.m-spot-host{position:relative}
.m-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--m-glow,rgba(255,255,255,.12)),transparent 60%);z-index:2}
.m-spot-host:hover>.m-glow{opacity:1}
/* border beam */
.m-beam-host{position:relative}
.m-beam{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;background:conic-gradient(from var(--mbeam),transparent 0deg,transparent 250deg,var(--m-accent) 310deg,var(--m-accent2) 340deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:mBeam 4.5s linear infinite}
/* button shine */
.m-shine-host{position:relative;overflow:hidden;isolation:isolate}
.m-shine{position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none;z-index:1}
.m-shine-host:hover .m-shine{animation:mShine .8s ease}
.m-shine-host.m-auto .m-shine{animation:mShine 1.1s ease 2.4s}
/* marquee */
.m-marq{overflow:hidden;background:var(--m-strip-bg,var(--m-bg));color:var(--m-strip-ink,var(--m-ink));padding-block:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.m-marq .t{display:flex;width:max-content;animation:mMarq 36s linear infinite}
.m-marq .g{display:flex;gap:44px;padding-right:44px}
.m-marq span{display:inline-flex;align-items:center;gap:44px;font:600 17px/1 var(--m-font,system-ui,sans-serif);white-space:nowrap}
.m-marq span::after{content:"";width:7px;height:7px;border-radius:2px;background:var(--m-accent)}
.m-marq:hover .t{animation-play-state:paused}
/* hero light */
.m-rays{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;mix-blend-mode:var(--m-blend,screen)}
.m-rays i{position:absolute;top:-20%;height:130%;width:18%;background:linear-gradient(180deg,var(--m-ray),transparent 75%);filter:blur(30px);animation:mSway 10s ease-in-out infinite alternate}
.m-rays i:nth-child(1){left:18%;transform:skewX(-16deg)}
.m-rays i:nth-child(2){left:44%;width:12%;transform:skewX(-6deg);animation-duration:12s;animation-delay:-4s}
.m-rays i:nth-child(3){left:68%;width:10%;transform:skewX(6deg);animation-duration:14s;animation-delay:-7s}
@keyframes mOut{to{transform:translateY(-100%);visibility:hidden}}
@keyframes mUp{to{opacity:1;filter:none;transform:none}}
@keyframes mGrow{to{transform:scaleX(1)}}
@keyframes mGrowY{to{transform:scaleY(1)}}
@keyframes mDash{to{stroke-dashoffset:0}}
@keyframes mNeedle{to{transform:rotate(90deg)}}
@keyframes mDrop{to{opacity:1;transform:none}}
@keyframes mBeam{to{--mbeam:360deg}}
@keyframes mShine{from{left:-60%}to{left:130%}}
@keyframes mMarq{to{transform:translateX(-50%)}}
@keyframes mSway{from{translate:-4% 0;opacity:.5}to{translate:5% 0;opacity:1}}
@media (prefers-reduced-motion:reduce){
 .m-loader{display:none}
 .m-w{opacity:1;filter:none;transform:none;animation:none!important}
 .m-beam,.m-marq .t,.m-rays i,.m-shine{animation:none!important}
}

:root{--m-bg:#0F0F10;--m-ink:#F2F1EE;--m-accent:#F6E01E;--m-accent2:#FFF6A3;--m-font:"Onest",system-ui,sans-serif;--m-glow:rgba(246,224,30,.10);--m-strip-bg:#161618;--m-ray:rgba(246,224,30,.16)}