/* EDA — opening: het eerste scherm van de site is een donkere ruimte waarin de sterren het logo vormen.
 * Scrollen stuurt de reis door het logo naar de lichte site (assets/js/intro.js). De hero zit in dezelfde sectie:
 * hij ligt precies onder het beeld op het moment dat de reis eindigt. Zonder opening is de sectie gewoon de hero. */
.ix { position: relative; --ix-run: 170svh; }
.ix-stage { display: none; }
html.ix-on .ix-stage { display: block; position: sticky; top: 0; z-index: 2; height: 100svh; overflow: hidden; background: #050609; color: #ECEAE4; }
html.ix-on .ix-stage.is-through { pointer-events: none; }
html.ix-on .ix > .s-hero { position: relative; z-index: 1; margin-top: calc(var(--ix-run) - 100svh); }
.ix-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.ix-canvas.is-dragging { cursor: grabbing; }
.ix-brand { position: absolute; left: 50%; top: 70%; transform: translateX(-50%); width: min(92vw, 640px); display: grid; justify-items: center; gap: 14px; text-align: center; pointer-events: none; }
/* Woordmerk zoals in het merkbestand (eda-logo-full): "EDA" vet, "Systems" regulier, zelfde grootte. */
.ix-word { margin: 0; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.015em; color: #F2F1EC; white-space: nowrap; }
.ix-word b { font-weight: 700; }
.ix-word span { font-weight: 400; }
.ix-l, .s-l { display: inline-block; font-style: normal; }
/* will-change alleen tijdens het invliegen (intro.js): tientallen permanente lagen kosten op telefoons veel geheugen. */
.ix-tag { margin: 0; font-size: clamp(15px, 1.35vw, 19px); font-weight: 400; letter-spacing: .005em; color: rgba(236,234,228,.66); }
/* Onzichtbare vlakte onderaan: klikken of tikken brengt je in een rustige, gewone beweging naar de website. */
.ix-next { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 3; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ix-next:focus-visible { outline: 2px solid #9DB8FF; outline-offset: -6px; }
/* Overslaan (toetsenbord): verschijnt bij focus. */
.ix-skip { position: fixed; z-index: 200; left: 16px; top: 12px; padding: 8px 12px; border-radius: 6px; background: var(--paper); color: var(--ink); font-size: var(--t-ui); text-decoration: none; transform: translateY(-160%); }
.ix-skip:focus { transform: none; }

/* Navigatie: tijdens de reis stuurt intro.js de onderdelen (logo-landing, letters, items). Achtergrond pas na de landing. */
.s-nav { transition: transform .45s cubic-bezier(.16,1,.3,1), border-color var(--d-ui); }
html.ix-on:not(.ix-run) .s-nav { opacity: 0; }
.s-nav.is-bare { background: rgba(247,246,242, calc(.82 * var(--navbg, 0))); backdrop-filter: none; border-bottom-color: transparent; }
/* Verdwijnt bij naar beneden scrollen, komt terug bij naar boven scrollen (site.js). */
.s-nav.is-hidden { transform: translateY(-100%); }

@media (max-width: 900px) {
  .ix { --ix-run: 150svh; }
}