/* =============================================================
   Lonbox Express — animations layer
   "Lively & noticeable but clean". Works on all devices.
   Fully disabled when the user prefers reduced motion.
   ============================================================= */

/* ---------- SCROLL REVEAL (applied via JS: .reveal -> .in) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
/* directional + zoom variants */
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-left.in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-right.in{opacity:1;transform:none}
.reveal-zoom{opacity:0;transform:scale(.92);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal-zoom.in{opacity:1;transform:none}
/* stagger: children animate one after another */
.stagger > *{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.15s}
.stagger.in > *:nth-child(3){transition-delay:.25s}
.stagger.in > *:nth-child(4){transition-delay:.35s}
.stagger.in > *:nth-child(5){transition-delay:.45s}
.stagger.in > *:nth-child(6){transition-delay:.55s}

/* ---------- HERO ENTRANCE ---------- */
@keyframes heroRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-inner > div > *{animation:heroRise .8s cubic-bezier(.22,.61,.36,1) backwards}
.hero-inner .hero-badge{animation-delay:.05s}
.hero-inner h1{animation-delay:.15s}
.hero-inner p.lead{animation-delay:.3s}
.hero-inner .hero-cta{animation-delay:.45s}
.hero-inner .hero-trust{animation-delay:.6s}
.hero-visual{animation:heroRise 1s cubic-bezier(.22,.61,.36,1) .3s backwards}

/* hero gradient drift */
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-18px) scale(1.06)}}
.blob-1{animation:blobDrift 14s ease-in-out infinite}
.blob-2{animation:blobDrift 18s ease-in-out infinite reverse}

/* ---------- LOGO — lively continuous motion ---------- */
/* whole logo floats + tilts continuously */
@keyframes logoFloat{
  0%   {transform:translateY(0) rotate(0deg)}
  25%  {transform:translateY(-4px) rotate(-1.5deg)}
  50%  {transform:translateY(-1px) rotate(0deg)}
  75%  {transform:translateY(-5px) rotate(1.5deg)}
  100% {transform:translateY(0) rotate(0deg)}
}
.logo svg{animation:logoFloat 3.2s ease-in-out infinite;transform-origin:center;overflow:visible}

