/* ============================================================ THE STUDIO — Playful-premium motion layer Loaded on every surface. All hiding is gated behind (added by studio-motion.js only when JS runs + motion is allowed), so with no JS / reduced-motion the page renders fully and statically. ============================================================ */ :root{ --mo-spring:cubic-bezier(0.34,1.56,0.64,1); /* playful back-out overshoot */ --mo-spring-soft:cubic-bezier(0.22,1.2,0.36,1); --mo-ease:cubic-bezier(0.16,1,0.3,1); } /* ---- Scroll reveal (data-rise is applied by JS on body[data-reveal="auto"]) ---- */ .mo [data-rise]{ opacity:0; transform:translateY(22px) scale(.99); will-change:opacity,transform; } .mo [data-rise].in{ opacity:1; transform:none; transition:opacity .55s var(--mo-ease), transform .7s var(--mo-spring); } /* ---- Tactile hover + depth on cards (also fixes the "flat" feel) ---- */ .mo .mod-card,.mo .pricing-card,.mo .complete-card,.mo .faq-item,.mo .port-item, .mo .become-item,.mo .inc-item,.mo .card,.mo .res-item,.mo .frame-card,.mo .spark-card{ transition:transform .38s var(--mo-spring), box-shadow .45s var(--mo-ease), border-color .3s var(--mo-ease); } .mo .mod-card:hover,.mo .pricing-card:hover,.mo .complete-card:hover,.mo .port-item:hover, .mo .become-item:hover,.mo .inc-item:hover,.mo .card:hover,.mo .res-item:hover,.mo .frame-card:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -30px rgba(24,22,20,.55); } .mo .faq-item:hover{ transform:translateY(-2px); } /* ---- The journey path nodes: playful pop on hover ---- */ .mo .node{ transition:transform .35s var(--mo-spring); } .mo .node:hover{ transform:translateY(-3px) scale(1.06); } /* ---- The Spark (the fun AI tool): warm glow + gentle lift, more energetic ---- */ .mo .spark-card{ transition:transform .4s var(--mo-spring), box-shadow .45s var(--mo-ease); } .mo .spark-card:hover{ transform:translateY(-5px) rotate(-.5deg); box-shadow:0 26px 54px -26px rgba(224,181,0,.5); } /* ---- Springy button press (tactile = playful) ---- */ .mo .btn-red,.mo .btn-dark,.mo .btn-pill,.mo .pc-cta,.mo .cont-btn,.mo .access-btn, .mo .spark-btn,.mo .btn-primary,.mo .m-btn,.mo .ln-btn,.mo .btn-ghost{ transition:transform .22s var(--mo-spring), box-shadow .3s var(--mo-ease), filter .2s var(--mo-ease); } .mo .btn-red:hover,.mo .btn-dark:hover,.mo .btn-pill:hover,.mo .pc-cta:hover,.mo .cont-btn:hover, .mo .access-btn:hover,.mo .spark-btn:hover,.mo .btn-primary:hover,.mo .m-btn:hover,.mo .ln-btn:hover{ transform:translateY(-2px); filter:brightness(1.04); } .mo .btn-red:active,.mo .btn-dark:active,.mo .btn-pill:active,.mo .pc-cta:active,.mo .cont-btn:active, .mo .access-btn:active,.mo .spark-btn:active,.mo .btn-primary:active,.mo .m-btn:active,.mo .ln-btn:active{ transform:translateY(0) scale(.96); } /* ---- Completion delight: pop when a checkmark/dot becomes complete ---- */ @keyframes mo-pop{ 0%{transform:scale(.5);opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1);opacity:1;} } .mo .sb-dot.complete,.mo .node.done .node-dot{ animation:mo-pop .5s var(--mo-spring) both; } /* ---- Personality: The Spark gets the most play (it's the fun tool) ---- */ .mo .spark-chip,.mo .card-spark{ transition:transform .3s var(--mo-spring); } .mo .spark-chip:hover{ transform:scale(1.08) rotate(-3deg); } /* ---- The Director guide reacts on hover (a little wink of character) ---- */ @keyframes mo-wiggle{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(-7deg);} 75%{transform:rotate(7deg);} } .mo .guide-av:hover,.mo .director-mark:hover{ animation:mo-wiggle .55s var(--mo-spring); } /* ---- Celebration: gold spark-burst on lesson completion (spawned by JS) ---- */ .mo-spark{ position:fixed; z-index:9999; width:9px; height:9px; border-radius:2px; pointer-events:none; will-change:transform,opacity; } @keyframes mo-burst{ 0%{transform:translate(0,0) rotate(0); opacity:1;} 100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0;} } @media (prefers-reduced-motion:reduce){ .mo [data-rise]{opacity:1!important;transform:none!important;} .mo *{animation:none!important;} .mo-spark{display:none!important;} }