/* ==================================================================
   HIS — Academics hero: the academic process as one walk.
   The globe scene from the earlier About page (v2), one line of text that changes with
   each stage, and porthole photos that open in the sky beside it.
   Loads after styles.css; driven by academics-hero.js.
   ================================================================== */

.ac-hero { position: relative; height: 660vh; }
.ac-stage { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; background: #fff; }

/* ---------- the one line ----------
   Every line sits in the same grid cell. Nothing here is timed: academics-hero.js scrubs two
   values per line from the walk itself, --e (0..1, arriving) and --x (0..1, leaving), and each
   word takes its own slice of them (by its index --i of --n words), so the words rise in one
   after another and lift away one after another, locked to the world under them. */
.ac-line {
  position: absolute; left: 0; right: 0; top: 15vh; z-index: 4; display: grid; justify-items: center;
  padding: 0 14vw; text-align: center; color: var(--ink); pointer-events: none;
  transition: color 1.2s ease;
  animation: acLineIn 1.4s var(--ease-out) 0.3s backwards;   /* once, on load; the camera uses transform */
}
@keyframes acLineIn { from { opacity: 0; translate: 0 14px; } }
.ac-msg { --e: 0; --x: 0; --n: 8; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ac-msg.on { pointer-events: auto; }
.ac-msg p {
  margin: 0; max-width: 30em;
  font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(24px, 2.5vw, 44px); line-height: 1.22;
}
.ac-msg .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ac-msg .w > span, .ac-go {
  --ei: clamp(0, calc(var(--e) * (1 + 0.09 * var(--n)) - 0.09 * var(--i)), 1);
  --xi: clamp(0, calc(var(--x) * (1 + 0.05 * var(--n)) - 0.05 * var(--i)), 1);
}
.ac-go { --xi: clamp(0, calc(var(--x) * 2.2), 1); }   /* the link arrives last but leaves first */
.ac-msg .w > span { display: inline-block; transform: translateY(calc((1 - var(--ei)) * 105% - var(--xi) * 105%)); opacity: calc(var(--ei) - var(--xi)); }
.ac-msg .w.hi { font-weight: 500; color: var(--gold); transition: color 1.2s ease; }

.ac-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-bottom: 3px;
  border-bottom: 1px solid currentColor; color: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
  opacity: calc(var(--ei) - var(--xi)); translate: 0 calc((1 - var(--ei)) * 10px - var(--xi) * 10px);
}
.ac-go i { font-style: normal; transition: transform 0.45s var(--ease-spring); }
.ac-go:hover i, .ac-go:focus-visible i { transform: translateX(5px); }
.ac-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* the harbour happens at dusk */
.ac-line.dusk { color: #fff; }
.ac-line.dusk .w.hi { color: #f3cf7d; }

/* ---------- the planet ---------- */
.ac-globe { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ac-globe canvas { display: block; width: 100%; height: 100%; animation: acGlobeRise 1.8s var(--ease-out) 0.15s both; }
@keyframes acGlobeRise { from { opacity: 0; transform: translateY(8vh); } to { opacity: 1; transform: none; } }

/* ---------- portholes ----------
   Scrubbed from the walk, like the words, on the same stretch of it (see academics-hero.js):
     --g     0..1  glides in from its own side and fades up
     --ring  0..1  the ring draws round from its gold start dot
     --open  0..1  the photo opens out of the centre and settles from a slight zoom
     --q  -.5..+.5 where the child is in the stretch: a slow drift with the world, in from the
                   side and up and away
   Leaving runs the same values back down: photo closes, ring undraws, it glides out. */
.ac-photos { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; }
.ac-ph {
  --o: -1; --g: 0; --ring: 0; --open: 0; --q: 0;
  position: absolute; top: var(--y); left: var(--x); width: var(--s); height: var(--s); margin: 0;
  transform:
    translate3d(calc((1 - var(--g)) * var(--o) * 5vw - var(--q) * 3vw), calc((1 - var(--g)) * 1.5vh - var(--q) * 5vh), 0)
    scale(calc(0.94 + 0.06 * var(--g)));
  opacity: var(--g);
}
.ac-ph.from-r { --o: 1; left: auto; right: var(--x); }
/* the ring: drawn round from the top, clockwise on the left and anticlockwise on the right */
.ac-ph svg { position: absolute; inset: -9%; width: 118%; height: 118%; overflow: visible; rotate: -90deg; }
.ac-ph.from-r svg { scale: 1 -1; }
.ac-ph circle {
  fill: none; stroke: currentColor; stroke-width: 1; color: rgba(23, 24, 28, 0.34);
  stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--ring));
  transition: color 1.2s ease;
}
/* the ring's start: a small gold dot, like the tips of the page's lines */
.ac-ph::before {
  content: ""; position: absolute; left: 50%; top: -9%; z-index: 1; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(196, 146, 29, 0.14);
  scale: clamp(0, calc(var(--ring) * 5), 1);
}
/* the photo opens out of the centre, like the hero's closing circle; a soft inner shade and a
   hairline rim make it read as a window rather than a sticker */
.ac-ph img, .ac-ph::after { clip-path: circle(calc(var(--open) * 50%) at 50% 50%); }
.ac-ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(calc(1.3 - 0.3 * var(--open))); filter: saturate(0.92); }
.ac-ph::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 -18px 40px -16px rgba(15, 22, 60, 0.35);
}
.ac-stage.dusk .ac-ph circle { color: rgba(255, 255, 255, 0.5); }

/* ---------- progress rail: the walk so far, one dot per stage ---------- */
.ac-rail {
  position: absolute; left: 50%; bottom: 5.5vh; z-index: 4; width: clamp(160px, 14vw, 240px); height: 1px; margin-left: calc(clamp(160px, 14vw, 240px) / -2);
  background: rgba(23, 24, 28, 0.16); pointer-events: none;
  opacity: 0; animation: fadeTo 1s ease 1.2s forwards; transition: opacity 0.6s ease, background 1.2s ease;
}
.ac-rail b { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: background 1.2s ease; }
.ac-rail i { position: absolute; top: 0; width: 5px; height: 5px; margin: -2px 0 0 -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(23, 24, 28, 0.35); transition: background 0.5s ease, box-shadow 0.5s ease, scale 0.6s var(--ease-spring); }
.ac-rail i.lit { background: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px rgba(196, 146, 29, 0.16); scale: 1.2; }
.ac-rail.gone { opacity: 0 !important; animation: none; }
.ac-stage.dusk .ac-rail { background: rgba(255, 255, 255, 0.25); }
.ac-stage.dusk .ac-rail b { background: #fff; }

/* the circle that opens out of the child onto the page below */
.ac-iris { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #fff; clip-path: circle(0px at 50% 50%); }

/* ---------- tablet / mobile ---------- */
@media (max-width: 900px) {
  .ac-hero { height: 560vh; }
  .ac-line { top: 13vh; padding: 0 6vw; }
  .ac-msg p { font-size: clamp(21px, 6vw, 30px); }
  .ac-go { margin-top: 14px; font-size: 13px; }
  .ac-rail { bottom: 4vh; }
  /* larger portholes, lower down between the line and the ground */
  .ac-ph { top: calc(var(--y) * 0.5 + 21vh); width: calc(var(--s) * 2.3); height: calc(var(--s) * 2.3); left: calc(var(--x) * 0.6); }
  .ac-ph.from-r { left: auto; right: calc(var(--x) * 0.6); }
}