/* ==========================================================================
   Universal Agriculture — UAE branch : CINEMATIC single-page theme
   Loaded on top of styles.css. Deep-green + harvest-gold, scroll-driven,
   Three.js depth. Reuses the brand --green-* vars from styles.css so it
   stays consistent; adds gold/sand + a darker cinematic canvas on top.
   Fully bilingual (EN/AR) & RTL-aware via logical properties.
   ========================================================================== */

:root {
  /* --- cinematic canvas (darker, greener than the base theme) --- */
  --cine-0: #060d08;         /* deepest — page base */
  --cine-1: #0a1610;         /* section tint */
  --cine-2: #0e1d14;         /* raised surface */
  --cine-glow: rgba(52,168,83,.16);

  /* --- harvest gold / desert sand accent (the "Emirati golden hour") --- */
  --gold:      #dbb765;      /* luminous gold on dark */
  --gold-600:  #c79a3e;
  --gold-700:  #a16207;      /* WCAG-safe on light surfaces */
  --sand:      #e9dcbe;
  --gold-soft: rgba(219,183,101,.14);
  --hair:      rgba(219,183,101,.24);   /* gold hairline rules */

  /* --- cinematic typography --- */
  --ff-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --cine-maxw: 1200px;
  --ease-cine: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Base overrides for the cinematic page (scoped to .cine on <body>)
   ========================================================================== */
body.cine {
  background: var(--cine-0);
  color: var(--body);
  font-family: var(--ff-ui);
  overflow-x: hidden;
}
html[lang="ar"] body.cine { font-family: var(--ff-ar); }

/* Serif display face for English headings; Arabic keeps Tajawal (no Playfair
   Arabic glyphs). Apply via .ff-display so it's opt-in and predictable. */
.ff-display { font-family: var(--ff-display); font-weight: 500; letter-spacing: -.015em; }
html[lang="ar"] .ff-display { font-family: var(--ff-ar); font-weight: 800; letter-spacing: 0; }

.cine h1, .cine h2, .cine h3 { color: var(--ink); }

/* wide-tracked uppercase label ("eyebrow" in the cinematic language) */
.cine-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-ui);
  font-size: .74rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 22px;
}
/* Arabic is cursive — letter-spacing breaks the joins and the Latin UI font
   has no Arabic glyphs. Use Tajawal with normal spacing so it reads cleanly. */
html[lang="ar"] .cine-eyebrow { font-family: var(--ff-ar); letter-spacing: normal; font-weight: 700; }
.cine-eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7;
}

/* thin gold monogram diamond used before the wordmark / labels */
.mono-mark { display: inline-block; width: 1em; height: 1em; color: var(--gold);
  vertical-align: -.08em; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.cine-wrap { width: 100%; max-width: var(--cine-maxw); margin-inline: auto; padding-inline: 26px; }

.cine-section { position: relative; padding-block: clamp(90px, 13vh, 170px); }
.cine-section--tint { background:
  radial-gradient(120% 80% at 50% 0%, var(--cine-glow), transparent 60%), var(--cine-1); }
.cine-section--pad-lg { padding-block: clamp(120px, 18vh, 240px); }

/* thin gold hairline divider between chapters */
.cine-rule { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--hair) 20%, var(--hair) 80%, transparent); }

/* ==========================================================================
   Scroll reveal (vanilla JS toggles .is-in). Falls back to visible w/o JS
   and under prefers-reduced-motion.
   ========================================================================== */
.cine-reveal { opacity: 0; transform: translateY(26px); transition:
  opacity .9s var(--ease-cine), transform .9s var(--ease-cine); will-change: opacity, transform; }
.cine-reveal.is-in { opacity: 1; transform: none; }
.no-js .cine-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cine-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   WELCOME GATE — Emirati greeting on first visit (homepage, once per session).
   Hidden by default; cinematic.js adds .is-open, then .is-closing to dismiss.
   ========================================================================== */
.welcome-gate {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; text-align: center;
  padding: 24px; overflow: hidden;
}
.welcome-gate.is-open { display: flex; }
.welcome-gate__bg {
  position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .8s ease;
  /* transparent: the hero shows through, softly dimmed + blurred so the
     greeting stays legible over the moving palm footage */
  background: radial-gradient(120% 90% at 50% 45%, rgba(6,13,8,.40), rgba(6,13,8,.66));
  -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
}
.welcome-gate.is-open .welcome-gate__bg { opacity: 1; }
.welcome-gate__inner { position: relative; z-index: 1; max-width: 780px; }

