/* =========================================================================
   ARWEN.IM — stijlblad
   Eén licht, crème ontwerp: een meer bij avond met Loela de uil boven het
   water en Bobbel de axolotl eronder. Geen externe bestanden, geen webfonts.
   Let op: de naam is altijd Arwèn, met accent grave.
   ========================================================================= */

:root {
  /* --- Vlakken en achtergronden --- */
  --creme:         #FFFBF4; /* de hele pagina-achtergrond */
  --creme-diep:    #FDF3E7; /* het paneel van de vriendjes-sectie */
  --wit:           #FFFFFF; /* tegelkaarten, tekstballonnen */
  --water-licht:   #E7F6FC; /* bovenkant hero, achtergrond achter de screenshot */
  --water-mid:     #C7E9F7; /* onderkant hero */
  --water-diep:    #A5DCF0; /* voorste golf, footergolf */
  --lavendel-wash: #F4F0FF; /* chips */

  /* --- Accenten: ALLEEN als vlak of vorm, NOOIT als letterkleur --- */
  --roze:          #FFB3CE; /* lijf van Bobbel */
  --roze-licht:    #FFD6E6; /* buik, vinnen */
  --roze-diep:     #E8608F; /* contour van Bobbel, kieuwen */
  --blos:          #FF8FBE; /* wangen, altijd op opacity .55 */
  --mint:          #A8E6CF; /* lelieblad, blaadjes */
  --mint-diep:     #6FCFAC; /* contour mint, tak */
  --lavendel:      #C9B8F2; /* lijf van Loela */
  --lavendel-licht:#EDE6FF; /* buikschild van Loela */
  --lavendel-diep: #8E79D6; /* contour van Loela */
  --hemel:         #8FD3F4; /* bubbelranden, achterste golf */
  --vanille:       #FFE9A8; /* maan, sterren */
  --goud:          #FFD166; /* sterren */
  --oker:          #FFC46B; /* snavel en pootjes van Loela */

  /* --- Inkt: dit zijn de ENIGE tekstkleuren --- */
  --inkt:          #3A3252; /* koppen en bodytekst.  11,6:1 op crème */
  --inkt-zacht:    #5A5375; /* bijschriften, chips.   7,0:1 op crème */
  --inkt-diep:     #2E2740; /* ogen en mondjes in de tekeningen */
  --roze-inkt:     #C0326E; /* vlak van de Spelen-pil (witte tekst = 5,4:1) */
  --lavendel-inkt: #5B45A6; /* focusring en tekst op --lavendel-wash (6,6:1) */

  /* --- Schaduwen: altijd zacht, diffuus en paarsig. Nooit zwart. --- */
  --schaduw-klein: 0 2px 4px rgba(58,50,82,.05);
  --schaduw-kaart: 0 2px 4px rgba(58,50,82,.05), 0 14px 30px -10px rgba(58,50,82,.18);
  --schaduw-zweef: 0 4px 8px rgba(58,50,82,.06), 0 26px 44px -14px rgba(58,50,82,.24);
  --schaduw-roze:  0 12px 26px -10px rgba(192,50,110,.42);

  /* --- Rondingen: nergens een hoek onder de 12px --- */
  --rond-paneel: clamp(28px, 5vw, 44px);
  --rond-kaart:  28px;
  --rond-raam:   20px;
  --rond-pil:    999px;

  /* --- Ritme --- */
  --maat:   clamp(16px, 4vw, 32px);
  --sectie: clamp(48px, 9vw, 88px);

  /* --- Letter: alleen systeemfonts, dus geen enkel netwerkverzoek --- */
  --letter: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
            "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui,
            -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------- basis --------------------------------- */

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--letter);
  font-weight: 500;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; color: var(--inkt); }
p { margin: 0; }

h1 {
  font-size: clamp(3rem, 1.6rem + 8vw, 5.5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
}
h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem); font-weight: 800; line-height: 1.15; }
h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); font-weight: 700; line-height: 1.2; }

.container { max-width: 1080px; margin-inline: auto; padding-inline: var(--maat); }

.opschrift {
  font-size: .95rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .06em; color: var(--inkt-zacht);
}
.tagline {
  font-size: clamp(1.05rem, 1rem + .55vw, 1.3rem);
  font-weight: 500; line-height: 1.55;
  color: var(--inkt-zacht); max-width: 32ch; margin-inline: auto;
}
.lead { font-size: 1.05rem; font-weight: 500; color: var(--inkt-zacht); margin-top: 8px; }

