/* Thumbwork Games — studio site
   Vierde opzet. De eerste was minium-rood en te hard; de tweede een grijze
   ondergrond met gekleurde tegels in een smalle kolom; de derde zette die
   tegels als banden over de volle breedte, en dat werden harde blokken
   die de achtergrond in stukken hakten.

   Nu is de pagina één lucht. Bovenaan helder hemelsblauw met zachte wolken,
   naar beneden toe dieper, en onderaan een wolkenrand waar de voettekst op
   wolkenwit staat. De inhoud staat direct op die lucht; er zijn geen
   vlakken meer, alleen dingen: schermafbeeldingen, knoppen, chips, de
   mascotte. Secties scheiden zich door ruimte en door grootte van de kop,
   niet door een rand.

   Kleur, met de contrastmeting erbij omdat die de opzet bepaalt:
     hemelsblauw  #0099FF  wit erop 3,0:1  -> alleen koppen en vette tekst
     diep blauw   #0077CC  wit erop 4,6:1  -> alles waar lopende tekst staat
     amber red    #D43D24  wit erop 4,6:1  -> knoppen en chips
     wolkenwit    #FDFDFE  diep blauw erop 4,6:1 -> wolken, voettekst
   De lucht wordt dus diep blauw voordat de eerste alinea begint, en de
   zachte vlekken verderop zijn allemaal donkerder dan de ondergrond, nooit
   lichter: een wolk van 4% wit onder een alinea haalt al geen 4,5:1 meer.

   Zelfgehost lettertype, geen enkel extern verzoek. */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #0099ff;
  --sky-deep: #0077cc;
  --sky-ink: #0077cc;      /* als TEKST op wolkenwit, 4,6:1 */
  --sky-ink-deep: #005fa8;
  --amber: #d43d24;
  --amber-deep: #b8321d;
  --cloud: #fdfdfe;
  --text: #fdfdfe;

  /* Op de witte grond onderaan: blauwe tekst, geen inkt. Koppen in amber
     (4,6:1 op wolkenwit), lopende tekst in dit blauw (5,4:1). */
  --ground-text: #006bbb;
  --ground-head: #d43d24;

  /* De donkere vlek in de lucht: dezelfde blauwe familie, dieper. */
    --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
  --step-3: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  --display: clamp(2.625rem, 1.1rem + 6.4vw, 5.25rem);

  --measure: 62ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --wrap: 74rem;

  /* De ruimte tussen twee secties. Groot, want ruimte is hier het enige
     wat secties uit elkaar houdt. */
  --section: clamp(4rem, 9vw, 7.5rem);

  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 1;
  --z-top: 100;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* De gloed achter een beeld steekt buiten zijn vak, en op een telefoon dus
   buiten het scherm. clip maakt dat onzichtbaar zonder dat de pagina
   zijwaarts kan schuiven; hidden alleen zou op iOS nog wel schuiven. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;

  /* De lucht onder alles is vlak diep blauw. Zachte donkere vlekken erin
     waren mooi, maar elk dekkend element dat met dezelfde kleur begint (de
     horizon) kreeg dan een zichtbare rechte rand waar de vlek eronder
     doorliep. Diepte komt nu van de gloed achter de beelden. */
  background-color: var(--sky-deep);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0;
}

a {
  color: inherit;
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cloud);
  color: var(--sky-ink);
  padding: 0.75rem 1rem;
  z-index: var(--z-top);
}
.skip:focus {
  left: 0;
}

/* ------------------------------------------------------------------ Secties
   Een .band is nu niets meer dan verticale ruimte. De naam is gebleven
   omdat de HTML hem gebruikt. */

.band {
  padding-block: calc(var(--section) / 2);
}

main > .band:first-child {
  padding-top: var(--section);
}

main > .band:last-child {
  padding-bottom: var(--section);
}

/* -------------------------------------------------------------------- Lucht
   De kop van de pagina. Helder hemelsblauw bovenaan dat overloopt in het
   diepe blauw van de rest, zodat er geen naad is. De wolken zijn twee
   zachte witte vlekken in pseudo-elementen; ze staan alleen hier, waar de
   tekst groot en vet is en 3:1 volstaat. */

