/* --- Sample — Lift Cards (#3) --- */
/* example of scoped css from Snippet Studio */
.mcps-block .card { border-radius: 1rem; border: 1px solid rgba(0,0,0,.08); }

/* --- Icon timeline row (#6) --- */

.mcps-a3 .mcps-a3-node{position:relative;display:inline-flex;width:84px;height:84px;border-radius:50%;
 background:#111013;color:#fff;align-items:center;justify-content:center;font-size:1.6rem;
 transition:transform .3s ease,background .3s ease;}
.mcps-a3 .mcps-a3-node::before,.mcps-a3 .mcps-a3-node::after{content:'';position:absolute;left:50%;
 width:2px;height:22px;background:#111013;transform:translateX(-50%);}
.mcps-a3 .mcps-a3-node::before{top:-26px;}
.mcps-a3 .mcps-a3-node::after{bottom:-26px;}
.mcps-a3 .mcps-a3-node:hover{transform:scale(1.12);background:#FE5302;}

/* --- Floating shapes banner (#8) --- */

.mcps-a5 .mcps-a5-shape{position:absolute;width:44px;height:44px;border-radius:50%;
 opacity:.85;animation:mcpsFloat 4.5s ease-in-out infinite;}

/* --- Image grid zoom-in (#9) --- */
.mcps-a6 .mcps-a6-img{height:240px;object-fit:cover;}

/* --- Pulse CTA strip (#10) --- */
.mcps-a7 .mcps-a7-btn{animation:mcpsPulse 2.4s infinite;}

/* --- Typewriter headline (#11) --- */

.mcps-a8 .mcps-a8-type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:100%;
 border-right:3px solid #D3F225;font-size:clamp(1.8rem,4.5vw,3.2rem);
 animation:mcpsTyping 2.6s steps(24) .4s both,mcpsCaret .8s step-end infinite;}

/* --- Logos marquee strip (#12) --- */

.mcps-a9 .mcps-a9-mask{overflow:hidden;}
.mcps-a9 .mcps-a9-track{display:inline-flex;white-space:nowrap;animation:mcpsMarquee 24s linear infinite;}
.mcps-a9 .mcps-a9-track:hover{animation-play-state:paused;}
.mcps-a9 img{height:64px;margin:0 2.2rem;object-fit:contain;opacity:.8;transition:opacity .3s;}
.mcps-a9 img:hover{opacity:1;}

/* --- Skill progress bars (#13) --- */

.mcps-a10 .mcps-a10-rail{height:10px;border-radius:5px;background:rgba(0,0,0,.08);overflow:hidden;}
.mcps-a10 .mcps-a10-bar{display:block;height:100%;width:0;border-radius:5px;
 background:linear-gradient(90deg,#FE5302,#ff8a50);transition:width 1.4s cubic-bezier(.22,1,.36,1);}
.mcps-in .mcps-a10-bar{width:var(--w);}

/* --- Icon rows with dividers (#14) --- */

.mcps-b1 .mcps-b1-ico{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:#111013;color:#fff;
 display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;transition:background .3s;}
.mcps-b1 .mcps-b1-box:hover .mcps-b1-ico{background:#FE5302;}
@media(min-width:768px){.mcps-b1 .mcps-b1-box+.mcps-b1-box{border-left:1px solid rgba(0,0,0,.12);}}

/* --- Underline title boxes (#15) --- */

.mcps-b2 .mcps-b2-line{display:block;width:56px;height:3px;background:#111013;margin:10px auto 0;
 transition:width .35s ease,background .35s ease;}
.mcps-b2 .mcps-b2-box:hover .mcps-b2-line{width:100%;background:#FE5302;}

/* --- Framed photo trio (#16) --- */

.mcps-b3 .mcps-b3-frame{position:relative;overflow:hidden;}
.mcps-b3 .mcps-b3-frame img{height:280px;object-fit:cover;transition:transform .5s ease;}
.mcps-b3 .mcps-b3-frame::after{content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,.85);
 transition:inset .35s ease;pointer-events:none;}
.mcps-b3 .mcps-b3-frame:hover img{transform:scale(1.06);}
.mcps-b3 .mcps-b3-frame:hover::after{inset:8px;}

/* --- Dark numbered icon boxes (#17) --- */

.mcps-b4 .mcps-b4-box{background:#111013;color:#fff;height:100%;border-radius:.5rem;
 transition:background .3s ease;}
.mcps-b4 .mcps-b4-box:hover{background:#FE5302;}
.mcps-b4 .mcps-b4-num{font-weight:700;opacity:.5;}

/* --- Circle icon shadow cards (#18) --- */

.mcps-b5 .mcps-b5-ico{width:72px;height:72px;border-radius:50%;display:inline-flex;align-items:center;
 justify-content:center;font-size:1.5rem;color:#FE5302;background:rgba(254,83,2,.1);
 transition:all .3s ease;}
.mcps-b5 .card:hover .mcps-b5-ico{background:#FE5302;color:#fff;transform:rotate(8deg) scale(1.08);}

/* --- Left accent border boxes (#19) --- */

.mcps-b6 .mcps-b6-box{border-left:4px solid #111013;border-radius:.25rem;
 transition:border-color .3s ease,border-left-width .3s ease,transform .3s ease;}
.mcps-b6 .mcps-b6-box:hover{border-left:8px solid #FE5302;transform:translateX(4px);}

/* --- Animated gradient boxes (#20) --- */

.mcps-b7 .mcps-b7-box{border-radius:1rem;height:100%;background:linear-gradient(270deg,#FE5302,#ff9c1a,#FE5302);
 background-size:280% 280%;animation:mcpsGradient 7s ease infinite;}
.mcps-b7 .mcps-b7-alt{background:linear-gradient(270deg,#6C63D2,#3f38a0,#6C63D2);background-size:280% 280%;}
.mcps-b7 .mcps-b7-dark{background:linear-gradient(270deg,#111013,#3a3745,#111013);background-size:280% 280%;}

/* --- Ghost number steps (#21) --- */

.mcps-b8 .mcps-b8-step{position:relative;padding:2.4rem 0 0 .5rem;}
.mcps-b8 .mcps-b8-ghost{position:absolute;top:-1.2rem;left:0;font-size:6rem;font-weight:800;line-height:1;
 color:rgba(17,16,19,.07);transition:color .35s ease;z-index:0;}
.mcps-b8 .mcps-b8-step:hover .mcps-b8-ghost{color:rgba(254,83,2,.18);}
.mcps-b8 h5,.mcps-b8 p{position:relative;z-index:1;}

/* --- Button — Fill from left (#50) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt1{position:relative;display:inline-block;padding:.8rem 2.2rem;border-radius:50rem;overflow:hidden;
 z-index:1;color:#111013;text-decoration:none;font-weight:600;border:1.5px solid #111013;transition:color .35s;}
.mcps-bt1::before{content:'';position:absolute;inset:0;background:#111013;transform:translateX(-101%);
 transition:transform .38s cubic-bezier(.76,0,.24,1);z-index:-1;}
.mcps-bt1:hover{color:#fff;}
.mcps-bt1:hover::before{transform:none;}
.mcps-bt1.alt{border-color:#FE5302;color:#FE5302;}
.mcps-bt1.alt::before{background:#FE5302;}

/* --- Button — Fill from center (#51) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt2{position:relative;display:inline-block;padding:.8rem 2.4rem;border-radius:.6rem;overflow:hidden;
 z-index:1;color:#FE5302;text-decoration:none;font-weight:700;border:2px solid #FE5302;transition:color .35s;}
.mcps-bt2::before{content:'';position:absolute;inset:0;background:#FE5302;transform:scaleX(0);
 transform-origin:center;transition:transform .4s ease;z-index:-1;}
.mcps-bt2:hover{color:#fff;}
.mcps-bt2:hover::before{transform:scaleX(1);}

/* --- Button — Diagonal fill (#52) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt3{position:relative;display:inline-block;padding:.85rem 2.4rem;overflow:hidden;z-index:1;
 color:#fff;text-decoration:none;font-weight:700;background:#111013;border-radius:.4rem;}
.mcps-bt3::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:#FE5302;
 transform:skewX(-22deg) translateX(-20px);transition:width .4s ease;z-index:-1;}
.mcps-bt3:hover::before{width:140%;}

/* --- Button — Shine sweep (#53) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt4{position:relative;display:inline-block;padding:.85rem 2.4rem;overflow:hidden;
 color:#fff;text-decoration:none;font-weight:700;border-radius:50rem;
 background:linear-gradient(90deg,#FE5302,#ff8a3d);}
.mcps-bt4::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:45%;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);}
.mcps-bt4:hover::after{animation:mcpsShine .85s ease;}

/* --- Button — Arrow reveal (#54) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt5{display:inline-flex;align-items:center;gap:.2rem;padding:.8rem 1.8rem;border-radius:50rem;
 background:#111013;color:#fff;text-decoration:none;font-weight:600;}
.mcps-bt5 i{font-style:normal;max-width:0;opacity:0;overflow:hidden;transform:translateX(-6px);
 transition:all .35s ease;}
.mcps-bt5:hover{color:#fff;}
.mcps-bt5:hover i{max-width:2rem;opacity:1;transform:none;margin-left:.4rem;}

/* --- Button — Icon circle grow (#55) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt6{display:inline-flex;align-items:center;gap:.7rem;padding:.4rem 1.6rem .4rem .4rem;
 border-radius:50rem;background:#fff;color:#111013;text-decoration:none;font-weight:600;
 border:1px solid rgba(0,0,0,.12);transition:box-shadow .3s;}
.mcps-bt6 i{width:40px;height:40px;border-radius:50%;background:#FE5302;color:#fff;
 display:flex;align-items:center;justify-content:center;transition:transform .3s ease;}
.mcps-bt6:hover{box-shadow:0 10px 26px rgba(0,0,0,.12);color:#111013;}
.mcps-bt6:hover i{transform:scale(1.12) rotate(8deg);}

/* --- Button — Text swap up (#56) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt7{display:inline-block;padding:.8rem 2.2rem;border-radius:.5rem;background:#111013;
 color:#fff;text-decoration:none;font-weight:700;overflow:hidden;}
.mcps-bt7 span{position:relative;display:inline-block;transition:transform .35s cubic-bezier(.76,0,.24,1);}
.mcps-bt7 span::after{content:attr(data-t);position:absolute;left:0;top:100%;color:#D3F225;}
.mcps-bt7:hover span{transform:translateY(-100%);}

/* --- Button — Animated gradient (#57) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt8{display:inline-block;padding:.85rem 2.6rem;border-radius:50rem;color:#fff;text-decoration:none;
 font-weight:700;background:linear-gradient(90deg,#FE5302,#6C63D2,#FE5302);background-size:220% 100%;
 background-position:0 0;transition:background-position .5s ease,transform .3s;}
.mcps-bt8:hover{background-position:100% 0;color:#fff;transform:translateY(-2px);}

/* --- Button — Border draw (#58) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt9{position:relative;display:inline-block;padding:.85rem 2.4rem;color:#111013;text-decoration:none;
 font-weight:700;background:transparent;}
.mcps-bt9::before,.mcps-bt9::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;box-sizing:border-box;}
.mcps-bt9::before{border-top:2px solid #FE5302;border-right:2px solid #FE5302;
 transform:scale(0);transform-origin:top right;transition:transform .3s ease;}
.mcps-bt9::after{border-bottom:2px solid #FE5302;border-left:2px solid #FE5302;
 transform:scale(0);transform-origin:bottom left;transition:transform .3s ease;}
.mcps-bt9:hover::before,.mcps-bt9:hover::after{transform:scale(1);}

/* --- Button — 3D push (#59) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt10{display:inline-block;padding:.8rem 2.2rem;border-radius:.6rem;background:#FE5302;color:#fff;
 text-decoration:none;font-weight:700;box-shadow:0 6px 0 #a83600;transition:all .12s ease;}
.mcps-bt10:hover{color:#fff;box-shadow:0 4px 0 #a83600;transform:translateY(2px);}
.mcps-bt10:active{box-shadow:0 0 0 #a83600;transform:translateY(6px);}

/* --- Button — Glow pulse (#60) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt11{display:inline-block;padding:.85rem 2.4rem;border-radius:50rem;background:#111013;color:#fff;
 text-decoration:none;font-weight:700;transition:box-shadow .3s,transform .3s;}
.mcps-bt11:hover{color:#fff;transform:translateY(-2px);box-shadow:0 0 0 0 rgba(254,83,2,.5);
 animation:mcpsPulse 1.6s infinite;}

/* --- Button — Underline grow (#61) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt12{position:relative;display:inline-block;padding:.5rem .2rem;color:#111013;text-decoration:none;
 font-weight:700;font-size:1.1rem;}
.mcps-bt12::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:#FE5302;
 transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.76,0,.24,1);}
.mcps-bt12:hover::after{transform:scaleX(1);transform-origin:left;}

/* --- Button — Split layers (#62) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt13{position:relative;display:inline-block;padding:.85rem 2.4rem;border-radius:.5rem;overflow:hidden;
 background:#111013;text-decoration:none;font-weight:700;min-width:170px;text-align:center;}
.mcps-bt13 span{display:block;transition:transform .4s cubic-bezier(.76,0,.24,1);}
.mcps-bt13 .a{color:#fff;}
.mcps-bt13 .b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 background:#FE5302;color:#fff;transform:translateY(100%);}
.mcps-bt13:hover .a{transform:translateY(-100%);}
.mcps-bt13:hover .b{transform:none;}

/* --- Button — Rising particles (#63) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt14{position:relative;display:inline-block;padding:.85rem 2.6rem;border-radius:50rem;overflow:hidden;
 background:#6C63D2;color:#fff;text-decoration:none;font-weight:700;}
.mcps-bt14 span{position:absolute;bottom:-8px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);
 opacity:0;}
.mcps-bt14 span:nth-child(1){left:25%;}
.mcps-bt14 span:nth-child(2){left:50%;width:6px;height:6px;}
.mcps-bt14 span:nth-child(3){left:72%;width:10px;height:10px;}
.mcps-bt14:hover span{animation:mcpsBt14 .9s ease-out infinite;}
.mcps-bt14:hover span:nth-child(2){animation-delay:.2s;}
.mcps-bt14:hover span:nth-child(3){animation-delay:.4s;}
@keyframes mcpsBt14{0%{opacity:0;transform:translateY(0);}40%{opacity:1;}100%{opacity:0;transform:translateY(-42px);}}

/* --- Button — Ghost to solid (#64) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt15{display:inline-block;padding:.85rem 2.4rem;border-radius:50rem;border:2px solid #111013;
 color:#111013;text-decoration:none;font-weight:700;background:transparent;
 transition:background .3s,color .3s,box-shadow .3s;}
.mcps-bt15:hover{background:#111013;color:#fff;box-shadow:0 10px 24px rgba(17,16,19,.25);}

/* --- Button — Icon jump (#65) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt16{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 2rem;border-radius:50rem;
 background:#25d366;color:#fff;text-decoration:none;font-weight:700;}
.mcps-bt16 i{font-size:1.2rem;transition:transform .3s;}
.mcps-bt16:hover{color:#fff;}
.mcps-bt16:hover i{animation:mcpsBt16 .5s ease;}
@keyframes mcpsBt16{0%,100%{transform:translateY(0);}30%{transform:translateY(-6px);}60%{transform:translateY(-2px);}}

/* --- Button — Letter spacing (#66) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt17{display:inline-block;padding:.85rem 2.6rem;border-radius:.4rem;background:#111013;color:#fff;
 text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
 transition:letter-spacing .35s ease,background .35s;}
.mcps-bt17:hover{color:#fff;background:#FE5302;letter-spacing:.28em;}

/* --- Button — Corner brackets (#67) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt18{position:relative;display:inline-block;padding:.9rem 2.6rem;color:#111013;text-decoration:none;
 font-weight:700;}
.mcps-bt18::before,.mcps-bt18::after{content:'';position:absolute;width:14px;height:14px;
 transition:all .3s ease;}
.mcps-bt18::before{top:0;left:0;border-top:2px solid #FE5302;border-left:2px solid #FE5302;}
.mcps-bt18::after{bottom:0;right:0;border-bottom:2px solid #FE5302;border-right:2px solid #FE5302;}
.mcps-bt18:hover::before{width:calc(100% - 4px);height:calc(100% - 4px);}
.mcps-bt18:hover::after{width:calc(100% - 4px);height:calc(100% - 4px);}

/* --- Button — Liquid blob (#68) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt19{display:inline-block;padding:.85rem 2.6rem;background:#FE5302;color:#fff;text-decoration:none;
 font-weight:700;border-radius:50rem;transition:border-radius .5s cubic-bezier(.68,-.55,.27,1.55),transform .3s;}
.mcps-bt19:hover{color:#fff;transform:translateY(-2px);
 border-radius:38% 62% 55% 45% / 55% 45% 55% 45%;}

/* --- Button — Two-tone slide (#69) --- */
.mcps-btnwrap{background:#F6F7F2;} .mcps-btnwrap a{margin:.4rem;} 
.mcps-bt20{position:relative;display:inline-flex;align-items:center;justify-content:center;
 min-width:160px;height:52px;border-radius:50rem;overflow:hidden;background:#111013;text-decoration:none;
 font-weight:700;}
.mcps-bt20 span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 transition:transform .4s cubic-bezier(.76,0,.24,1);}
.mcps-bt20 span:first-child{color:#fff;}
.mcps-bt20 span:last-child{background:#FE5302;color:#fff;transform:translateX(-100%);}
.mcps-bt20:hover span:first-child{transform:translateX(100%);}
.mcps-bt20:hover span:last-child{transform:none;}

/* --- 3D flip cards (#70) --- */

.mcps-c3 .mcps-c3-flip{perspective:1100px;height:300px;}
.mcps-c3 .mcps-c3-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
 transition:transform .7s cubic-bezier(.4,.2,.2,1);}
.mcps-c3 .mcps-c3-flip:hover .mcps-c3-inner{transform:rotateY(180deg);}
.mcps-c3 .mcps-c3-front,.mcps-c3 .mcps-c3-back{position:absolute;inset:0;border-radius:.6rem;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;}
.mcps-c3 .mcps-c3-front img{width:100%;height:100%;object-fit:cover;}
.mcps-c3 .mcps-c3-front b{position:absolute;left:0;bottom:0;right:0;color:#fff;padding:1rem 1.2rem;
 font-size:1.15rem;background:linear-gradient(transparent,rgba(0,0,0,.75));}
.mcps-c3 .mcps-c3-back{background:var(--ink);color:#fff;transform:rotateY(180deg);
 display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:1.5rem;}
.mcps-c3 .mcps-c3-back p{color:rgba(255,255,255,.7);}
.mcps-c3 .mcps-c3-btn{background:var(--acc);color:#fff;border-radius:50rem;padding:.35rem 1.1rem;
 text-decoration:none;font-size:.85rem;font-weight:600;}

/* --- Cube rotate cards (#71) --- */

.mcps-h11 .mcps-h11-scene{perspective:1000px;height:260px;}
.mcps-h11 .mcps-h11-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;
 transition:transform .7s cubic-bezier(.4,.2,.2,1);}
.mcps-h11 .mcps-h11-scene:hover .mcps-h11-cube{transform:rotateX(-90deg);}
.mcps-h11 .mcps-h11-face{position:absolute;inset:0;border-radius:.6rem;overflow:hidden;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.mcps-h11 .mcps-h11-front{transform:translateZ(130px);}
.mcps-h11 .mcps-h11-front img{width:100%;height:100%;object-fit:cover;}
.mcps-h11 .mcps-h11-bottom{background:var(--ink);color:#fff;display:flex;flex-direction:column;
 justify-content:center;align-items:center;text-align:center;padding:1rem;
 transform:rotateX(90deg) translateZ(130px);}
.mcps-h11 .mcps-h11-bottom h5{color:var(--acc);}
.mcps-h11 .mcps-h11-bottom p{color:rgba(255,255,255,.65);margin:0;font-size:.9rem;}

/* --- Knockout text mask (#72) --- */

.mcps-h18 .mcps-h18-wrap{position:relative;overflow:hidden;border-radius:.6rem;max-width:760px;}
.mcps-h18 .mcps-h18-wrap img{width:100%;height:auto;display:block;
 transition:transform 1.2s ease;}
.mcps-h18 .mcps-h18-wrap:hover img{transform:scale(1.12);}
.mcps-h18 .mcps-h18-cover{position:absolute;inset:0;background:var(--bg);mix-blend-mode:lighten;
 display:flex;align-items:center;justify-content:center;}
.mcps-h18 .mcps-h18-cover span{color:#000;font-size:clamp(4rem,16vw,10rem);font-weight:900;
 letter-spacing:-.02em;line-height:1;}

/* --- Spotlight cursor reveal (#73) --- */

.mcps-h1 .mcps-h1-card{position:relative;overflow:hidden;border-radius:.8rem;cursor:pointer;}
.mcps-h1 img{width:100%;height:320px;object-fit:cover;filter:brightness(.35);transition:filter .4s ease;}
.mcps-h1 .mcps-h1-light{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;
 background:radial-gradient(circle 180px at var(--mx,50%) var(--my,50%),var(--glow),transparent 70%);}
.mcps-h1 .mcps-h1-card:hover .mcps-h1-light{opacity:1;}
.mcps-h1 .mcps-h1-card:hover img{filter:brightness(.55);}
.mcps-h1 b{position:absolute;left:1.2rem;bottom:1rem;color:#fff;z-index:2;}

/* --- Magnetic buttons (#74) --- */

.mcps-h2 .mcps-h2-btn{display:inline-block;padding:.85rem 2.2rem;border-radius:50rem;background:var(--ink);
 color:#fff;text-decoration:none;font-weight:600;transition:transform .18s ease-out,background .3s;will-change:transform;}
.mcps-h2 .mcps-h2-btn:hover{background:var(--acc);color:#fff;}
.mcps-h2 .mcps-h2-alt{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.mcps-h2 .mcps-h2-alt:hover{background:var(--ink);color:#fff;}

/* --- 3D tilt with glare (#75) --- */

.mcps-h3 .mcps-h3-card{position:relative;border-radius:1rem;overflow:hidden;transform-style:preserve-3d;
 transition:transform .15s ease-out;will-change:transform;}
.mcps-h3 img{width:100%;height:340px;object-fit:cover;display:block;}
.mcps-h3 .mcps-h3-glare{position:absolute;inset:-50%;opacity:0;pointer-events:none;transition:opacity .3s;
 background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),var(--glow),transparent 55%);}
.mcps-h3 .mcps-h3-card:hover .mcps-h3-glare{opacity:1;}
.mcps-h3 b{position:absolute;left:1.2rem;bottom:1rem;color:#fff;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.6);}

/* --- Frosted glass reveal (#76) --- */

.mcps-h5 .mcps-h5-card{position:relative;overflow:hidden;border-radius:.8rem;}
.mcps-h5 img{width:100%;height:300px;object-fit:cover;}
.mcps-h5 .mcps-h5-glass{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
 padding:1.2rem;color:#fff;background:color-mix(in srgb,var(--ink) 25%,transparent);backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);transition:backdrop-filter .5s ease,background .5s ease;}
.mcps-h5 .mcps-h5-card:hover .mcps-h5-glass{backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
 background:linear-gradient(transparent 40%,color-mix(in srgb,var(--ink) 75%,transparent));}
.mcps-h5 p{font-size:.9rem;opacity:.85;margin:0;}

/* --- Neon glow cards (#77) --- */

.mcps-h13 .mcps-h13-card{display:block;padding:2.2rem 1.6rem;border:1px solid rgba(255,255,255,.14);
 border-radius:1rem;color:#fff;text-decoration:none;text-align:center;transition:all .4s ease;}
.mcps-h13 h5{font-weight:700;transition:text-shadow .4s;}
.mcps-h13 p{color:rgba(255,255,255,.55);margin:0;font-size:.9rem;}
.mcps-h13 .mcps-h13-card:hover{border-color:var(--glow);color:#fff;
 box-shadow:0 0 24px -4px var(--glow),inset 0 0 24px -14px var(--glow);transform:translateY(-4px);}
.mcps-h13 .mcps-h13-card:hover h5{text-shadow:0 0 14px var(--glow);}

/* --- Duotone hue shift (#78) --- */

.mcps-h14 .mcps-h14-card{position:relative;overflow:hidden;border-radius:.8rem;}
.mcps-h14 img{width:100%;height:280px;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .5s;}
.mcps-h14 .mcps-h14-card::after{content:'';position:absolute;inset:0;background:var(--tint);
 mix-blend-mode:multiply;opacity:.75;transition:opacity .5s;}
.mcps-h14 .mcps-h14-card:hover img{filter:grayscale(0) contrast(1);}
.mcps-h14 .mcps-h14-card:hover::after{opacity:0;}
.mcps-h14 b{position:absolute;left:1rem;bottom:.8rem;color:#fff;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.5);}

/* --- Diagonal wipe reveal (#79) --- */

.mcps-h9 .mcps-h9-card{position:relative;display:block;overflow:hidden;border-radius:.8rem;}
.mcps-h9 img{width:100%;height:300px;object-fit:cover;}
.mcps-h9 .mcps-h9-veil{position:absolute;inset:0;background:var(--acc);color:#fff;
 display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;
 clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .5s cubic-bezier(.76,0,.24,1);}
.mcps-h9 .mcps-h9-card:hover .mcps-h9-veil{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
.mcps-h9 b{font-size:1.4rem;} .mcps-h9 i{font-style:normal;opacity:.85;}

/* --- Curtain split reveal (#80) --- */

.mcps-c8 .mcps-c8-card{position:relative;display:block;overflow:hidden;border-radius:.6rem;}
.mcps-c8 img{width:100%;height:300px;object-fit:cover;}
.mcps-c8 .mcps-c8-top,.mcps-c8 .mcps-c8-bot{position:absolute;left:0;right:0;height:50%;
 background:color-mix(in srgb,var(--ink) 88%,transparent);transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:2;}
.mcps-c8 .mcps-c8-top{top:0;transform:translateY(-101%);}
.mcps-c8 .mcps-c8-bot{bottom:0;transform:translateY(101%);}
.mcps-c8 .mcps-c8-card:hover .mcps-c8-top,.mcps-c8 .mcps-c8-card:hover .mcps-c8-bot{transform:none;}
.mcps-c8 .mcps-c8-txt{position:absolute;top:50%;left:0;right:0;text-align:center;color:#fff;font-weight:700;
 font-size:1.2rem;z-index:3;opacity:0;transform:translateY(-50%) scale(.8);transition:all .4s ease .15s;}
.mcps-c8 .mcps-c8-card:hover .mcps-c8-txt{opacity:1;transform:translateY(-50%) scale(1);}

/* --- Caption slide-up (#81) --- */

.mcps-c1 .mcps-c1-card{position:relative;display:block;overflow:hidden;border-radius:.6rem;}
.mcps-c1 img{width:100%;height:280px;object-fit:cover;transition:transform .5s ease;}
.mcps-c1 .mcps-c1-cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.2rem;color:#fff;
 background:linear-gradient(transparent,rgba(0,0,0,.85));transform:translateY(100%);transition:transform .4s ease;}
.mcps-c1 .mcps-c1-cap b{display:block;font-size:1.1rem;}
.mcps-c1 .mcps-c1-cap i{font-style:normal;font-size:.85rem;opacity:.75;}
.mcps-c1 .mcps-c1-card:hover .mcps-c1-cap{transform:none;}
.mcps-c1 .mcps-c1-card:hover img{transform:scale(1.06);}

/* --- Zoom darken + icon (#82) --- */

.mcps-c2 .mcps-c2-card{position:relative;display:block;overflow:hidden;border-radius:.6rem;}
.mcps-c2 img{width:100%;height:320px;object-fit:cover;transition:transform .5s ease,filter .5s ease;}
.mcps-c2 .mcps-c2-ico{position:absolute;top:50%;left:50%;width:64px;height:64px;border-radius:50%;
 background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;
 transform:translate(-50%,-50%) scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.mcps-c2 .mcps-c2-card:hover img{transform:scale(1.08);filter:brightness(.55);}
.mcps-c2 .mcps-c2-card:hover .mcps-c2-ico{transform:translate(-50%,-50%) scale(1);}

/* --- Border draw cards (#83) --- */

.mcps-c4 .mcps-c4-box{position:relative;height:100%;}
.mcps-c4 .mcps-c4-box span{position:absolute;background:var(--acc);transition:transform .3s ease;}
.mcps-c4 .mcps-c4-t{top:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;}
.mcps-c4 .mcps-c4-r{top:0;bottom:0;right:0;width:2px;transform:scaleY(0);transform-origin:top;transition-delay:.15s;}
.mcps-c4 .mcps-c4-b{bottom:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:right;transition-delay:.3s;}
.mcps-c4 .mcps-c4-l{top:0;bottom:0;left:0;width:2px;transform:scaleY(0);transform-origin:bottom;transition-delay:.45s;}
.mcps-c4 .mcps-c4-box:hover span{transform:scale(1);}

/* --- Grayscale to color (#84) --- */

.mcps-c5 .mcps-c5-img{height:160px;object-fit:cover;filter:grayscale(1);opacity:.8;
 transition:filter .45s ease,opacity .45s ease,transform .45s ease;}
.mcps-c5 .mcps-c5-img:hover{filter:grayscale(0);opacity:1;transform:scale(1.04);}

/* --- Shine sweep cards (#85) --- */

.mcps-c6 .mcps-c6-card{position:relative;display:block;overflow:hidden;border-radius:.6rem;}
.mcps-c6 img{width:100%;height:300px;object-fit:cover;}
.mcps-c6 .mcps-c6-card::before{content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;z-index:2;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);}
.mcps-c6 .mcps-c6-card:hover::before{animation:mcpsShine .9s ease;}
.mcps-c6 .mcps-c6-label{position:absolute;left:1.2rem;bottom:1rem;color:#fff;font-weight:600;z-index:3;
 text-shadow:0 2px 8px rgba(0,0,0,.6);}

/* --- Liquid spring cards (#86) --- */

.mcps-h16 .mcps-h16-card{position:relative;display:block;overflow:hidden;border-radius:1.2rem;}
.mcps-h16 img{width:100%;height:280px;object-fit:cover;
 transition:transform .8s cubic-bezier(.34,1.8,.4,1),border-radius .6s ease;}
.mcps-h16 .mcps-h16-card:hover img{transform:scale(1.12) skewX(-3deg) rotate(1.5deg);}
.mcps-h16 .mcps-h16-card:hover{border-radius:2.5rem 1rem 2.5rem 1rem;}
.mcps-h16 b{position:absolute;left:1.1rem;bottom:.9rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55);}

/* --- Scanline reveal (#87) --- */

.mcps-h20 .mcps-h20-card{position:relative;display:block;overflow:hidden;border-radius:.5rem;}
.mcps-h20 img{width:100%;height:300px;object-fit:cover;transition:filter .4s ease;}
.mcps-h20 .mcps-h20-scan{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);}
.mcps-h20 .mcps-h20-scan::after{content:'';position:absolute;left:0;right:0;top:-20%;height:18%;
 background:linear-gradient(rgba(255,255,255,.14),transparent);}
.mcps-h20 .mcps-h20-card:hover .mcps-h20-scan{opacity:1;}
.mcps-h20 .mcps-h20-card:hover .mcps-h20-scan::after{animation:mcpsH20scan 1.6s linear infinite;}
@keyframes mcpsH20scan{to{top:120%;}}
.mcps-h20 .mcps-h20-rec{position:absolute;top:.9rem;left:1rem;color:var(--rec);font-family:monospace;
 font-weight:700;opacity:0;transition:opacity .3s;animation:mcpsCaret 1s step-end infinite;}
.mcps-h20 .mcps-h20-card:hover .mcps-h20-rec{opacity:1;}
.mcps-h20 .mcps-h20-card:hover img{filter:contrast(1.1) saturate(1.15);}
.mcps-h20 b{position:absolute;left:1rem;bottom:.9rem;color:#fff;font-family:monospace;}

/* --- Social rail cascade (#88) --- */

.mcps-h19 .mcps-h19-card{position:relative;overflow:hidden;border-radius:.9rem;}
.mcps-h19 img{width:100%;height:360px;object-fit:cover;transition:transform .5s ease;}
.mcps-h19 .mcps-h19-card:hover img{transform:scale(1.05);}
.mcps-h19 .mcps-h19-rail{position:absolute;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;}
.mcps-h19 .mcps-h19-rail a{width:42px;height:42px;border-radius:50%;background:#fff;color:#111013;
 display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-16px);
 transition:all .35s cubic-bezier(.34,1.56,.64,1);}
.mcps-h19 .mcps-h19-rail a:hover{background:var(--acc);color:#fff;}
.mcps-h19 .mcps-h19-card:hover .mcps-h19-rail a{opacity:1;transform:none;}
.mcps-h19 .mcps-h19-card:hover .mcps-h19-rail a:nth-child(2){transition-delay:.08s;}
.mcps-h19 .mcps-h19-card:hover .mcps-h19-rail a:nth-child(3){transition-delay:.16s;}
.mcps-h19 .mcps-h19-name{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;color:#fff;
 background:linear-gradient(transparent,rgba(0,0,0,.8));}
.mcps-h19 .mcps-h19-name b{display:block;} .mcps-h19 .mcps-h19-name i{font-style:normal;font-size:.85rem;opacity:.8;}

/* --- Blur swap caption (#89) --- */

.mcps-h7 .mcps-h7-card{position:relative;display:block;overflow:hidden;border-radius:.8rem;}
.mcps-h7 img{width:100%;height:320px;object-fit:cover;transition:transform .6s ease,filter .6s ease;}
.mcps-h7 .mcps-h7-cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
 justify-content:center;text-align:center;color:#fff;opacity:0;transition:opacity .45s ease .1s;}
.mcps-h7 .mcps-h7-cap em{font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;
 transform:translateY(-14px);transition:transform .45s ease .1s;}
.mcps-h7 .mcps-h7-cap b{font-size:1.6rem;transform:translateY(14px);transition:transform .45s ease .1s;}
.mcps-h7 .mcps-h7-card:hover img{transform:scale(1.06);filter:blur(6px) brightness(.5);}
.mcps-h7 .mcps-h7-card:hover .mcps-h7-cap{opacity:1;}
.mcps-h7 .mcps-h7-card:hover .mcps-h7-cap em,.mcps-h7 .mcps-h7-card:hover .mcps-h7-cap b{transform:none;}

/* --- 3D tilt cards (#90) --- */

.mcps-c7 .mcps-c7-tilt{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;text-align:center;}
.mcps-c7 img{height:220px;object-fit:cover;}
.mcps-c7 .mcps-c7-tilt:hover{transform:perspective(900px) rotateY(-8deg) rotateX(4deg) translateY(-6px);}
.mcps-c7 .mcps-c7-up:hover{transform:perspective(900px) rotateX(8deg) translateY(-10px);}
.mcps-c7 .mcps-c7-right:hover{transform:perspective(900px) rotateY(8deg) rotateX(4deg) translateY(-6px);}

/* --- Fan-out card stack (#91) --- */

.mcps-h17 .mcps-h17-stack{position:relative;width:min(420px,80vw);height:280px;}
.mcps-h17 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:.8rem;
 box-shadow:0 14px 34px rgba(0,0,0,.18);transition:transform .5s cubic-bezier(.22,1,.36,1);}
.mcps-h17 img:nth-child(1){transform:rotate(-4deg);}
.mcps-h17 img:nth-child(2){transform:rotate(3deg);}
.mcps-h17 .mcps-h17-stack:hover img:nth-child(1){transform:rotate(-12deg) translateX(-56%) scale(.94);}
.mcps-h17 .mcps-h17-stack:hover img:nth-child(2){transform:rotate(12deg) translateX(56%) scale(.94);}
.mcps-h17 .mcps-h17-stack:hover img:nth-child(3){transform:translateY(-10px) scale(1.03);}

/* --- Ripple burst cards (#92) --- */

.mcps-h10 .mcps-h10-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;
 padding:2.5rem 1rem;border:1px solid rgba(0,0,0,.1);border-radius:1rem;color:var(--ink);text-decoration:none;
 overflow:hidden;z-index:1;transition:color .4s ease,border-color .4s;}
.mcps-h10 .mcps-h10-card::before{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;
 border-radius:50%;background:var(--ink);transform:translate(-50%,-50%) scale(0);transition:transform .55s ease;z-index:-1;}
.mcps-h10 .mcps-h10-card:hover{color:#fff;border-color:var(--ink);}
.mcps-h10 .mcps-h10-card:hover::before{transform:translate(-50%,-50%) scale(30);}
.mcps-h10 h5{margin:0;font-weight:700;}

/* --- Sticker peel corner (#93) --- */

.mcps-h12 .mcps-h12-card{position:relative;background:var(--card);border:1px solid rgba(0,0,0,.08);
 border-radius:.6rem;height:100%;overflow:hidden;transition:box-shadow .35s ease;}
.mcps-h12 .mcps-h12-card::after{content:'';position:absolute;top:0;right:0;width:0;height:0;
 background:linear-gradient(225deg,#F6F7F2 47%,#e2e0d4 50%,#cfcdc0 53%,transparent 55%);
 border-bottom-left-radius:.4rem;box-shadow:-3px 3px 8px rgba(0,0,0,.15);
 transition:width .4s cubic-bezier(.22,1,.36,1),height .4s cubic-bezier(.22,1,.36,1);}
.mcps-h12 .mcps-h12-card:hover::after{width:72px;height:72px;}
.mcps-h12 .mcps-h12-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.12);}

/* --- Rolling text links (#94) --- */

.mcps-h4 .mcps-h4-link{display:flex;justify-content:space-between;align-items:center;text-decoration:none;
 color:var(--ink);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;padding:1.1rem 0;
 border-bottom:1px solid rgba(0,0,0,.15);}
.mcps-h4 .mcps-h4-link span{position:relative;display:inline-block;overflow:hidden;line-height:1.2;
 transition:transform .4s cubic-bezier(.76,0,.24,1);}
.mcps-h4 .mcps-h4-link span::after{content:attr(data-text);position:absolute;left:0;top:100%;color:var(--acc);
 transition:transform .4s cubic-bezier(.76,0,.24,1);}
.mcps-h4 .mcps-h4-link:hover span{transform:translateY(-100%);}
.mcps-h4 .mcps-h4-link i{font-style:normal;font-size:1rem;color:rgba(0,0,0,.4);transition:color .3s,transform .3s;}
.mcps-h4 .mcps-h4-link:hover i{color:var(--acc);transform:translateX(-6px);}

/* --- Letters rise on hover (#95) --- */

.mcps-h8 .mcps-h8-word{text-decoration:none;color:var(--ink);font-size:clamp(3rem,9vw,6rem);font-weight:800;
 letter-spacing:-.02em;display:inline-block;line-height:1;}
.mcps-h8 .mcps-h8-word span{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .35s;}
.mcps-h8 .mcps-h8-word:hover span{color:var(--acc);transform:translateY(-14px);}
.mcps-h8 .mcps-h8-word:hover span:nth-child(2n){transition-delay:.05s;}
.mcps-h8 .mcps-h8-word:hover span:nth-child(3n){transition-delay:.1s;}
.mcps-h8 .mcps-h8-word:hover span:nth-child(4n){transition-delay:.15s;}

/* --- Rotating gradient border (#96) --- */

@property --mcps-h6-a{syntax:'<angle>';initial-value:0deg;inherits:false;}
.mcps-h6 .mcps-h6-wrap{position:relative;border-radius:1rem;padding:2px;background:rgba(255,255,255,.08);}
.mcps-h6 .mcps-h6-wrap:hover{background:conic-gradient(from var(--mcps-h6-a),var(--c1),var(--c2),var(--c3),var(--c1));
 animation:mcpsH6spin 2.4s linear infinite;}
@keyframes mcpsH6spin{to{--mcps-h6-a:360deg;}}
.mcps-h6 .mcps-h6-card{background:var(--card);border-radius:calc(1rem - 2px);padding:2rem;text-align:center;height:100%;}

/* --- Typewriter caption (#97) --- */

.mcps-h15 .mcps-h15-card{position:relative;overflow:hidden;border-radius:.8rem;}
.mcps-h15 img{width:100%;height:300px;object-fit:cover;}
.mcps-h15 .mcps-h15-cap{position:absolute;left:1rem;bottom:1rem;right:1rem;color:var(--acc);
 font-family:monospace;font-size:1rem;white-space:nowrap;overflow:hidden;width:0;
 border-right:2px solid var(--acc);background:color-mix(in srgb,var(--ink) 75%,transparent);
 padding:.35rem .6rem;border-radius:.3rem;}
.mcps-h15 .mcps-h15-card:hover .mcps-h15-cap{animation:mcpsTyping 1.6s steps(30) both,mcpsCaret .7s step-end infinite;}