body { background:#fff; color:#0a2a3f; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
.no-js .reveal { opacity:1; transform:none; }
@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--r,0deg)); } }
/* blobs morph with the individual rotate/scale properties (compositor, no repaint); transform stays free for .parallax */
@keyframes blob { 0%,100%{ rotate:0deg; scale:1 1; } 33%{ rotate:14deg; scale:1.07 .93; } 66%{ rotate:-10deg; scale:.94 1.06; } }
@keyframes marquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ping2 { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.4); opacity:0; } }
@keyframes dash { to { stroke-dashoffset:0; } }
.floaty { animation:floaty 6s ease-in-out infinite; }
.blob { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; animation:blob 14s ease-in-out infinite; will-change:rotate, scale; }
.marquee-track { animation:marquee 36s linear infinite; width:max-content; }
.marquee-track:hover { animation-play-state:paused; }
.ping2 { animation:ping2 1.8s cubic-bezier(0,0,.2,1) infinite; }
.draw { stroke-dasharray:400; stroke-dashoffset:400; animation:dash 2.4s .6s ease forwards; }
.grain { background-image:radial-gradient(rgba(0,159,227,.18) 1.2px, transparent 1.2px); background-size:22px 22px; }
.stripes { background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 3px, transparent 3px 26px); }

details > summary { list-style:none; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid #FF8A3D; outline-offset:2px; }

/* error page */
@keyframes run { from { transform:translateX(-30vw); } to { transform:translateX(130vw); } }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes swingA { 0%,100% { transform:rotate(-32deg); } 50% { transform:rotate(32deg); } }
@keyframes swingB { 0%,100% { transform:rotate(32deg); } 50% { transform:rotate(-32deg); } }
@keyframes dust { 0% { transform:translate(0,0) scale(.4); opacity:.7; } 100% { transform:translate(-40px,-14px) scale(1.4); opacity:0; } }
@keyframes jump { 0%,100% { transform:translateY(0) rotate(0); } 40% { transform:translateY(-70px) rotate(-12deg); } 70% { transform:translateY(-20px) rotate(6deg); } }
@keyframes wobble { 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
.runner { position:absolute; bottom:18px; left:0; animation:run var(--dur,9s) linear infinite; animation-delay:var(--delay,0s); cursor:pointer; }
.runner .bob { animation:bob .36s ease-in-out infinite; }
.runner.hop .hopper { animation:jump .7s ease-out; }
.leg { transform-box:view-box; }
.la { animation:swingA .36s ease-in-out infinite; }
.lb { animation:swingB .36s ease-in-out infinite; }
.puff { position:absolute; bottom:6px; left:-8px; width:18px; height:18px; border-radius:9999px; background:#e7d8c9; opacity:0; animation:dust .7s ease-out infinite; }
.wobble { animation:wobble 2.4s ease-in-out infinite; }

/* extra motion (home page) */
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes shine { 0%,55% { transform:translateX(-130%) skewX(-20deg); } 100% { transform:translateX(330%) skewX(-20deg); } }
@keyframes wiggle { 0%,100% { transform:rotate(0) scale(1); } 25% { transform:rotate(-9deg) scale(1.08); } 60% { transform:rotate(7deg) scale(1.08); } }
@keyframes rise-t { from { transform:translateY(18px); } to { transform:none; } }
.rise-t { animation:rise-t .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) both; }
.rise { opacity:0; animation:rise .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards; }
.reveal.from-left { transform:translateX(-36px); }
.reveal.from-right { transform:translateX(36px); }
.reveal.in { opacity:1; transform:none; }
.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after { content:''; position:absolute; inset:0 auto 0 0; width:35%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation:shine 4.5s ease-in-out 1.6s infinite; pointer-events:none; }
.group:hover .icon-tile { animation:wiggle .6s ease-in-out; }
.progress { position:fixed; top:0; left:0; right:0; height:4px; z-index:60; background:#FF8A3D; transform:scaleX(0); transform-origin:left; pointer-events:none; }
header.scrolled { box-shadow:0 10px 30px rgba(10,42,63,.08); }

/* more life (always on: motion is not switched off for prefers-reduced-motion, by decision of the user) */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes sheen { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } }
@keyframes sway { 0%,100% { rotate:-4deg; } 50% { rotate:4deg; } }
h1 span.text-brand-500 { background:linear-gradient(90deg,#009FE3,#4fbcef,#FF8A3D,#009FE3); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 6s linear infinite; }
.marquee-track svg { animation:spin 7s linear infinite; }
.sway { animation:sway 9s ease-in-out infinite; }
.parallax { transform:translate(calc(var(--mx,0) * var(--k,20px)), calc(var(--my,0) * var(--k,20px))); transition:transform .4s ease-out; }
header a[aria-label="Mapato"]:hover img { animation:wiggle .6s ease-in-out; }
.group:hover .icon-tile svg { animation:floaty 1.2s ease-in-out infinite; }