/* Vaste vrienden: rustig, vaste plek, korte bewegingen (zie vrienden.js en personages-concept.md) */
.vriend { position: absolute; top: 0; right: 10%; z-index: 4; width: var(--b, 90px); pointer-events: none; }
.vriend__lijf { all: unset; display: block; position: relative; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.vriend__lijf:focus-visible { outline: 3px solid var(--tomaat); outline-offset: 4px; border-radius: 8px; }
.vriend img, .lijstkop__beeld .vriend img, .kaart__beeld img.vriend-gluur {
  display: block; width: 100%; height: auto; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  outline: 0 !important; background: none !important; transform: none; max-height: none; }
.vriend__lijf { filter: drop-shadow(0 6px 6px rgba(14, 59, 47, .25)); }
.vriend__kleur { position: absolute; inset: 0; opacity: 0; }
.vriend__gluren { display: none !important; }

/* Ballon: alleen als je hem aantikt */
.vriend__ballon { position: absolute; bottom: calc(100% + 8px); right: 0; width: max-content; max-width: 240px; opacity: 0; transform: translateY(6px) scale(.9);
  transform-origin: 85% 100%; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 5;
  background: var(--papier); color: var(--inkt); border: 2px solid var(--inkt); border-radius: 14px; padding: 8px 12px;
  font: 600 .85rem/1.35 var(--tekst, sans-serif); box-shadow: 3px 3px 0 var(--inkt); }
.vriend__ballon a { color: var(--tomaat); white-space: nowrap; }
.vriend.praat .vriend__ballon { opacity: 1; transform: none; pointer-events: auto; }
/* Vrienden op de bovenrand: ballon eronder, want erboven is geen ruimte */
.vriend--aap .vriend__ballon, .vriend--kameleon .vriend__ballon { bottom: auto; top: calc(100% + 6px); transform-origin: 85% 0; }

/* Aap: hangt aan de bovenrand van de foto, slingert 1 keer uit */
.vriend--aap { --b: 84px; right: 14%; top: -38px; }
.vriend--aap .vriend__lijf { transform-origin: 50% 3%; }
.vriend--aap.speelt .vriend__lijf { animation: vriend-slinger 2.6s ease-in-out; }
@keyframes vriend-slinger { 0% { transform: rotate(0); } 18% { transform: rotate(12deg); } 42% { transform: rotate(-9deg); } 64% { transform: rotate(5deg); } 84% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }

/* Gelukskat: zit rechtsonder op de hoek van de foto en zwaait (animatie in vrienden.js) */
.vriend--kat { --b: 80px; top: auto; bottom: -10%; right: -3%; }
.vriend--kat .vriend__ballon { right: 10px; }
.vriend--kat.speelt .vriend__lijf { animation: vriend-hup .6s ease-out; }  /* alleen als de animatie (nog) niet geladen is */
@keyframes vriend-hup { 40% { transform: translateY(-8px); } }

/* Kameleon: ligt op een takje op de bovenrand en kleurt heel even op */
.vriend--kameleon { --b: 140px; right: 5%; transform: translateY(-64%); }
.vriend--kameleon.speelt .vriend__kleur { animation: vriend-kleur 2.6s ease-in-out; }
@keyframes vriend-kleur { 0% { opacity: 0; } 30%, 62% { opacity: 1; } 100% { opacity: 0; } }

/* Kiekeboe: komt van achter zijn eigen poster omhoog. Desktop bij hover, mobiel 1 keer als hij in beeld komt */
.kaart--vriend .kaart__poster { position: relative; z-index: 2; }
.kaart--vriend .kaart__sfeer { z-index: 3; }
.kaart--vriend:hover .kaart__sfeer { transition-delay: 1.4s; }
.kaart__beeld img.vriend-gluur { position: absolute; left: 50%; top: 13%; width: 34%; z-index: 1; transform: translate(-50%, 10%);
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.kaart--vriend:hover img.vriend-gluur, .kaart--vriend.kiekeboe img.vriend-gluur { transform: translate(-50%, -80%); }
.kaart__beeld img.vriend-gluur--kameleon { width: 30%; }

/* Productpagina: klein en stil */
.vriend-ik { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; font-size: .92rem; color: var(--tekst, inherit); }
.vriend-ik img { width: 44px; height: auto; flex: none; border: 0; box-shadow: none; }
.vriend-ik a { color: var(--tomaat); }

@media (max-width: 700px) {
  .vriend--aap { --b: 62px; top: -28px; }
  .vriend--kat { --b: 60px; }
  .vriend--kameleon { --b: 112px; }
  .vriend__ballon { max-width: 200px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vriend .vriend__lijf, .vriend .vriend__kleur, .vriend__ballon, .kaart__beeld img.vriend-gluur { animation: none !important; transition: none !important; }
}

/* De andere 10 (29-10-2026). Elke beweging max 2,6 seconden, eindigt in rust. .vriend__kleur is hun tweede houding. */
/* Allemaal op de bovenrand van de kopfoto: linksonder zit het posterkaartje, rechtsonder Pim */
.vriend--hert, .vriend--roulin, .vriend--meisje { top: 0; transform: translateY(-32%); }
.vriend--kreeft, .vriend--kever, .vriend--duif, .vriend--oog { top: 0; transform: translateY(-48%); }
.vriend--gummy { top: 0; transform: translateY(-14%); }  /* lang en smal: grotendeels op de foto, anders valt hij boven de kop weg */
.vriend--zwartekat { top: 0; transform: translateY(-52%); }
.vriend--hert, .vriend--kreeft, .vriend--roulin { left: 9%; right: auto; }
.vriend--meisje, .vriend--gummy, .vriend--kever, .vriend--zwartekat, .vriend--duif, .vriend--oog { right: 10%; }
.vriend--vlinder { left: 6%; right: auto; top: 0; transform: translateY(-40%); }
.vriend--hert { --b: 84px; } .vriend--gummy { --b: 64px; } .vriend--kreeft { --b: 96px; } .vriend--zwartekat { --b: 104px; }
.vriend--duif { --b: 88px; } .vriend--roulin { --b: 84px; } .vriend--meisje { --b: 82px; } .vriend--vlinder { --b: 78px; }
.vriend--oog { --b: 100px; } .vriend--kever { --b: 68px; }
/* Ballon onder de vriend, want erboven is geen ruimte */
.vriend--hert .vriend__ballon, .vriend--gummy .vriend__ballon, .vriend--kreeft .vriend__ballon, .vriend--zwartekat .vriend__ballon, .vriend--duif .vriend__ballon,
.vriend--roulin .vriend__ballon, .vriend--meisje .vriend__ballon, .vriend--vlinder .vriend__ballon, .vriend--oog .vriend__ballon, .vriend--kever .vriend__ballon {
  bottom: auto; top: calc(100% + 6px); transform-origin: 85% 0; }
.vriend--hert .vriend__ballon, .vriend--kreeft .vriend__ballon, .vriend--roulin .vriend__ballon, .vriend--vlinder .vriend__ballon { right: auto; left: 0; transform-origin: 15% 0; }
/* Donkere figuren en dunne lijnen: lichte rand, zodat ze ook op een donkere foto te zien zijn */
.vriend--zwartekat .vriend__lijf, .vriend--oog .vriend__lijf, .vriend--hert .vriend__lijf, .vriend--roulin .vriend__lijf {
  filter: drop-shadow(0 0 1.5px rgba(255, 253, 249, .9)) drop-shadow(0 6px 6px rgba(14, 59, 47, .25)); }

/* Tweede houding even tonen: hert flapt zijn oor, kat rekt zich uit, Roulin tikt aan zijn pet, meisje blaast een grote bel, kever opent zijn schild */
.vriend[data-beweging="tweede"].speelt .vriend__kleur { animation: vriend-tweede 2.4s ease-in-out; }
@keyframes vriend-tweede { 0%, 12% { opacity: 0; } 22%, 70% { opacity: 1; } 82%, 100% { opacity: 0; } }
.vriend--hert.speelt .vriend__lijf { animation: vriend-kanteling 2.4s ease-in-out; transform-origin: 50% 90%; }
@keyframes vriend-kanteling { 25%, 65% { transform: rotate(-4deg); } }
/* Duif: fladdert op en landt weer */
.vriend--duif.speelt .vriend__lijf { animation: vriend-op 2.2s ease-in-out; }
.vriend--duif[data-beweging].speelt .vriend__kleur { animation: vriend-tweede 2.2s ease-in-out; }
@keyframes vriend-op { 0%, 15% { transform: none; } 40% { transform: translateY(-18px); } 70% { transform: translateY(-6px); } 100% { transform: none; } }
/* Oog: knippert 1 keer, kort */
.vriend--oog[data-beweging].speelt .vriend__kleur { animation: vriend-knipper 1.2s steps(1, end); }
@keyframes vriend-knipper { 0%, 40% { opacity: 0; } 41%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
.vriend--oog.speelt .vriend__rust { animation: vriend-knipper-uit 1.2s steps(1, end); }
@keyframes vriend-knipper-uit { 0%, 40% { opacity: 1; } 41%, 56% { opacity: 0; } 57%, 100% { opacity: 1; } }
/* Gummybeer: wiebelt als pudding */
.vriend--gummy .vriend__lijf { transform-origin: 50% 100%; }
.vriend--gummy.speelt .vriend__lijf { animation: vriend-pudding 1.6s ease-out; }
@keyframes vriend-pudding { 0% { transform: none; } 15% { transform: scale(1.12, .86); } 30% { transform: scale(.9, 1.1); } 45% { transform: scale(1.06, .95); }
  60% { transform: scale(.97, 1.03); } 75% { transform: scale(1.01, .99); } 100% { transform: none; } }
/* Kreeften: knippen 2 keer */
.vriend--kreeft .vriend__lijf { transform-origin: 50% 80%; }
.vriend--kreeft.speelt .vriend__lijf { animation: vriend-knip 1.4s ease-in-out; }
@keyframes vriend-knip { 0%, 100% { transform: none; } 15% { transform: rotate(-6deg) scale(1.03); } 30% { transform: rotate(4deg); } 50% { transform: rotate(-6deg) scale(1.03); } 65% { transform: rotate(4deg); } 82% { transform: rotate(-1deg); } }
/* Vlinder: een rondje fladderen, vleugels open en dicht */
.vriend--vlinder.speelt .vriend__lijf { animation: vriend-rondje 2.6s ease-in-out; }
@keyframes vriend-rondje { 0% { transform: none; } 25% { transform: translate(34px, -16px) rotate(10deg); } 50% { transform: translate(60px, 8px) rotate(-6deg); }
  75% { transform: translate(24px, 18px) rotate(-12deg); } 100% { transform: none; } }
.vriend--vlinder.speelt .vriend__kleur { animation: vriend-klap 2.6s steps(1, end); }
.vriend--vlinder.speelt .vriend__rust { animation: vriend-klap-uit 2.6s steps(1, end); }
@keyframes vriend-klap { 0%, 8% { opacity: 0; } 9%, 17% { opacity: 1; } 18%, 26% { opacity: 0; } 27%, 35% { opacity: 1; } 36%, 44% { opacity: 0; } 45%, 53% { opacity: 1; } 54%, 62% { opacity: 0; } 63%, 71% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes vriend-klap-uit { 0%, 8% { opacity: 1; } 9%, 17% { opacity: 0; } 18%, 26% { opacity: 1; } 27%, 35% { opacity: 0; } 36%, 44% { opacity: 1; } 45%, 53% { opacity: 0; } 54%, 62% { opacity: 1; } 63%, 71% { opacity: 0; } 72%, 100% { opacity: 1; } }
.kaart__beeld img.vriend-gluur--oog, .kaart__beeld img.vriend-gluur--vlinder { width: 30%; }

@media (max-width: 700px) {
  .vriend--hert, .vriend--roulin, .vriend--meisje, .vriend--duif { --b: 70px; } .vriend--kreeft, .vriend--zwartekat, .vriend--oog { --b: 80px; }
  .vriend--gummy, .vriend--kever, .vriend--vlinder { --b: 58px; }
  @keyframes vriend-rondje { 25% { transform: translate(20px, -12px) rotate(10deg); } 50% { transform: translate(36px, 6px) rotate(-6deg); } 75% { transform: translate(14px, 12px) rotate(-12deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .vriend .vriend__rust { animation: none !important; opacity: 1 !important; }
}

/* Kreeften: dunne blauwe lijnen vallen weg op de donkere kop, dus een eigen kaartje in de roze kleur van hun poster, schuin als een sticker */
.vriend--kreeft { --b: 104px; transform: translateY(-18%) rotate(-5deg); }
.vriend--kreeft .vriend__lijf { background: #F9EAE4; border: 2px solid var(--wit, #fffdf9); border-radius: 14px; padding: 8px 10px;
  box-shadow: 0 10px 22px -10px rgba(14, 59, 47, .55); filter: none; }
@media (max-width: 700px) { .vriend--kreeft { --b: 86px; } }