.band-sky {
  position: relative;
  isolation: isolate;
  padding-block: 0;
  /* Het hemelsblauw loopt onderaan uit in niets, zodat de lucht van body
     erdoorheen komt en er geen naad is waar de hero ophoudt. */
  background: linear-gradient(
    180deg,
    var(--sky) 0%,
    var(--sky) 28%,
    rgba(0, 153, 255, 0) 100%
  );
}

.band-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Twee wolken rechtsboven, een lage rechts, en een lichte gloed waar de
     zon zou staan. */
  background-image:
    radial-gradient(ellipse 34% 16% at 82% 12%, rgba(253, 253, 254, 0.22), transparent 70%),
    radial-gradient(ellipse 22% 10% at 64% 6%, rgba(253, 253, 254, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 14% at 100% 42%, rgba(253, 253, 254, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(120, 200, 255, 0.35), transparent 70%);
}

@keyframes drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(2.5%);
  }
}

.band-sky::before {
  animation: drift 40s ease-in-out infinite alternate;
}

/* Drie echte wolken, als SVG, die langzaam voorbijdrijven. Ze staan achter
   de inhoud en in de buurt van de mascotte, nooit achter tekst: een witte
   wolk onder een witte kop maakt de kop onleesbaar. Op een telefoon staat
   de mascotte onderin, dus daar zakken de wolken mee. */
.cloud {
  position: absolute;
  z-index: -1;
  width: clamp(150px, 20vw, 300px);
  height: auto;
  fill: var(--cloud);
  pointer-events: none;
  will-change: transform;
}

.cloud-a {
  right: -3%;
  top: 34%;
  opacity: 0.55;
  animation: sail 26s ease-in-out infinite alternate;
}

.cloud-b {
  left: 58%;
  top: 15%;
  width: clamp(100px, 12vw, 180px);
  opacity: 0.4;
  animation: sail 34s ease-in-out infinite alternate-reverse;
}

.cloud-c {
  left: -2%;
  bottom: 4%;
  width: clamp(120px, 15vw, 220px);
  opacity: 0.35;
  animation: sail 30s ease-in-out infinite alternate;
}

@media (max-width: 55.99rem) {
  .cloud-a {
    top: 58%;
  }
  .cloud-b {
    left: 50%;
    top: 54%;
  }
  .cloud-c {
    bottom: 2%;
  }
}

@keyframes sail {
  from {
    transform: translateX(-4%);
  }
  to {
    transform: translateX(6%);
  }
}

/* ------------------------------------------------------------------- Balk
   De balk scrolt mee. Hij staat vóór de hero in de HTML en de hero schuift
   met een negatieve marge onder hem door, zodat de lucht van de hero ook
   achter de doorzichtige balk zit. Zodra de wachtpost erboven uit beeld
   is, geeft het script hem een eigen blauw. Zonder script is hij altijd
   blauw. */

:root {
  --bar-h: calc(44px + 2 * clamp(1.25rem, 3vw, 2rem));
}

.bar-post {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
}

.bar {
  position: sticky;
  top: 0;
  z-index: var(--z-top);
  background: var(--sky-deep);
  transition: background 260ms var(--ease), box-shadow 260ms var(--ease);
}

.bar-ready .bar {
  background: transparent;
}

.bar-ready .bar.is-stuck {
  background: var(--sky-deep);
  box-shadow: 0 10px 30px -18px rgba(0, 20, 50, 0.5);
}

.band-sky {
  margin-top: calc(-1 * var(--bar-h));
  padding-top: var(--bar-h);
}

/* Een link naar #club-dynasty moet de kop onder de balk vandaan houden. */
[id] {
  scroll-margin-top: calc(var(--bar-h) + 1rem);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}

