/* boosten.nu — "laptop opent zich" (alleen websites.html).
   Het toestel is een echte foto (assets/img/laptop-open.jpg, screen-uitsnede
   uitgemeten); cinema.js zet de positie als custom properties. */

:root {
  --cin-desk: var(--cream-300);
  --rig-x: 0px; --rig-y: 0px; --rig-w: 0px; --rig-h: 0px;
  --photo-op: 1; --open-op: 0; --close-op: 0; --closed-op: 0; --dim-op: 0;
  --cin-page-y: 0px; --cin-k: 1;
}

body.cin-on { overflow-x: clip; background: var(--cin-desk); }

#cin-page { position: relative; z-index: 1; background: var(--surface-page); }
body.cin-on #cin-page { transform-origin: 50% 0; }
body.cin-on:not(.cin-read) #cin-page {
  transform: translate3d(0, var(--cin-page-y), 0) scale(var(--cin-k));
  will-change: transform;
}
body.cin-hide-page #cin-page { opacity: 0; }

/* De gouden lijn (site.js) hoort ook bij de leesfase: niet zichtbaar zolang
   de laptop opengaat en de camera inzoomt. */
body.cin-pre .boostline { visibility: hidden; }

/* De zwevende knop hoort bij de leesfase; het hoofdmenu staat er altijd. */
body.cin-on:not(.cin-read) .fab { opacity: 0 !important; pointer-events: none; }

/* ---------- intro boven het toestel ---------- */
.cin-intro {
  position: relative; z-index: 5; overflow: hidden;
  background: var(--surface-page);
  padding: var(--space-9) var(--space-5) var(--space-7);
}
/* Het merkteken één keer, zacht, uit de hoek lopend. */
.cin-intro__mark {
  position: absolute; right: -6%; top: -18%;
  width: min(46vw, 620px); height: auto;
  opacity: 0.055; transform: rotate(-8deg);
  pointer-events: none; user-select: none;
}
.cin-intro__inner {
  position: relative;
  max-width: var(--container-lg); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8); align-items: end;
}
.cin-intro__copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
}
.cin-intro h1 {
  font: var(--type-hero-sub); letter-spacing: var(--tracking-tight);
  color: var(--navy-800); max-width: 22ch; text-wrap: pretty;
}
.cin-intro .lead {
  font: var(--type-body); font-size: var(--text-lg);
  color: var(--text-body); max-width: 52ch; text-wrap: pretty;
}
.cin-intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Drie harde feiten naast de tekst — geen kaartjes, alleen hairlines. */
.cin-intro__facts {
  display: grid; gap: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-5);
}
.cin-intro__facts > div {
  display: flex; flex-direction: column; gap: var(--space-1);
}
.cin-intro__facts dt {
  font: var(--type-mono); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--gold-600);
}
.cin-intro__facts dd {
  margin: 0;
  font: var(--type-h3); letter-spacing: var(--tracking-tight); color: var(--navy-800);
}
.cin-intro__facts dd span { font: var(--type-body-sm); color: var(--text-muted); }
.cin-intro__facts p { font: var(--type-body-sm); color: var(--text-muted); }

.cin-intro__cue {
  position: relative;
  max-width: var(--container-lg); margin: var(--space-8) auto 0;
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--text-muted);
}
.cin-intro__cue svg { animation: cin-nudge 2.4s var(--ease-standard) infinite; }
@keyframes cin-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 899px) {
  .cin-intro { padding-top: var(--space-8); }
  .cin-intro__inner { grid-template-columns: 1fr; gap: var(--space-7); align-items: start; }
  .cin-intro__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (max-width: 599px) {
  .cin-intro__facts { grid-template-columns: 1fr; }
  .cin-intro__mark { width: 78vw; right: -22%; }
}
@media (prefers-reduced-motion: reduce) {
  .cin-intro__cue svg { animation: none; }
}

/* FAQ onder het toestel, op het bureau. */
.cin-faq { background: var(--cin-desk); }

/* ---------- het toestel ---------- */
#cin-stage { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
body.cin-read #cin-stage { visibility: hidden; }
/* Zonder de leesmodus (telefoon, reduced motion, geen JS) staat er niets van
   het toestel in de weg. */
body:not(.cin-on) #cin-stage,
body:not(.cin-on) #cin-runway,
body:not(.cin-on) #cin-outro-runway { display: none; }

#cin-rig {
  position: absolute;
  left: var(--rig-x); top: var(--rig-y);
  width: var(--rig-w); height: var(--rig-h);
}
#cin-rig img, #cin-rig video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#cin-rig .cin-band { opacity: var(--photo-op); }
#cin-closed { opacity: var(--closed-op); }
#cin-rig video { object-fit: fill; }
/* Onderaan loopt de achtergrond van foto en clip over in die van de pagina,
   zodat je geen rand ziet als het toestel aan het eind omhoog schuift. */
