/* ===== Lettertypen ===== */
@font-face {
  font-family: "Tim Bubble";
  src: url("../fonts/tim-bubble-outline.ttf") format("truetype");
  font-display: swap;
}

/* ===== Kleuren ===== */
:root {
  --bg: #a7d5df;
  --bubble: rgba(112, 176, 209, 0.85);   /* lichtblauwe bubbel, ~#78b6d3 op de achtergrond */
  --accent: rgba(40, 120, 175, 0.5);     /* kleine bubbel: donkerder waar hij overlapt */
  --text: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;     /* voorkomt zijwaarts scrollen, maar laat "sticky" werken */
}

body {
  font-family: "Literata", Georgia, serif;
  font-synthesis: none;      /* alleen de geladen diktes gebruiken, geen nep-vet of nep-cursief */
}

/* ===== Bubbels (algemeen) ===== */
.bubble {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  background: var(--bubble);
  animation: float var(--d, 10s) ease-in-out infinite alternate;
}

.bubble.accent { background: var(--accent); z-index: 2; }

.bubble.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  font-family: "Tim Bubble", system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 2.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
  transition: scale 0.35s ease, background-color 0.35s ease;
}

.bubble.nav span { position: relative; z-index: 3; line-height: 1; padding-left: 0.06em; }

.bubble.nav:hover,
.bubble.nav:focus-visible {
  scale: 1.07;
  background: rgba(100, 166, 204, 0.92);
  outline: none;
}

@keyframes float {
  from { translate: 0 0; }
  to   { translate: var(--dx, 4px) var(--dy, -6px); }
}

/* ===== Beginscherm ===== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
}

.cluster {
  position: absolute;
  top: 0;
  left: 3.5vw;
  width: clamp(240px, 42vw, 580px);
  aspect-ratio: 580 / 325;
}

.name {
  margin: 0;
  font-family: "Tim Bubble", system-ui, sans-serif;
  font-weight: normal;
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
}

/* korte regel onder de naam: wie ik ben, in één zin */
.tagline {
  margin: 4px 0 0;
  padding: 0 16px;
  text-align: center;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0.01em;
  transition: opacity 1.4s ease, translate 1.4s ease;
}
.tagline.wait { opacity: 0; translate: 0 8px; }   /* verschijnt zacht zodra de naam is getypt */

/* ===== Onderwerpen-veld ===== */
.field {
  position: relative;
  width: 100%;
  max-width: 1366px;
  margin: -30vh auto 8vh;
  z-index: 1;
  aspect-ratio: 1366 / 950;
}

/* ===== Mobiel: zigzag onder elkaar ===== */
@media (max-width: 700px) {
  .cluster { width: 78vw; }

  .field {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 6vw;
    padding: 4vw 16px 12vw;
  }

  .field .deco,
  .field .accent { display: none; }

  .field .bubble.nav {
    position: relative;
    left: auto;
    top: auto;
    width: 62vw;
    height: 52vw;
    font-size: 1.5rem;
  }

  .field .bubble.nav:nth-of-type(odd)  { align-self: flex-start; }
  .field .bubble.nav:nth-of-type(even) { align-self: flex-end; }

  /* een klein donker bubbeltje bij om en om bubbels, zoals in het ontwerp */
  .field .bubble.nav:nth-of-type(3n+1)::after {
    content: "";
    position: absolute;
    width: 32%;
    height: 38%;
    right: -6%;
    top: -8%;
    border-radius: 55% 45% 50% 50% / 50% 50% 50% 50%;
    background: var(--accent);
  }
}

/* Minder beweging als iemand dat in zijn systeem heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
  .bubble.nav { transition: none; }
}

/* =====================================================
   Subpagina's
   ===================================================== */
.page {
  min-height: 100vh;
  padding: clamp(110px, 14vw, 170px) 16px 80px;
}

/* Home-bubbel linksboven */
.bubble.nav.home {
  position: absolute;
  top: 16px;
  left: 16px;
  width: clamp(74px, 8.4vw, 102px);
  height: clamp(66px, 7.4vw, 90px);
  --r: 45% 55% 50% 50% / 45% 45% 55% 55%;
  --d: 9s; --dx: 3px; --dy: -5px;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}

