/* ============================================================
   Aithical Hub — Cinematic loader system (v2 · site palette)
   ------------------------------------------------------------
   Warm-coffee colour system matched to the live site:
     coffee (#0E0B07) ground · ember (#E05B25) primary
     ochre (#C8A24A) accent · oxblood (#7E1D1D) depth
     cream (#F4EFE6) text
   Replaces the earlier cool-gradient palette.
   ============================================================ */

:root {
  --ah-ink:        #0E0B07;
  --ah-ink-2:      #161210;
  --ah-cream:      #F4EFE6;
  --ah-cream-dim:  #A19A8E;
  --ah-cream-fade: rgba(244, 239, 230, 0.55);
  --ah-line:       rgba(244, 239, 230, 0.08);
  --ah-line-2:     rgba(244, 239, 230, 0.16);

  /* WARM brand gradient — matches site.css tokens */
  --ember:         #E05B25;
  --ember-soft:    #F77948;
  --ember-hover:   #F0743D;
  --ochre:         #C8A24A;
  --oxblood:       #7E1D1D;
  --ember-glow:    rgba(224, 91, 37, 0.55);
}

/* ---------- root overlay ---------- */
.ah-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  pointer-events: none;
  background: #000;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ah-loader.is-active  { display: block; opacity: 1; pointer-events: auto; }
.ah-loader.is-leaving { opacity: 0; pointer-events: none; }

/* ---------- background atmosphere ---------- */
.ah-loader__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 22% 18%, rgba(247, 121, 72, 0.18), transparent 65%),
    radial-gradient(ellipse 60% 50% at 78% 82%, rgba(200, 162, 74, 0.16), transparent 65%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(224, 91, 37, 0.14), transparent 70%),
    linear-gradient(180deg, var(--ah-ink) 0%, #050402 100%);
}
.ah-loader__bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(244, 239, 230, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 230, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(800px) rotateX(60deg) translateY(20%);
  transform-origin: center top;
  opacity: 0.55;
  animation: ah-grid-drift 80s linear infinite;
}
@keyframes ah-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 320px, 320px 0; }
}

/* ---------- floating particles ---------- */
.ah-loader__particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ah-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember) 0%, transparent 70%);
  opacity: 0;
  animation: ah-drift var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
.ah-particle.c-ember   { background: radial-gradient(circle, var(--ember) 0%,      transparent 70%); }
.ah-particle.c-soft    { background: radial-gradient(circle, var(--ember-soft) 0%, transparent 70%); }
.ah-particle.c-ochre   { background: radial-gradient(circle, var(--ochre) 0%,      transparent 70%); }
.ah-particle.c-oxblood { background: radial-gradient(circle, var(--oxblood) 0%,    transparent 70%); }
.ah-particle.c-cream   { background: radial-gradient(circle, var(--ah-cream) 0%,   transparent 70%); }
.ah-particle.lg { width: 10px; height: 10px; }
.ah-particle.sm { width: 4px;  height: 4px;  }
@keyframes ah-drift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 0.65; }
  90%  { opacity: 0.45; }
  100% { transform: translate3d(var(--dx, 40px), var(--dy, -200px), 0); opacity: 0; }
}

/* ---------- workflow network (decorative) ---------- */
.ah-loader__network { position: absolute; inset: 0; pointer-events: none; opacity: 0.32; }
.ah-loader__network path {
  fill: none;
  stroke: var(--ember);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  animation: ah-stroke-flow 20s linear infinite;
}
@keyframes ah-stroke-flow { to { stroke-dashoffset: -240; } }
.ah-loader__network circle {
  fill: var(--ember);
  filter: drop-shadow(0 0 6px var(--ember));
  animation: ah-node-pulse 3s ease-in-out infinite;
}
.ah-loader__network circle:nth-child(odd)  { animation-delay: 0.5s; }
.ah-loader__network circle:nth-child(3n)   { animation-delay: 1s;   }
.ah-loader__network circle:nth-child(4n)   { fill: var(--ochre); filter: drop-shadow(0 0 6px var(--ochre)); }
@keyframes ah-node-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.35); opacity: 1; }
}