.welcome-orn { display: block; color: var(--gold); width: clamp(180px, 40vw, 260px); margin: 0 auto 26px;
  opacity: 0; transform: scale(.6); transition: opacity .7s ease .15s, transform .7s var(--ease-cine) .15s; }
.welcome-gate.is-open .welcome-orn { opacity: .92; transform: scale(1); }
.welcome-orn svg { width: 100%; height: auto; display: block; }

.welcome-hello {
  font-family: var(--ff-ar); font-weight: 800; direction: rtl;
  font-size: clamp(2.8rem, 12vw, 6.2rem); line-height: 1.32; margin: 0;
  /* extra bottom room so the ع/ج descender stays inside the background-clip fill */
  padding-bottom: .16em;
  background: linear-gradient(100deg, var(--gold-600) 0%, #fff4d6 22%, var(--gold) 42%, var(--gold-600) 66%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 34px rgba(219,183,101,.35));
  display: inline-block;
}
/* "written in gold": the greeting is penned right→left (Arabic direction) with a
   travelling gold nib glint, then settles into the shimmer. */
.welcome-penned { position: relative; display: block; margin-inline: auto; max-width: 100%;
  width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; }
.welcome-penned::after {
  content: ""; position: absolute; top: 2%; bottom: 20%; width: 3px; left: 100%;
  border-radius: 3px; background: linear-gradient(#fff7e0, var(--gold));
  box-shadow: 0 0 18px 5px rgba(219,183,101,.6); opacity: 0; pointer-events: none;
}
/* greeting: penned first (right→left), then shimmer */
.welcome-gate.is-open .welcome-hello {
  animation: penned-write 1.7s var(--ease-cine) .35s both,
             welcome-shimmer 3.4s linear 2.25s infinite;
}
.welcome-gate.is-open .welcome-penned--hello::after {
  animation: penned-glint 1.7s var(--ease-cine) .35s both;
}
/* sub line: penned second, once the greeting is written */
.welcome-gate.is-open .welcome-sub {
  animation: penned-write 1.1s var(--ease-cine) 2.2s both;
}
.welcome-gate.is-open .welcome-penned--sub::after {
  animation: penned-glint 1.1s var(--ease-cine) 2.2s both;
}
@keyframes penned-write {
  from { clip-path: inset(-12% 0% -12% 100%); }
  to   { clip-path: inset(-12% 0% -12% 0%); }
}
@keyframes penned-glint {
  0%   { left: 100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 0%; opacity: 0; }
}
@keyframes welcome-shimmer { to { background-position: -220% 0; } }

.welcome-sub {
  font-family: "Aref Ruqaa", var(--ff-ar); font-weight: 400; direction: rtl;
  font-size: clamp(1.5rem, 6vw, 2.9rem); color: var(--sand); margin: 6px 0 0; line-height: 1.4;
  display: inline-block;
}
.welcome-penned--sub { margin-top: 6px; }

.welcome-gloss { display: block; font-family: var(--ff-ui); color: var(--muted);
  font-size: .95rem; letter-spacing: .04em; margin-top: 22px;
  opacity: 0; transition: opacity .8s ease 3.3s; }
.welcome-gate.is-open .welcome-gloss { opacity: 1; }

.welcome-enter {
  margin-top: 28px; font: inherit; font-family: var(--ff-ui); font-weight: 600; cursor: pointer;
  color: var(--gold); background: transparent; border: 1px solid rgba(219,183,101,.5);
  border-radius: 999px; padding: 11px 28px; letter-spacing: .06em;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease 3.5s, transform .8s ease 3.5s, background .2s, border-color .2s;
}
.welcome-gate.is-open .welcome-enter { opacity: 1; transform: none; }
.welcome-enter:hover { background: rgba(219,183,101,.12); border-color: var(--gold); }

/* smooth dissolve into the site on entering */
.welcome-gate.is-closing .welcome-gate__bg { opacity: 0; transition: opacity .9s ease; }
.welcome-gate.is-closing .welcome-gate__inner {
  opacity: 0; transform: translateY(-6px) scale(1.02);
  transition: opacity .8s ease, transform .9s var(--ease-cine);
}

@media (prefers-reduced-motion: reduce) {
  .welcome-orn, .welcome-hello, .welcome-sub, .welcome-gloss, .welcome-enter, .welcome-gate__bg {
    transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important;
  }
  /* no penning animation → show both lines fully, hide the moving nib */
  .welcome-hello, .welcome-sub { clip-path: none !important; }
  .welcome-penned::after { display: none; }
}

/* ==========================================================================
   HERO — full-viewport palm video emerging from haze
   ========================================================================== */
.cine-hero {
  position: relative; min-height: 100svh; min-height: 100vh;
  display: grid; align-items: center; overflow: hidden;
  background: var(--cine-0);
}
.cine-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%; z-index: 0;
  /* start hazed-out; JS lifts the haze as it plays / on scroll */
  transform: scale(1.08);
}
/* cinematic grade: darken edges + warm the light, keep text readable */
.cine-hero__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 8%, transparent 30%, rgba(6,13,8,.55) 78%, rgba(6,13,8,.92) 100%),
    linear-gradient(180deg, rgba(6,13,8,.55) 0%, rgba(6,13,8,.15) 32%, rgba(6,13,8,.5) 70%, var(--cine-0) 100%);
}
/* drifting haze that lifts on load (the "emerge from fog" effect) */
.cine-hero__haze {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 45%, rgba(233,220,190,.5), rgba(233,220,190,0) 70%);
  opacity: .9; transition: opacity 2.6s ease; mix-blend-mode: screen;
}
.cine-hero.is-revealed .cine-hero__haze { opacity: 0; }
.cine-hero.is-revealed .cine-hero__video { transform: scale(1); transition: transform 3s var(--ease-cine); }