.page-title {
  margin: 0 0 clamp(32px, 5vw, 60px);
  font-family: "Tim Bubble", system-ui, sans-serif;
  font-weight: normal;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* Keuzebubbels (bijv. de twee scrolly's) */
.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 5vw, 70px);
}

.bubble.choice {
  position: relative;
  left: auto;
  top: auto;
  width: clamp(280px, 32vw, 400px);
  height: clamp(250px, 28vw, 350px);
  padding: 24px 40px;
  font-family: "Literata", Georgia, serif;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}

/* Canva-scrolly ingesloten */
.scrolly {
  max-width: 720px;
  margin: 0 auto;
}

.scrolly h1 {
  margin: 0 0 24px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.3;
  text-align: center;
}

.embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: var(--ratio);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(40, 90, 120, 0.18);
  background: rgba(255, 255, 255, 0.25);
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.credit {
  margin: 4px 0 0;
  text-align: center;
  font-size: 0.95rem;
}

.credit a { color: var(--text); }

/* =====================================================
   Inhoud subpagina's (lopende tekst)
   ===================================================== */
:root {
  --ink: #1d4a60;                        /* donkerblauw voor goed leesbare tekst */
  --card: rgba(255, 255, 255, 0.55);
}

.content {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.65;
}

.placeholder {
  font-style: italic;
  opacity: 0.75;
}

/* ---------- Over mij ---------- */
.about-photo {
  float: left;
  width: clamp(170px, 32vw, 300px);
  aspect-ratio: 4 / 5;
  margin: 0 44px 24px 0;
  border-radius: 42% 58% 55% 45% / 38% 40% 60% 62%;   /* bubbelvorm */
  shape-outside: border-box;                       /* tekst volgt de ronding */
  shape-margin: 24px;                              /* lucht tussen foto en tekst */
  object-fit: cover;
  object-position: 50% 25%;
}

/* kleinere foto's verderop in de tekst, afwisselend rechts en links */
.side-photo {
  width: clamp(130px, 24vw, 220px);
  aspect-ratio: 3 / 4;
  margin-bottom: 16px;
  object-fit: cover;
  shape-outside: border-box;
  shape-margin: 20px;
}
.side-photo.right {
  float: right;
  margin-left: 32px;
  border-radius: 55% 45% 48% 52% / 42% 50% 50% 58%;
}
.side-photo.left {
  float: left;
  margin-right: 32px;
  border-radius: 45% 55% 60% 40% / 50% 42% 58% 50%;
  object-position: 50% 40%;
}
.side-photo.wide {
  width: clamp(160px, 30vw, 270px);
  aspect-ratio: 4 / 3;
  margin-top: 6px;
  border-radius: 48% 52% 45% 55% / 55% 48% 52% 45%;
  object-position: 50% 50%;
}

.contact { clear: both; }

.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.contact a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--bubble);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: scale 0.25s ease;
}

.contact a:hover, .contact a:focus-visible { scale: 1.06; }

