/* ============================================================
   Tjep's DAM — animatie
   Stylesheet-deel voor de OpenContent template.
   - Los bestand: geef het dezelfde naam als de template en zet het in
     dezelfde map (template.cshtml + template.css). Dan laadt DNN het als
     stylesheet en komt Razor er niet aan.
   - Plak deze CSS NIET in de cshtml: de at-regels (import, container,
     keyframes) laten Razor struikelen.
   - Laad je Spectral + Hanken Grotesk al site-breed? Haal de import weg.
   - Accentkleur wijzigen: --dm-a en --dm-tint op .dm-stage.
   - Geen buitenmarges: padding en margin staan op 0, dat regel je in DNN.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,500;0,600;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* --- basis ------------------------------------------------- */
.dm-anim{width:100%;container-type:inline-size}
.dm-anim *{box-sizing:border-box}
.dm-anim .dm-stage{
  --u:0.0925926cqw;
  --dm-a:#28A745;
  --dm-tint:rgb(234,246,236);
  --dm-ink:#15120E;
  --dm-ink60:#6E6A64;
  --dm-ink40:#8A857D;
  --dm-faint:#B4AFA6;
  --dm-border:#ECE9E3;
  --dm-track:#F0EDE7;
  --dm-warn:#B4571A;
  --dm-warntint:rgb(253,244,236);
  --dm-serif:'Spectral',Georgia,serif;
  position:relative;width:100%;background:transparent;overflow:hidden;margin:0;padding:0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--dm-ink)}
.dm-anim .dm-board{display:flex;flex-direction:column}

