/*
 * Naturfagslaboratoriets 3D-hero.
 *
 * Lærredet ligger bag heroens tekst. Selve scenen bygges af naturfag-hero3d.js;
 * uden WebGL (eller uden JavaScript) står heroens CSS-baner som før.
 */

.lab-intro-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lab-intro-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* En rolig skygge bag teksten, så overskrift og brødtekst altid kan læses. */
.lab-intro.has-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 36, 67, .78) 0%, rgba(18, 36, 67, .42) 42%, rgba(18, 36, 67, 0) 68%);
}

/* De gamle CSS-baner erstattes af 3D-scenen, men står stadig for skærmlæsere. */
.lab-intro.has-3d .lab-intro-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

@media (max-width: 900px) {
  .lab-intro.has-3d::before {
    background: linear-gradient(180deg, rgba(18, 36, 67, .62), rgba(18, 36, 67, .3) 70%, rgba(18, 36, 67, .1));
  }
}

/* ── Den faste baggrund bag resten af siden (naturfag-baggrund3d.js) ── */
.naturfag-bg3d {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.naturfag-bg3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Panelerne bliver en anelse gennemsigtige, så baggrunden kan anes bag dem. */
.har-bg3d .lab-panel,
.har-bg3d .progress-strip,
.har-bg3d .journey-nav {
  background-color: rgba(255, 255, 255, .8);
}

/* ── De seks sansemodeller i 3D (naturfag-sanser3d.js) ── */
.sense3d {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 390;
  background: #0d2038;
  overflow: hidden;
}
.sense3d canvas { display: block; width: 100%; height: 100%; }
.sense3d__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sense3d__label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 8px;
  font: 750 .66rem/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: pre;
  text-align: center;
  color: #e8f4ff;
  background: rgba(9, 26, 48, .78);
  border: 1px solid rgba(123, 228, 238, .38);
  will-change: transform;
}
.sense3d__label.is-skjult { visibility: hidden; }
.sense3d__meter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: grid;
  gap: 5px;
  width: min(190px, 42%);
  text-align: right;
  font: 750 .68rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #bfe3f0;
  pointer-events: none;
}
.sense3d__meter i {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.sense3d__meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7be4ee, #b58bff);
  transform: scaleX(0);
  transform-origin: left center;
}
/* SVG'en bliver stående som tekstalternativ for skærmlæsere, men ses ikke. */
.har-sense3d #senseSvg {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}
@media (max-width: 520px) {
  .sense3d__label { font-size: .62rem; padding: 3px 6px; }
  .sense3d__meter { display: none; }
}

/* ── Synapsen i 3D (naturfag-synapse3d.js) ── */
.synapse3d { aspect-ratio: 720 / 440; }
.har-synapse3d #synapseSvg {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

/* ── Lyd og bølger i 3D (naturfag-boelger3d.js) ── */
.boelge3d { aspect-ratio: 900 / 420; }
.har-boelge3d #waveCanvas {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

/* ── Krop i praksis i 3D (naturfag-kroppen3d.js) ── */
.kropp3d { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
.pp-lab-visual { position: relative; }
.har-kropp3d .pp-lab-visual .pp-lab-canvas { opacity: 0; }

/* Højere ramme på mobil: modellerne får mere plads til etiketter (kameraet tilpasses i koden). */
@media (max-width: 620px) {
  .sense3d:not(.kropp3d),
  .synapse3d,
  .boelge3d { aspect-ratio: 7 / 5; }
}

/* ── Balance-modellerne i 3D (naturfag-systemer3d.js) ── */
.systems-visual > .sys3d { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
.sys3d-aktiv .systems-visual > #systemsCanvas { opacity: 0; }

/* ── Kemi-værktøjerne i 3D (naturfag-kemi3d.js) ── */
.kemi3d { border-radius: 12px; margin: 10px 0; }
.kemi3d--atom { aspect-ratio: 1 / 1; max-height: 360px; }
.kemi3d--molekyle { aspect-ratio: 16 / 10; }
.kemi3d canvas { display: block; width: 100%; height: 100%; }
.kemi3d__hint {
  position: absolute; left: 10px; right: 10px; bottom: 9px; text-align: center;
  font: 750 .68rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #cfe3f5; text-shadow: 0 1px 6px #0d2038; pointer-events: none;
}
.kemi3d__hint.er-ok { color: #a8fff0; }
.kemi3d__tekst { font-size: .7rem; line-height: 1.45; color: #55657c; margin: 0 0 8px; }
.sense3d__label--sym { background: transparent; border: 0; padding: 0; font-size: .74rem; text-shadow: 0 1px 5px #0d2038, 0 0 3px #0d2038; }
.sense3d__label--sym.kemi3d__label--ion { color: #ffd98c; }
.kemi3d__label--ambra { border-color: rgba(224, 181, 99, .6); color: #ffd98c; }
@media (max-width: 620px) {
  .kemi3d--atom { aspect-ratio: 5 / 5; }
  .kemi3d--molekyle { aspect-ratio: 4 / 3; }
}

/* ── Emnebiblioteket i 3D (naturfag-emner3d.js) ── */
.topic-model-art.har-emne3d { position: relative; padding: 0; overflow: hidden; min-height: 250px; background: #0d2038; border-color: #1c3558; }
.topic-model-art.har-emne3d > svg { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.emne3d { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
.emne3d canvas { display: block; width: 100%; height: 100%; }
.topic-model-grid:has(.har-emne3d) { grid-template-columns: 1fr; }
.topic-model-art.har-emne3d { min-height: 300px; }
@media (max-width: 620px) { .topic-model-art.har-emne3d { min-height: 260px; } }

/* Besked ved indgang: enheder */
.development-notice-device { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 13px; border-radius: 12px; background: #eaf3fb; border: 1px solid #c9d8e6; font-size: .8rem; line-height: 1.5; color: #2c3e57; text-align: left; }
.development-notice-device > span:first-child { flex: none; font-size: 1.05rem; line-height: 1.3; }
.development-notice-logning { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 13px; border-radius: 12px; background: #f1f6ee; border: 1px solid #cfe0c6; font-size: .8rem; line-height: 1.5; color: #35502b; text-align: left; }
.development-notice-logning > span:first-child { flex: none; font-size: 1.05rem; line-height: 1.3; }