/* ---------- Kaartjes (artikelen, audio, beeld) ---------- */
.list {
  display: grid;
  gap: 22px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.card {
  background: var(--card);
  border-radius: 28px 34px 30px 26px / 30px 26px 34px 28px;
  padding: clamp(20px, 3vw, 30px);
}

.card h2 {
  margin: 0 0 4px;
  font-size: 1.3rem;
  line-height: 1.3;
}

.card .meta {
  margin: 0 0 10px;
  font-size: 0.95rem;
  opacity: 0.75;
}

.card p { margin: 0 0 12px; }

.read-more {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Audio-speler ---------- */
.audio-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}

.play {
  width: 74px;
  height: 68px;
  border: 0;
  cursor: pointer;
  border-radius: 45% 55% 50% 50% / 45% 45% 55% 55%;
  background: var(--bubble);
  display: grid;
  place-items: center;
  transition: scale 0.25s ease;
}

.play:hover, .play:focus-visible { scale: 1.08; }
.play:disabled { cursor: not-allowed; opacity: 0.55; scale: 1; }

.play svg { width: 26px; height: 26px; fill: #fff; }
.play .icon-pause { display: none; }
.play.is-playing .icon-play { display: none; }
.play.is-playing .icon-pause { display: block; }

.progress {
  height: 6px;
  margin-top: 12px;
  border-radius: 99px;
  background: rgba(29, 74, 96, 0.15);
  overflow: hidden;
  cursor: pointer;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}

.time { font-size: 0.85rem; opacity: 0.7; margin-top: 4px; }

/* ---------- Video ---------- */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(29, 74, 96, 0.12);
  display: grid;
  place-items: center;
}

.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* ---------- Socials: iPhone 17 Pro ---------- */
.socials {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.iphone {
  position: relative;
  display: block;
  width: clamp(240px, 26vw, 300px);
  aspect-ratio: 71.5 / 150;            /* verhouding iPhone 17 Pro */
  padding: 11px;
  border-radius: 48px;
  background: linear-gradient(145deg, #e9ecef, #b9c0c6 45%, #dfe3e6);   /* zilverkleurig frame */
  box-shadow: 0 18px 40px rgba(29, 74, 96, 0.28), inset 0 0 0 2px rgba(255,255,255,0.6);
  transition: scale 0.3s ease;
}

.iphone:hover, .iphone:focus-visible { scale: 1.03; }

/* zijknoppen */
.iphone::before,
.iphone::after {
  content: "";
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: #b4bbc1;
}
.iphone::before { left: -4px; top: 22%; height: 11%; box-shadow: 0 60px 0 #b4bbc1; }
.iphone::after  { right: -4px; top: 30%; height: 15%; }

.iphone .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #111;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.95rem;
  text-align: center;
}

.iphone .screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Dynamic Island */
.iphone .island {
  position: absolute;
  top: 11px;
  left: 50%;
  translate: -50% 0;
  width: 32%;
  height: 26px;
  border-radius: 99px;
  background: #000;
  z-index: 2;
}

.socials .content { margin: 0; }

.socials h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

@media (max-width: 760px) {
  .socials { grid-template-columns: 1fr; justify-items: center; }
  .socials .content { text-align: left; }
}

/* ---------- Artikelen: kaartjes met foto ---------- */
.article-card { padding: 0; overflow: hidden; transition: scale 0.25s ease; }
.article-card:hover { scale: 1.015; }

.article-card a {
  display: grid;
  grid-template-columns: 200px 1fr;
  color: inherit;
  text-decoration: none;
}

.article-card img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}

.article-card div { padding: clamp(18px, 2.6vw, 26px); }
.article-card p { font-size: 1rem; }

.genre {
  margin: 0 0 6px;
  font-size: 0.8rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 600px) {
  .article-card a { grid-template-columns: 1fr; }
  .article-card img { height: 180px; }
}

/* ---------- Artikel: leespagina ---------- */
.article {
  max-width: 680px;
  background: var(--card);
  border-radius: 32px;
  padding: clamp(24px, 5vw, 56px);
}

.article h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.25;
}

.article .meta { margin: 0 0 24px; opacity: 0.75; }

.article figure { margin: 0 0 28px; }

.article figure img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 20px;
}

.article figcaption { margin-top: 6px; font-size: 0.85rem; opacity: 0.7; }

.article h2 { margin: 32px 0 8px; font-size: 1.3rem; }
.article p { margin: 0 0 16px; }

.back { margin-top: 36px !important; }
.back a { color: var(--ink); font-weight: 700; }

/* Instagram-screenshot: regel met namen van andere accounts vervagen */
.iphone .blur-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 34.8%;
  height: 4.6%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}

/* screenshot op ware verhouding, onderkant valt weg buiten het scherm */
.iphone .shot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 923 / 2000;
}
.iphone .shot img {
  position: static;
  width: 100%;
  height: auto;
}
.iphone .shot .blur-row { top: 34.6%; height: 4.4%; }