/* De focusring is overal zichtbaar. Nooit weghalen zonder vervanging. */
:focus-visible {
  outline: 3px solid var(--lavendel-inkt);
  outline-offset: 3px;
  border-radius: inherit;
}
.mascotte:focus-visible, .knop-hero:focus-visible, .pil:focus-visible {
  box-shadow: 0 0 0 6px rgba(255,255,255,.92);
}

/* Skiplink: alleen zichtbaar als je met de tab-toets navigeert */
.overslaan {
  position: absolute; left: -9999px;
  background: var(--roze-inkt); color: #fff;
  font-weight: 700; text-decoration: none;
  padding: 14px 24px; border-radius: var(--rond-pil);
}
.overslaan:focus { left: 12px; top: 12px; z-index: 50; }

/* ============================== WOORDMERK =============================== */

.merk { padding-block: 18px; }
.merk__in { display: flex; align-items: center; gap: 10px; justify-content: center; }
.merk__naam { font-weight: 700; letter-spacing: .02em; color: var(--inkt-zacht); }
@media (min-width: 560px) { .merk__in { justify-content: flex-start; } }

/* ================================ HET MEER ============================== */

.hero {
  position: relative;
  margin-inline: clamp(12px, 3vw, 24px);
  border-radius: var(--rond-paneel);
  overflow: hidden;
  padding: clamp(32px, 7vw, 64px) var(--maat) 0;
  background: linear-gradient(180deg, #FFFDF8 0%, var(--water-licht) 55%, var(--water-mid) 100%);
}
@media (min-width: 820px) { .hero { min-height: clamp(440px, 62vh, 620px); } }

.versiering { position: absolute; inset: 0; pointer-events: none; }

.maan { position: absolute; top: 6%; right: 7%; width: clamp(52px, 9vw, 78px); }

.ster { position: absolute; width: 20px; animation: fonkel 3.4s ease-in-out var(--d, 0s) infinite; }
.ster--1 { top: 12%; left: 9%;  width: 22px; }
.ster--2 { top: 26%; left: 20%; width: 14px; }
.ster--3 { top: 8%;  left: 44%; width: 16px; }
.ster--4 { top: 30%; right: 26%; width: 13px; }
.ster--5 { top: 46%; left: 6%;  width: 12px; }
@keyframes fonkel {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* Bubbels die rustig van onder naar boven drijven */
.bubbel {
  position: absolute; bottom: -40px; left: var(--x);
  width: var(--w); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 14%,
              rgba(255,255,255,.22) 15% 100%);
  border: 1.5px solid rgba(143,211,244,.75);
  pointer-events: none;
  animation: stijgen var(--dur, 10s) linear var(--d, 0s) infinite;
}
@keyframes stijgen {
  0%   { transform: translateY(0) translateX(0);     opacity: 0; }
  10%  { opacity: .9; }
  80%  { opacity: .9; }
  100% { transform: translateY(-72vh) translateX(14px); opacity: 0; }
}

.hero__tekst { position: relative; z-index: 2; max-width: 34ch; margin-inline: auto; text-align: center; }
.streep { width: min(240px, 62%); height: 14px; margin: 10px auto 22px; }

.knop-hero {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px; min-height: 52px; padding: 14px 24px;
  background: var(--roze-inkt); color: #fff;
  font-weight: 700; text-decoration: none;
  border-radius: var(--rond-pil);
  box-shadow: var(--schaduw-roze);
  transition: transform 160ms ease-out;
}
.knop-hero:hover { transform: translateY(-2px); }
.knop-hero:active { transform: translateY(1px); }

/* ------------------------------ mascottes ------------------------------- */

.mascottes {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: flex-end;
  gap: 8px; margin-top: 36px;
}
.mascotte-plek { position: relative; display: block; }
.mascotte {
  background: none; border: 0; padding: 0; cursor: pointer;
  min-width: 56px; min-height: 56px;
  border-radius: 24px;
  transition: transform 200ms ease-out;
}
.mascotte:hover { transform: translateY(-4px); }
.mascotte--bobbel { width: 38vw; max-width: 180px; }
.mascotte--loela  { width: 30vw; max-width: 140px; }

/* Vanaf 820px zwemt Bobbel linksonder in de golf en zit Loela rechtsboven. */
@media (min-width: 820px) {
  .mascottes { display: block; margin-top: 0; }
  .mascotte-plek--bobbel { position: absolute; left: 3%;  bottom: 0;  z-index: 3; }
  .mascotte-plek--loela  { position: absolute; right: 4%; top: 8%;    z-index: 3; }
  .mascotte--bobbel { width: clamp(200px, 22vw, 280px); max-width: none; }
  .mascotte--loela  { width: clamp(170px, 19vw, 240px); max-width: none; }
}

/* Het tekstballonnetje. Absoluut, dus de layout verspringt nooit. */
.wolkje {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) scale(.7);
  opacity: 0; pointer-events: none;
  z-index: 4;
  min-width: max-content; max-width: 22ch;
  background: var(--wit); color: var(--inkt);
  font-size: .95rem; font-weight: 600; line-height: 1.35;
  text-align: center;
  padding: 10px 16px; border-radius: 18px;
  box-shadow: var(--schaduw-kaart);
  transition: transform 260ms cubic-bezier(.2,.9,.3,1.3), opacity 260ms ease-out;
}
.wolkje::after {
  content: ""; position: absolute; top: calc(100% - 7px); left: 50%;
  width: 14px; height: 14px; background: var(--wit);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 4px 0;
}
.wolkje.is-zichtbaar { opacity: 1; transform: translateX(-50%) scale(1); }