#cin-rig::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: linear-gradient(to bottom, rgb(243 237 231 / 0), var(--cin-desk) 85%);
  pointer-events: none;
}
#cin-open { opacity: var(--open-op); }
#cin-close { opacity: var(--close-op); }

/* Aan het eind gaat het scherm uit voordat het deksel dichtgaat. Zolang dat
   duurt blijft de pagina op het scherm staan: de sluitclip krijgt een gat op
   de plek van het scherm en #cin-dim maakt de pagina net zo donker als het
   scherm in de clip (cinema.js). Gat en laag zijn aan de bovenkant en de
   zijkanten iets ruimer, omdat het deksel aan het eind van het uitgaan al
   een paar pixels begint te bewegen; daar valt dan de zwarte rand van de
   foto onder de donkere laag. */
#cin-dim {
  position: absolute; left: 27.9%; top: 19.5%; width: 44.2%; height: 48.99%;
  background: #000; opacity: var(--dim-op); pointer-events: none;
}
body.cin-hole #cin-close {
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    27.9% 19.5%, 72.1% 19.5%, 72.1% 68.7%, 27.9% 68.7%, 27.9% 19.5%);
}

/* De foto in vier stukken: het scherm zelf blijft open zodat de echte pagina
   erdoor te zien is. Percentages komen uit de uitgemeten schermrand. */
.cin-b-t { clip-path: inset(0 0 79.25% 0); }
.cin-b-b { clip-path: inset(68.44% 0 0 0); }
.cin-b-l { clip-path: inset(20.65% 71.68% 31.45% 0); }
.cin-b-r { clip-path: inset(20.65% 0 31.45% 71.68%); }

/* Telefoon: geen laptop, gewoon een pagina. */
@media (max-width: 759px) {
  #cin-runway, #cin-outro-runway, #cin-stage { display: none !important; }
  #cin-page { transform: none !important; opacity: 1 !important; }
}

/* ---------- afsluiting ---------- */
/* Het laptoplint (cinema.js): de gouden lijn op het scherm loopt aan de
   onderrand het scherm uit en wordt een gevuld lint dat dikker wordt waar het
   dichtbij is, met een lichte glansstreep, zodat het rond oogt. Het landt op
   de lijn in #cin-outro. De schaduw ligt los onder het lint en schuift weg
   waar het lint hoog hangt; [data-donker] maakt het stuk op het toetsenbord
   donker in de schaduw van het deksel, en #cin-lid knipt weg wat onder het
   dichte deksel zit. */
#cin-bridge {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; display: none;
}
body.cin-bridge-on #cin-bridge { display: block; }
#cin-bridge [data-rib] { fill: var(--gold-400); }
#cin-bridge [data-schaduw] { fill: rgb(10 30 47 / .16); }
#cin-bridge [data-glans] { fill: none; stroke: var(--gold-100); stroke-width: .9; stroke-linecap: round; opacity: .7; }

#cin-outro { position: relative; z-index: 4; background: var(--surface-inverse-deep); }
/* Even vol als het lint dat erop landt. */
#cin-outro .boostline path { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #cin-runway, #cin-outro-runway, #cin-stage { display: none !important; }
  #cin-page { transform: none !important; opacity: 1 !important; }
}