.cine-hero__inner { position: relative; z-index: 2; }
.cine-hero__title {
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.02; color: #fff;
  margin: 0 0 22px; max-width: 15ch; text-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.cine-hero__title .accent { color: var(--gold); font-style: italic; }
html[lang="ar"] .cine-hero__title .accent { font-style: normal; }
.cine-hero__lead {
  font-family: var(--ff-ui); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,.86); max-width: 52ch; margin: 0 0 34px; line-height: 1.7;
}
html[lang="ar"] .cine-hero__lead { line-height: 1.95; }
.cine-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* scroll cue at the bottom of the hero */
.scroll-cue {
  position: absolute; z-index: 2; bottom: 26px; inset-inline-start: 50%;
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  gap: 10px; color: rgba(255,255,255,.7); font-family: var(--ff-ui);
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
}
html[dir="rtl"] .scroll-cue { transform: translateX(50%); }
.scroll-cue__line { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent);
  position: relative; overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; inset-inline: 0; top: -50%; height: 50%;
  background: var(--gold); animation: cue-fall 2.2s var(--ease-cine) infinite;
}
@keyframes cue-fall { 0% { top: -50%; } 60%,100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue__line::after { animation: none; } }

/* ==========================================================================
   Buttons — cinematic variants (build on base .btn)
   ========================================================================== */
