/* Zinifly home page (home-3 "deep navy"): motion layer on top of landing-z3.css,
   scoped under main.z3m. Loaded by home-3.php only (and home.php once home-3 is
   copied over it). Inspired by easypost.com's self-animating icons.

   Rules that keep this cheap (see the homepage scroll-performance notes):
     - transform / opacity only (plus fill-opacity and stroke-dashoffset inside tiny
       inline SVGs). No backdrop-filter, blur, parallax or permanent will-change.
     - Looping animations pause while their block is off screen
       ([data-z3m-live] without .is-live, toggled by the page script).
     - The page's own .z3-reveal system is untouched; .z3m-stagger only hides
       children once main has .z3-js (set by z3Open()).
     - prefers-reduced-motion turns everything off. */

/* ==== Animated icons (z2AnimIcon in z2-helpers.php) =================== */
.z2a *{transform-box:fill-box}
.z2a-swing{transform-origin:50% 0;animation:z2a-swing 3s ease-in-out infinite}
@keyframes z2a-swing{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(14deg)}70%{transform:rotate(-11deg)}78%{transform:rotate(7deg)}86%{transform:rotate(-4deg)}93%{transform:rotate(1deg)}}

.z2a-drop{animation:z2a-drop 3s cubic-bezier(.45,0,.3,1) infinite}
@keyframes z2a-drop{0%{transform:translateY(-6px);opacity:0}18%{opacity:1}45%,62%{transform:translateY(4.5px);opacity:1}78%,100%{transform:translateY(4.5px);opacity:0}}

.z2a-coin{animation:z2a-coin 3s ease-in-out infinite}
@keyframes z2a-coin{0%{transform:translateY(-5px);opacity:0}20%,50%{transform:translateY(0);opacity:1}72%,100%{transform:translateY(5px);opacity:0}}

.z2a-tile{fill:currentColor;fill-opacity:0;animation:z2a-tile 4s ease-in-out infinite}
.z2a-tile:nth-of-type(2){animation-delay:.5s}
.z2a-tile:nth-of-type(3){animation-delay:1s}
.z2a-tile:nth-of-type(4){animation-delay:1.5s}
@keyframes z2a-tile{0%,100%{fill-opacity:0}15%,45%{fill-opacity:.35}}

.z2a-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:z2a-draw 3.2s ease-in-out infinite}
@keyframes z2a-draw{0%,12%{stroke-dashoffset:1;opacity:1}42%,80%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}

.z2a-dot{fill:currentColor;stroke:none;animation:z2a-dot 1.4s ease-in-out infinite}
.z2a-dot:nth-of-type(2){animation-delay:.16s}
.z2a-dot:nth-of-type(3){animation-delay:.32s}
@keyframes z2a-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-2px);opacity:1}}

.z2a-type{transform-origin:0 50%;animation:z2a-type 3.4s ease-in-out infinite}
.z2a-type:nth-of-type(3){animation-delay:.35s}
@keyframes z2a-type{0%{transform:scaleX(0)}35%,80%{transform:scaleX(1)}92%,100%{transform:scaleX(1);opacity:0}}

.z2a-join{animation:z2a-join 3.2s ease-in-out infinite}
@keyframes z2a-join{0%,100%{transform:translateX(0)}40%,60%{transform:translateX(1.8px)}}

.z2a-write{animation:z2a-write 3.2s ease-in-out infinite}
@keyframes z2a-write{0%,12%{transform:translate(0,0)}25%{transform:translate(1.2px,-1px)}32%{transform:translate(2.4px,0)}42%,80%{transform:translate(3.4px,-.6px)}100%{transform:translate(0,0)}}

.z2a-scan{animation:z2a-scan 2.4s ease-in-out infinite}
@keyframes z2a-scan{0%,100%{transform:translateY(-3px);opacity:.35}50%{transform:translateY(3px);opacity:1}}

.z2a-bar{transform-origin:50% 100%;animation:z2a-bar 3s ease-in-out infinite}
.z2a-bar:nth-of-type(3){animation-delay:.2s}
.z2a-bar:nth-of-type(4){animation-delay:.4s}
@keyframes z2a-bar{0%,100%{transform:scaleY(.4)}40%,70%{transform:scaleY(1)}}

.z2a-pulse{transform-origin:50% 50%;animation:z2a-pulse 2.6s ease-in-out infinite}
@keyframes z2a-pulse{0%,100%{transform:scale(1)}20%{transform:scale(1.14) rotate(-4deg)}35%{transform:scale(.96)}50%{transform:scale(1)}}

.z2a-hop{animation:z2a-hop 2.2s cubic-bezier(.3,0,.3,1) infinite}
@keyframes z2a-hop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-2.5px)}}

