/* Timeline Jameel Motors. Le DOM et les mouvements conservent le rythme de la
   maquette de référence, tandis que les tokens viennent du design system JMC. */
:root {
  --font: var(--font-sans);

  /* Grid tokens, copied from the theme's :root. The content column is 10/12
     wide, offset by 2/12 — that empty left 2 columns is where the year menu
     and the slide-nav dots sit. */
  --half-gutter: 12px;
  --side-margin: var(--half-gutter);
  --container-max-width: calc(1200px + 2 * var(--side-margin)); /* 1224px */
  --wide-margin: 108px; /* used by the image slide's negative right margin */
}

/* ---- reset / base (minireset-style, trimmed) ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
h1, h2, h6, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* autoScrolling: the page itself never scrolls; the controller translates the
   viewport instead. (fullPage adds this through its .fp-enabled class.) */
html, body {
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ---- the grid: container + the 10/12 offset column ----------------------- */
.container {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
}
.row { display: flex; flex-wrap: wrap; }
/* .col-10.offset-2 → 10 columns wide, pushed right by 2 columns. */
.col-10 { position: relative; width: 100%; flex: 0 0 83.3333%; max-width: 83.3333%; }
.offset-2 { margin-left: 16.6667%; }

/* ============================================================================
   1. STAGE — the vertical scroll viewport
   ----------------------------------------------------------------------------
   .module--history clips to one screen; #fullpage-history is the tall stack of
   sections that the controller slides up/down with translate3d(0, -Y, 0).
   ============================================================================ */
.module.module--history {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-black);
}
#fullpage-history {
  position: relative;
  z-index: 9;
  /* translate3d keeps the move on the compositor (smooth). The controller sets
     the transition on/off so resizes can jump without animating. */
  transition: transform 1s ease;
  will-change: transform;
}

/* Every section is exactly one viewport tall (the footer opts out below). */
.section {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

/* ============================================================================
   2. HORIZONTAL SLIDES inside a decade section
   ----------------------------------------------------------------------------
   This is the part the paid scrollHorizontally extension drove. The markup is
   the same shape fullPage produces: an overflow-hidden .fp-slides wrapping a
   flex .fp-slidesContainer whose width the controller sets to N*100%. Each
   .slide is one viewport wide; the controller translates the container on X.
   ============================================================================ */
.fp-slides { position: relative; height: 100%; overflow: hidden; }
.fp-slidesContainer {
  position: relative;
  height: 100%;
  display: flex;
  /* width + transform are set by script.js (N*100% and translateX in px) */
  transition: transform 1s ease;
  will-change: transform;
}
.slide {
  position: relative;
  height: 100%;
  flex: 0 0 auto;          /* width (100/N)% is set per-slide by the controller */
  /* The original vertically centres with display:table/table-cell. As a flex
     child that is fragile, so we centre with flex instead — same result. */
  display: flex;
  align-items: center;
  /* Each slide fades in as it becomes .active — the polish the horizontal
     transition rides on. */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.slide.active { opacity: 1; }
.slide > .container { width: 100%; }

/* ============================================================================
   3. YEAR WHEEL  (#year-menu)
   ----------------------------------------------------------------------------
   A native, scroll-snapping wheel picker in the empty left gutter. The active
   decade settles in the centre selection band while nearby years tilt and fade.
   JS only paints the depth effect and keeps timeline navigation in sync.
   ============================================================================ */
.module--history .year-wheel {
  --year-enter-y: 46px;
  --year-row: 44px;
  --year-step: 46px;
  --year-wheel-height: min(512px, calc(100svh - 112px));
  position: fixed;
  top: 50%;
  left: var(--side-margin);
  transform: translateY(-50%);
  z-index: 999;
  width: 50px;
  height: var(--year-wheel-height);
  overflow: hidden;
  isolation: isolate;
  perspective: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.module--history .year-wheel.visible { opacity: 1; pointer-events: auto; }
.module--history .year-wheel::before {
  position: absolute;
  top: 50%;
  right: 2px;
  left: 2px;
  z-index: 2;
  height: var(--year-row);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard);
}
.module--history .year-wheel::after {
  position: absolute;
  top: 50%;
  right: 2px;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-on-dark);
  box-shadow: 0 0 0 4px rgba(224, 96, 106, 0.12);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.module--history #year-menu {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-block: calc((var(--year-wheel-height) - var(--year-step)) / 2);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scroll-padding-block: calc((var(--year-wheel-height) - var(--year-step)) / 2);
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.module--history #year-menu::-webkit-scrollbar { display: none; }
.module--history #year-menu.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.module--history #year-menu:focus-visible {
  outline: none;
}
.module--history .year-wheel:focus-within::before {
  border-color: rgba(255, 255, 255, 0.52);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
}
.module--history .year-wheel:focus-within::after {
  box-shadow: 0 0 0 6px rgba(224, 96, 106, 0.16);
}
.module--history #year-menu li {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--year-step);
  margin: 0;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  filter: blur(var(--year-blur, 0));
  pointer-events: none;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  transform: rotateX(var(--year-tilt, 0deg)) scale(var(--year-scale, 1));
  transform-origin: center;
  transition:
    opacity var(--dur-fast) linear,
    filter var(--dur-fast) linear;
  will-change: transform, opacity, filter;
}
.module--history #year-menu.is-wheel-ready li { opacity: var(--year-opacity, 0); }
.module--history #year-menu li.is-wheel-near { pointer-events: auto; }
.module--history #year-menu.is-entering li span {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, var(--year-enter-y), 0);
  transition: none;
}
.module--history #year-menu li span {
  display: flex;
  width: 100%;
  height: var(--year-row);
  min-width: var(--year-row);
  min-height: var(--year-row);
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  filter: blur(0);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    color var(--dur-base) var(--ease-standard),
    filter var(--dur-slow) var(--ease-standard),
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-reveal) var(--ease-emphasis);
}
/* The selected year is the sharp, bright row inside the two guide lines. */
.module--history #year-menu li.active,
.module--history #year-menu li:hover { font-weight: var(--weight-semibold); }
.module--history #year-menu li:not(.active):hover span { color: var(--accent-on-dark); }

