/* ==========================================================================
   start.css — Start (index.html)
   ==========================================================================
   Start is de rolafhankelijke ingang, geen bestemming: hij draagt daarom
   geen navigatiebalk maar de bestemmingen zélf als kaarten. De eerste kaart
   is zwart gevuld — Start wijst één kant op — de rest staat in omtrek.

   Vormtaal (designhandoff §2/§5.1): radius 0, afschuining linksboven en
   rechtsonder, rand als `inset` box-shadow, en de vijf leerlijnen als gevulde
   ruiten in de kop. De naam op een bestemmingskaart is sinds ontwerp `3a`
   Quicksand-groot en niet meer een Oswald-label in kapitalen.

   De basis (`.nav-card`, `.cards`) komt uit utility-pages.css; hier staat
   alleen wat Start eigen maakt.
   ========================================================================== */

/* Ontwerp `3a`: groot en rechtsboven in de kop, niet klein en gecentreerd
   onder de eyebrow. Op 22px zijn de vijf leerlijnen het merkteken van de
   pagina; op 13px waren ze een streepje interpunctie. */
.index-page .start-ruiten {
  display: flex;
  gap: 0.4375rem;
  align-items: flex-start;
  padding-top: 0.5rem;
  margin: 0;
}

.index-page .start-ruit {
  --vt-ruit-maat: 22px;
}

/* --- Bestemmingskaarten ------------------------------------------------- */

.index-page .start-kaart {
  position: relative;
  gap: 0;
  padding: 1.375rem 1.5rem;
  color: var(--vms-ink-900);
  background: var(--vms-white);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900);
  clip-path: polygon(
    var(--vt-schuin-l, 14px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-l, 14px)),
    calc(100% - var(--vt-schuin-l, 14px)) 100%,
    0 100%,
    0 var(--vt-schuin-l, 14px)
  );
}

.index-page .start-kaart:hover {
  background: var(--vms-ink-100);
  transform: none;
}

/* `clip-path` snijdt een outline weg: de focusring leeft binnen de vorm. */
.index-page .start-kaart:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--vt-lijn-dik, 2.5px) var(--vms-ink-900),
    inset 0 0 0 calc(var(--vt-lijn-dik, 2.5px) + 2px) var(--vms-white);
}

/* De naam van de bestemming draagt de kaart (ontwerp `3a`): Quicksand groot,
   niet Oswald klein in kapitalen. Een uppercase label van 14px las als een
   categorie boven een kaart; hier ís het label de kaart. */
.index-page .start-kaart h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--fw-heading);
  letter-spacing: -0.02em;
  text-transform: none;
}

.index-page .start-kaart p {
  margin: 0.375rem 0 0;
  color: var(--vms-ink-700);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}

/* De ingang van de dag: zwart gevuld, de rest in omtrek. */
.index-page .start-kaart--nu {
  color: var(--vms-white);
  background: var(--vms-ink-900);
}

.index-page .start-kaart--nu:hover {
  background: var(--vms-ink-700);
}

/* `.index-page .nav-card h2` uit utility-pages.css zet `color: var(--text)`
   en heeft dezelfde specificiteit als de kaartregel hierboven, dus zonder
   deze regel staat het label zwart op het zwarte vlak — onzichtbaar. */
.index-page .start-kaart--nu h2 {
  color: var(--vms-white);
}

.index-page .start-kaart--nu p {
  color: rgb(255 255 255 / 0.75);
}

.index-page .start-kaart--nu:focus-visible {
  box-shadow:
    inset 0 0 0 var(--vt-lijn-dik, 2.5px) var(--vms-white),
    inset 0 0 0 calc(var(--vt-lijn-dik, 2.5px) + 2px) var(--vms-ink-900);
}

/* ==========================================================================
   De zwarte kop (ontwerp 3a)
   ==========================================================================
   Start opent op inkt: de kop is de afzender en draagt de vijf
   leerlijnkleuren, dus alles eromheen blijft zwart-wit. De kleuren staan hier
   expliciet omdat dit blok op een zwart vlak leest en niet op de paginakleur.

   Contrast op `--vms-ink-900` (#1d1d1b): wit 16,9:1 · 80% wit 11,1:1 ·
   60% wit 6,8:1 — alle drie ruim boven AA. `--text-muted` staat hier
   bewust niet: dat token is tegen de paginakleur gekalibreerd, niet tegen
   zwart, en haalt op inkt geen AA.
   ========================================================================== */

.index-page .hero {
  background: var(--vms-ink-900);
}

.index-page .hero-eyebrow,
.index-page .hero h1 {
  color: var(--vms-white);
}

