/* Mavrik Matting Solutions hero logo animation (prefix mvh-).
   Modelled on the original Mavrik Solutions intro: the crane drives in with the M hanging,
   lowers it, each leg of the M runs out as a pipe, A-V-R-I-K rise out of the top pipe, the flame lights,
   the turbine turns, the tagline fades in. Parts are cut from the 1974x1174 master logo. */
.mvh-logo{position:relative;width:100%;aspect-ratio:1974/1174;container-type:inline-size;--d:11.65cqw;
  filter:drop-shadow(0 .35cqw 1cqw rgba(0,0,0,.5))}
.mvh-p{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;user-select:none}
.mvh-rig,.mvh-load,.mvh-sway{position:absolute;inset:0}

/* 1. Drive in (0-2.4s): crane, cable and the hanging M travel together, tracks rumbling */
.mvh-rig{animation:mvh-drive 2.3s cubic-bezier(.2,.45,.3,1) both}
.mvh-crane{animation:mvh-rumble .14s linear 16 alternate}
/* drive sprocket and idler at each end of the track, turning with the drive (rolling distance /
   radius = 2260deg) and fading with the tread once the crane stops */
.mvh-wheel{position:absolute;--k:calc(100cqw/1974);width:calc(58*var(--k));height:calc(58*var(--k));top:calc(833*var(--k));
  animation:mvh-rumble .14s linear 16 alternate,mvh-tread-off .45s ease-out 2.2s both}
.mvh-wheel-l{left:calc(103*var(--k))}.mvh-wheel-r{left:calc(343*var(--k))}
.mvh-wheel svg{display:block;width:100%;height:100%;animation:mvh-roll 2.3s cubic-bezier(.2,.45,.3,1) both}
/* track tread: the crawler's track band shown as a turning loop while it drives. Top run cleats
   travel forward over the body, bottom run cleats roll back against the ground (same easing as the
   drive, so the track grips), masked to the crane's own silhouette; gone once it stops. */
.mvh-tread{position:absolute;--k:calc(100cqw/1974);left:calc(102*var(--k));width:calc(300*var(--k));
  background:repeating-linear-gradient(90deg,rgba(22,22,18,.92) 0 calc(7*var(--k)),transparent calc(7*var(--k)) calc(20*var(--k)));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:url(p-crane.webp);mask-image:url(p-crane.webp);
  -webkit-mask-size:calc(692*var(--k)) calc(909*var(--k));mask-size:calc(692*var(--k)) calc(909*var(--k))}
.mvh-tread-top{top:calc(880*var(--k));height:calc(12*var(--k));
  -webkit-mask-position:calc(-102*var(--k)) calc(-877*var(--k));mask-position:calc(-102*var(--k)) calc(-877*var(--k));
  animation:mvh-rumble .14s linear 16 alternate,mvh-tread-fwd 2.3s cubic-bezier(.2,.45,.3,1) both,mvh-tread-off .45s ease-out 2.2s both}
.mvh-tread-bot{top:calc(894*var(--k));height:calc(13*var(--k));background-position:calc(10*var(--k)) 0;
  -webkit-mask-position:calc(-102*var(--k)) calc(-891*var(--k));mask-position:calc(-102*var(--k)) calc(-891*var(--k));
  animation:mvh-rumble .14s linear 16 alternate,mvh-tread-back 2.3s cubic-bezier(.2,.45,.3,1) both,mvh-tread-off .45s ease-out 2.2s both}
/* the load lags as the crane pulls off, swings forward when it stops, then settles */
.mvh-sway{transform-origin:34.3% 32.8%;animation:mvh-sway 3s ease-in-out both}

/* 2. Lower the M (2.5-3.3s): load and cable share stops so the hook stays on the cable end */
.mvh-load{animation:mvh-lower .65s 2.1s both}
.mvh-cable{transform-origin:50% 0;animation:mvh-cable .65s 2.1s both}

/* 3. Each leg runs down, curves and drills out to the right as a pipe, left leg first (3.2-4.4s) */
.mvh-pipe1,.mvh-pipe2,.mvh-pipe3{animation:mvh-drill .9s cubic-bezier(.4,.1,.35,1) both}
.mvh-pipe1{animation-delay:2.80s}.mvh-pipe2{animation-delay:2.98s}
.mvh-pipe3{animation:mvh-drill 1.3s linear 3.16s both}

/* 4. A V R I K rise smoothly out of the top pipe one after another, each starting as the pipe's
   leading end passes it (like the original). Translate and clip move together, so each letter
   emerges from the pipe line rather than sliding in over it. */
.mvh-a,.mvh-v,.mvh-r,.mvh-i,.mvh-k{animation:mvh-rise .6s cubic-bezier(.3,.55,.3,1) both}
.mvh-a{animation-delay:3.32s}.mvh-v{animation-delay:3.60s}.mvh-r{animation-delay:3.85s}
.mvh-i{animation-delay:4.13s}.mvh-k{animation-delay:4.25s}

