/* Motion layer — photo hero, kinetic headline, trip scroll, hub backdrop.
   Visuals generated with Higgsfield on 2026-10-02 (originals in assets-src/). */

/* ---------- kinetic headline ---------- */
.kin .line{display:block;translate:calc(var(--side) * var(--hp,0) * 22vw) 0;opacity:calc(1 - var(--hp,0) * .9)}
.kin .w{display:inline-block;overflow:clip;overflow-clip-margin:.14em;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.moving .kin .w>span{display:inline-block;animation:word .95s calc(.1s + var(--k) * .06s) cubic-bezier(.2,.7,.1,1) both}
@keyframes word{from{transform:translateY(108%) rotate(4deg)}}
.rot{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.box{position:relative;display:inline-grid;vertical-align:bottom;overflow:hidden;white-space:nowrap;padding:0 .14em;margin:0 -.02em;border-radius:.14em;box-sizing:content-box;background:var(--blue);color:#fff;transition:width .55s cubic-bezier(.2,.7,.1,1)}
.moving .box{animation:boxin .7s .6s cubic-bezier(.2,.7,.1,1) both}
.opt{grid-area:1/1;justify-self:start;transform:translateY(112%)}
.opt.on{transform:none;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.opt.out{transform:translateY(-112%);transition:transform .6s cubic-bezier(.2,.7,.1,1)}
@keyframes boxin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ---------- photo hero (country pages) ---------- */
.hero.hero--photo{display:flex;align-items:flex-end;max-width:none;margin:0;min-height:min(92svh,880px);padding:120px clamp(16px,4vw,48px) clamp(40px,6vw,72px);position:relative;isolation:isolate;overflow:hidden;color:#fff;margin-top:-68px}
.hero-bg{position:absolute;inset:0;z-index:-1;background:#1a1a2e}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:calc(1.04 + var(--hp,0) * .12)}
.hero-bg video{object-position:var(--tilt) 50%;opacity:0;transition:opacity 1.2s}
.hero-bg video.on{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,30,.78) 0%,rgba(12,10,30,.45) 45%,rgba(12,10,30,0) 75%),linear-gradient(0deg,rgba(12,10,30,.55) 0%,rgba(12,10,30,0) 40%)}
.hero-text{width:100%;max-width:1144px;margin:0 auto}
.hero-text>*{max-width:640px}
.hero--photo .kicker{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25)}
.hero--photo h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25);margin:18px 0}
.hero--photo .box{background:var(--c2);color:var(--ink);text-shadow:none}
.hero--photo .lead{color:rgba(255,255,255,.88)}
.hero--photo .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.hero--photo .vibes li{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff;backdrop-filter:blur(8px)}
.moving .hero-text>:not(h1){animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
.moving .hero-text>:nth-child(3){animation-delay:.5s}.moving .hero-text>:nth-child(4){animation-delay:.6s}.moving .hero-text>:nth-child(5){animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.hero--photo .sticker{color:var(--ink)}
.hero--photo .s1{top:auto;bottom:34%;left:auto;right:8%}
.hero--photo .s2{bottom:18%;right:14%}

/* ---------- trip, piece by piece ---------- */
.trip{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--c1) 40%,var(--ink)) 0%,var(--ink) 70%);color:#fff;padding:60px 0}
.trip.live{height:260vh;padding:0}
.trip-stick{display:flex;flex-direction:column;gap:18px;padding:0 clamp(16px,4vw,48px);max-width:1240px;margin:0 auto}
.trip.live .trip-stick{position:sticky;top:0;height:100vh;height:100svh;padding-top:96px;padding-bottom:24px}
.trip-head .eyebrow{color:var(--c2)}
.trip-head h2{color:#fff}
.trip-stage{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.pass{position:relative;width:min(600px,100%);justify-self:center;color:var(--ink)}
.pp{background:#fff;padding:16px 22px;position:relative}
.p1{background:var(--c1);color:#fff;border-radius:20px 20px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.p1 b{font:800 1.3rem "Bricolage Grotesque"} .p1 span{font-size:.8rem;opacity:.85}
.p2{display:flex;justify-content:space-between;align-items:center}
.p2 small,.p3 small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.p2 strong{display:block;font:800 clamp(2.4rem,7vw,3.4rem) "Bricolage Grotesque";line-height:1;letter-spacing:-.03em}
.p2 span{font-size:.85rem;color:var(--muted)}
.p2 .plane{font-size:1.8rem;color:var(--c1)}
.p3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line)}
.p3 b{font-size:.95rem}
.p4{border-top:2px dashed var(--line);border-radius:0 0 20px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700}
.bars{flex:1;height:38px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 12px,transparent 12px 14px)}
.stamp{position:absolute;width:88px;height:88px;border-radius:50%;border:3px solid var(--c1);color:var(--c1);display:grid;place-content:center;text-align:center;font:800 .78rem "Bricolage Grotesque";text-transform:uppercase;letter-spacing:.06em;background:color-mix(in srgb,#fff 82%,transparent);will-change:transform}
.stamp b{display:block;font-size:1.5rem;line-height:1}
.st1{right:150px;bottom:-26px}.st2{right:62px;bottom:10px}.st3{right:-26px;bottom:-18px}
.pols{position:relative;height:100%;min-height:300px}
.pol{position:absolute;left:calc(50% + (var(--i) - 1) * 175px);top:50%;width:240px;margin:0 0 0 -120px;translate:0 -50%;background:#fff;padding:10px 10px 0;border-radius:6px;box-shadow:0 24px 40px -14px rgba(0,0,0,.6)}
.pol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pol figcaption{color:var(--ink);font:700 .9rem "Bricolage Grotesque";padding:10px 4px 12px;line-height:1.2}

/* steps: scroll toggles .ph1/.ph2/.ph3, transitions do the motion */
.pass::before{content:"";position:absolute;inset:10px 6px -6px;border-radius:22px;box-shadow:0 30px 50px -10px rgba(0,0,0,.55);transition:opacity .6s .4s}
.trip.live .pass::before{opacity:0}.trip.ph1 .pass::before{opacity:1}
.trip.live .pp{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr));transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .4s;transition-delay:var(--dl)}
.p1{--fx:-140%;--fy:0;--fr:-10deg;--dl:0s}.p2{--fx:130%;--fy:0;--fr:14deg;--dl:.09s}.p3{--fx:-130%;--fy:0;--fr:-12deg;--dl:.18s}.p4{--fx:0;--fy:160%;--fr:8deg;--dl:.27s}
.trip.ph1 .pp{opacity:1;transform:none}
.stamp{--sr:-14deg}.st2{--sr:-3deg}.st3{--sr:8deg}
.trip.live .stamp{opacity:0;transform:scale(2.4) rotate(var(--sr));transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .15s;transition-delay:var(--dl,0s)}
.st2{--dl:.22s}.st3{--dl:.44s}
.trip.ph2 .stamp{opacity:1;transform:scale(1) rotate(var(--sr))}
.pol{--d:-8deg;--y:-6px;--spin:-20deg}.pol:nth-child(2){--d:0deg;--y:4px;--spin:0deg}.pol:nth-child(3){--d:8deg;--y:-2px;--spin:20deg}
.trip.live .pol{transform:translateY(110vh) rotate(calc(var(--d) + var(--spin)));transition:transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .13s)}
.trip.ph3 .pol{transform:translateY(var(--y)) rotate(var(--d))}

/* ---------- apply-now nudge ---------- */
.nudge{position:fixed;z-index:60;left:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,28px);width:min(470px,calc(100vw - 24px));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 40px 14px 14px;background:#fff;color:var(--ink);border-radius:20px;box-shadow:0 20px 50px -12px rgba(20,20,43,.45),0 0 0 1px var(--line);transform:translateY(140%);opacity:0;transition:transform .55s cubic-bezier(.2,.9,.2,1.15),opacity .3s}
.nudge.show{transform:none;opacity:1}
.nudge-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--tint);font-size:1.3rem}
.nudge.show .nudge-icon{animation:wiggle 1.2s .5s ease-in-out 2}
@keyframes wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
.nudge strong{display:block;font:800 1rem "Bricolage Grotesque";line-height:1.2}
.nudge small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.nudge .btn-sm{white-space:nowrap}
.nudge-x{position:absolute;top:6px;right:8px;border:0;background:transparent;font-size:1.3rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px 6px}
@media (max-width:520px){.nudge{grid-template-columns:auto 1fr;padding-right:36px}.nudge .btn-sm{grid-column:1/-1;width:100%;padding:12px}}

