/* Altair V2 — paginaschil: het 3D-toneel, korrel, kop, menu, footer, gordijn. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: none;
  padding-inline: var(--gutter);
}

/* --- Het toneel: één vaste WebGL-laag onder de hele pagina ---------------
   Het atelier is geen plaatje achter de hero maar een ruimte waar de bezoeker
   doorheen vliegt: de scrollpositie stuurt de camera. Alle secties zijn
   hierover gecomponeerd. */

/* De poster staat er altijd: één koperen lichtbron hoog in een donkere
   ruimte, met dennengroen dat naar de bodem wegzakt. Dat is meteen het
   alternatief als WebGL uitvalt én het beeld dat de bezoeker ziet vóór het
   canvas klaar is — de harde eis uit het brief is dat het 3D-werk de eerste
   verf niet mag ophouden. */
.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-stage);
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 62% 26%, var(--copper-glow), transparent 68%),
    radial-gradient(90% 60% at 20% 96%, rgb(30 77 66 / 0.35), transparent 66%),
    linear-gradient(180deg, var(--ink), var(--pine) 62%, var(--ink));
}

/* Het canvas komt over de poster heen zodra het zijn eerste beeld heeft
   getekend, zodat er nooit een zwart frame tussen zit. */
.stage canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-cinematic) var(--ease-out-expo);
}

.stage[data-ready="true"] canvas {
  opacity: 1;
}

/* De arend: eigen 2D-laag boven het toneel, onder de tekst.
   Vliegt ook als WebGL uitvalt. */
.aquila {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-grain);
  pointer-events: none;
}

/* Filmkorrel: 2-3% zoals het brief vraagt. Maskeert banding op de grote
   donkere vlakken en geeft de platte kleurvlakken materiaal. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 6s steps(6) infinite;
}

@keyframes grain-drift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain {
    animation: none;
  }

  .aquila {
    display: none;
  }
}

.shell {
  position: relative;
  z-index: var(--z-content);
}

/* Sluier voor tekst die over het toneel ligt. De 3D-ruimte heeft lichte
   vlakken (verlichte vellen, de ster), en ivoren tekst daarop haalt niet
   overal de AA-drempel. Deze sluier dempt de kant waar de tekst staat en
   laat de andere kant volledig open, zodat de ruimte zichtbaar blijft.
   Contrast mag niet afhangen van wat er toevallig achter zweeft. */
.veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgb(8 21 18 / 0.86) 0%,
    rgb(8 21 18 / 0.62) 34%,
    rgb(8 21 18 / 0.14) 64%,
    transparent 84%
  );
}

/* --- Kop ----------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  padding: var(--s-6) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo),
    padding var(--dur-base) var(--ease-out-expo);
}

.masthead[data-stuck="true"] {
  background: rgb(8 21 18 / 0.72);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom-color: var(--hairline-dark);
  padding-block: var(--s-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1;
  color: var(--ivory);
  text-transform: uppercase;
}

/* Het sterteken staat inline zodat de laadsequentie de lijnen zelf kan laten
   tekenen; als <img> is dat onmogelijk. */
.wordmark__star {
  width: 22px;
  height: 22px;
  flex: none;
  filter: drop-shadow(0 0 6px var(--copper-glow));
}

.wordmark__star path,
.wordmark__star circle {
  transform-origin: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ivory-soft);
  padding-block: var(--s-2);
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--ivory);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* --- Menuknop en overlay (mobiel) ---------------------------------------- */

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--hairline-dark-strong);
  border-radius: var(--radius-pill);
}

.menu-toggle span[aria-hidden] {
  display: block;
  height: 1px;
  background: var(--ivory);
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.menu-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(2) {
  transform: translateY(3px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(3) {
  transform: translateY(-3px) rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  display: grid;
  align-content: center;
  gap: var(--s-12);
  padding: var(--s-24) var(--gutter) var(--gutter);
  background: rgb(8 21 18 / 0.97);
  backdrop-filter: blur(20px);
}

.menu[hidden] {
  display: none;
}

.menu__links {
  display: grid;
  gap: var(--s-2);
}

.menu__links a {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 6vw, 3.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.menu__links a:hover,
.menu__links a:focus-visible {
  color: var(--copper);
}

.menu__mail {
  font-size: var(--text-sm);
  color: var(--muted-on-dark);
}

@media (width < 1024px) {
  .nav,
  .masthead__end .btn {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* --- Voortgangslijn ------------------------------------------------------ */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: calc(var(--z-nav) + 1);
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--leaf), var(--copper));
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  position: relative;
  background: var(--ink);
  border-top: 1px solid var(--hairline-dark);
  padding-block: var(--s-16) var(--s-8);
}

.footer__grid {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}

@media (width >= 768px) {
  .footer__grid {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.footer__line {
  margin-top: var(--s-4);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--ivory-faint);
  max-width: var(--measure-body);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  font-size: var(--text-sm);
  color: var(--muted-on-dark);
}

.footer__links a:hover {
  color: var(--ivory);
}

.footer__base {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--text-xs);
  color: var(--muted-on-dark);
}

/* --- Het gordijn: de laadsequentie -------------------------------------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity 700ms var(--ease-out-expo),
    visibility 0s linear 700ms;
}

.curtain[hidden] {
  display: none;
}

body[data-curtain="open"] .curtain {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.curtain__star {
  width: clamp(64px, 12vw, 104px);
  height: auto;
}

/* De lijnen tekenen zichzelf: 0-400ms uit het brief. */
.curtain__star path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: draw-star 520ms var(--ease-out-expo) forwards;
}

.curtain__star circle {
  transform: scale(0);
  transform-origin: center;
  animation: pop-star 420ms var(--ease-overshoot) 420ms forwards;
}

@keyframes draw-star {
  to { stroke-dashoffset: 0; }
}

@keyframes pop-star {
  to { transform: scale(1); }
}