/* ==========================================================================
   Sacred Leaf — motion layer (animations & interactions)
   Loaded after site.css. Everything here is keyed on classes that only
   exist on the published site (.sl-motion is set in <head> unless the
   visitor prefers reduced motion; .sl-motion-ready is set by motion.js),
   so the block editor and reduced-motion visitors see the static design.
   ========================================================================== */

/* ---------- 1. page intro + page transitions (leaf curtain) ---------- */
html.sl-motion::before,html.sl-motion::after{content:'';position:fixed;pointer-events:none;z-index:99999}
html.sl-motion::before{inset:0;background:var(--sl-forest);transform:translateY(-101%)}
html.sl-motion::after{left:50%;top:50%;width:64px;height:68px;margin:-34px 0 0 -32px;background:var(--sl-leaf);-webkit-mask:url(../images/leaf-all.svg) center/contain no-repeat;mask:url(../images/leaf-all.svg) center/contain no-repeat;opacity:0}
html.sl-intro-full::before{animation:sl-curtain-up .85s cubic-bezier(.76,0,.24,1) .95s both}
html.sl-intro-full::after{animation:sl-mark-in 1.05s cubic-bezier(.2,.7,.2,1) both}
html.sl-intro-quick::before{animation:sl-curtain-up .6s cubic-bezier(.76,0,.24,1) .05s both}
html.sl-motion.sl-leaving::before{animation:sl-curtain-in .45s cubic-bezier(.76,0,.24,1) both}
html.sl-motion.sl-leaving::after{animation:sl-mark-pulse .45s ease both}
@keyframes sl-curtain-up{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@keyframes sl-curtain-in{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes sl-mark-in{0%{opacity:0;transform:scale(.6) rotate(-25deg)}35%{opacity:1;transform:scale(1) rotate(0)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25) translateY(-20px)}}
@keyframes sl-mark-pulse{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}

/* hero entrance waits for the curtain */
.sl-intro-full .sl-hero-copy .sl-eyebrow,.sl-intro-full .sl-page-hero .sl-crumb{animation:sl-fade 1s var(--sl-ease) both 1.35s}
.sl-intro-full .sl-hero-copy .sl-lead,.sl-intro-full .sl-page-hero .sl-lead{animation:sl-fade 1.1s var(--sl-ease) both 1.85s}
.sl-intro-full .sl-hero-copy .wp-block-buttons{animation:sl-fade 1.1s var(--sl-ease) both 2s}
.sl-intro-full .sl-hero-foot{animation:sl-fade 1.1s var(--sl-ease) both 2.15s}
.sl-intro-full .sl-header-bar{animation:sl-drop .9s var(--sl-ease) backwards 1.15s} /* backwards, not both: a lingering transform would trap the fixed mobile menu */
.sl-intro-quick .sl-page-hero .sl-crumb{animation:sl-fade .9s var(--sl-ease) both .25s}
.sl-intro-quick .sl-page-hero .sl-lead{animation:sl-fade 1s var(--sl-ease) both .7s}
@keyframes sl-drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}

/* ---------- 2. split-text headlines ---------- */
/* headlines stay hidden until their lines are measured (fail-safe: shown after 2.5s regardless) */
.sl-motion :is(.sl-h2,.sl-cta-title,.sl-zig .sl-h3,.sl-aside-title,.sl-form-card .sl-h3,.sl-hero-title,.sl-page-title,.sl-statement):not(.sl-measured){visibility:hidden;animation:sl-failsafe 0s linear 2.5s forwards}
@keyframes sl-failsafe{to{visibility:visible}}
.sl-motion-ready .sl-words{animation:none!important}
.sl-measured{text-wrap:wrap}
.sl-w,.sl-wi{display:inline}
.sl-measured .sl-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sl-measured .sl-wi{display:inline-block}
.sl-motion-ready .sl-words .sl-wi{transform:translateY(110%) rotate(4deg);transition:transform 1s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--d,0s) + var(--wi,0) * 55ms)}
.sl-motion-ready .sl-words.is-in .sl-wi{transform:none}