/* De golf onderaan het meer. Hij steekt aan beide kanten 30px buiten het
   paneel, zodat de langzaam schuivende voorste golf nooit een gaatje geeft. */
.golf {
  position: relative; z-index: 1;
  width: calc(100% + 2 * var(--maat) + 60px);
  margin-left: calc(-1 * var(--maat) - 30px);
  height: 62px; margin-top: -20px;
}
@media (min-width: 640px) { .golf { height: 96px; } }
.golf-voor { animation: golven 14s ease-in-out infinite; }
@keyframes golven {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-26px); }
}

/* ============================= DE SPELLETJES ============================ */

.spelletjes { padding-block: var(--sectie); }
.kop-ster { margin-bottom: 10px; }

.raster {
  display: grid; gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 620px) { .raster { grid-template-columns: repeat(2, 1fr); } }
.tegel--groot { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .tegel--groot {
    display: grid; grid-template-columns: 1.1fr .9fr;
    align-items: center; gap: clamp(20px, 3vw, 34px);
  }
}

.tegel {
  background: var(--wit);
  border-radius: var(--rond-kaart);
  padding: 14px;
  box-shadow: var(--schaduw-kaart);
  text-decoration: none; color: var(--inkt);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.tegel:hover, .tegel:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-zweef);
}
.tegel:active { transform: translateY(-1px); }

/* Het lijstje om de screenshot. De lichte rand zorgt dat de turkooizen
   schermafbeelding niet wegvalt tegen de witte kaart. */
.raam {
  display: block; border-radius: var(--rond-raam); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--water-licht);
  box-shadow: inset 0 0 0 1px rgba(58,50,82,.08);
}
.raam img { width: 100%; height: 100%; object-fit: cover; }

.tegel-tekst { display: block; padding: 18px 10px 8px; }
@media (min-width: 860px) { .tegel--groot .tegel-tekst { padding: 8px 14px; } }
.tegel-tekst p { color: var(--inkt-zacht); margin-top: 10px; }

.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 14px 0 0; padding: 0;
}
.chips li {
  background: var(--lavendel-wash); color: var(--inkt-zacht);
  padding: 6px 12px; border-radius: var(--rond-pil);
  font-size: .85rem; font-weight: 600; line-height: 1.3;
}

.pil {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--roze-inkt); color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 12px 22px; margin-top: 18px;
  border: 0; border-radius: var(--rond-pil);
  box-shadow: var(--schaduw-roze);
}
/* De pil in de tegel is puur versiering: de hele kaart is al de link. */
.tegel .pil { pointer-events: none; }

.pil--zacht {
  background: var(--wit); color: var(--lavendel-inkt);
  border: 2px solid var(--lavendel);
  box-shadow: var(--schaduw-klein);
  min-height: 48px; padding: 14px 24px;
  cursor: pointer;
  transition: transform 160ms ease-out;
}
.pil--zacht:hover { transform: translateY(-2px); }
.pil--zacht:active { transform: translateY(1px); }

