/* Eigen stijl van deze app. Gebruik zoveel mogelijk de klassen uit core.css (zie CLAUDE.md). */

/* Website van Boaz: vrolijke kinderkleuren als accenten, de basis blijft de huisstijl. */
.kids { --oranje: #F59E0B; --roze: #EC6FA5; --blauw: #4FA3E0; --geel: #FFD23F; --paars: #9B7BE0; --bruin: #A8641E;
  max-width: 1100px; margin: 0 auto; padding: 1rem 0 2rem; }
.kids h1, .kids h2, .kids h3 { letter-spacing: -.01em; }

/* Kop */
.kids-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center;
  padding: 2.5rem 2rem; border-radius: calc(var(--radius) * 2);
  background: radial-gradient(circle at 85% 30%, #FFF4D1 0, transparent 55%),
              linear-gradient(135deg, var(--groen-licht), #FFF8E6);
  overflow: hidden; position: relative; padding-top: 6.5rem; }
.kids-hero-tekst, .kids-leeuw { position: relative; z-index: 2; }
.kids-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: .6rem 0 1rem; }
.kids-naam { color: var(--oranje); display: inline-block; transform: rotate(-3deg); }
.kids-kicker { display: inline-block; padding: .3rem .85rem; border-radius: 999px; background: var(--wit, #fff);
  font-weight: 700; font-size: .85rem; box-shadow: var(--schaduw); }
.kids-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Leeuw */
.kids-leeuw-kop { width: 100%; max-width: 340px; display: block; margin: 0 auto;
  animation: kids-wiebel 4s ease-in-out infinite; transform-origin: 50% 90%; }
.kids-leeuw .manen circle { fill: var(--bruin); }
.kids-leeuw .oor { fill: var(--oranje); }
.kids-leeuw .oor-binnen { fill: #F8C27A; }
.kids-leeuw .kop { fill: var(--oranje); }
.kids-leeuw .oog { fill: #2B1A0E; }
.kids-leeuw .glim { fill: #fff; }
.kids-leeuw .wang { fill: var(--roze); opacity: .45; }
.kids-leeuw .snuit { fill: #FCE3B6; }
.kids-leeuw .neus { fill: #5A2E12; stroke: #5A2E12; stroke-width: 3; stroke-linejoin: round; }
.kids-leeuw .mond { fill: none; stroke: #5A2E12; stroke-width: 3; stroke-linecap: round; }
@keyframes kids-wiebel { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Slingers */
.kids-slinger { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-height: 120px; z-index: 3;
  overflow: visible; pointer-events: none; }
.kids-slinger .touw { fill: none; stroke: #8A6A3B; stroke-width: 3; }
.kids-slinger .vlag { transform-box: fill-box; transform-origin: 50% 0; animation: kids-wapper 3s ease-in-out infinite;
  stroke: rgba(0,0,0,.08); stroke-width: 1; }
.kids-slinger .oranje { fill: var(--oranje); } .kids-slinger .roze { fill: var(--roze); }
.kids-slinger .blauw { fill: var(--blauw); } .kids-slinger .geel { fill: var(--geel); }
.kids-slinger .groen { fill: var(--groen); } .kids-slinger .paars { fill: var(--paars); }
@keyframes kids-wapper { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.kids-slinger-los { position: relative; height: 70px; margin-bottom: 1rem; }
.kids-slinger-los .kids-slinger { max-height: 90px; }
.kids-voet .kids-slinger-los { margin: -1.5rem 0 1rem; }

/* Confetti */
.kids-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.kids-confetti span { position: absolute; width: 10px; height: 16px; border-radius: 2px; opacity: .85;
  transform: rotate(var(--draai)); animation: kids-dwarrel 7s ease-in-out infinite; }
.kids-confetti span.rond { width: 12px; height: 12px; border-radius: 50%; }
.kids-confetti .geel { background: var(--geel); } .kids-confetti .paars { background: var(--paars); }
@keyframes kids-dwarrel {
  0%, 100% { transform: translate(0, 0) rotate(var(--draai)); }
  50% { transform: translate(8px, 14px) rotate(calc(var(--draai) + 160deg)); } }

/* Ballonnen */
.kids-ballon { position: absolute; width: 70px; height: auto; z-index: 3; animation: kids-zweef 5s ease-in-out infinite; }
.kids-ballon.links { left: 0; top: -10px; fill: var(--roze); }
.kids-ballon.rechts { right: 0; top: 10px; width: 62px; fill: var(--blauw); animation-delay: -2s; }
.kids-ballon.midden { right: 22%; top: -70px; width: 54px; fill: var(--geel); animation-delay: -3.5s; }
.kids-ballon .knoop { fill: inherit; }
.kids-ballon .draad { fill: none; stroke: #8A6A3B; stroke-width: 1.5; }
.kids-ballon .glans { fill: #fff; opacity: .45; }

/* Ballon laten knallen (app.js) */
.kids-ballon { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kids-ballon:hover { filter: brightness(1.08); }
.kids-ballon.knal { animation: kids-knal .25s ease-out forwards; pointer-events: none; }
.kids-ballon.terug { animation: kids-terug 1.2s ease-out; }
@keyframes kids-knal { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.35); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; } }
@keyframes kids-terug { 0% { transform: translateY(80px) scale(.3); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.kids-snipper { position: absolute; z-index: 4; width: 9px; height: 14px; margin: -7px 0 0 -4px; border-radius: 2px;
  pointer-events: none; animation: kids-spat 1s cubic-bezier(.2,.7,.4,1) forwards; }
.kids-snipper.rond { width: 10px; height: 10px; border-radius: 50%; }
@keyframes kids-spat { 0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--draai)); opacity: 0; } }
.kids-knal-tekst { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none;
  font-weight: 900; font-size: 1.6rem; color: var(--donker); letter-spacing: .02em;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
  animation: kids-knaltekst .9s ease-out forwards; }
@keyframes kids-knaltekst { 0% { transform: translate(-50%, -50%) scale(.4) rotate(-8deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(1) rotate(-4deg); opacity: 0; } }
@keyframes kids-zweef { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .kids-leeuw-kop, .kids-slinger .vlag, .kids-confetti span, .kids-ballon { animation: none; } }

/* Weetjes */
.kids-weetjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: -1.5rem 1.5rem 0;
  position: relative; }
.kids-weetje { background: var(--wit, #fff); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 1rem; text-align: center; }
.kids-weetje strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--groen-tekst, var(--donker)); }
.kids-weetje span { color: var(--gedempt); font-size: .9rem; }

/* Blokken */
.kids-blok { margin-top: 3rem; }
.kids-blok > h2 { margin-bottom: 1.5rem; }
.kids-kaart { padding: 1.75rem; border-radius: calc(var(--radius) * 1.5); }
.kids-kaart-geel { background: #FFF8E1; border-color: #FFE08A; }
.kids-brul { font-weight: 800; font-size: 1.6rem; color: var(--oranje); transform: rotate(-2deg); margin: 1rem 0 0; }
.kids-lijst { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.kids-lijst li { display: flex; align-items: center; gap: 1rem; }
.kids-bol { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.25rem; }
.kids-bol svg, .kids-icoon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.kids-tegel { text-align: center; padding: 1.75rem 1.25rem; border-radius: calc(var(--radius) * 1.5);
  transition: transform .2s ease, box-shadow .2s ease; }
.kids-tegel:hover { transform: translateY(-4px) rotate(-1deg); }
.kids-tegel h3 { margin: 1rem 0 .4rem; }
.kids-tegel p { margin: 0; font-size: .95rem; }
.kids-icoon { width: 4rem; height: 4rem; border-radius: 1.25rem; display: inline-grid; place-items: center; color: #fff; }
.kids-icoon svg { width: 2rem; height: 2rem; }
.oranje { background: var(--oranje); }
.roze { background: var(--roze); }
.blauw { background: var(--blauw); }
.groen { background: var(--groen); }

.kids-voet { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rand); text-align: center;
  color: var(--gedempt); }
.kids-voet p { margin: 0 0 .4rem; }

@media (max-width: 760px) {
  .kids-hero { grid-template-columns: 1fr; padding: 2rem 1.25rem; text-align: center; }
  .kids-knoppen { justify-content: center; }
  .kids-leeuw { order: -1; }
  .kids-leeuw-kop { max-width: 200px; }
  .kids-hero { padding-top: 4rem; }
  .kids-ballon { width: 48px; } .kids-ballon.rechts { width: 42px; } .kids-ballon.midden { display: none; }
  .kids-slinger-los { height: 40px; }
  .kids-weetjes { margin: 1rem 0 0; gap: .5rem; }
  .kids-weetje strong { font-size: 1.5rem; }
  .kids-weetje span { font-size: .78rem; }
}
.kids-tip { margin: 1rem 0 0; font-weight: 700; color: var(--gedempt); }

/* Leeuw aaien (app.js) */
.kids-leeuw-kop { cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; }
.kids-leeuw .oog-blij { fill: none; stroke: #2B1A0E; stroke-width: 4; stroke-linecap: round; opacity: 0; }
.kids-leeuw .tong { fill: #F27A8A; opacity: 0; transition: opacity .2s; }
.kids-leeuw .oog, .kids-leeuw .glim, .kids-leeuw .wang { transition: opacity .2s; }
.kids-leeuw-kop.blij { animation-duration: 1.2s; }
.kids-leeuw-kop.blij .oog, .kids-leeuw-kop.blij .glim { opacity: 0; }
.kids-leeuw-kop.blij .oog-blij, .kids-leeuw-kop.blij .tong { opacity: 1; }
.kids-leeuw-kop.blij .wang { opacity: .85; }
.kids-hartje { position: absolute; z-index: 5; pointer-events: none; font-size: 1.6rem; line-height: 1;
  transform: translate(-50%, -50%); animation: kids-hart 1.4s ease-out forwards; }
@keyframes kids-hart { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  20% { transform: translate(-50%, -80%) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), -400%) scale(.9); opacity: 0; } }
.kids-spin { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%);
  background: #fff; color: var(--donker); font-weight: 800; padding: .45rem .9rem; border-radius: 999px;
  box-shadow: var(--schaduw); white-space: nowrap; animation: kids-spin 1.8s ease-out forwards; }
.kids-spin::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px;
  border: 7px solid transparent; border-bottom: 0; border-top-color: #fff; }
@keyframes kids-spin { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -100%) scale(1.05); } 85% { opacity: 1; transform: translate(-50%, -110%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1); } }

/* Slingers rekken mee (app.js): de vlaggetjes worden met JavaScript verplaatst */
.kids-slinger g { will-change: transform; }

/* Muisje bij het openen (app.js) */
.kids-muis { position: absolute; left: 0; top: 0; z-index: 4; width: 64px; pointer-events: none;
  transform: translate(-200px, 0); }
.kids-muis svg { display: block; width: 100%; height: auto; overflow: visible; }
.kids-muis .lijf { fill: #A7A9AC; }
.kids-muis .oortje { fill: #A7A9AC; } .kids-muis .oortje-binnen { fill: #F4A6B4; }
.kids-muis .oogje { fill: #222; } .kids-muis .neusje { fill: #F27A8A; }
.kids-muis .staart, .kids-muis .snor { fill: none; stroke: #8E9094; stroke-width: 2; stroke-linecap: round; }
.kids-muis .snor { stroke-width: 1; }
.kids-muis .poot { fill: #8E9094; }
.kids-muis.rent svg { animation: kids-hup .22s ease-in-out infinite alternate; }
.kids-muis.rent .p1 { animation: kids-poot .22s linear infinite alternate; }
.kids-muis.rent .p2 { animation: kids-poot .22s linear infinite alternate-reverse; }
@keyframes kids-hup { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes kids-poot { from { transform: translateX(-4px); } to { transform: translateX(4px); } }

/* Leeuw doet zijn bek open en kauwt */
.kids-leeuw .mond-open { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.2);
  transition: opacity .15s, transform .2s; }
.kids-leeuw .mond-open ellipse:first-child { fill: #5A1E12; }
.kids-leeuw .tong-open { fill: #F27A8A; }
.kids-leeuw .tand { fill: #fff; }
.kids-leeuw-kop.hap .mond-open { opacity: 1; transform: scaleY(1); }
.kids-leeuw-kop.hap .mond { opacity: 0; }
.kids-leeuw .snuit, .kids-leeuw .mond, .kids-leeuw .neus { transform-box: view-box; transform-origin: 100px 112px; }
.kids-leeuw-kop.kauw .snuit, .kids-leeuw-kop.kauw .mond { animation: kids-kauw .27s ease-in-out 4; }
.kids-leeuw-kop.kauw .oog, .kids-leeuw-kop.kauw .glim { opacity: 0; }
.kids-leeuw-kop.kauw .oog-blij { opacity: 1; }
@keyframes kids-kauw { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.12) translateY(2px); } }

/* De website van Boaz heeft geen bovenbalk van de portal nodig (alleen op de publieke pagina). */
body.layout-public:has(.kids) .topbar { display: none; }

/* Confettikanon (app.js) */
.kids-kanon { position: fixed; left: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-direction: column;
  align-items: center; gap: .1rem; padding: .5rem .6rem .45rem; border: 0; border-radius: 1.25rem;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18); cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.kids-kanon:hover { transform: translateY(-2px) scale(1.04); }
.kids-kanon:focus-visible { outline: 3px solid var(--blauw, #4FA3E0); outline-offset: 3px; }
.kids-kanon svg { width: 76px; height: auto; display: block; overflow: visible; }
.kids-kanon span { font-weight: 900; font-size: .95rem; color: var(--donker); letter-spacing: .03em; }
.kids-kanon .loop rect { fill: #3A3D4A; }
.kids-kanon .loop .rand { fill: #F59E0B; }
.kids-kanon .streep { fill: none; stroke: #EC6FA5; stroke-width: 5; stroke-linecap: round; }
.kids-kanon .wiel { fill: #A8641E; }
.kids-kanon .as { fill: #FFD23F; }
.kids-kanon .spaak { fill: none; stroke: #7A4512; stroke-width: 3; }
.kids-kanon .loop { transform-box: view-box; transform-origin: 44px 70px; }
.kids-kanon.schiet .loop { animation: kids-terugslag .35s ease-out; }
.kids-kanon.schiet .wiel, .kids-kanon.schiet .spaak, .kids-kanon.schiet .as { animation: kids-wielrol .35s ease-out; }
.kids-kanon .wiel, .kids-kanon .spaak, .kids-kanon .as { transform-box: view-box; transform-origin: 44px 70px; }
@keyframes kids-terugslag { 0% { transform: translate(0, 0); } 25% { transform: translate(-9px, 6px) rotate(4deg); }
  100% { transform: translate(0, 0); } }
@keyframes kids-wielrol { 0% { transform: rotate(0); } 25% { transform: translateX(-4px) rotate(-40deg); } 100% { transform: rotate(0); } }
.kids-confetti-doek { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 49; pointer-events: none; }
@media (max-width: 760px) {
  .kids-kanon { left: .6rem; bottom: .6rem; padding: .4rem .45rem .35rem; }
  .kids-kanon svg { width: 58px; }
}