/* ---------- hub ---------- */
.hub-hero{position:relative;isolation:isolate;max-width:none;color:#fff;overflow:hidden;padding:clamp(110px,14vw,170px) 16px clamp(70px,9vw,120px);margin-top:-68px}
.hub-hero>*:not(.hub-bg){max-width:900px;margin-left:auto;margin-right:auto}
.hub-bg{position:absolute;inset:0;z-index:-1;background:#1a1a2e}
.hub-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 50%,rgba(12,10,30,.35),rgba(12,10,30,.75))}
.hub-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:slide 20s infinite}
.hub-bg img:first-child{opacity:1}
.hub-bg img:nth-child(2){animation-delay:5s}.hub-bg img:nth-child(3){animation-delay:10s}.hub-bg img:nth-child(4){animation-delay:15s}
@keyframes slide{0%{opacity:0;scale:1.12}6%{opacity:1}25%{opacity:1}31%{opacity:0;scale:1}100%{opacity:0}}
.hub-hero .kicker{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(8px)}
.hub-hero h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hub-hero .lead{color:rgba(255,255,255,.9)}
.dest a{background-size:cover;background-position:center;min-height:380px}
.dest a::before{content:"";position:absolute;inset:0;background:inherit;background-size:cover;transition:scale .6s;z-index:-1}
.dest a{isolation:isolate}
.dest a:hover::before{scale:1.06}