/* Op een telefoon (390px) viel "Schoolinformatie" op 3rem rechts van het
   scherm af (ownerpunt DEC-040, 2026-08-30): de kop is één woord en breekt
   dus niet. De grootte loopt daarom mee met de viewport — 3rem op desktop,
   op 390px ±41px en op 360px ±38px zodat het woord past — en onder 480px
   wijkt de brede rechterpadding van de hero (die ruimte is voor de vaste
   avatar, en die staat alleen naast de eyebrow); links blijft 2,5rem, zodat
   de kop uitgelijnd blijft met "Waar wil je heen" eronder. */
.index-page .hero h1 {
  font-size: clamp(2rem, 10.6vw, 3rem);
}

@media (max-width: 480px) {
  .index-page .hero {
    padding: 2.5rem 1.25rem 2rem 2.5rem;
  }

  .index-page .hero-eyebrow {
    max-width: calc(100% - var(--app-bar-slot, 5rem));
  }
}

.index-page .hero-lead {
  color: rgb(255 255 255 / 0.8);
}

/* ==========================================================================
   Ecosociale-cirkel hero (designhandoff §7)
   ==========================================================================
   Een aankomst die éindigt: de constellatie zwaait in, de vijf ruiten
   poppen op, de haarlijnen groeien, twee rimpels lopen uit en de kern
   pulseert drie keer. Daarna staat het stil en is de figuur een
   aanwijsbare legenda.

   De regel uit §2 draagt dit hele blok: `rotate(45deg)` staat in de
   `transform` van de ruit zélf en nooit in de keyframes. Wat beweegt is
   uitsluitend de lósse `scale`- en `opacity`-eigenschap, en dan nog op een
   omhullende laag — zo is de ruit ook een ruit zolang de animatie nog niet
   gestart is (`animation-delay`) of helemaal niet draait
   (`prefers-reduced-motion`). Elke `scale: 0` leeft daarom alleen ín een
   keyframe: de eindstand zonder animatie is de rustende figuur.

   Lagen per satelliet:
     .start-hero-satelliet  plaatsing op de cirkel (rotate·translate·rotate)
     .start-hero-rev        contra-rotatie tijdens de aankomst
     .start-hero-pop        scale/opacity van het opkomen én van het aanwijzen
     .vt-ruit               de ruit zelf — draagt alleen rotate(45deg)
   ========================================================================== */

/* Ontwerp `3a`: de cirkel staat rechts náást de bestemmingen in een eigen
   kaart met het bijschrift eronder — niet als strook onder de voet, waar hij
   buiten beeld viel. */
.index-page .start-cirkel {
  background: var(--vms-white);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900);
  clip-path: polygon(
    var(--vt-schuin-l, 14px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-l, 14px)),
    calc(100% - var(--vt-schuin-l, 14px)) 100%,
    0 100%,
    0 var(--vt-schuin-l, 14px)
  );
}

.index-page .start-cirkel-voet {
  padding: 1rem 1.5rem 1.375rem;
  border-top: 1px solid var(--border-subtle);
}

.index-page .start-cirkel-voet .vms-eyebrow {
  display: block;
  margin-bottom: 0.375rem;
}

/* `min-height` houdt het bijschrift stil terwijl het per aangewezen ruit
   wisselt: zonder die ondergrens springt de kaart bij elke hover. */
.index-page .start-cirkel-voet .about-strip-text {
  min-height: 2.9em;
  margin: 0;
  color: var(--vms-ink-700);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.index-page .start-hero {
  position: relative;
  width: 100%;
  height: 248px;
  overflow: hidden;
}

/* --- Rimpels -------------------------------------------------------------
   Basis-opacity 0: de animatie eindigt onzichtbaar, dus zonder animatie
   hoort er ook niets te staan. */
.index-page .start-hero-rimpel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 118px;
  height: 118px;
  margin: -59px 0 0 -59px;
  opacity: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-300);
  transform: rotate(45deg);
  animation: hero-rimpel 2.6s ease-out 2 both;
}

.index-page .start-hero-rimpel--na {
  animation-delay: 1.3s;
}

/* --- De constellatie ---------------------------------------------------- */