/* ---------- Over mij: tekst ---------- */
.about p { margin: 0 0 16px; }
.about h2 { margin: 30px 0 8px; font-size: 1.3rem; }
.about a { color: var(--ink); font-weight: 700; }
.about .invite { clear: both; margin-top: 32px; font-weight: 700; text-align: center; }
.about .contact a { color: #fff; }

@media (max-width: 560px) {
  .about-photo { width: 46vw; margin-right: 26px; shape-margin: 16px; }
  .side-photo.wide { float: none; display: block; width: 100%; margin: 14px 0; shape-outside: none; }
}

/* Over mij: foto iets naar links, buiten de tekstkolom (alleen als er ruimte is) */
@media (min-width: 900px) {
  .about-photo { margin-left: -70px; }
  .side-photo.right { margin-right: -70px; }
  .side-photo.left { margin-left: -70px; }
}

/* ---------- Socials: verhaal naast de iPhone ---------- */
.socials { align-items: start; }

@media (min-width: 761px) {
  .socials .iphone { position: sticky; top: 40px; }   /* telefoon blijft in beeld tijdens het lezen */
}

.social-story p { margin: 0 0 16px; }
.social-story h3 { margin: 28px 0 8px; font-size: 1.2rem; }
.social-story .invite { margin-top: 28px; font-weight: 700; }
.social-story .invite a { color: var(--ink); }
.social-story .contact { margin-top: 8px; }

/* =====================================================
   Menu bij de home-bubbel: een wolkje zwevende bubbels
   in de hoek, net als op het beginscherm
   ===================================================== */
.home-menu {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
}

.home-menu .bubble.nav.home {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}

/* het vlak waarin de bubbels verschijnen (houdt de hover vast) */
.home-menu ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.home-menu:hover ul,
.home-menu:focus-within ul,
.home-menu.open ul { pointer-events: auto; }

.home-menu li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: 0;
  scale: 0.2;
  translate: calc(var(--x) * -0.6) calc(var(--y) * -0.6);   /* komen uit de home-bubbel */
  transition: opacity 0.3s ease, scale 0.4s cubic-bezier(.3, 1.5, .5, 1), translate 0.4s cubic-bezier(.3, 1.4, .5, 1);
}

.home-menu:hover li,
.home-menu:focus-within li,
.home-menu.open li {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}

/* posities en maten: een speels groepje rond de home-bubbel */
.home-menu li:nth-child(1) { --x: 104px; --y: 4px;   --w: 104px; --h: 86px;  transition-delay: 0s; }
.home-menu li:nth-child(2) { --x: 218px; --y: 34px;  --w: 118px; --h: 98px;  transition-delay: .04s; }
.home-menu li:nth-child(3) { --x: 6px;   --y: 104px; --w: 92px;  --h: 80px;  transition-delay: .08s; }
.home-menu li:nth-child(4) { --x: 112px; --y: 104px; --w: 92px;  --h: 84px;  transition-delay: .12s; }
.home-menu li:nth-child(5) { --x: 214px; --y: 146px; --w: 114px; --h: 94px;  transition-delay: .16s; }
.home-menu li:nth-child(6) { --x: 40px;  --y: 196px; --w: 104px; --h: 88px;  transition-delay: .2s; }
.home-menu li:nth-child(7) { --x: 150px; --y: 204px; --w: 88px;  --h: 78px;  transition-delay: .24s; }

.home-menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w);
  height: var(--h);
  border-radius: 45% 55% 50% 50% / 45% 45% 55% 55%;
  background: rgba(112, 176, 209, 0.95);
  color: #fff;
  text-decoration: none;
  font-family: "Tim Bubble", system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(29, 74, 96, 0.18);
  animation: float var(--d, 9s) ease-in-out infinite alternate;
  transition: scale 0.2s ease, background-color 0.2s ease;
}

/* elke bubbel een eigen vorm en eigen zweefritme */
.home-menu li:nth-child(2) a { border-radius: 55% 45% 40% 60% / 50% 55% 45% 50%; --d: 11s; --dx: -4px; --dy: 5px; }
.home-menu li:nth-child(3) a { border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; --d: 8s;  --dx: 3px;  --dy: -5px; }
.home-menu li:nth-child(4) a { border-radius: 50% 50% 45% 55% / 40% 50% 50% 60%; --d: 10s; --dx: -3px; --dy: -4px; }
.home-menu li:nth-child(5) a { border-radius: 45% 55% 60% 40% / 50% 40% 60% 50%; --d: 12s; --dx: 4px;  --dy: 4px; }
.home-menu li:nth-child(6) a { border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%; --d: 9s;  --dx: -4px; --dy: -6px; }
.home-menu li:nth-child(7) a { border-radius: 50% 50% 55% 45% / 55% 45% 50% 50%; --d: 10s; --dx: 3px;  --dy: 5px; }

.home-menu li a:hover,
.home-menu li a:focus-visible {
  scale: 1.1;
  background: rgba(90, 158, 198, 0.98);
  outline: none;
}

