/* Wilson & Farr: motion + image-safety layer. Loaded on marketing pages.
   Everything is gated behind html.wfm, which is only set when the visitor
   has NOT asked their device to reduce motion. */

/* Image safety: lets width/height attributes reserve space without stretching */
:where(img){max-width:100%;height:auto}

@media (prefers-reduced-motion: reduce){
  .wf-reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{scroll-behavior:auto!important}
}

/* ── Hero headline: masked line rise + squeegee wipe on the green line ── */
.wfm :is(.hero,.page-hero) h1:not(.wfm-split){opacity:0;animation:wfm-show 0s 1.6s forwards!important}
.wfm :is(.hero,.page-hero) h1.wfm-split{animation:none!important;opacity:1}
.wfm h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;color:inherit}
.wfm h1 .ln>.r{display:inline-block;color:inherit;transform:translateY(108%);animation:wfm-rise 1.05s cubic-bezier(.19,1,.22,1) forwards;animation-delay:calc(var(--i,0)*120ms + 200ms)}
.wfm h1 .wipe{position:relative;display:inline-block}
.wfm h1 .wipe>.txt{display:inline-block;color:var(--green);clip-path:inset(-10% 100% -10% 0);animation:wfm-unclip 1s cubic-bezier(.77,0,.18,1) var(--wd,.62s) forwards}
.wfm h1 .wipe::after{content:"";position:absolute;top:6%;bottom:10%;left:0;width:4px;margin-left:-4px;background:var(--green);box-shadow:0 0 28px rgba(1,237,1,.55);opacity:0;animation:wfm-blade 1s cubic-bezier(.77,0,.18,1) var(--wd,.62s) forwards;pointer-events:none}
@keyframes wfm-show{to{opacity:1}}
@keyframes wfm-rise{to{transform:none}}
@keyframes wfm-unclip{to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes wfm-blade{0%{left:0;opacity:1}88%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.wfm :is(.hero,.page-hero) .hero-eyebrow{animation-delay:.05s!important}
.wfm :is(.hero,.page-hero) .hero-subtitle{animation-delay:1s!important}
.wfm :is(.hero,.page-hero) .hero-actions{animation-delay:1.15s!important}

/* Homepage hero video: eases in from black and settles */
.wfm .hero-video{opacity:0;transform:scale(1.06);transition:opacity 1.8s ease,transform 9s cubic-bezier(.19,1,.22,1)}
.wfm .hero-video.wfm-on{opacity:.72;transform:scale(1)}

/* ── Nav firms up once you scroll ── */
.wfm nav{transition:background .4s ease,border-color .4s ease,height .4s cubic-bezier(.19,1,.22,1)}
.wfm nav.wfm-scrolled{background:rgba(1,1,1,.84)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(1,237,1,.16)}
@media (min-width:901px){.wfm nav.wfm-scrolled{height:60px}}

/* ── Section labels: short green rule draws in ── */
.wfm .section-label.wf-reveal{opacity:1!important;transform:none!important;position:relative;transition:padding-left .7s cubic-bezier(.19,1,.22,1)}
.wfm .section-label.wf-reveal::before{content:"";position:absolute;left:0;top:50%;height:1px;width:0;background:var(--green);transition:width .7s cubic-bezier(.19,1,.22,1)}
.wfm .section-label.wf-reveal.wf-in{padding-left:34px}
.wfm .section-label.wf-reveal.wf-in::before{width:24px}

/* ── Section titles: soft-edged left-to-right pass, like a squeegee ── */
.wfm .section-title.wf-reveal{opacity:1!important;transform:none!important;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:-webkit-mask-position 1.3s cubic-bezier(.6,0,.2,1),mask-position 1.3s cubic-bezier(.6,0,.2,1)}
.wfm .section-title.wf-reveal.wf-in{-webkit-mask-position:0 0;mask-position:0 0}

/* ── Service cards: photo uncovers top-down and settles; glass sheen on hover ── */
.wfm .service-card.wf-reveal .service-card-img{position:relative;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.wfm .service-card.wf-reveal.wf-in .service-card-img{clip-path:inset(0 0 0 0)}
.wfm .service-card.wf-reveal:not(.wf-in) .service-card-img img{transform:scale(1.14)!important}
.wfm .service-card.wf-in:not(.wfm-done) .service-card-img img{transition:transform 1.6s cubic-bezier(.19,1,.22,1)!important}
.wfm .service-card-img{position:relative}
.wfm .service-card-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 54%,transparent 70%);transform:translateX(-130%)}
.wfm .service-card:hover .service-card-img::after{transform:translateX(130%);transition:transform 1s cubic-bezier(.19,1,.22,1)}

/* ── Our Standard: a line draws through the four stages as you scroll ── */
.wfm .stage-grid{position:relative}
.wfm .stage-grid::before{content:"";position:absolute;left:0;right:0;top:-22px;height:1px;background:rgba(255,255,255,.08)}
.wfm .stage-grid::after{content:"";position:absolute;left:0;top:-22px;height:1px;width:calc(var(--wfm-p,0)*100%);background:var(--green);box-shadow:0 0 12px rgba(1,237,1,.5)}
.wfm .stage-card .stage-num{transition:background .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease}
.wfm .stage-card.wfm-lit .stage-num{background:var(--green);color:#010101;border-color:var(--green);box-shadow:0 0 22px rgba(1,237,1,.35)}

/* Menu button: comfortable tap target on phones */
@media (max-width: 900px){ .nav-hamburger{min-width:44px;min-height:44px} }

/* ── Scroll effects (pages opt in with <body data-fx="1">) ── */
#wfm-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--green);box-shadow:0 0 10px rgba(1,237,1,.6);z-index:400;pointer-events:none}
/* Photo depth: the photo drifts a little slower than the page */
.wfm .wfm-par{position:absolute;inset:-7% 0;will-change:transform}
.wfm .wfm-par img{height:100%!important}
.wfm .split-img.wfm-has-par{height:480px}
@media (max-width:900px){.wfm .split-img.wfm-has-par{height:300px}}
/* Squeegee pass on one key photo, tied to scroll */
.wfm [data-fx-wipe].wfm-wipe{clip-path:inset(0 calc(100% - var(--w,0)*100%) 0 0)}
.wfm [data-fx-wipe] .wfm-blade{position:absolute;top:0;bottom:0;width:3px;left:calc(var(--w,0)*100%);margin-left:-3px;background:var(--green);box-shadow:0 0 22px rgba(1,237,1,.6);z-index:3;opacity:calc(1 - var(--w,0)*var(--w,0)*var(--w,0));pointer-events:none}
/* One key sentence comes clean word by word */
.wfm [data-fx-words] .fw{color:rgba(255,255,255,.2);transition:color .35s ease}
.wfm [data-fx-words] .fw.on{color:inherit}