/* ═══ Dageraad ══════════════════════════════════════════════════════════
   De laag die van de verkooppagina een ochtend maakt.

   Het staat apart van twitchy.css met opzet. Dat bestand beschrijft de
   pagina: kolommen, kaarten, koppen, alles wat er moet staan om het verhaal
   te kunnen lezen. Dit bestand beschrijft het weer: het licht achter de
   koptekst, de vlucht die overtrekt, en de manier waarop een blok zich
   aandient wanneer het in beeld komt.

   Wie de laag weghaalt, houdt een pagina over die nog altijd klopt. Dat is
   de test: sfeer mag nooit dragend zijn.

   Alles wat beweegt staat achter `prefers-reduced-motion`. Wie beweging
   beperkt heeft staan, krijgt hetzelfde beeld, alleen stil — geen halve
   pagina die onzichtbaar blijft omdat de animatie die hem toont niet loopt.
   ══════════════════════════════════════════════════════════════════════ */

/* ── het licht achter de koptekst ──────────────────────────────────────
   Drie lagen over elkaar: de foto van het laadscherm als atmosfeer, een
   verloop dat haar naar de nacht terugduwt, en een korrel die de banding
   breekt die een groot verloop op een goedkoop paneel altijd geeft. */

.held {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Het verloop dat hier stond, is naar `.dageraad-sluier` verhuisd. Een
     ondoorzichtige achtergrond op de sectie zelf legt zich over alles wat
     erachter hangt, en dan is de foto er wel en zie je ze niet. */
  background: var(--nacht);
}

.dageraad-beeld,
.dageraad-sluier,
.dageraad-korrel {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dageraad-beeld {
  background: url('/cases/twitchy/assets/dageraad-klein.jpg') 74% center / cover no-repeat;
  /* Rechts uitgelijnd, want daar staat de zon en daar staat geen tekst. De
     roodborst schuift zo naar de linkerrand, waar de sluier het zwaarst is:
     hij hoort erbij zonder een woord in de weg te zitten. */
  /* Achtergrond, geen foto. Op een breed scherm snijdt `cover` de band zo
     ver bij dat een gans van een halve meter achter de koptekst komt te
     staan; de onscherpte duwt het beeld terug naar waar het hoort en dekt
     meteen de opschaling af. */
  opacity: 0.46;
  filter: saturate(0.88) contrast(1.02) blur(3px);
  transform: scale(1.08);
  will-change: transform;
}

@media (min-width: 60rem) {
  .dageraad-beeld { background-image: url('/cases/twitchy/assets/dageraad.jpg'); }
}

.dageraad-sluier {
  /* Twee lagen, niet vijf. Elke extra sluier haalt licht weg dat je nadien
     met opacity weer moet terughalen, en dan sta je met een foto die er wel
     is en niet meer te zien. Verticaal: de onderrand loopt naar de kleur van
     de pagina, zodat de sectie niet met een naad eindigt. Horizontaal: de
     kolom met de tekst wordt afgedekt, want daar moet een letter het anders
     opnemen tegen een tak. */
  background:
    linear-gradient(to bottom,
      rgba(7, 12, 22, 0.62) 0%,
      rgba(7, 12, 22, 0.30) 30%,
      rgba(7, 12, 22, 0.55) 74%,
      var(--bg) 100%),
    linear-gradient(100deg,
      rgba(7, 12, 22, 0.90) 0%,
      rgba(7, 12, 22, 0.72) 38%,
      rgba(7, 12, 22, 0.18) 66%,
      rgba(7, 12, 22, 0.05) 100%);
}

.dageraad-korrel {
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* De vlucht. Vier vogels die in vijftig seconden overtrekken en dan opnieuw
   beginnen. Traag genoeg om niet te storen, zichtbaar genoeg om op te
   merken dat er iets leeft. */
.dageraad-vlucht {
  position: absolute;
  top: 14%;
  left: -12%;
  width: 12rem;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
  animation: overtrek 54s linear infinite;
}

.dageraad-vlucht path { stroke: rgba(242, 246, 250, 0.75); }

@keyframes overtrek {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(110vw, -3.5rem, 0); }
}

/* ── de vertrekklok ────────────────────────────────────────────────────
   Het enige stuk op deze pagina dat rekent in plaats van vertelt. Wie hem
   ziet, heeft het antwoord van de app al gekregen voor hij ze geïnstalleerd
   heeft — en dat is precies de bedoeling. */

.vertrekklok {
  margin-top: 1.75rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid rgba(255, 177, 60, 0.30);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 177, 60, 0.09), rgba(255, 177, 60, 0.02));
  max-width: 30rem;
}

