/* De rail in WebGL: het eerste scherm van De kaart, compact op de home. Zonder .kan-3d blijven de labels in CSS staan. */
.rail-3d { display: none; }

.kan-3d .kaart-pagina { padding-top: 0; }
.kan-3d .haken { display: none; }
.kan-3d .kaart-pagina .kaart-intro { padding-top: clamp(40px, 5vw, 72px); padding-right: var(--rand); }

.kan-3d .rail-3d {
  display: block; position: relative; height: 86svh; min-height: 560px; overflow: hidden;
  background: #0c0605; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -6px;
}
.rail-3d.sleept { cursor: grabbing; }
.rail-3d canvas { display: block; width: 100%; height: 100%; }
.rail-3d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 0 100%, #0c0605f2 30%, #0c060500),
    linear-gradient(transparent 82%, var(--roet));
}

.rail-3d-info { position: absolute; z-index: 2; left: var(--rand); bottom: clamp(20px, 4vh, 40px); width: min(28rem, calc(100% - 2 * var(--rand))); pointer-events: none; text-shadow: 0 1px 12px #000; }
.rail-3d-naam { font: 400 clamp(2.5rem, 4.6vw, 4rem)/1 var(--display); max-width: none; }
.rail-3d-info p:not(.rail-3d-naam) { margin-top: 6px; color: var(--vet-zacht); }
.rail-3d-info dl { max-width: 23rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; margin-top: 12px; font-size: .9375rem; }
.rail-3d-info dd { font-variant-numeric: tabular-nums; text-align: right; }

.rail-3d-hulp { position: absolute; z-index: 2; right: var(--rand); bottom: clamp(20px, 4vh, 40px); max-width: 17rem; color: var(--vet-zacht); font-size: .9375rem; text-align: right; }

.rail-3d-laden { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; max-width: none; text-align: center; }
.rail-3d.is-klaar .rail-3d-laden { display: none; }
.rail-3d:not(.is-klaar) :is(.rail-3d-info, .rail-3d-hulp) { visibility: hidden; }

/* Compact op de home: de tekst staat links, de labels lopen naar rechts weg */
.kan-3d .kaart-thuis { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.kan-3d .rail-3d-kort { height: clamp(500px, 66svh, 620px); min-height: 0; margin-top: clamp(20px, 3vw, 40px); }
.rail-3d-kort::after {
  background:
    linear-gradient(90deg, #0c0605f2 16%, #0c060500 34%),
    linear-gradient(transparent 82%, var(--roet));
}
.rail-3d-kort .rail-3d-info { bottom: 112px; width: min(22rem, calc(100% - 2 * var(--rand))); }
.rail-3d-kort .rail-3d-naam { font-size: clamp(2.25rem, 3.4vw, 3.25rem); }
.rail-3d-kort .rail-3d-hulp { left: var(--rand); right: auto; bottom: 22px; max-width: 22rem; text-align: left; }
.kan-3d .kaart-thuis .kaart-na { margin-top: clamp(20px, 3vw, 40px); }

@media (max-width: 760px) {
  .kan-3d .rail-3d { height: 84svh; }
  .rail-3d-info { bottom: 52px; }
  .rail-3d-naam { font-size: 2.25rem; }
  .rail-3d-info dl { font-size: .875rem; }
  .rail-3d-hulp { left: var(--rand); right: var(--rand); bottom: 16px; max-width: none; text-align: left; }
  .kan-3d .rail-3d-kort { height: 560px; }
  .rail-3d-kort::after { background: linear-gradient(transparent 62%, var(--roet) 88%); }
  .rail-3d-kort .rail-3d-info { bottom: 50px; }
  .rail-3d-kort .rail-3d-naam { font-size: 2rem; }
  .rail-3d-kort .rail-3d-hulp { right: var(--rand); bottom: 16px; }
}