/* ============================================================
   SCROLL INTRO — "SHIFT"  (home pages only)
   ------------------------------------------------------------
   The intro behaves like an automatic gearbox: scrolling moves
   the selector from P to D and shifts up through the gears.
   Each gear shows one real workshop photo and one short fact.

   It is hidden by default and only switched on by js/intro.js
   (first visit in a session, motion allowed), so without
   JavaScript the site looks exactly as before.

   Layout: .intro is a tall block; .intro__stage is pinned
   (sticky) inside it. The negative bottom margin makes the
   site rise over the pinned stage for the last screen.
   ============================================================ */

.intro { display: none; }

.intro.is-active {
  display: block;
  position: relative;
  height: 480vh;
  height: 480lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  background: var(--c-charcoal);
}

.intro__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: #0c0e12;
  color: #fff;
}

/* ---------- Photos ---------- */
.intro__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(var(--zoom, 1.04));
  transition: opacity 0.5s ease;
  will-change: opacity, transform;
}
.intro__photo.is-on { opacity: 1; }

/* Darkening for legibility (text side) + hand-over to the site */
.intro__stage::before,
.intro__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.intro__stage::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 14, 18, 0.9) 0%, rgba(12, 14, 18, 0.62) 42%, rgba(12, 14, 18, 0.18) 100%),
    rgba(12, 14, 18, 0.22);
}
[dir="rtl"] .intro__stage::before {
  background:
    linear-gradient(270deg, rgba(12, 14, 18, 0.9) 0%, rgba(12, 14, 18, 0.62) 42%, rgba(12, 14, 18, 0.18) 100%),
    rgba(12, 14, 18, 0.22);
}
.intro__stage::after {
  z-index: 4;
  background: #0c0e12;
  opacity: calc(var(--dim, 0) * 0.82);
}

/* ---------- Instrument display ---------- */
.intro__hud {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3.6rem);
  padding: 0 clamp(22px, 7vw, 120px);
  opacity: var(--hud, 1);
}

.intro__selector {
  flex: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.5rem, 1.6vh, 1rem);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.intro__selector li {
  position: relative;
  padding-inline-start: 0.7em;
  color: rgba(255, 255, 255, 0.34);
  transition: color 0.25s ease;
}
.intro__selector li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8%;
  bottom: 8%;
  width: 3px;
  background: var(--c-red);
  transform: scaleY(0);
  transition: transform 0.25s ease;
}
.intro__selector li.is-on { color: #fff; }
.intro__selector li.is-on::before { transform: scaleY(1); }

.intro__readout { min-width: 0; flex: 1; }

/* Large gear readout: P, R, N, then 1–4 */
.intro__chars {
  position: relative;
  height: clamp(7rem, 30vh, 15rem);
  font-size: clamp(7rem, 30vh, 15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.intro__char {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.intro__char.is-next { transform: translateY(0.16em); }
.intro__char.is-past { transform: translateY(-0.16em); }
.intro__char.is-on { opacity: 1; transform: none; }

/* One short fact per gear */
.intro__facts {
  position: relative;
  list-style: none;
  margin: clamp(0.6rem, 2vh, 1.2rem) 0 0;
  padding: 0;
  min-height: 2.6em;
  font-size: clamp(1.15rem, 2.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
}
.intro__facts li {
  position: absolute;
  inset-inline: 0;
  top: 0;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}
.intro__facts li.is-on { opacity: 1; transform: none; }

/* Rev bar */
.intro__rev {
  position: relative;
  width: min(520px, 100%);
  margin-top: clamp(1rem, 3vh, 1.8rem);
}
.intro__rev-track {
  display: block;
  height: 5px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.intro__rev-bar {
  display: block;
  height: 100%;
  background: var(--c-red);
  transform: scaleX(var(--rev, 0.1));
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.intro__rev-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-steel-light);
}
.intro__rev-scale i {
  position: relative;
  width: 0;
  display: flex;
  justify-content: center;
  font-style: normal;
  padding-top: 0.55rem;
}
.intro__rev-scale i::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1.5px;
  height: 0.4rem;
  background: rgba(255, 255, 255, 0.55);
}
.intro__rev-unit {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-steel-light);
}

/* ---------- Closing title ---------- */
.intro__title {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 clamp(22px, 7vw, 120px);
  /* fades in at the end, then out again as the site rises over it */
  opacity: calc(var(--title, 0) * (1 - var(--dim, 0) * 1.8));
  transform: translateY(calc(-50% + (1 - var(--title, 0)) * 20px));
  pointer-events: none;
}
/* The official logo is shown unmodified on a white plate
   (recolouring the approved logo files is not allowed). */
.intro__logo {
  display: inline-flex;
  padding: clamp(0.7rem, 1.6vw, 1.2rem) clamp(1rem, 2.2vw, 1.7rem);
  margin-bottom: clamp(1rem, 2.6vh, 1.6rem);
  background: #fff;
  border-radius: var(--radius);
}
.intro__logo img {
  display: block;
  width: auto;
  height: clamp(30px, 4.6vw, 58px);
}
.intro__logo--ar img { height: clamp(52px, 7.6vw, 96px); }
.intro__name {
  display: block;
  font-size: clamp(1.6rem, 3.8vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.intro__name::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 0.45em 0 0.4em;
  background: var(--c-red);
}
.intro__sub {
  display: block;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-steel-light);
}

/* ---------- Skip + scroll hint ---------- */
.intro__skip {
  position: absolute;
  z-index: 5;
  top: 18px;
  inset-inline-end: clamp(18px, 4vw, 32px);
  padding: 0.55em 1.2em;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: rgba(12, 14, 18, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 100px;
}
.intro__skip:hover { border-color: #fff; text-decoration: none; }

.intro__hint {
  position: absolute;
  z-index: 3;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  opacity: var(--hint, 1);
  pointer-events: none;
}
.intro__hint::after {
  content: "";
  display: block;
  width: 1.5px;
  height: 34px;
  margin: 10px auto 0;
  background: linear-gradient(to bottom, #fff, transparent);
  transform-origin: top;
  animation: intro-hint 1.8s ease-in-out infinite;
}
@keyframes intro-hint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- The site rises over the pinned stage ---------- */
.intro.is-active ~ .site-header {
  box-shadow: 0 -28px 60px rgba(0, 0, 0, 0.5);
}
.intro.is-active ~ main,
.intro.is-active ~ .site-footer {
  position: relative;
  z-index: 1;
}
.intro.is-active ~ main { background: var(--c-bg); }

/* ---------- Small screens ---------- */
@media (max-width: 620px) {
  .intro__hud { align-items: flex-end; padding-bottom: 22vh; }
  .intro__stage::before {
    background:
      linear-gradient(0deg, rgba(12, 14, 18, 0.92) 0%, rgba(12, 14, 18, 0.6) 48%, rgba(12, 14, 18, 0.2) 100%),
      rgba(12, 14, 18, 0.2);
  }
  [dir="rtl"] .intro__stage::before {
    background:
      linear-gradient(0deg, rgba(12, 14, 18, 0.92) 0%, rgba(12, 14, 18, 0.6) 48%, rgba(12, 14, 18, 0.2) 100%),
      rgba(12, 14, 18, 0.2);
  }
  .intro__chars { height: 7.5rem; font-size: 7.5rem; }
  .intro__title { top: auto; bottom: 26vh; transform: translateY(calc((1 - var(--title, 0)) * 20px)); }
}

/* Arabic: letter-spacing breaks the joined script */
[dir="rtl"] .intro__name,
[dir="rtl"] .intro__sub,
[dir="rtl"] .intro__hint {
  letter-spacing: 0;
}