/* Extra's voor de homepage. Bouwt voort op home.css. */

/* Begin van de pagina: Brikki's gezicht met witte kop eronder */
.hero{display:block;text-align:center;padding-top:clamp(4px,1.5vw,16px);margin-bottom:0} /* 30px tot het eerste blok komt van de ruimte tussen de blokken */
.gezicht{display:block;width:45cqw;max-width:none;height:auto;margin:0 auto}
.hero h1{color:var(--white);font-size:9cqw;white-space:nowrap;line-height:1.08;margin-top:clamp(12px,3cqw,24px)}
/* Ogen en neus kijken langzaam rond: omhoog, naar links, naar rechts en weer terug */
.gezicht .ogen{animation:kijk 9s ease-in-out infinite}
@keyframes kijk{0%,8%{transform:translate(0,0)}25%{transform:translate(0,-14px)}40%,46%{transform:translate(-18px,-8px)}62%,68%{transform:translate(18px,-8px)}85%,100%{transform:translate(0,0)}}

/* Eerste blok: 10px extra ruimte onder de tekst */
.extra-ruimte{margin-bottom:10px}

/* Filmpje dat ook een link is */
a.pic video{transition:transform .35s ease}
a.pic:hover video{transform:scale(1.03)}

/* Lees jij Brikki voor? Verhaaltjes die langzaam voorbij schuiven.
   Anderhalf keer zo hoog als eerst: kaartjes, ruimte ertussen en boven/onder allemaal x1,5. */
.strook{--kaart:clamp(225px,51cqw,345px);--tussen:21px;display:block;overflow:hidden;contain:inline-size;width:100%;padding:27px 0;margin-bottom:clamp(18px,2.4vw,26px);background:var(--turquoise);-webkit-tap-highlight-color:transparent}
.strook-track{display:flex;gap:var(--tussen);width:max-content;padding-left:var(--tussen);animation:strook var(--duur,80s) linear infinite;will-change:transform}
.strook-track img{flex:0 0 auto;width:var(--kaart);height:var(--kaart);background:var(--white);box-shadow:0 8px 20px -6px rgb(0 0 0 / .25)}
.strook:hover .strook-track,.strook.stil .strook-track{animation-play-state:paused}
@keyframes strook{to{transform:translateX(calc(-50% - var(--tussen) / 2))}}

/* Terug naar boven, net als op spelen.php */
.back-to-top{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:11;width:68px;height:68px;border-radius:50%;background:var(--yellow);box-shadow:0 10px 28px -6px rgb(0 0 0 / .28);opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .2s ease,transform .2s ease,bottom .3s ease;-webkit-tap-highlight-color:transparent}
.back-to-top.zichtbaar{opacity:1;pointer-events:auto;transform:none}
.back-to-top span{position:absolute;left:21px;top:25px;width:26px;height:26px;border-top:9px solid var(--blue);border-left:9px solid var(--blue);transform:rotate(45deg)}

@media (hover:none){a.pic:hover video{transform:none}}
@media (prefers-reduced-motion:reduce){
  .gezicht .ogen{animation:none}
  .strook{overflow-x:auto;scrollbar-width:none}
  .strook-track{animation:none;padding-right:var(--tussen)}
  .strook-track .dubbel{display:none}
}

/* Cookiemelding verdwijnt in één keer, zonder animatie */
.cookiebar.weg{display:none}

/* Valt de cookiemelding over twee regels, dan zijn die even lang */
.cookiebar{text-wrap:balance}