/* statement: words light up as you scroll */
.sl-motion-ready .sl-scrub .sl-wi{opacity:.4;transition:opacity .35s ease}
.sl-motion-ready .sl-scrub .sl-wi.is-lit{opacity:1}

/* ---------- 3. staggered reveals (IntersectionObserver) ---------- */
.sl-motion-ready .sl-in{opacity:0;transform:translateY(42px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i,0) * 90ms)}
.sl-motion-ready .sl-in.sl-in-l{transform:translateX(-36px)}
.sl-motion-ready .sl-in.sl-in-s{transform:scale(.6) rotate(-12deg)}
.sl-motion-ready .sl-in.is-in{opacity:1;transform:none}
.sl-motion-ready .sl-in-clip{clip-path:inset(14% 10% 14% 10% round 32px);transition:clip-path 1.4s cubic-bezier(.2,.75,.15,1)}
.sl-motion-ready .sl-in-clip img{transform:scale(1.25);transition:transform 1.8s cubic-bezier(.2,.75,.15,1)}
.sl-motion-ready .sl-in-clip.is-in{clip-path:inset(0 0 0 0 round 24px)}
.sl-motion-ready .sl-in-clip.is-in img{transform:none}
/* the JS reveal replaces the scroll-timeline one where both would apply */
.sl-motion-ready .sl-in,.sl-motion-ready .sl-in-clip{animation:none!important}
/* eyebrow: leaf spins in, label slides */
.sl-motion-ready .sl-eyebrow.sl-in::before{transform:rotate(-120deg) scale(0);transition:transform .9s cubic-bezier(.3,1.5,.5,1) .15s}
.sl-motion-ready .sl-eyebrow.sl-in.is-in::before{transform:none}
/* process tiles / rail lines draw across */
.sl-motion-ready .sl-ptile.sl-in{border-top-color:transparent;background-image:linear-gradient(var(--sl-leaf),var(--sl-leaf));background-repeat:no-repeat;background-size:0 1px;background-position:0 -1px}
.sl-motion-ready .sl-ptile.sl-in.is-in{border-top-color:rgba(255,255,255,.18);background-size:100% 1px;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.75,.15,1),background-size 1.4s var(--sl-ease) .3s,border-color .5s 1.2s,background-color .5s}
.sl-motion-ready .sl-ptile.sl-in.is-in:hover,
.sl-motion-ready .sl-ptile.sl-in.is-in.is-focus{border-top-color:var(--sl-leaf)}

