/* ============================================================
   AlHoot × Hulul — base.css
   Reset, fonts, typography, bidi, shared components
   (.media-slot, .tbd), fixed chrome, ambient backdrop, a11y.
   Per-slide layout lives in slides.css.
   ============================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-stack);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

::selection { background: var(--accent-deep); color: var(--ink); }

/* ---------- Typography utilities ---------- */
.t-display {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: 700;
  letter-spacing: var(--track-display); /* Latin display only */
}
.t-title {
  font-size: var(--text-title);
  line-height: var(--lh-title);
  font-weight: 600;
}
.t-lead {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
}
.t-body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
}
.t-caption {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
}

/* ---------- Bidi: embedded Arabic islands (SPEC §4) ----------
   Usage: <span lang="ar" dir="rtl">…</span> or
          <blockquote lang="ar" dir="rtl">…</blockquote>          */
:lang(ar) {
  letter-spacing: 0 !important; /* never letterspace Arabic — breaks joining */
  line-height: 1.75;
}
blockquote:lang(ar) {
  text-align: start; /* starts from the right within its RTL context */
}

/* ---------- .tbd — open negotiation item (SPEC §6) ----------
   Renders the copy's `___` blanks:
   <span class="tbd" title="Cutover window duration">to be agreed</span> */
.tbd {
  display: inline-block;
  padding: 0.05em 0.6em 0.15em;
  background: var(--bg-raised);
  border-bottom: 1.5px dashed var(--accent-bright);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--accent-bright);
  white-space: nowrap;
  vertical-align: baseline;
  cursor: help;
}

/* ---------- .media-slot — imagery placeholder (SPEC §6) ----------
   <figure class="media-slot" data-search="stock search query">
     <span class="media-slot__label">Image: what belongs here</span>
   </figure>                                                        */
.media-slot {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  min-height: 15rem;
  padding: 2rem;
  background: var(--bg-raised);
  border: 1.5px dashed rgba(96, 184, 193, 0.4); /* teal-300 @ 40% */
  border-radius: var(--radius-lg);
  text-align: center;
}
.media-slot::before {
  content: '';
  width: 2.25rem;
  height: 2.25rem;
  background: var(--accent-bright);
  opacity: 0.65;
  /* Inlined (not a file ref): mask-image fetches are CORS-blocked on file:// */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M4.5 3.5h15A2.5 2.5 0 0 1 22 6v12a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 18V6a2.5 2.5 0 0 1 2.5-2.5Zm15 1.6h-15A.9.9 0 0 0 3.6 6v9.53l4.25-4.24a1 1 0 0 1 1.41 0l3.04 3.03 1.98-1.98a1 1 0 0 1 1.41 0l4.71 4.71V6a.9.9 0 0 0-.9-.9ZM3.6 18v-.21l4.95-4.95 6.72 6.72H4.5a.9.9 0 0 1-.9-.9Zm15.9.9h-1.4l-4-4 1.68-1.69 4.62 4.62V18a.9.9 0 0 1-.9.9ZM15.5 7a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M4.5 3.5h15A2.5 2.5 0 0 1 22 6v12a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 18V6a2.5 2.5 0 0 1 2.5-2.5Zm15 1.6h-15A.9.9 0 0 0 3.6 6v9.53l4.25-4.24a1 1 0 0 1 1.41 0l3.04 3.03 1.98-1.98a1 1 0 0 1 1.41 0l4.71 4.71V6a.9.9 0 0 0-.9-.9ZM3.6 18v-.21l4.95-4.95 6.72 6.72H4.5a.9.9 0 0 1-.9-.9Zm15.9.9h-1.4l-4-4 1.68-1.69 4.62 4.62V18a.9.9 0 0 1-.9.9ZM15.5 7a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.media-slot__label {
  font-size: var(--text-body);
  color: var(--ink-soft);
}
.media-slot::after {
  content: attr(data-search);
  direction: ltr;
  font-size: var(--text-caption);
  color: var(--ink-faint);
  opacity: 0.75;
}

/* ---------- Slide shell ---------- */
.deck { position: relative; z-index: var(--z-slides); }

.slide {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--slide-pad-block) var(--slide-pad-inline);
  overflow: clip;
}

