/* Exploded view (hero-prototyp.html, below the hero): the Erde globe taken apart into its layers while scrolling –
   tilted, lifted apart with a name for each, then put back together. Layers: real renders of the web map
   (assets/explode, one per layer from the same camera, freed from their background). */
.explode { --label: 0; position: relative; height: 560vh; background: radial-gradient(ellipse 70% 60% at 60% 45%, #0e1c29 0%, #0b1824 50%, #060d15 100%); color: #eef3f1; }
.explode-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; }
.explode-copy { max-width: 440px; }
.explode-copy .eyebrow { color: #c9dccf; }
.explode-copy h2 { color: #fff; margin: 14px 0 16px; }
.explode-copy h2 em { color: var(--lime, #deea88); }
.explode-copy p { color: #9fb1ad; }
.explode-count { margin-top: 26px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9fb1ad; }
.explode-count b { color: #fff; font-size: 34px; letter-spacing: 0; margin-right: 8px; font-variant-numeric: tabular-nums; }

.explode-scene { position: relative; height: 100vh; perspective: 1900px; perspective-origin: 50% 30%; }
.explode-stack { --rx: 0deg; --rz: 0deg; --gap: 0px; position: absolute; left: 40%; top: 64%; width: min(48vh, 32vw, 500px); aspect-ratio: 1;
  translate: -50% -50%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateZ(var(--rz)); }
.explode-layer { --lift: 0px; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap) + var(--lift))); transition: filter .4s ease, opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.explode-layer.is-active { --lift: calc(var(--gap) * .45); }
.explode-layer img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Light and atmosphere is a dark veil over the whole globe: lighter while apart, so it reads as a layer. */
.explode-layer.is-light img { opacity: calc(1 - .45 * var(--label)); }
/* Anchors at each disc's right edge (in the tilted stack); the names themselves stand upright in a column to the
   right (explode.js places them at their anchor's height), with a leader line back to the disc. */
.explode-label { position: absolute; left: 100%; top: 50%; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.explode-names { position: absolute; inset: 0; pointer-events: none; }
.explode-name { pointer-events: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.explode-name:focus-visible { outline: 2px solid #deea88; outline-offset: 4px; border-radius: 4px; }
.explode-name { position: absolute; left: var(--x, 78%); width: 24%; min-width: 170px; translate: 0 -.7em; opacity: calc(var(--label, 0) * .55); transition: opacity .35s ease; }
/* One layer at a time tells its story (explode.js walks up the stack while it is held apart). */
.explode-name.is-active { opacity: var(--label, 0); }
/* Shown at once (its height counts for the layout of the names below), faded in. */
.explode-name span { display: none; }
.explode-name.is-active span { display: block; animation: explode-in .4s ease; }
@keyframes explode-in { from { opacity: 0; translate: 0 -3px; } to { opacity: 1; translate: none; } }
/* The picked layer stands out: the others step back (dimmer, paler, fainter), it lifts a little out of the stack. */
.explode-stack.is-reading .explode-layer:not(.is-active) { filter: brightness(.55) saturate(.6); opacity: .45; }
.explode-name::before { content: ""; position: absolute; right: calc(100% + 8px); top: .7em; width: var(--line, 40px); height: 1px; background: linear-gradient(90deg, rgba(222, 234, 136, .15), rgba(222, 234, 136, .75)); }
.explode-name::after { content: ""; position: absolute; right: calc(100% + 8px + var(--line, 40px)); top: calc(.7em - 2.5px); width: 6px; height: 6px; margin-right: -3px; border-radius: 50%; background: #deea88; }
.explode-name b { display: block; color: #fff; font-size: 15px; line-height: 1.3; }
/* Eleven layers: only the one in focus tells its story (all at once ran off the screen). */
.explode-name span { color: #b8c7c2; font-size: 13px; line-height: 1.45; margin-top: 3px; }

/* Phones: one caption under the stack (the layer in focus) and dots to pick one, instead of the column. */
.explode-caption, .explode-dots { display: none; }
@media (max-width: 860px) {
  .explode { height: 420vh; }
  .explode-sticky { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 64px; padding-bottom: 20px; }
  .explode-copy { flex: none; }
  .explode-copy h2 { font-size: 28px; margin: 8px 0 0; }
  .explode-copy p, .explode-count { display: none; }
  .explode-scene { flex: 1; height: auto; min-height: 0; perspective-origin: 50% 20%; }
  .explode-stack { width: min(78vw, 48vh, 380px); left: 47%; top: 53%; }
  .explode-names { display: none; }
  .explode-caption { display: block; position: absolute; left: 0; right: 0; bottom: 22px; min-height: 64px; opacity: var(--label); text-align: center; }
  .explode-caption b { display: block; color: #fff; font-size: 17px; }
  .explode-caption span { display: block; margin: 4px auto 0; max-width: 32ch; color: #b8c7c2; font-size: 14px; line-height: 1.45; }
  /* Vertical, at the right edge, top dot = top layer (a row of dots would suggest swiping sideways). */
  .explode-dots { display: flex; flex-direction: column-reverse; gap: 2px; position: absolute; right: -6px; top: 53%; translate: 0 -50%; opacity: var(--label); }
  .explode-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
  .explode-dots button::before { content: ""; display: block; width: 7px; height: 7px; margin: auto; border-radius: 50%; background: rgba(238, 243, 241, .3); transition: background .3s ease, scale .3s ease; }
  .explode-dots button.is-active::before { background: #deea88; scale: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .explode { height: auto; }
  .explode-sticky { position: relative; height: auto; padding: 80px 0; }
  .explode-scene { height: 60vh; }
}