/* ============================================================================
   SADER — s-hero
   The opening full-bleed cinematic video hero. Dark world (data-theme="dark").
   Reuses .eyebrow / .btn / .media-overlay / .reveal / [data-stagger] /
   [data-parallax]. Bespoke CSS here is layout-only. Logical properties only.
   ============================================================================ */

.s-hero {
  /* Full viewport. Override the default .section vertical rhythm. */
  padding-block: 0;
  min-block-size: 100vh;
  min-block-size: 100svh;
  display: flex;
  align-items: stretch;           /* inner fills the full hero height */
  overflow: hidden;
  isolation: isolate;

  /* Ink-brown ground BEFORE the video paints — no white flash, ever. */
  background-color: var(--ink-brown);

  /* Slow, confident entrance for this section's reveals (~800ms feel). */
  --dur-reveal: var(--dur-slow);
}

/* ---- Background media ----------------------------------------------------- */
.s-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--ink-brown);
}

.s-hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  /* Over-scale slightly so the parallax drift never exposes an edge. */
  scale: 1.08;
  /* Visible by default (no-JS / reduced motion). A gentle fade-in is layered
     on only when motion is allowed AND JS is present (see motion block). */
  opacity: 1;
}

/* Layered legibility wash, fully tokenised (no raw color literals).
   Layer 1: a quiet directional pull FROM the inline-start edge so the
            start-anchored headline stays crisp without darkening the frame.
   Layer 2: a soft espresso vignette at top + bottom.
   Layer 3: the system's own espresso → transparent media gradient.
   `--_to` swaps under RTL so the wash always reads from the inline-start. */
.s-hero__overlay {
  --_to: right;
  --_ink: var(--ink-brown);
  background:
    linear-gradient(
      to var(--_to),
      color-mix(in srgb, var(--_ink) 62%, transparent) 0%,
      color-mix(in srgb, var(--_ink) 18%, transparent) 46%,
      transparent 78%),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--_ink) 36%, transparent) 0%,
      transparent 32%,
      transparent 74%,
      color-mix(in srgb, var(--_ink) 30%, transparent) 100%),
    var(--overlay-grad);
}
[dir="rtl"] .s-hero__overlay { --_to: left; }

/* ---- Foreground ----------------------------------------------------------- */
.s-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  inline-size: 100%;
  /* Full-height column: the copy (eyebrow + title) centres in the middle while
     the CTA is the last child and settles at the bottom. */
  display: flex;
  flex-direction: column;
  /* Generous breathing room above the fold; clears the transparent header. */
  padding-block-start: calc(var(--header-h) + var(--space-9));
  padding-block-end: clamp(var(--space-7), 8vh, var(--space-10));
}

.s-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Grow to fill the space above the CTA, but top-anchor the eyebrow + title so
     the eyebrow starts at a fixed offset from the top — shared across all heroes
     (= the inner's padding-block-start: header-h + space-9). */
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  max-inline-size: 22ch;
  text-align: start;
}

.s-hero__kicker {
  color: var(--accent);
  font-size: clamp(0.8125rem, 0.7rem + 0.6vw, 1.0625rem);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wider);
}

.s-hero__headline {
  margin: 0;
  font-family: var(--font-display);
  /* Cap by viewport height so the Discover button is always fully in-view. */
  font-size: clamp(2rem, min(1.6rem + 7.8vw, 10.5svh), 8.5rem);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text);                 /* warm off-white via dark theme */
  text-wrap: balance;
}
/* The single brass accent word (italic in Latin, upright in Arabic). */
.s-hero__headline em {
  font-style: italic;
  font-weight: var(--fw-bold);
  color: var(--accent);
}
[dir="rtl"] .s-hero__headline em { font-style: normal; }

/* Arabic homepage: mirror the English hero exactly — the copy (eyebrow, title,
   CTA) stays bottom-anchored via the shared .s-hero (align-items:flex-end), so
   the اكتشف button lands at the bottom-INLINE-START (= bottom-right under RTL),
   the mirror of the Latin "Discover". We only retune the typography here:
   a composed scale SMALLER than the Latin ramp (Almarai reads larger per px, so
   the English hero stays the bigger of the two), at the regular weight, with
   only the <em> accent word in bold. The authored <br>s build a taller, 3-line
   title so its height reads close to the wordier English headline. */
[dir="rtl"] .s-hero__copy { max-inline-size: none; }
[dir="rtl"] .s-hero__headline {
  font-size: clamp(1.875rem, 1.2rem + 3.6vw, 4.5rem);  /* < the Latin ramp */
  font-weight: var(--fw-regular);                      /* non-bold body of the title */
  line-height: 1.22;
  /* No white-space:nowrap here: the RTL copy has no 22ch cap, so the title
     wraps naturally — the authored <br> still sets the two desktop lines,
     and long lines reflow safely on narrow phones. */
}
/* Accent on the key word (القانون): BOLD, so it stands out the way the
   emphasised "Legal" does in the English hero (which uses italic + accent —
   but Arabic isn't italicised, so weight carries the emphasis here). */
[dir="rtl"] .s-hero__headline em {
  font-weight: 700;
  color: var(--accent);
}

.s-hero__actions {
  margin-block-start: var(--space-2);
}
.s-hero__cta {
  /* Slightly larger tap target than the default .btn for the hero CTA. */
  padding-block: var(--space-5);
  padding-inline: var(--space-8);
}

/* ---- Scroll cue ----------------------------------------------------------- */
.s-hero__scroll {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-end: clamp(var(--space-6), 4vh, var(--space-8));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-faint);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
[dir="rtl"] .s-hero__scroll { transform: translateX(50%); }
.s-hero__scroll:hover { color: var(--text-muted); }

.s-hero__scroll-label {
  line-height: 1;
}

/* A thin brass rule with a travelling highlight that descends — the cue. */
.s-hero__scroll-line {
  position: relative;
  inline-size: 1px;
  block-size: clamp(40px, 6vh, 64px);
  background-color: var(--line-brass);
  overflow: hidden;
}
.s-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -40%;
  block-size: 40%;
  background-color: var(--accent);
}

/* ---- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Gentle footage fade-in (JS present): start hidden, settle over the dark
     ground. Guarded so reduced motion / no-JS always shows the video. */
  .js-motion .s-hero__video {
    opacity: 0;
    animation: s-hero-footage var(--dur-slower) var(--ease) 120ms forwards;
  }

  /* The travelling brass highlight in the scroll cue. */
  .js-motion .s-hero__scroll-line::after {
    animation: s-hero-scroll-cue 2.4s var(--ease-in-out) infinite;
  }
}
@keyframes s-hero-footage {
  to { opacity: 1; }
}
@keyframes s-hero-scroll-cue {
  0%   { transform: translateY(-100%); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(350%); opacity: 0; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
  .s-hero { align-items: stretch; }
  .s-hero__copy { max-inline-size: 100%; }
  .s-hero__cta { inline-size: 100%; }
  .s-hero__scroll-label { display: none; }     /* keep just the brass cue line */
}

/* Tall / desktop: let the headline measure widen a touch for grandeur. */
@media (min-width: 1024px) {
  .s-hero__copy { max-inline-size: 18ch; }
}