/* Alleen het verschil met proef-landing.css. Die wordt er los bij geladen,
   zodat een wijziging daar automatisch meeloopt.

   Twee dingen anders dan variant 1:
   1. Titels zonder gekleurd accentwoord; contrast uit gewicht en kleurdiepte.
   2. Een gekanteld paneel met een voorgrondlaag die de onderrand overlapt.
      Die overlap maakt de diepte; het kantelen alleen doet dat niet. */

h1 em, h2 em { color: inherit; }
/* let op: .regel bestaat al als rij in de opbouwlijst, vandaar .kopregel */
.kopregel { display: block; }
.kopregel--zacht { color: var(--dof); font-weight: 700; }
.slot .kopregel { display: inline-block; }

/* elke regel van een kop komt apart aan */
.js .kopregel[data-in] { opacity: 0; transform: translateY(14px); }
.js .kopregel[data-in].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ de machine */
.hero { padding: 76px 0 0; overflow: hidden; }
.hero .omhulsel > * { max-width: 640px; }
.machine__houder { position: relative; margin: 52px auto 0; max-width: 1180px; padding: 0 40px;
                   perspective: 1800px; }
.machine {
  border: 1px solid var(--rand-licht); border-radius: 16px; overflow: hidden;
  background: rgba(4,14,12,.92); box-shadow: 0 40px 90px rgba(0,0,0,.55);
  transform: rotateX(var(--kantel, 8deg)) translateY(calc(var(--sc,0) * -0.05px));
  transform-origin: 50% 0;
  transition: transform 120ms linear;
}
.machine__balk { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
                 border-bottom: 1px solid var(--rand); font-family: var(--mono);
                 font-size: 10.5px; letter-spacing: .08em; color: var(--dof); }
.stip { width: 9px; height: 9px; border-radius: 50%; }
.stip--rood { background: #f87171; } .stip--geel { background: #fbbf24; } .stip--groen { background: #34d399; }
.machine__naam { margin-left: 8px; color: #cfe3de; }
.machine__regels { margin-left: auto; }
.machine__cijfers { display: grid; grid-template-columns: repeat(6, 1fr);
                    border-bottom: 1px solid var(--rand); }
@media (max-width: 780px) {
  .machine__cijfers { grid-template-columns: repeat(2, 1fr); }
  .mcel { padding: 10px 12px; }
  .mcel b { font-size: 14px; }
  .machine__houder { padding: 0 16px; }
  .machine__balk { font-size: 9px; }
  .machine__naam { display: none; }
}
.mcel { padding: 13px 16px; border-right: 1px solid var(--rand); }
.mcel:last-child { border-right: none; }
.mcel span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
             text-transform: uppercase; color: rgba(131,168,160,.75); }
.mcel b { display: block; margin-top: 5px; font-family: var(--mono); font-size: 17px;
          font-weight: 700; font-variant-numeric: tabular-nums; }
.mcel b.op { color: var(--op); } .mcel b.neer { color: var(--neer); }
.machine__doek { height: 300px; }
.machine__doek canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 780px) { .machine__doek { height: 220px; } }
.machine__voet { padding: 10px 16px 12px; font-size: 12px; color: var(--dof);
                 border-top: 1px solid var(--rand); }

/* De voorgrond hangt aan de onderkant van het paneel en valt eroverheen. Hij
   stond eerst aan de sectie vast en schoof bij het scrollen dwars over de
   grafiek; nu overlapt hij alleen de onderrand, zoals de bomenrij bij fora. */
.laag--voor { position: absolute; left: 0; right: 0; bottom: -92px; top: auto; height: 190px;
              z-index: 6; pointer-events: none;
              -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
                      mask-image: linear-gradient(180deg, transparent, #000 42%);
              transform: translateY(calc(var(--sc,0) * 0.05px)); }
@media (max-width: 780px) { .laag--voor { height: 120px; bottom: -40px; } }
/* onder het paneel moet ruimte zijn voor die voorgrond */
.hero { padding-bottom: 96px; }

/* de sectie erna moet niet onder de voorgrond verdwijnen */
#portfolios { padding-top: 132px; }


/* Bijschriften bij het aanwijzen horen niet op een aanraakscherm: daar is geen
   muis, ze zijn onbereikbaar, en ze duwden de pagina zijwaarts uit beeld. */
@media (hover: none), (max-width: 720px) {
  .maand__hint, .matrix__hint { display: none; }
}


/* de opbouwkaart zit in het paneel, dus zonder eigen rand en achtergrond */
.boek--kaal { border: none; border-radius: 0; background: none; padding: 18px 20px 20px; }
.boek--kaal .boek__kop { display: none; }
.heroOpbouw .boek__doek { min-height: 300px; }
@media (max-width: 780px) { .heroOpbouw .boek__doek { min-height: 220px; } }