/* ============================================================
   Paamon motion layer — reveal on scroll, parallax, count-up,
   micro-interactions. Progressive enhancement: the reveal state
   is applied by paamon-motion.js only, so if JS is off / fails,
   all content stays fully visible. Fully disabled under
   prefers-reduced-motion.
   ============================================================ */

/* Scroll reveal (class added by JS) */
.mo-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.mo-reveal.mo-left{transform:translateX(26px)}
.mo-reveal.mo-right{transform:translateX(-26px)}
.mo-reveal.mo-scale{transform:scale(.95)}
.mo-reveal.mo-in{opacity:1;transform:none}

/* Micro-interaction: tactile press feedback on CTAs (doesn't fight hover) */
.btn,.hero-cta,.p-hero-cta,.nav-cta,.form-submit,.cta-card{
  transition:transform .2s cubic-bezier(.22,.61,.36,1),
             box-shadow .25s cubic-bezier(.22,.61,.36,1),
             background .25s, filter .2s;
}
.btn:active,.hero-cta:active,.p-hero-cta:active,.form-submit:active{transform:scale(.97)}

/* Parallax layers use transform set by JS; nothing needed here beyond a hint */
[data-parallax]{will-change:transform}

/* Scroll progress bar (top) — injected by JS */
.mo-progress{
  position:fixed; top:0; inset-inline:0; height:3px; z-index:9999;
  background:linear-gradient(90deg, var(--burgundy,#7B1A3A), var(--gold,#C5A059));
  transform:scaleX(0); transform-origin:right center; will-change:transform;
  pointer-events:none;
}
html[lang="en"] .mo-progress{transform-origin:left center}

/* Icon pop on card hover — playful, energetic */
.p-card-icon,.audience-card-icon,.for-whom-card .icon,.benefit-card .icon,.unit-number{
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.p-card:hover .p-card-icon,
.audience-card:hover .audience-card-icon,
.for-whom-card:hover .icon,
.benefit-card:hover .icon{transform:scale(1.14) rotate(-4deg)}
.unit-card:hover .unit-number{transform:scale(1.12)}

/* Aurora drift — living gradient on every hero (::before layer) */
@keyframes moAurora{0%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.16) rotate(3deg)}}
.p-hero::before,.hero::before{animation:moAurora 22s ease-in-out infinite alternate}

/* Floating brand accents (layer + dots injected by JS; layer gets parallax) */
.mo-float-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;will-change:transform}
.mo-float{position:absolute;border-radius:50%;filter:blur(1px);animation:moFloatY 7s ease-in-out infinite alternate}
@keyframes moFloatY{0%{transform:translateY(0)}100%{transform:translateY(-18px)}}

/* Button shine sweep on hover (primary CTAs) */
.hero-cta,.p-hero-cta,.btn-gold{position:relative;overflow:hidden}
.hero-cta::after,.p-hero-cta::after,.btn-gold::after{
  content:"";position:absolute;top:0;inset-inline-start:-130%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.hero-cta:hover::after,.p-hero-cta:hover::after,.btn-gold:hover::after{animation:moShine .75s ease}
@keyframes moShine{to{inset-inline-start:130%}}

/* Magnetic buttons — transform applied by JS; smooth return */
.mo-magnet{transition:transform .18s cubic-bezier(.22,.61,.36,1)}

/* Bell cursor companion — follows the pointer, rings on pause (injected by JS) */
.mo-bell{position:fixed;top:0;left:0;width:26px;height:26px;pointer-events:none;z-index:9998;opacity:0;transition:opacity .3s;will-change:transform}
.mo-bell.show{opacity:.92}
.mo-bell-i{width:100%;height:100%;display:block;transform-origin:50% 14%;filter:drop-shadow(0 2px 4px rgba(26,42,94,.25))}
.mo-bell-i.ring{animation:moRing .75s ease}
@keyframes moRing{0%,100%{transform:rotate(0)}12%{transform:rotate(17deg)}28%{transform:rotate(-13deg)}44%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}76%{transform:rotate(3deg)}}

/* Logo bell swings on hover (idea #2) */
.nav-brand img,.nav-logo img{transition:transform .2s;transform-origin:50% 15%}
.nav-brand:hover img,.nav-logo a:hover img{animation:moRing .75s ease}