/* ---------- Fixed chrome (SPEC §6) ---------- */

/* Brandmark — small glyph + caption, top-left */
.brandmark {
  position: fixed;
  top: var(--chrome-pad);
  inset-inline-start: var(--chrome-pad);
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brandmark__glyph {
  width: 2.1rem;
  height: auto;
  color: var(--ink);
  opacity: 0.5;
}
.brandmark__caption {
  font-size: var(--text-caption);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* Progress rail — right edge, one dot per slide */
.rail {
  position: fixed;
  top: 50%;
  inset-inline-end: calc(var(--chrome-pad) * 0.75);
  transform: translateY(-50%);
  z-index: var(--z-chrome);
}
.rail__dots {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
}
.rail__dots::before {
  /* the thin vertical line behind the dots */
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background: rgba(190, 186, 210, 0.25); /* navy-100 @ 25% */
}
.rail__dot {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--navy-500);
  transition: background var(--dur-quick) var(--ease-water),
              box-shadow var(--dur-quick) var(--ease-water),
              transform var(--dur-quick) var(--ease-water);
}
.rail__dot:hover { background: var(--accent-bright); }
.rail__dot[aria-current='true'] {
  background: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 10px 2px rgba(0, 157, 172, 0.55);
}

/* Slide counter — bottom-right, Latin figures */
.counter {
  position: fixed;
  bottom: var(--chrome-pad);
  inset-inline-end: var(--chrome-pad);
  z-index: var(--z-chrome);
  direction: ltr;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.counter__current { color: var(--ink); }

@media (max-width: 640px) {
  .brandmark__caption { display: none; }
  .rail { inset-inline-end: 0.4rem; }
}

/* ---------- Ambient depth backdrop (SPEC §5) ----------
   --depth: 0 = surface water (cover) … 1 = near-black abyss.
   Driven by js/main.js from scroll position + per-slide
   data-depth. Layers animate transform/opacity only.        */
.backdrop {
  --depth: 0;
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  overflow: clip;
  pointer-events: none;
  background: var(--navy-900);
}

/* lighter surface-water light, fades as we descend */
.backdrop__surface {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(58% 44% at 50% -6%, rgba(0, 157, 172, 0.30), transparent 70%),
    radial-gradient(42% 34% at 82% 18%, rgba(0, 78, 86, 0.38), transparent 70%),
    radial-gradient(50% 40% at 12% 62%, rgba(0, 78, 86, 0.22), transparent 72%);
  opacity: calc(1 - var(--depth) * 0.85);
}

/* deep-water darkness, grows as we descend */
.backdrop__deep {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 5, 11, 0.35), rgba(6, 5, 11, 0.92) 80%);
  opacity: var(--depth);
}

/* drifting caustic light blobs (JS loops their transforms) */
.backdrop__blobs { position: absolute; inset: 0; }
.blob {
  position: absolute;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 157, 172, 0.14),
    rgba(0, 78, 86, 0.07) 45%,
    transparent 70%);
  opacity: calc(1 - var(--depth) * 0.55);
}
.blob--1 { top: -18%; inset-inline-start: -12%; }
.blob--2 { top: 28%; inset-inline-end: -16%; width: 65vw; }
.blob--3 { bottom: -22%; inset-inline-start: 18%; width: 46vw; }

/* rising bubble particles (created + animated by JS) */
.backdrop__bubbles { position: absolute; inset: 0; }
.backdrop__bubbles span {
  position: absolute;
  bottom: -3rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(176, 229, 234, 0.5); /* teal-100 */
  opacity: 0;
}

/* ---------- A11y ---------- */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* hidden inline-SVG symbol definitions */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Reduced motion (SPEC §5) ----------
   JS also checks the media query: no pinning, no ambient
   loops, entrances collapse to 0.3s fades.               */
@media (prefers-reduced-motion: reduce) {
  .backdrop { display: none; }
  .scroll-cue { animation: none !important; opacity: 0.7; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}