/* ============================== DE VRIENDJES ============================ */

.vriendjes-sectie { padding-bottom: var(--sectie); }
.vriendjes {
  background: var(--creme-diep);
  border-radius: var(--rond-paneel);
  padding: clamp(28px, 5vw, 44px) var(--maat);
}

.vriendjes-rij {
  display: grid; gap: clamp(24px, 4vw, 40px);
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 640px) { .vriendjes-rij { grid-template-columns: repeat(2, 1fr); } }

.vriend { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.vriend p { color: var(--inkt-zacht); max-width: 34ch; }

.portret {
  display: grid; place-items: center;
  width: clamp(120px, 26vw, 150px); aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: var(--schaduw-klein);
  transition: transform 200ms ease-out;
}
.portret--loela  { background: var(--lavendel-licht); }
.portret--bobbel { background: #FFEAF3; }
.portret svg { width: 84%; }

/* Eén wiebeltje als je op de knop tikt */
.portret.wiebelt, .mascotte.wiebelt { animation: wiebel 620ms ease-in-out 1; }
@keyframes wiebel {
  0%, 100% { transform: rotate(0) translateY(0); }
  25%      { transform: rotate(-5deg) translateY(-6px); }
  60%      { transform: rotate(4deg)  translateY(-2px); }
}

/* ================================ FOOTER ================================ */

footer { padding-bottom: clamp(28px, 5vw, 44px); }
.golf-footer { width: 100%; height: 48px; }
.footer__in {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding-top: 18px;
}
footer p { font-size: .95rem; color: var(--inkt-zacht); }

/* ============================== ANIMATIES =============================== */

/* Bobbel wappert rustig met haar kieuwen */
.kieuw {
  transform-box: fill-box; transform-origin: 0% 100%;
  animation: kieuw-wapper 3.2s ease-in-out infinite;
  animation-delay: calc(var(--k) * .35s);
}
@keyframes kieuw-wapper {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(5deg); }
}

/* Bobbel deint zachtjes op en neer */
.mascotte--bobbel svg { animation: deinen 5s ease-in-out infinite; }
@keyframes deinen {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-1.5deg); }
}

/* Loela's oogleden zijn normaal opgetrokken; bij een tik knippert ze */
.ooglid { transform-box: fill-box; transform-origin: top; transform: scaleY(0); }
.mascotte--loela.knippert .ooglid { animation: knipper 620ms ease-in-out 1; }
@keyframes knipper {
  0%, 100% { transform: scaleY(0); }
  45%, 55% { transform: scaleY(1); }
}

/* Loela's vleugel zwaait even bij een tik */
.vleugel { transform-box: fill-box; transform-origin: 20% 10%; }
.mascotte--loela.knippert .vleugel { animation: zwaai 620ms ease-in-out 1; }
@keyframes zwaai {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-14deg); }
}

/* Bobbel lacht open als je haar kietelt */
.mond, .mond--lach { transition: opacity 180ms ease-out; }
.mascotte--bobbel.lacht .mond:not(.mond--lach) { opacity: 0; }
.mascotte--bobbel.lacht .mond--lach { opacity: 1; }

/* De tegels komen bij het laden rustig omhoog. Nooit opacity:0 in de
   basisregel, zodat ze altijd zichtbaar zijn als de animatie niet draait. */
@keyframes tegel-op {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.raster > * { animation: tegel-op 420ms cubic-bezier(.2,.7,.3,1) both; }
.raster > *:nth-child(2) { animation-delay: 90ms; }
.raster > *:nth-child(3) { animation-delay: 180ms; }

/* ===================== RUSTIGE WEERGAVE (reduced motion) ================
   Niet animation:none — dan blijven 'both'-animaties op hun beginstand
   hangen. Met .001ms landt elke animatie op haar eindstand. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .tegel:hover, .tegel:focus-visible, .tegel:active,
  .knop-hero:hover, .pil--zacht:hover, .mascotte:hover {
    transform: none !important;
  }
  /* De bubbels drijven niet meer, dus die halen we netjes weg */
  .bubbel { display: none; }
  /* Het wolkje verschijnt zonder animatie en blijft langer staan (zie script.js) */
  .wolkje.is-zichtbaar { opacity: 1; transform: translateX(-50%) scale(1); }
}