/* --- kop --------------------------------------------------- */
.dm-anim .dm-eyebrow{display:flex;align-items:center;gap:calc(10*var(--u));margin-bottom:calc(11*var(--u))}
.dm-anim .dm-dot{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:calc(3*var(--u));background:var(--dm-a)}
.dm-anim .dm-brand{font-size:calc(13*var(--u));font-weight:800;letter-spacing:.2em;color:var(--dm-a);text-transform:uppercase;white-space:nowrap}
.dm-anim .dm-agent{font-size:calc(13*var(--u));font-weight:700;letter-spacing:.2em;color:var(--dm-faint);text-transform:uppercase;white-space:nowrap}
.dm-anim .dm-title{font-family:var(--dm-serif);font-size:calc(44*var(--u));font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
.dm-anim .dm-sub{font-size:calc(18.5*var(--u));line-height:1.45;color:var(--dm-ink60);margin:calc(11*var(--u)) 0 0;max-width:calc(880*var(--u))}

/* --- sectiekop --------------------------------------------- */
.dm-anim .dm-kicker{display:flex;align-items:center;gap:calc(9*var(--u));margin-top:calc(24*var(--u))}
.dm-anim .dm-kicker-label{font-size:calc(13.5*var(--u));font-weight:800;letter-spacing:.14em;color:var(--dm-a);white-space:nowrap}
.dm-anim .dm-rule{flex:1;height:1px;background:#E4E1DB}

/* --- upload-regel ------------------------------------------ */
.dm-anim .dm-drop{display:flex;align-items:center;gap:calc(11*var(--u));margin-top:calc(14*var(--u));background:#fff;border:1.5px dashed #CDE7D6;border-radius:calc(12*var(--u));padding:calc(13*var(--u)) calc(16*var(--u))}
.dm-anim .dm-drop svg{width:calc(17*var(--u));height:calc(17*var(--u));flex-shrink:0;color:var(--dm-a)}
.dm-anim .dm-dropname{font-size:calc(14.5*var(--u));font-weight:700}
.dm-anim .dm-dropmeta{font-size:calc(13*var(--u));font-weight:600;color:var(--dm-ink40)}
.dm-anim .dm-dropstat{margin-left:auto;display:flex;align-items:center;gap:calc(7*var(--u));font-size:calc(13*var(--u));font-weight:700;color:var(--dm-a);white-space:nowrap}

/* --- panelen ----------------------------------------------- */
.dm-anim .dm-panel{margin-top:calc(15*var(--u));background:#fff;border:1px solid var(--dm-border);border-radius:calc(18*var(--u));padding:calc(20*var(--u)) calc(24*var(--u));box-shadow:0 calc(10*var(--u)) calc(26*var(--u)) rgba(20,18,14,.05)}
.dm-anim .dm-panel-head{display:flex;align-items:center;gap:calc(12*var(--u));flex-wrap:wrap}
.dm-anim .dm-panel-label{font-size:calc(12*var(--u));font-weight:800;letter-spacing:.12em;color:var(--dm-ink40);text-transform:uppercase}
.dm-anim .dm-panel-note{margin-left:auto;font-size:calc(12.5*var(--u));font-weight:600;color:var(--dm-a);white-space:nowrap}

/* --- asset: beeld + velden --------------------------------- */
.dm-anim .dm-asset{display:grid;grid-template-columns:calc(320*var(--u)) 1fr;gap:calc(22*var(--u));margin-top:calc(15*var(--u))}
.dm-anim .dm-shot{position:relative;border-radius:calc(12*var(--u));background:var(--dm-track);border:1px solid var(--dm-border);aspect-ratio:4/3;overflow:hidden}
.dm-anim .dm-shot-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6*var(--u));color:var(--dm-faint)}
.dm-anim .dm-shot-ph svg{width:calc(30*var(--u));height:calc(30*var(--u))}
.dm-anim .dm-shot-ph span{font-size:calc(11.5*var(--u));font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dm-anim .dm-fp{position:absolute;left:62%;top:38%;width:calc(46*var(--u));height:calc(46*var(--u));margin:calc(-23*var(--u)) 0 0 calc(-23*var(--u));border:2px solid var(--dm-a);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 calc(3*var(--u)) rgba(40,167,69,.18)}
.dm-anim .dm-fp b{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:var(--dm-a)}
.dm-anim .dm-fp i{position:absolute;background:var(--dm-a);opacity:.55}
.dm-anim .dm-fp i:first-of-type{left:50%;top:calc(-11*var(--u));width:1.5px;height:calc(11*var(--u))}
.dm-anim .dm-fp i:last-of-type{top:50%;right:calc(-11*var(--u));height:1.5px;width:calc(11*var(--u))}
.dm-anim .dm-fplabel{position:absolute;left:calc(11*var(--u));bottom:calc(11*var(--u));display:flex;align-items:center;gap:calc(6*var(--u));background:var(--dm-a);color:#fff;border-radius:999px;padding:calc(5*var(--u)) calc(11*var(--u));font-size:calc(11.5*var(--u));font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.dm-anim .dm-fplabel svg{width:calc(11*var(--u));height:calc(11*var(--u));flex-shrink:0}
.dm-anim .dm-crops{display:flex;gap:calc(8*var(--u));margin-top:calc(9*var(--u))}
.dm-anim .dm-crop{border:1px solid var(--dm-border);border-radius:calc(7*var(--u));background:var(--dm-track);position:relative}
.dm-anim .dm-crop span{position:absolute;left:50%;bottom:calc(-17*var(--u));transform:translateX(-50%);font-size:calc(10.5*var(--u));font-weight:700;color:var(--dm-faint);white-space:nowrap}
.dm-anim .dm-crop b{position:absolute;width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;background:var(--dm-a);left:58%;top:40%;margin:calc(-2.5*var(--u)) 0 0 calc(-2.5*var(--u))}
.dm-anim .dm-crop--sq{width:calc(44*var(--u));height:calc(44*var(--u))}
.dm-anim .dm-crop--wide{width:calc(78*var(--u));height:calc(44*var(--u))}
.dm-anim .dm-crop--tall{width:calc(30*var(--u));height:calc(44*var(--u))}

.dm-anim .dm-fields{display:flex;flex-direction:column;gap:calc(14*var(--u))}
.dm-anim .dm-flabel{display:flex;align-items:center;gap:calc(7*var(--u));font-size:calc(11.5*var(--u));font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dm-faint);margin-bottom:calc(7*var(--u))}
.dm-anim .dm-flabel svg{width:calc(12*var(--u));height:calc(12*var(--u));flex-shrink:0;color:var(--dm-a)}
.dm-anim .dm-flabel em{font-style:normal;letter-spacing:.04em;color:var(--dm-a);text-transform:none;font-weight:800}
.dm-anim .dm-tags{display:flex;flex-wrap:wrap;gap:calc(7*var(--u))}
.dm-anim .dm-tag{border:1px solid #CDE7D6;background:var(--dm-tint);color:#1B6E30;border-radius:999px;padding:calc(6*var(--u)) calc(12*var(--u));font-size:calc(12.5*var(--u));font-weight:600;white-space:nowrap}
.dm-anim .dm-tag--ghost{border-style:dashed;border-color:#DCD8D1;background:transparent;color:var(--dm-ink40);font-weight:700}
.dm-anim .dm-desc{font-family:var(--dm-serif);font-size:calc(16.5*var(--u));line-height:1.4;color:var(--dm-ink);border-left:2px solid var(--dm-a);padding-left:calc(13*var(--u))}
.dm-anim .dm-caret{display:inline-block;width:1.5px;height:calc(15*var(--u));background:var(--dm-a);vertical-align:-2px;animation:dm-blink 1s steps(1,end) infinite}

/* --- huisstijlscore ---------------------------------------- */
.dm-anim .dm-score{display:flex;align-items:center;gap:calc(15*var(--u))}
.dm-anim .dm-scorenum{display:flex;align-items:baseline;gap:calc(2*var(--u));font-family:var(--dm-serif);font-weight:600;color:var(--dm-a);line-height:1}
.dm-anim .dm-scorenum b{font-size:calc(40*var(--u));font-weight:600}
.dm-anim .dm-scorenum span{font-size:calc(16*var(--u));color:var(--dm-faint)}
.dm-anim .dm-bars{flex:1;display:flex;flex-direction:column;gap:calc(6*var(--u));min-width:0}
.dm-anim .dm-bar{display:grid;grid-template-columns:calc(108*var(--u)) 1fr calc(34*var(--u));align-items:center;gap:calc(9*var(--u))}
.dm-anim .dm-barname{font-size:calc(12.5*var(--u));font-weight:600;color:var(--dm-ink60);white-space:nowrap}
.dm-anim .dm-bartrack{height:calc(6*var(--u));border-radius:999px;background:var(--dm-track);overflow:hidden}
.dm-anim .dm-barfill{height:100%;border-radius:999px;background:var(--dm-a);transform-origin:left center}
.dm-anim .dm-barfill--warn{background:var(--dm-warn)}
.dm-anim .dm-barval{font-size:calc(12*var(--u));font-weight:700;color:var(--dm-ink40);text-align:right}

/* --- licentietabel ----------------------------------------- */
.dm-anim .dm-tbl{margin-top:calc(13*var(--u))}
.dm-anim .dm-tr{display:grid;grid-template-columns:1fr calc(150*var(--u)) calc(190*var(--u));align-items:center;gap:calc(10*var(--u));padding:calc(11*var(--u));border-radius:calc(9*var(--u))}
.dm-anim .dm-th{font-size:calc(11.5*var(--u));font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dm-faint);padding-bottom:calc(4*var(--u))}
.dm-anim .dm-tr+.dm-tr{border-top:1px solid var(--dm-border);border-top-left-radius:0;border-top-right-radius:0}
.dm-anim .dm-file{display:flex;align-items:center;gap:calc(9*var(--u));min-width:0}
.dm-anim .dm-file svg{width:calc(14*var(--u));height:calc(14*var(--u));flex-shrink:0;color:var(--dm-faint)}
.dm-anim .dm-fname{font-size:calc(14*var(--u));font-weight:600}
.dm-anim .dm-date{font-size:calc(13.5*var(--u));font-weight:600;color:var(--dm-ink60);white-space:nowrap}
.dm-anim .dm-state{display:flex;align-items:center;gap:calc(7*var(--u));font-size:calc(12.5*var(--u));font-weight:700;color:var(--dm-a);white-space:nowrap}
.dm-anim .dm-state svg{width:calc(13*var(--u));height:calc(13*var(--u));flex-shrink:0}
.dm-anim .dm-tr--warn{background:var(--dm-warntint)}
.dm-anim .dm-tr--warn .dm-state{color:var(--dm-warn);font-weight:800}
.dm-anim .dm-tr--warn .dm-date{color:var(--dm-warn);font-weight:800}
.dm-anim .dm-note{display:flex;align-items:center;gap:calc(7*var(--u));margin-top:calc(14*var(--u));padding-top:calc(13*var(--u));border-top:1px solid var(--dm-border);font-size:calc(14*var(--u));color:var(--dm-ink60)}
.dm-anim .dm-note svg{width:calc(14*var(--u));height:calc(14*var(--u));flex-shrink:0;color:var(--dm-a)}
.dm-anim .dm-note strong{color:var(--dm-ink);font-weight:700}

/* --- tussenzin --------------------------------------------- */
.dm-anim .dm-conv{display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));padding:calc(7*var(--u)) 0}
.dm-anim .dm-conv svg{width:calc(13*var(--u));height:calc(13*var(--u));flex-shrink:0;color:var(--dm-a)}
.dm-anim .dm-conv-label{font-family:var(--dm-serif);font-style:italic;font-size:calc(15*var(--u));color:var(--dm-ink40);text-align:center}

/* --- API-koppeling ----------------------------------------- */
.dm-anim .dm-api{display:grid;grid-template-columns:calc(230*var(--u)) calc(56*var(--u)) 1fr;align-items:center;gap:calc(14*var(--u));margin-top:calc(15*var(--u))}
.dm-anim .dm-source{background:var(--dm-a);color:#fff;border-radius:calc(14*var(--u));padding:calc(17*var(--u))}
.dm-anim .dm-source-ic{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:calc(10*var(--u));background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin-bottom:calc(10*var(--u))}
.dm-anim .dm-source-ic svg{width:calc(19*var(--u));height:calc(19*var(--u))}
.dm-anim .dm-source-t{font-family:var(--dm-serif);font-size:calc(19*var(--u));font-weight:600;line-height:1.15}
.dm-anim .dm-source-d{font-size:calc(12.5*var(--u));line-height:1.4;color:rgba(255,255,255,.88);margin-top:calc(4*var(--u))}
.dm-anim .dm-wires{display:flex;flex-direction:column;align-items:stretch;gap:calc(9*var(--u))}
.dm-anim .dm-wire{height:1.5px;background:#CDE7D6;position:relative}
.dm-anim .dm-wire b{position:absolute;right:calc(-3*var(--u));top:calc(-2.5*var(--u));width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--dm-a)}
.dm-anim .dm-targets{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(9*var(--u))}
.dm-anim .dm-target{display:flex;align-items:center;gap:calc(9*var(--u));background:#fff;border:1px solid var(--dm-border);border-radius:calc(10*var(--u));padding:calc(11*var(--u)) calc(13*var(--u));box-shadow:0 calc(5*var(--u)) calc(14*var(--u)) rgba(20,18,14,.04)}
.dm-anim .dm-tmark{width:calc(24*var(--u));height:calc(24*var(--u));border-radius:calc(7*var(--u));background:var(--dm-tint);color:#1B6E30;display:flex;align-items:center;justify-content:center;font-size:calc(11*var(--u));font-weight:800;flex-shrink:0}
.dm-anim .dm-tname{font-size:calc(13.5*var(--u));font-weight:700;white-space:nowrap}
.dm-anim .dm-tmeta{margin-left:auto;font-size:calc(11.5*var(--u));font-weight:700;color:var(--dm-a);white-space:nowrap}
.dm-anim .dm-target--ghost{border-style:dashed;background:transparent;box-shadow:none}
.dm-anim .dm-target--ghost .dm-tmark{background:transparent;border:1.5px dashed #9CCFAC;color:var(--dm-a)}
.dm-anim .dm-target--ghost .dm-tname{color:var(--dm-ink40)}

/* --- kaarten ----------------------------------------------- */
.dm-anim .dm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(15*var(--u));margin-top:calc(14*var(--u))}
.dm-anim .dm-card{background:#fff;border:1px solid var(--dm-border);border-radius:calc(14*var(--u));padding:calc(15*var(--u));box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(20,18,14,.05)}
.dm-anim .dm-cicon{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:calc(10*var(--u));background:var(--dm-a);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:calc(9*var(--u))}
.dm-anim .dm-cicon svg{width:calc(18*var(--u));height:calc(18*var(--u));flex-shrink:0}
.dm-anim .dm-ctitle{font-family:var(--dm-serif);font-size:calc(16.5*var(--u));font-weight:600;line-height:1.15}
.dm-anim .dm-cdesc{font-size:calc(12.5*var(--u));line-height:1.4;color:var(--dm-ink40);margin-top:calc(3*var(--u))}

/* --- animatie (13s, speelt één keer af bij laden) ----------- */
.dm-anim .dm-board,
.dm-anim .dm-eyebrow,.dm-anim .dm-title,.dm-anim .dm-sub,
.dm-anim .dm-kicker,.dm-anim .dm-drop,.dm-anim .dm-panel,
.dm-anim .dm-shot,.dm-anim .dm-crop,.dm-anim .dm-fp,.dm-anim .dm-fplabel,
.dm-anim .dm-fset,.dm-anim .dm-tag,.dm-anim .dm-desc,.dm-anim .dm-score,
.dm-anim .dm-bar,.dm-anim .dm-tr,.dm-anim .dm-note,.dm-anim .dm-conv,
.dm-anim .dm-source,.dm-anim .dm-wire,.dm-anim .dm-target,.dm-anim .dm-card{
  animation-duration:13s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.215,.61,.355,1)}
.dm-anim .dm-tag,.dm-anim .dm-target,.dm-anim .dm-fp{animation-timing-function:cubic-bezier(.34,1.56,.64,1)}

.dm-anim .dm-board{animation-name:dma-board}
.dm-anim .dm-eyebrow{animation-name:dma-eyebrow}
.dm-anim .dm-title{animation-name:dma-title}
.dm-anim .dm-sub{animation-name:dma-sub}
.dm-anim .dm-kicker--one{animation-name:dma-k1}
.dm-anim .dm-kicker--two{animation-name:dma-k2}
.dm-anim .dm-kicker--three{animation-name:dma-k3}
.dm-anim .dm-kicker--four{animation-name:dma-k4}
.dm-anim .dm-drop{animation-name:dma-drop}
.dm-anim .dm-panel--asset{animation-name:dma-passet}
.dm-anim .dm-shot{animation-name:dma-shot}
.dm-anim .dm-fp{animation-name:dma-fp}
.dm-anim .dm-fplabel{animation-name:dma-fplabel}
.dm-anim .dm-crop--1{animation-name:dma-cr0}
.dm-anim .dm-crop--2{animation-name:dma-cr1}
.dm-anim .dm-crop--3{animation-name:dma-cr2}
.dm-anim .dm-fset--tags{animation-name:dma-fs0}
.dm-anim .dm-fset--desc{animation-name:dma-fs1}
.dm-anim .dm-fset--score{animation-name:dma-fs2}
.dm-anim .dm-tag--1{animation-name:dma-g0}
.dm-anim .dm-tag--2{animation-name:dma-g1}
.dm-anim .dm-tag--3{animation-name:dma-g2}
.dm-anim .dm-tag--4{animation-name:dma-g3}
.dm-anim .dm-tag--5{animation-name:dma-g4}
.dm-anim .dm-tag--6{animation-name:dma-g5}
.dm-anim .dm-desc{animation-name:dma-desc}
.dm-anim .dm-score{animation-name:dma-score}
.dm-anim .dm-bar--1 .dm-barfill{animation:dma-bar0 13s cubic-bezier(.215,.61,.355,1) 1 forwards}
.dm-anim .dm-bar--2 .dm-barfill{animation:dma-bar1 13s cubic-bezier(.215,.61,.355,1) 1 forwards}
.dm-anim .dm-bar--3 .dm-barfill{animation:dma-bar2 13s cubic-bezier(.215,.61,.355,1) 1 forwards}
.dm-anim .dm-panel--lic{animation-name:dma-plic}
.dm-anim .dm-tr--0{animation-name:dma-r0}
.dm-anim .dm-tr--1{animation-name:dma-r1}
.dm-anim .dm-tr--2{animation-name:dma-r2}
.dm-anim .dm-tr--3{animation-name:dma-r3}
.dm-anim .dm-note{animation-name:dma-note}
.dm-anim .dm-conv{animation-name:dma-conv}
.dm-anim .dm-source{animation-name:dma-source}
.dm-anim .dm-wire--1{animation-name:dma-wi0}
.dm-anim .dm-wire--2{animation-name:dma-wi1}
.dm-anim .dm-wire--3{animation-name:dma-wi2}
.dm-anim .dm-target--1{animation-name:dma-tg0}
.dm-anim .dm-target--2{animation-name:dma-tg1}
.dm-anim .dm-target--3{animation-name:dma-tg2}
.dm-anim .dm-target--4{animation-name:dma-tg3}
.dm-anim .dm-card--1{animation-name:dma-p0}
.dm-anim .dm-card--2{animation-name:dma-p1}
.dm-anim .dm-card--3{animation-name:dma-p2}

@keyframes dm-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes dma-board{0%{opacity:0}2.7%,100%{opacity:1}}
@keyframes dma-eyebrow{0%,1.5%{opacity:0;transform:translateY(calc(10*var(--u)))}5.4%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-title{0%,3.8%{opacity:0;transform:translateY(calc(16*var(--u)))}8.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-sub{0%,8.5%{opacity:0;transform:translateY(calc(12*var(--u)))}13%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-k1{0%,13.8%{opacity:0;transform:translateY(calc(8*var(--u)))}17.7%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-drop{0%,16.9%{opacity:0;transform:translateY(calc(14*var(--u)))}20%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-passet{0%,20%{opacity:0;transform:translateY(calc(18*var(--u)))}23.8%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-shot{0%,22.3%{opacity:0}25.4%,100%{opacity:1}}
@keyframes dma-fp{0%,26.2%{opacity:0;transform:scale(1.9)}29.2%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-fplabel{0%,28.5%{opacity:0;transform:translateY(calc(8*var(--u)))}31.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-cr0{0%,30%{opacity:0;transform:translateY(calc(8*var(--u)))}32.3%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-cr1{0%,30.8%{opacity:0;transform:translateY(calc(8*var(--u)))}33.1%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-cr2{0%,31.5%{opacity:0;transform:translateY(calc(8*var(--u)))}33.8%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-fs0{0%,24.6%{opacity:0}26.9%,100%{opacity:1}}
@keyframes dma-fs1{0%,33.8%{opacity:0}36.2%,100%{opacity:1}}
@keyframes dma-fs2{0%,41.5%{opacity:0}43.8%,100%{opacity:1}}
@keyframes dma-g0{0%,25.4%{opacity:0;transform:scale(.7)}27.7%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-g1{0%,26.2%{opacity:0;transform:scale(.7)}28.5%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-g2{0%,26.9%{opacity:0;transform:scale(.7)}29.2%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-g3{0%,27.7%{opacity:0;transform:scale(.7)}30%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-g4{0%,28.5%{opacity:0;transform:scale(.7)}30.8%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-g5{0%,29.2%{opacity:0;transform:scale(.7)}31.5%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-desc{0%,34.6%{opacity:0;transform:translateY(calc(8*var(--u)))}38.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-score{0%,42.3%{opacity:0;transform:translateY(calc(10*var(--u)))}45.4%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-bar0{0%,43.8%{transform:scaleX(0)}47.7%,100%{transform:scaleX(1)}}
@keyframes dma-bar1{0%,44.6%{transform:scaleX(0)}48.5%,100%{transform:scaleX(1)}}
@keyframes dma-bar2{0%,45.4%{transform:scaleX(0)}49.2%,100%{transform:scaleX(1)}}
@keyframes dma-k2{0%,50.8%{opacity:0;transform:translateY(calc(8*var(--u)))}54.6%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-plic{0%,53.1%{opacity:0;transform:translateY(calc(18*var(--u)))}56.9%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-r0{0%,55.4%{opacity:0}57.7%,100%{opacity:1}}
@keyframes dma-r1{0%,56.2%{opacity:0;transform:translateY(calc(8*var(--u)))}58.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-r2{0%,57.7%{opacity:0;transform:translateY(calc(8*var(--u)))}60%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-r3{0%,59.2%{opacity:0;transform:translateY(calc(8*var(--u)))}61.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-note{0%,62.3%{opacity:0;transform:translateY(calc(8*var(--u)))}65.4%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-conv{0%,66.2%{opacity:0;transform:translateY(calc(10*var(--u)))}69.2%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-k3{0%,68.5%{opacity:0;transform:translateY(calc(8*var(--u)))}71.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-source{0%,70.8%{opacity:0;transform:translateY(calc(16*var(--u)))}74.6%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-wi0{0%,73.8%{opacity:0;transform:scaleX(0)}76.9%,100%{opacity:1;transform:scaleX(1)}}
@keyframes dma-wi1{0%,74.6%{opacity:0;transform:scaleX(0)}77.7%,100%{opacity:1;transform:scaleX(1)}}
@keyframes dma-wi2{0%,75.4%{opacity:0;transform:scaleX(0)}78.5%,100%{opacity:1;transform:scaleX(1)}}
@keyframes dma-tg0{0%,75.4%{opacity:0;transform:scale(.85)}78.5%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-tg1{0%,76.2%{opacity:0;transform:scale(.85)}79.2%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-tg2{0%,76.9%{opacity:0;transform:scale(.85)}80%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-tg3{0%,77.7%{opacity:0;transform:scale(.85)}80.8%,100%{opacity:1;transform:scale(1)}}
@keyframes dma-k4{0%,83.1%{opacity:0;transform:translateY(calc(8*var(--u)))}86.2%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-p0{0%,85.4%{opacity:0;transform:translateY(calc(18*var(--u)))}89.2%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-p1{0%,86.5%{opacity:0;transform:translateY(calc(18*var(--u)))}90.4%,100%{opacity:1;transform:translateY(0)}}
@keyframes dma-p2{0%,87.7%{opacity:0;transform:translateY(calc(18*var(--u)))}91.5%,100%{opacity:1;transform:translateY(0)}}

/* --- wires verticaal op smal ------------------------------- */
.dm-anim .dm-wires{transform-origin:left center}

/* --- middenformaat ----------------------------------------- */
@container (min-width: 621px) and (max-width: 900px){
  .dm-anim .dm-asset{grid-template-columns:calc(260*var(--u)) 1fr}
  .dm-anim .dm-api{grid-template-columns:1fr;gap:calc(12*var(--u))}
  .dm-anim .dm-wires{display:none}
}

/* --- smal (mobiel / smalle kolom) --------------------------- */
@container (max-width: 620px){
  .dm-anim .dm-title{font-size:26px;line-height:1.2}
  .dm-anim .dm-sub{font-size:15px;max-width:none}
  .dm-anim .dm-brand,.dm-anim .dm-agent,.dm-anim .dm-kicker-label{font-size:11px}
  .dm-anim .dm-dot{width:8px;height:8px;border-radius:3px}
  .dm-anim .dm-drop{padding:11px 12px;gap:9px;border-radius:10px;flex-wrap:wrap}
  .dm-anim .dm-drop svg{width:15px;height:15px}
  .dm-anim .dm-dropname{font-size:13.5px}
  .dm-anim .dm-dropmeta{font-size:12px}
  .dm-anim .dm-dropstat{font-size:12px;margin-left:0}
  .dm-anim .dm-panel{padding:14px;border-radius:12px;margin-top:12px}
  .dm-anim .dm-panel-label{font-size:11px}
  .dm-anim .dm-panel-note{margin-left:0;font-size:11.5px}
  .dm-anim .dm-asset{grid-template-columns:1fr;gap:16px}
  .dm-anim .dm-shot{border-radius:10px}
  .dm-anim .dm-fp{width:40px;height:40px;margin:-20px 0 0 -20px}
  .dm-anim .dm-fplabel{font-size:10.5px;padding:4px 9px;left:9px;bottom:9px}
  .dm-anim .dm-fplabel svg{width:10px;height:10px}
  .dm-anim .dm-crop span{font-size:10px;bottom:-15px}
  .dm-anim .dm-crop--sq{width:40px;height:40px}
  .dm-anim .dm-crop--wide{width:70px;height:40px}
  .dm-anim .dm-crop--tall{width:28px;height:40px}
  .dm-anim .dm-crops{margin-bottom:15px}
  .dm-anim .dm-flabel{font-size:10.5px}
  .dm-anim .dm-flabel svg{width:11px;height:11px}
  .dm-anim .dm-tag{font-size:12px;padding:5px 10px}
  .dm-anim .dm-desc{font-size:15px;padding-left:11px}
  .dm-anim .dm-caret{height:14px}
  .dm-anim .dm-score{gap:12px}
  .dm-anim .dm-scorenum b{font-size:34px}
  .dm-anim .dm-scorenum span{font-size:14px}
  .dm-anim .dm-bar{grid-template-columns:88px 1fr 30px;gap:7px}
  .dm-anim .dm-barname{font-size:11.5px}
  .dm-anim .dm-barval{font-size:11px}
  .dm-anim .dm-bartrack{height:5px}
  .dm-anim .dm-tr{grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0}
  .dm-anim .dm-tr--warn{padding:10px 8px}
  .dm-anim .dm-th{display:none}
  .dm-anim .dm-file{grid-column:1}
  .dm-anim .dm-fname{font-size:13px}
  .dm-anim .dm-date{grid-column:2;text-align:right;font-size:12px}
  .dm-anim .dm-state{grid-column:1 / -1;font-size:12px}
  .dm-anim .dm-note{font-size:12.5px;gap:6px}
  .dm-anim .dm-note svg{width:13px;height:13px}
  .dm-anim .dm-conv-label{font-size:13px}
  .dm-anim .dm-conv svg{width:12px;height:12px}
  .dm-anim .dm-api{grid-template-columns:1fr;gap:12px}
  .dm-anim .dm-wires{display:none}
  .dm-anim .dm-source{padding:14px;border-radius:12px}
  .dm-anim .dm-source-ic{width:32px;height:32px;border-radius:9px}
  .dm-anim .dm-source-ic svg{width:17px;height:17px}
  .dm-anim .dm-source-t{font-size:17px}
  .dm-anim .dm-source-d{font-size:12.5px}
  .dm-anim .dm-targets{grid-template-columns:1fr;gap:8px}
  .dm-anim .dm-target{padding:10px;border-radius:9px}
  .dm-anim .dm-tmark{width:22px;height:22px;font-size:10.5px}
  .dm-anim .dm-tname{font-size:13px}
  .dm-anim .dm-tmeta{font-size:11px}
  .dm-anim .dm-grid{grid-template-columns:1fr;gap:10px}
  .dm-anim .dm-card{padding:14px;border-radius:12px}
  .dm-anim .dm-cicon{width:32px;height:32px;border-radius:9px;margin-bottom:8px}
  .dm-anim .dm-cicon svg{width:17px;height:17px}
  .dm-anim .dm-ctitle{font-size:16px}
  .dm-anim .dm-cdesc{font-size:13px}
}

/* --- bewegingsvoorkeur -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .dm-anim *{animation:none !important;opacity:1 !important;transform:none !important}
}