/* ceeme-hero.css — DE HERO: ALLEEN HET BEELD.
   ================================================================================================
   Njusja, 8 augustus, bij componenten/hero-bol-2.html: "jaaaaaa fantastisch!" — en daarvoor al:
   "geen copy op de hero!!!! enkel zo'n beeld als ik toonde met ceeme. erop! dan bij scrollen (opzij)
   pas de copy."

   Dus staat hier één ding: een schermvullend zwart vlak met de bol erin, en het woordmerk erover.
   De inhoud staat in lib/hero.js, het rekenwerk in ceeme-hero.js, de vorm hier.

   ── De harde regel, en ze beslist de hele opbouw ───────────────────────────────────────────────
   ZONDER JAVASCRIPT VERANDERT ER NIETS AAN WAT ER STAAT.

   Dat is bij een WebGL-hero makkelijker dan het klinkt, en precies daarom is dit de goede plek voor
   een beeld: de bol is DECORATIE. Alles wat gelezen moet worden — het woordmerk, de vaktermen — is
   gewone tekst die er altijd staat. Valt het canvas weg (geen WebGL, geen JavaScript, een shader die
   niet compileert), dan blijft er een zwart vlak met witte tekst over. Dat is geen kapotte pagina,
   dat is een sobere pagina.

   Er staat dus nergens een `opacity: 0` of een `display: none` die op JavaScript wacht. Dat is de
   valkuil waar elke mooie hero op internet in trapt, en het is letterlijk wat wij bij klanten als
   fout meten. scripts/test-zonderjs.mjs knipt élk <script> weg en controleert het.

   ── Waarom er geen H1 in staat ─────────────────────────────────────────────────────────────────
   "AI visibility · GEO · AEO · SEO" zijn labels, geen antwoord. Een H1 hoort een zin te zijn die een
   model kan citeren. De H1 van de homepagina staat daarom in de aankondiging van de zijband — de
   eerste tekst ná de zijwaartse schuif. Zie lib/zijband.js.

   Eén accent: amber #C6892B. Violet zit in de shader als licht, niet hier als kleur.

   ── 9 AUGUSTUS: ER IS GEEN .cmp-hero MEER ─────────────────────────────────────────────────────
   Njusja op de gebouwde versie: "de hero zelf is verdwenen?" Een eigen sectie van 100vh betekent
   dat je hem eerst wegscrollt vóór de zijwaartse reis begint, en dus dat de eerste wielslag naar
   BENEDEN gaat. Bij mistral.ai gemeten: daar blijft het beeld staan en schuift de copy eroverheen.

   Hero en band zijn daarom één vastgezette eenheid geworden. Wat hier stond als sectieopmaak —
   hoogte, zwart vlak, het canvas dat alles vult — is meeverhuisd naar .zij-doek in ceeme-zij.css,
   want dáár is het nu het doek dat blijft staan. Wat hier blijft is wat het altijd was: de opmaak
   van het woordmerk, de vaktermen en de scrollwenk. Die staan nu in .zij-onthaal, de eerste halte
   van de reis, en schuiven dus wél weg.

   Waarom dit bestand dan niet gewoon opgaat in ceeme-zij.css: het hoort bij de hero en niet bij de
   band. Zou de bol ooit ergens anders opduiken, dan verhuist deze opmaak mee. Eén bestand per
   component is de afspraak sinds .cmp-menu, en ze heeft al twee keer een stille fout voorkomen. */

/* ── Het woordmerk ────────────────────────────────────────────────────────────────────────────
   pointer-events:none, zodat de muis-parallax ook werkt als je over de tekst beweegt. */
.zij-onthaal .hero-merk {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}

