/* Epoch site: ambient light, glass, the hero's map of when, scroll reveals and the progress bar.
   Classes on <html>, set by the inline script in <head> and by js/site.js:
     js       scripts run
     motion   no reduced-motion preference: reveals, the progress bar, the cursor aura and the live hero map
     io       site.js reveals sections once with IntersectionObserver
     pointer  a mouse is over the page
   Without them (no JS, reduced motion) the page is complete and still; the hero shows a still of the map. */

/* ── Ambient light behind everything; the cursor aura shines through the glass ─────────────────────── */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ambient); }
.aura {
  position: fixed; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s; will-change: transform;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .11), rgba(var(--accent-2-rgb), .04) 55%, transparent);
}
html.pointer .aura { opacity: 1; }

/* ── Scroll progress, along the bottom edge of the nav ─────────────────────────────────────────────── */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0)); background: linear-gradient(90deg, #8a6417, var(--accent-light));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .8);
}
html:not(.motion) .progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root block); }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Glass cards ──────────────────────────────────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(239, 230, 212, .045), rgba(239, 230, 212, .01)), rgba(28, 24, 19, .58);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(239, 230, 212, .06), 0 30px 80px -44px rgba(0, 0, 0, .9);
}
.glass::before { /* the glow under the cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(var(--accent-rgb), .14), transparent 46%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }

/* ── The hero: a map of when behind the name ───────────────────────────────────────────────────────── */
.hero { position: relative; z-index: 2; margin-top: calc(-1 * var(--nav-h)); }
.hero-stage {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 660px; max-height: 1100px;
}
.hero-sky {
  position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(120% 70% at 50% 0%, rgba(201, 162, 74, .1), transparent 60%), var(--bg-well);
}
.hero-sky::before { /* the still: the same map, rendered from the same data (no JS, reduced motion) */
  content: ""; position: absolute; inset: var(--nav-h) 0 auto; height: 64%;
  background: url("img/hero-still.webp?v=1.2.4") center top / contain no-repeat; opacity: .9;
}
html.live .hero-sky::before { display: none; }
.map-canvas { position: absolute; left: 0; right: 0; top: var(--nav-h); z-index: -2; width: 100%; height: 64%; opacity: 0; transition: opacity 1.4s var(--ease); }
.map-canvas.on { opacity: 1; }
.hero-stage::after { /* keeps the copy readable and fades the stage into the page */
  content: ""; position: absolute; inset: auto 0 0; height: 58%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(14, 11, 8, .78) 46%, var(--bg));
}
.hero-copy { position: relative; padding-bottom: clamp(52px, 9vh, 104px); }
.now {
  position: absolute; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); top: calc(var(--nav-h) + 18px); max-width: min(560px, 80vw);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; line-height: 1.5; color: var(--sub);
  text-shadow: 0 1px 10px rgba(14, 11, 8, .95), 0 0 2px rgba(14, 11, 8, .9);
}
.now b { display: block; font-weight: 500; font-size: 1.5rem; letter-spacing: -.02em; color: var(--accent-light); text-shadow: 0 0 18px rgba(var(--accent-rgb), .5); }
html:not(.live) .now { display: none; }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 30px; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sub);
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--accent-light), transparent); transform-origin: top; }
html.motion .scroll-cue i { animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

/* ── Reveals: one-shot, with IntersectionObserver (site.js adds html.io); once shown, they stay ─────── */
html.io .reveal { opacity: 0; translate: 0 34px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
html.io .reveal.in { opacity: 1; translate: none; }
html.io .reveal.d1 { transition-delay: .08s; }
html.io .reveal.d2 { transition-delay: .16s; }
html.io .trio .side.reveal { translate: 0 80px; transition-duration: 1.2s; }
html.io .trio .side.reveal.in { opacity: .92; translate: none; }

@media (max-width: 920px) {
  .hero-sky::before, .map-canvas { height: 52%; }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  .hero-stage { min-height: 640px; }
  .hero-sky::before { background-size: 168% auto; background-position: 58% top; height: 44%; }
  .map-canvas { height: 44%; }
  .now { font-size: .68rem; }
  .now b { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .progress, .aura { display: none; }
  .kicker .dot, .pill .dot { animation: none; }
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-c-culture { --c: var(--culture) !important; }
.sx-c-science { --c: var(--science) !important; }
.sx-c-discovery { --c: var(--discovery) !important; }
.sx-c-art { --c: var(--art) !important; }
.sx-c-politics { --c: var(--politics) !important; }
.sx-c-revolution { --c: var(--revolution) !important; }
.sx-c-rgba-224-169-85-8 { --c: rgba(224, 169, 85, .8) !important; }
.sx-c-rgba-58-142-194-8 { --c: rgba(58, 142, 194, .8) !important; }
.sx-c-rgba-39-165-103-7 { --c: rgba(39, 165, 103, .7) !important; }
.sx-c-rgba-39-165-103-6 { --c: rgba(39, 165, 103, .6) !important; }