/* Pause loops while their block is off screen. */
.z3-js [data-z3m-live]:not(.is-live) .z2a *,
.z3-js [data-z3m-live]:not(.is-live) .z3m-loop,
.z3-js [data-z3m-live]:not(.is-live) .z3m-loop::after,
.z3-js [data-z3m-live]:not(.is-live) .z3-connector path{animation-play-state:paused}

/* ==== Staggered children ============================================== */
/* Keyframes on the individual `translate` property, so they never fight the
   `transform` hover lifts that .z3-card / .z3m-prob already use. */
.z3-js .z3m-stagger:not(.is-in) > *{opacity:0}
.z3-js .z3m-stagger.is-in > *{animation:z3m-in .7s var(--z3-ease) both;animation-delay:var(--d,0s)}
.z3-js .z3m-stagger.is-in > :nth-child(2){--d:.08s}
.z3-js .z3m-stagger.is-in > :nth-child(3){--d:.16s}
.z3-js .z3m-stagger.is-in > :nth-child(4){--d:.24s}
.z3-js .z3m-stagger.is-in > :nth-child(5){--d:.32s}
.z3-js .z3m-stagger.is-in > :nth-child(6){--d:.4s}
@keyframes z3m-in{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

/* Arrow nudge on buttons (links already widen their gap on hover) */
.z3m .z3-btn svg{transition:transform .2s ease}
.z3m .z3-btn:hover svg:last-child{transform:translateX(3px)}

/* Icon tile shared by the animated icons */
.z3m-tile{width:44px;height:44px;border-radius:12px;background:var(--z3-blue-tint);color:var(--z3-blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,color .2s,transform .2s var(--z3-ease)}

/* ==== Hero ============================================================ */
/* "busywork." gets a light-blue underline that sweeps in once */
.z3m-mark{position:relative;display:inline-block}
.z3m-mark::after{content:"";position:absolute;left:.02em;right:.02em;bottom:.02em;height:.09em;border-radius:99px;background:var(--z3-blue-light);transform-origin:0 50%;transform:scaleX(0);animation:z3m-sweep .9s .6s var(--z3-ease) forwards}
@keyframes z3m-sweep{to{transform:scaleX(1)}}

.z3m .z3-hero-mock .z3-mock-row{animation:z3m-slide .5s var(--z3-ease) both}
.z3m .z3-hero-mock .z3-mock-row:nth-child(1){animation-delay:.75s}
.z3m .z3-hero-mock .z3-mock-row:nth-child(2){animation-delay:.9s}
.z3m .z3-hero-mock .z3-mock-row:nth-child(3){animation-delay:1.05s}
@keyframes z3m-slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.z3m .z3-mock-hi .z3-dot{position:relative}
.z3m .z3-mock-hi .z3-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#F59E0B;animation:z3m-ping 2s ease-out infinite}
@keyframes z3m-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.8);opacity:0}}

.z3m .z3-mock-float{animation:z3m-pop .6s 1.3s cubic-bezier(.2,.9,.3,1.2) both,z3m-float 5s 1.9s ease-in-out infinite alternate}

