/* ============================================================
   kutweer — beweging.
   De opmaak die bij lucht.js en beweging.js hoort: het doek met
   het weer erop, de secties die even blijven staan terwijl je
   erdoorheen scrolt, en het kleine grut dat de pagina laat leven.

   Alles hier is versiering. Zet de JS uit en de pagina staat er
   nog precies zo, alleen stil — daarom staat elke scroll-truc
   achter .js en .plak-aan, klassen die het script zelf opzet.
   ============================================================ */

/* ---------- Het doek met het weer ---------- */
.lucht{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
.heeft-lucht .lucht{opacity:1}

/* De banden waren dichte vlakken; daarmee hield je de helft van de
   pagina de lucht buiten. Half doorzichtig blijft het onderscheid
   tussen de banden staan, maar het weer trekt er nu doorheen. */
.heeft-lucht .tint{background:rgba(11,16,32,.66)}
.heeft-lucht .band{background:rgba(11,16,32,.60)}
.heeft-lucht .foot{background:rgba(11,16,32,.74)}

/* ---------- Scroll-lock ----------
   Geen scroll-kaping: de pagina scrollt gewoon door. De wrapper is
   simpelweg een paar schermen hoog en het kind blijft plakken tot
   je er voorbij bent. Je scrolt dus door de sectie héén in plaats
   van eroverheen — en wij weten precies hoe ver je bent. */
.plak{
  position:relative;
  height:calc(var(--plak-lengte,3) * 100vh);
  height:calc(var(--plak-lengte,3) * 100svh);
  scroll-margin-top:0;                   /* een anker landt aan het begin van de reis */
}
.plak-vast{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding:calc(var(--nav-h,62px) + 12px) 0 18px;   /* onder de vaste navbalk door */
}
/* Past de inhoud niet in één scherm, dan zet beweging.js de sectie uit.
   Hij scrolt dan gewoon mee, met alles onder elkaar in beeld — dezelfde
   staat als zonder JS. Zo is een te krap scherm nooit een half kapotte
   sectie, hooguit een gewone. */
.plak.plak-uit{height:auto!important}
.plak.plak-uit .plak-vast{position:static;height:auto;padding:0;overflow:visible}
.plak.plak-uit .plak-maat{display:none}

/* Zonder JS heeft plakken geen zin: dan zou je door een leeg gat scrollen. */
html:not(.plak-aan) .plak{height:auto!important}
html:not(.plak-aan) .plak-vast{position:static;height:auto;padding:0;overflow:visible}

/* De voortgang binnen een gepinde sectie, als dun streepje onderin. */
.plak-maat{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:min(210px,42vw);height:3px;border-radius:99px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.plak-maat i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--rain),var(--sky));
  transform:scaleX(var(--p,0));transform-origin:0 50%;
}

/* ---------- Gepinde radar ----------
   De kaart is staand (444x500), dus in een gepind scherm moet hij
   z'n hoogte afstaan in plaats van de breedte op te eisen. */
/* Alles moet samen in één scherm passen: kop, kaart, balk, knoppen en
   legenda. De kaart krijgt letterlijk wat er overblijft — vandaar de aftrek
   in de calc: dat is de gemeten hoogte van al het andere bij elkaar. */
.plak-aan .plak-radar .wx-map{
  /* Beginwaarde voor het eerste beeld; beweging.js meet daarna precies
     hoeveel ruimte er over is en zet de echte hoogte. */
  max-height:min(460px,calc(100svh - 500px));
  min-height:170px;
  margin-inline:auto;
}
.plak-aan .plak-radar .wx-radar{margin-top:clamp(8px,1.4vw,14px)}
.plak-aan .plak-radar .radar-kop{margin-bottom:clamp(6px,1.2vw,12px)}
.plak-aan .plak-radar .radar-kop .eyebrow{margin-bottom:10px;font-size:12px}
.plak-aan .plak-radar .radar-kop h2{font-size:clamp(1.35rem,3vw,2.05rem)}
.plak-aan .plak-radar .radar-kop .lead{font-size:clamp(.92rem,1.5vw,1.05rem);margin-top:9px;max-width:58ch}
.plak-aan .plak-radar .wx-bar{margin-top:12px}
.plak-aan .plak-radar .wx-knoppen{margin-top:10px}
.plak-aan .plak-radar .wx-legend{margin-top:10px}
/* Wordt het echt krap, dan gaat eerst de legenda eruit: de kleuren staan
   ook onder de kaart uitgelegd en de kaart zelf is waar het om gaat. */