/* amber cube-top bobs noticeably + brightens */
@keyframes cubeTop{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.05)}
}
.logo svg path[fill="#F3AE25"]{animation:cubeTop 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* light-blue right face gently pulses */
@keyframes faceGlow{0%,100%{opacity:1}50%{opacity:.8}}
.logo svg path[fill="#5AB0C6"]{animation:faceGlow 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* speed lines actively whoosh: slide + fade in sequence, like motion trails */
@keyframes whoosh{
  0%   {opacity:.2;transform:translateX(-3px)}
  40%  {opacity:1;transform:translateX(1px)}
  100% {opacity:.2;transform:translateX(-3px)}
}
.logo svg path[fill="#12648C"]:nth-of-type(1){animation:whoosh 1.4s ease-in-out infinite;transform-box:fill-box}
.logo svg path[fill="#12648C"]:nth-of-type(2){animation:whoosh 1.4s ease-in-out infinite .18s;transform-box:fill-box}
.logo svg path[fill="#12648C"]:nth-of-type(3){animation:whoosh 1.4s ease-in-out infinite .36s;transform-box:fill-box}

/* hover: extra kick */
.logo{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.logo:hover{transform:translateX(4px) scale(1.04)}
/* hover: whole logo nudges forward */
.logo{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.logo:hover{transform:translateX(3px) scale(1.02)}

/* ---------- SERVICE ICONS — living on hover ---------- */
.svc .ic{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .3s}
.svc:hover .ic{transform:translateY(-4px) rotate(-4deg)}
/* plane drifts, ship bobs, home pulses when their card is hovered */
@keyframes planeFly{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(4px,-4px) rotate(6deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes shipBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes homePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.svc:hover .ic svg{animation:none}
.svc:nth-child(1):hover .ic svg{animation:planeFly 1.2s ease-in-out infinite}
.svc:nth-child(2):hover .ic svg{animation:shipBob 1.6s ease-in-out infinite}
.svc:nth-child(3):hover .ic svg{animation:homePulse 1.2s ease-in-out infinite}

/* idle floating icons in hero (already have floaty) + slight rotate on hover */
.hero-float{transition:transform .3s}
.hero-float:hover{transform:scale(1.06)}

/* ---------- CARD HOVER LIFT + SHEEN ---------- */
.svc,.promo,.tst,.step,.qa{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .3s}
.svc:hover,.tst:hover{transform:translateY(-6px)}
.promo:hover{transform:translateY(-6px) scale(1.01)}
/* step number pops */
.step .n{transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .3s}
.step:hover .n{transform:scale(1.15) translateY(-2px)}

/* ---------- BUTTONS — richer feedback ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s}
.btn:hover::after{opacity:1}
.btn-amber:hover,.btn-blue:hover,.btn-wa:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.99)}

/* ---------- NAV LINKS — underline grow ---------- */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--amber);border-radius:2px;transition:right .3s cubic-bezier(.22,.61,.36,1)}
.nav-links a:hover::after{right:0}
.nav-links a.active::after{right:0} /* keep active underline full */

/* ---------- TRACKING TIMELINE draw-in ---------- */
.tr-step{opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.track-result.show .tr-step{opacity:1;transform:none}
.track-result.show .tr-step:nth-child(1){transition-delay:.05s}
.track-result.show .tr-step:nth-child(2){transition-delay:.18s}
.track-result.show .tr-step:nth-child(3){transition-delay:.31s}
.track-result.show .tr-step:nth-child(4){transition-delay:.44s}
.track-result.show .tr-step:nth-child(5){transition-delay:.57s}
/* active step dot gently pulses */
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px rgba(18,100,140,.18)}50%{box-shadow:0 0 0 8px rgba(18,100,140,.06)}}
.tr-step.active .dot{animation:dotPulse 2s ease-in-out infinite}

/* ---------- COTIZADOR step transitions (slide) ---------- */
.fstep.on{animation:stepSlide .45s cubic-bezier(.22,.61,.36,1)}
@keyframes stepSlide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.choice{transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s,background .2s}
.choice:hover{transform:translateY(-3px)}
.choice.sel{animation:choicePop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes choicePop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.box-opt{transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s}
.box-opt:hover{transform:translateY(-4px)}

/* prohibited warning shakes in */
.prohibited.show{animation:warnShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes warnShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* success check pop already exists; add a ring burst */
.success .check{position:relative}
.success .check::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--green);opacity:0;animation:ringBurst .8s ease-out .2s}
@keyframes ringBurst{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* ---------- FAB pulse to draw attention ---------- */
@keyframes fabPulse{0%{box-shadow:0 8px 24px -6px rgba(0,0,0,.35),0 0 0 0 rgba(90,199,110,.5)}70%{box-shadow:0 8px 24px -6px rgba(0,0,0,.35),0 0 0 14px rgba(90,199,110,0)}100%{box-shadow:0 8px 24px -6px rgba(0,0,0,.35),0 0 0 0 rgba(90,199,110,0)}}
.fab-wa{animation:fabPulse 3s ease-out infinite}
.fab{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.fab:hover{transform:scale(1.12) rotate(4deg)}

/* chat bubbles ease in */
.cb-msg{animation:bubbleIn .35s cubic-bezier(.22,.61,.36,1)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* count-up stat emphasis on reveal */
.hero-trust .t b{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.hero-trust .t:hover b{transform:scale(1.08)}

/* social icons wobble on hover */
.social-links a{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.social-links a:hover{transform:translateY(-5px) rotate(-6deg)}
.feed-item img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.feed-item:hover img{transform:scale(1.08)}

/* destinations chips */
.dest-list .d{transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,background .2s}
.dest-list .d:hover{transform:translateY(-3px) scale(1.03)}

/* ---------- CTA band subtle shine ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-18deg);animation:shine 6s ease-in-out infinite}
@keyframes shine{0%{left:-60%}35%,100%{left:130%}}


/* =============================================================
   CONSTANT MOTION LAYER — always-on movement across the site
   (added for "more movement, constant everywhere")
   ============================================================= */

/* --- service card icons: gentle perpetual float (not just hover) --- */
@keyframes idleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.svc .ic{animation:idleFloat 3.4s ease-in-out infinite}
.svc:nth-child(2) .ic{animation-delay:.5s}
.svc:nth-child(3) .ic{animation-delay:1s}

/* the SVG inside each service icon keeps a constant subtle motion by type */
@keyframes planeIdle{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(2px,-2px) rotate(4deg)}}
@keyframes shipIdle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-2px) rotate(2deg)}}
@keyframes homeIdle{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.svc:nth-child(1) .ic svg{animation:planeIdle 2.6s ease-in-out infinite}
.svc:nth-child(2) .ic svg{animation:shipIdle 3s ease-in-out infinite}
.svc:nth-child(3) .ic svg{animation:homeIdle 2.4s ease-in-out infinite}

/* --- section eyebrow icons + small svgs pulse --- */
@keyframes iconThrob{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.dest-visual h3 svg,.tb-label .ic svg,.qp .c svg{animation:iconThrob 2.2s ease-in-out infinite}

/* --- how-it-works step numbers: constant gentle bounce, staggered --- */
@keyframes numBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.step .n{animation:numBounce 2.8s ease-in-out infinite}
.step:nth-child(2) .n{animation-delay:.35s}
.step:nth-child(3) .n{animation-delay:.7s}
.step:nth-child(4) .n{animation-delay:1.05s}

/* --- cards very subtly sway so the page always feels alive --- */
@keyframes cardSway{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.tst{animation:cardSway 4.5s ease-in-out infinite}
.tst:nth-child(2){animation-delay:.6s}
.tst:nth-child(3){animation-delay:1.2s}
.promo{animation:cardSway 5s ease-in-out infinite}
.promo:nth-child(2){animation-delay:.5s}
.promo:nth-child(3){animation-delay:1s}
/* (hover still lifts them further — hover transforms override) */

/* --- box picker options in cotizador: soft idle float --- */
.box-opt{animation:idleFloat 3.6s ease-in-out infinite}
.box-opt:nth-child(2){animation-delay:.4s}
.box-opt:nth-child(3){animation-delay:.8s}

/* --- hero floats already move; make them bolder --- */
@keyframes floatBig{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(2deg)}}
.hf-track{animation:floatBig 5s ease-in-out infinite !important}
.hf-deliver{animation:floatBig 4.2s ease-in-out infinite .6s !important}

/* --- hero badge dot: stronger pulse --- */
@keyframes dotBeat{0%,100%{box-shadow:0 0 0 3px rgba(90,199,110,.25);transform:scale(1)}50%{box-shadow:0 0 0 6px rgba(90,199,110,.08);transform:scale(1.2)}}
.hero-badge .dot{animation:dotBeat 1.8s ease-in-out infinite}

/* --- destination chips: continuous tiny drift, staggered wave --- */
@keyframes chipDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.dest-list .d{animation:chipDrift 3s ease-in-out infinite}
.dest-list .d:nth-child(2n){animation-delay:.3s}
.dest-list .d:nth-child(3n){animation-delay:.6s}
.dest-list .d:nth-child(4n){animation-delay:.9s}

/* --- social icons: constant gentle wobble --- */
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.social-links a{animation:wobble 3s ease-in-out infinite}
.social-links a:nth-child(2){animation-delay:.4s}
.social-links a:nth-child(3){animation-delay:.8s}
.social-links a:nth-child(4){animation-delay:1.2s}

/* --- bot FAB: constant gentle rock (WA already pulses) --- */
@keyframes rock{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.fab-bot{animation:rock 2.4s ease-in-out infinite}

/* --- arrows in buttons nudge continuously --- */
@keyframes arrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.btn-amber svg,.btn-blue svg{animation:arrowNudge 1.6s ease-in-out infinite}

/* --- section headings' eyebrow text shimmer --- */
@keyframes eyebrowShimmer{0%,100%{opacity:1}50%{opacity:.6}}
.eyebrow{animation:eyebrowShimmer 3s ease-in-out infinite}

/* --- CTA band: stronger, more frequent shine --- */
.cta-band::before{animation:shine 4s ease-in-out infinite !important}

/* --- stronger background blob drift --- */
.blob-1{animation:blobDrift 9s ease-in-out infinite !important}
.blob-2{animation:blobDrift 11s ease-in-out infinite reverse !important}

/* reduce-motion block already added earlier catches ALL of the above */

/* ---------- RESPECT REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-left,.reveal-right,.reveal-zoom,.stagger>*{opacity:1 !important;transform:none !important}
}