/* Bispage service story animations — shared styles Include this once in your main , not per-partial. */ .courses-three__img{ position:relative; overflow:hidden; background:#FAF3E7; } .courses-three__img svg{ width:100%; height:100%; display:block; } /* stage groups start hidden; JS toggles .active to fade between them */ .stage1, .stage2, .stage3{ opacity:0; transition:opacity .6s ease; } .stage1.active, .stage2.active, .stage3.active{ opacity:1; } /* caption pill, one per stage, sits at the bottom of the visual */ .story-caption{ position:absolute; left:50%; bottom:0px; transform:translateX(-50%); padding:6px 14px; border-radius:18px; white-space:nowrap; max-width:88%; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:#fff; text-align:center; opacity:0; transition:opacity .6s ease; pointer-events:none; } .story-caption.active{ opacity:1; } .cap-pain{ background:#C65B4F; } .cap-service{ background:#0F3F8F; } .cap-result{ background:#C99A3D; color:#12203A; } /* poster — the calm still frame shown after the result stage, before the loop restarts. No caption pill on this one, by design: just the icon on its own. */ .poster{ opacity:0; transition:opacity .6s ease; } .poster.active{ opacity:1; } /* small continuous motions — only run while their parent stage is active, so nothing animates on hidden stages or off-screen cards */ .stage1.active .m-wobble, .stage2.active .m-wobble, .stage3.active .m-wobble{ animation:mWobble 2.2s ease-in-out infinite; } .stage1.active .m-jitter, .stage2.active .m-jitter, .stage3.active .m-jitter{ animation:mJitter 2.4s ease-in-out infinite; } .stage1.active .m-drift, .stage2.active .m-drift, .stage3.active .m-drift { animation:mDrift 3s ease-in-out infinite; } .stage1.active .m-pulse, .stage2.active .m-pulse, .stage3.active .m-pulse { animation:mPulse 1.6s ease-in-out infinite; } .stage1.active .m-blink, .stage2.active .m-blink, .stage3.active .m-blink { animation:mBlink .8s step-end infinite; } .stage1.active .m-grow, .stage2.active .m-grow, .stage3.active .m-grow { animation:mGrow .8s ease-out forwards; } @keyframes mWobble{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-5px) rotate(3deg); } } @keyframes mJitter{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(2px); } } @keyframes mDrift{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } } @keyframes mPulse{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-4deg); } } @keyframes mBlink{ 50%{ opacity:0; } } @keyframes mGrow{ from{ transform:scaleY(.2); } to{ transform:scaleY(1); } }