/* ============================================================
   IARU — post-cinematic content, panels, forms, footer
   ============================================================ */

.after {
  position: relative; z-index: var(--z-overlay);
  background: var(--obsidian);
  /* the cinematic stage is fixed behind; this seam lifts content over it */
  box-shadow: 0 -60px 90px 40px var(--obsidian);
}

.section { padding: clamp(4rem, 9vw, 9rem) var(--gutter); }
.shell { max-width: var(--shell-max); margin-inline: auto; }

.section__head { display: grid; gap: var(--sp-4); max-width: 62ch; margin-block-end: var(--sp-8); }
.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: var(--lh-snug); text-wrap: balance;
}
.section__body { font-size: var(--fs-lead); color: var(--text-dim); }

/* faint engraved Egyptian hairline, used sparingly as a separator */
.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--hairline), transparent);
}

/* ---------- experience cards: editorial, not SaaS ---------- */
.cards {
  display: grid; gap: clamp(1rem, 1.8vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.card {
  position: relative; display: block;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  min-height: clamp(300px, 32vw, 420px);
  isolation: isolate;
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
/* Layering must stay non-negative. `.card` establishes a stacking context via
   isolation and paints an opaque background, so a child at a negative z-index
   is painted BEHIND that background and disappears entirely. */
.card__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.card__media img, .card__media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-cine) var(--ease-cine);
}
.card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(4,6,10,.93) 6%, rgba(4,6,10,.55) 42%, rgba(4,6,10,.16) 100%);
  transition: background var(--dur-mid) var(--ease-out);
}
.card__body {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2;
  padding: var(--sp-5); display: grid; gap: var(--sp-2);
}
.card__title {
  font-family: var(--font-display); font-size: var(--fs-h3);
  transition: color var(--dur-fast) var(--ease-out);
}
.card__text { font-size: 0.92rem; color: var(--text-faint); }
.card__go {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mid);
  text-transform: uppercase; color: var(--text-dim);
  margin-block-start: var(--sp-2);
}
.card__go svg { width: 15px; height: 15px; transition: transform var(--dur-mid) var(--ease-out); }
[dir='rtl'] .card__go svg { transform: scaleX(-1); }

.card:hover, .card:focus-visible { border-color: var(--hairline); transform: translateY(-3px); }
.card:hover .card__media img, .card:hover .card__media video { transform: scale(1.09); }
.card:hover .card__title { color: var(--gold-light); }
.card:hover .card__go svg { transform: translateX(5px); }
[dir='rtl'] .card:hover .card__go svg { transform: scaleX(-1) translateX(5px); }
.card:hover::after { background: linear-gradient(to top, rgba(4,6,10,.95) 6%, rgba(4,6,10,.6) 46%, rgba(6,12,22,.28) 100%); }

/* ---------- why IARU pillars ---------- */
.pillars {
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.pillar { display: grid; gap: var(--sp-3); align-content: start; }
.pillar__no {
  font-family: var(--font-display); font-size: 1.5rem;
  color: var(--gold-antique); letter-spacing: .1em;
}
.pillar__title { font-size: var(--fs-h3); font-family: var(--font-display); }
.pillar__text { color: var(--text-faint); font-size: 0.96rem; }

/* ---------- virtual Egypt band ---------- */
.band {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--hairline-soft);
  background:
    radial-gradient(80% 120% at 78% 30%, rgba(11,47,99,.55) 0%, transparent 62%),
    linear-gradient(180deg, #05070d, #04060a);
}
.band__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .band__grid { grid-template-columns: 1.05fr .95fr; } }
.band__visual {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 10; background: #04060a;
}
.band__visual video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- early access form ---------- */
.form { display: grid; gap: var(--sp-4); max-width: 560px; }
.field { display: grid; gap: var(--sp-2); }
.field__label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mid);
  text-transform: uppercase; color: var(--text-faint);
}
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 0.98rem; color: var(--text);
  padding: 0.85rem 1rem;
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-antique); background: rgba(10, 15, 26, 0.9); outline: none;
}
.field select { appearance: none; cursor: pointer; }
.field__error { font-size: 0.8rem; color: #ff9c8a; min-height: 1.1em; }
.field.is-invalid input, .field.is-invalid select { border-color: #b4553f; }
.form__note { font-size: 0.8rem; color: var(--text-faint); }
.form__status[data-state='success'] {
  padding: var(--sp-4); border: 1px solid var(--hairline);
  border-radius: var(--r-md); background: rgba(201, 151, 58, 0.08);
  color: var(--gold-light);
}

/* ---------- footer ---------- */
.footer { padding: var(--sp-7) var(--gutter) var(--sp-8); border-block-start: 1px solid var(--hairline-soft); }
.footer__grid {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  align-items: center; justify-content: space-between;
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__links a { font-size: 0.84rem; color: var(--text-faint); transition: color var(--dur-fast); }
.footer__links a:hover { color: var(--gold-light); }
.footer__legal { font-size: 0.78rem; color: var(--text-faint); }

/* ============================================================
   LANGUAGE PANEL — dark glass, gold hairline, blue glow
   ============================================================ */
.lang-panel {
  position: fixed; z-index: var(--z-panel);
  inset-block-start: 76px; inset-inline-end: var(--gutter);
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--shadow-lift), 0 0 60px rgba(11, 47, 99, 0.5);
  display: grid; gap: var(--sp-4);
  opacity: 0; transform: translateY(-8px) scale(.985);
  visibility: hidden; pointer-events: none;
  /* visibility flips instantly on open and is delayed until after the fade on
     close — never interpolated, so the panel is usable even if transitions
     are suppressed. */
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              visibility 0s var(--dur-mid);
}
.lang-panel.is-open {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              visibility 0s 0s;
}
.lang-panel__title { font-family: var(--font-display); font-size: 1.28rem; }
.lang-panel__search {
  width: 100%; padding: 0.7rem 0.9rem;
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-md);
  color: var(--text); font-family: inherit; font-size: 0.92rem;
}
.lang-panel__search:focus { border-color: var(--gold-antique); outline: none; }
.lang-list {
  display: grid; gap: 2px; max-height: min(46vh, 400px);
  overflow-y: auto; margin: 0; padding: 0; list-style: none;
}
.lang-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: 0.75rem 0.9rem;
  background: transparent; border: 0; border-radius: var(--r-md);
  color: var(--text-dim); font-family: inherit; font-size: 0.95rem;
  text-align: start; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              padding-inline-start var(--dur-fast) var(--ease-out);
}
.lang-option__native { font-weight: 500; }
.lang-option__code {
  font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-faint);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  padding: 0.15rem 0.45rem;
}
.lang-option:hover, .lang-option:focus-visible {
  background: rgba(201, 151, 58, 0.1);
  color: var(--ivory-soft);
  padding-inline-start: 1.25rem;
  box-shadow: inset 2px 0 0 var(--gold-light);
}
[dir='rtl'] .lang-option:hover, [dir='rtl'] .lang-option:focus-visible { box-shadow: inset -2px 0 0 var(--gold-light); }
.lang-option[aria-current='true'] { color: var(--gold-light); }
.lang-option[aria-current='true'] .lang-option__code { border-color: var(--hairline); color: var(--gold-light); }
.lang-panel__empty { font-size: 0.9rem; color: var(--text-faint); padding: var(--sp-3); }