/* floating notification chips (sample data, decorative) */
/* the mockup is the middle strip item; lift it so its chips paint over the right photo */
.z3m .z3-hero-mock{z-index:3}
.z3m-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 14px 10px 10px;box-shadow:var(--z3-shadow-lg);white-space:nowrap;color:var(--z3-text)}
.z3m-chip b{display:block;font-size:12.5px;font-weight:700;color:var(--z3-navy);line-height:1.25}
.z3m-chip small{display:block;font-size:11px;color:var(--z3-muted);font-weight:500}
.z3m-chip .z3m-tile{width:30px;height:30px;border-radius:8px}
.z3m-chip--green .z3m-tile{background:var(--z3-green-tint);color:var(--z3-green)}
.z3m-chip--tl{top:-26px;left:-34px;animation:z3m-pop .6s .9s cubic-bezier(.2,.9,.3,1.2) both,z3m-float 4.5s 1.5s ease-in-out infinite alternate}
.z3m-chip--r{top:47%;right:-44px;animation:z3m-pop .6s 1.1s cubic-bezier(.2,.9,.3,1.2) both,z3m-float 5.5s 1.7s ease-in-out infinite alternate-reverse}
@keyframes z3m-pop{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes z3m-float{from{transform:translateY(0)}to{transform:translateY(-8px)}}

/* audience strip icons hop on hover */
.z3m .z3-serve-links a:hover svg{animation:z2a-hop .6s ease-in-out}

/* ==== Problems we solve ================================================ */
.z3m-probs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.z3m-prob{background:#fff;border-radius:var(--z3-r-lg);box-shadow:var(--z3-shadow-sm);padding:28px;display:flex;flex-direction:column;transition:transform .2s var(--z3-ease),box-shadow .2s}
.z3m-prob:hover{transform:translateY(-3px);box-shadow:var(--z3-shadow)}
.z3m-prob:hover .z3m-tile{background:var(--z3-blue);color:#fff}
.z3m-prob-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.z3m-prob-topic{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--z3-faint)}
.z3m-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.z3m-label i{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.z3m-label--pain{color:#B42318}
.z3m-label--pain i{background:#FEF3F2;color:#B42318}
.z3m-label--fix{color:var(--z3-green)}
.z3m-label--fix i{background:var(--z3-green-tint);color:var(--z3-green)}
.z3m-pain{font-size:17px;line-height:1.4;font-weight:700;color:var(--z3-navy);letter-spacing:-0.012em}
.z3m-fix{font-size:14.5px;line-height:1.65;color:var(--z3-muted);font-weight:500}
.z3m-turn{display:flex;align-items:center;gap:10px;margin:18px 0 16px;color:var(--z3-blue)}
.z3m-turn::before,.z3m-turn::after{content:"";flex:1;border-top:2px dashed var(--z3-line)}
.z3m-turn span{width:28px;height:28px;border-radius:50%;background:var(--z3-blue-tint);display:flex;align-items:center;justify-content:center}
.z3m-turn svg{rotate:90deg;animation:z3m-nudge-y 2s ease-in-out infinite}
@keyframes z3m-nudge-y{0%,100%{transform:translateY(-1.5px)}50%{transform:translateY(2px)}}
.z3m-probs-foot{margin-top:32px;display:flex;align-items:center;justify-content:center;gap:12px 22px;flex-wrap:wrap;text-align:center}
.z3m-probs-foot p{font-size:16px;color:var(--z3-navy);font-weight:600}

/* ==== Feature marquee ================================================== */
/* overflow:clip, not hidden: a hidden box is still programmatically scrollable, so
   focusing or clicking a pill scrolled the whole strip sideways (focus scroll-into-view). */
.z3m-marquee{padding:0 0 8px;overflow:hidden;overflow:clip}
.z3m-marquee .z3-tag{display:block;text-align:center;margin-bottom:18px}
.z3m-marquee-mask{overflow:clip;overflow-clip-margin:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.z3m-marquee-track{display:flex;width:max-content;padding:6px 0 14px;animation:z3m-marquee 50s linear infinite}
.z3m-marquee-mask:hover .z3m-marquee-track,.z3m-marquee-mask:focus-within .z3m-marquee-track{animation-play-state:paused}
.z3m-marquee-list{display:flex;gap:12px;padding-right:12px}
.z3m-marquee-list a{display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 8px;border-radius:999px;background:#fff;box-shadow:var(--z3-shadow-sm);font-size:14px;font-weight:600;color:var(--z3-navy);white-space:nowrap;transition:transform .18s var(--z3-ease),box-shadow .18s,color .15s}
.z3m-marquee-list a:hover{transform:translateY(-2px);box-shadow:var(--z3-shadow);color:var(--z3-blue)}
.z3m-marquee-list a:hover .z3m-tile{background:var(--z3-blue);color:#fff}
.z3m-marquee-list a:focus-visible{outline:2px solid var(--z3-blue);outline-offset:2px;border-radius:999px}
.z3m-marquee-list .z3m-tile{width:36px;height:36px;border-radius:50%}
@keyframes z3m-marquee{to{transform:translateX(-50%)}}

/* ==== Bento tweaks ====================================================== */
.z3m .z3-card .z3m-tile{margin-bottom:20px}
.z3m .z3-panel .z3-card .z3m-tile{background:#fff;box-shadow:var(--z3-shadow-sm)}
.z3m .z3-card:hover .z3m-tile{background:var(--z3-blue);color:#fff}
.z3m .z3-booth{position:relative;overflow:hidden}
.z3m .z3-booth--open::after{content:"";position:absolute;inset:0;background:var(--z3-blue-tint);opacity:0;animation:z3m-open 2.6s ease-in-out infinite}
.z3m .z3-booth--open:nth-child(7)::after{animation-delay:.6s}
.z3m .z3-booth--open:nth-child(10)::after{animation-delay:1.2s}
@keyframes z3m-open{0%,100%{opacity:0}50%{opacity:.9}}
.z3m .z3-mini-row{transition:transform .2s var(--z3-ease)}
.z3m .z3-card--a:hover .z3-mini-row{transform:translateX(3px)}
.z3m .z3-card--a:hover .z3-mini-row:nth-child(2){transition-delay:.05s}
.z3m .z3-card--a:hover .z3-mini-row:nth-child(3){transition-delay:.1s}

/* payments flow: a dot travels from the vendor to the organizer's account */
.z3m-flow{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:11px;font-weight:700;color:var(--z3-navy)}
.z3m-flow-node{border-radius:7px;padding:7px 9px;background:#fff;box-shadow:var(--z3-shadow-sm);white-space:nowrap}
.z3m-flow-node--you{background:var(--z3-blue);color:#fff}
.z3m-flow-line{position:relative;flex:1;min-width:28px;height:10px;overflow:hidden}
.z3m-flow-line::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--z3-blue-line)}
.z3m-flow-line i{position:absolute;inset:0;animation:z3m-travel 2.4s cubic-bezier(.5,0,.5,1) infinite}
.z3m-flow-line i::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--z3-blue);box-shadow:0 0 0 3px rgba(var(--z3-blue-rgb),.18)}
@keyframes z3m-travel{0%{transform:translateX(-100%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(0);opacity:0}}

/* ==== Dashed connectors: the dashes flow downward ======================== */
.z3m .z3-connector path{animation:z3m-dash 1.6s linear infinite}
@keyframes z3m-dash{to{stroke-dashoffset:-30}}

/* ==== Steps ============================================================= */
/* a dot runs along the existing dashed line behind the three step cards */
.z3m-steps-run{position:absolute;top:52px;left:12%;right:12%;height:10px;z-index:0;overflow:hidden;pointer-events:none}
.z3m-steps-run i{position:absolute;inset:0;animation:z3m-travel 4s cubic-bezier(.5,0,.5,1) infinite}
.z3m-steps-run i::after{content:"";position:absolute;right:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--z3-blue);box-shadow:0 0 0 4px rgba(var(--z3-blue-rgb),.18)}
.z3m .z3-step .z3m-step-ico{position:absolute;top:30px;right:28px;width:40px;height:40px}
.z3m .z3-step:hover .z3m-step-ico{background:var(--z3-blue);color:#fff;transform:translateY(-2px)}

/* ==== Final CTA: floating icon tiles ===================================== */
.z3m-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
.z3m .z3-cta > .z3-wrap{position:relative;z-index:1}
.z3m-bubble{position:absolute;width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;animation:z3m-float 5s ease-in-out infinite alternate}
.z3m-bubble:nth-child(1){left:7%;top:20%}
.z3m-bubble:nth-child(2){left:13%;top:58%;animation-delay:-1.5s;width:50px;height:50px}
.z3m-bubble:nth-child(3){left:4%;top:76%;animation-delay:-3s;width:42px;height:42px;opacity:.7}
.z3m-bubble:nth-child(4){right:8%;top:18%;animation-delay:-2s}
.z3m-bubble:nth-child(5){right:14%;top:56%;animation-delay:-.8s;width:50px;height:50px}
.z3m-bubble:nth-child(6){right:5%;top:74%;animation-delay:-3.6s;width:42px;height:42px;opacity:.7}
.z3m-bubble .z2a{color:var(--z3-blue-light)}

/* ==== Responsive ========================================================= */
@media (max-width:1200px){
  .z3m-chip--tl{left:-12px}
  .z3m-chip--r{right:-14px}
}
@media (max-width:1024px){
  .z3m-probs{grid-template-columns:1fr 1fr}
  .z3m-bubbles{display:none}
}
@media (max-width:900px){
  .z3m-chip--tl{top:-20px;left:10px}
  .z3m-chip--r{right:10px;top:auto;bottom:36%}
  .z3m-steps-run{display:none}
}
@media (max-width:600px){
  .z3m-probs{grid-template-columns:1fr}
  .z3m-prob{padding:22px}
  .z3m-chip--r{display:none}
  .z3m-flow{font-size:10.5px}
}

/* ==== Reduced motion: everything still, everything visible ============== */
@media (prefers-reduced-motion:reduce){
  .z3m *,.z3m *::before,.z3m *::after{animation:none!important;transition:none!important}
  .z3m-mark::after{transform:scaleX(1)}
  .z3-js .z3m-stagger:not(.is-in) > *{opacity:1}
  .z2a-draw{stroke-dashoffset:0}
  .z3m-steps-run{display:none}
  .z3m-marquee-track{width:auto;flex-wrap:wrap;justify-content:center}
  .z3m-marquee-mask{-webkit-mask-image:none;mask-image:none}
  .z3m-marquee-list{flex-wrap:wrap;justify-content:center;padding:0 16px;row-gap:12px}
  .z3m-marquee-list[aria-hidden="true"]{display:none}
}