/* Het woordmerk draagt de naam zelf, dus er staat geen tekst naast. De
   hoogte is 44 px en geen 34: daaronder valt het woord GAMES in de oranje
   pil uit elkaar. De mascotte staat er bewust niet naast: twee glanzende
   merktekens in dezelfde hoek vechten om aandacht. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  height: 44px;
  width: auto;
}

/* Het T-teken is er voor kleine plekken, en de balk op een telefoon is er
   zo een: naast het woordmerk passen de drie spellen daar niet. */
.brand-badge {
  display: none;
}

.topbar nav {
  display: flex;
  gap: 1.5rem;
}

/* De balk staat op zuiver hemelsblauw, waar wit 3,0:1 haalt. Vet vanaf
   19 px telt als grote tekst, en daar is dat genoeg voor. */
.topbar nav a {
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.topbar nav a:hover,
.topbar nav a:focus-visible {
  text-decoration: underline;
}

/* Op een telefoon: het T-teken in plaats van het woordmerk, en de drie
   spellen als kleine pillen in diep blauw. Op die pil haalt wit 4,6:1,
   ook als de balk zelf nog doorzichtig op het lichte blauw staat. */
@media (max-width: 47.99rem) {
  :root {
    --bar-h: calc(40px + 1.5rem);
  }

  .topbar {
    padding: 0.75rem 0;
    gap: 0.75rem;
  }

  .brand-wordmark {
    display: none;
  }

  .brand-badge {
    display: block;
    height: 40px;
  }

  .topbar nav {
    gap: 0.4rem;
    flex-wrap: nowrap;
  }

  .topbar nav a {
    font-size: clamp(0.75rem, 3.2vw, 0.875rem);
    padding: 0.4em 0.75em;
    border-radius: 999px;
    background: var(--sky-deep);
    white-space: nowrap;
  }

  .topbar nav a:hover,
  .topbar nav a:focus-visible {
    text-decoration: none;
    background: var(--sky-ink-deep);
  }

  .bar-ready .bar.is-stuck .topbar nav a {
    background: rgba(0, 0, 0, 0.18);
  }
}

/* -------------------------------------------------------------------- Hero */

.hero {
  padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3.5rem, 9vw, 7rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  }
}

/* De mascotte zweeft. Alleen transform, en uit bij reduced motion. */
@keyframes float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

/* Een zachte lichte gloed achter de mascotte, binnen zijn eigen vak. */
.hero-art {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 380px);
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(253, 253, 254, 0.28), transparent 65%);
  pointer-events: none;
}

.hero-mascot {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 36px rgba(0, 40, 90, 0.35));
  animation: float 4.5s ease-in-out infinite alternate;
}

.hero h1 {
  font-size: var(--display);
  max-width: 14ch;
  letter-spacing: -0.038em;
}

/* De twee woorden waar het om gaat krijgen een amberen streep eronder. */
.hero h1 .mark {
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

/* Vet en 20 px: op het hemelsblauw telt dat als grote tekst. */
.hero-sub {
  margin-top: 1.5rem;
  max-width: 42ch;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.45;
}

/* De wenk dat er meer is. Een omlijnde knop onder de intro, met een pijl
   die zachtjes op en neer gaat, naar het eerste spel. Vet en 19 px, want
   hij staat nog op het lichte deel van de lucht. */
.cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.25rem;
  padding: 0.8rem 1.4rem 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(253, 253, 254, 0.55);
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}

.cue:hover,
.cue:focus-visible {
  border-color: var(--text);
  transform: translateY(-2px);
}

.cue svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: nod 1100ms ease-in-out infinite alternate;
}

@keyframes nod {
  from {
    transform: translateY(-2px);
  }
  to {
    transform: translateY(4px);
  }
}

/* ---------------------------------------------------------------- Beginsels
   Drie afspraken naast elkaar, zonder vlak eromheen. Een dunne witte lijn
   erboven en de ruimte doen het werk. */

/* Een dunne witte lijn met aan het begin een korte amberen streep: de
   enige markering die een sectie krijgt. */
.rule {
  position: relative;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(253, 253, 254, 0.28);
}

.rule::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--amber);
}

.tenets {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
}

.tenets > * {
  grid-column: span 12;
}