/* mobile: refined bottom sheet */
@media (max-width: 767px) {
  .lang-panel {
    inset-block: auto 0; inset-inline: 0; width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-inline: 0; border-block-end: 0;
    padding-block-end: max(var(--sp-6), env(safe-area-inset-bottom));
    transform: translateY(14px);
  }
  .lang-panel.is-open { transform: none; }
  .lang-list { max-height: 52vh; }
}

.backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-panel) - 1);
  background: rgba(2, 3, 6, 0.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-mid), visibility 0s var(--dur-mid);
}
.backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-mid), visibility 0s 0s; }

/* ============================================================
   MOBILE MENU — near full-screen dark glass
   ============================================================ */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-panel);
  background: rgba(3, 5, 9, 0.94);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: var(--sp-5) var(--gutter) max(var(--sp-7), env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out), visibility 0s var(--dur-mid);
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-mid) var(--ease-out), visibility 0s 0s;
}
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__nav { display: grid; align-content: center; gap: var(--sp-4); }
.mobile-menu__link {
  font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 2.6rem);
  color: var(--text); padding: var(--sp-2) 0;
  min-height: 44px;
  opacity: 0; transform: translateY(14px);
}
.mobile-menu.is-open .mobile-menu__link {
  animation: menuIn 560ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 90ms);
}
@keyframes menuIn { to { opacity: 1; transform: none; } }
.mobile-menu__foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__link { opacity: 1; transform: none; animation: none !important; }
}

@media (max-width: 1023px) {
  .nav { display: none; }
  .menu-trigger { display: inline-flex; }
  .header__actions .btn--solid { display: none; }
}

/* ============================================================
   CUSTOM CURSOR — desktop pointer devices only
   ============================================================ */
.cursor, .cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button, body.has-cursor input,
  body.has-cursor select, body.has-cursor textarea { cursor: none; }
  .cursor, .cursor-ring {
    display: block; position: fixed; top: 0; left: 0;
    z-index: var(--z-cursor); pointer-events: none;
    border-radius: 50%; mix-blend-mode: difference;
  }
  .cursor { width: 6px; height: 6px; background: var(--ivory-soft); margin: -3px 0 0 -3px; }
  .cursor-ring {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid rgba(245, 241, 232, 0.5);
    transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out),
                margin var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
  }
  .cursor-ring.is-active { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-color: var(--gold-light); }
}
@media (prefers-reduced-motion: reduce) {
  body.has-cursor { cursor: auto; }
  .cursor, .cursor-ring { display: none !important; }
}

/* ============================================================
   RTL — genuine mirroring, not right-aligned Latin
   ============================================================ */
[dir='rtl'] body { font-family: var(--font-ar); }
[dir='rtl'] .chapter__title,
[dir='rtl'] .section__title,
[dir='rtl'] .card__title,
[dir='rtl'] .pillar__title,
[dir='rtl'] .lang-panel__title,
[dir='rtl'] .mobile-menu__link { font-family: var(--font-ar); letter-spacing: 0; }
[dir='rtl'] .brand__word { letter-spacing: 0.2em; }
[dir='rtl'] .eyebrow { letter-spacing: 0.1em; padding-inline-end: 0; }
[dir='rtl'] .chip, [dir='rtl'] .nav__link, [dir='rtl'] .btn,
[dir='rtl'] .card__go, [dir='rtl'] .field__label { letter-spacing: 0; }