/* ==========================================================================
   QM Consulting — motion system
   All animations run regardless of the OS "reduce motion" setting
   (explicit client requirement), so there is deliberately no
   @media (prefers-reduced-motion) override anywhere in this project.
   ========================================================================== */

/* ---------- keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes pulse-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-sm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes float-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .3; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes dash-flow { to { stroke-dashoffset: -32; } }
@keyframes draw-loop {
  0% { stroke-dashoffset: var(--len, 400); }
  45%, 60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: calc(var(--len, 400) * -1); }
}
@keyframes draw-once { to { stroke-dashoffset: 0; } }
@keyframes pop-loop { 0%, 12% { transform: scale(0); } 22%, 80% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
@keyframes bar { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@keyframes flame { 0% { transform: scaleY(.75) scaleX(1.05); } 100% { transform: scaleY(1.15) scaleX(.92); } }
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg); }
  33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; }
  66% { border-radius: 28% 72% 44% 56% / 49% 64% 36% 51%; transform: rotate(180deg); }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 30% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, 9%); } 70% { transform: translate(9%, 4%); } 90% { transform: translate(-1%, 7%); }
}
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes bounce-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes slide-loop { 0% { transform: translateX(-30px); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }
@keyframes squash { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.08, .92); } 60% { transform: scale(.95, 1.06); } }
@keyframes swing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes gauge { 0%, 100% { transform: rotate(-70deg); } 55% { transform: rotate(62deg); } 70% { transform: rotate(48deg); } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes rise { 0% { transform: translateY(20px); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes toggle { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(22px); } 100% { transform: translateX(0); } }
@keyframes toggle-bg { 0%, 40% { background: var(--paper-2); } 50%, 90% { background: var(--volt); } 100% { background: var(--paper-2); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
@keyframes wave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-18%); } 50% { transform: translateY(0); } }
@keyframes curtain-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cookie-in { from { transform: translateY(140%) rotate(-4deg); } to { transform: none; } }
@keyframes crumb { 0%, 60% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(6px, 30px); opacity: 0; } }

/* ---------- page transition curtain ---------- */
.curtain { display: none; }
.js .curtain {
  position: fixed; inset: 0; z-index: var(--z-curtain);
  display: grid; place-items: center; background: var(--ink); color: var(--volt);
  transform: translateY(0); transition: transform .85s var(--ease-io);
  pointer-events: all;
}
.js .curtain::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 100%; height: 12vh;
  background: var(--ink); border-radius: 0 0 50% 50%;
}
.js.is-loaded .curtain { transform: translateY(calc(-100% - 14vh)); pointer-events: none; }
.js.is-leaving .curtain { transform: translateY(0); transition-duration: .6s; pointer-events: all; }
.curtain__inner { display: grid; justify-items: center; gap: 20px; transition: opacity .3s; }
.is-loaded .curtain__inner { opacity: 0; }
.is-leaving .curtain__inner { opacity: 1; transition-delay: .25s; }
.curtain__mark { width: 64px; height: 64px; }
.curtain__mark svg { width: 100%; height: 100%; overflow: visible; }
.curtain__orbit { fill: var(--ember); transform-origin: 20px 20px; animation: spin 1s linear infinite; }
.curtain__bar { width: 120px; height: 3px; background: rgba(212, 255, 63, .18); border-radius: 3px; overflow: hidden; }
.curtain__bar i { display: block; height: 100%; background: var(--volt); transform-origin: left; animation: curtain-bar .7s var(--ease) forwards; }

/* ---------- custom cursor ---------- */
.cursor { display: none; }
/* display:contents keeps the ring un-isolated so mix-blend-mode reaches the page */
.has-cursor .cursor { display: contents; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; border-radius: 50%; will-change: transform; transition: opacity .3s; }
.cursor.is-out .cursor__dot, .cursor.is-out .cursor__ring { opacity: 0; }
.cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--ember); }
.cursor__ring {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 1.5px solid #fff; mix-blend-mode: difference;
  display: grid; place-items: center;
  transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background-color .3s, border-color .3s;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: #fff; }
.cursor.has-label .cursor__ring {
  width: 92px; height: 92px; margin: -46px 0 0 -46px; mix-blend-mode: normal;
  background: var(--volt); border-color: var(--ink);
}
.cursor__label { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); opacity: 0; transform: scale(.5); transition: opacity .25s, transform .4s var(--spring); }
.cursor.has-label .cursor__label { opacity: 1; transform: none; }
.cursor.has-label .cursor__dot { opacity: 0; }
.cursor.is-down .cursor__ring { transform-origin: center; scale: .85; }