/* ---------- 4. hero life ---------- */
.sl-leaf-outline{translate:var(--px,0) var(--py,0);transition:translate 1.2s cubic-bezier(.2,.7,.2,1)}
.sl-hero-inner,.sl-page-hero-inner{will-change:transform,opacity}
.sl-scroll-cue{position:absolute;left:50%;bottom:28px;z-index:4;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.45);border-radius:14px;pointer-events:none;opacity:0;animation:sl-fade 1s ease 2.6s forwards}
.sl-scroll-cue::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--sl-leaf);animation:sl-cue 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes sl-cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- 5. cursor follower (mouse/trackpad only) ---------- */
.sl-cursor{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1.5px solid var(--sl-leaf);opacity:0;transition:width .4s var(--sl-ease),height .4s var(--sl-ease),margin .4s var(--sl-ease),background .4s,border-color .4s,opacity .3s;display:grid;place-items:center;mix-blend-mode:normal}
.sl-cursor-dot{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--sl-leaf);opacity:0;transition:opacity .3s,transform .3s}
.sl-cursor.is-on,.sl-cursor-dot.is-on{opacity:1}
.sl-cursor.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(67,194,120,.14);border-color:transparent}
.sl-cursor.is-view{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--sl-leaf);border-color:var(--sl-leaf)}
.sl-cursor.is-view+.sl-cursor-dot,.sl-cursor.is-link+.sl-cursor-dot{opacity:0}
.sl-cursor span{font-family:var(--sl-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#06140B;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--sl-ease)}
.sl-cursor.is-view span{opacity:1;transform:none}
.sl-cursor.is-down{transform:scale(.85)}

/* ---------- 6. magnetic buttons + sheen ---------- */
.sl-mag{translate:var(--mx,0) var(--my,0);transition:translate .5s cubic-bezier(.2,.7,.2,1),background .35s,color .35s,border-color .35s,transform .35s}
.sl-mag.is-mag{transition:translate .15s linear,background .35s,color .35s,border-color .35s,transform .35s}
.sl-motion-ready .wp-block-button .wp-block-button__link{position:relative;overflow:hidden;isolation:isolate}
.sl-motion-ready .wp-block-button .wp-block-button__link::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg) translateX(0);pointer-events:none;z-index:-1}
.sl-motion-ready .wp-block-button .wp-block-button__link:hover::before{animation:sl-sheen .9s var(--sl-ease)}
@keyframes sl-sheen{to{transform:skewX(-20deg) translateX(420%)}}
/* underline sweep on text links */
.sl-motion-ready .sl-tlink a{border-bottom-color:transparent;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:gap .35s var(--sl-ease),background-size .5s var(--sl-ease)}
.sl-motion-ready .sl-tlink a:hover{animation:sl-underline .7s var(--sl-ease)}
@keyframes sl-underline{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}46%{background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}

/* ---------- 7. tilt cards + spotlight ---------- */
.sl-tilt{transform-style:preserve-3d;will-change:transform}
.sl-tilt.is-tilting{transition:transform .12s linear,box-shadow .5s,border-color .4s,background .4s,color .4s!important}
.sl-glow{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(67,194,120,.22),transparent 60%)}
.sl-tilt:hover>.sl-glow,.sl-svc:hover>.sl-glow,
.sl-tilt.is-focus>.sl-glow,.sl-svc.is-focus>.sl-glow{opacity:1}
.sl-svc>.sl-glow{background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(67,194,120,.28),transparent 60%)}
.sl-svc .sl-ic{transition:transform .6s cubic-bezier(.3,1.5,.5,1),background .4s,color .4s}
.sl-svc:hover .sl-ic,
.sl-svc.is-focus .sl-ic{transform:rotate(-8deg) scale(1.08)}
.sl-svc .sl-go{transition:transform .5s var(--sl-ease),background .4s,color .4s}
.sl-svc:hover .sl-go,
.sl-svc.is-focus .sl-go{transform:rotate(45deg)}

/* ---------- 8. map: live flight routes from the Dubai hub ---------- */
.sl-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.sl-route{fill:none;stroke:var(--sl-leaf-deep);stroke-width:1.4;stroke-linecap:round;opacity:.55;transition:opacity .4s,stroke-width .4s}
.sl-route-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.sl-routes.is-in .sl-route-draw{animation:sl-route-draw 1.6s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--i) * .22s + .5s)}
.sl-route-flow{stroke-dasharray:2 7;stroke:var(--sl-leaf);opacity:0;animation:sl-route-flow 1.2s linear infinite}
.sl-routes.is-in .sl-route-flow{opacity:.9;transition:opacity .6s calc(var(--i) * .22s + 2s)}
.sl-routes .is-on .sl-route{opacity:1;stroke-width:2.2}
.sl-routes .is-dim .sl-route{opacity:.32}
.sl-plane{fill:var(--sl-forest);opacity:0}
.sl-routes.is-in .sl-plane{opacity:1;transition:opacity .4s calc(var(--i) * .22s + 2.1s)}
.sl-hub{fill:var(--sl-leaf)}
.sl-hub-ring{fill:none;stroke:var(--sl-leaf);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:sl-hub 2.4s cubic-bezier(.2,.7,.2,1) infinite}
.sl-hub-ring+.sl-hub-ring{animation-delay:1.2s}
@keyframes sl-route-draw{to{stroke-dashoffset:0}}
@keyframes sl-route-flow{to{stroke-dashoffset:-18}}
@keyframes sl-hub{from{transform:scale(.4);opacity:1}to{transform:scale(3.2);opacity:0}}
.sl-motion-ready .sl-map:not(.is-in) .sl-pin{animation-play-state:paused}
.sl-motion-ready .sl-pin svg{animation:sl-bob 3.6s ease-in-out infinite alternate;animation-delay:inherit}
@keyframes sl-bob{to{translate:0 -4px}}

