/* CIDA Egypt — cinematic layer.
 *
 * Register: sovereign institutional. Motion is weight and light, never travel.
 * Logical properties throughout, so the Arabic RTL mirror is correct by
 * construction rather than by a second stylesheet.
 *
 * The hero entrance is PURE CSS. Keyframes end at the natural state and use
 * animation-fill-mode: backwards, so the pre-delay frame equals `from` and a
 * browser that never runs animations (reduced motion, no CSS animation
 * support, print) simply shows the finished layout. The previous build
 * animated the hero FROM hidden behind GSAP — an empty black page until the
 * script executed. That class of failure is designed out, not patched.
 */

/* ---------------------------------------------------------------------------
 * Fixed atmosphere, z-stacked behind all content.
 * ------------------------------------------------------------------------- */

#ambient, #glow, #vignette, #grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/*
 * The ground. Sections hand this layer a colour with data-ambient and the
 * handover is this transition — 2.4s of real background-color interpolation,
 * so a scroll never CUTS between two grounds, it passes through every value in
 * between. That single property is most of what "seamless" means here.
 */
#ambient {
  background-color: var(--surface);
  transition: background-color 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#glow {
  background: radial-gradient(60% 45% at 50% 38%,
    rgba(201, 162, 39, 0.16) 0%,
    rgba(201, 162, 39, 0.05) 42%,
    transparent 72%);
  opacity: .55;
  transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#vignette {
  background: radial-gradient(120% 90% at 50% 45%,
    transparent 42%, rgba(0, 0, 0, .55) 100%);
}

/* Film grain: kills banding in the large dark gradients and knits the
   photographic chapters to the typographic sections. */
#grain {
  opacity: .05;
  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='.7'/%3E%3C/svg%3E");
}

/* Thin gold scroll-progress bar. */
#progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
#progress span {
  display: block;
  height: 100%;
  background: var(--gold-metal);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] #progress span { transform-origin: right center; }

/* ---------------------------------------------------------------------------
 * Header behaviour.
 * ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  transition: transform .45s var(--ease-out), background-color .45s var(--ease-out);
  background: transparent;
}
.site-header.is-solid {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
}
.site-header.is-hidden { transform: translateY(-100%); }

/*
 * Legibility over the photograph.
 *
 * At scroll 0 the header is transparent and sits on the hero image, so the
 * navigation was bone-grey text on whatever the photograph happened to be —
 * measured against the lit windows in the facade shot, under 3:1. This scrim
 * puts a guaranteed near-obsidian ground behind the chrome without turning it
 * into a bar: it fades out downwards and is gone entirely once is-solid takes
 * over, so the transparent-header effect survives and the contrast does not
 * depend on which frame the visitor landed on.
 *
 * Decorative and inert — the header's own children stay above it.
 */
.site-header::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 180%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(3 5 9 / .78) 0%,
    rgb(3 5 9 / .45) 55%,
    rgb(3 5 9 / 0) 100%
  );
  transition: opacity .45s var(--ease-out);
}
.site-header.is-solid::before { opacity: 0; }
.site-header > * { position: relative; }

/* ---------------------------------------------------------------------------
 * Hero — a photographic composition, not a centred stack.
 *
 * The image is the LCP and is never hidden or faded in. Text sits lower
 * inline-start (lower-right in RTL) where the scrim stack guarantees >=0.86
 * alpha of obsidian behind it — bone text >=10:1 against even the brightest
 * lit window in the photograph.
 * ------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 0;              /* app.css gives generic .hero padding; the photo hero is edge-to-edge */
  min-height: 100svh;
  max-height: 62rem;
  display: grid;
  overflow: clip;
}

