/* =========================================================
   Home hero, fifth take: the school (index.html .hero--school,
   script: assets/js/hero.js)

   The dark sea chart from the showroom (live contour lines, a lime
   glow low left and a blue one high right) and the copy bottom left,
   as before. On the right, no cards: a school of a few thousand dots
   swims as one fish from the builder's engraving library, scatters
   round the pointer, and every few seconds balls up and comes out as
   the next. Under it, the fish's name and a link that puts it on a
   drawer in the 3D builder.

   Going back: every earlier hero is kept whole in backups/ (README).
   ========================================================= */

.hero--school { isolation: isolate; }
.hero--school::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(38% 42% at 16% 84%, rgba(220, 243, 67, 0.12), transparent 70%),
    radial-gradient(42% 46% at 80% 12%, rgba(56, 97, 219, 0.34), transparent 70%),
    radial-gradient(60% 60% at 60% 60%, rgba(169, 214, 255, 0.05), transparent 70%);
  animation: qbw-glow 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes qbw-glow { to { transform: translate(4%, -3%) scale(1.06); } }
.hero--school.hero--live-topo .hero__topo-live {
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(circle 340px at var(--mx, 50%) var(--my, -600px), #000 0%, rgba(0, 0, 0, 0.45) 100%);
          mask-image: radial-gradient(circle 340px at var(--mx, 50%) var(--my, -600px), #000 0%, rgba(0, 0, 0, 0.45) 100%);
}

.qbw {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  column-gap: 48px;
  padding: calc(var(--header-h) + 18px) var(--pad) 86px;   /* clear of the helm */
}

/* ---------- the copy ---------- */
.qbw__copy { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding-bottom: 6px; }
.qbw__title { font-weight: 300; }
.qbw__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qbw__kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime);
  opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.qbw__kicker::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.qbw.is-in .qbw__kicker { opacity: 1; transform: none; }
.qbw__line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.12em; font-size: clamp(46px, 6.4vw, 112px); line-height: 0.98; letter-spacing: -0.035em; }
.qbw__line > span { display: inline-block; transform: translateY(108%); transition: transform 1.15s var(--ease); }
.qbw__line:nth-child(3) > span { transition-delay: 0.12s; }
.qbw.is-in .qbw__line > span { transform: none; }
.qbw__wave-word { position: relative; display: inline-block; font-style: normal; }
.qbw__wave { position: absolute; left: 0.02em; bottom: -0.1em; width: calc(100% - 0.04em); height: 0.16em; overflow: hidden; }
.qbw__wave path { fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: qbw-wave 1.8s linear infinite; }
@keyframes qbw-wave { to { transform: translateX(-30px); } }
.qbw__lead { max-width: 420px; margin-top: 24px; font-size: 16px; line-height: 24px; color: rgba(253, 254, 255, 0.75); }
.qbw__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.qbw__ctas .btn { height: 50px; padding: 0 26px; font-size: 12.5px; }
.qbw__btn-main { background: var(--lime); border-color: var(--lime); color: var(--ink); box-shadow: 0 12px 34px -10px rgba(220, 243, 67, 0.6); }
.qbw__btn-main:hover { background: var(--white); border-color: var(--white); }
.qbw__btn-main .dot { background: var(--ink); box-shadow: 0 0 0 3px rgba(16, 17, 21, 0.16); animation: none; }
.qbw__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 470px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(253, 254, 255, 0.14); }
.qbw__proof li { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qbw__proof b { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 22px; line-height: 24px; font-weight: 600; color: var(--white); }
.qbw__proof b small { margin-left: 3px; font-size: 12px; color: rgba(253, 254, 255, 0.55); }
.qbw__proof span { font-size: 12px; line-height: 16px; color: rgba(253, 254, 255, 0.55); }

/* ---------- the school ---------- */
/* the dots: hero.js sizes and places the canvas over .school__stage, with room
   round it for the ones the pointer scatters */
.school__canvas { position: absolute; left: 0; top: 0; z-index: 1; display: block; pointer-events: none; }

.school { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.school__stage { flex: 1; min-height: 0; -webkit-tap-highlight-color: transparent; }
.school__stage.is-over { cursor: pointer; }

.school__cap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease) 0.6s, transform 0.9s var(--ease) 0.6s;
}
.qbw.is-in .school__cap { opacity: 1; transform: none; }
/* the hairline along the top fills while a fish is on show */
.school__bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(253, 254, 255, 0.14); }
.school__bar i { position: absolute; inset: -0.5px 0; background: var(--lime); box-shadow: 0 0 8px rgba(220, 243, 67, 0.6); transform-origin: left; transform: scaleX(0); }

