/* ================= motion layer ================= */
/* masked word reveals */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; transform: translateY(108%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0) * 90ms); }
.split.rv { opacity: 1; transform: none; }
.split.in .w > span, body.loaded .intro h1 .w > span { transform: none; }
.intro h1 .w > span { transition-delay: calc(var(--i, 0) * 90ms + 250ms); transition-duration: 1.4s; }
/* kicker rules draw in */
.kicker::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .15s; }
[dir="rtl"] .kicker::before { transform-origin: right; }
.kicker.in::before, body.loaded .intro .kicker::before { transform: scaleX(1); }
/* hero load-in */
.intro .kicker, .intro p, .intro h1 .ar, .scrollcue > span { opacity: 0; translate: 0 18px; transition: opacity 1s var(--ease), translate 1.2s var(--ease); }
body.loaded .intro .kicker { opacity: 1; translate: 0 0; transition-delay: .1s; }
body.loaded .intro h1 .ar { opacity: 1; translate: 0 0; transition-delay: .7s; }
body.loaded .intro p { opacity: 1; translate: 0 0; transition-delay: .9s; }
body.loaded .scrollcue > span { opacity: 1; translate: 0 0; transition-delay: 1.3s; }
.nav { translate: 0 -100%; transition: translate 1s var(--ease) .2s, color .4s, background .4s, padding .4s var(--ease); }
body.loaded .nav { translate: 0 0; }
.nav .progress { position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; pointer-events: none; }
[dir="rtl"] .nav .progress { transform-origin: right; }
/* chapter numbers draw a rule */
.chapter .n { display: inline-flex; align-items: center; gap: 10px; }
.chapter .n::after { content: ""; width: 0; height: 1px; background: currentColor; transition: width 1s var(--ease) .2s; }
.chapter.on .n::after { width: 40px; }
/* magnetic buttons */
.cta, .lang, .hold, .toggle { translate: var(--mx, 0px) var(--my, 0px); transition: translate .35s var(--ease), transform .35s var(--spring), box-shadow .35s, background .3s, color .3s; }
/* tilt + glare */
.card.in.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); transition: transform .25s var(--ease), box-shadow .6s var(--ease); }
.box.in.tilt { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease), box-shadow .5s; }
.card::after, .box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.2), transparent 55%); }
.box { position: relative; }
.box::after { background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in oklab, var(--ember) 10%, transparent), transparent 60%); }
.card.tilt::after, .box.tilt::after { opacity: 1; }
/* card images settle in as the card reveals; badges pop */
.card img { transition: transform 1.6s var(--ease), filter .6s; }
.card:not(.in) img { transform: scale(1.2); }
.card .alt { scale: .6; opacity: 0; transition: scale .6s var(--spring) .5s, opacity .4s .5s, background .4s; }
.card.in .alt { scale: 1; opacity: 1; }
.card h3 { transition: transform .6s var(--ease); }
.card:hover h3 { transform: translateY(-4px); }
.card .stat span { transition: color .4s, transform .5s var(--spring); }
.card:hover .stat span { transform: translateY(-2px); color: #fff; }
/* facts: number warms up on hover */
.fact b { transition: color .4s, transform .5s var(--ease); }
.fact:hover b { color: var(--ember); transform: translateX(4px); }
[dir="rtl"] .fact:hover b { transform: translateX(-4px); }
/* image masks settle from a slight zoom */
.rv-mask > img { transition: clip-path 1.3s var(--ease), transform 1.8s var(--ease); }
/* flight profile draws itself, the cable marches */
.profile .ground { stroke-dasharray: 2600; stroke-dashoffset: 2600; fill-opacity: 0; transition: stroke-dashoffset 2.4s var(--ease), fill-opacity 1.4s .9s; }
.profile.in .ground { stroke-dashoffset: 0; fill-opacity: 1; }
.profile .cable { animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -14; } }
.profile text { opacity: 0; transition: opacity .8s 1.2s; }
.profile.in text { opacity: 1; }
.panel .read b { transition: color .3s; }
.panel:has(.hold.on) .read b { color: var(--ember-2); }
.hold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: ring 2.4s var(--ease) infinite; pointer-events: none; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember-2) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--ember-2) 0%, transparent); } }
/* day / night: slow drift on the photo */
.dn img { transform: scale(1.1); transition: opacity 1.4s var(--ease), transform 14s linear; }
.dn.inview img { transform: scale(1); }
.dn .toggle button:hover:not(.on) { color: var(--ember-2); }
/* plan: chips stagger in, itinerary rows slide in on every change */
.box .chip { opacity: 0; translate: 0 10px; transition: opacity .6s var(--ease), translate .7s var(--ease), background .3s, border-color .3s, color .3s, transform .35s var(--spring); }
.box.in .chip { opacity: 1; translate: 0 0; }
.box.in .chip:nth-child(2) { transition-delay: .06s, .06s, 0s, 0s, 0s, 0s; }
.box.in .chip:nth-child(3) { transition-delay: .12s, .12s, 0s, 0s, 0s, 0s; }
.box.in .chip:nth-child(4) { transition-delay: .18s, .18s, 0s, 0s, 0s, 0s; }
.box.in .chip:nth-child(5) { transition-delay: .24s, .24s, 0s, 0s, 0s, 0s; }
.box.in .chip:nth-child(6) { transition-delay: .3s, .3s, 0s, 0s, 0s, 0s; }
#itin .line { animation: rowIn .6s var(--ease) both; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } }
.cond b.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.14); color: var(--ember); } }
/* getting there */
.drive li { position: relative; }
.drive li::after { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
[dir="rtl"] .drive li::after { transform-origin: right; }
.drive li:hover::after { transform: scaleX(1); }
/* footer letters rise */
footer .big { overflow: hidden; padding-bottom: .06em; }
footer .big .ch { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 45ms); }
footer .big.in { opacity: 1; transform: none; }
footer .big.in .ch { transform: none; }
footer .big .dot { color: var(--ember); }
footer .big.in:hover .ch { animation: wave .9s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes wave { 40% { transform: translateY(-8%); } }
@media (prefers-reduced-motion: reduce) {
  .w > span, .intro .kicker, .intro p, .intro h1 .ar, .scrollcue > span, .nav, footer .big .ch { transform: none !important; translate: 0 0 !important; opacity: 1 !important; transition: none !important; }
  .profile .ground { stroke-dashoffset: 0; fill-opacity: 1; } .profile text { opacity: 1; } .profile .cable, .hold::after { animation: none; }
  .card .alt { scale: 1; opacity: 1; } .box .chip { opacity: 1; translate: 0 0; } .dn img { transition: opacity 1.4s; transform: none; }
}