.cine .btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-600));
  color: #1a1205; box-shadow: 0 10px 34px rgba(219,183,101,.28); font-weight: 700;
}
.cine .btn-gold:hover { color: #0f0b02; box-shadow: 0 14px 42px rgba(219,183,101,.42); }
.cine .btn-line {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cine .btn-line:hover { border-color: var(--gold); color: var(--gold); background: rgba(219,183,101,.08); }

/* ==========================================================================
   Cinematic header — (site.js injects .site-header; restyled under .cine)
   Default (inner pages): solid frosted. Homepage (.cine-home): transparent
   over the hero, solidifies on scroll.
   ========================================================================== */
.cine .site-header {
  background: rgba(6,13,8,.82); border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .4s var(--ease-cine), border-color .4s, backdrop-filter .4s;
}
.cine-home .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.cine-home .site-header.scrolled {
  background: rgba(6,13,8,.82); border-bottom-color: var(--hair);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.cine .brand-name { letter-spacing: .02em; }
.cine .brand-sub { color: var(--gold); }
.cine .nav-links a.active { color: var(--gold); background: var(--gold-soft); }
.cine .nav-links a:hover { color: #fff; }
.cine .lang-toggle { color: var(--gold); border-color: rgba(219,183,101,.5); background: rgba(219,183,101,.08); }
.cine .lang-toggle:hover { background: rgba(219,183,101,.16); }

/* ==========================================================================
   INNER PAGES — light cinematic touch over the existing styles.css components
   (about, salt-fighter, results, contact …). No 3D / video here; just the
   shared palette, serif headings, and gold accents so they feel like one site.
   ========================================================================== */
/* serif display headings (Arabic keeps Tajawal — no Playfair Arabic glyphs) */
body.cine h1, body.cine h2 { font-family: var(--ff-display); font-weight: 500; letter-spacing: -.015em; }
html[lang="ar"] body.cine h1, html[lang="ar"] body.cine h2 { font-family: var(--ff-ar); font-weight: 800; letter-spacing: 0; }

/* gold eyebrow (was brand green) */
body.cine .eyebrow {
  color: var(--gold); background: var(--gold-soft); border-color: rgba(219,183,101,.32);
  letter-spacing: .2em;
}
/* Arabic eyebrow: Tajawal + no letter-spacing so the cursive joins stay intact */
html[lang="ar"] body.cine .eyebrow { font-family: var(--ff-ar); letter-spacing: normal; }
/* gold accents on the pieces that read as "highlights" */
body.cine .page-banner { border-bottom-color: var(--hair); }
body.cine .page-banner .crumbs a,
body.cine .card .card-link,
body.cine .split .visual { color: var(--gold); }
body.cine .stat-band .num { color: var(--gold); }
body.cine .card:hover { border-color: rgba(219,183,101,.42); }
body.cine .card .icon { color: var(--gold); background: var(--gold-soft); border-color: rgba(219,183,101,.3); }
body.cine .step .n { background: linear-gradient(135deg, var(--gold), var(--gold-600)); color: #1a1205; box-shadow: 0 4px 16px rgba(219,183,101,.3); }
/* gold primary buttons to match the homepage; ghost/light stay as-is */
body.cine .btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-600)); color: #1a1205;
  box-shadow: 0 8px 26px rgba(219,183,101,.28);
}
body.cine .btn-primary:hover { color: #0f0b02; box-shadow: 0 12px 34px rgba(219,183,101,.42); }
/* eyebrow with an inline override (hero used inline styles) still reads gold */
body.cine .eyebrow[style] { background: var(--gold-soft) !important; color: var(--gold) !important; }

/* ==========================================================================
   STATEMENT — big pinned line ("Operating efficiently…" equivalent)
   ========================================================================== */
.cine-statement { text-align: center; }
.cine-statement h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.18; max-width: 20ch;
  margin-inline: auto; color: var(--ink); font-weight: 500;
}
.cine-statement .dim { color: var(--muted); }
.cine-statement .gold { color: var(--gold); font-style: italic; }
html[lang="ar"] .cine-statement .gold { font-style: normal; }

/* Sheikh Zayed quote treatment */
.cine-statement .cine-quote {
  font-size: clamp(1.5rem, 3.1vw, 2.55rem); line-height: 1.5; max-width: 26ch;
}
html[lang="ar"] .cine-statement .cine-quote { line-height: 1.75; }
.cine-quote::before {
  content: "\201C"; display: block; margin: 0 auto .04em;
  font-family: Georgia, "Times New Roman", serif; color: var(--gold);
  font-size: 3.4em; line-height: .7; opacity: .5;
}
.cine-quote__by {
  display: block; margin-top: 26px; font-style: normal; font-family: var(--ff-ui);
  color: var(--gold); font-weight: 600; letter-spacing: .04em;
  font-size: clamp(.92rem, 1.5vw, 1.12rem);
}
html[lang="ar"] .cine-quote__by { font-family: var(--ff-ar); letter-spacing: normal; font-weight: 700; }

/* ==========================================================================
   3D SCENE — Three.js canvas layer behind a section of content
   ========================================================================== */
.cine-scene { position: relative; min-height: 100svh; display: grid; align-items: center;
  overflow: hidden; background: var(--cine-0); }
/* fallback sits BEHIND the canvas (shown when WebGL/JS unavailable) */
.cine-scene__fallback { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 50% at 50% 60%, var(--cine-glow), transparent 70%), var(--cine-0); }
.cine-scene__canvas { position: absolute; inset: 0; z-index: 1; display: block; }
.cine-scene__grade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(85% 65% at 50% 50%, transparent 46%, var(--cine-0) 94%); }
.cine-scene__inner { position: relative; z-index: 3; }
.cine-scene__inner .cine-statement h2 { text-shadow: 0 2px 30px rgba(0,0,0,.6); }

/* ==========================================================================
   PRODUCT PILLARS — cinematic numbered rows (Oil/Gas/Marine → our products)
   ========================================================================== */
.cine-pillars { display: grid; gap: 0; }
.cine-pillar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 4vw, 60px);
  padding-block: clamp(30px, 5vw, 54px); border-top: 1px solid var(--hair); position: relative;
}
.cine-pillar:last-child { border-bottom: 1px solid var(--hair); }
.cine-pillar__no { font-family: var(--ff-ui); font-size: .8rem; font-weight: 600;
  letter-spacing: .2em; color: var(--gold); }
