/* The Stoa site: ambience, glass, the hero stage and scroll motion.
   Classes on <html>, set by the inline script and js/site.js:
     js       scripts run
     motion   no reduced-motion preference: reveals, the colonnade drawing in, the cursor aura
     io       site.js reveals sections once with IntersectionObserver
     pointer  a mouse is over the page
   Without them the page is complete and still: the hero shows the colonnade as a static drawing. */

/* ── Warm ambience 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), .12), rgba(var(--accent-rgb), .03) 60%, 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: var(--accent);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root block); }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html:not(.js) .progress { display: none; }

/* ── Glass ────────────────────────────────────────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; border: 1px solid var(--line-2); background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
}
.glass::before { /* soft gold light 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 48%);
  transition: opacity .5s;
}
.glass:hover::before { opacity: 1; }

/* ── The hero stage: a stoa (a covered colonnade, the porch the school was named after) at sunrise ── */
.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: var(--sky); }
.hero-art {
  position: absolute; z-index: -2; left: 50%; top: calc(var(--nav-h) + 5vh); width: min(86vw, 62vh); aspect-ratio: 10 / 7;
  transform: translateX(-50%); color: var(--accent);
}
.hero-art svg { width: 100%; height: 100%; overflow: visible; }
.hero-art .sun { fill: rgba(var(--accent-rgb), .16); }
.hero-art .halo { fill: none; stroke: currentColor; stroke-width: .6; opacity: .25; }
.hero-art .stoa { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; opacity: .55; }
.hero-art .flutes { fill: none; stroke: currentColor; stroke-width: .5; opacity: .25; }
html.motion .hero-art .stoa { stroke-dasharray: 1400; animation: draw 3.2s var(--ease) both; }
html.motion .hero-art .flutes { animation: fade 2.4s 1.4s var(--ease) both; }
html.motion .hero-art .sun { transform-origin: 200px 150px; animation: rise 3.6s var(--ease) both, glow 7s 3.6s ease-in-out infinite; }
@keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes glow { 50% { fill: rgba(var(--accent-rgb), .24); } }
.hero-stage::after { /* keeps the copy readable and fades the stage into the page */
  content: ""; position: absolute; inset: auto 0 0; height: 56%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--fade) 50%, var(--bg));
}
.hero-copy { position: relative; padding-bottom: clamp(100px, 12.5vh, 150px); }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 30px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue:hover { color: var(--head); }
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--accent), 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: IntersectionObserver, once (content never hides again) ──────────────────────────────── */
html.io .reveal { opacity: 0; translate: 0 30px; 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; }

/* the overview phones rise into place */
html.motion .trio .phone { transition: transform 1.1s var(--ease); }
html.motion.ready .trio:not(.in) figure:not(.main) .phone { transform: translateY(40px) rotate(var(--tilt, 0deg)); }
.trio figure:first-child { --tilt: -2deg; }
.trio figure:last-child { --tilt: 2deg; }


@media (max-width: 920px) {
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  .hero-stage { min-height: 680px; }
  .hero-art { width: min(92vw, 52vh); top: calc(var(--nav-h) + 3vh); }
  .hero-copy { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress, .aura { display: none; }
  .trio .phone { transform: none !important; }
}

/* Former style="" attributes, now classes: the strict Content-Security-Policy blocks inline styles. */
.sx-c-accent { --c: var(--accent) !important; }