/* ---------- 9. region chips cascade + tab indicator ---------- */
.sl-motion-ready .sl-region.is-on .sl-chips li{animation:sl-chip .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--c,0) * 22ms)}
@keyframes sl-chip{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.sl-tabs{position:relative;isolation:isolate}
.sl-tab-ink{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;background:var(--sl-leaf);transition:transform .6s cubic-bezier(.2,.75,.15,1),width .6s cubic-bezier(.2,.75,.15,1),height .6s;pointer-events:none}
.sl-tabs.has-ink .sl-tab.is-on{background:transparent;border-color:transparent}

/* header tucks away while scrolling down, returns on scroll up */
.sl-motion-ready header.wp-block-template-part{transition:transform .5s cubic-bezier(.2,.75,.15,1)}
.sl-motion-ready header.wp-block-template-part.is-tucked{transform:translateY(-100%)}

/* ---------- 10. accordion: smooth open ---------- */
.sl-acc-body{overflow:hidden}
.sl-acc summary::after{transition:background .35s,border-color .35s,color .35s,transform .5s var(--sl-ease)}
.sl-acc[open]:not(.sl-closing) summary::after{transform:rotate(180deg)}
.sl-acc.sl-closing summary{color:inherit}
.sl-acc.sl-closing summary::after{content:'+';background:transparent;border-color:rgba(12,26,17,.2);color:inherit}

/* ---------- 11. badge, stats, images ---------- */
.sl-motion-ready .sl-badge{transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.sl-motion-ready .sl-badge:hover{transform:scale(1.08) rotate(-6deg)}
.sl-stat-num,.sl-big-num,.sl-rc-count{font-variant-numeric:tabular-nums}
.sl-zig-img,.sl-ab-main,.sl-who-img,.sl-who-img2,.sl-why-img{overflow:hidden}

/* ---------- 12. back-to-top with progress ring ---------- */
.sl-totop{position:fixed;right:24px;bottom:24px;z-index:900;width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--sl-forest);color:var(--sl-leaf);display:grid;place-items:center;box-shadow:0 18px 40px -16px rgba(7,25,14,.6);opacity:0;transform:translateY(20px) scale(.8);transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1),background .3s;pointer-events:none}
.sl-totop.is-on{opacity:1;transform:none;pointer-events:auto}
.sl-totop:hover{background:#123A22}
.sl-totop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sl-totop circle{fill:none;stroke-width:2}
.sl-totop .sl-ring-bg{stroke:rgba(255,255,255,.12)}
.sl-totop .sl-ring{stroke:var(--sl-leaf);stroke-dasharray:150.8;stroke-dashoffset:150.8}
.sl-totop i{width:18px;height:18px;background:currentColor;-webkit-mask:var(--sl-arrow-white) center/contain no-repeat;mask:var(--sl-arrow-white) center/contain no-repeat;transform:rotate(-90deg);transition:transform .4s var(--sl-ease)}
.sl-totop:hover i{transform:rotate(-90deg) translateX(3px)}
.sl-totop:focus-visible{outline:2px solid var(--sl-leaf);outline-offset:4px}

/* ---------- 13. form micro-interactions ---------- */
.sl-motion-ready .sl-field input,.sl-motion-ready .sl-field select,.sl-motion-ready .sl-field textarea{transition:border-color .3s,box-shadow .3s,background .3s}
.sl-motion-ready .sl-field:focus-within label{color:var(--sl-leaf-deep);transition:color .3s}
.sl-motion-ready .sl-field input:focus,.sl-motion-ready .sl-field select:focus,.sl-motion-ready .sl-field textarea:focus{box-shadow:0 0 0 4px rgba(67,194,120,.18)}
.sl-unit{transition:background .35s,color .35s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.sl-unit:active{transform:scale(.94)}
.sl-submit{transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .3s}
.sl-submit.is-sending{pointer-events:none;opacity:.85}
.sl-done-check{width:72px;height:72px;margin-bottom:20px;display:block}
.sl-done-check circle,.sl-done-check path{fill:none;stroke:var(--sl-leaf-deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sl-done-check circle{stroke-dasharray:214;stroke-dashoffset:214;animation:sl-draw .8s cubic-bezier(.6,0,.2,1) forwards}
.sl-done-check path{stroke-dasharray:50;stroke-dashoffset:50;animation:sl-draw .5s cubic-bezier(.6,0,.2,1) .7s forwards}
.sl-form-done:not([hidden])>*:not(svg){animation:sl-fade .8s var(--sl-ease) both .5s}
.sl-shake{animation:sl-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes sl-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- 14. coverage search: result rows pop in ---------- */
.sl-cov-results .sl-chip-l{animation:sl-chip .45s cubic-bezier(.3,1.4,.5,1) both}
.sl-cov-results .sl-chip-l:nth-child(2){animation-delay:.04s}.sl-cov-results .sl-chip-l:nth-child(3){animation-delay:.08s}.sl-cov-results .sl-chip-l:nth-child(4){animation-delay:.12s}.sl-cov-results .sl-chip-l:nth-child(5){animation-delay:.16s}.sl-cov-results .sl-chip-l:nth-child(n+6){animation-delay:.2s}

/* ---------- 15. touch screens ---------- */
.sl-touch .sl-icard.is-focus>.sl-glow,.sl-touch .sl-rcard.is-focus>.sl-glow{opacity:1}
.sl-touch .sl-glow{--gx:50%;--gy:35%}
.sl-touch :is(.sl-svc,.sl-ptile,.sl-rcard,.sl-icard){transition-duration:.6s}
.sl-touch :is(.sl-icard-img,.sl-zig-img,.sl-who-img,.sl-who-img2,.sl-ab-main,.sl-why-img) img{will-change:transform;transition:transform .25s linear}
.sl-touch :is(.wp-block-button__link,.sl-submit,.sl-tab,.sl-unit,.sl-icon-btn){position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.sl-touch :is(.wp-block-button__link,.sl-submit,.sl-tab,.sl-unit,.sl-icon-btn,.sl-li-btn,.sl-svc,.sl-icard,.sl-rcard,summary):active{transform:scale(.97);transition:transform .12s}
.sl-touch .sl-rcard.is-focus:active{transform:translateY(-6px) scale(.97)}
.sl-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);opacity:1;pointer-events:none;animation:sl-ripple .65s cubic-bezier(.2,.7,.2,1) forwards;z-index:0}
@keyframes sl-ripple{to{transform:scale(1);opacity:0}}
.sl-seg-prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--sl-leaf);transform:scaleX(0);transform-origin:left;z-index:4;pointer-events:none}
.sl-seg-prog.is-run{animation:sl-fill 3.4s linear forwards}
.sl-touch .sl-seg-media{touch-action:pan-y}

@media (max-width:720px){
  .sl-totop{right:16px;bottom:16px;width:48px;height:48px}
  .sl-scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  html.sl-motion::before,html.sl-motion::after,.sl-cursor,.sl-cursor-dot,.sl-scroll-cue{display:none!important}
  .sl-mag{translate:none!important}
}