.vertrekklok[hidden] { display: none; }

.vertrekklok-kop {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.vertrekklok-regel {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}

.vertrekklok-regel strong {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.vertrekklok-voet {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.vertrekklok-voet button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  /* Sigmar: niets waar getikt wordt zakt onder de 44 punten. Op een pagina
     mag dat met een onzichtbaar raakvlak in plaats van een grote knop. */
  position: relative;
}

.vertrekklok-voet button::after {
  content: '';
  position: absolute;
  inset: -0.75rem -0.5rem;
}

/* ── blokken die zich aandienen ────────────────────────────────────────
   Geen invliegende dozen. Acht pixels omhoog en een halve seconde opacity:
   genoeg om te merken dat de pagina leeft, te weinig om de lezer te laten
   wachten op zijn eigen tekst. */

.komtop {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.komtop.erin {
  opacity: 1;
  transform: none;
}

/* Kinderen die na elkaar binnenkomen, met een trap van 70 ms. Meer dan zes
   en het wordt wachten; daarom loopt de trap daarna niet verder op. */
.komtop.erin > * { animation: komtop-kind 560ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.komtop.erin > :nth-child(1) { animation-delay: 0ms; }
.komtop.erin > :nth-child(2) { animation-delay: 70ms; }
.komtop.erin > :nth-child(3) { animation-delay: 140ms; }
.komtop.erin > :nth-child(4) { animation-delay: 210ms; }
.komtop.erin > :nth-child(5) { animation-delay: 280ms; }
.komtop.erin > :nth-child(n+6) { animation-delay: 350ms; }

@keyframes komtop-kind {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── de balk die inklapt ───────────────────────────────────────────────
   Bovenaan mag de balk ruim staan; zodra er gescrold wordt, is ze een
   hulpmiddel en geen onderdeel van het beeld. */

.balk {
  transition: padding 260ms ease, background-color 260ms ease,
              border-color 260ms ease, backdrop-filter 260ms ease;
}

.balk.gekrompen {
  background: rgba(7, 12, 22, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(242, 246, 250, 0.08);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9);
}

/* ── de leesbalk ───────────────────────────────────────────────────────
   Twee pixels goud die zeggen hoever ge zijt. Op een pagina van acht
   schermen is dat geen versiering maar een antwoord op "hoelang nog". */

.leesbalk {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), #ff5a3c);
  z-index: 60;
  pointer-events: none;
}

/* ── het toestel dat meekantelt ────────────────────────────────────────
   Een graad of twee, gestuurd door de muis. Genoeg om te voelen dat het
   ding voor u ligt; niet genoeg om iemand duizelig te maken. Op een
   aanraakscherm gebeurt er niets: daar is geen muis en heeft kantelen
   alleen kosten. */

.held-beeld { perspective: 1400px; }

.toestel {
  transition: transform 220ms ease-out;
  transform: rotateX(var(--kantel-x, 0deg)) rotateY(var(--kantel-y, 0deg));
}

/* ── stil ──────────────────────────────────────────────────────────────
   Eén blok, en het zet alles terug. De pagina moet compleet zijn zonder
   beweging: wie hier iets vergeet, levert een lezer een lege pagina. */

@media (prefers-reduced-motion: reduce) {
  .dageraad-vlucht { animation: none; opacity: 0.32; left: 8%; }
  .komtop,
  .komtop.erin > * { opacity: 1; transform: none; transition: none; animation: none; }
  .toestel { transform: none; transition: none; }
  .balk { transition: none; }
  .leesbalk { display: none; }
}