/* ---------- scroll progress + grain ---------- */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: calc(var(--z-hdr) + 1); pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--volt), var(--ember)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.grain {
  position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(8) infinite;
}

/* ---------- scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(46px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="left"] { transform: translateX(-60px); }
.js [data-reveal="right"] { transform: translateX(60px); }
.js [data-reveal="scale"] { transform: scale(.86); }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round 24px); transition: clip-path 1.2s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round 24px); }

/* split headings */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .07em .1em 0; margin: 0 -.07em -.1em 0; }
.split .w > span { display: inline-block; }
.js .split .w > span {
  transform: translateY(115%) rotate(7deg); transform-origin: left bottom;
  transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 65ms + var(--base, 0ms));
}
.js .split.is-in .w > span { transform: none; }

/* ---------- stickers: small animated decorations ---------- */
.sticker { position: absolute; z-index: var(--z-sticker); pointer-events: none; overflow: visible; }
.sticker--star path { fill: var(--volt); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.ftr .sticker--star path { stroke: none; }
.sticker--star { animation: spin 14s linear infinite; }
.st-spin { animation: spin 12s linear infinite; }
.st-spin-rev { animation: spin-rev 16s linear infinite; }
.st-float { animation: float 5s ease-in-out infinite; }
.st-bob { animation: bob 4.5s ease-in-out infinite; }
.st-wobble { animation: wobble 3s ease-in-out infinite; }
.st-swing { animation: swing 3.4s ease-in-out infinite; transform-origin: top center; }
.st-twinkle { animation: twinkle 2.6s ease-in-out infinite; }
.st-squash { animation: squash 2.4s ease-in-out infinite; }
.st-blob { animation: blob-morph 10s ease-in-out infinite; }
.st-d1 { animation-delay: -.8s; } .st-d2 { animation-delay: -1.6s; } .st-d3 { animation-delay: -2.4s; }

.sticker, .ill { stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sticker .o, .ill .o { stroke: var(--ink); }
.ill .t { font-family: var(--f-mono); font-size: 15px; font-weight: 600; fill: var(--ink); stroke: none; }
.ill .t-w { fill: var(--paper); }
.squiggle path { fill: none; stroke: var(--ember); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; --len: 260; animation: draw-loop 4.5s var(--ease-io) infinite; }
.plus-sign { width: 26px; height: 26px; }
.plus-sign path { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.section--dark .plus-sign path { stroke: var(--volt); }
.ring-dot { width: 90px; height: 90px; }
.ring-dot circle:first-child { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 8; }
.section--dark .ring-dot circle:first-child { stroke: var(--paper); }
.ring-dot .ring-dot__sat { fill: var(--ember); transform-origin: 45px 45px; animation: spin 5s linear infinite; }

/* rotating circular badge */
.badge-rot { position: relative; width: clamp(110px, 12vw, 150px); aspect-ratio: 1; display: grid; place-items: center; }
.badge-rot--solid::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--hard); }
.badge-rot svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; overflow: visible; }
.badge-rot text { font-family: var(--f-mono); font-size: 15.5px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; fill: currentColor; }
.badge-rot__center {
  width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--volt); color: var(--ink); border: 2px solid var(--ink);
  display: grid; place-items: center; transition: transform .6s var(--spring), background-color .3s;
}
.badge-rot__center .ico { width: 42%; height: 42%; stroke-width: 2.4; }
a.badge-rot:hover .badge-rot__center { transform: rotate(45deg) scale(1.08); background: var(--ember); }
a.badge-rot:hover svg { animation-duration: 4s; }