@media (hover: hover) and (pointer: fine) {
  .module--history .year-wheel.visible,
  .module--history .year-wheel.visible #year-menu,
  .module--history .year-wheel.visible li { cursor: ns-resize; }
  .module--history .year-wheel.visible:hover::before {
    border-color: rgba(255, 255, 255, 0.42);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  }
  .module--history .year-wheel.visible:hover::after {
    box-shadow: 0 0 0 6px rgba(224, 96, 106, 0.14);
    transform: translateY(-50%) scale(1.25);
  }
}

.year-wheel-guide {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 1000;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(15, 15, 15, 0.76);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-xs);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 10px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-out);
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
.year-wheel-guide.visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
.year-wheel-guide.is-dismissed {
  opacity: 0;
  transform: translate3d(-50%, 10px, 0);
}
.year-wheel-guide svg {
  width: 16px;
  height: 16px;
  animation: year-guide-nudge 1.8s var(--ease-standard) infinite;
}
.year-wheel-guide__desktop { display: none; }

@keyframes year-guide-nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

/* ============================================================================
   4. SLIDE-NAV DOTS  (.fp-slidesNav) — per-decade pager, bottom-left
   ============================================================================ */
.fp-slidesNav {
  position: absolute;
  left: calc(50% - 612px);
  bottom: 69px;
  z-index: 4;
  opacity: 0;                    /* hidden until its section is active */
  transition: opacity 1.2s ease;
}
.section.active .fp-slidesNav { opacity: 1; }
.fp-slidesNav ul { display: flex; }
.fp-slidesNav li { position: relative; width: 44px; height: 44px; margin-right: 4px; }
.fp-slidesNav li a { display: block; width: 100%; height: 100%; position: relative; cursor: pointer; }
/* the dot itself */
.fp-slidesNav li a span {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  background: #fff; border-radius: 50%;
}
/* active dot gets a ring drawn with an ::after circle */
.fp-slidesNav li a.active span::after {
  content: ""; position: absolute; top: -14px; left: -14px;
  width: 31px; height: 31px; border-radius: 50%; border: 1px solid grey;
}