/* ---------- centerpiece ---------- */
.ah-loader__center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; padding: 6vh 4vw; text-align: center;
}
.ah-monogram {
  position: relative; width: 160px; height: 160px;
  display: grid; place-items: center; isolation: isolate;
}
.ah-monogram__halo {
  position: absolute; inset: -40%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(247, 121, 72, 0.60) 0%, transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(200, 162, 74, 0.50) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(224, 91, 37, 0.45) 0%, transparent 55%);
  filter: blur(40px);
  opacity: 0.7;
  animation: ah-halo-breathe 5s ease-in-out infinite;
  z-index: -1;
}
@keyframes ah-halo-breathe {
  0%, 100% { opacity: 0.5;  transform: scale(1);    }
  50%      { opacity: 0.95; transform: scale(1.12); }
}
.ah-monogram__img {
  /* Shrunk to 78% so the AH glyph sits comfortably inside the ring with a
     visible halo gap. Earlier the letters touched the ring rim and read as
     mis-aligned even though the geometry was correct. */
  width: 78%; height: 78%;
  object-fit: contain;
  border-radius: 50%;
  animation: ah-mono-breathe 4.2s ease-in-out infinite;
  filter:
    drop-shadow(0 0 56px rgba(247, 121, 72, 0.55))
    drop-shadow(0 18px 40px rgba(224, 91, 37, 0.40));
}
@keyframes ah-mono-breathe {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.04) rotate(0.4deg); }
}

/* ---------- concentric pulse rings (video reference) ----------
   Three thin rings emanating outward from the monogram on a stagger.
   They give the loader the "energy radiating from a glowing core" feel
   from the reference video. */
.ah-monogram__pulse {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  border: 1.5px solid rgba(247, 121, 72, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: ah-pulse-out 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 18px rgba(247, 121, 72, 0.40);
}
.ah-monogram__pulse--1 { animation-delay: 0s;    }
.ah-monogram__pulse--2 { animation-delay: 1.2s;  }
.ah-monogram__pulse--3 { animation-delay: 2.4s;  }
@keyframes ah-pulse-out {
  0%   { opacity: 0;     transform: translate(-50%, -50%) scale(0.7); border-width: 2px; }
  18%  { opacity: 0.85;  transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0;     transform: translate(-50%, -50%) scale(2.2); border-width: 0.5px; }
}

/* ---------- cascading sparks plume (video reference) ----------
   A column of bright dust pouring out from beneath the monogram. The .ah-spark
   elements are JS-spawned with random horizontal positions and animation
   delays; the keyframes do the falling motion. */
.ah-monogram__sparks {
  position: absolute;
  left: 50%; top: 100%;
  width: 220%;
  height: 220px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.ah-spark {
  position: absolute;
  top: 0;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 188, 1) 0%, rgba(247, 121, 72, 0.85) 45%, transparent 75%);
  box-shadow: 0 0 6px rgba(247, 121, 72, 0.8);
  opacity: 0;
  animation: ah-spark-fall var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes ah-spark-fall {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0)              scale(0.6); }
  12%  { opacity: 1;    }
  85%  { opacity: 0.7;  }
  100% { opacity: 0;    transform: translate3d(var(--dx, 0), var(--dy, 100px), 0) scale(0.4); }
}

/* progress ring — centered on the monogram disc.
   Explicit pixel dimensions; ring sits 18px outside the 160px monogram on
   every side so the AH letterforms have a clear halo gap to the rim.
   `place-self: start` escapes `place-items: center` on the grid parent
   which otherwise clamps the abs-positioned SVG's width to the monogram. */
.ah-monogram__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 196px;
  height: 196px;
  min-width: 196px;
  min-height: 196px;
  max-width: none;
  max-height: none;
  place-self: start;
  display: block;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
  /* Reference-video glow: a tight inner core plus a wider outer halo on the
     entire SVG, giving the rim that "lit neon line" look. */
  filter:
    drop-shadow(0 0  4px rgba(255, 220, 188, 0.65))
    drop-shadow(0 0 14px rgba(247, 121, 72, 0.70))
    drop-shadow(0 0 26px rgba(224, 91, 37, 0.45));
}
.ah-monogram__ring-track,
.ah-monogram__ring-fill { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ah-monogram__ring-track {
  stroke: rgba(244, 239, 230, 0.16);
  stroke-width: 1.5;
}
.ah-monogram__ring-fill  {
  stroke: url(#ah-ring-grad);
  stroke-width: 2.6;
  /* Visual progress only — no numeric label is rendered in the DOM. The
     dasharray is JS-driven via updateRing(). */
  stroke-dasharray: 1 1000;
  transition: stroke-dasharray 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- scene card ---------- */
.ah-scene {
  margin-top: 56px;
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  min-height: 132px;
}
.ah-scene__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(244, 239, 230, 0.04);
  border: 1px solid var(--ah-line);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--ember-soft);
  position: relative; overflow: hidden;
}
.ah-scene__icon::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(247,121,72,.20), rgba(200,162,74,.18) 55%, rgba(126,29,29,.18));
  opacity: 0.85;
  pointer-events: none;
}
.ah-scene__icon svg { width: 28px; height: 28px; stroke-width: 1.5; position: relative; }

