/* ==========================================================================
   NOVA Lëtzebuerg — stylesheet
   A five-act story: Andromeda → supernova → elements → Orion → three stars
   ========================================================================== */

/* --------------------------------- Tokens --------------------------------- */
:root {
  --purple:        #6b2c6b;
  --purple-lit:    #a75aa7;
  --purple-glow:   #c97ec9;
  --teal:          #17a2a8;
  --teal-lit:      #4fd8de;
  --gold:          #f3c97a;

  --bg:            #06040c;
  --bg-2:          #0c0718;
  --ink:           #ece7f4;
  --ink-soft:      #b7adc9;
  --ink-mute:      #8b81a0;

  --glass:         rgba(14, 8, 26, .58);
  --glass-line:    rgba(199, 170, 220, .16);

  --gutter:        clamp(1.25rem, 5vw, 4.5rem);
  --wrap:          78rem;
  --r:             18px;

  --sans:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display:       'Montserrat', 'Segoe UI', system-ui, sans-serif;

  --ease:          cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------- Base ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
/* `img { display: block }` is an author rule: it outranks the browser's
   stylesheet and would cancel the hidden attribute. Restore it here. */
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.012em; }
p  { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a  { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--teal); color: #04121a; font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

:where(a, button):focus-visible {
  outline: 2px solid var(--teal-lit);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ----------------------------- Brand slot --------------------------------
   Every slot holds BOTH the vector drawing and an image. If the official
   logo file is dropped into assets/img/ (see main.js), the photo takes the
   drawing's place everywhere; otherwise the vector stays on screen.       */
.mark { display: block; position: relative; }
.mark__img { width: 100%; height: auto; border-radius: inherit; }
.mark__svg { width: 100%; height: auto; }
.mark.has-photo .mark__svg { display: none; }

/* ------------------------- Animated "supernova" mark ---------------------- */
.burst {
  display: block; width: 100%; height: 100%; overflow: visible;
  /* The mark sits on the Andromeda photograph: without a halo of its
     own it dissolves into it. */
  filter: drop-shadow(0 0 7px rgba(243, 201, 122, .55)) drop-shadow(0 0 18px rgba(107, 44, 107, .5));
}
.burst__galaxy {
  transform-origin: 32px 32px; transform-box: view-box;
  animation: nb-spin 90s linear infinite;
}
/* The seed stays lit at all times: between two bursts the mark must
   never fall to nothing. */
.burst__seed {
  transform-origin: 32px 32px; transform-box: view-box;
  animation: nb-seed 4.5s ease-in-out infinite;
}
.burst__nova {
  transform-origin: 32px 32px; transform-box: view-box;
  animation: nb-nova 9s ease-in-out infinite;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }
@keyframes nb-seed {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes nb-nova {
  0%, 38% { opacity: 0;   transform: scale(.14); }
  44%     { opacity: .65; transform: scale(.45); }
  52%     { opacity: 1;   transform: scale(1.05); }
  60%     { opacity: 1;   transform: scale(1.55); }
  70%     { opacity: .95; transform: scale(1.30); }
  86%     { opacity: .75; transform: scale(1.12); }
  100%    { opacity: 0;   transform: scale(.14); }
}

/* ---------------------------- Background sky ------------------------------ */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

main, .foot { position: relative; z-index: 1; }

/* ------------------------------- Navigation ------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: .85rem var(--gutter);
  background: linear-gradient(180deg, rgba(6, 4, 12, .9), rgba(6, 4, 12, 0));
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease);
}
.nav.is-stuck {
  background: rgba(7, 4, 14, .86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--glass-line);
  padding-block: .6rem;
}

.nav__brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; flex: 0 0 auto;
}
/* The mark is drawn in the brand colours. On a dark background we redefine
   these three tokens — the shapes stay identical. */
.nav__glyph, .foot__glyph {
  --brand-ink: #e3cfee;
  --brand-accent: #4fd8de;
  --brand-paper: transparent;   /* at 46px the arcades read as solid */
}
.nav__burst { display: block; width: 30px; height: 30px; flex: 0 0 auto; }
.nav__mark  { width: 46px; flex: 0 0 auto; border-radius: 5px; }
.nav__glyph {
  height: 32px;
  filter: drop-shadow(0 0 12px rgba(201, 126, 201, .35));
}

/* Small — bar and footer — we keep only the drawing from the official
   logo (wreath, hands, bridge). The "NOVA Lëtzebuerg" engraved in the
   image would be illegible at 46px and would duplicate the wordmark set
   right beside it. The crop reproduces the vector symbol exactly:
   viewBox "68 46 504 344" on a 640 plate — hence 640/504, 68/504, 46/504. */
.nav__mark.has-photo,
.foot__mark.has-photo {
  aspect-ratio: 504 / 344;
  overflow: hidden;
}
.nav__mark.has-photo .mark__img,
.foot__mark.has-photo .mark__img {
  width: 126.98%;
  max-width: none;
  margin-left: -13.49%;
  margin-top: -9.13%;
  border-radius: 0;
}

.nav__word { display: flex; flex-direction: column; line-height: 1; }
.nav__word strong {
  font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: .06em;
}
.nav__word em {
  font-style: normal; font-family: var(--display); font-weight: 500;
  font-size: .62rem; letter-spacing: .34em; color: var(--teal-lit); margin-top: .18rem;
}

.nav__links {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
  margin-left: auto;
}
.nav__links a {
  position: relative;
  text-decoration: none;
  font-size: .82rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: .35rem;
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--teal-lit); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.lang { display: flex; gap: .2rem; padding: .2rem; border: 1px solid var(--glass-line); border-radius: 999px; }
.lang__btn {
  border: 0; background: none; cursor: pointer;
  font: 600 .7rem/1 var(--display); letter-spacing: .08em;
  color: var(--ink-mute); padding: .42rem .6rem; border-radius: 999px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active { background: var(--purple); color: #fff; }

.nav__toggle {
  display: none;
  width: 42px; height: 38px; padding: 9px 8px;
  border: 1px solid var(--glass-line); border-radius: 10px;
  background: rgba(255, 255, 255, .04); cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ----------------------------- Progress bar ------------------------------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 101;
  background: rgba(255, 255, 255, .06);
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--purple-lit), var(--teal-lit));
  box-shadow: 0 0 12px rgba(79, 216, 222, .6);
}

/* =================================== ACTS ================================= */
.act { position: relative; }

.act__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
}

.act__media { position: absolute; inset: 0; }
.act__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--z, 1.06)) translate3d(0, var(--py, 0px), 0);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  will-change: transform;
  opacity: var(--op, 1);
}
.act__media--contain img { object-fit: contain; background: #04030a; }

/* The Crab is framed with "contain": its very bright core lands dead
   centre, exactly where the radial veil is weakest. Caught up here. */
.act--elements .act__veil {
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(6, 4, 12, .34) 0%, rgba(6, 4, 12, .6) 58%, rgba(6, 4, 12, .94) 100%),
    linear-gradient(180deg, rgba(6, 4, 12, .88) 0%, rgba(6, 4, 12, .3) 26%, rgba(6, 4, 12, .4) 68%, rgba(6, 4, 12, .96) 100%);
}