.home-menu li a[aria-current="page"] { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .home-menu li { transition: opacity 0.2s ease; translate: 0 0; scale: 1; }
  .home-menu li a { animation: none; }
}
/* Schermopname in de iPhone */
.iphone .screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* =====================================================
   Scrolly's-overzicht: speelse fotobubbels
   ===================================================== */
.scrolly-field {
  position: relative;
  max-width: 1000px;
  min-height: 640px;
  margin: 0 auto;
}

.scrolly-pick {
  position: absolute;
  display: block;
  width: clamp(240px, 32vw, 340px);
  aspect-ratio: 1 / 0.95;
  color: #fff;
  text-decoration: none;
  z-index: 1;
}

.pick-1 { left: 4%;  top: 0; }
.pick-2 { right: 4%; top: 230px; }

.pick-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bubble);
  box-shadow: 0 10px 28px rgba(29, 74, 96, 0.22);
  animation: float 11s ease-in-out infinite alternate;
  --dx: 4px; --dy: -7px;
  transition: scale 0.35s ease;
}
.pick-1 .pick-photo { border-radius: 42% 58% 55% 45% / 38% 42% 58% 62%; }
.pick-2 .pick-photo { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; --dx: -5px; --dy: 6px; animation-duration: 13s; }

.pick-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s ease;
}

/* titelbubbel die half over de foto valt */
.pick-title {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62%;
  min-height: 92px;
  padding: 18px 22px;
  background: rgba(112, 176, 209, 0.96);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 16px rgba(29, 74, 96, 0.2);
  animation: float 8s ease-in-out infinite alternate;
  transition: scale 0.3s ease, background-color 0.3s ease;
}
.pick-1 .pick-title { right: -14%; bottom: -10%; border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; --dx: -4px; --dy: 5px; }
.pick-2 .pick-title { left: -16%;  bottom: -8%;  border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%; --dx: 5px;  --dy: -4px; }

/* klein donker bubbeltje als accent */
.pick-accent {
  position: absolute;
  z-index: 3;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 55% 45% 50% 50% / 50% 50% 50% 50%;
  background: var(--accent);
  animation: float 7s ease-in-out infinite alternate;
  --dx: 4px; --dy: 6px;
}
.pick-1 .pick-accent { right: 2%; top: -4%; }
.pick-2 .pick-accent { left: -2%; top: 8%; }

.scrolly-pick:hover .pick-photo,
.scrolly-pick:focus-visible .pick-photo { scale: 1.04; }
.scrolly-pick:hover .pick-photo img { scale: 1.08; }
.scrolly-pick:hover .pick-title,
.scrolly-pick:focus-visible .pick-title { scale: 1.08; background: rgba(90, 158, 198, 0.98); }
.scrolly-pick:focus-visible { outline: none; }