@media (min-width: 52rem) {
  .tenet-a {
    grid-column: span 4;
  }
  .tenet-b {
    grid-column: span 3;
  }
  .tenet-c {
    grid-column: span 5;
  }
}

.tenet h2 {
  font-size: var(--step-2);
  letter-spacing: -0.025em;
}

.tenet p {
  margin-top: 0.875rem;
  max-width: 40ch;
}

/* -------------------------------------------------------------------- Spel */

.game {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 58rem) {
  .game {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

@media (min-width: 58rem) {
  .game-flip {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 57.99rem) {
  .game-flip figure {
    order: 2;
  }
}

/* De schermafbeelding is het enige echte object in een spelsectie. Hij
   krijgt een zachte lichte gloed achter zich, binnen zijn eigen vak zodat
   er nooit tekst overheen valt, en een lange schaduw eronder. */
.game figure,
.shop figure {
  position: relative;
  isolation: isolate;
}

.game figure::before,
.shop figure::before {
  content: "";
  position: absolute;
  inset: -12% -16%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(253, 253, 254, 0.22), transparent 70%);
  pointer-events: none;
}

/* De schermen staan stil. Een kanteling die recht trok onder de muis is
   geprobeerd en weer weggehaald: het beeld hoeft niet te bewegen. */
.game-shot {
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px rgba(253, 253, 254, 0.35),
    0 40px 70px -30px rgba(0, 30, 70, 0.7);
}

/* Een staande schermafbeelding: telefoonmaat en telefoonhoeken. */
.game-shot-tall {
  max-width: min(300px, 100%);
  margin-inline: auto;
  border-radius: 26px;
}

.game-kind {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--text);
  margin-bottom: 1.25rem;
}

.game h2 {
  font-size: var(--step-3);
  letter-spacing: -0.035em;
}

.game p {
  margin-top: 1.25rem;
  max-width: 50ch;
}

.game-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: var(--step-0);
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    background 220ms var(--ease),
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease),
    transform 220ms var(--ease);
}

/* De knop die iets doet is amber, net als de pil in het woordmerk. */
.btn-solid {
  background: var(--amber);
  color: var(--text);
  box-shadow: 0 14px 28px -14px rgba(60, 10, 0, 0.6);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  background: var(--amber-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(60, 10, 0, 0.7);
}

.btn-line {
  border-color: rgba(253, 253, 254, 0.5);
  color: var(--text);
}

/* Geen vulling bij hover: al bij 12% wit zakt de tekst erop naar 3,8:1. */
.btn-line:hover,
.btn-line:focus-visible {
  border-color: var(--text);
  transform: translateY(-2px);
}

.game-note {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  max-width: 46ch;
}

.game-note a {
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------- Werkplaats */

.shop {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 52rem) {
  .shop {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }
}

.shop h2 {
  font-size: var(--step-2);
  letter-spacing: -0.025em;
}

.shop p {
  margin-top: 1rem;
  max-width: 52ch;
}

/* Omlijnd, niet gevuld: een stand van zaken, geen knop. */
.shop-mark {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(253, 253, 254, 0.55);
  color: var(--text);
  margin-bottom: 1rem;
}

.shop-shot {
  border-radius: 20px;
  max-width: min(230px, 100%);
  margin-inline: auto;
  box-shadow:
    0 0 0 1px rgba(253, 253, 254, 0.3),
    0 40px 70px -30px rgba(0, 30, 70, 0.7);
}

/* ----------------------------------------------------------------- Contact */

.outro {
  display: grid;
  gap: 1.25rem 3rem;
}

@media (min-width: 52rem) {
  .outro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.outro h2 {
  font-size: var(--step-2);
  max-width: 18ch;
}

.outro p {
  max-width: var(--measure);
}

.mail {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--text);
  text-decoration-thickness: 3px;
  text-decoration-color: var(--amber);
  text-underline-offset: 6px;
}

.mail:hover,
.mail:focus-visible {
  text-decoration-color: var(--text);
}

/* --------------------------------------------------------------- Horizon
   Hier gaat de lucht over in wolkenwit. Eerst wordt het blauw lichter, in
   een strook zonder tekst, dan zakt een amberen zon achter een wolkenrand
   en daaronder is de grond wit. De secties die daarna komen staan op dat
   wit, in blauw en amber. */

/* De horizon schildert zijn eigen lucht, dekkend, van het diepe blauw van
   de pagina naar een lichte ochtendlucht. Een doorzichtig verloop over de
   body heen gaf in Chrome een rechte naad aan de bovenkant. */
.horizon {
  position: relative;
  height: clamp(12rem, 26vw, 22rem);
  margin-top: calc(var(--section) / 2);
  background: linear-gradient(180deg, var(--sky-deep) 0%, #2f98e8 45%, #9dd1ff 100%);
}

.horizon svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 46%;
  display: block;
}

/* De zon: een amberen schijf met een lichte waas eromheen, voor een deel
   achter de wolkenrand. */
.sun {
  position: absolute;
  right: 12%;
  bottom: 22%;
  width: clamp(110px, 16vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amber);
  /* De waas mag boven de horizon uitsteken, daar is hij een zachte gloed
     in de lucht. De grond eronder is gepositioneerd en schildert erover. */
  box-shadow: 0 0 clamp(40px, 8vw, 110px) clamp(6px, 1.2vw, 20px) rgba(253, 253, 254, 0.4);
  animation: sunrise 1800ms var(--ease) both;
}

@keyframes sunrise {
  from {
    transform: translateY(40%);
  }
  to {
    transform: none;
  }
}

.ground {
  position: relative;
  background: var(--cloud);
  color: var(--ground-text);
}

.ground .band {
  background: transparent;
}

.ground h2,
.ground h3 {
  color: var(--ground-head);
}

.ground .rule {
  border-top-color: rgba(0, 107, 187, 0.22);
}

.ground .shop-mark {
  border-color: rgba(212, 61, 36, 0.6);
  color: var(--ground-head);
}

.ground figure::before {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 153, 255, 0.22), transparent 70%);
}

