/* ================= section reveals (after the hero) =================
   Trigger reveals (.rv -> .in) plus scroll-scrubbed ones ([data-scrub] gets --p 0..1 from js/motion.js). */

/* text: rise and sharpen out of a blur */
.rv { filter: blur(8px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { filter: none; }
.split.rv { filter: none; }
.w > span { transform: translateY(108%) rotate(5deg); transform-origin: 0 100%; }
[dir="rtl"] .w > span { transform: translateY(108%) rotate(-5deg); transform-origin: 100% 100%; }
.split.in .w > span, body.loaded .intro h1 .w > span { transform: none; }

/* the real road: an inset card that opens to full bleed as you scroll */
.band figure { clip-path: inset(calc((1 - var(--p, 1)) * 10%) calc((1 - var(--p, 1)) * 16%) round calc((1 - var(--p, 1)) * 40px)); will-change: clip-path; }
.band img { transform: scale(calc(1.34 - .22 * var(--p, 1))) translateY(var(--py, 0px)); transition: none; }
.band-copy p { transform: translateY(calc((1 - var(--p, 1)) * 60px)); }
.band-copy p.rv { transition: opacity 1.1s var(--ease), filter 1.1s var(--ease); }

/* Jais Flight photo: widens from the centre */
#flPhoto { clip-path: inset(0 calc((1 - var(--p, 1)) * 14%) round 22px); will-change: clip-path; }
#flPhoto img { transform: scale(calc(1.3 - .2 * var(--p, 1))) translateY(var(--py, 0px)); transition: transform .2s linear; }

/* winter: a circle of light opens on the photo */
.dn { clip-path: circle(calc(14% + var(--p, 1) * 80%) at 50% 58%); will-change: clip-path; }
.dn .copy .rv { transition-delay: calc(var(--d, 0) * 120ms + 200ms); }

/* facts: rules draw, digits roll */
.facts { border-top: 0; position: relative; }
.facts::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
[dir="rtl"] .facts::before { transform-origin: right; }
.facts.in::before { transform: scaleX(1); }
.fact + .fact { border-inline-start-color: transparent; }
.fact + .fact::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px; width: 1px; background: var(--line); transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--ease) calc(var(--d, 0) * 120ms + 300ms); }
.fact.in + .fact.in::before, .fact + .fact.in::before { transform: scaleY(1); }
@media (max-width: 860px) { .fact:nth-child(3)::before { display: none; } }
.od { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; line-height: 1; }
.od .col { display: block; transform: translateY(0); transition: transform 2.2s cubic-bezier(.16, 1, .3, 1) calc(var(--k, 0) * 110ms + 150ms); }
.od .col span { display: block; height: 1em; line-height: 1; }
.roll .od .col { transform: translateY(calc(var(--n) * -1em)); }
.odc { display: inline-block; }

/* experience cards: flip up from below, the photo unmasks after */
.card.rv { opacity: 0; filter: none; transform: perspective(1200px) translateY(90px) rotateX(16deg); transform-origin: 50% 100%; transition: opacity .9s var(--ease), transform 1.4s var(--ease); transition-delay: calc(var(--d, 0) * 120ms); }
.card.rv.in { opacity: 1; transform: none; }
.card img { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease) calc(var(--d, 0) * 120ms + 250ms), transform 1.6s var(--ease); }
.card.in img { clip-path: inset(0 0 0 0); }
.card .in { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease) calc(var(--d, 0) * 120ms + 600ms), transform .9s var(--ease) calc(var(--d, 0) * 120ms + 600ms); }
.card.in .in { opacity: 1; transform: none; }

/* plan: the two boxes slide in from either side */
.box.from-l.rv { transform: translateX(-70px) rotate(-1.2deg); }
.box.from-r.rv { transform: translateX(70px) rotate(1.2deg); }
[dir="rtl"] .box.from-l.rv { transform: translateX(70px) rotate(1.2deg); }
[dir="rtl"] .box.from-r.rv { transform: translateX(-70px) rotate(-1.2deg); }
.box.rv.in { transform: none; }
.cond div { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .7s var(--ease), transform .8s var(--spring); }
.box.in .cond div { opacity: 1; transform: none; }
.box.in .cond div:nth-child(2) { transition-delay: .1s; } .box.in .cond div:nth-child(3) { transition-delay: .2s; }

/* map: opens as a circle from the foot of the road */
/* the clip sits on the canvas, not on the observed box: a clipped target never reports as visible */
.rv-map { background: transparent; }
.rv-map > canvas { background: #1b1a18; clip-path: circle(0% at 28% 86%); transition: clip-path 2s var(--ease); }
.rv-map.in > canvas { clip-path: circle(150% at 28% 86%); }
.drive li.rv { transform: translateX(56px); }
[dir="rtl"] .drive li.rv { transform: translateX(-56px); }
.drive li.rv.in { transform: none; }

/* flight panel */
.panel { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease) .4s, transform 1.1s var(--ease) .4s; }
.profile.in + .panel { opacity: 1; transform: none; }

/* keep pointer tilt working on revealed cards and boxes */
.card.rv.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.rv.in.tilt { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease), box-shadow .5s; }

/* footer: the page lifts off it like a curtain */
@media (min-width: 861px) and (min-height: 720px) {
  main { position: relative; z-index: 1; background: var(--bg); box-shadow: 0 50px 80px -40px rgba(0,0,0,.45); }
  footer { position: sticky; bottom: 0; z-index: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rv, .card.rv { filter: none; transform: none; opacity: 1; }
  .band figure, #flPhoto, .dn, .rv-map > canvas, .card img { clip-path: none; }
  .band img, #flPhoto img, .band-copy p { transform: none; }
  .card .in, .cond div, .panel { opacity: 1; transform: none; }
  .facts::before, .fact + .fact::before { transform: none; }
}
.sum .line .num { white-space: nowrap; }
.band-copy p.rv.in { filter: drop-shadow(0 4px 22px rgba(0,0,0,.4)); }

/* word masks: room for Arabic dots and descenders, and fully open once a word has landed */
.w { padding: .14em .04em .32em; margin: -.14em -.04em -.32em; }
.w.done { overflow: visible; }

/* Arabic travel values are words with numbers in them: keep them right-to-left */
[dir="rtl"] .drive li b { direction: rtl; unicode-bidi: normal; text-align: left; }
/* slide-in reveals start off to the side: keep that from widening the page */
#plan, #there, #xp, #facts { overflow-x: clip; }