/* ==========================================================================
   19 · THE APPROACH — cinematic night hero  (ADDITIVE: overrides nothing)
   --------------------------------------------------------------------------
   The one dark moment on a bone-paper site. The inversion is the point:
   a night approach over the Red Sea, which then resolves into the daylight
   editorial system the rest of the site is built in.

   Every rule here is scoped to .hero--night, so the existing .hero on any
   other page is untouched. The background is pure CSS, so the composition is
   complete and on-brand before a single byte of JavaScript runs — and stays
   complete if JS never runs at all.
   ========================================================================== */

.hero--night{
  --night-ink:#08100F;
  --night-deep:#0C2E2A;
  position:relative;
  min-height:clamp(620px,100svh,1000px);
  justify-content:center;
  padding-block:clamp(52px,7vh,92px) clamp(30px,4vw,54px);
  /* Dusk over the Red Sea: a cool, deep sky holding most of the frame, with
     the warmth held low and narrow at the waterline. The warm note is a thin
     band, not a wash — spread it and the picture goes muddy brown. */
  background:
    radial-gradient(70% 26% at 50% 80%, rgba(232,68,42,.26), transparent 70%),
    radial-gradient(100% 44% at 72% 26%, rgba(168,196,188,.08), transparent 72%),
    linear-gradient(180deg,
      #050C11 0%, #071720 26%, #0A2A2B 52%, #0E3A33 70%,
      #1E3028 84%, #2A2219 93%, #140F0C 100%);
  color:var(--bone);
  isolation:isolate;
}
[dir="rtl"] .hero--night{
  background:
    radial-gradient(70% 26% at 50% 80%, rgba(232,68,42,.26), transparent 70%),
    radial-gradient(100% 44% at 28% 26%, rgba(168,196,188,.08), transparent 72%),
    linear-gradient(180deg,
      #050C11 0%, #071720 26%, #0A2A2B 52%, #0E3A33 70%,
      #1E3028 84%, #2A2219 93%, #140F0C 100%);
}

/* film grain, one repeating data-URI, kept extremely faint. Sits above the
   gradient and below the plot so the sky never looks like a flat CSS ramp. */
.hero--night::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* A scrim over the foot of the frame. The city is drawn at full strength
   right to the bottom edge, which is correct for the picture but leaves the
   CTAs and the datum strip sitting on top of a field of lights. This lifts
   the text off the drawing without dimming the drawing itself. */
.hero--night::after{
  content:'';position:absolute;inset:auto 0 0 0;height:34%;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,16,16,0) 0%, rgba(7,16,16,.35) 42%, rgba(6,13,13,.72) 100%);
}
@media (max-width:900px){.hero--night::after{height:44%;}}

/* the plot itself */
.hero-plot{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;display:block;
  pointer-events:none;
}

/* ---------- type on the night plate ---------- */
.hero--night .hero-inner{z-index:3;}

.hero--night .hero-eyebrow{color:rgba(242,240,234,.62);}
.hero--night .hero-eyebrow .dot{color:var(--accent);}

/* The statement keeps its alternating left/right reading — the house
   concept — but the column is held clear of the tower so the type never
   fights the architecture for the same pixels. */
.hero--night .hero-h1{
  color:var(--bone);
  font-size:clamp(34px,5.6vw,84px);
  line-height:.88;letter-spacing:-.045em;
  max-width:62%;
}
.hero--night .hero-h1 .hl--out{
  color:transparent;
  -webkit-text-stroke:clamp(1px,.14vw,2px) rgba(242,240,234,.78);
}
@supports not (-webkit-text-stroke:1px red){
  .hero--night .hero-h1 .hl--out{color:rgba(242,240,234,.55);}
}

.hero--night .lede{color:rgba(242,240,234,.76);}
.hero--night .hero-foot{margin-top:clamp(20px,2.6vw,40px);}

/* The ghost word earns its place on the bone pages, where it is the only
   thing behind the type. Here the city is already the background, and two
   competing backgrounds is just noise — so the night hero drops it. */
.hero--night .hero-ghost{display:none;}

/* ---------- CTAs: on a dark plate the primary has to invert ----------
   Buttons in this system are filled by a ::before wipe panel at z-index:-1,
   not by their own background — so the inversion has to happen on that panel,
   the same way .cta-card does it. Setting `background` on the button itself
   paints behind the panel and does nothing. */