.ground .shop-shot {
  box-shadow:
    0 0 0 1px rgba(0, 107, 187, 0.15),
    0 40px 70px -30px rgba(0, 60, 120, 0.45);
}

.ground .mail {
  color: var(--ground-head);
  text-decoration-color: rgba(212, 61, 36, 0.35);
}

.ground .mail:hover,
.ground .mail:focus-visible {
  text-decoration-color: var(--ground-head);
}

.band-cloud {
  background: var(--cloud);
  color: var(--ground-text);
  padding-block: 1.75rem 3rem;
}

.band-cloud .wrap {
  border-top: 1px solid rgba(0, 107, 187, 0.22);
  padding-top: 1.75rem;
}

.foot {
  font-size: 0.9375rem;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

.volg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.foot a {
  color: var(--ground-text);
  text-underline-offset: 3px;
}

.foot a:hover,
.foot a:focus-visible {
  color: var(--ground-head);
}

/* --------------------------------------------------------------- Opkomst
   Secties komen een stukje omhoog als ze in beeld scrollen. De verborgen
   stand bestaat alleen als het script draait en een waarnemer heeft; zonder
   script staat alles er gewoon, en het script zelf zet na 2,5 s alles
   zichtbaar voor het geval de waarnemer niet afgaat. */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms var(--ease),
    transform 800ms var(--ease);
}

.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------- Motion */

@keyframes rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}

/* Alleen transform, nooit opacity: gaat de animatie niet af, dan staat de
   inhoud er gewoon. */
.hero h1,
.hero-sub,
.topbar {
  animation: rise 700ms var(--ease);
}

.topbar {
  animation-delay: 40ms;
}
.hero h1 {
  animation-delay: 120ms;
}
.hero-sub {
  animation-delay: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero h1,
  .hero-sub,
  .topbar,
  .hero-mascot,
  .band-sky::before,
  .cloud,
  .sun {
    animation: none;
  }
  .btn {
    transition: none;
  }
  .cue svg {
    animation: none;
  }
  .reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:where(a, .btn):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}