/* ---------- inline SVG illustration system (shared by every page) ---------- */
.ill { width: 100%; height: auto; overflow: visible; }
.ill .f-w { fill: var(--white); } .ill .f-v { fill: var(--volt); } .ill .f-e { fill: var(--ember); }
.ill .f-s { fill: var(--sky); } .ill .f-i { fill: var(--ink); } .ill .f-p { fill: var(--paper-2); } .ill .f-n { fill: none; }
.ill .s-i { stroke: var(--ink); } .ill .s-v { stroke: var(--volt); } .ill .s-e { stroke: var(--ember); }
.ill .dots { fill: var(--ink); opacity: .16; }
.ill .fb { transform-box: fill-box; transform-origin: center; }
.ill .a-float { animation: float 5.5s ease-in-out infinite; }
.ill .a-float-sm { animation: float-sm 3.2s ease-in-out infinite; }
.ill .a-float-x { animation: float-x 4s ease-in-out infinite; }
.ill .a-spin { transform-box: fill-box; transform-origin: center; animation: spin 10s linear infinite; }
.ill .a-spin-fast { transform-box: fill-box; transform-origin: center; animation: spin 2.4s linear infinite; }
.ill .a-spin-rev { transform-box: fill-box; transform-origin: center; animation: spin-rev 14s linear infinite; }
.ill .a-twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
.ill .a-blink { animation: blink 1.1s steps(2) infinite; }
.ill .a-dash { stroke-dasharray: 6 10; animation: dash-flow 1.1s linear infinite; }
.ill .a-draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: draw-loop 5s var(--ease-io) infinite; }
.ill .a-pop { transform-box: fill-box; transform-origin: center; animation: pop-loop 4s var(--spring) infinite; }
.ill .a-bar { transform-box: fill-box; transform-origin: bottom; animation: bar 2.6s var(--ease-io) infinite alternate; }
.ill .a-flame { transform-box: fill-box; transform-origin: top center; animation: flame .16s ease-in-out infinite alternate; }
.ill .a-bob { transform-box: fill-box; transform-origin: center; animation: bob 4s ease-in-out infinite; }
.ill .a-wobble { transform-box: fill-box; transform-origin: bottom center; animation: wobble 2.8s ease-in-out infinite; }
.ill .a-swing { transform-box: fill-box; transform-origin: top center; animation: swing 3s ease-in-out infinite; }
.ill .a-ping { transform-box: fill-box; transform-origin: center; animation: ping 2.2s ease-out infinite; }
.ill .a-squash { transform-box: fill-box; transform-origin: bottom center; animation: squash 2s ease-in-out infinite; }
.ill .a-slide { animation: slide-loop 3s ease-in-out infinite; }
.ill .a-rise { animation: rise 3.2s ease-in-out infinite; }
.ill .a-caret { animation: caret .9s steps(2) infinite; }
.ill .a-gauge { transform-box: fill-box; transform-origin: center; animation: gauge 4s var(--ease-io) infinite; }
.ill .d1 { animation-delay: -.5s; } .ill .d2 { animation-delay: -1s; } .ill .d3 { animation-delay: -1.5s; }
.ill .d4 { animation-delay: -2s; } .ill .d5 { animation-delay: -2.5s; } .ill .d6 { animation-delay: -3s; }

/* entry: illustration pieces pop in once */
.js .ill .in-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .9s var(--spring); transition-delay: var(--d, .2s); }
.js .is-in .ill .in-pop, .js .ill.is-in .in-pop { transform: none; }

/* ---------- cookie notice ---------- */
.cookie {
  position: fixed; z-index: var(--z-cookie); left: 16px; bottom: 16px; width: min(420px, calc(100% - 32px));
  display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center;
  padding: 18px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--hard-lg);
  font-size: .9rem; line-height: 1.45; animation: cookie-in .9s var(--spring) both;
}
.cookie[hidden] { display: none; }
.cookie.is-out { transform: translateY(160%); transition: transform .6s var(--ease-io); }
.cookie p a { text-decoration: underline; text-underline-offset: 3px; }
.cookie .btn { grid-column: 1 / -1; justify-self: start; }
.cookie__icon { width: 46px; height: 46px; overflow: visible; animation: wobble 2.6s ease-in-out infinite; }
.cookie__body { fill: #e4b567; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.cookie__icon circle { fill: var(--ink); }
.cookie__crumb { fill: #e4b567 !important; stroke: var(--ink); stroke-width: 1.5; animation: crumb 2.6s ease-in infinite; }

/* ---------- back to top ---------- */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: calc(var(--z-hdr) - 1); width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--volt); display: grid; place-items: center;
  opacity: 0; transform: translateY(20px) scale(.6); pointer-events: none;
  transition: opacity .4s, transform .6s var(--spring);
}
.totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__track { fill: none; stroke: rgba(212, 255, 63, .18); stroke-width: 3; }
.totop__bar { fill: none; stroke: var(--volt); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: calc(132 - 132 * var(--p, 0)); }
.totop__arrow { width: 22px; height: 22px; stroke-width: 2.4; }
.totop:hover .totop__arrow { animation: bounce-y .7s ease-in-out infinite; }