/* Gids v1 (Mijn Leerplein): figuur met wolkje en bewegende introscène. Versie 1.0.0, 8 oktober 2026. */
@font-face { font-family: 'Andika'; src: url('andika-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('andika-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

.gids { position: relative; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; font-family: 'Andika', system-ui, sans-serif; }
.gids[hidden] { display: none; }
.gids-fig { flex: none; position: relative; transform-origin: 50% 100%; }
.gids-fig img { display: block; height: 100%; width: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28)); user-select: none; }
.gids-groot .gids-fig { height: var(--gids-h, 230px); }
.gids-rond .gids-fig {
  width: var(--gids-r, 74px); height: var(--gids-r, 74px); border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff, #e0f2fe); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.gids-rond .gids-fig img { height: 190%; margin: 6% auto 0; }
.gids-fig.wissel { animation: gidsWissel .35s ease-out; }
.gids.praat .gids-fig { animation: gidsPraat .5s ease-in-out infinite alternate; }
.gids.praat.gids-rond .gids-fig { box-shadow: 0 0 0 4px #fde047, 0 4px 12px rgba(0, 0, 0, .25); }
@keyframes gidsWissel { 0% { transform: scale(.94) translateY(4px); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes gidsPraat { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-3px) rotate(.6deg); } }

.gids-wolk {
  position: relative; background: #fff; color: #10233f; border-radius: 18px; padding: 10px 14px 11px;
  font-size: 18px; line-height: 1.3; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); max-width: var(--gids-wolk, 340px);
  align-self: center; pointer-events: auto;
}
.gids-wolk[hidden] { display: none; }
.gids-wolk::before {
  content: ''; position: absolute; left: -9px; bottom: 18px; width: 18px; height: 18px; background: #fff;
  transform: rotate(45deg); border-radius: 3px;
}
.gids-naam { display: block; font-size: 13px; color: #0f766e; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px; }
.gids-wolk.nieuw { animation: gidsWolk .3s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes gidsWolk { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.gids.wolk-boven { flex-direction: column; align-items: flex-start; }
.gids.wolk-boven .gids-wolk::before { left: 30px; bottom: -8px; }

/* ---------- introscène ---------- */
.gids-scene {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #0b1530; color: #fff;
  font-family: 'Andika', system-ui, sans-serif; opacity: 0; transition: opacity .45s;
}
.gids-scene.aan { opacity: 1; }
.gids-scene.uit { opacity: 0; }
.gids-scene-bg { position: absolute; inset: -4%; background-size: cover; background-position: center; animation: gidsKen 16s ease-out forwards; }
.gids-scene-bg > svg { width: 100%; height: 100%; display: block; }
@keyframes gidsKen { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
.gids-scene-glans { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 62%, rgba(0, 0, 0, .55)); pointer-events: none; }
.gids-scene-titel {
  position: absolute; top: 6vh; left: 0; right: 0; margin: 0; text-align: center;
  font-size: clamp(40px, 9vw, 104px); font-weight: 700; letter-spacing: .02em; line-height: 1;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .45);
}
.gids-scene-titel span { display: inline-block; opacity: 0; animation: gidsLetter .55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes gidsLetter { from { opacity: 0; transform: translateY(-60px) rotate(-8deg) scale(.6); } to { opacity: 1; transform: none; } }
.gids-scene-sub {
  position: absolute; top: calc(6vh + clamp(48px, 10vw, 118px)); left: 16px; right: 16px; margin: 0; text-align: center;
  font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; opacity: 0; animation: gidsIn .6s 1.3s forwards; text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.gids-scene-fig {
  position: absolute; left: 4vw; bottom: 0; height: min(68vh, 560px); width: auto; transform: translateX(-130%);
  animation: gidsBinnen .9s .7s cubic-bezier(.25, 1.3, .5, 1) forwards; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45));
}
.gids-scene-fig.praat { animation: gidsBinnen .9s .7s cubic-bezier(.25, 1.3, .5, 1) forwards, gidsPraat .5s 1.6s ease-in-out infinite alternate; }
@keyframes gidsBinnen { to { transform: translateX(0); } }
.gids-scene-wolk {
  position: absolute; left: calc(4vw + min(30vh, 250px)); bottom: min(40vh, 330px); max-width: min(520px, 52vw);
  background: #fff; color: #10233f; border-radius: 22px; padding: 14px 18px; font-size: clamp(17px, 2vw, 22px); font-weight: 700; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: gidsWolk .35s cubic-bezier(.3, 1.5, .5, 1);
}
.gids-scene-wolk b { display: block; font-size: 13px; color: #0f766e; text-transform: uppercase; letter-spacing: .06em; }
.gids-scene-wolk::before { content: ''; position: absolute; left: -10px; bottom: 26px; width: 22px; height: 22px; background: #fff; transform: rotate(45deg); border-radius: 4px; }
.gids-scene-wolk[hidden] { display: none; }
.gids-scene-knoppen { position: absolute; right: 4vw; bottom: 5vh; display: flex; gap: 12px; align-items: center; opacity: 0; animation: gidsIn .5s 1.8s forwards; }
.gids-scene-start {
  font: inherit; font-size: 26px; font-weight: 700; color: #fff; background: #0f8a7e; border: 0; border-radius: 18px;
  padding: 14px 38px; min-height: 56px; box-shadow: 0 6px 0 #0a5f57, 0 12px 24px rgba(0, 0, 0, .35); cursor: pointer;
}
.gids-scene-start:active { transform: translateY(4px); box-shadow: 0 2px 0 #0a5f57; }
.gids-scene-over { font: inherit; font-size: 16px; color: #fff; background: rgba(255, 255, 255, .16); border: 0; border-radius: 12px; padding: 10px 16px; min-height: 48px; cursor: pointer; }
@keyframes gidsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gids-scene.rustig *, .gids-scene.rustig { animation: none !important; transition: none !important; }
.gids-scene.rustig .gids-scene-titel span, .gids-scene.rustig .gids-scene-sub, .gids-scene.rustig .gids-scene-knoppen { opacity: 1; }
.gids-scene.rustig .gids-scene-fig { transform: none; }
@media (max-width: 700px), (max-height: 520px) {
  .gids-scene-fig { height: min(44vh, 300px); left: 0; }
  .gids-scene-wolk { left: 16px; right: 16px; bottom: calc(min(44vh, 300px) + 8px); max-width: none; }
  .gids-scene-wolk::before { left: 40px; bottom: -9px; }
  .gids-scene-knoppen { left: 16px; right: 16px; justify-content: flex-end; bottom: 16px; }
}
@media (max-height: 520px) {
  .gids-scene-fig { height: 62vh; }
  .gids-scene-wolk { left: 32vh; right: 16px; bottom: 40vh; }
  .gids-scene-wolk::before { left: -10px; bottom: 18px; }
  .gids-scene-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gids-fig, .gids-wolk, .gids.praat .gids-fig { animation: none !important; }
}