/* The rail's four keyframes. They live here, not in a shared sheet, because
   home.css states the rule: keyframes belong to the widget that animates and
   move with it. They were left behind in the plugin's zp-widgets.css during the
   port, and an `animation` naming keyframes no sheet on the page defines is
   silently inert — the cart, the sheen and the dots all simply stopped.

   `zipBlip` hardcodes the six stop positions (README, *Zipify widgets*): the
   grid re-flows on --zp-stops but these do not, so the cart lands on the dots
   at exactly six stops and nowhere else. */
@keyframes zipBlip {
  0% { left:8.333%; opacity:0; } 3%,10% { left:8.333%; opacity:1; } 16.67%,26.67% { left:25%; } 33.33%,43.33% { left:41.667%; }
  50%,60% { left:58.333%; } 66.67%,76.67% { left:75%; } 83.33%,93.33% { left:91.667%; opacity:1; } 97%,100% { left:91.667%; opacity:0; }
}
@keyframes zipCart { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes zipDotCart { 0% { opacity:0; } 3% { opacity:1; } 10% { opacity:1; } 16% { opacity:0; } 100% { opacity:0; } }
@keyframes zipDotSwap { 0% { opacity:.45; } 1% { opacity:0; } 13% { opacity:0; } 16% { opacity:.45; } 100% { opacity:.45; } }
@keyframes zipDotHide { 0%,13% { opacity:0; } 16%,96% { opacity:.45; } 98.5%,100% { opacity:0; } }

.zp-funnel-rail { position:relative; color:#f9f9f9; }
.zp-funnel-rail__track { position:relative; }
.zp-funnel-rail__line { position:absolute; left:0; right:0; top:-1px; height:1px; background:rgba(255,255,255,.14); }
.zp-funnel-rail__sheen { position:absolute; top:-1px; width:24%; height:1px; margin-left:-12%; background:linear-gradient(90deg,transparent,rgba(255,215,72,.85),transparent); animation:zipBlip 9s cubic-bezier(.65,0,.2,1) infinite; }
.zp-funnel-rail__cart { position:absolute; top:0; width:46px; height:46px; margin:-23px 0 0 -23px; display:flex; align-items:center; justify-content:center; z-index:2; color:var(--zip-yellow,#ffd748); filter:drop-shadow(0 0 10px rgba(255,215,72,.7)); animation:zipBlip 9s cubic-bezier(.65,0,.2,1) infinite, zipCart 9s ease-in-out infinite; }
.zp-funnel-rail__grid { display:grid; grid-template-columns:repeat(var(--zp-stops,6),minmax(0,1fr)); }
.zp-funnel-rail__stop { position:relative; padding:22px 14px 34px; text-align:center; }
.zp-funnel-rail__dot { position:absolute; left:50%; top:-5px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--zip-yellow,#ffd748); box-shadow:0 0 14px rgba(255,215,72,.9); animation:zipDotHide 9s ease-in-out infinite; animation-delay:calc(var(--zp-delay,0s) - 9s); }
.zp-funnel-rail__stage { color:var(--zip-yellow,#ffd748); margin-bottom:8px; }
.zp-funnel-rail__app { display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:4px; font-size:14px; font-weight:800; color:#fff; }
.zp-funnel-rail__icon { display:block; flex:0 0 auto; width:14px; height:14px; background:var(--zp-mark) center / contain no-repeat; }
.zp-funnel-rail__stop.is-wide .zp-funnel-rail__icon { display:none; }
.zp-funnel-rail__job { font-size:12px; line-height:1.45; color:rgba(255,255,255,.68); }
.zp-funnel-rail__trusted { text-align:center; color:var(--zip-yellow,#ffd748); margin:24px 0 0; opacity:.9; font-size:12px; font-weight:700; }
@media (max-width:767px) {
  .zp-funnel-rail__grid { grid-template-columns:1fr 1fr; }
  .zp-funnel-rail__cart, .zp-funnel-rail__sheen, .zp-funnel-rail__line { display:none; }
  .zp-funnel-rail__dot { animation-name:zipDotSwap; animation-delay:var(--zp-delay,0s); }
  .zp-funnel-rail__stop::after {
    content:""; position:absolute; left:50%; top:0; width:22px; height:22px;
    transform:translate(-50%,-50%); background:var(--zip-yellow,#ffd748);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
    filter:drop-shadow(0 0 8px rgba(255,215,72,.7)); opacity:0; pointer-events:none;
    animation:zipDotCart 9s cubic-bezier(.65,0,.2,1) infinite; animation-delay:var(--zp-delay,0s);
  }
}
/* Parking the cart on the first stop only takes effect with zipBlip off: the
   keyframes write `left` themselves and outrank the declaration. */
@media (prefers-reduced-motion: reduce) {
  .zp-funnel-rail__sheen { display:none; }
  .zp-funnel-rail__cart { left:8.333%; animation:none; }
  /* .85 is zipStop's own lit value — a still rail should look like a frame of
     the animation, not brighter than any frame of it. */
  .zp-funnel-rail__dot { animation:none; opacity:.85; }
  .zp-funnel-rail__stop::after { display:none; }
}