/* Enerport — beweging (alleen actief met class .motion op <html>; uit bij 'verminder beweging') */

/* ---------- Hero: logobalken op de achtergrond ---------- */
.hero.has-bars:before{display:none}
.hero-bars{position:absolute;right:-140px;top:-60px;width:760px;pointer-events:none}
.hero-bars svg{width:100%;height:auto;overflow:visible}
.hero-bars .bars rect{fill:var(--on-forest);fill-opacity:.05}
.hero-bars .dot{fill:var(--signal);fill-opacity:.55}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(31,157,99,.14),transparent 60%);transition:opacity .4s}
.hero>.wrap{z-index:1}

/* Handgetekende onderstreping */
.scribble{position:relative;display:inline-block;white-space:nowrap}
.scribble-line{position:absolute;left:-2%;bottom:-.08em;width:104%;height:.32em;overflow:visible}
.scribble-line path{fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}

/* Scanlijn over het rapport */
.report{overflow:hidden}
.scan{position:absolute;left:0;right:0;top:0;height:90px;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,rgba(31,157,99,.16) 70%,rgba(31,157,99,.55) 100%);border-bottom:2px solid var(--signal)}

/* ---------- Signaal-sectie ---------- */
.signal{padding:0 0 112px}
.signal-panel{--inset:0px;margin:0 auto;background:var(--forest);color:var(--on-forest-muted);clip-path:inset(0 var(--inset) round var(--rad,0px));padding:104px 0}
.signal h2{color:var(--on-forest)}
.signal .eyebrow{color:var(--on-forest-muted)}
.signal-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.signal-copy p{max-width:460px}
.signal .btn-primary{background:var(--signal);color:var(--ink)}
.signal .btn-primary:hover{background:#25B272;color:var(--ink)}
.chart{margin:0;padding:24px 24px 20px;background:var(--forest-2);border:1px solid var(--forest-line);border-radius:var(--r-lg)}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-muted)}
.live{display:inline-flex;align-items:center;gap:8px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.chart svg{display:block;width:100%;height:auto;aspect-ratio:960/300;overflow:visible}
.chart .grid path{stroke:var(--forest-line);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.chart .ref{fill:rgba(169,184,175,.08)}
.chart .ref-t{fill:var(--on-forest-muted);font:500 13px var(--mono);letter-spacing:.04em}
.chart .area{fill:rgba(31,157,99,.10)}
.chart .line{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.chart .anom{fill:rgba(233,169,79,.14);stroke:#E9A94F;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chart .days text{fill:var(--on-forest-muted);font:500 13px var(--mono);text-anchor:middle}
.chart .pin{fill:#E9A94F}
.chart .ping{fill:none;stroke:#E9A94F;stroke-width:2;opacity:0}
.alert{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;border-radius:var(--r);background:rgba(251,250,247,.06);color:var(--on-forest)}
.alert p{margin:0;font-size:.92rem;line-height:1.5}
.alert .badge{flex:none;margin-top:1px}

/* ---------- Marquee 'voor wie' ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track li[aria-hidden]{display:none}

/* ---------- Header bij scrollen ---------- */
.header{transition:box-shadow .3s,background-color .3s}
.header.is-scrolled{box-shadow:0 10px 30px -18px rgba(24,27,28,.35)}

@media (max-width:960px){
  .signal-grid{grid-template-columns:1fr;gap:40px}
  .hero-bars{width:520px;right:-220px;top:-40px}
}
@media (max-width:620px){
  .signal{padding-bottom:72px}
  .signal-panel{padding:72px 0}
  .chart{padding:16px}
  .chart .ref-t{display:none}
  .hero-bars{width:360px;right:-150px;top:auto;bottom:-60px;opacity:.6}
}

/* =================================================================
   Alles hieronder alleen met beweging aan
   ================================================================= */
@media (prefers-reduced-motion:no-preference){
  /* Scroll-onthulling */
  .motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
  .motion [data-reveal].in{opacity:1;transform:none}

  /* Woord-voor-woord koppen */
  .motion .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
  .motion .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--wi,0) * 55ms + var(--wd,0ms))}
  .motion .words-in .w>span{transform:none}
  .motion .w-free{opacity:0;transform:translateY(35%);transition:opacity .7s,transform .9s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--wi,0) * 55ms + var(--wd,0ms))}
  .motion .words-in .w-free{opacity:1;transform:none}
  .motion h1 .pt,.motion h2 .pt{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--wn,0) * 55ms + var(--wd,0ms) + 250ms)}
  .motion .words-in .pt{transform:none}

  /* Hero */
  .motion .hero-bars .bars rect{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.75,.15,1)}
  .motion .hero-bars .b2{transition-delay:.15s!important}.motion .hero-bars .b3{transition-delay:.3s!important}.motion .hero-bars .b4{transition-delay:.45s!important}
  .motion .hero-bars .b1{transform-origin:center bottom;transform:scaleY(0)}
  .motion .hero-bars .dot{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .8s cubic-bezier(.3,1.5,.5,1) 1.1s}
  .motion .hero.ready .hero-bars rect{transform:none}
  .motion .hero.ready .hero-bars .dot{transform:none;animation:breathe 5s ease-in-out 2.2s infinite}
  @keyframes breathe{50%{transform:scale(1.12)}}

  .motion .scribble-line path{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) 1.1s}
  .motion .hero.ready .scribble-line path{stroke-dashoffset:0}

  .motion .hero .eyebrow,.motion .hero .lead,.motion .hero .actions,.motion .hero .checks{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
  .motion .hero .lead{transition-delay:.55s}.motion .hero .actions{transition-delay:.7s}.motion .hero .checks{transition-delay:.85s}
  .motion .hero.ready .eyebrow,.motion .hero.ready .lead,.motion .hero.ready .actions,.motion .hero.ready .checks{opacity:1;transform:none}

  .motion .hero-figure{opacity:0;transform:translateY(40px) rotate(2deg);transition:opacity 1s .4s,transform 1.2s cubic-bezier(.2,.75,.15,1) .4s}
  .motion .ready .hero-figure{opacity:1;transform:none}
  .motion .report dd,.motion .report-fn .badge,.motion .scale span:not(.k){opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
  .motion .report-fn .badge,.motion .scale span:not(.k){transform:scale(.6)}
  .motion .report.scanned dd,.motion .report.scanned .report-fn .badge,.motion .report.scanned .scale span:not(.k){opacity:1;transform:none}
  .motion .report.scanning .scan{animation:scan 1.6s cubic-bezier(.5,0,.5,1) forwards}
  @keyframes scan{0%{opacity:1;transform:translateY(-90px)}85%{opacity:1}100%{opacity:0;transform:translateY(560px)}}
  .motion .scale .goal{box-shadow:0 0 0 0 rgba(31,157,99,.6)}
  .motion .report.scanned .scale .goal{animation:pulse 2.4s ease-out 2.6s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.55)}70%,100%{box-shadow:0 0 0 12px rgba(31,157,99,0)}}

  .motion .facts>div{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s;transition-delay:calc(1s + var(--i,0) * 110ms)}
  .motion .hero.ready .facts>div{opacity:1;transform:none}

  /* Technische tekening tekent zichzelf */
  .motion .dwg .l>*,.motion .dwg .eq>*,.motion .dwg .dim path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.5,0,.2,1)}
  .motion .dwg .eq>*{transition-delay:.7s}
  .motion .dwg .w rect,.motion .dwg .t,.motion .dwg text.t,.motion .dwg .ann,.motion .dwg .lead-l,.motion .dwg .link{opacity:0;transition:opacity .6s}
  .motion .dwg .w rect{transition-delay:calc(.6s + var(--i,0) * 35ms)}
  .motion .dwg .link{transition-delay:1.3s}.motion .dwg .t,.motion .dwg text.t{transition-delay:1.4s}.motion .dwg .lead-l{transition-delay:1.7s}.motion .dwg .ann{transition-delay:1.9s}
  .motion .dwg .ann .hl{transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.75,.15,1) 2.3s}
  .motion .dwg.drawn .l>*,.motion .dwg.drawn .eq>*,.motion .dwg.drawn .dim path{stroke-dashoffset:0}
  .motion .dwg.drawn .w rect,.motion .dwg.drawn .t,.motion .dwg.drawn text.t,.motion .dwg.drawn .ann,.motion .dwg.drawn .lead-l,.motion .dwg.drawn .link{opacity:1}
  .motion .dwg.drawn .ann .hl{transform:none}
  .motion .dwg.drawn .link path{stroke-dasharray:4 4;animation:flow 1.2s linear 2s infinite}
  @keyframes flow{to{stroke-dashoffset:-16}}

  /* Signaal-paneel en grafiek */
  .motion .chart .line{stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.45,0,.3,1) .2s}
  .motion .chart .area,.motion .chart .anom,.motion .chart .pin,.motion .alert{opacity:0;transition:opacity .6s}
  .motion .chart .area{transition-delay:1.6s}.motion .chart .anom{transition-delay:2.2s}.motion .chart .pin{transition-delay:2.3s}
  .motion .alert{transform:translateY(12px);transition:opacity .6s 2.5s,transform .6s cubic-bezier(.2,.75,.15,1) 2.5s}
  .motion .chart.drawn .line{stroke-dashoffset:0}
  .motion .chart.drawn .area,.motion .chart.drawn .anom,.motion .chart.drawn .pin{opacity:1}
  .motion .chart.drawn .alert{opacity:1;transform:none}
  .motion .chart.drawn .ping{animation:ping 2s ease-out 2.4s infinite;transform-box:fill-box;transform-origin:center}
  @keyframes ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
  .motion .live i{animation:blink 1.6s ease-in-out infinite}
  @keyframes blink{50%{opacity:.25}}

  /* Marquee */
  .motion .marquee-track{flex-wrap:nowrap;width:max-content;animation:marquee 38s linear infinite}
  .motion .marquee-track li[aria-hidden]{display:list-item}
  .motion .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}

  /* Kaarten en knoppen */
  .motion .svc,.motion .fn,.motion .card{transition:border-color .25s,transform .35s cubic-bezier(.2,.75,.15,1),box-shadow .35s,opacity .8s}
  .motion .svc:hover,.motion .fn:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(24,27,28,.45)}
  .motion .btn{will-change:transform}
}
@media print{.motion [data-reveal],.motion .w>span{opacity:1!important;transform:none!important}}
.sheet>*{min-width:0}
.signal-copy h2{margin-bottom:18px}