.hero__media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% 72%;
  animation: hero-settle 1.4s var(--ease-out) backwards;
}
@keyframes hero-settle { from { scale: 1.045; } }

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* floor — guarantees the text zone */
    linear-gradient(to top,
      rgb(11 14 20 / 0.94) 0%,
      rgb(11 14 20 / 0.86) 18%,
      rgb(11 14 20 / 0.60) 38%,
      rgb(11 14 20 / 0.22) 56%,
      rgb(11 14 20 / 0)    72%),
    /* inline bias toward the text corner */
    linear-gradient(to right,
      rgb(11 14 20 / 0.55) 0%,
      rgb(11 14 20 / 0.28) 32%,
      rgb(11 14 20 / 0)    58%),
    /* top band under the transparent sticky header */
    linear-gradient(to bottom,
      rgb(11 14 20 / 0.62) 0%,
      rgb(11 14 20 / 0)    16%);
}
/* One line flips the corner bias for the RTL reading eye. */
[dir="rtl"] .hero__scrim { transform: scaleX(-1); }

.hero__content {
  position: relative;
  align-self: end;
  justify-self: start;
  max-inline-size: 44rem;
  padding-inline: clamp(1.5rem, 6vw, 5rem);
  padding-block-end: clamp(4.5rem, 12svh, 8rem);
  display: grid;
  justify-items: start;
}

.hero__mark {
  inline-size: 96px;              /* the documented brand floor — never smaller */
  block-size: auto;
  margin-block-end: 1.5rem;
  filter: drop-shadow(0 8px 24px rgb(0 0 0 / .5));
  animation: hero-rise .5s var(--ease-out) .08s backwards;
}

.hero__eyebrow {
  color: var(--gold-300);          /* gold-metal is 4.0:1 over photography — too thin for small text */
  margin: 0 0 .875rem;
  animation: hero-rise .5s var(--ease-out) .16s backwards;
}

.hero .hero__title {
  font-size: var(--text-display-1);
  line-height: var(--lh-display, 1.05);
  color: var(--bone-100);
  margin: 0 0 1.25rem;
  max-inline-size: 16ch;
  text-wrap: balance;
  animation: hero-rise .7s var(--ease-out) .28s backwards;
}

.hero .hero__lede {
  color: var(--bone-200);
  font-size: var(--text-body-lg);
  max-inline-size: 52ch;
  margin: 0 0 2.25rem;
  animation: hero-rise .6s var(--ease-out) .44s backwards;
}

.hero .hero__actions {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  animation: hero-rise .55s var(--ease-out) .58s backwards;
}

/* The second action is a quiet link, not a competing second button. */
.hero__quiet {
  color: var(--bone-100);
  font-weight: 500;
  text-decoration: none;
  border-block-end: 1px solid color-mix(in srgb, var(--gold-metal) 55%, transparent);
  padding-block-end: 2px;
  transition: border-color .16s var(--ease-out), color .16s var(--ease-out);
}
.hero__quiet:hover { border-color: var(--gold-300); color: var(--gold-300); }
.hero__arrow { margin-inline-start: .45rem; display: inline-block; }
[dir="rtl"] .hero__arrow { transform: scaleX(-1); }

@keyframes hero-rise { from { opacity: 0; translate: 0 14px; } }

