/* ============================================================
   AMJ — Al Majid Jawad W.L.L  |  Premium homepage redesign
   Design system: dark, warm, editorial heritage
   ============================================================ */

:root {
  /* ===== LIGHT THEME (default) — logo-inspired blue on white ===== */
  --bg:        oklch(0.988 0.003 250);  /* cool white */
  --bg-2:      oklch(0.967 0.005 250);  /* raised section */
  --bg-3:      oklch(0.945 0.007 250);  /* card / hairline base */
  --line:      oklch(0.50 0.02 250 / 0.30);
  --line-soft: oklch(0.50 0.02 250 / 0.16);

  /* ink: deep brand navy → cool grey */
  --ink:       oklch(0.265 0.040 250);  /* navy-black headings/body */
  --ink-2:     oklch(0.430 0.035 250);  /* secondary */
  --ink-3:     oklch(0.560 0.025 250);  /* muted / captions = brand grey */

  /* AMJ navy/steel accent + platinum detail */
  --accent:    #164f7a;  /* Pantone 293 — official AMJ brand blue */
  --accent-hi: #1f5f92;  /* hover — lighter brand blue */
  --accent-ink: oklch(0.990 0.004 250);
  --brand-grey: #a3a6a9; /* Pantone Cool Grey */
  --brass:     oklch(0.560 0.060 245);  /* cool steel detail */

  /* helper surfaces (theme-aware) */
  --scrim:     oklch(0.988 0.003 250 / 0.92);  /* nav glass */
  --ph-line:   oklch(0.78 0.02 250);           /* placeholder stripe */
  --foot-b:    oklch(0.86 0.04 244);           /* giant footer J */

  /* --- Type --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "Geist Mono", "SFMono-Regular", ui-monospace, monospace;

  /* --- Rhythm --- */
  --gut: clamp(20px, 5vw, 64px);   /* page side gutter */
  --maxw: 1320px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-dur: 0.9s;
}

/* ===== DARK THEME (optional, via Tweak) ===== */
:root[data-theme="dark"] {
  --bg:        oklch(0.162 0.020 250);
  --bg-2:      oklch(0.205 0.024 250);
  --bg-3:      oklch(0.255 0.026 250);
  --line:      oklch(0.36 0.026 250 / 0.55);
  --line-soft: oklch(0.36 0.026 250 / 0.30);
  --ink:       oklch(0.965 0.006 250);
  --ink-2:     oklch(0.815 0.012 250);
  --ink-3:     oklch(0.700 0.012 250);
  --accent:    oklch(0.585 0.108 244);
  --accent-hi: oklch(0.675 0.108 244);
  --accent-ink: oklch(0.985 0.006 250);
  --brass:     oklch(0.800 0.030 245);
  --scrim:     oklch(0.155 0.020 250 / 0.92);
  --ph-line:   oklch(0.30 0.022 250);
  --foot-b:    oklch(0.36 0.07 244);
}

/* color-scheme hint for form controls / scrollbars */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* motion-off mode (Tweak) */
:root[data-motion="off"] * {
  animation: none !important;
  transition: none !important;
}
:root[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* warm grain + vignette overlay for premium depth */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.55 0.06 250 / 0.07), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, oklch(0.50 0.04 250 / 0.05), transparent 60%);
  mix-blend-mode: normal;
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.32 0.05 250 / 0.32), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, oklch(0.11 0.02 250 / 0.7), transparent 60%);
}

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

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-size: clamp(44px, 6.6vw, 104px);
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  font-size: clamp(34px, 5vw, 68px);
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.kicker::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.lede {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
  text-wrap: pretty;
}
em.it { font-style: italic; color: var(--ink); }
.accent-text { color: var(--accent); }

/* gold-foil shimmer for the heritage numeral */
.foil {
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 35%,
    var(--brass) 50%, var(--ink) 65%, var(--ink) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: foil 7s linear infinite;
}
@keyframes foil { to { background-position: -220% 0; } }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--ink);
  display: inline-flex; align-items: center; gap: 0.7em; white-space: nowrap;
  font-family: var(--sans); font-weight: 600;
  font-size: 14.5px; letter-spacing: 0.01em;
  padding: 15px 26px; border-radius: 999px;
  position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn .arr { transition: transform 0.5s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.btn-primary {
  background: var(--accent); color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hi); transform: translateY(-2px); }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.btn-ghost:hover { color: var(--bg); border-color: var(--ink); }
.btn-ghost:hover::after { transform: translateY(0); }

/* text-link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 600; font-size: 15px;
  color: var(--ink); position: relative; padding-bottom: 3px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .arr { color: var(--accent); transition: transform 0.5s var(--ease); }
.tlink:hover .arr { transform: translateX(5px); }

/* ---------- Reveal animation ---------- */
/* Base = visible (safe for no-JS, print, reduced-motion). JS adds
   html.reveal-on to enable the hide-then-reveal-on-scroll behaviour. */
.reveal {
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
}
html.reveal-on .reveal {
  opacity: 0;
  transform: translateY(34px);
}
html.reveal-on .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }

/* section frame */
section { position: relative; z-index: 2; }
.sect { padding-block: clamp(80px, 11vw, 168px); }
section[id] { scroll-margin-top: 96px; }
.sect-head { display: flex; flex-direction: column; gap: 22px; }

/* hairline divider */
.rule { height: 1px; background: var(--line-soft); border: 0; }

/* placeholder imagery — striped, with mono label */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      var(--ph-line) 0 2px,
      transparent 2px 11px),
    var(--bg-2);
  border: 1px solid var(--line);
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  background: color-mix(in oklch, var(--bg), transparent 22%);
  padding: 5px 9px; border-radius: 4px; backdrop-filter: blur(4px);
}