.act__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(6, 4, 12, 0) 0%, rgba(6, 4, 12, .55) 62%, rgba(6, 4, 12, .92) 100%),
    linear-gradient(180deg, rgba(6, 4, 12, .85) 0%, rgba(6, 4, 12, .18) 28%, rgba(6, 4, 12, .30) 66%, rgba(6, 4, 12, .95) 100%);
}
.act__veil--soft {
  background:
    radial-gradient(110% 80% at 50% 50%, rgba(6, 4, 12, 0) 0%, rgba(6, 4, 12, .4) 68%, rgba(6, 4, 12, .88) 100%),
    linear-gradient(180deg, rgba(6, 4, 12, .72) 0%, rgba(6, 4, 12, .05) 34%, rgba(6, 4, 12, .72) 100%);
}

.act__flow {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
  display: grid;
  gap: 60vh;
  padding: 58vh var(--gutter) 46vh;
}

/* ---------------------------------- Hero ---------------------------------- */
.act--andromeda .act__flow { padding-top: 0; }

.hero {
  min-height: 100vh; min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.5rem;
  padding-block: 6rem 3rem;
}
/* Hero: the supernova on the left, tethered to the emblem — like the NOVA
   mark set at the head of the Feel Humanity site. */
.hero__lockup {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.45rem, 1.5vw, 1rem);
  animation: emblem-in 1.3s var(--ease) both;
}
.hero__burst { display: block; width: clamp(72px, 11vw, 132px); aspect-ratio: 1; flex: 0 0 auto; }
.hero__tether {
  position: relative; flex: 0 0 auto;
  width: clamp(24px, 4vw, 54px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(243, 201, 122, .12), var(--teal-lit));
}
.hero__tether::after {
  content: ''; position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--teal-lit); box-shadow: 0 0 10px 2px rgba(79, 216, 222, .75);
}
.hero__mark {
  width: clamp(122px, 15vw, 186px); flex: 0 0 auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 26px 80px rgba(107, 44, 107, .5);
}
.hero__mark .mark__img { border-radius: 6px; }