@media (max-height:760px){
  .plak-aan .plak-radar .wx-legend{display:none}
  .plak-aan .plak-radar .radar-kop .lead{display:none}
  .plak-aan .plak-radar .radar-kop h2{font-size:clamp(1.25rem,2.6vw,1.7rem)}
  .plak-aan .plak-radar .wx-map{max-height:min(420px,calc(100svh - 340px))}
}
/* Zolang je door de kaart scrolt vertelt dit hoe ver vooruit je kijkt. */
.radar-vooruit{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:12px;padding:7px 14px;border-radius:999px;
  background:rgba(143,227,255,.14);border:1px solid rgba(143,227,255,.24);
  font-size:13px;font-weight:800;letter-spacing:.01em;color:var(--sky);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.plak-aan .plak-radar.bezig .radar-vooruit{opacity:1;transform:none}
.radar-vooruit i{
  width:7px;height:7px;border-radius:50%;background:var(--sky);flex:none;
  box-shadow:0 0 0 4px rgba(143,227,255,.18);
}

/* ---------- De vier soorten kutweer ----------
   Een gepinde sectie waar je met je scrollwiel door de stemmingen
   heen loopt: de lucht achter de pagina draait mee. */
.soorten{position:relative;text-align:center}
/* Basis: de vier staan gewoon onder elkaar en zijn allemaal leesbaar. Zo
   ziet iemand zonder JS — of met een scherm waar de sectie niet in past —
   precies dezelfde vier antwoorden, alleen niet één voor één. */
.soort-stapel{display:block}
.soort{max-width:36ch;margin:0 auto clamp(28px,5vw,44px)}
.soort:last-child{margin-bottom:0}
.soort-punten{display:none}

/* Pas als de sectie écht plakt, stapelen ze in één vak en wisselen ze. */
.plak-aan .plak:not(.plak-uit) .soort-stapel{
  position:relative;min-height:clamp(210px,32svh,320px);display:grid;place-items:center;
}
.plak-aan .plak:not(.plak-uit) .soort{
  grid-area:1/1;margin:0;
  opacity:0;visibility:hidden;transform:translateY(26px) scale(.96);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;
  pointer-events:none;
}
.plak-aan .plak:not(.plak-uit) .soort.aan{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s;
}
.plak-aan .plak:not(.plak-uit) .soort-punten{display:flex}
.soort .soort-sym{width:clamp(64px,11vw,92px);height:clamp(64px,11vw,92px);margin:0 auto 14px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.soort b{display:block;font-size:clamp(2rem,6vw,3.4rem);font-weight:900;letter-spacing:-.04em;line-height:1.05}
.soort span{display:block;margin-top:12px;font-size:clamp(1rem,2vw,1.18rem);font-weight:600;color:var(--ink-soft);line-height:1.5}
.soort-punten{justify-content:center;gap:9px;margin-top:clamp(22px,4vw,34px)}
.soort-punten i{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.soort-punten i.aan{background:var(--sky);transform:scale(1.35)}

/* ---------- Gepinde telefoon (over.html) ---------- */
.plak-aan .plak-telefoon .hero{padding:0}
.plak-aan .plak-telefoon .hero-grid{align-items:center;gap:clamp(20px,4vw,52px)}
.plak-aan .plak-telefoon .phone{width:min(250px,64vw)}
.plak-aan .plak-telefoon .hero h1{font-size:clamp(1.9rem,4.4vw,3.1rem)}
.plak-aan .plak-telefoon .hero .lead{margin-top:16px;font-size:clamp(1rem,1.9vw,1.16rem)}
/* De prijsuitleg en de knoppen mogen wijken; in een gepind scherm gaat het
   om de telefoon en de regel die erbij hoort. */
.plak-aan .plak-telefoon .note{display:none}
.plak-aan .plak-telefoon .btn-row{margin-top:20px}
/* De regels die bij de scene horen wisselen mee met de telefoon. */
/* Ook hier: alle vier de regels staan er gewoon, tenzij de sectie plakt. */
.scene-tekst{margin-top:18px}
.scene-tekst p{
  margin:0;font-size:clamp(1.02rem,2vw,1.24rem);
  color:var(--ink-soft);font-weight:450;line-height:1.55;
}
.scene-tekst p+p{margin-top:10px}
.plak-aan .plak:not(.plak-uit) .scene-tekst{position:relative;min-height:4.6em}
.plak-aan .plak:not(.plak-uit) .scene-tekst p{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;
}
.plak-aan .plak:not(.plak-uit) .scene-tekst p.aan{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s;
}
.scene-tekst p b{color:var(--ink);font-weight:800}

/* ---------- Rijkere reveals ----------
   De bestaande .reveal blijft precies zoals hij was; dit zijn extra
   richtingen en een trapje in de vertraging, zodat een rij kaarten
   binnenkomt als een rij en niet als een blok. */
.js .reveal[data-uit="links"]{transform:translateX(-34px)}
.js .reveal[data-uit="rechts"]{transform:translateX(34px)}
.js .reveal[data-uit="schaal"]{transform:scale(.94)}
.js .reveal[data-uit="waas"]{filter:blur(9px);transform:translateY(16px)}
.js .reveal.in[data-uit]{transform:none;filter:none}
.js .reveal[style*="--i"]{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- De navbalk ---------- */
.nav{transition:height .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.gekrompen .nav{height:54px;background:rgba(13,18,33,.86);box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* Hoe ver je bent, als regenblauwe streep onder de balk. */
.nav-voortgang{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--rain),var(--sky),var(--thunder));
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- Kaarten die meekijken ----------
   Een kaart kantelt een paar graden naar je muis toe. Subtiel: het
   moet aanvoelen als glas dat meebeweegt, niet als een draaimolen. */
.kantel,
.js .reveal.in.kantel{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s var(--ease);
  transform-style:preserve-3d;
}
/* Zolang de kaart nog niet ingescrold is heeft de reveal voorrang: die
   schuift 'm omhoog. Pas daarna neemt de kanteling het over. */
.js .reveal:not(.in).kantel{transform:translateY(26px)}
.kantel.bezig{transition:transform .08s linear}
.kantel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(143,227,255,.14),transparent 65%);
  opacity:0;transition:opacity .35s var(--ease);
}
.kantel.bezig::after{opacity:1}

/* ---------- Parallax ---------- */
.js .parallax{will-change:transform}

/* ---------- Lopende oneliners ----------
   De zinnen die de app onder je oordeel zet, als lint over de pagina. */
.lint{
  position:relative;overflow:hidden;
  padding:clamp(16px,2.4vw,24px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.lint-spoor{display:flex;width:max-content;will-change:transform}
.lint-spoor span{
  display:inline-flex;align-items:center;gap:clamp(20px,4vw,44px);
  padding-right:clamp(20px,4vw,44px);
  font-size:clamp(1.05rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.03em;
  color:var(--ink-soft);white-space:nowrap;
}
.lint-spoor span i{
  width:7px;height:7px;border-radius:50%;background:var(--rain);flex:none;
  font-style:normal;
}
.lint-spoor span em{font-style:normal;color:var(--sky)}

/* ---------- De wind en de bliksem doen overal mee ----------
   lucht.js schrijft --wind en --flits op deze paar elementen. Zo waait de
   regen in de uitslagkaart dezelfde kant op als die op de achtergrond, en
   slaat een flits ook door de glazen panelen heen. */
@media (prefers-reduced-motion:no-preference){
  .wx-fx.rain,.rainfx{transform:skewX(var(--wind,0deg));transition:transform .25s linear}
}
.glass,.wx-card,.phone-screen{--flits:0}
.glass::after,.wx-card::after,.phone-screen::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:rgba(226,236,255,.9);
  opacity:calc(var(--flits,0) * .13);
}

/* ---------- Kleine dingen ---------- */
/* weer.css laat het weersymbool zweven op @keyframes float — die was
   nergens gedefinieerd, dus het symbool stond stil. Hier staat hij. */
@media (prefers-reduced-motion:no-preference){
  @keyframes float{0%,100%{transform:translateY(7px)}50%{transform:translateY(-7px)}}
}

/* De uitslagkaart mag zich aankondigen als hij binnenkomt. */
@media (prefers-reduced-motion:no-preference){
  .wx-card:not([hidden]){animation:kaartIn .6s var(--ease) backwards}
  @keyframes kaartIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
}

/* ---------- Smal scherm ----------
   Op een telefoon is een gepind scherm snel te krap. De pin blijft,
   maar korter en met minder ruimte eromheen. */
@media (max-width:700px){
  .plak-aan .plak-radar .radar-kop .lead{display:none}
  .plak-aan .plak-radar .wx-legend{display:none}
  .plak-vast{padding:calc(var(--nav-h,62px) + 6px) 0 12px}
  .plak-aan .plak:not(.plak-uit) .soort-stapel{min-height:clamp(190px,30svh,260px)}
}
/* Landschap op een telefoon: 100svh is dan zo laag dat pinnen niks
   toevoegt en alleen maar in de weg zit. */
@media (max-height:520px){
  html.plak-aan .plak{height:auto!important}
  html.plak-aan .plak-vast{position:static;height:auto;padding:0;overflow:visible}
  html.plak-aan .plak .soort-stapel{display:block;min-height:0}
  html.plak-aan .plak .soort{grid-area:auto;margin:0 auto clamp(24px,5vw,38px);opacity:1;transform:none;pointer-events:auto}
  html.plak-aan .plak .soort-punten,html.plak-aan .plak .plak-maat{display:none}
  html.plak-aan .plak .scene-tekst{position:static;min-height:0}
  html.plak-aan .plak .scene-tekst p{position:static;opacity:1;transform:none}
  html.plak-aan .plak .scene-tekst p+p{margin-top:10px}
  /* Ook de krimp van de gepinde kaart terugdraaien, anders blijft er een
     postzegel over in een sectie die helemaal niet meer plakt. */
  html.plak-aan .plak-radar .wx-map{max-height:min(74vh,720px);max-width:none;min-height:0}
  html.plak-aan .plak-radar .radar-kop .lead{display:block}
  html.plak-aan .plak-radar .wx-legend{display:flex}
}

/* ---------- Minder beweging ----------
   Alles uit. Het doek blijft staan met een stilstaand weerbeeld
   (lucht.js tekent dan één beeld), de rest is gewoon een pagina. */
@media (prefers-reduced-motion:reduce){
  .lucht{transition:none}
  .plak{height:auto!important}
  .plak-vast{position:static;height:auto;padding:0;overflow:visible}
  .lint-spoor{animation:none}
  .kantel{transform:none}
}