/* opening.css, spoor mix (27 oktober 2026): sectie 1, de opening op het levende veld van de site. De inhoud en de
   regie van ontwerp 9 (../opening-blauw/, deel "De sectie" van sectie.css), maar op het lichte veld (veld.js) in plaats
   van het blauwe, en met de kop van ontwerp 6 tot 8 (General Sans 500 in inkt, .oh-kop van opening-stad). Komt na
   stijl.css en gebruikt daaruit de kleuren, de letters, .knop, .pijl en .sr-only. Alles staat onder .oi-opening; de
   sectie heeft geen eigen grond, het veld is het beeld. Nergens cursief, geen kapitalen, geen mono, niets schuin.
   Tot 20:48 stond de kop in de puntjesletters van de hero van de site (Martian Mono); Huub vond die "iets te druk of
   onrustig", dus besluit 13 van de brief: de kopletter van de mix. */

/* De terugvalletter van de tekst: Hanken Grotesk zoals ontwerp 8 en 9. General Sans laadt in de mix al vóór het eerste
   beeld (home.html), dus de kop heeft geen eigen terugval nodig. */
@font-face { font-family: "oi-terugval-tekst"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 900;
  size-adjust: 100.5%; ascent-override: 100%; descent-override: 30%; line-gap-override: 0%; }

/* De maten:
     --oi-rand   de zijmarge van de tekst (zoals ontwerp 8 en 9);
     --oi-onder  de ruimte onder de prijsregel: minstens 60 px, ruim boven de naad (het donkere vel van het aanbod
                 schuift 34 px over de onderrand, op de telefoon ook). */
.oi-opening {
  --oi-rand: min(var(--rand), 40px);
  --oi-onder: clamp(64px, 8svh, 96px);
  position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow-x: clip;
  color: var(--inkt);
}

/* De tekst: kop, regel en de call to action links onder elkaar, op de plek en met de maten van ontwerp 6 tot 9 (.oi-in
   van ontwerp 9). Ze bewegen nooit, behalve de kop die bij een eerste bezoek één keer van wazig naar scherp komt. */
.oi-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  max-width: calc(1200px + 2 * var(--oi-rand)); margin: 0 auto;
  padding: calc(var(--balk-h) + clamp(20px, 15svh - 70px, 112px)) var(--oi-rand) var(--oi-onder);
  font-family: "Hanken Grotesk", "oi-terugval-tekst", ui-sans-serif, system-ui, sans-serif; }

/* De kop: General Sans 500 in inkt, twee regels ("Van appje tot afgehandeld," en "zonder dat jij typt."), met de maten van
   ontwerp 6 tot 8: op 1440 x 900 ongeveer 77 px, hooguit 102 px, zodat de eerste regel (11,54 em) op elk breed scherm
   in de kolom van 1200 px past. Op de telefoon breekt de eerste regel als "Van appje tot / afgehandeld,". */
.oi-kop { font-family: var(--kop); font-weight: 500; font-size: clamp(44px, min(5.6vw, 8.6svh), 102px); line-height: 1; letter-spacing: -0.03em;
  color: var(--inkt); max-width: none; }
.oi-woord { display: block; }