.hero--night .btn-dark{border-color:var(--bone);color:var(--ink);}
.hero--night .btn-dark::before{background:var(--bone);}
.hero--night .btn-dark:hover,
.hero--night .btn-dark:focus-visible{color:var(--bone);border-color:var(--bone);}
/* the secondary action is a text link, so it needs a real hit area:
   WCAG 2.5.8 wants 24px minimum and the bare text is ~20px tall */
.hero--night .link{
  color:var(--bone);
  display:inline-flex;align-items:center;min-height:28px;
}
.hero--night .link:hover{color:var(--accent);}
.hero--night :focus-visible{outline-color:var(--bone);}

.hero--night .hero-scroll{color:rgba(242,240,234,.58);z-index:3;}

/* ---------- the datum strip: where the scene hands off to the page ----------
   A thin instrument reading under the hero. It states the location in plain
   text, which is also the honest caption for the drawing above it. */
.hero-datum{
  position:relative;z-index:3;
  /* it is a <p>, so it inherits the 66ch reading measure — a full-width
     instrument strip needs the whole column */
  max-width:none;
  display:flex;flex-wrap:wrap;gap:6px clamp(14px,2.2vw,34px);
  align-items:baseline;
  margin-top:clamp(16px,2.2vw,30px);
  padding-top:14px;
  border-top:1px solid rgba(242,240,234,.16);
  font-family:var(--font-mono);font-size:var(--t--2);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,240,234,.52);
}
/* each fact is its own element, so it can be laid out instead of reflowing
   as one ragged run of text; the rule between them is drawn, not typed */
.hero-datum .d{display:inline-flex;align-items:baseline;white-space:nowrap;}
.hero-datum .d + .d::before{
  content:'/';margin-inline-end:clamp(14px,2.2vw,34px);
  color:var(--accent);opacity:.8;
}
.hero-datum b{
  color:var(--bone);font-weight:700;letter-spacing:.1em;margin-inline-end:.5em;
}

/* ---------- responsive ----------
   On a phone the plot crops toward the tower (handled in JS) and the type
   takes the full column, rather than shrinking the desktop composition
   until neither the words nor the city are legible. */
@media (max-width:900px){
  .hero--night{
    min-height:clamp(600px,96svh,900px);
    padding-block:clamp(76px,10vh,116px) clamp(40px,6vw,72px);
  }
  .hero--night .hero-h1{max-width:100%;font-size:clamp(30px,8.4vw,54px);}
  /* keep the strip clear of the floating chat launcher, and tight enough
     that five facts do not become four stacked lines on a phone */
  /* two tidy columns beats five facts reflowing into a ragged block, and
     the last row stays clear of the floating chat launcher */
  .hero-datum{
    display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;
    font-size:10px;letter-spacing:.08em;padding-inline-end:72px;
  }
  .hero-datum .d{white-space:normal;}
  .hero-datum .d + .d::before{content:none;}
  .hero-datum .d:nth-child(odd){border-inline-start:2px solid rgba(232,68,42,.55);padding-inline-start:8px;}
  .hero-datum .d:nth-child(even){border-inline-start:2px solid rgba(242,240,234,.18);padding-inline-start:8px;}
}
@media (max-width:480px){
  .hero--night .hero-h1{font-size:clamp(28px,8vw,46px);letter-spacing:-.035em;}
  .hero-datum{gap:6px 12px;font-size:9.5px;letter-spacing:.06em;}
}

/* ---------- motion accessibility ----------
   The engine already renders a settled, complete drawing under
   prefers-reduced-motion. These rules stop everything else in the hero
   from moving, including the grain and the scroll hint. */
@media (prefers-reduced-motion:reduce){
  .hero--night::before{opacity:.32;}
  .hero--night .hero-scroll span::before{animation:none;transform:scaleX(1);opacity:1;}
}

/* when the hero is off-screen or the tab is hidden, the engine adds
   .hero-paused — stop CSS work in here too, not just the canvas loop */
.hero--night.hero-paused .hero-scroll span::before{animation-play-state:paused;}