/* 5. Turbine appears with the i, spins up, keeps turning */
.mvh-blades{transform-origin:50% 50%;
  animation:mvh-blades-in .5s cubic-bezier(.3,.7,.4,1) 4.35s both,mvh-spinup 2.4s cubic-bezier(.333,0,.667,.333) 4.6s both,mvh-spin 5s linear 7s infinite}

/* 6. Flame bursts alight, then burns: the 40-frame flicker loop lifted from the original
   #LogoAnimation_Transparent.mov (frames 234-272: 20 unique drawings), keyed, recoloured to the logo blue, morphed
   (3 in-betweens per pair, 80 frames at 60 fps) and layered half a cycle apart so it never pulses,
   masked to the V below the letter line */
.mvh-flame{overflow:hidden;transform-origin:42.1% 52.2%;--line:52.2%;animation:mvh-ignite 1.1s cubic-bezier(.3,.6,.35,1) 4.3s both}
.mvh-flame-rows{position:absolute;left:0;top:0;width:1000%;height:800%;animation:mvh-burn 1.3333s step-end infinite}
.mvh-flame img{display:block;width:100%;height:100%;max-width:none}

/* ignition spark: a hot blue-white glint on the top of the V, just before the flame rises */
.mvh-ign{position:absolute;--k:calc(100cqw/1974);left:calc(1229*var(--k));top:calc(652*var(--k));width:calc(120*var(--k));height:calc(44*var(--k));
  border-radius:50%;background:radial-gradient(closest-side,#fff 0,#e4f7ff 22%,rgba(36,180,232,.95) 50%,rgba(36,180,232,0));
  opacity:0;pointer-events:none;animation:mvh-ign-glow .65s ease-out 4.2s both}
.mvh-ember{position:absolute;--k:calc(100cqw/1974);left:calc(1229*var(--k));top:calc(650*var(--k));width:calc(12*var(--k));height:calc(16*var(--k));
  margin:calc(-8*var(--k)) 0 0 calc(-6*var(--k));border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#bfeaff;
  opacity:0;pointer-events:none;animation:mvh-ember .6s cubic-bezier(.2,.7,.4,1) both}

/* 7. Tagline */
.mvh-tag{animation:mvh-tag .9s ease-out 5.1s both}

@keyframes mvh-drive{from{transform:translateX(-52cqw)}to{transform:none}}
@keyframes mvh-rumble{from{transform:translateY(0)}to{transform:translateY(-.14cqw)}}
@keyframes mvh-tread-fwd{from{background-position-x:0}to{background-position-x:calc(1026*var(--k))}}
@keyframes mvh-tread-back{from{background-position-x:calc(10*var(--k))}to{background-position-x:calc(-1016*var(--k))}}
@keyframes mvh-tread-off{from{opacity:1}to{opacity:0}}
@keyframes mvh-roll{from{transform:none}to{transform:rotate(2260deg)}}
@keyframes mvh-sway{0%{transform:rotate(5deg)}45%{transform:rotate(3deg)}66%{transform:rotate(-4.5deg)}80%{transform:rotate(2.2deg)}91%{transform:rotate(-.8deg)}100%{transform:none}}
@keyframes mvh-lower{
  0%{transform:translateY(calc(-1*var(--d)));animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  78%{transform:translateY(.4cqw);animation-timing-function:ease-out}
  90%{transform:translateY(-.15cqw)}100%{transform:none}}
@keyframes mvh-cable{
  0%{transform:scaleY(.098);animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  78%{transform:scaleY(1.031);animation-timing-function:ease-out}
  90%{transform:scaleY(.988)}100%{transform:none}}
@keyframes mvh-drill{from{clip-path:inset(-5% 100% -5% -1%)}to{clip-path:inset(-5% -1% -5% -1%)}}
@keyframes mvh-rise{from{transform:translateY(100%);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 0 0)}}
@keyframes mvh-blades-in{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes mvh-spinup{from{transform:rotate(0)}to{transform:rotate(120deg)}}
@keyframes mvh-spin{from{transform:rotate(120deg)}to{transform:rotate(480deg)}}
@keyframes mvh-ignite{
  0%{opacity:0;transform:scale(.3,.12);clip-path:inset(var(--line) -10% 0 -10%)}
  8%{opacity:1;transform:scale(.4,.24);clip-path:inset(40% -10% 0 -10%)}
  50%{transform:scale(.9,.86);clip-path:inset(6% -10% 0 -10%)}
  75%{transform:scale(1.05,1.08)}
  100%{opacity:1;transform:none;clip-path:inset(-10% -10% 0 -10%)}}
@keyframes mvh-ember{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(.3)}}
@keyframes mvh-ign-glow{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8,.8)}}
@keyframes mvh-burn{0.000%{transform:translate(0.000%,0.000%)}1.250%{transform:translate(-10.000%,0.000%)}2.500%{transform:translate(-20.000%,0.000%)}3.750%{transform:translate(-30.000%,0.000%)}5.000%{transform:translate(-40.000%,0.000%)}6.250%{transform:translate(-50.000%,0.000%)}7.500%{transform:translate(-60.000%,0.000%)}8.750%{transform:translate(-70.000%,0.000%)}10.000%{transform:translate(-80.000%,0.000%)}11.250%{transform:translate(-90.000%,0.000%)}12.500%{transform:translate(0.000%,-12.500%)}13.750%{transform:translate(-10.000%,-12.500%)}15.000%{transform:translate(-20.000%,-12.500%)}16.250%{transform:translate(-30.000%,-12.500%)}17.500%{transform:translate(-40.000%,-12.500%)}18.750%{transform:translate(-50.000%,-12.500%)}20.000%{transform:translate(-60.000%,-12.500%)}21.250%{transform:translate(-70.000%,-12.500%)}22.500%{transform:translate(-80.000%,-12.500%)}23.750%{transform:translate(-90.000%,-12.500%)}25.000%{transform:translate(0.000%,-25.000%)}26.250%{transform:translate(-10.000%,-25.000%)}27.500%{transform:translate(-20.000%,-25.000%)}28.750%{transform:translate(-30.000%,-25.000%)}30.000%{transform:translate(-40.000%,-25.000%)}31.250%{transform:translate(-50.000%,-25.000%)}32.500%{transform:translate(-60.000%,-25.000%)}33.750%{transform:translate(-70.000%,-25.000%)}35.000%{transform:translate(-80.000%,-25.000%)}36.250%{transform:translate(-90.000%,-25.000%)}37.500%{transform:translate(0.000%,-37.500%)}38.750%{transform:translate(-10.000%,-37.500%)}40.000%{transform:translate(-20.000%,-37.500%)}41.250%{transform:translate(-30.000%,-37.500%)}42.500%{transform:translate(-40.000%,-37.500%)}43.750%{transform:translate(-50.000%,-37.500%)}45.000%{transform:translate(-60.000%,-37.500%)}46.250%{transform:translate(-70.000%,-37.500%)}47.500%{transform:translate(-80.000%,-37.500%)}48.750%{transform:translate(-90.000%,-37.500%)}50.000%{transform:translate(0.000%,-50.000%)}51.250%{transform:translate(-10.000%,-50.000%)}52.500%{transform:translate(-20.000%,-50.000%)}53.750%{transform:translate(-30.000%,-50.000%)}55.000%{transform:translate(-40.000%,-50.000%)}56.250%{transform:translate(-50.000%,-50.000%)}57.500%{transform:translate(-60.000%,-50.000%)}58.750%{transform:translate(-70.000%,-50.000%)}60.000%{transform:translate(-80.000%,-50.000%)}61.250%{transform:translate(-90.000%,-50.000%)}62.500%{transform:translate(0.000%,-62.500%)}63.750%{transform:translate(-10.000%,-62.500%)}65.000%{transform:translate(-20.000%,-62.500%)}66.250%{transform:translate(-30.000%,-62.500%)}67.500%{transform:translate(-40.000%,-62.500%)}68.750%{transform:translate(-50.000%,-62.500%)}70.000%{transform:translate(-60.000%,-62.500%)}71.250%{transform:translate(-70.000%,-62.500%)}72.500%{transform:translate(-80.000%,-62.500%)}73.750%{transform:translate(-90.000%,-62.500%)}75.000%{transform:translate(0.000%,-75.000%)}76.250%{transform:translate(-10.000%,-75.000%)}77.500%{transform:translate(-20.000%,-75.000%)}78.750%{transform:translate(-30.000%,-75.000%)}80.000%{transform:translate(-40.000%,-75.000%)}81.250%{transform:translate(-50.000%,-75.000%)}82.500%{transform:translate(-60.000%,-75.000%)}83.750%{transform:translate(-70.000%,-75.000%)}85.000%{transform:translate(-80.000%,-75.000%)}86.250%{transform:translate(-90.000%,-75.000%)}87.500%{transform:translate(0.000%,-87.500%)}88.750%{transform:translate(-10.000%,-87.500%)}90.000%{transform:translate(-20.000%,-87.500%)}91.250%{transform:translate(-30.000%,-87.500%)}92.500%{transform:translate(-40.000%,-87.500%)}93.750%{transform:translate(-50.000%,-87.500%)}95.000%{transform:translate(-60.000%,-87.500%)}96.250%{transform:translate(-70.000%,-87.500%)}97.500%{transform:translate(-80.000%,-87.500%)}98.750%{transform:translate(-90.000%,-87.500%)}100%{transform:translate(-90.000%,-87.500%)}}
@keyframes mvh-tag{from{opacity:0;filter:blur(.6cqw);transform:translateY(1.2cqw)}to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){
  .mvh-logo *{animation:none!important;transform:none!important}
  }

/* ---- Placement in the theme's homepage hero (header.php calls mavrik_hero_logo() inside .custom-container) ---- */
.mvh-slot{position:absolute;left:15px;top:40px;width:min(48%,620px);z-index:1;pointer-events:none}
@media (min-width:992px){html body .home-banner .ban-cont{max-width:min(800px,50%)}}
@media (max-width:991px){
  .mvh-slot{position:relative;left:auto;top:auto;width:min(82%,430px);margin:46px auto 0}
  html body .home-banner .ban-cont{margin:18px auto 0;padding-top:0}
}