/* -------------------- The three stars, on the first screen ---------------- */
.starlinks {
  display: grid; justify-items: center; gap: .75rem;
  margin-top: .6rem;
  animation: rise 1s var(--ease) .8s both;
}
.starlinks__label {
  font-family: var(--display); font-size: .64rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-mute);
}
.starlinks__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.starlinks__list a {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .62rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(199, 170, 220, .22);
  background: rgba(14, 8, 26, .58);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: .84rem;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.starlinks__list i {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle, #fff 0%, #ffeec9 28%, rgba(243, 201, 122, .55) 58%, transparent 76%);
  box-shadow: 0 0 10px 2px rgba(243, 201, 122, .6);
  animation: throb 2.8s ease-in-out infinite;
  animation-delay: calc(var(--k) * .45s);
}
.starlinks__list a:hover {
  border-color: rgba(79, 216, 222, .6);
  background: rgba(23, 162, 168, .18);
  transform: translateY(-2px);
}
.hero__title {
  font-size: clamp(2.05rem, 6.4vw, 4.6rem);
  font-weight: 800;
  max-width: 17ch;
  text-wrap: balance;
}
.hero__line { display: block; animation: rise 1s var(--ease) both; }
.hero__line:nth-child(1) { animation-delay: .25s; }
.hero__line--accent {
  animation-delay: .45s;
  background: linear-gradient(100deg, var(--purple-glow) 5%, var(--teal-lit) 70%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__sub {
  max-width: 44ch; color: var(--ink-soft);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  animation: rise 1s var(--ease) .65s both;
}
.hero__scroll {
  margin-top: 1.4rem;
  display: grid; justify-items: center; gap: .7rem;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-mute);
  animation: rise 1s var(--ease) .9s both;
}
.hero__scroll i {
  width: 1px; height: 52px;
  background: linear-gradient(180deg, var(--teal-lit), transparent);
  animation: drip 2.2s ease-in-out infinite;
}

@keyframes emblem-in { from { opacity: 0; transform: translateY(26px) scale(.9); } }
@keyframes rise      { from { opacity: 0; transform: translateY(24px); } }
@keyframes drip      { 0%, 100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* --------------------------------- Panels --------------------------------- */
.panel {
  width: min(38rem, 100%);
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
  border: 1px solid var(--glass-line);
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  display: grid; gap: 1.1rem;

  opacity: 0; transform: translateY(46px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.panel.is-in { opacity: 1; transform: none; }

.panel--left   { justify-self: start; }
.panel--right  { justify-self: end; }
.panel--center { justify-self: center; text-align: center; width: min(46rem, 100%); background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* With no glass panel behind it, this text sits straight on the
   photograph: the shadow carries the contrast, including over the very
   bright heart of the Crab. */
.panel--center :where(p, h2, li) {
  text-shadow: 0 1px 3px rgba(3, 2, 8, .95), 0 2px 16px rgba(3, 2, 8, .9), 0 0 44px rgba(3, 2, 8, .75);
}

.panel__eyebrow {
  font-family: var(--display);
  font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--teal-lit);
}
.panel__eyebrow.center { text-align: center; }
.panel__title {
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  text-wrap: balance;
}
.panel__title--xl {
  font-size: clamp(1.9rem, 5.6vw, 3.9rem);
  font-weight: 800;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .85);
}
.panel__text { color: var(--ink-soft); }
.panel__text--lead { font-size: clamp(1.02rem, 1.8vw, 1.22rem); color: var(--ink); max-width: 52ch; margin-inline: auto; }
/* Longer narrative paragraphs get a wider measure than the lead, but still a
   measure — full panel width would run past comfortable reading length. */
.panel__text--wide { max-width: 64ch; margin-inline: auto; }
.panel__text--quote {
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--teal-lit);
  border-left: 2px solid var(--teal);
  padding-left: 1.1rem;
}

.credit {
  font-size: .72rem; letter-spacing: .04em; color: var(--ink-mute);
  border-top: 1px solid var(--glass-line); padding-top: .9rem;
}

.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  border-top: 1px solid var(--glass-line); padding-top: 1.1rem;
}
.facts li { display: grid; gap: .25rem; }
.facts b {
  font-family: var(--display); font-size: clamp(.95rem, 2vw, 1.22rem); font-weight: 700;
  color: var(--teal-lit); line-height: 1.1;
}
.facts sup { font-size: .6em; }
.facts span { font-size: .68rem; letter-spacing: .06em; color: var(--ink-mute); line-height: 1.35; }

/* -------------------------- Act I: the doomed star ------------------------ */
.doomed-star {
  position: absolute; left: 61%; top: 43%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  pointer-events: none;
  opacity: var(--star-op, 0);
  transform: scale(var(--star-s, 1));
}
.doomed-star i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px 3px rgba(255, 255, 255, .95),
    0 0 40px 12px rgba(243, 201, 122, .7),
    0 0 90px 30px rgba(167, 90, 167, .45);
  animation: throb 1.8s ease-in-out infinite;
}
@keyframes throb { 0%, 100% { transform: scale(.75); } 50% { transform: scale(1.25); } }

/* ---------------------------- Act II: the blast --------------------------- */
.act--supernova .act__stage { background: #030207; }
#blastCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen;
}
.flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0%, rgba(255, 232, 196, .6) 24%, rgba(167, 90, 167, .25) 48%, transparent 72%);
  opacity: var(--flash, 0);
  mix-blend-mode: screen;
}