/* nav over the photo heroes */
body:has(.hero--photo,.hub-hero) .nav{background:transparent;backdrop-filter:none}
body:has(.hero--photo,.hub-hero) .nav:not(.scrolled) .logo-mark,body:has(.hero--photo,.hub-hero) .nav:not(.scrolled) .logo-sub,body:has(.hero--photo,.hub-hero) .nav:not(.scrolled) .nav-links{color:#fff}
body:has(.hero--photo,.hub-hero) .nav.scrolled{background:var(--bg);backdrop-filter:none}

@media (max-width:900px){
  .hero.hero--photo{min-height:100svh;padding-top:100px}
  .hero-bg::after{background:linear-gradient(0deg,rgba(12,10,30,.88) 0%,rgba(12,10,30,.55) 48%,rgba(12,10,30,.1) 75%)}
  .hero--photo .s1{bottom:auto;top:110px;right:16px}
  .hero--photo .s2{display:none}
  .kin .line{translate:calc(var(--side) * var(--hp,0) * 40vw) 0}
  .trip-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;align-items:start}
  .trip.live .trip-stick{padding-top:84px;gap:10px}
  .pp{padding:11px 16px}
  .p3 b{font-size:.85rem}
  .stamp{width:70px;height:70px;font-size:.62rem}.stamp b{font-size:1.15rem}
  .st1{right:118px;bottom:-22px}.st2{right:50px;bottom:6px}.st3{right:-12px;bottom:-16px}
  .pols{min-height:220px}
  .pol{width:min(37vw,170px);margin-left:calc(min(37vw,170px) / -2);left:calc(50% + (var(--i) - 1) * min(27vw,120px));padding:6px 6px 0}
  .pol figcaption{font-size:.72rem;padding:6px 2px 8px}
}
@media (max-width:900px) and (max-height:700px){.trip-head h2{font-size:1.6rem}.bars{height:26px}}