/* ---------- Arabic ----------
   Arabic needs room that tight Latin display tracking does not. Negative
   letter-spacing damages Arabic letterform joins, and a 0.88 line-height
   clips the descenders the script depends on, so the night hero sets its
   own metrics for RTL rather than inheriting the Latin ones. */
[dir="rtl"] .hero--night .hero-h1{
  font-size:clamp(28px,4.6vw,64px);
  line-height:1.26;
  letter-spacing:0;
  max-width:60%;
}
[dir="rtl"] .hero--night .lede{line-height:1.8;}
[dir="rtl"] .hero-datum{letter-spacing:.04em;}
@media (max-width:900px){
  [dir="rtl"] .hero--night .hero-h1{max-width:100%;font-size:clamp(24px,6.6vw,42px);}
}

/* `.hero-h1` is a flex column designed for the English page's hand-split
   <span> lines. The Arabic headline is one text node split at runtime by
   main.js, and inside a flex column that collapses to one word per line.
   Let the Arabic headline flow as a normal block instead. */
.hero--night .hero-h1--flow{display:block;}
[dir="rtl"] .hero--night .hero-h1--flow{max-width:74%;font-size:clamp(26px,3.9vw,54px);}
@media (max-width:900px){
  [dir="rtl"] .hero--night .hero-h1--flow{max-width:100%;font-size:clamp(23px,6vw,38px);}
}

/* ---------- the story strip: captions + chapter pager ----------
   The sculpture changes; the headline, lede and CTAs do not. Only this strip
   tracks the chapter, so nothing a visitor needs is locked behind the
   animation and the H1 stays stable for search. */
.hero-story{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);
  margin-top:clamp(18px,2.6vw,34px);
  flex-wrap:wrap;
  /* clear of the floating chat launcher in the corner */
  padding-inline-end:clamp(0px,6vw,96px);
}

.hero-captions{position:relative;flex:1 1 420px;min-height:2.6em;}
.hero-chapter{
  margin:0;max-width:62ch;
  font-size:var(--t--1);line-height:1.6;
  color:rgba(242,240,234,.60);
  opacity:0;transform:translateY(7px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  position:absolute;inset-inline-start:0;top:0;
  pointer-events:none;
}
.hero-chapter.is-active{opacity:1;transform:none;position:relative;}
.hero-chapter b{color:var(--bone);font-weight:600;}

/* Pager dots. The visible mark is small, but the BUTTON is 28px so the touch
   target clears WCAG 2.5.8 — the glyph is drawn with ::before inside it. */
.hero-pager{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.hero-dot{
  position:relative;width:28px;height:28px;padding:0;
  background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.hero-dot::before{
  content:'';width:9px;height:9px;
  border:1px solid rgba(242,240,234,.45);
  background:transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.hero-dot:hover::before{border-color:var(--bone);transform:scale(1.18);}
.hero-dot.is-active::before{background:var(--accent);border-color:var(--accent);}
.hero-dot:focus-visible{outline:2px solid var(--bone);outline-offset:2px;}

/* dwell ring on the active dot: a conic sweep showing time left in the
   chapter, so auto-advance is signalled rather than sprung on the reader */
.hero-dot.is-active::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:conic-gradient(rgba(232,68,42,.85) var(--p,0turn), rgba(242,240,234,.14) 0);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%);
  mask:radial-gradient(circle, transparent 60%, #000 62%);
  animation:heroDwell 7.2s linear infinite;
}
@keyframes heroDwell{from{--p:0turn}to{--p:1turn}}
@property --p{syntax:'<angle>';inherits:false;initial-value:0turn;}
/* the ring is part of the same gate as everything else */
.hero--night.hero-paused .hero-dot.is-active::after{animation-play-state:paused;}

@media (max-width:900px){
  .hero-story{gap:14px;margin-top:14px;}
  .hero-captions{flex:1 1 100%;min-height:3.4em;}
  .hero-chapter{font-size:12px;line-height:1.55;}
}

/* No auto-advance and no sweep for a reader who asked for stillness; the
   dots remain, so the chapters are still reachable by choice. */
@media (prefers-reduced-motion:reduce){
  .hero-dot.is-active::after{animation:none;background:none;}
  .hero-chapter{transition:none;}
}