/* Argus IQ, de hero met de geanimeerde eerste lezing.
   De animatie is een toestandsmachine: het JavaScript zet data-fase op .hero-plaat,
   alle beweging zit hier in overgangen. Zo blijft het rustig en voorspelbaar. */

.hero { position: relative; overflow: hidden; padding: 156px 0 96px; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(1100px 620px at 74% 34%, var(--hero-glow) 0%, transparent 68%);
  pointer-events: none;
}
.hero-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-tekst h1 { max-width: 14ch; }
.hero-tekst .sub { max-width: 46ch; font-size: 18.5px; color: var(--papier-70); margin: 0 0 32px; }
.hero-tekst .ticker { margin-top: 36px; font-family: var(--mono); font-size: 15px; letter-spacing: .04em; color: var(--papier-70); display: flex; flex-wrap: wrap; gap: 10px; }

/* ── de plaat ── */
.hero-plaat { position: relative; }
.hero-plaat svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-bijschrift { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--papier-25); min-height: 17px; }
.hero-bijschrift .stip { width: 6px; height: 6px; border-radius: 50%; background: var(--goud); flex: none; opacity: .5; }
.hero-plaat[data-fase="1"] .hero-bijschrift .stip,
.hero-plaat[data-fase="2"] .hero-bijschrift .stip,
.hero-plaat[data-fase="3"] .hero-bijschrift .stip,
.hero-plaat[data-fase="4"] .hero-bijschrift .stip { opacity: 1; animation: pols 1.6s var(--ease) infinite; }
@keyframes pols { 0%, 100% { box-shadow: 0 0 0 0 rgba(199, 164, 95, .5); } 50% { box-shadow: 0 0 0 5px rgba(199, 164, 95, 0); } }

/* ── documenten ── */
.hero-plaat .doc .vel { fill: var(--nacht-2); stroke: var(--hair-soft); stroke-width: 1; transition: stroke .6s var(--ease), fill .6s var(--ease); }
.hero-plaat .doc .rug { fill: var(--papier-25); opacity: .28; transition: fill .6s var(--ease), opacity .6s var(--ease); }
.hero-plaat .doc .regel { fill: var(--papier); opacity: .13; transition: opacity .6s var(--ease), fill .6s var(--ease); }
.hero-plaat .doc .etiket { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; fill: var(--papier); opacity: 0; transition: opacity .5s var(--ease); transition-delay: var(--vertraging); }

/* fase 1 en verder: gelezen, dus randen en etiketten aan */
.hero-plaat:not([data-fase="0"]) .doc .vel { stroke: var(--hair); }
.hero-plaat:not([data-fase="0"]) .doc .regel { opacity: .26; }
.hero-plaat:not([data-fase="0"]) .doc .etiket { opacity: .55; }
.hero-plaat:not([data-fase="0"]) .doc .vel,
.hero-plaat:not([data-fase="0"]) .doc .regel { transition-delay: var(--vertraging); }

/* fase 2 en verder: rubriekkleur op de rug */
.hero-plaat[data-fase="2"] .doc .rug,
.hero-plaat[data-fase="3"] .doc .rug,
.hero-plaat[data-fase="4"] .doc .rug,
.hero-plaat[data-fase="5"] .doc .rug { opacity: 1; }
.hero-plaat .doc[data-cat="h"] .rug { fill: var(--pauw); }
.hero-plaat .doc[data-cat="f"] .rug { fill: var(--goud); }
.hero-plaat .doc[data-cat="c"] .rug { fill: var(--papier-45); }

/* fase 3: de clausule licht op */
.hero-plaat .doc .regel.gelicht { transition: opacity .5s var(--ease), fill .5s var(--ease), height .5s var(--ease); }
.hero-plaat[data-fase="3"] .doc[data-ernst] .regel.gelicht,
.hero-plaat[data-fase="4"] .doc[data-ernst] .regel.gelicht { fill: var(--accent); opacity: 1; }
.hero-plaat[data-fase="3"] .doc[data-ernst] .vel,
.hero-plaat[data-fase="4"] .doc[data-ernst] .vel { stroke: var(--hair-goud); fill: var(--nacht-3); }

/* fase 5: alles wijkt terug achter het rapport */
.hero-plaat[data-fase="5"] .stapel { opacity: .22; transition: opacity .8s var(--ease); }
.hero-plaat .stapel { transition: opacity .8s var(--ease); }