/* Timeline step numbers pop in as they reveal (idea #7) */
@keyframes moPop{0%{transform:scale(.3);opacity:.15}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.step.mo-in .step-num,.p-step.mo-in .p-step-num,.unit-card.mo-in .unit-number{display:inline-block;animation:moPop .6s cubic-bezier(.34,1.56,.64,1) both}

/* Confetti canvas (idea #1) */
.mo-confetti{position:fixed;inset:0;pointer-events:none;z-index:10000}

/* Floating 3D holographic bell — a persistent mascot that stays fixed through
   the whole scroll (and on every page), drifting/"flying" down the right edge.
   z-index sits BELOW the functional widgets (WhatsApp/a11y/CTA-bar) so it
   ducks behind them if their paths cross. */
.mo-bell3d{position:fixed;top:0;left:0;width:74px;height:74px;z-index:45;pointer-events:none;perspective:600px;will-change:transform}
.mo-bell3d.mo-caught{animation-play-state:paused}
/* Flock — each bell gets its own path, size and speed so they read as a
   flight of bells rather than clones. They hug the left/right margins. */
.mo-bell3d.b1{width:74px;animation:moBellFly 26s ease-in-out infinite}
.mo-bell3d.b2{width:56px;opacity:.92;animation:moBellFlyL 33s ease-in-out infinite}
.mo-bell3d.b3{width:46px;opacity:.8;animation:moBellFlyR2 40s ease-in-out infinite}
@keyframes moBellFly{
 0%{transform:translate(calc(100vw - 104px),44vh)}
 25%{transform:translate(calc(100vw - 150px),62vh)}
 50%{transform:translate(calc(100vw - 96px),78vh)}
 75%{transform:translate(calc(100vw - 158px),56vh)}
 100%{transform:translate(calc(100vw - 104px),44vh)}
}
@keyframes moBellFlyL{
 0%{transform:translate(38px,30vh)}
 25%{transform:translate(74px,50vh)}
 50%{transform:translate(34px,64vh)}
 75%{transform:translate(84px,44vh)}
 100%{transform:translate(38px,30vh)}
}
@keyframes moBellFlyR2{
 0%{transform:translate(calc(100vw - 122px),20vh)}
 33%{transform:translate(calc(100vw - 88px),34vh)}
 66%{transform:translate(calc(100vw - 156px),24vh)}
 100%{transform:translate(calc(100vw - 122px),20vh)}
}
.mo-bell3d-inner{width:100%;height:100%;position:relative;animation:moBell3dFloat 6s ease-in-out infinite alternate;transform-style:preserve-3d}
.mo-bell3d-inner.mo-ring3d{animation:moRing .7s ease}
.mo-bell3d-inner::before{content:"";position:absolute;inset:-32%;border-radius:50%;background:radial-gradient(circle,rgba(197,160,89,.55),rgba(123,26,58,.22) 45%,transparent 70%);filter:blur(7px);z-index:-1;animation:moBell3dGlow 3.4s ease-in-out infinite alternate}
.mo-bell3d img{width:100%;height:100%;display:block;animation:moBell3dSpin 8s linear infinite;filter:drop-shadow(0 0 9px rgba(197,160,89,.65)) drop-shadow(0 0 2px rgba(123,26,58,.5))}
@keyframes moBell3dFloat{0%{transform:translateY(0)}100%{transform:translateY(-16px)}}
@keyframes moBell3dSpin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
@keyframes moBell3dGlow{0%{opacity:.45;transform:scale(.9)}100%{opacity:.95;transform:scale(1.12)}}
@media(max-width:768px){
 .mo-bell3d.b1{width:50px;opacity:.6;animation:moBellFlyM 30s ease-in-out infinite}
 .mo-bell3d.b2{width:42px;opacity:.5;animation:moBellFlyLM 34s ease-in-out infinite}
 .mo-bell3d.b3{display:none}
}
@keyframes moBellFlyM{
 0%{transform:translate(calc(100vw - 58px),40vh)}
 50%{transform:translate(calc(100vw - 58px),70vh)}
 100%{transform:translate(calc(100vw - 58px),40vh)}
}
@keyframes moBellFlyLM{
 0%{transform:translate(8px,42vh)}
 50%{transform:translate(8px,68vh)}
 100%{transform:translate(8px,42vh)}
}
/* Lasso catch — throw a loop, cinch it onto the bell, it rings */
.mo-lasso{position:fixed;z-index:46;pointer-events:none;border:2.5px dashed var(--gold,#C5A059);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(-40deg)}
.mo-lasso.go{animation:moLasso .6s cubic-bezier(.5,0,.2,1) forwards}
@keyframes moLasso{0%{opacity:0;transform:translate(-50%,-50%) scale(1.85) rotate(-40deg)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(180deg)}}
.mo-catch-toast{position:fixed;z-index:47;pointer-events:auto;background:var(--navy,#1A2A5E);color:#fff;font-family:var(--serif,'Frank Ruhl Libre',serif);font-size:.95rem;padding:.55rem 1rem;border-radius:12px;box-shadow:0 10px 30px rgba(26,42,94,.32);opacity:0;transform:translate(-50%,-6px);transition:opacity .3s,transform .3s;white-space:nowrap}
.mo-catch-toast.show{opacity:1;transform:translate(-50%,0)}
.mo-catch-toast a{color:var(--gold,#C5A059);font-weight:700;text-decoration:none;margin-inline-start:.5rem}

/* Floating CTA bar (idea #11) — slides up after scrolling, dismissible */
.mo-ctabar{position:fixed;bottom:0;inset-inline:0;z-index:9990;transform:translateY(120%);transition:transform .45s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.mo-ctabar.show{transform:translateY(0)}
.mo-ctabar-in{pointer-events:auto;max-width:600px;margin:0 auto 16px;display:flex;align-items:center;gap:14px;justify-content:space-between;background:#1A2A5E;color:#fff;border-radius:14px;padding:11px 12px 11px 18px;box-shadow:0 14px 34px rgba(26,42,94,.32)}
.mo-ctabar-in b{font-family:var(--serif,'Frank Ruhl Libre',serif);font-weight:700;font-size:1.02rem}
.mo-ctabar-btn{background:#C5A059;color:#1A2A5E;font-weight:700;padding:.5rem 1.1rem;border-radius:9px;text-decoration:none;white-space:nowrap;transition:filter .2s,transform .2s}
.mo-ctabar-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.mo-ctabar-x{background:transparent;border:0;color:rgba(255,255,255,.65);font-size:1.15rem;line-height:1;cursor:pointer;padding:4px 6px}
.mo-ctabar-x:hover{color:#fff}
@media(max-width:560px){.mo-ctabar-in{margin:0 10px 10px;gap:8px;padding:10px 10px 10px 14px} .mo-ctabar-in b{font-size:.92rem}}

/* ── #5 Self-drawing bell loader (once per session, injected by JS) ── */
.mo-loader{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;background:var(--cream,#FAF7F2);transition:opacity .5s ease}
.mo-loader.hide{opacity:0;pointer-events:none}
.mo-loader svg{width:104px;height:104px;overflow:visible}
.mo-loader .mo-draw{fill:none;stroke:var(--navy,#1A2A5E);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;animation:moDraw 1.15s cubic-bezier(.65,0,.35,1) forwards}
.mo-loader .mo-clapper{fill:var(--burgundy,#7B1A3A);opacity:0;transform-origin:50% 30%;animation:moClap .5s .95s ease forwards}
@keyframes moDraw{to{stroke-dashoffset:0}}
@keyframes moClap{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.15) rotate(-8deg)}100%{opacity:1;transform:scale(1)}}

/* ── #6 Bell rides the top progress bar's leading edge ── */
.mo-progress-bell{position:fixed;top:-6px;left:0;width:22px;height:22px;margin-inline-start:-11px;z-index:9999;pointer-events:none;will-change:left;filter:drop-shadow(0 2px 3px rgba(26,42,94,.3))}
.mo-progress-bell img{width:100%;height:100%;display:block;transform-origin:50% 15%;animation:moRing 1.4s ease-in-out infinite}

/* ── #8 Axis insight reveal — the punch-line slides up on hover (injected) ── */
.axis .mo-axis-insight{
  position:absolute;inset-inline:0;bottom:0;padding:1.2rem 1.6rem 1.4rem;
  background:linear-gradient(0deg,var(--navy,#1A2A5E) 78%,transparent);
  color:#fff;transform:translateY(101%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;z-index:2;
}
.axis:hover .mo-axis-insight,.axis:focus-within .mo-axis-insight{transform:translateY(0)}
.axis .mo-axis-insight b{display:block;font-family:var(--serif,'Frank Ruhl Libre',serif);color:var(--gold,#C5A059);font-size:.82rem;letter-spacing:.03em;margin-bottom:.3rem}
.axis .mo-axis-insight span{font-size:.95rem;line-height:1.5}

/* ── #9 Before/After text slider ── */
.mo-ba{position:relative;max-width:640px;margin:2.5rem auto;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(26,42,94,.14);user-select:none;isolation:isolate}
.mo-ba-pane{padding:2rem 1.8rem;min-height:150px;display:flex;flex-direction:column;justify-content:center}
.mo-ba-before{background:#f3ece6;color:#6b5d52}
.mo-ba-after{position:absolute;inset:0;background:var(--navy,#1A2A5E);color:#fff;clip-path:inset(0 0 0 50%);will-change:clip-path}
html[lang="en"] .mo-ba-after{clip-path:inset(0 50% 0 0)}
.mo-ba-tag{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-bottom:.5rem}
.mo-ba-after .mo-ba-tag{color:var(--gold,#C5A059);opacity:1}
.mo-ba-txt{font-size:1.05rem;line-height:1.55}
.mo-ba-handle{position:absolute;top:0;bottom:0;inset-inline-start:50%;width:3px;background:var(--gold,#C5A059);transform:translateX(-50%);z-index:3;cursor:ew-resize}
.mo-ba-knob{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--gold,#C5A059);color:var(--navy,#1A2A5E);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;z-index:4;cursor:ew-resize;box-shadow:0 3px 10px rgba(26,42,94,.3)}
.mo-ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
/* On narrow screens the horizontal clip mashes two different texts together —
   stack the panes into a clean before/after pair instead of a drag-slider. */
@media(max-width:600px){
  .mo-ba{overflow:visible;box-shadow:none;isolation:auto}
  .mo-ba-before{border-radius:14px;box-shadow:0 6px 18px rgba(26,42,94,.10)}
  .mo-ba-after{position:relative;inset:auto;clip-path:none!important;border-radius:14px;margin-top:12px;box-shadow:0 6px 18px rgba(26,42,94,.18)}
  .mo-ba-handle,.mo-ba-knob,.mo-ba input[type=range]{display:none}
}

/* ── #10 One-question diagnosis hook ── */
.mo-diag{max-width:640px;margin:2.5rem auto;text-align:center;background:#fff;border:1px solid rgba(26,42,94,.1);border-radius:16px;padding:2rem 1.6rem;box-shadow:0 8px 26px rgba(26,42,94,.09)}
.mo-diag h3{font-family:var(--serif,'Frank Ruhl Libre',serif);color:var(--navy,#1A2A5E);font-size:1.35rem;margin:0 0 1.3rem}
.mo-diag-opts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.mo-diag-opt{background:var(--cream,#FAF7F2);border:1.5px solid rgba(26,42,94,.16);color:var(--navy,#1A2A5E);border-radius:11px;padding:.85rem 1.15rem;font-size:.98rem;font-weight:600;cursor:pointer;transition:transform .18s,border-color .2s,background .2s;font-family:inherit}
.mo-diag-opt:hover{transform:translateY(-2px);border-color:var(--gold,#C5A059);background:#fff}
.mo-diag-ans{margin-top:1.4rem;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .4s}
.mo-diag-ans.show{opacity:1;max-height:360px}
.mo-diag-ans p{color:#4a4038;line-height:1.6;margin:0 0 1.1rem}
.mo-diag-ans a{display:inline-block;background:var(--gold,#C5A059);color:var(--navy,#1A2A5E);font-weight:700;padding:.7rem 1.5rem;border-radius:10px;text-decoration:none;transition:filter .2s,transform .2s}
.mo-diag-ans a:hover{filter:brightness(1.05);transform:translateY(-1px)}

@media(prefers-reduced-motion:reduce){
  .mo-loader{display:none!important}
  .mo-loader .mo-draw{stroke-dashoffset:0!important;animation:none!important}
  .mo-loader .mo-clapper{opacity:1!important;animation:none!important}
  .mo-progress-bell{display:none!important}
  .axis.mo-flip .mo-flip-inner{transition:none!important}
  .mo-ba-after{clip-path:inset(0 0 0 50%)!important}
  .mo-ctabar{transition:none!important}
  /* Reduce-motion: keep ONE bell but parked & still — present, not moving */
  .mo-bell3d,.mo-bell3d-inner,.mo-bell3d img{animation:none!important}
  .mo-bell3d.b2,.mo-bell3d.b3{display:none!important}
  .mo-bell3d.b1{top:auto!important;left:auto!important;bottom:18px!important;inset-inline-end:16px!important;transform:none!important;opacity:.75!important}
  .mo-lasso{display:none!important}
  .nav-brand:hover img,.nav-logo a:hover img{animation:none!important}
  .step.mo-in .step-num,.p-step.mo-in .p-step-num,.unit-card.mo-in .unit-number{animation:none!important}
  .mo-reveal{opacity:1!important;transform:none!important;transition:none!important}
  [data-parallax]{transform:none!important}
  .btn:active,.hero-cta:active,.p-hero-cta:active,.form-submit:active{transform:none}
  .mo-progress{display:none!important}
  .p-card:hover .p-card-icon,.audience-card:hover .audience-card-icon,
  .for-whom-card:hover .icon,.benefit-card:hover .icon,.unit-card:hover .unit-number{transform:none!important}
  .p-hero::before,.hero::before{animation:none!important}
  .mo-float{animation:none!important} .mo-float-layer{display:none!important}
  .hero-cta:hover::after,.p-hero-cta:hover::after,.btn-gold:hover::after{animation:none!important}
  .mo-bell{display:none!important}
}