.oi-regel { margin-top: clamp(22px, 3svh, 34px); max-width: 34em; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.55; color: #1b2436; text-wrap: pretty; }

/* De call to action: één rij, een wit e-mailveld met de knop erin, dat op het veld zweeft; eronder de prijsregel. */
.oi-cta { margin-top: clamp(24px, 3.6svh, 36px); width: min(100%, 548px); }
.oi-rij { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.07), 0 26px 60px -26px rgba(29, 52, 110, 0.42), 0 2px 8px -4px rgba(29, 52, 110, 0.22); }
.oi-veld { flex: 1; min-width: 0; height: 48px; padding: 0 8px 0 20px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 16px; color: var(--inkt); }
.oi-veld::placeholder { color: #4b5568; opacity: 1; }
.oi-veld:focus { outline: none; }
.oi-rij:focus-within { box-shadow: 0 0 0 3px var(--hemel), 0 26px 60px -26px rgba(29, 52, 110, 0.42); }
.oi-veld:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.oi-knop { flex: none; height: 48px; padding: 0 24px; box-shadow: none; }
.oi-knop:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; }
.oi-prijs { margin-top: 14px; padding-left: 20px; font-size: 14px; line-height: 1.45; color: #334155; }

/* Linksonder de aanwijzing van ontwerp 9: een dun lijntje met een streepje licht dat naar beneden loopt, en één regel.
   Alleen breed en hoog genoeg, waar hij ruim onder de prijsregel staat. */
.oi-hint { position: absolute; z-index: 2; display: none; flex-direction: column; gap: 14px; pointer-events: none;
  left: calc(max(0px, (100% - 1200px - 2 * var(--oi-rand)) / 2) + var(--oi-rand)); bottom: var(--oi-onder); }
.oi-hint-lijn { position: relative; display: block; width: 1px; height: 40px; margin-left: 2px; overflow: hidden; background: rgba(11, 18, 32, 0.18); }
.oi-hint-licht { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--blauw); animation: oi-hint 1.8s ease-in-out infinite; }
@keyframes oi-hint { from { transform: translateY(-120%); } to { transform: translateY(360%); } }
.oi-hint-tekst { max-width: 15em; font-size: 13px; line-height: 1.45; color: #334155; }
@media (min-width: 1024px) and (min-height: 600px) { .oi-hint { display: flex; } }

/* Met JavaScript, bij het eerste bezoek: het begin van de onthulling (de kop licht wazig maar al te lezen, de
   aanwijzing weg). De regie (opening.js) neemt het meteen over; draait die niet, dan komt het eindbeeld na 2,6 s alsnog
   (vangnet). Het stille veld zet opening.js zelf weg en terug. */
.js.oi-levend .oi-woord { opacity: 0.6; filter: blur(6px); transform: translateY(0.12em); }
.js.oi-levend .oi-hint { opacity: 0; }
.js.oi-levend:not(.oi-regie) .oi-woord { animation: oi-vangnet-woord 0.5s 2.6s forwards; }
.js.oi-levend:not(.oi-regie) .oi-hint { animation: oi-vangnet-aan 0.6s 2.6s forwards; }
@keyframes oi-vangnet-woord { to { opacity: 1; filter: none; transform: none; } }
@keyframes oi-vangnet-aan { to { opacity: 1; } }

/* Smal en staand: zoals ontwerp 6 tot 9. */
@media (max-width: 819px) {
  .oi-opening { --oi-onder: 64px; }
  .oi-in { padding-top: calc(var(--balk-h) + clamp(20px, 4svh, 40px)); }
  .oi-kop { font-size: clamp(38px, 11.4vw, 60px); max-width: 8em; }
  .oi-regel { margin-top: 18px; font-size: 15.5px; line-height: 1.5; }
  .oi-cta { margin-top: 24px; }
}
/* Telefoon: veld en knop onder elkaar over de hele breedte. */
@media (max-width: 599px) {
  .oi-cta { width: 100%; }
  .oi-rij { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; background: none; box-shadow: none; }
  .oi-rij:focus-within { box-shadow: none; }
  .oi-veld { flex: none; height: 52px; padding: 0 20px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.07), 0 20px 50px -24px rgba(29, 52, 110, 0.42); }
  .oi-veld:focus { box-shadow: 0 0 0 3px var(--hemel); }
  .oi-knop { height: 52px; width: 100%; }
  .oi-prijs { padding-left: 0; font-size: 13.5px; text-align: center; }
}
/* Lage telefoons (375 x 667): alles iets compacter, zodat kop, regel, knop en prijsregel in het eerste scherm staan. */
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  .oi-opening { --oi-onder: 62px; }
  .oi-kop { font-size: clamp(38px, 11.2vw, 52px); }
  .oi-regel { margin-top: 14px; font-size: 15px; }
  .oi-cta { margin-top: 18px; }
  .oi-veld, .oi-knop { height: 48px; }
  .oi-rij { gap: 8px; }
  .oi-prijs { margin-top: 10px; font-size: 13px; }
}