/* ── scanlijn ── */
.hero-plaat .scan { opacity: 0; transition: opacity .4s var(--ease); }
.hero-plaat[data-fase="1"] .scan { opacity: 1; }
.hero-plaat[data-fase="1"] .scan-baan { animation: scannen 1.9s cubic-bezier(.5, 0, .5, 1) forwards; }
@keyframes scannen {
  0% { transform: translateY(58px); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(452px); opacity: 0; }
}

/* ── teller ── */
.hero-plaat .telling { opacity: 0; transform: translateY(-6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hero-plaat[data-fase="2"] .telling,
.hero-plaat[data-fase="3"] .telling,
.hero-plaat[data-fase="4"] .telling { opacity: 1; transform: none; }
.hero-plaat .tel-kop { font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em; fill: var(--papier-25); }
.hero-plaat .tel text { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; fill: var(--papier-45); }
.hero-plaat .tel .getal { fill: var(--papier); }
.hero-plaat .tel[data-cat="h"] rect { fill: var(--pauw); }
.hero-plaat .tel[data-cat="f"] rect { fill: var(--goud); }
.hero-plaat .tel[data-cat="c"] rect { fill: var(--papier-45); }

/* ── de gevonden passage ── */
.hero-plaat .passage { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.hero-plaat[data-fase="3"] .passage,
.hero-plaat[data-fase="4"] .passage { opacity: 1; transform: none; }
.hero-plaat .passage .kaart { fill: var(--nacht-3); stroke: var(--hair-goud); stroke-width: 1; }
.hero-plaat .passage .draad { fill: none; stroke: var(--goud); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.hero-plaat .kaart-kop { font-family: var(--mono); font-size: 8px; letter-spacing: .2em; fill: var(--accent); }
.hero-plaat .kaart-bron { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; fill: var(--papier-25); }
.hero-plaat .kaart-citaat { font-family: var(--serif); font-size: 13.5px; fill: var(--papier-70); }

/* ── de weging ── */
.hero-plaat .weging { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.hero-plaat[data-fase="4"] .weging { opacity: 1; transform: none; }
.hero-plaat .chip-vlak { fill: var(--hoog-bg); stroke: var(--hoog); stroke-width: 1; }
.hero-plaat .chip-tekst { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; fill: var(--hoog-t); }
.hero-plaat .chip-bij { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; fill: var(--papier-45); }

/* ── het rapport ── */
.hero-plaat .rapport { opacity: 0; transform: translateY(20px) scale(.985); transform-origin: 50% 60%; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hero-plaat[data-fase="5"] .rapport { opacity: 1; transform: none; }
.hero-plaat .rapport .kaart { fill: var(--nacht-2); stroke: var(--hair-goud); stroke-width: 1; }
.hero-plaat .rap-kop { font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em; fill: var(--accent); }
.hero-plaat .rap-titel { font-family: var(--serif); font-size: 27px; fill: var(--papier); }
.hero-plaat .rap-lijn { stroke: var(--hair-soft); stroke-width: 1; }
.hero-plaat .rap-rij text { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; fill: var(--papier-70); }
.hero-plaat .rap-rij[data-ernst="hoog"] rect { fill: var(--hoog); }
.hero-plaat .rap-rij[data-ernst="middel"] rect { fill: var(--middel); }
.hero-plaat .rap-rij[data-ernst="laag"] rect { fill: var(--laag); }
.hero-plaat .rap-voet { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; fill: var(--papier-25); }

/* ── smallere schermen ── */
@media (max-width: 980px) {
  .hero { padding: 132px 0 72px; }
  .hero-raster { grid-template-columns: 1fr; gap: 44px; }
  .hero-tekst h1 { max-width: 100%; }
  .hero-plaat { max-width: 560px; }
}
@media (max-width: 560px) {
  /* op een telefoon is de plaat te fijn om te lezen; de tekst doet het werk */
  .hero-plaat { display: none; }
}

/* ── minder beweging ── */
@media (prefers-reduced-motion: reduce) {
  .hero-plaat .scan { display: none; }
  .hero-plaat * { transition: none !important; animation: none !important; }
  .hero-bijschrift .stip { animation: none; }
}