.ah-scene__text { display: flex; flex-direction: column; gap: 6px; max-width: 28em; }
.ah-scene__label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500; font-size: 22px;
  letter-spacing: -0.015em; color: var(--ah-cream); line-height: 1.25;
}
.ah-scene__sub {
  font-size: 13.5px; letter-spacing: 0.01em;
  color: var(--ah-cream-dim); line-height: 1.55;
}

.ah-scene__icon, .ah-scene__text > * {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.ah-scene.is-leaving  .ah-scene__icon,
.ah-scene.is-leaving  .ah-scene__text > * { opacity: 0; transform: translateY(-8px); }
.ah-scene.is-entering .ah-scene__icon,
.ah-scene.is-entering .ah-scene__text > * { opacity: 0; transform: translateY(8px); }
.ah-scene.is-entering .ah-scene__text > *:nth-child(2) { transition-delay: 0.08s; }

/* ---------- checklist ---------- */
.ah-checklist {
  margin-top: 44px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 30em; width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.06em; text-align: left;
}
.ah-check {
  display: flex; align-items: center; gap: 12px;
  color: var(--ah-cream-fade); opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s, transform 0.5s, color 0.4s;
}
.ah-check.is-shown { opacity: 1; transform: translateY(0); }
.ah-check.is-done  { color: var(--ah-cream-dim); }
.ah-check__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ah-line-2);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: border-color 0.4s, background 0.4s;
}
.ah-check.is-done .ah-check__dot {
  border-color: var(--ember);
  background: var(--ember);
  box-shadow: 0 0 12px var(--ember-glow);
}
.ah-check__dot svg { width: 10px; height: 10px; color: var(--ah-ink); opacity: 0; transition: opacity 0.3s; }
.ah-check.is-done .ah-check__dot svg { opacity: 1; }
.ah-check__label { letter-spacing: 0.04em; }

/* ---------- brand stamp (top-left) ---------- */
.ah-loader__brand {
  position: absolute; top: 28px; left: 32px;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; font-size: 16px;
  letter-spacing: -0.015em; color: var(--ah-cream);
  z-index: 3; opacity: 0.92;
}
.ah-loader__brand .ai {
  background: linear-gradient(135deg, var(--ember-soft), var(--ember), var(--ochre));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700; position: relative;
}
.ah-loader__brand .ai::after {
  content: '';
  position: absolute; top: -3px; right: -8px;
  width: 6px; height: 6px;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%; filter: blur(0.5px);
}

/* ---------- workflow tag (top-right) ---------- */
.ah-loader__tag {
  position: absolute; top: 28px; right: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ah-cream-fade);
  z-index: 3;
  display: flex; align-items: center; gap: 8px;
}
.ah-loader__tag::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px var(--ember);
  animation: ah-tag-pulse 1.6s ease-in-out infinite;
}
@keyframes ah-tag-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* ---------- footnote ---------- */
.ah-loader__foot {
  position: absolute; bottom: 24px; left: 0; right: 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.35); z-index: 3;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .ah-monogram { width: 140px; height: 140px; }
  .ah-monogram__ring { width: 176px; height: 176px; min-width: 176px; min-height: 176px; }
  .ah-scene { margin-top: 40px; }
  .ah-scene__label { font-size: 18px; }
  .ah-scene__sub { font-size: 12.5px; }
  .ah-checklist { margin-top: 28px; max-width: 90vw; font-size: 10.5px; }
  .ah-loader__brand { top: 18px; left: 18px; font-size: 14px; }
  .ah-loader__tag { top: 18px; right: 18px; font-size: 9.5px; }
  .ah-loader__bg::before { background-size: 60px 60px; }
}
@media (max-width: 420px) {
  .ah-monogram { width: 116px; height: 116px; }
  .ah-monogram__ring { width: 152px; height: 152px; min-width: 152px; min-height: 152px; }
  .ah-checklist { display: none; }
}

/* ---------- compact mode ----------
   For short cycles (e.g. 4s home-page load) we hide the scene + checklist
   and let the ring + monogram carry the whole moment. */
.ah-loader.is-compact .ah-scene,
.ah-loader.is-compact .ah-checklist { display: none; }
.ah-loader.is-compact .ah-loader__center { padding-top: 0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ah-loader__bg::before, .ah-particle,
  .ah-loader__network path, .ah-loader__network circle,
  .ah-monogram__halo, .ah-monogram__img,
  .ah-loader__tag::before { animation: none; }
  .ah-monogram__ring-fill { transition: none; }
  .ah-scene__icon, .ah-scene__text > * { transition-duration: 0.2s; }
}