/* Landing page layer. Loaded after the page's own <style>; selectors
   are prefixed with `html` so they win without !important. */

html body { font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; }
html[lang="ar"] body, html[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, Arial, sans-serif; }

/* Real pointer. The custom gold cursor hid the system cursor on every
   link and button, and stranded its ring mid-screen after re-renders. */
html body, html body * { cursor: auto; }
html body a, html body button, html body [role="button"], html body label { cursor: pointer; }
html .cur-dot, html .cur-ring, html #wdCursor { display: none; }

/* ── Hero: the fleet rises out of the night ─────────────────────── */
html .hero {
  justify-content: flex-start;
  padding-top: clamp(96px, 17vh, 168px);
  overflow: hidden;
}
html .hero-photo {
  position: absolute; z-index: 0; inset-inline: 0; bottom: 0;
  height: 54vh; height: 54dvh;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
          mask-image: linear-gradient(to top, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
}
html .hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 78%;
  filter: saturate(.92) brightness(.82) contrast(1.06);
  transform-origin: 50% 85%;
  transform: scale(1.14) translateY(3%);
  opacity: 0;
}
/* Warm floor light so the buses sit in the brand palette */
html .hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 110%, rgba(187,150,114,.22), transparent 60%),
    linear-gradient(to top, rgba(11,10,9,.55), transparent 45%);
}
html body.loaded .hero-photo img {
  animation: heroPush 2.4s cubic-bezier(.16,1,.3,1) .1s forwards;
}
@keyframes heroPush {
  from { opacity: 0; transform: scale(1.14) translateY(3%); }
  to   { opacity: 1; transform: scale(1.02) translateY(0); }
}
/* Scroll drift: the photo sinks and dims as the hero leaves view */
@supports (animation-timeline: scroll()) {
  html .hero-photo {
    animation: heroDrift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  @keyframes heroDrift {
    to { transform: translateY(14%); opacity: .35; }
  }
}
/* Particle canvases stay above the photo but below the text */
html .hero canvas { z-index: 1; }
html .hero > :not(.hero-photo):not(canvas) { z-index: 3; }

/* Hero text: tighter, and readable over the photo */
html .hero .ar-name { letter-spacing: 0; text-wrap: balance; }
html .hero .en-name { letter-spacing: .04em; line-height: 1; }
html .hero .tag { letter-spacing: 0; }
html .hero .sub { max-width: 52ch; text-wrap: pretty; color: #CFCAC2; text-shadow: 0 1px 18px rgba(0,0,0,.6); }

/* ── Hero buttons ───────────────────────────────────────────────── */
html .hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 28px; opacity: 0;
}
html body.loaded .hero-ctas { animation: ctaIn .8s cubic-bezier(.16,1,.3,1) 1.05s both; }
@keyframes ctaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html .h-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 24px; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .01em; white-space: nowrap; text-decoration: none;
  color: #EDE7DD; background: rgba(24,22,20,.55);
  border: 1px solid rgba(187,150,114,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .2s cubic-bezier(.16,1,.3,1), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html .h-cta:hover { transform: translateY(-2px); border-color: rgba(214,188,155,.85); background: rgba(40,36,32,.7); }
html .h-cta:active { transform: translateY(0) scale(.98); }
html .h-cta.primary { background: #BB9672; color: #17140F; border-color: transparent; box-shadow: 0 10px 30px rgba(187,150,114,.28); }
html .h-cta.primary:hover { background: #CDAE8B; box-shadow: 0 14px 38px rgba(187,150,114,.38); }
html .h-cta:focus-visible { outline: 2px solid #D6BC9B; outline-offset: 3px; }

/* ── Navigation: readable labels, same family as the page ───────── */
html .navcap .cap-item, html .navcap .cap-item .lbl, html .sound-btn {
  font-family: inherit; text-transform: none; letter-spacing: .01em; font-weight: 600;
}

/* ── Phones ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html .hero { padding-top: 96px; }
  html .hero-photo { height: 40vh; height: 40dvh; }
  html .hero-photo img { object-position: 42% 80%; }
  html .h-cta { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
}

/* ── Reduced motion: everything visible, nothing moves ──────────── */
@media (prefers-reduced-motion: reduce) {
  html .hero-photo, html .hero-photo img, html .hero-ctas { animation: none !important; }
  html .hero-photo img { opacity: 1; transform: none; }
  html .hero-ctas { opacity: 1; }
}

/* If the page script never runs, still show the photo and buttons */
html body:not(.loaded) .hero-photo img,
html body:not(.loaded) .hero-ctas { animation: failsafeShow .8s ease 3.4s forwards; }

/* Work tiles: real Rawahel photos show instantly; video takes over when loaded */
html .wd-clip video, html .wd-card video { object-fit: cover; width: 100%; height: 100%; background: #141210; opacity: 1; }

/* ── Sign-in entries: long labels on desktop, short on phones ───── */
html .navcap .l-short { display: none; }
@media (max-width: 520px) {
  html .navcap .l-long { display: none; }
  html .navcap .l-short { display: inline; }
}

/* ── Lenis smooth scroll (from lenis.css) ───────────────────────── */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ── Scroll-driven motion ──────────────────────────────────────────
   Native CSS scroll timelines: GPU-only (transform/opacity), no scroll
   listeners. Browsers without support, and anyone with reduced motion,
   get the normal page with everything visible. animation-timeline is
   always declared after the animation shorthand, which would reset it. */
.scroll-progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {

    /* Champagne progress line along the top */
    .scroll-progress {
      display: block; position: fixed; z-index: 120; top: 0; inset-inline: 0; height: 2px;
      background: linear-gradient(90deg, #8f6f4f, #D6BC9B 55%, #F1E3C8);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: rwProgress linear both;
      animation-timeline: scroll(root block);
    }
    html[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }
    @keyframes rwProgress { to { transform: scaleX(1); } }

    /* Hero text lifts away as you leave it (after the intro reveal) */
    html body.loaded .hero > .ar-name,
    html body.loaded .hero > .en-name,
    html body.loaded .hero > .tag,
    html body.loaded .hero > .sub {
      animation: rwHeroOut linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 75vh;
    }
    html body.loaded .hero > .en-name { animation-range: 0 60vh; }
    @keyframes rwHeroOut {
      to { opacity: 0; transform: translateY(-9vh) scale(.965); }
    }

    /* Section titles wipe up out of a mask; kickers follow */
    html .sec-title[data-rv], html .sec-kicker[data-rv] { opacity: 1; transform: none; transition: none; }
    html .sec-title[data-rv] {
      animation: rwTitleWipe linear both;
      animation-timeline: view(block);
      animation-range: entry 10% cover 38%;
    }
    @keyframes rwTitleWipe {
      from { clip-path: inset(0 0 100% 0); transform: translateY(.45em); opacity: .2; }
      to   { clip-path: inset(0 0 -10% 0); transform: none; opacity: 1; }
    }
    html .sec-kicker[data-rv] {
      animation: rwFadeRise linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 30%;
    }
    @keyframes rwFadeRise {
      from { opacity: 0; transform: translateY(14px); letter-spacing: .5em; }
      to   { opacity: 1; transform: none; }
    }

    /* Stat cards rise in a stagger */
    html .stat[data-rv] {
      opacity: 1; transition: none;
      animation: rwCardRise linear both;
      animation-timeline: view(block);
    }
    html .stat[data-rv]:nth-child(1) { animation-range: entry 0% cover 30%; }
    html .stat[data-rv]:nth-child(2) { animation-range: entry 8% cover 36%; }
    html .stat[data-rv]:nth-child(3) { animation-range: entry 16% cover 42%; }
    html .stat[data-rv]:nth-child(4) { animation-range: entry 24% cover 48%; }
    html .stat[data-rv]:nth-child(5) { animation-range: entry 32% cover 54%; }
    @keyframes rwCardRise {
      from { opacity: 0; transform: translateY(48px) scale(.94); }
      to   { opacity: 1; transform: none; }
    }

    /* Work tiles: the photo settles from a slow zoom while it crosses the screen */
    html .wd-card video {
      animation: rwSettle linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
    @keyframes rwSettle {
      from { transform: scale(1.22) translateY(-3%); }
      to   { transform: scale(1.02) translateY(3%); }
    }

    /* The big type band drifts sideways with the scroll */
    html .type-band span {
      animation: rwBandDrift linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
    @keyframes rwBandDrift {
      from { transform: translateX(12%); }
      to   { transform: translateX(-18%); }
    }
    html[dir="rtl"] .type-band span { animation-direction: reverse; }

    /* Service features slide in from alternating sides */
    html #services .fs {
      animation: rwSlideL linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 35%;
    }
    html #services .fs:nth-of-type(even) { animation-name: rwSlideR; }
    @keyframes rwSlideL { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
    @keyframes rwSlideR { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
  }
}

/* ── Scroll experience ───────────────────────────────────────────
   Scroll-driven CSS (animation-timeline): motion is tied to the
   scrollbar, so it scrubs forwards and backwards with the reader and
   costs no JavaScript. Browsers without support keep the original
   IntersectionObserver reveals; reduced-motion users get none. */

/* Gold reading-progress hairline */
html .scroll-progress {
  position: fixed; z-index: 999; top: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, #9C7B59, #D6BC9B 60%, #F1DFC2);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
html[dir="rtl"] .scroll-progress { transform-origin: right center; }
@keyframes rwProgress { to { transform: scaleX(1); } }

@keyframes rwRise  { from { opacity: 0; transform: translateY(36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rwWipe  { from { opacity: .15; transform: translateY(22px); clip-path: inset(0 0 100% 0); }
                     to   { opacity: 1;   transform: none;             clip-path: inset(0 0 -10% 0); } }
@keyframes rwSlide { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes rwSlideR{ from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: none; } }
@keyframes rwCard  { from { opacity: 0; transform: translateY(56px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rwPhoto { from { transform: scale(1.18) translateY(-5%); } to { transform: scale(1.03) translateY(5%); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html .scroll-progress { animation: rwProgress linear both; animation-timeline: scroll(root); }
  }
  @supports (animation-timeline: view()) {
    /* Hand the existing data-rv reveals to the scroll timeline */
    html [data-rv] {
      opacity: 1; transform: none; transition: none;
      animation: rwRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    html .sec-title[data-rv] { animation-name: rwWipe; animation-range: entry 8% cover 30%; }
    html .sec-kicker[data-rv] { animation-name: rwSlide; animation-range: entry 0% cover 22%; }
    html[dir="rtl"] .sec-kicker[data-rv] { animation-name: rwSlideR; }

    /* Company numbers: cards rise one after another */
    html .stat[data-rv] { animation-name: rwCard; }
    html .stat[data-rv]:nth-child(2) { animation-range: entry 6%  cover 30%; }
    html .stat[data-rv]:nth-child(3) { animation-range: entry 12% cover 34%; }
    html .stat[data-rv]:nth-child(4) { animation-range: entry 18% cover 38%; }
    html .stat[data-rv]:nth-child(5) { animation-range: entry 24% cover 42%; }

    /* Services, fleet strip, certifications: same cascade */
    html .grid > .tile, html .fleet-strip > .fs, html .isos > .iso {
      animation: rwCard linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
    }
    html .grid > .tile:nth-child(3n+2), html .fleet-strip > .fs:nth-child(3n+2), html .isos > .iso:nth-child(2) { animation-range: entry 8% cover 34%; }
    html .grid > .tile:nth-child(3n),   html .fleet-strip > .fs:nth-child(3n),   html .isos > .iso:nth-child(3) { animation-range: entry 16% cover 40%; }

    /* Work tiles: the photo / video drifts and settles inside its frame */
    html .wd-clip { overflow: hidden; }
    html .wd-clip video {
      animation: rwPhoto linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
  }
}

/* ── Micro-interactions (static/landing-fx.js) ─────────────────── */
@property --spot { syntax: '<number>'; inherits: false; initial-value: 0; }
html .rw-spot {
  background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(232,207,158, calc(.13 * var(--spot))), transparent 65%);
  transition: --spot .45s ease;
}
html .h-cta {
  translate: var(--mag-x, 0) var(--mag-y, 0);
  transition: translate .45s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1),
              background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Nav labels never wrap, even mid-scramble */
html [data-scr], html .navcap .cap-item { white-space: nowrap; }