.cine-pillar__title { font-size: clamp(1.5rem, 3.2vw, 2.6rem); margin: 0; color: var(--ink);
  transition: color .3s, transform .5s var(--ease-cine); }
.cine-pillar__desc { font-family: var(--ff-ui); color: var(--muted); margin: 8px 0 0;
  max-width: 46ch; font-size: .98rem; }
.cine-pillar__go { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--hair); display: grid; place-items: center; color: var(--gold);
  transition: background .3s, border-color .3s, transform .3s; }
.cine-pillar__go svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
html[dir="rtl"] .cine-pillar__go svg { transform: scaleX(-1); }
.cine-pillar:hover .cine-pillar__title { color: var(--gold); }
.cine-pillar:hover .cine-pillar__go { background: var(--gold); border-color: var(--gold);
  color: #1a1205; transform: translateX(4px); }
html[dir="rtl"] .cine-pillar:hover .cine-pillar__go { transform: translateX(-4px); }
@media (max-width: 720px) {
  .cine-pillar { grid-template-columns: auto 1fr; gap: 16px 20px; }
  .cine-pillar__go { grid-column: 2; justify-self: start; width: 44px; height: 44px; }
}

/* ==========================================================================
   STATS — cinematic count-up band
   ========================================================================== */
.cine-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); }
.cine-stat { text-align: center; position: relative; }
.cine-stat + .cine-stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 12%;
  height: 76%; width: 1px; background: var(--hair); }
.cine-stat__num { font-family: var(--ff-display); font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--gold); line-height: 1; font-weight: 500; }
html[lang="ar"] .cine-stat__num { font-family: var(--ff-ar); font-weight: 800; }
.cine-stat__lbl { font-family: var(--ff-ui); color: var(--muted); font-size: .9rem; margin-top: 10px; }
/* long phrase (e.g. the Arabic MENA expansion) scales down + wraps to fit */
.cine-stat__num .stat-longword { font-size: clamp(1rem, 2.3vw, 1.5rem); line-height: 1.35;
  display: inline-block; font-weight: 700; }
@media (max-width: 760px) {
  .cine-stats { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }
  .cine-stat:nth-child(odd)::before { display: none; }
}

/* ==========================================================================
   RESULTS — before/after comparison slider
   ========================================================================== */
.cine-ba { position: relative; max-width: 960px; margin-inline: auto; border-radius: 16px;
  overflow: hidden; border: 1px solid var(--hair); aspect-ratio: 16 / 10; user-select: none;
  background: var(--cine-2); touch-action: pan-y; }
.cine-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cine-ba__after { z-index: 1; }
/* --split = handle distance from the reading-start edge (0=start,100=end).
   "before" fills the start-side portion so it sits under the Before tag. */
.cine-ba__before { z-index: 2; clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
html[dir="rtl"] .cine-ba__before { clip-path: inset(0 0 0 calc(100% - var(--split, 50%))); }
.cine-ba__tag { position: absolute; z-index: 3; top: 14px; font-family: var(--ff-ui);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px;
  border-radius: 999px; background: rgba(6,13,8,.6); color: #fff; backdrop-filter: blur(6px); }
.cine-ba__tag--before { inset-inline-start: 14px; }
.cine-ba__tag--after { inset-inline-end: 14px; color: var(--gold); }
/* inset-inline-start already maps to the reading-start edge in both dirs,
   which matches how --split is measured, so no RTL-specific override needed. */
.cine-ba__handle { position: absolute; z-index: 4; top: 0; bottom: 0; inset-inline-start: var(--split, 50%);
  width: 2px; background: var(--gold); margin-inline-start: -1px; cursor: ew-resize; }
.cine-ba__grip { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: #1a1205;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.cine-ba__grip svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ==========================================================================
   CTA — cinematic closing band
   ========================================================================== */
.cine-cta { text-align: center; position: relative; overflow: hidden; }
.cine-cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--ink); margin: 0 0 16px; }
.cine-cta p { font-family: var(--ff-ui); color: var(--muted); max-width: 52ch; margin: 0 auto 30px; }
.cine-cta__row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* section intro block shared by content sections */
.cine-intro { max-width: 62ch; }
.cine-intro.center { margin-inline: auto; text-align: center; }
.cine-intro h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 18px; }
.cine-intro p { font-family: var(--ff-ui); color: var(--muted); font-size: 1.05rem; margin: 0; }