/* base.css - typography, layout primitives, animated background, page-wide tone */

/* ---------------------------------------------------------------
 * Animated emerald background.
 *
 * Three layered effects give the page its elegant, luxurious feel:
 *   1. A vertical gradient on the body that drifts between the brand
 *      emerald and a darker shade — slow, large-radius stops so the
 *      motion is barely perceptible but always alive.
 *   2. A pseudo-element overlay that pans two soft "spotlights" of
 *      lighter green across the background — gives the impression of
 *      light moving across polished emerald.
 *   3. A third layer with small gold dots that drift like dust motes
 *      catching the light. Pure CSS animation; no JS, no extra files.
 *
 * prefers-reduced-motion stops all of these so the page is calm for
 * users who request less motion.
 * --------------------------------------------------------------- */

html {
  background: var(--color-bg-deep);
  color: var(--color-cream-soft);
  font-family: var(--font-sans);
}

body {
  position: relative;
  min-height: 100vh;
  color: var(--color-cream-soft);
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--font-sans);
  /* Layered gradient: base emerald + soft radial spotlight + subtle gold shimmer. */
  background-color: var(--color-bg-deep);
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(242, 210, 123, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(14, 128, 71, 0.55), transparent 60%),
    radial-gradient(circle at center, rgba(212, 167, 72, 0.06) 1px, transparent 1.5px),
    linear-gradient(180deg, var(--color-bg-deep-3) 0%, var(--color-bg-deep) 38%, var(--color-bg-deep-2) 100%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 26px 26px, 100% 100%;
  background-attachment: fixed;
  animation: bgShift 26s ease-in-out infinite alternate;
  overflow-x: hidden;
}

/* Drifting spotlight layer — sits between body and content so all cards read above. */
body::before {
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(40vh 30vh at 30% 20%, rgba(242, 210, 123, 0.22), transparent 60%),
    radial-gradient(35vh 25vh at 70% 60%, rgba(242, 210, 123, 0.12), transparent 60%);
  animation: spotlightDrift 24s ease-in-out infinite alternate;
  filter: blur(8px);
}

/* Gold dust layer — gentle drifting particles in the page background. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(242, 210, 123, 0.55) 0.8px, transparent 1.6px),
    radial-gradient(circle at 78% 32%, rgba(242, 210, 123, 0.35) 0.8px, transparent 1.6px),
    radial-gradient(circle at 22% 78%, rgba(242, 210, 123, 0.45) 0.8px, transparent 1.6px),
    radial-gradient(circle at 88% 84%, rgba(242, 210, 123, 0.30) 0.8px, transparent 1.6px),
    radial-gradient(circle at 50% 50%, rgba(242, 210, 123, 0.25) 0.8px, transparent 1.6px);
  background-size: 320px 320px, 280px 280px, 360px 360px, 240px 240px, 400px 400px;
  background-repeat: repeat;
  animation: goldDust 60s linear infinite;
  opacity: 0.6;
}

/* Make sure real content sits above the decorative pseudo layers. */
.main-content,
.top-nav,
header,
main,
section,
footer {
  position: relative;
  z-index: 1;
}

@keyframes bgShift {
  0%   { background-position: 0% 0%, 0% 0%, 0 0, 0% 0%; }
  100% { background-position: 6% 4%, -6% -4%, 26px 26px, 0% 0%; }
}

@keyframes spotlightDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  100% { transform: translate3d(2vw, -3vh, 0) scale(1.06); opacity: 1; }
}

@keyframes goldDust {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 320px 320px, -280px 280px, 360px -360px, -240px 240px, 400px -400px; }
}

@media (prefers-reduced-motion: reduce) {
  body,
  body::before,
  body::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------
 * Typography
 * --------------------------------------------------------------- */

/* Headings inherit display serif + tight tracking + line-height 1 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-weight: 500;
  color: var(--color-cream);
}

h1 { font-size: clamp(40px, 7vw, 80px); }
h2 { font-size: clamp(32px, 5vw, 64px); }
h3 { font-size: clamp(22px, 2.6vw, 36px); }
h4 { font-size: clamp(18px, 1.8vw, 24px); }

p {
  max-width: 65ch;
}

/* Arabic: headings and body text use Cairo via the [dir="rtl"] override */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] body {
  font-family: var(--font-sans);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  letter-spacing: 0;
  line-height: 1.2;
}

/* ---------------------------------------------------------------
 * Layout primitives
 * --------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-section-md);
  }
}

/* Night bands (footer, etc.) */
.tone-night {
  background: var(--color-night);
  color: var(--color-cream);
}

.tone-night h1,
.tone-night h2,
.tone-night h3,
.tone-night h4,
.tone-night h5,
.tone-night h6 {
  color: var(--color-cream);
}

.tone-night .text-muted,
.tone-night p {
  color: var(--color-night-muted);
}

.tone-night .eyebrow {
  color: var(--color-gold-bright);
  border-color: rgba(212, 167, 72, 0.5);
}

.tone-night .hairline-top {
  border-color: rgba(212, 167, 72, 0.18);
}

[dir="rtl"] .tone-night h1,
[dir="rtl"] .tone-night h2,
[dir="rtl"] .tone-night h3 {
  letter-spacing: 0;
  line-height: 1.2;
}

.text-muted { color: var(--color-cream-muted); }
.text-accent { color: var(--color-gold); }
.text-paper { color: var(--color-cream); }

.bg-paper   { background: var(--color-cream); color: var(--color-ink); }
.bg-surface { background: var(--color-surface); color: var(--color-ink); }
.bg-night   { background: var(--color-night); color: var(--color-cream); }
.bg-ink     { background: var(--color-ink); color: var(--color-cream); }

.border-hairline { border: 1px solid var(--color-hairline); }

/* Italic display utility */
.display-italic {
  font-style: italic;
  font-feature-settings: "ss01", "ss02";
}

/* Mono display for stability notes, install previews */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
}

/* ---------------------------------------------------------------
 * Eyebrow tag
 * --------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-gold);
  background: rgba(212, 167, 72, 0.08);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}

.eyebrow-muted {
  border-color: rgba(242, 210, 123, 0.35);
  color: var(--color-gold-bright);
  background: rgba(212, 167, 72, 0.06);
}

/* Hairline top divider */
.hairline-top {
  border-top: 1px solid var(--color-hairline);
}

/* ---------------------------------------------------------------
 * Body copy
 * --------------------------------------------------------------- */
.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--color-cream-soft);
  max-width: 60ch;
}

[dir="rtl"] .lede {
  font-family: var(--font-sans);
}

.body-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-cream-soft);
  max-width: 60ch;
}

.body-text strong,
.body-text em {
  color: var(--color-cream);
}

/* ---------------------------------------------------------------
 * Focus & selection — gold focus ring for the emerald theme.
 * --------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-gold);
  color: var(--color-night);
}

/* ---------------------------------------------------------------
 * Reveal animations — sections fade and slide up on intersection.
 * The .reveal class is added by /assets/js/reveal.js.
 * --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-luxe) var(--ease-luxe),
    transform var(--dur-luxe) var(--ease-luxe);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}