.zij-onthaal .hero-wm {
  display: block;
  font-family: "Manrope", -apple-system, system-ui, sans-serif;
  font-size: clamp(46px, 8.5vw, 132px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: #F6F2E9;
  /* Een grote zachte schaduw en geen harde: de bol erachter is niet overal even donker, en zonder
     die schaduw verdwijnt de onderkant van het woord in de amberlamp. */
  text-shadow: 0 2px 70px rgba(0, 0, 0, .7);
}

/* De punt. Dit is het enige amber in de hero, en het is het merkteken zelf. */
/* ⛔ DE PUNT IS EEN BOLLETJE EN GEEN VIERKANTJE — J178, 31 augustus 2026.
   Njusja: *"vierkantje na ceeme moet trouwens een bolletje zijn!!!!"*

   Hij stond hier als de gewone punt van het lettertype, en de punt van Manrope in gewicht 800 is
   VIERKANT. In de balk klopt het al — daar is het woordmerk een SVG met een echte `<circle>` — maar
   op de hero stond de letterlijke tekstpunt, en dus een blokje van 20 px naast "ceeme".

   De tekst blijft "ceeme." in de HTML: een schermlezer leest de punt, een crawler ziet het merk
   voluit, en zonder CSS staat er gewoon een punt. Alleen de GLYPH wordt onzichtbaar gemaakt en er
   komt een echte ronde stip voor in de plaats. Zo verandert er niets aan wat er staat, alleen aan
   hoe het getekend wordt. */
.zij-onthaal .hero-wm i {
  /* ⚠ TWEEDE POGING — J180. De eerste zette een absolute `::after` in een `<i>` dat nog de volle
     regelhoogte had (167 px bij een letter van 122). `bottom` rekende dus vanaf de ONDERKANT VAN
     DE REGEL en niet vanaf de basislijn, en de stip zweefde laag en los naast het woord. Njusja:
     *"puntje naast ceeme staat niet netjes ernaast..."*

     Nu is het `<i>` ZELF de stip: een inline-block van 0.16em dat met `vertical-align: baseline`
     op de basislijn rust — precies waar een punt hoort. De glyph blijft in de DOM (de tekst is en
     blijft "ceeme.") maar wordt met `text-indent` uit het kadertje geschoven; `overflow: hidden`
     houdt hem daar. Zo leest een schermlezer nog steeds de punt en ziet een crawler het merk
     voluit, terwijl er een echte ronde stip staat.

     De `margin-left` compenseert de letterafstand van −5.5 px op dit woordmerk: zonder die
     correctie plakt de stip tegen de laatste e. */
  display: inline-block;
  width: .16em;
  height: .16em;
  border-radius: 50%;
  background: #C6892B;
  vertical-align: baseline;
  margin-left: .07em;
  overflow: hidden;
  text-indent: -100em;
  font-style: normal;
}

/* De vaktermen. Klein, in kapitalen, met veel letterafstand — een label, geen kop. Ze staan als
   <p> en niet als <h1>: zie de kop van dit bestand. */
.zij-onthaal .hero-termen {
  margin: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: clamp(9.5px, 1.05vw, 11.5px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(246, 242, 233, .82);
  text-shadow: 0 1px 34px rgba(0, 0, 0, .9);
  max-width: 30ch;
}

/* ── De scrollwenk ────────────────────────────────────────────────────────────────────────────
   Een schermvullend beeld zonder een enkele aanwijzing is een doodlopende straat: een bezoeker die
   niet weet dat er meer is, scrollt niet. Eén woord onderaan lost dat op, en het is het goedkoopste
   wat er is. Het pijltje ademt alleen als beweging aan staat. */
.zij-onthaal .hero-wenk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 1;
  text-align: center;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(246, 242, 233, .42);
  pointer-events: none;
}

.zij-onthaal .hero-wenk i {
  display: block;
  width: 1px;
  height: 22px;
  margin: 10px auto 0;
  background: linear-gradient(180deg, rgba(198, 137, 43, .9), rgba(198, 137, 43, 0));
}

html.beweegt .zij-onthaal .hero-wenk i {
  animation: hero-adem 2.6s ease-in-out infinite;
  transform-origin: 50% 0;
}

@keyframes hero-adem {
  0%, 100% { transform: scaleY(.45); opacity: .35 }
  50%      { transform: scaleY(1);   opacity: 1 }
}

/* ── Wie geen beweging wil ────────────────────────────────────────────────────────────────────
   De bol blijft staan — ceeme-hero.js tekent dan één beeld en stopt. Wat verdwijnt is de ademende
   streep. Er gaat geen informatie verloren, en dat is de toets die telt. */
@media (prefers-reduced-motion: reduce) {
  html.beweegt .zij-onthaal .hero-wenk i { animation: none; transform: none; opacity: .6 }
}