/* Visual effects. Each block is numbered so it can be removed on its own.
   Delete this file and effects.js (and their two tags in index.html) to remove all of them. */

/* E1 · Scroll reveal: blocks rise in as they enter the screen */
.fx .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.fx .rv.in{opacity:1;transform:none}

/* E2 · Hero rate card: rates arrive one by one, then the winner is picked */
.fx .rates li{opacity:0;transform:translateX(10px);transition:opacity .4s ease,transform .4s ease,background-color .4s ease}
.fx .quote.in .rates li{opacity:1;transform:none}
.fx .quote.in .rates li:nth-child(1){transition-delay:.15s}
.fx .quote.in .rates li:nth-child(2){transition-delay:.3s}
.fx .quote.in .rates li:nth-child(3){transition-delay:.45s}
.fx .quote.in .rates li:nth-child(4){transition-delay:.6s}
.fx .rates li.win{background:transparent}
.fx .quote.picked .rates li.win{background:var(--win-bg,var(--tint));transition-delay:0s}
.fx .rates li.win .svc::before{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.fx .quote.picked .rates li.win .svc::before{transform:scale(1)}
.rates li{transition:background-color .2s ease}
.rates li:not(.win):hover{background:color-mix(in srgb,var(--tint) 55%,transparent)}

/* E3 · Cards lift on hover */
.card,.quote,.call{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);border-color:var(--ink-2);box-shadow:0 14px 30px -18px rgba(16,36,58,.35)}
.stop .mk{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.stop:hover .mk{transform:scale(1.12)}

/* E4 · Underlines that turn orange on hover */
.point,.flow li,.pcol{position:relative}
.point::before,.flow li::after,.pcol::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--buoy);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.flow li::after{top:-3px;height:3px}
.pcol::after{top:-3px;height:3px}
.point:hover::before,.flow li:hover::after,.pcol:hover::after{transform:scaleX(1)}

/* E5 · "Where Paved sits": a dot travels the route from carrier to box */
.route::after{content:"";position:absolute;top:32px;left:12.5%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--buoy);z-index:0;animation:travel 3.6s ease-in-out infinite}
@keyframes travel{0%{left:12.5%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:87.5%;opacity:0}}
@media (max-width:860px){.route::after{display:none}}

/* E6 · Logo: the orange stop nudges on hover */
.brand svg circle:last-child{transition:transform .3s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
.brand:hover svg circle:last-child{transform:scale(1.25)}

/* E7 · Status tags: the "Available now" dot pulses */
.tag.live::before{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--buoy) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

/* E8 · API card: the two halves fill in, with the "why" note last */
.fx .call .cside dl div{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.fx .call.in .cside dl div{opacity:1;transform:none}
.fx .call.in .cside:first-child dl div:nth-child(1){transition-delay:.1s}
.fx .call.in .cside:first-child dl div:nth-child(2){transition-delay:.18s}
.fx .call.in .cside:first-child dl div:nth-child(3){transition-delay:.26s}
.fx .call.in .cside:first-child dl div:nth-child(4){transition-delay:.34s}
.fx .call.in .cside:first-child dl div:nth-child(5){transition-delay:.42s}
.fx .call.in .cside.out dl div:nth-child(1){transition-delay:.75s}
.fx .call.in .cside.out dl div:nth-child(2){transition-delay:.83s}
.fx .call.in .cside.out dl div:nth-child(3){transition-delay:.91s}
.fx .call.in .cside.out dl div:nth-child(4){transition-delay:.99s}
.fx .call .why{opacity:0;transform:translateY(6px);transition:opacity .4s ease 1.2s,transform .4s ease 1.2s}
.fx .call.in .why{opacity:1;transform:none}

/* E10 · "With Paved" answers arrive after the "today" line */
.fx .pcol .now{opacity:0;transform:translateY(10px);transition:opacity .5s ease .35s,transform .5s ease .35s}
.fx .pcol.in .now{opacity:1;transform:none}

/* E11 · "Who it is for": hovered card lifts, grows and lights up; the others step back */
.seat{position:relative;transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease,border-color .3s ease,box-shadow .3s ease,opacity .3s ease}
.seat::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;border-radius:4px 4px 0 0;background:var(--buoy);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.seat h3{transition:color .3s ease}
@media (hover:hover){
  .seats:hover .seat{opacity:.62}
  .seats .seat:hover{opacity:1;transform:scale(1.035);background:var(--card-hi,#FFFFFF);border-color:var(--card-rule,var(--ink-2));box-shadow:0 22px 44px -22px rgba(16,36,58,.45);z-index:1}
  .seat:hover::before{transform:scaleX(1)}
  .seat:hover h3{color:var(--buoy-t)}
}

/* E9 · Nav gains a shadow once you scroll */
nav.top{transition:box-shadow .25s ease}
nav.top.scrolled{box-shadow:0 8px 24px -16px rgba(16,36,58,.35)}

@media (prefers-reduced-motion:reduce){
  .fx .rv,.fx .pcol .now,.fx .rates li,.fx .call .cside dl div,.fx .call .why{opacity:1!important;transform:none!important}
  .fx .rates li.win{background:var(--win-bg,var(--tint))}
  .fx .rates li.win .svc::before{transform:none}
  .route::after{display:none}
}