/* ============================================================================
   5. SCROLL CUE (hero only) — rotated "scroll" label + growing line
   ============================================================================ */
.scroll-wrapper {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  transition: opacity 0.5s ease;
}
.scroll-wrapper.invisible { opacity: 0; pointer-events: none; }
.scroll-wrap { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.scroll-wrap .scroll-label {
  font-size: 16px; line-height: 160%;
  transform: rotate(-90deg); display: inline-block; margin-bottom: 20px;
}
.scroll-wrap .scroll-track {
  position: relative;
  width: 1px;
  height: 80px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}
.scroll-wrap .scroll-track::after {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  content: "";
  transform: translateY(-100%);
  animation: grow-line 3s linear infinite;
}
@keyframes grow-line { to { transform: translateY(100%); } }
.scroll-wrap.light .scroll-label { color: var(--color-white); }

/* ============================================================================
   6. SLIDE CONTENT — shared + hero
   ============================================================================ */
.history-slide { position: relative; color: var(--color-white); }

/* --- HERO ---------------------------------------------------------------- */
.history-slide.slide--hero {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between;
}
.history-slide.slide--hero .hero-header { position: relative; height: 600px; }
.history-slide.slide--hero .img-wrap { position: absolute; inset: 0; z-index: -1; }
/* dark diagonal veil over the photo; the clip engine reads these two vars */
.history-slide.slide--hero .bg-layer {
  position: absolute; inset: 0;
  background-color: rgba(0, 0, 0, 0.42);
  --diagonal-top: 0;
  --diagonal-bottom: 100%;
}
.history-slide.slide--hero .container { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.history-slide.slide--hero .row { height: 100%; }
.history-slide.slide--hero .hero-text-wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.history-slide.slide--hero .breadcrumbs { display: flex; }
.history-slide.slide--hero .breadcrumbs li { position: relative; margin: 0 32px 16px 0; }
.history-slide.slide--hero .breadcrumbs li :is(a, span) {
  font-weight: var(--weight-normal); font-size: 12px; line-height: 140%;
  letter-spacing: 0.05em; text-transform: uppercase; color: #c0c0c0;
}
.history-slide.slide--hero .breadcrumbs li:not(:first-child)::after {
  content: "/"; position: absolute; left: -20px; top: 2px;
  transform: rotate(11deg); color: #fff;
}
.history-slide.slide--hero .title {
  font-size: 56px; line-height: 110%; color: var(--color-white); margin-bottom: 16px; font-weight: var(--weight-normal);
}
.history-slide.slide--hero .introtext {
  font-size: 16px; line-height: 200%; max-width: 510px;
  color: rgba(255, 255, 255, 0.8); margin-bottom: 24px;
}
.history-slide.slide--hero .hero-footer { display: flex; justify-content: center; padding-bottom: 24px; }
.history-slide.slide--hero .hero-footer .scroll-wrap { position: relative; right: 16px; }

/* ============================================================================
   7. DECADE COVER SLIDE  (.slide--decade) — giant year + two diagonal photos
   ============================================================================ */
.history-slide.slide--decade .title {
  font-size: 288px; line-height: 100%; letter-spacing: -0.04em; font-weight: var(--weight-normal);
}
.history-slide.slide--decade .introtext { font-size: 16px; line-height: 200%; }
/* the two photos live in a box pinned to the right, BEHIND the number (z-index -1) */
.history-slide.slide--decade .image-wrap {
  position: absolute; right: 0; top: 0; height: 370px; width: 545px; z-index: -1;
}
.history-slide.slide--decade .image-wrap .img-wrap.img--front {
  position: absolute; right: 0; top: 0; height: 280px; width: 275px;
  --diagonal-top: 0; --diagonal-bottom: 100px;
}
.history-slide.slide--decade .image-wrap .img-wrap.img--back {
  position: absolute; left: 0; bottom: 0; height: 274px; width: 364px;
  --diagonal-top: 140px; --diagonal-bottom: 0;
}

/* ============================================================================
   8. MILESTONE SLIDE  (.slide--image) — text left, diagonal photo right
   ============================================================================ */
.history-slide.slide--image { display: flex; align-items: center; }
.history-slide.slide--image .text-wrap { max-width: 384px; margin-right: 115px; }
.history-slide.slide--image .text-wrap .pretitle { font-size: 20px; line-height: 140%; margin-bottom: 16px; }
.history-slide.slide--image .text-wrap .title { font-size: 40px; line-height: 120%; margin-bottom: 16px; font-weight: var(--weight-normal); }
.history-slide.slide--image .text-wrap .introtext {
  font-size: 16px; line-height: 200%; color: #929292; max-width: 510px; margin-bottom: 40px;
}
.history-slide.slide--image .image-wrap { width: 700px; height: 300px; position: relative; }
.history-slide.slide--image .image-wrap .img-wrap {
  height: 100%;
  /* pull the photo toward the right edge of the screen, past the gutter */
  margin-right: calc(-1 * var(--wide-margin) - var(--half-gutter));
  --diagonal-top: 100%;   /* % resolves against the element's own height in JS */
  --diagonal-bottom: 0;
}

/* ---- image box shared: cover-fill, and the clip engine's transition -------- */
.img-wrap { position: relative; overflow: hidden; }
.img-wrap img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center;
  transition: all 0.8s ease;
}

/* ============================================================================
   9. FOOTER (last section, auto height)
   ============================================================================ */
.section.section--footer { height: auto; min-height: 100svh; display: flex; align-items: center; }
#footer { width: 100%; }
.footer-inner { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--side-margin); }
.footer-inner .claim { font-size: 56px; line-height: 110%; }
.footer-inner .foot-note { margin-top: 24px; color: #929292; font-size: 14px; }

/* ============================================================================
   10. RESPONSIVE — the key breakpoints from the theme
   ----------------------------------------------------------------------------
   Below 992px the original stacks each slide vertically (text under image) and
   shrinks the big type. The year menu and dot pager move to the side gutter.
   ============================================================================ */
@media (max-width: 1249px) {
  .fp-slidesNav { left: var(--side-margin); }
}
@media (min-width: 801px) {
  .module--history .year-wheel {
    --year-enter-y: 52px;
    --year-row: 48px;
    --year-step: 52px;
    --year-wheel-height: min(568px, calc(100svh - 160px));
    width: 80px;
  }
  .year-wheel-guide__desktop { display: inline; }
  .year-wheel-guide__mobile { display: none; }
}
@media (min-width: 1250px) {
  .module--history .year-wheel { left: calc(50% - 612px); }
}
@media (max-width: 991px) {
  .history-slide.slide--image { flex-direction: column-reverse; align-items: flex-start; justify-content: center; }
  .history-slide.slide--image .text-wrap { margin: 40px 0 0; max-width: none; }
  .history-slide.slide--image .image-wrap { width: 100%; height: auto; aspect-ratio: 16 / 7; }
  .history-slide.slide--image .image-wrap .img-wrap { margin-right: 0; }
  .history-slide.slide--decade { display: flex; flex-direction: column-reverse; }
  .history-slide.slide--decade .title { font-size: 200px; }
  .history-slide.slide--decade .image-wrap { position: relative; width: 100%; height: 300px; }
}
@media (max-width: 800px) {
  .history-slide.slide--hero .title { font-size: 36px; }
  .history-slide.slide--image .text-wrap .title { font-size: 26px; }
  .history-slide.slide--decade .title { font-size: 25vw; }
  .fp-slidesNav { display: none; }
  .footer-inner .claim { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  #year-menu { scroll-behavior: auto; }

  #fullpage-history,
  .fp-slidesContainer,
  .year-wheel,
  #year-menu li,
  #year-menu li span,
  .year-wheel-guide,
  .fp-slidesNav,
  .slide,
  .img-wrap img,
  .scroll-wrapper {
    transition-duration: 0.01ms !important;
  }

  .scroll-wrap .scroll-track::after {
    animation: none;
  }

  .year-wheel-guide svg { animation: none; }
}