.school__title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.school__k {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10.5px; line-height: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(253, 254, 255, 0.5);
}
.school__count { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--lime); }
.school__name {
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.school__name.is-out { opacity: 0; transform: translateY(-10px); filter: blur(4px); transition-duration: 0.25s; }
.school__name.is-pre { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: none; }

.school__acts { flex: none; display: flex; align-items: center; gap: 8px; }
.school__go {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 18px;
  border: 1px solid rgba(253, 254, 255, 0.22);
  border-radius: 999px;
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white);
  background: rgba(16, 17, 21, 0.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.school__go svg { width: 15px; height: 15px; color: var(--lime); transition: transform 0.3s var(--ease); }
.school__btn {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(253, 254, 255, 0.22);
  border-radius: 50%;
  color: var(--white);
  background: rgba(16, 17, 21, 0.35);
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.15s;
}
.school__btn svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .school__go:hover { border-color: var(--lime); background: rgba(220, 243, 67, 0.08); }
  .school__go:hover svg { transform: translateX(3px); }
  .school__btn:hover { border-color: var(--lime); color: var(--lime); }
}
.school__btn:active { transform: scale(0.94); }
.school__go:focus-visible, .school__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ---------- shorter laptop screens: less between things ---------- */
@media (min-width: 1101px) and (max-height: 820px) {
  .qbw__proof { display: none; }
  .school__cap { padding-top: 16px; }
  .school__name { font-size: 22px; line-height: 26px; }
}
/* narrower laptops: the arrows go, the fish and the link stay */
@media (min-width: 1101px) and (max-width: 1280px) {
  .school__btn { display: none; }
}

/* ---------- tablets and phones: the school on top, the copy under it ---------- */
@media (max-width: 1100px) {
  .hero--school { height: auto; min-height: 0; }
  .qbw { position: relative; grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: calc(var(--header-h) + 20px) var(--pad) 48px; }
  .school { order: -1; }
  .school__stage { flex: none; aspect-ratio: 16 / 8.5; }
}
@media (max-width: 800px) {
  .qbw { row-gap: 22px; padding: calc(var(--header-h) + 10px) var(--pad) 40px; }
  .qbw__kicker { margin-bottom: 12px; font-size: 11px; line-height: 14px; letter-spacing: 0.14em; }
  .qbw__kicker::before { width: 20px; }
  .qbw__line { font-size: clamp(42px, 12.4vw, 64px); }
  .qbw__lead { margin-top: 16px; font-size: 14.5px; line-height: 21px; max-width: 36ch; }
  .qbw__ctas { gap: 8px; margin-top: 20px; }
  .qbw__ctas .btn { height: 46px; padding: 0 15px; font-size: 11px; gap: 10px; }
  .qbw__proof { gap: 12px; margin-top: 26px; padding-top: 16px; }
  .qbw__proof b { font-size: 18px; line-height: 20px; }
  .qbw__proof b small { font-size: 10px; }
  .qbw__proof span { font-size: 11px; line-height: 14px; }

  .school__stage { aspect-ratio: 16 / 8.6; }
  .school__cap { flex-wrap: wrap; gap: 12px; padding-top: 14px; }
  .school__title { gap: 6px; }
  .school__k { font-size: 9.5px; line-height: 12px; letter-spacing: 0.12em; }
  .school__name { font-size: 20px; line-height: 24px; }
  .school__acts { gap: 6px; }
  .school__go { height: 38px; padding: 0 14px; font-size: 10px; gap: 8px; }
  .school__btn { width: 38px; height: 38px; }
}
/* the narrowest phones: the link on a line of its own */
@media (max-width: 400px) {
  .school__acts { width: 100%; }
  .school__go { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--school::before, .qbw__wave path { animation: none; }
  .qbw__kicker, .qbw__line > span, .school__cap { opacity: 1; transform: none; }
  .school__name, .school__name.is-out, .school__name.is-pre { opacity: 1; transform: none; filter: none; transition: none; }
}