.index-page .start-hero-veld {
  position: absolute;
  inset: 0;
  display: block;
  animation: hero-intro 3.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Haarlijn van de kern naar een satelliet: 180° + n·72°, delay 0,6 → 1,2s. */
.index-page .start-hero-lijn {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1px;
  height: 76px;
  margin-left: -0.5px;
  background: var(--vms-ink-100);
  transform-origin: top center;
  transform: rotate(calc(180deg + var(--start-hero-hoek, 0deg)));
  animation: hero-lijn 0.8s ease-out both;
  animation-delay: calc(0.6s + var(--start-hero-n, 0) * 0.15s);
}

/* Satelliet op de cirkel: rotate(N) translateY(-76px) rotate(-N). */
.index-page .start-hero-satelliet {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  transform: rotate(var(--start-hero-hoek, 0deg)) translateY(-76px)
    rotate(calc(-1 * var(--start-hero-hoek, 0deg)));
}

.index-page .start-hero-rev {
  display: block;
  width: 100%;
  height: 100%;
  animation: hero-intro-rev 3.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Opkomen (delays 0,35 → 1,07s) én de aanwijs-staat. Beide zitten op deze
   laag: de ruit eronder houdt zijn rotate(45deg) ongemoeid. */
.index-page .start-hero-pop {
  display: block;
  width: 100%;
  height: 100%;
  transition:
    scale var(--dur-base) var(--ease-soft),
    opacity var(--dur-base) var(--ease-soft);
  animation: hero-pop 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.35s + var(--start-hero-n, 0) * 0.18s);
}

.index-page .start-hero-ruit {
  --vt-ruit-maat: 100%;
  display: block;
}

/* --- Aanwijzen ---------------------------------------------------------- */

.index-page .start-hero-pop.is-aangewezen {
  scale: 1.4;
}

.index-page .start-hero-pop.is-gedimd {
  scale: 0.76;
  opacity: 0.28;
}

/* --- Kern --------------------------------------------------------------- */

.index-page .start-hero-kern {
  position: absolute;
  top: 50%;
  left: 50%;
  --vt-ruit-maat: 34px;
  --vt-ruit-kleur: var(--vms-ink-900);
  --vt-lijn: 2px;
  display: block;
  margin: -17px 0 0 -17px;
  transition: box-shadow var(--dur-base) var(--ease-soft);
  animation: hero-kern 1.6s ease-in-out 0.4s 3 both;
}

/* De kern neemt de kleur van de aangewezen leerlijn over; js/index.js zet
   daarvoor --vt-ruit-kleur, de dikte komt van deze klasse. */
.index-page .start-hero-kern.is-aangewezen {
  --vt-lijn: 3px;
}

/* --- Keyframes (§7, letterlijk) ----------------------------------------- */

@keyframes hero-intro {
  from {
    transform: rotate(-150deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes hero-intro-rev {
  from {
    transform: rotate(150deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes hero-pop {
  from {
    scale: 0;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes hero-lijn {
  from {
    scale: 1 0;
  }
  to {
    scale: 1 1;
  }
}

@keyframes hero-rimpel {
  0% {
    scale: 0.2;
    opacity: 0.5;
  }
  100% {
    scale: 2.2;
    opacity: 0;
  }
}

@keyframes hero-kern {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 0.64;
  }
}

/* --- Reduced motion -----------------------------------------------------
   Alles uit. De eindstand klopt dan uit zichzelf: geen enkele regel buiten
   de keyframes zet `scale` of `opacity` op de laag die opkomt, dus alle
   vijf de ruiten staan gewoon op scale 1 en opacity 1, de haarlijnen op
   volle lengte, de constellatie op 0°, en de rimpels op hun eigen
   basis-opacity 0 — precies waar de animatie ze ook zou achterlaten.
   Aanwijzen blijft werken; alleen de overgang ernaartoe is direct. */

@media (prefers-reduced-motion: reduce) {
  .index-page .start-hero-rimpel,
  .index-page .start-hero-veld,
  .index-page .start-hero-lijn,
  .index-page .start-hero-rev,
  .index-page .start-hero-pop,
  .index-page .start-hero-kern {
    animation: none;
  }
}

/* --- Tellers op de bestemmingskaarten (ontwerp 3a) ----------------------
   Zwart-op-wit op de gevulde kaart, wit-op-zwart op de rest — de badge
   staat altijd in het tegenovergestelde van zijn kaart, zodat hij één
   waarde leest en geen status suggereert. Radius 0, dus geen pil. */

/* De kaart blijft de flexkolom uit utility-pages.css (`.arrow` hangt met
   `margin-top: auto` onderaan); de badge zweeft er rechtsboven overheen. */
.index-page .start-kaart-telling {
  position: absolute;
  top: 1.375rem;
  right: 1.5rem;
  padding: 0.1rem 0.55rem;
  color: var(--vms-white);
  background: var(--vms-ink-900);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.index-page .start-kaart--nu .start-kaart-telling {
  color: var(--vms-ink-900);
  background: var(--vms-white);
}