/* Mobiel: onder elkaar, om en om links en rechts */
@media (max-width: 700px) {
  .scrolly-field { min-height: 0; display: flex; flex-direction: column; gap: 90px; padding-bottom: 60px; }
  .scrolly-field .deco, .scrolly-field .accent { display: none; }
  .scrolly-pick { position: relative; left: auto; right: auto; top: auto; width: 70vw; }
  .pick-1 { align-self: flex-start; }
  .pick-2 { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .pick-photo, .pick-title, .pick-accent { animation: none; }
}

/* =====================================================
   Beginscherm: naam wordt ingetypt
   ===================================================== */
.typed-letter { opacity: 0; }
.typed-letter.shown { opacity: 1; }

.caret {
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  margin: 0 0.03em;
  vertical-align: -0.05em;
  background: #fff;
  border-radius: 2px;
  animation: caret-blink 0.9s steps(1) infinite;
}
.caret.caret-done { animation: caret-fade 0.6s ease forwards; }

@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes caret-fade { to { opacity: 0; } }

/* Touchscreen naar Tafel: illustratie links in beeld houden */
.pick-1 .pick-photo img { object-position: 50% 50%; }

/* Student én reservist: de foto van de militairen in beeld houden */
.pick-2 .pick-photo img { object-position: 50% 40%; }

/* =====================================================
   Beginscherm: bubbels ploppen binnen en zweven ruimer
   ===================================================== */
.home-page .bubble {
  animation:
    pop-in 3.2s cubic-bezier(.25,.1,.25,1) var(--delay, 0s) backwards,
    float-big var(--d, 10s) ease-in-out var(--delay, 0s) infinite alternate,
    wobble calc(var(--d, 10s) * 0.7) ease-in-out calc(var(--delay, 0s) + 3.2s) infinite alternate;
}

/* binnenkomen: rustig opdoemen en zacht uitdeinen, met een klein nadeinend wiebeltje */
@keyframes pop-in {
  0%   { opacity: 0; scale: 0.6 0.6; }
  35%  { opacity: 1; }
  45%  { scale: 1.04 1.02; }
  65%  { scale: 0.98 1.01; }
  82%  { scale: 1.01 0.995; }
  100% { opacity: 1; scale: 1 1; }
}

/* zweven: ruimer dan op de subpagina's, met een klein draaitje */
@keyframes float-big {
  from { translate: 0 0; rotate: 0deg; }
  to   { translate: calc(var(--dx, 4px) * 2.5) calc(var(--dy, -6px) * 2.5); rotate: 2deg; }
}

/* volgorde: eerst het groepje bij 'Over mij', daarna de onderwerpen */
.home-page .cluster > .bubble:nth-child(1) { --delay: 0.24s; }
.home-page .cluster > .bubble:nth-child(2) { --delay: 0.43s; }
.home-page .cluster > .bubble:nth-child(3) { --delay: 0.62s; }
.home-page .cluster > .bubble:nth-child(4) { --delay: 0.82s; }
.home-page .field > .bubble:nth-child(1) { --delay: 0.96s; }
.home-page .field > .bubble:nth-child(2) { --delay: 1.10s; }
.home-page .field > .bubble:nth-child(3) { --delay: 1.25s; }
.home-page .field > .bubble:nth-child(4) { --delay: 1.39s; }
.home-page .field > .bubble:nth-child(5) { --delay: 1.54s; }
.home-page .field > .bubble:nth-child(6) { --delay: 1.68s; }
.home-page .field > .bubble:nth-child(7) { --delay: 1.82s; }
.home-page .field > .bubble:nth-child(8) { --delay: 1.97s; }
.home-page .field > .bubble:nth-child(9) { --delay: 2.11s; }
.home-page .field > .bubble:nth-child(10) { --delay: 2.26s; }
.home-page .field > .bubble:nth-child(11) { --delay: 2.40s; }
.home-page .field > .bubble:nth-child(12) { --delay: 2.54s; }
.home-page .field > .bubble:nth-child(13) { --delay: 2.69s; }
.home-page .field > .bubble:nth-child(14) { --delay: 2.83s; }

@media (prefers-reduced-motion: reduce) {
  .home-page .bubble { animation: none; }
}

/* Beginscherm: blijven heel langzaam nawiebelen.
   Via 'transform' zodat het niet botst met het ploppen en het groter worden bij hover (die gebruiken 'scale'). */
@keyframes wobble {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1.035, 0.97); }
  50%  { transform: scale(0.975, 1.03); }
  75%  { transform: scale(1.02, 0.985); }
  100% { transform: scale(0.985, 1.02); }
}

/* Over mij: links naar werk subtiel onderstrepen */
.about p a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.about p a:hover { text-decoration-thickness: 2px; }

/* Audio: kaart waar je naartoe gelinkt wordt even laten oplichten */
.audio-card { scroll-margin-top: 120px; }
.audio-card:target { animation: highlight 2s ease; }
@keyframes highlight { 0%, 40% { background: rgba(255, 255, 255, 0.9); } }

/* Link naar de gepubliceerde versie (Tot de Max) */
.published { margin: -12px 0 24px; }
.published a {
  display: inline-block;
  padding: 7px 16px 6px;
  border-radius: 999px;
  background: var(--bubble);
  color: #fff !important;
  text-decoration: none;
  font-size: 0.95rem;
  transition: scale 0.2s ease;
}
.published a:hover, .published a:focus-visible { scale: 1.05; }
.scrolly .published { text-align: center; margin: -8px 0 24px; }
.published-end { margin-top: 32px !important; font-style: italic; opacity: 0.85; }
.published-end a { color: var(--ink); }
.pub-label { text-transform: none; letter-spacing: 0; font-style: italic; }

/* Beeld: YouTube-video in hetzelfde ronde kader als de eigen video */
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.card .meta a { color: var(--ink); }

/* Audio: foto bovenaan de kaart */
.audio-photo {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 20px;
}