/*
 * X0T — cinematic hero
 *
 * Scoped entirely to `.hero[data-cine="1"]`. The attribute is written by an
 * inline script inside the section itself, so without JavaScript nothing here
 * ever hides anything: the hero renders exactly as it did before.
 *
 * The motion is built from four ideas, each with a job:
 *   background   a slow settle from 1.06 → 1, so a slide change reads as a cut
 *                between shots rather than a cross-fade between images;
 *   headline     line-by-line mask reveal — the one move that carries the
 *                "premium" feel, and the reason the copy is split at all;
 *   supporting   a short staggered rise, fast enough to be readable at ~0.4s;
 *   visual       a wipe (clip-path) plus a settle, so the card is uncovered
 *                rather than faded in.
 *
 * Nothing loops. Everything runs once per slide and then stops.
 */

.hero[data-cine="1"] {
  --ci-in: cubic-bezier(.16, 1, .3, 1);
  --ci-out: cubic-bezier(.65, 0, .35, 1);
  --ci-line: .82s;
  --ci-step: 85ms;
}

/* --------------------------------------------------------------- stacking */

/* The background moves on its own layer, so the slide's overlay and copy have
   to be lifted above it explicitly rather than relying on source order. */
.hero[data-cine="1"] .hero-bgl {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  /* three inputs on one property: the entrance settle (--ci-bs), the pointer
     drift (--ci-px/py) and the scroll trail (--ci-sy). */
  transform: scale(var(--ci-bs, 1.06)) translate3d(var(--ci-px, 0px), calc(var(--ci-py, 0px) + var(--ci-sy, 0px)), 0);
  opacity: 0;
  transition:
    transform 1.5s var(--ci-in),
    opacity .9s var(--ci-in);
}

.hero[data-cine="1"] .hero-slide.is-play .hero-bgl {
  --ci-bs: 1;
  opacity: 1;
}

.hero[data-cine="1"] .hero-slide.has-overlay::before { z-index: 1; }
.hero[data-cine="1"] .hero-slide > .wrap { position: relative; z-index: 2; }

/* A slide leaves by dissolving in place — no sideways slide, which at this
   size read as a carousel rather than a cut. */
.hero[data-cine="1"] .hero-slide {
  transform: none;
  transition: opacity .7s var(--ci-out), visibility .7s;
}

.hero[data-cine="1"] .hero-slider[data-dir] .hero-slide { transform: none; }

/* --------------------------------------------------------------- headline */

.hero[data-cine="1"] h1 .hero-line {
  display: block;
  overflow: hidden;
  /* Arabic descenders and diacritics sit below the line box; give the mask a
     little room back or the reveal clips them. */
  padding-bottom: .32em;
  margin-bottom: -.32em;
}

.hero[data-cine="1"] h1 .hero-line-i {
  display: block;
  transform: translate3d(0, 105%, 0) skewY(2.5deg);
  opacity: 0;
  transition:
    transform var(--ci-line) var(--ci-in) calc(var(--ln, 0) * var(--ci-step) + 120ms),
    opacity var(--ci-line) var(--ci-in) calc(var(--ln, 0) * var(--ci-step) + 120ms);
}

.hero[data-cine="1"] .hero-slide.is-play h1 .hero-line-i {
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------- supporting */

.hero[data-cine="1"] .cx {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .7s var(--ci-in) var(--cd, 0ms),
    transform .7s var(--ci-in) var(--cd, 0ms);
}

.hero[data-cine="1"] .hero-slide.is-play .cx {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------- visual */

.hero[data-cine="1"] .hero-visual {
  /* RTL: uncover from the right, the side the eye is already on. */
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.05s var(--ci-in) 260ms;
}

.hero[data-cine="1"] .hero-slide.is-play .hero-visual { clip-path: inset(0 0 0 0); }

.hero[data-cine="1"] .hero-card {
  transform: scale(1.07) translate3d(var(--ci-cx, 0px), var(--ci-cy, 0px), 0);
  transition: transform 1.3s var(--ci-in) 260ms;
}

.hero[data-cine="1"] .hero-slide.is-play .hero-card { transform: scale(1) translate3d(var(--ci-cx, 0px), var(--ci-cy, 0px), 0); }

/* The idle float would fight the settle, so it only starts once the card has
   arrived — the JS adds .is-idle when the entrance timeline is done. */
.hero[data-cine="1"] .hero-card { animation: none; }

.hero[data-cine="1"] .hero-slide.is-idle .hero-card {
  animation: x0tHeroFloat 7s ease-in-out infinite;
  transition: transform .9s var(--ci-in);
}

/* --------------------------------------------------------------- scroll */

/* `--ci-sy` is written by the JS while the hero is on screen, so the background
   trails the page and leaving the section has depth. It feeds the transform
   above; only the hint lives here. */
.hero[data-cine="1"] .hero-bgl { will-change: transform; }

/* --------------------------------------------------------------- controls */

.hero[data-cine="1"] .hero-nav {
  transition:
    background .35s var(--ci-in),
    color .35s var(--ci-in),
    border-color .35s var(--ci-in),
    transform .45s var(--ci-in);
}

.hero[data-cine="1"] .hero-nav:hover,
.hero[data-cine="1"] .hero-nav:focus-visible { transform: translateY(-50%) scale(1.1); }

.hero[data-cine="1"] .hero-nav svg { transition: transform .45s var(--ci-in); }
.hero[data-cine="1"] .hero-nav.next:hover svg { transform: translateX(-3px); }
.hero[data-cine="1"] .hero-nav.prev:hover svg { transform: scaleX(-1) translateX(-3px); }

/* The active dot doubles as a countdown to the next slide — motion that says
   something instead of decorating. */
.hero[data-cine="1"] .hero-dot {
  position: relative;
  overflow: hidden;
  transition: width .45s var(--ci-in), background .35s var(--ci-in);
}

.hero[data-cine="1"] .hero-dot.is-active { width: 46px; background: var(--line); }

.hero[data-cine="1"][data-cine-auto="1"] .hero-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad);
  transform-origin: right center;
  transform: scaleX(0);
  animation: x0tDotPg var(--pg, 6s) linear forwards;
}

.hero[data-cine="1"][data-cine-auto="1"] .hero-slider:hover .hero-dot.is-active::after,
.hero[data-cine="1"][data-cine-auto="1"] .hero-slider:focus-within .hero-dot.is-active::after {
  animation-play-state: paused;
}

/* Autoplay off: the dot is simply filled, no countdown to show. */
.hero[data-cine="1"]:not([data-cine-auto="1"]) .hero-dot.is-active { background: var(--grad); }

@keyframes x0tDotPg {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --------------------------------------------------------------- buttons */

.hero[data-cine="1"] .hero-cta .btn {
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ci-in), box-shadow .4s var(--ci-in), background .3s, color .3s, border-color .3s;
}

.hero[data-cine="1"] .hero-cta .btn svg { transition: transform .4s var(--ci-in); }
.hero[data-cine="1"] .hero-cta .btn:hover svg { transform: translateX(-4px); }
.hero[data-cine="1"] .hero-cta .btn:active { transform: translateY(0) scale(.985); }

/* --------------------------------------------------------------- reduced */

@media (prefers-reduced-motion: reduce) {
  .hero[data-cine="1"] .hero-bgl,
  .hero[data-cine="1"] h1 .hero-line-i,
  .hero[data-cine="1"] .cx,
  .hero[data-cine="1"] .hero-visual,
  .hero[data-cine="1"] .hero-card {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none;
  }
  .hero[data-cine="1"] .hero-dot.is-active::after { animation: none; transform: scaleX(1); }
}