/* Home page motion layer. Loaded only on the home page. All movement is switched off for people who ask for reduced motion. */

/* ---------- scroll progress + header ---------- */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--red),var(--pink));transform-origin:0 50%;transform:scaleX(0);z-index:40;pointer-events:none}
.header{transition:box-shadow .3s}
.header.scrolled{box-shadow:0 10px 30px rgba(21,18,51,.08)}

/* ---------- hero ---------- */
.hero{isolation:isolate}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:0;pointer-events:none;will-change:transform}
.blob.b1{width:460px;height:460px;left:-140px;top:-120px;background:#4a3fb0;animation:drift1 18s ease-in-out infinite alternate}
.blob.b2{width:380px;height:380px;right:-100px;top:60px;background:#7a2350;opacity:.45;animation:drift2 22s ease-in-out infinite alternate}
.blob.b3{width:300px;height:300px;left:40%;bottom:-160px;background:#2c5aa8;opacity:.35;animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(120px,70px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-110px,90px) scale(.9)}}
.hero .wrap{position:relative;z-index:1}

.hero .kick,.hero .sub,.hero .ctas{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .kick{animation-delay:.05s}
.hero .sub{animation-delay:.55s}
.hero .ctas{animation-delay:.7s}
.hero h1 .ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hero h1 .ln>*{display:inline-block;animation:lineup 1s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .ln:nth-of-type(1)>*{animation-delay:.15s}
.hero h1 .ln:nth-of-type(2)>*{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lineup{from{transform:translateY(105%)}to{transform:none}}
.hero h1 em{background:linear-gradient(90deg,var(--pink) 0%,#ffd1d4 25%,var(--pink) 50%,var(--pink) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lineup 1s cubic-bezier(.2,.8,.2,1) .32s both,shine 5s ease-in-out 1.6s infinite}
@keyframes shine{0%{background-position:100% 0}60%,100%{background-position:-120% 0}}

/* buttons: light sweep */
.btn-red{position:relative;overflow:hidden;isolation:isolate}
.btn-red:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s;z-index:-1}
.btn-red:hover:after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.hero .ctas .btn-red{box-shadow:0 10px 30px rgba(213,34,41,.35)}

/* ---------- map ---------- */
.map{transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.map .land{animation:fade 1.4s ease .1s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.arcs{animation:fade 1s ease 2.4s backwards}
.arc{transition:stroke .3s,stroke-width .3s,opacity .3s}
.arc-draw{fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.6,.05,.3,1) both,fade-out 1s ease both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade-out{to{opacity:0}}
.comet{fill:#fff;filter:drop-shadow(0 0 4px var(--pink)) drop-shadow(0 0 8px var(--red))}
.dest{animation:fade 1s ease 1.2s both}
.node{cursor:pointer}
.node .hit{fill:transparent}
.node .pin{transform-box:fill-box;transform-origin:center;transition:transform .25s,fill .25s;animation:pop .6s cubic-bezier(.3,1.6,.5,1) var(--d,.3s) backwards}
.node .pulse{animation-delay:var(--d,.3s)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.plabel{transition:opacity .3s,fill .3s;animation:fade .8s ease 1.4s backwards}
.map.dim .plabel:not(.hl),.map.dim .arc:not(.hl),.map.dim .node:not(.hl){opacity:.3}
.node.hl .pin{transform:scale(1.6);fill:#fff;stroke:var(--red)}
.node.hl .pulse{fill:#fff}
.plabel.hl{fill:var(--pink)}
.arc.hl{stroke:var(--pink);stroke-width:2.4;stroke-dasharray:6 4;animation:march 1s linear infinite}
@keyframes march{to{stroke-dashoffset:-20}}

/* ---------- picker ---------- */
.picker .card{animation:rise 1s cubic-bezier(.2,.7,.2,1) .85s both}
.picker .opt{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards;position:relative;overflow:hidden}
.picker .opt:nth-child(1){animation-delay:1s}.picker .opt:nth-child(2){animation-delay:1.07s}.picker .opt:nth-child(3){animation-delay:1.14s}
.picker .opt:nth-child(4){animation-delay:1.21s}.picker .opt:nth-child(5){animation-delay:1.28s}.picker .opt:nth-child(6){animation-delay:1.35s}
.picker .opt .flag,.picker .opt .globe{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.picker .opt:hover,.picker .opt:focus-visible{transform:translateY(-3px);background:#fff7f7}
.picker .opt:hover .flag,.picker .opt:hover .globe,.picker .opt:focus-visible .flag{transform:scale(1.18) rotate(-8deg)}

/* ---------- stats ---------- */
.stats b{font-variant-numeric:tabular-nums}
.stats .row>div{position:relative}
.stats .row>div:after{content:"";display:block;width:0;height:3px;border-radius:3px;background:var(--red);margin:10px auto 0;transition:width .9s cubic-bezier(.2,.7,.2,1) .3s}
.stats.in .row>div:after{width:36px}

/* ---------- flag ribbon ---------- */
.ribbon{overflow:hidden;border-bottom:1px solid var(--line);padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon .track{display:flex;width:max-content;animation:scroll-x 45s linear infinite}
.ribbon:hover .track{animation-play-state:paused}
.ribbon .ri{display:flex;align-items:center;gap:10px;padding:0 26px;font-weight:600;color:var(--navy);font-size:15px;white-space:nowrap}
.ribbon .ri:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);margin-left:42px}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- scroll reveals (added by motion.js) ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.rv.in{opacity:1;transform:none}
.rv.in.desk,.rv.in.dst,.rv.in.it,.rv.in.nw{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--rd,0s),transform .35s ease,box-shadow .35s,border-color .35s}

/* ---------- desk cards: tilt + spotlight ---------- */
.desk{transform-style:preserve-3d;overflow:hidden}
.desk:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(213,34,41,.09),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.desk:hover:before{opacity:1}
.desk:hover{border-color:rgba(213,34,41,.35)}
.desk.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.desk .flag.lg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.desk:hover .flag.lg{transform:rotate(-10deg) scale(1.08)}
.desk .tags span{transition:background .25s,color .25s}
.desk:hover .tags span{background:#fde8e9;color:var(--red2)}

/* ---------- destinations ---------- */
.dst:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(29,26,69,.1)}
.flags-row .flag{transition:margin .35s cubic-bezier(.3,1.6,.5,1),transform .35s}
.dst:hover .flags-row .flag{margin-right:4px}
.dst:hover .flags-row .flag:first-child{transform:rotate(-10deg)}

/* ---------- services ---------- */
.svc .ic{transition:background .3s,color .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.svc .it:hover .ic{background:var(--red);color:#fff;transform:rotate(-8deg) scale(1.08)}
.svc .it:hover{transform:translateY(-5px)}

/* ---------- steps: line that fills as you scroll ---------- */
.steps{position:relative}
.steps:before,.steps:after{content:"";position:absolute;left:0;right:0;top:-30px;height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.steps:after{background:linear-gradient(90deg,var(--red),var(--pink));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.6,.05,.3,1) .2s}
.steps.in:after{transform:scaleX(1)}
.step:after{content:"";position:absolute;left:0;top:-36px;width:14px;height:14px;border-radius:50%;background:var(--navy);border:2px solid var(--pink);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.steps.in .step:after{transform:scale(1)}
.steps.in .step:nth-child(1):after{transition-delay:.3s}
.steps.in .step:nth-child(2):after{transition-delay:.9s;background:var(--red)}
.steps.in .step:nth-child(3):after{transition-delay:1.6s;background:var(--red)}
.step:before{transition:transform .4s,color .4s}
.step:hover:before{transform:translateY(-4px);color:#fff}

/* ---------- trust ---------- */
.trust .photo img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.trust .photo:hover img{transform:scale(1.05)}
.trust .photo .cap{transition:transform .4s}
.trust .photo:hover .cap{transform:translateY(-6px)}
.checks .ok{transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.checks li:hover .ok{transform:scale(1.15) rotate(-10deg);background:#0b7a3e;color:#fff}

/* ---------- news ---------- */
.nw .img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.nw .b{position:relative;background:#fff}
.nw:hover .img{transform:scale(1.07)}
.nw:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(29,26,69,.1)}
.nw h3{transition:color .25s}
.nw:hover h3{color:var(--red)}

/* WhatsApp button: gentle attention ring */
.wa-float:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ring 2.8s ease-out 3s infinite}
.wa-float{transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}
@keyframes ring{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.6);opacity:0}}

@media (max-width:760px){
  .steps:before,.steps:after,.step:after{display:none}
  .blob{filter:blur(50px)}
  .blob.b1{width:300px;height:300px}.blob.b2{width:260px;height:260px}
  .ribbon{padding:14px 0}.ribbon .ri{font-size:14px;padding:0 18px}.ribbon .ri:after{margin-left:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .comet{display:none}
  .arc-draw{display:none}
  .hero h1 em{-webkit-text-fill-color:var(--pink)}
  .steps:after{transform:scaleX(1)}.step:after{transform:scale(1)}
  .stats .row>div:after{width:36px}
}