/* side-3d.css — pladsen til 3D-scenen i heroen på teori-, problem- og oversigtssiderne.
   Brede skærme: scenen står til højre for teksten. Smalle: under teksten, aldrig oven på den. */

.sd3d-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .9s cubic-bezier(.22, .8, .24, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.sd3d-klar .sd3d-stage { opacity: 1; }
.sd3d-laerred { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.sd3d-etiketter { position: absolute; inset: 0; overflow: hidden; }

/* teksten får venstre halvdel, når der er en scene */
.hero.sd3d-plads > :not(.sd3d-stage), .sd-oversigt-hero.sd3d-plads > :not(.sd3d-stage) { position: relative; z-index: 1; max-width: min(620px, 50%); }
.hero.sd3d-plads, .sd-oversigt-hero.sd3d-plads { min-height: 430px; }

.sd3d-etiket { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; max-width: 190px;
  padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 750; line-height: 1.25; letter-spacing: .005em;
  color: #eafcff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(13, 32, 56, .62); border: 1px solid rgba(123, 228, 238, .32);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .8); pointer-events: auto; cursor: pointer;
  transition: opacity .35s, background .2s, border-color .2s, box-shadow .2s; will-change: transform, opacity; }
.sd3d-etiket b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: .66rem;
  background: linear-gradient(135deg, #12c4a8, #5fe1cf); color: #06202a; }
.sd3d-etiket:hover, .sd3d-etiket.er-aktiv { background: rgba(18, 196, 168, .9); color: #04202a; border-color: transparent; box-shadow: 0 10px 26px -10px rgba(18, 196, 168, .9); }
.sd3d-etiket:hover b, .sd3d-etiket.er-aktiv b { background: #06202a; color: #7be9da; }
.sd3d-etiket--hoejre { max-width: 230px; }

/* når man hopper til et begreb fra scenen, blinker kortet kort */
@keyframes sd3d-blink { 0% { box-shadow: 0 0 0 0 rgba(18, 196, 168, .0); } 25% { box-shadow: 0 0 0 5px rgba(18, 196, 168, .55); } 100% { box-shadow: 0 0 0 0 rgba(18, 196, 168, 0); } }
.sd3d-blink { animation: sd3d-blink 1.6s ease-out; }

@media (max-width: 900px) {
  .sd3d-stage { position: relative; display: block; width: auto; height: 250px; margin: 6px calc(-1 * clamp(20px, 5vw, 60px)) calc(-1 * clamp(32px, 5vw, 54px));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%); mask-image: linear-gradient(180deg, transparent 0, #000 20%); }
  .hero.sd3d-plads > :not(.sd3d-stage), .sd-oversigt-hero.sd3d-plads > :not(.sd3d-stage) { max-width: none; }
  .hero.sd3d-plads, .sd-oversigt-hero.sd3d-plads { min-height: 0; }
  .sd3d-etiket { font-size: .72rem; max-width: 70vw; }
}
@media (max-width: 600px) { .sd3d-stage { height: 220px; } }

@media print { .sd3d-stage { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sd3d-stage { transition: none; } .sd3d-blink { animation: none; } }
@media (max-width: 900px) {
  .sd-oversigt-hero .sd3d-stage { margin: 6px calc(-1 * clamp(20px, 5vw, 56px)) calc(-1 * clamp(34px, 6vw, 64px)); }
}