/* --------------------------- Act III: the elements ------------------------ */
.elements {
  justify-self: center;
  width: min(62rem, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.el {
  position: relative;
  display: grid; gap: .1rem;
  padding: clamp(.85rem, 1.8vw, 1.3rem);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(23, 162, 168, .12), rgba(107, 44, 107, .12));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;

  opacity: 0;
  transform: translate3d(calc(var(--dx, 0) * 1px), 34px, 0) scale(.92);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.elements.is-in .el { opacity: 1; transform: none; }
.el::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: radial-gradient(60% 60% at 80% 0%, rgba(79, 216, 222, .28), transparent 70%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.el:hover::after { opacity: 1; }
.el b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1;
  color: var(--teal-lit);
}
.el span { font-size: .82rem; color: var(--ink); }
/* The value line is a full phrase now, not a one-word tag: uppercase and wide
   letter-spacing would make it unreadable at this size. */
.el em {
  font-style: normal; font-size: .76rem; line-height: 1.45;
  color: var(--purple-glow); margin-top: .3rem;
}

/* ----------------------------- Act IV: Orion ----------------------------- */
.protostars { position: absolute; inset: 0; pointer-events: none; }
.protostars i {
  position: absolute; left: var(--x); top: var(--y);
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, .9), 0 0 26px 8px rgba(79, 216, 222, .55);
  animation: born 4.5s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes born {
  0%, 100% { transform: scale(.2); opacity: .15; }
  45%      { transform: scale(1.35); opacity: 1; }
  70%      { transform: scale(.9); opacity: .6; }
}

/* ========================== ACT V: THE THREE STARS ======================== */
.stars {
  position: relative;
  padding: clamp(6rem, 14vh, 11rem) 0 clamp(5rem, 11vh, 9rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
  overflow: hidden;
}
.stars__bg {
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(45% 40% at 20% 25%, rgba(107, 44, 107, .35), transparent 70%),
    radial-gradient(40% 38% at 82% 70%, rgba(23, 162, 168, .28), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.stars > .wrap { position: relative; }

.stars__title {
  text-align: center;
  margin-top: .7rem;
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);
  font-weight: 800;
  text-wrap: balance;
}
.stars__title b {
  display: block; font-weight: 800;
  background: linear-gradient(100deg, var(--purple-glow), var(--teal-lit) 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stars__lead {
  margin: 1.4rem auto 0; max-width: 58ch; text-align: center; color: var(--ink-soft);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
}

.stars__close {
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  max-width: 54ch; text-align: center;
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1rem, 1.9vw, 1.25rem);
  color: var(--teal-lit);
}

.cards {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
}
.card {
  position: relative;
  display: grid; align-content: start; gap: .55rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 2.6vw, 2rem) clamp(1.8rem, 3vw, 2.4rem);
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background: linear-gradient(170deg, rgba(20, 12, 34, .85), rgba(9, 5, 18, .9));
  overflow: hidden;

  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .35s, box-shadow .35s;
  transition-delay: calc(var(--n) * 120ms);
}
.cards.is-in .card { opacity: 1; transform: none; }
.card:hover {
  border-color: rgba(79, 216, 222, .45);
  box-shadow: 0 26px 70px rgba(23, 162, 168, .18);
}

.card__star {
  width: 66px; height: 66px; margin-bottom: .6rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0%, #ffeec9 16%, rgba(243, 201, 122, .55) 34%, rgba(167, 90, 167, .3) 58%, transparent 74%);
  filter: drop-shadow(0 0 22px rgba(243, 201, 122, .55));
  animation: throb 3.4s ease-in-out infinite;
  animation-delay: calc(var(--n) * .5s);
}
.card__num {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; color: var(--ink-mute);
}
.card__name { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; }
.card__role {
  font-family: var(--display); font-weight: 600;
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-lit);
}
.card__text { color: var(--ink-soft); font-size: .95rem; margin-top: .3rem; }

.card__link {
  margin-top: 1.1rem; justify-self: start;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(79, 216, 222, .4);
  background: rgba(23, 162, 168, .12);
  text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: .82rem; letter-spacing: .06em;
  transition: background .28s var(--ease), transform .28s var(--ease), border-color .28s;
}
.card__link svg { width: 15px; height: 15px; }
.card__link:hover {
  background: var(--teal); color: #03181c; border-color: var(--teal);
  transform: translateX(3px);
}

/* ================================= EMBLEM ================================= */
.emblem {
  padding: clamp(4rem, 11vh, 8rem) 0;
  border-top: 1px solid var(--glass-line);
}
.emblem__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.emblem__visual svg {
  width: 100%; height: auto; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 90px rgba(107, 44, 107, .45);
}
.emblem__copy { display: grid; gap: 1.2rem; }

.legend { display: grid; gap: 1.1rem; margin-top: .4rem; }
.legend > div {
  display: grid; gap: .3rem;
  padding-left: 1.1rem;
  border-left: 2px solid rgba(167, 90, 167, .45);
}
.legend dt {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  letter-spacing: .02em; color: var(--ink);
}
.legend dd { color: var(--ink-soft); font-size: .93rem; }

/* ================================= CONTACT ================================ */
.contact {
  padding: clamp(4.5rem, 12vh, 8rem) 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(107, 44, 107, .3), transparent 65%),
    var(--bg);
  border-top: 1px solid var(--glass-line);
}
.contact__inner { display: grid; justify-items: center; text-align: center; gap: 1.2rem; }
.contact__title { font-size: clamp(1.6rem, 4vw, 2.7rem); max-width: 20ch; text-wrap: balance; }
.contact__text  { max-width: 52ch; color: var(--ink-soft); }
.contact__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: .8rem; }
.contact__mail { margin-top: .4rem; }
.contact__mail a {
  font-family: var(--display); font-size: .92rem; letter-spacing: .02em;
  color: var(--teal-lit); text-decoration: none;
  border-bottom: 1px solid rgba(79, 216, 222, .3);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.contact__mail a:hover { color: #fff; border-bottom-color: currentColor; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .92rem 1.7rem; border-radius: 999px;
  border: 1px solid var(--glass-line);
  text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: .88rem; letter-spacing: .04em;
  transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: rgba(79, 216, 222, .5); }
.btn--primary {
  background: linear-gradient(100deg, var(--purple), var(--teal));
  border-color: transparent; color: #fff;
  box-shadow: 0 16px 44px rgba(23, 162, 168, .3);
}

/* ================================= FOOTER ================================= */
.foot {
  padding: clamp(2.5rem, 6vh, 4rem) 0;
  border-top: 1px solid var(--glass-line);
  background: #04030a;
}
.foot__inner { display: grid; gap: 1.3rem; justify-items: center; text-align: center; }
.foot__brand { display: flex; align-items: center; gap: .7rem; }
.foot__burst { display: block; width: 28px; height: 28px; flex: 0 0 auto; }
.foot__mark  { width: 44px; flex: 0 0 auto; border-radius: 5px; }
.foot__glyph { height: 30px; }
.foot__word { display: flex; flex-direction: column; line-height: 1; }
.foot__word strong { font-family: var(--display); font-weight: 800; letter-spacing: .06em; }
.foot__word em {
  font-style: normal; font-family: var(--display); font-weight: 500;
  font-size: .6rem; letter-spacing: .3em; color: var(--teal-lit); margin-top: .18rem;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; align-items: center; }
.foot__links a {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .85rem; text-decoration: none; color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.foot__links a:hover { color: var(--teal-lit); }

/* Instagram mark: drawn in currentColor so it follows the link state. */
.foot__ig svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
.foot__ig .foot__ig-dot { fill: currentColor; stroke: none; }
.foot__credits, .foot__copy { font-size: .74rem; color: var(--ink-mute); max-width: 60ch; }
.foot__copy a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid rgba(199, 170, 220, .25);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.foot__copy a:hover { color: var(--teal-lit); border-bottom-color: currentColor; }

/* ================================ RESPONSIVE ============================== */
@media (max-width: 960px) {
  .cards { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
  .emblem__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .emblem__visual { width: min(300px, 70%); }
  .legend > div { text-align: left; }
  .elements { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .nav__toggle { display: flex; }
  .nav { gap: .8rem; }
  .nav__links {
    position: absolute; inset: 100% .75rem auto .75rem;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem;
    border: 1px solid var(--glass-line); border-radius: 16px;
    background: rgba(8, 5, 16, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);

    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: .85rem 1rem; border-radius: 10px; }
  .nav__links a::after { display: none; }
  .nav__links a:hover { background: rgba(255, 255, 255, .05); }

  /* Four languages + the burst + the emblem + the menu: tighten up. */
  .lang { margin-left: auto; }
  .lang__btn { padding: .38rem .45rem; font-size: .64rem; }
  .nav__burst { width: 24px; height: 24px; }

  .act__flow { gap: 42vh; padding-block: 44vh 34vh; }
  .panel--left, .panel--right { justify-self: stretch; }
  .elements { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: 1fr; gap: .55rem; }
  .facts li { display: flex; align-items: baseline; gap: .6rem; }
}

@media (max-width: 420px) {
  .nav__word em { display: none; }
  /* Below 420px the bar would overflow: burst and wordmark sign it well enough. */
  .nav__mark { display: none; }
  .elements { grid-template-columns: repeat(2, 1fr); }
  .hero__tether { width: 18px; }
  .starlinks__list a { font-size: .78rem; padding: .55rem .95rem; }
}

/* ============================= REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .act__stage { position: relative; height: 68vh; }
  .act__flow  { margin-top: 0; gap: 4rem; padding-block: 4rem; }
  .panel, .el, .card { opacity: 1 !important; transform: none !important; }
  /* Scroll progress also drives --op; with no pinned stage that is
     meaningless and would leave the photograph at 30%. Neutralise it. */
  .act__media img { transform: none; opacity: 1; }
  .doomed-star { opacity: 1 !important; transform: none; }
  .hero { min-height: auto; padding-block: 8rem 4rem; }
  /* The nova is invisible at 0% of its cycle: with animation off it must
     be frozen lit, otherwise it disappears outright. */
  .burst__galaxy { animation: none; }
  .burst__seed   { animation: none; opacity: 1; transform: none; }
  .burst__nova   { animation: none; opacity: 1; transform: none; }
}