/* r17 mockup (2026-10-27): the live page (r15) with only its two example windows replaced.
   Nick: the windows looked "vaag en lelijk", above all the 40 shorts without a picture; the rest of the page stays.
   The hero shows the stream as one instrument; "15 minutes later" shows the brief: timecodes and lines.
   Round 4 (Nick: "veel indrukwekkender en duidelijk ... je ziet gelijk wat je kan doen"): bigger, the videos as
   cards over their place, the chat as a coloured ridge with the best moments named on its peaks, and at every
   row what the editor can do with it. */

/* ---------- the hero: the stream as one instrument ---------- */
.in-wrap{position:relative;margin-top:clamp(44px,6vh,72px);padding:0 var(--g);text-align:left;font-family:var(--ui);color:#dfe1e8}
.in{max-width:var(--max);margin:0 auto;padding:26px 0 22px;position:relative}
.in-head{display:flex;align-items:baseline;gap:22px;font-size:14px;color:var(--t2);margin-bottom:22px}
.in-head b{color:#fff;font-weight:650;font-size:16px;letter-spacing:-.01em}
.in-head .mono{font-size:13px}
.in-ex{margin-left:auto;color:var(--t3)}
.in-ex a{color:var(--t2);border-bottom:1px solid var(--hair2)}

.in-rows{position:relative}
.in-row{display:grid;grid-template-columns:150px 1fr;align-items:stretch}
.in-row .lab{padding-top:2px;font-size:13.5px;color:var(--t1);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.in-row .lab small{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--t3)}
.in-row .lab i{font-style:normal;font-weight:400;color:var(--t3);margin-left:6px;font-size:12.5px}
.in-row .tr{position:relative;min-width:0}
.in-reveal{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
html[data-motion="on"] .in.play .in-reveal{animation:inReveal 6.4s linear forwards}
@keyframes inReveal{to{clip-path:inset(0 0 0 0)}}
html:not([data-motion="on"]) .in-reveal,.in.still .in-reveal{clip-path:inset(0 0 0 0)!important;animation:none!important}

/* the videos: a card over its place, a bracket under it on the exact range */
.in-row.videos{min-height:114px}
.in-row.videos .lab{padding-top:28px}
.in-card{position:absolute;top:0;width:250px;padding:10px 12px 9px;border-radius:9px;background:#141721;box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}

.in-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;font-size:14px;line-height:18px;font-weight:650;color:#fff;letter-spacing:-.012em}
.in-card b em{font-style:normal;color:var(--c-vid-t);margin-right:7px}
.in-card small{display:block;margin-top:4px;font:400 12px/1.3 var(--ui);color:var(--t3)}
.in-span{position:absolute;top:86px;height:10px;border:1.5px solid var(--c-vid-t);border-top:0;border-radius:0 0 5px 5px;background:rgba(123,127,246,.12)}

/* the chat: a ridge in the brand's colour; the highlights sit on its peaks, the strongest four named above them */
.in-row.chat{min-height:240px;margin-top:6px}
.in-row.chat .lab{padding-top:96px}
.in-names{position:absolute;left:0;right:0;top:0;height:84px}
.in-hln{position:absolute;top:0;transform:translateX(-50%);font-size:13px;font-weight:600;color:#fff;white-space:nowrap;letter-spacing:-.01em;line-height:20px}
.in-hln small{font:500 11px/1 var(--mono);color:var(--c-hl);margin-left:8px}
.in-stem{position:absolute;width:1px;background:linear-gradient(rgba(251,191,36,.7),rgba(251,191,36,.12))}
.in-ridge{position:absolute;left:0;right:0;top:84px;height:150px}
.in-ridge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.in-ridge path.a{fill:url(#inFill)}
.in-ridge path.l{fill:none;stroke:var(--brand-hi);stroke-width:1.4;vector-effect:non-scaling-stroke}
.in-hl{position:absolute;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:var(--c-hl);border-radius:2px}

/* the shorts: 40 ticks */
.in-row.shorts{min-height:40px;margin-top:10px}
.in-row.shorts .lab{padding-top:6px}
.in-sh{position:absolute;top:8px;width:2px;height:18px;background:var(--c-sh);border-radius:1px}

/* the chapters: the stream's own structure */
.in-row.chapters{min-height:40px;margin-top:8px}
.in-row.chapters .lab{padding-top:8px}
.in-ch{position:absolute;top:4px;height:30px;border-left:1.5px solid var(--c-ch);padding-left:8px;font-size:12.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:30px;background:rgba(56,189,248,.08)}

.in-ruler{position:relative;height:24px;margin-left:150px;border-top:1px solid var(--hair);margin-top:8px}
.in-ruler span{position:absolute;top:7px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--t3);white-space:nowrap}
.in-ruler span:first-child{transform:none}
.in-ruler span.in-last{transform:translateX(-100%);color:var(--t2)}
.in.still .in-headline{display:none}
.in-headline{position:absolute;top:0;bottom:0;left:150px;width:1px;background:#fff;opacity:0;pointer-events:none}
html[data-motion="on"] .in.play .in-headline{animation:inSweep 6.4s linear forwards}
@keyframes inSweep{0%{left:150px;opacity:1}98%{opacity:1}100%{left:100%;opacity:0}}

.in-foot{display:flex;align-items:baseline;gap:30px;margin-top:22px;font-size:15px;color:var(--t2)}
.in-foot b{color:#fff;font-weight:700;font-size:20px;letter-spacing:-.02em;margin-right:3px}
.in-foot .when{color:var(--t3);font-size:14px}
.in-again{margin-left:auto;background:none;border:0;padding:0;color:var(--t3);font:500 13px/1 var(--ui);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.in-again:hover{color:var(--t1)}

/* ---------- 15 minutes later: three acts, each one lands when it comes on screen ----------
   Round 5 (Nick: "veel informatie in een hokje ... meer motion graphic design ... episch"): a huge number per act,
   the videos as three cards whose parts light up in order, the 40 shorts as a strip that fills and the eight
   strongest rising out of it with their line, the chapters as the stream bar being cut. One group moves at a time. */
.lt{max-width:var(--max);margin:0 auto;text-align:left;font-family:var(--ui);display:grid;gap:clamp(56px,6vw,88px)}
.lt-band{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.lt-num{position:sticky;top:84px}
.lt-num b{display:block;font:800 clamp(72px,8vw,112px)/.9 var(--f);font-stretch:110%;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums}
.lt-num span{display:block;margin-top:8px;font-size:17px;font-weight:600;color:var(--t1);letter-spacing:-.01em}
.lt-num small{display:block;margin-top:6px;max-width:19ch;font-size:13.5px;line-height:1.45;color:var(--t3)}
.lt-num .ac{display:block;margin-top:14px;font:500 13px/1 var(--ui);font-style:normal;color:var(--c-vid-t)}

/* act 1: the videos, each with its story spine */
.lt-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lt-card{position:relative;padding:20px 20px 18px;border-radius:14px;background:linear-gradient(180deg,#141721,#0e1017);box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
  opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.lt-card.on{opacity:1;transform:none}
.lt-ct{display:flex;gap:10px;align-items:baseline;font-size:17px;font-weight:650;color:#fff;letter-spacing:-.015em;line-height:1.25;min-height:43px}
.lt-ct em{font-style:normal;flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(123,127,246,.18);border:1px solid rgba(184,192,255,.35);font:700 11.5px/1 var(--ui);color:var(--c-vid-t);transform:translateY(-2px)}
.lt-cm{margin-top:8px;font:400 12.5px/1.3 var(--ui);color:var(--t3)}
.lt-parts{position:relative;margin-top:18px;padding-left:18px}
.lt-parts:before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--hair2)}
.lt-part{position:relative;padding:7px 0;display:grid;grid-template-columns:40px 56px 1fr;gap:10px;align-items:baseline;font-size:13.5px;line-height:1.35;color:var(--t2);opacity:0;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.lt-part.on{opacity:1;transform:none}
.lt-part:before{content:"";position:absolute;left:-18px;top:13px;width:9px;height:9px;border-radius:50%;background:#0e1017;border:1.5px solid var(--c-vid-t)}
.lt-part.peak:before{background:var(--c-hl);border-color:var(--c-hl)}
.lt-part i{font-style:normal;font-size:12px;color:var(--t3)}
.lt-part.peak i{color:var(--c-hl)}
.lt-part b{font:500 11.5px/1.4 var(--mono);color:var(--t3)}

/* act 2: the shorts, a strip that fills and the strongest rising out of it */
.lt-strip{position:relative;height:54px;display:flex;align-items:flex-end}
.lt-strip i{flex:1;display:block;height:34px;margin:0 2px;border-radius:2px;background:var(--c-sh);opacity:.85;transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease),opacity .3s}
.lt-strip i.on{transform:none}
.lt-strip i.top{opacity:1}
.lt-strip i.dim{opacity:.35}
.lt-quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.lt-q{display:flex;flex-direction:column;gap:14px;min-height:150px;padding:16px 16px 14px;border-radius:12px;background:linear-gradient(180deg,#141721,#0e1017);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.lt-q.on{opacity:1;transform:none}
.lt-q q{quotes:"\201C" "\201D";font-size:15px;font-weight:600;line-height:1.35;color:#fff;letter-spacing:-.012em}
.lt-q .m{margin-top:auto;display:flex;align-items:center;gap:10px;font:500 11.5px/1 var(--mono);color:var(--t3)}
.lt-q .heat{margin-left:auto;display:flex;gap:2px}
.lt-q .heat b{width:7px;height:9px;background:var(--hair2);border-radius:1px}
.lt-q .heat b.on{background:var(--c-sh)}
.lt-more{margin:14px 0 0;font-size:13.5px;color:var(--t3)}

/* act 3: the chapters, the stream bar cut into its parts */
.lt-bar{position:relative;height:64px;border-radius:8px;background:rgba(255,255,255,.03);overflow:hidden}
.lt-chp{position:absolute;top:0;bottom:0;border-left:1.5px solid var(--c-ch);background:linear-gradient(90deg,rgba(56,189,248,.12),rgba(56,189,248,0) 70%);
  opacity:0;transform:scaleX(.6);transform-origin:left;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.lt-chp.on{opacity:1;transform:none}
.lt-chp span{position:absolute;left:9px;top:11px;right:6px;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.lt-chp small{position:absolute;left:9px;bottom:10px;font:500 11px/1 var(--mono);color:var(--t3)}
.lt-chp.narrow span,.lt-chp.narrow small{display:none}
.lt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(6,auto);column-gap:48px;margin-top:18px;font-size:14px}
.lt-list div{display:flex;gap:12px;padding:6px 0;color:var(--t2)}
.lt-list .tc{font:500 12px/1.5 var(--mono);color:var(--t3);width:64px;flex:none}
html:not([data-motion="on"]) .lt .lt-card,html:not([data-motion="on"]) .lt .lt-part,html:not([data-motion="on"]) .lt .lt-q,html:not([data-motion="on"]) .lt .lt-chp,html:not([data-motion="on"]) .lt .lt-strip i{opacity:1;transform:none;transition:none}

/* ---------- what ClipMind finds: three calm rows instead of a tab window (round 7) ---------- */
.wf{max-width:var(--max);margin:0 auto;text-align:left;font-family:var(--ui);display:grid;gap:clamp(44px,5vw,72px)}
.wf-row{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.wf-h b{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:650;color:#fff;letter-spacing:-.012em}
.wf-h p{margin:8px 0 0;max-width:21ch;font-size:13.5px;line-height:1.45;color:var(--t3)}
.wf-h em{display:block;margin-top:14px;font:500 13px/1 var(--ui);font-style:normal;color:var(--c-vid-t)}
.wf-mk{display:inline-block;flex:none}
.wf-mk.hl{width:9px;height:9px;background:var(--c-hl);border-radius:1.5px;transform:rotate(45deg)}
.wf-mk.sh{width:3px;height:14px;background:var(--c-sh);border-radius:1px}
.wf-mk.ask{width:9px;height:9px;border-radius:50%;background:var(--c-vid-t)}

/* highlights: a ranked list with the chat's reaction as a bar */
.wf-hls{display:grid}
.wf-hl{display:grid;grid-template-columns:26px 1fr 170px 64px;gap:16px;align-items:center;height:40px;font-size:14.5px;color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.wf-hl.on{opacity:1;transform:none}
.wf-hl .n{font:400 13px/1 var(--ui);color:var(--t3)}
.wf-hl .t{letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-hl .bar{position:relative;height:6px;border-radius:3px;background:var(--hair)}
.wf-hl .bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:3px;background:linear-gradient(90deg,rgba(251,191,36,.55),var(--c-hl));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.wf-hl.on .bar i{transform:none}
.wf-hl .tc{font:500 12px/1 var(--mono);color:var(--t3);text-align:right}

/* shorts: the frame as a diagram, the facts beside it */
.wf-short{display:grid;grid-template-columns:210px 1fr;gap:36px;align-items:start}
.wf-frame{position:relative;height:373px;border-radius:16px;border:1px solid var(--hair);background:linear-gradient(180deg,#141721,#0b0c13);overflow:hidden}
.wf-frame:before{content:"";position:absolute;left:0;right:0;top:46%;border-top:1px dashed var(--hair2)}
.wf-cam,.wf-game{position:absolute;left:0;right:0;text-align:center;font:500 12.5px/1 var(--ui);color:var(--t3)}
.wf-cam{top:21%}.wf-game{top:72%}
.wf-cap{position:absolute;left:10px;right:10px;top:46%;transform:translateY(-50%);margin:0;text-align:center;font:800 22px/1.05 var(--f);font-stretch:110%;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.wf-cap span{display:inline-block;transition:color .15s,transform .15s}
.wf-cap span.hot{color:var(--c-hl);transform:scale(1.08)}
.wf-tag{position:absolute;top:12px;right:12px;font:600 10px/1 var(--ui);color:rgba(255,255,255,.7);letter-spacing:.02em}
.wf-facts{padding-top:6px}
.wf-ft b{display:block;font:400 13px/1 var(--ui);color:var(--t3)}
.wf-ft span{display:block;margin-top:6px;font-size:17px;font-weight:650;color:#fff;letter-spacing:-.012em}
.wf-facts dl{display:grid;grid-template-columns:72px 1fr;gap:9px 14px;margin:18px 0 0;font-size:13.5px}
.wf-facts dt{color:var(--t3)}
.wf-facts dd{margin:0;color:var(--t1)}
.wf-facts dd.mono{font-size:12.5px;color:var(--t2)}
.wf-next{margin-top:26px;font-size:13.5px}
.wf-next b{display:block;font:400 13px/1 var(--ui);color:var(--t3);margin-bottom:8px}
.wf-next div{display:flex;justify-content:space-between;gap:16px;padding:5px 0;color:var(--t2)}
.wf-next em{font-style:normal;font-size:12px;color:var(--t3)}

/* ask: the question, the answer with its moment */
.wf-ask{max-width:560px}
.wf-q{margin:0;font-size:16px;color:#fff;font-weight:500;letter-spacing:-.01em}
.wf-q small,.wf-a small{display:block;margin-bottom:5px;font:500 12.5px/1 var(--ui);color:var(--t3)}
.wf-a{margin-top:26px}
.wf-a small{color:var(--c-vid-t)}
.wf-body{display:block;font-size:15.5px;line-height:1.55;color:var(--t1)}
.wf-body a{color:var(--c-vid-t);font-family:var(--mono);font-size:13px;border-bottom:1px solid rgba(165,180,252,.35)}
.wf-typing{display:inline-flex;gap:4px;height:24px;align-items:center}
.wf-typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:wfDot 1s infinite}
.wf-typing i:nth-child(2){animation-delay:.15s}.wf-typing i:nth-child(3){animation-delay:.3s}
@keyframes wfDot{50%{opacity:.25;transform:translateY(-2px)}}
.wf-mc{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:14px 16px;border-radius:12px;background:#141721;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.wf-mc.on{opacity:1;transform:none}
.wf-mc b{display:block;font-size:14.5px;font-weight:650;color:#fff;letter-spacing:-.01em}
.wf-mc .mono{display:block;margin-top:3px;font-size:12px;color:var(--t3)}
.wf-mc > div:last-child{display:flex;gap:8px;flex:none}
.wf-btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:7px;border:1px solid var(--hair2);font-size:12.5px;font-weight:500;color:var(--t1)}
.wf-btn.p{background:var(--brand);border-color:transparent;color:#fff}
.wf-in{display:flex;align-items:center;justify-content:space-between;margin-top:18px;height:42px;padding:0 6px 0 14px;border-radius:10px;border:1px solid var(--hair2);background:rgba(255,255,255,.03);font-size:14px;color:var(--t3)}
.wf-in i{width:30px;height:30px;border-radius:7px;background:var(--brand);position:relative}
.wf-in i:after{content:"";position:absolute;left:11px;top:9px;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
html:not([data-motion="on"]) .wf .wf-hl,html:not([data-motion="on"]) .wf .wf-mc{opacity:1;transform:none;transition:none}

@media (max-width:1000px){
  .wf-row{grid-template-columns:1fr;gap:18px}
  .wf-hl{grid-template-columns:26px 1fr 64px}
  .wf-hl .bar{display:none}
  .lt-band{grid-template-columns:1fr;gap:18px}
  .lt-num{position:static}
  .lt-cards{grid-template-columns:1fr}
  .lt-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .in-row{grid-template-columns:110px 1fr}
  .in-ruler{margin-left:110px}
  .in-headline{left:110px}
  .in-row .lab small{display:none}
}
@media (max-width:640px){
  .in-row{grid-template-columns:64px 1fr}
  .in-ruler{margin-left:64px}
  .in-headline{left:64px}
  .in-row .lab i{display:none}
  .in-ch{font-size:0}
  .in-row.videos{min-height:40px}
  .in-row.videos .lab{padding-top:8px}
  .in-card{display:none}
  .in-span{top:10px}
  .in-ruler span:nth-child(2n){display:none}
  .in-hln,.in-stem{display:none}
  .in-head{flex-wrap:wrap;gap:8px 16px}
  .in-ex{margin-left:0;width:100%}
  .in-foot{flex-wrap:wrap;gap:12px 20px}
  .wf-short{grid-template-columns:1fr}
  .wf-frame{width:210px}
  .lt-quotes,.lt-list{grid-template-columns:1fr}
  .lt-chp span,.lt-chp small{display:none}
}