.hero__cue {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline: 0;
  text-align: center;
  color: var(--bone-200);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  animation: hero-rise .6s var(--ease-out) .9s backwards;
}
.hero__cue::after {
  content: "";
  display: block;
  inline-size: 1px;
  block-size: 2.25rem;
  margin: .6rem auto 0;
  background: linear-gradient(to bottom, var(--gold-metal), transparent);
  animation: cue 2.6s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* ---------------------------------------------------------------------------
 * Photographic chapters.
 *
 * Normal document flow. No sticky pinning, no canvas, no scroll-jacking —
 * the luxury is restraint. Thin obsidian seams between frames read as cuts.
 * ------------------------------------------------------------------------- */

.chapter { position: relative; margin-block: clamp(1rem, 3vw, 2rem); }

.chapter__media {
  position: relative;
  margin: 0;
  overflow: clip;
}
.chapter--wide .chapter__media { block-size: min(60svh, 34rem); }
.chapter--tall .chapter__media { block-size: min(76svh, 44rem); }

.chapter__media img {
  display: block;
  inline-size: 100%;
  block-size: 118%;                /* headroom for the scroll drift below */
  object-fit: cover;
}

/* Parallax: CSS scroll-driven only. 6% is the ceiling — enough that the frame
   breathes, below the threshold where it reads as an effect. Browsers without
   animation-timeline get a perfect static crop; nothing is JS-dependent. */
@supports (animation-timeline: view()) {
  .chapter__media img {
    animation: chapter-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes chapter-drift {
    from { translate: 0 -6%; }
    to   { translate: 0 0; }
  }
}

/* Caption plates: solid >=0.88-alpha surfaces, so the text never negotiates
   with the photograph. Block-end anchored; the inline corner alternates. */
.chapter__plate {
  position: absolute;
  inset-block-end: clamp(1.5rem, 4vw, 3rem);
  max-inline-size: 38ch;
  padding: 1.125rem 1.5rem 1.25rem;
  background: rgb(11 14 20 / 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--gold-metal) 30%, transparent);
}
.chapter__plate--start { inset-inline-start: clamp(1.5rem, 4vw, 3rem); }
.chapter__plate--end   { inset-inline-end:   clamp(1.5rem, 4vw, 3rem); }

.chapter__index {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  color: var(--gold-300);
  font-weight: 600;
  margin-block-end: .375rem;
}
.chapter__caption {
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  color: var(--bone-100);
  margin: 0 0 .4rem;
  text-wrap: balance;
}
.chapter__support {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--bone-200);
}

/* Below 640px the plate becomes a full-width subtitle band. */
@media (max-width: 40rem) {
  .chapter__plate,
  .chapter__plate--start,
  .chapter__plate--end {
    inset-inline: 0;
    inset-block-end: 0;
    max-inline-size: none;
    border-inline: 0;
    border-block-end: 0;
    padding: 1rem 1.5rem;
  }
}

/* Scroll reveal — a lift, never a fade-in from nothing. The hidden state
   exists ONLY when JS is present and motion allowed; everyone else gets the
   finished frame immediately. */
.js:not(.no-motion) .chapter__media img {
  opacity: .62;
  transition: opacity var(--cine-band, 2.4s) var(--ease-out);
}
.js:not(.no-motion) .chapter__plate {
  opacity: 0;
  translate: 0 20px;
  transition: opacity var(--cine-reveal, 1.6s) var(--ease-out) .18s,
              translate var(--cine-reveal, 1.6s) var(--ease-out) .18s;
}
.js:not(.no-motion) .chapter.is-seen .chapter__media img { opacity: 1; }
.js:not(.no-motion) .chapter.is-seen .chapter__plate { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------------------------
 * Editorial sections.
 * ------------------------------------------------------------------------- */

.beat { padding-block: clamp(5rem, 12vw, 9rem); position: relative; }
.beat__index {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  color: var(--gold-metal);
  display: block;
  margin-block-end: .75rem;
}
.beat h2 { font-size: var(--text-display-3); margin-block: 0 1rem; max-inline-size: 18ch; }
.beat p { color: var(--text-secondary); max-inline-size: 58ch; }

.pillars { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-block-start: 3rem; }
.pillar { border-block-start: 1px solid var(--border); padding-block-start: 1.25rem; }
.pillar h3 { font-size: var(--text-heading-3); margin-block: 0 .5rem; }
.pillar p { font-size: var(--text-body-sm); }

/* ---------------------------------------------------------------------------
 * Reduced motion: the finished page, instantly. Every keyframe above ends at
 * the natural state, so disabling animation IS the design, not a degradation.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__media, .hero__mark, .hero__eyebrow, .hero__title, .hero__lede,
  .hero__actions, .hero__cue, .hero__cue::after { animation: none; }
  .chapter__media img { animation: none; }
  .site-header { transition: none; }
}
.no-motion .hero__media, .no-motion .hero__mark, .no-motion .hero__eyebrow,
.no-motion .hero__title, .no-motion .hero__lede, .no-motion .hero__actions,
.no-motion .hero__cue, .no-motion .hero__cue::after { animation: none; }