
/* V39: based on V37. The hand draws in horizontal left-right passes while moving downward. */
#hero{position:relative!important;isolation:isolate!important;overflow:hidden!important}
#hero>.e-con-inner,#hero>.elementor-container{position:relative;z-index:1;clip-path:inset(0 100% 100% 0);filter:saturate(.72) contrast(.93) sepia(.1);transition:filter .75s ease}
.mk-draw-intro{position:absolute;inset:0;z-index:9990;pointer-events:none;overflow:hidden;background:transparent}
.mk-draw-paper{position:absolute;inset:-2px;z-index:1;background:#fff;clip-path:inset(0);animation:mkPaperScan39 8.4s linear .18s forwards}
.mk-crayon-trace{position:absolute;inset:0;z-index:2;opacity:.62;background:repeating-linear-gradient(174deg,rgba(239,81,68,.11) 0 1px,transparent 1px 5px),repeating-linear-gradient(8deg,rgba(23,20,20,.05) 0 1px,transparent 1px 7px);mix-blend-mode:multiply;clip-path:inset(0 100% 100% 0);animation:mkRevealScan39 8.4s linear .18s forwards,mkFadeScan39 .7s ease 8.15s forwards}
.mk-drawing-hand{position:absolute;z-index:6;width:clamp(190px,18vw,315px);height:auto;left:0;top:0;transform:translate(-8%,-15%) rotate(-6deg) scale(.95);transform-origin:8% 7%;filter:drop-shadow(0 8px 12px rgba(23,20,20,.14));animation:mkHandScan39 8.4s linear .18s forwards;will-change:left,top,transform,opacity}
#hero.mk-target-drawing>.e-con-inner,#hero.mk-target-drawing>.elementor-container{animation:mkRevealScan39 8.4s linear .18s forwards}
#hero.mk-target-drawing:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(172deg,rgba(239,81,68,.11) 0 1px,transparent 1px 5px),repeating-linear-gradient(7deg,rgba(23,20,20,.05) 0 1px,transparent 1px 7px);mix-blend-mode:multiply;clip-path:inset(0 100% 100% 0);animation:mkRevealScan39 8.4s linear .18s forwards,mkFadeScan39 .75s ease 8.1s forwards}
#hero.mk-drawing-done>.e-con-inner,#hero.mk-drawing-done>.elementor-container{clip-path:none!important;filter:none!important}
/* Each pass reveals the current strip, then the next pass continues lower down. */
@keyframes mkRevealScan39{
0%{clip-path:polygon(0 0,0 0,0 0,0 0)}
9%{clip-path:polygon(0 0,100% 0,100% 12%,0 12%)}
18%{clip-path:polygon(0 0,100% 0,100% 12%,0 12%,0 24%,100% 24%,100% 12%,0 12%)}
27%{clip-path:polygon(0 0,100% 0,100% 36%,0 36%)}
36%{clip-path:polygon(0 0,100% 0,100% 48%,0 48%)}
45%{clip-path:polygon(0 0,100% 0,100% 60%,0 60%)}
54%{clip-path:polygon(0 0,100% 0,100% 72%,0 72%)}
63%{clip-path:polygon(0 0,100% 0,100% 84%,0 84%)}
72%{clip-path:polygon(0 0,100% 0,100% 94%,0 94%)}
100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
@keyframes mkPaperScan39{0%{clip-path:inset(0)}9%{clip-path:inset(12% 0 0 0)}18%{clip-path:inset(24% 0 0 0)}27%{clip-path:inset(36% 0 0 0)}36%{clip-path:inset(48% 0 0 0)}45%{clip-path:inset(60% 0 0 0)}54%{clip-path:inset(72% 0 0 0)}63%{clip-path:inset(84% 0 0 0)}72%{clip-path:inset(94% 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes mkHandScan39{
0%{left:0%;top:2%;opacity:0;transform:translate(-8%,-15%) rotate(-7deg) scale(.93)}2%{opacity:1}
9%{left:94%;top:12%;transform:translate(-8%,-15%) rotate(-3deg)}
10%{left:94%;top:15%;transform:translate(-8%,-15%) rotate(4deg)}
18%{left:4%;top:24%;transform:translate(-8%,-15%) rotate(5deg)}
19%{left:4%;top:27%;transform:translate(-8%,-15%) rotate(-5deg)}
27%{left:94%;top:36%;transform:translate(-8%,-15%) rotate(-3deg)}
28%{left:94%;top:39%;transform:translate(-8%,-15%) rotate(4deg)}
36%{left:4%;top:48%;transform:translate(-8%,-15%) rotate(5deg)}
37%{left:4%;top:51%;transform:translate(-8%,-15%) rotate(-5deg)}
45%{left:94%;top:60%;transform:translate(-8%,-15%) rotate(-3deg)}
46%{left:94%;top:63%;transform:translate(-8%,-15%) rotate(4deg)}
54%{left:4%;top:72%;transform:translate(-8%,-15%) rotate(5deg)}
55%{left:4%;top:75%;transform:translate(-8%,-15%) rotate(-5deg)}
63%{left:94%;top:84%;transform:translate(-8%,-15%) rotate(-3deg)}
64%{left:94%;top:87%;transform:translate(-8%,-15%) rotate(4deg)}
72%{left:4%;top:94%;transform:translate(-8%,-15%) rotate(5deg)}
82%{left:94%;top:100%;opacity:1;transform:translate(-8%,-15%) rotate(-3deg)}
100%{left:108%;top:106%;opacity:0;transform:translate(-8%,-15%) rotate(-4deg) scale(.92)}}
@keyframes mkFadeScan39{to{opacity:0}}
@media(max-width:767px){.mk-drawing-hand{width:180px}.mk-draw-paper,.mk-crayon-trace,.mk-drawing-hand,#hero.mk-target-drawing>.e-con-inner,#hero.mk-target-drawing>.elementor-container,#hero.mk-target-drawing:after{animation-duration:7s}}
@media(prefers-reduced-motion:reduce){.mk-draw-intro{display:none!important}#hero>.e-con-inner,#hero>.elementor-container{clip-path:none!important;filter:none!important}}
