/* Yanes Ventures — the strike-out moment and the three movements. */

/* ============ the strike-out ============ */
#cross > .wrap{padding-block:clamp(96px,13vw,190px)}
.cross-stage{max-width:100%}
.cross-kicker{font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--label);
  margin-bottom:clamp(22px,3vw,40px);opacity:0;transform:translateY(8px);
  transition:opacity 700ms var(--ease),transform 700ms cubic-bezier(.16,1,.3,1)}
.cross-stage.is-in .cross-kicker{opacity:1;transform:none}
.kws{display:flex;flex-direction:column;gap:clamp(8px,1.1vw,16px)}
.kw{position:relative;width:max-content;max-width:100%;
  font-weight:600;font-size:clamp(30px,6.6vw,92px);line-height:1.04;letter-spacing:-.04em;
  color:var(--muted);opacity:0;transform:translateY(26px);
  transition:opacity 760ms var(--ease),transform 860ms cubic-bezier(.16,1,.3,1),color 460ms var(--ease)}
.kw.is-in{opacity:1;transform:none}
.kw.is-live{color:var(--paper)}
.kw.is-done{color:#4E4D49}
.kw > span{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(var(--rust),var(--rust));background-repeat:no-repeat;
  background-position:0 54%;background-size:0% clamp(3px,.45vw,7px);
  transition:background-size 700ms cubic-bezier(.72,0,.24,1)}
.kw.is-struck > span{background-size:100% clamp(3px,.45vw,7px)}
.cross-out{margin-top:clamp(30px,3.8vw,52px);max-width:48ch;font-size:clamp(16px,1.7vw,19px);line-height:1.6;
  color:var(--body);opacity:0;transform:translateY(14px);
  transition:opacity 800ms var(--ease),transform 800ms cubic-bezier(.16,1,.3,1)}
.cross-out.is-in{opacity:1;transform:none}

/* ============ the movements ============ */
#look .stage-pin.is-scrub{position:relative;min-height:150vh}
.stage-stick{position:sticky;top:max(64px,calc(50vh - 290px))}
#look > .wrap{position:relative;display:flex;flex-direction:column;gap:clamp(30px,3.4vw,44px)}
.mvf{position:relative;border:1px solid var(--rule);border-top-color:#3A3E45;background:#1C1E23;
  box-shadow:0 1px 0 rgba(245,244,241,.05) inset,0 40px 90px -50px rgba(0,0,0,.9);
  opacity:0;transform:translateY(26px);transition:opacity 900ms var(--ease),transform 900ms cubic-bezier(.16,1,.3,1)}
.mvf.is-live{opacity:1;transform:none}
.mvf::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 6% -12%,rgba(113,134,255,.12),transparent 58%)}
.mvs{position:relative;z-index:1;height:clamp(420px,48vh,480px);overflow:hidden}
.mv{position:absolute;inset:0;padding:clamp(18px,2.3vw,30px);opacity:0;will-change:opacity}
.mv-bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-top:1px solid var(--rule);padding:13px clamp(18px,2.3vw,30px)}
.mv-cap{font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--body)}
.mv-nav{display:flex;gap:8px;flex:none}
.mv-pip{width:24px;height:3px;padding:21px 0;border:0;cursor:pointer;background:none;
  display:block;box-sizing:content-box;background-clip:content-box}
.mv-pip::before{content:"";display:block;height:3px;background:rgba(245,244,241,.2);
  transition:background 220ms var(--ease)}
.mv-pip:hover::before{background:rgba(245,244,241,.42)}
.mv-pip.is-on::before{background:var(--rust)}
.mv-nav{margin:-21px 0}
.mv-lab{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.mv-big{font:500 clamp(22px,2.7vw,34px)/1 var(--mono);letter-spacing:-.02em;color:var(--paper);margin-top:9px;
  font-variant-numeric:tabular-nums}

/* A. submissions */
.mv--subs{display:flex;flex-direction:column}
.sb-h,.sb-r{display:grid;grid-template-columns:64px minmax(0,1fr) 74px 132px;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(46,49,55,.6)}
.sb-h{padding-top:0;border-bottom-color:var(--rule);
  font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sb-r{opacity:0;will-change:transform,opacity}
.sb-t{font:400 11px/1 var(--mono);color:var(--muted);letter-spacing:.06em}
.sb-b{display:block;height:10px;background:rgba(245,244,241,.07)}
.sb-b > span{display:block;height:100%;background:linear-gradient(90deg,rgba(245,244,241,.34),rgba(245,244,241,.13))}
.sb-w{display:block;width:26px;height:10px;background:rgba(245,244,241,.16);opacity:0;transition:opacity 320ms var(--ease)}
.sb-s{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label);
  border:1px solid var(--rule);padding:6px 9px;justify-self:start;transition:color 260ms var(--ease),border-color 260ms var(--ease)}
.sb-s.is-on{color:var(--rust);border-color:rgba(113,134,255,.55)}
.sb-s.is-off{color:#4E4D49}
.sb-f{display:flex;align-items:baseline;gap:12px;margin-top:auto;padding-top:14px}
.sb-f .mv-big{margin-top:0}

/* B. the quotation */
.mv--quote{display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,16vw,200px);gap:clamp(20px,2.6vw,38px)}
.qt-l{display:flex;flex-direction:column;gap:2px}
.qt-l > .mv-lab{margin-bottom:14px}
.qt-r{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:9px 0;
  border-bottom:1px solid rgba(46,49,55,.55);font-size:15px;color:var(--body);opacity:0}
.qt-n{font:500 14px/1 var(--mono);color:var(--paper);font-variant-numeric:tabular-nums}
.qt-tot{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--rust);opacity:0;transition:opacity 200ms var(--ease)}
.qt-big{font:500 clamp(20px,2.4vw,30px)/1 var(--mono);color:var(--paper);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.qt-r-col{display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  border-left:1px solid var(--rule);padding-left:clamp(18px,2.2vw,28px)}
.qt-stamp{align-self:flex-start;font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--rust);border:1px solid rgba(113,134,255,.55);padding:8px 11px;opacity:0}

/* C. incentive map */
.mv--map{--base:0;display:flex;flex-direction:column;gap:10px}
.mp-svg{width:100%;flex:1;min-height:0;overflow:hidden}
.mp-grat{fill:none;stroke:rgba(245,244,241,.055);stroke-width:1;vector-effect:non-scaling-stroke;opacity:var(--base)}
.mp-c{fill:#23262B;stroke:#34373D;stroke-width:.8;vector-effect:non-scaling-stroke;opacity:var(--base)}
.mp-fill{fill:rgba(113,134,255,.5);stroke:none;opacity:0}
.mp-line{fill:none;stroke:#97A6FF;stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;opacity:0}
.mp-sweep{stroke:rgba(113,134,255,.55);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.mp-t{fill:var(--paper);font:500 13px var(--mono);letter-spacing:.08em;opacity:0;
  paint-order:stroke;stroke:#191B1F;stroke-width:3.5px}
.mp-count{display:flex;align-items:baseline;gap:12px}
.mp-n{font:500 clamp(24px,3vw,40px)/1 var(--mono);color:var(--paper);font-variant-numeric:tabular-nums}

/* D. chain of title */
.mv--rts{display:flex;flex-direction:column}
.rt-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.rt-axis{display:flex;gap:clamp(34px,8vw,110px);color:#5E626B}
.rt-body{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.rt-r{display:grid;grid-template-columns:clamp(112px,13.5vw,168px) minmax(0,1fr) 132px;gap:18px;
  align-items:center;padding:9px 0;opacity:0;will-change:opacity}
.rt-nm{font-size:15px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-tr{position:relative;display:block;height:12px;background:rgba(245,244,241,.05)}
.rt-bar{position:absolute;top:0;bottom:0;overflow:hidden}
.rt-fill{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:rgba(245,244,241,.22);transition:background 340ms var(--ease)}
.rt-bar.is-warn .rt-fill{background:rgba(113,134,255,.55)}
.rt-bar.is-on .rt-fill{background:var(--rust)}
.rt-bar.is-dead .rt-fill{background:rgba(245,244,241,.08)}
.rt-st{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label);
  justify-self:start;transition:color 260ms var(--ease)}
.rt-st.is-warn{color:#97A6FF}
.rt-st.is-on{color:var(--rust)}
.rt-st.is-off{color:#4E4D49}
.rt-nowwrap{position:absolute;top:0;bottom:0;left:calc(clamp(112px,13.5vw,168px) + 18px);right:150px;pointer-events:none}
.rt-now{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--rust);opacity:0;
  transition:opacity 300ms var(--ease)}
.rt-now-t{position:absolute;top:-2px;left:7px;font:400 9px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--rust)}
.rt-f{display:flex;align-items:baseline;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
.rt-f .mv-big{margin-top:0}
.rt-f .mv-lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* E. one record, every role */
.mv--role{display:flex;flex-direction:column}
.rl-tabs{position:relative;display:flex;gap:clamp(18px,2.6vw,36px);padding-bottom:13px;
  border-bottom:1px solid var(--rule)}
.rl-tab{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#5E626B;
  transition:color 320ms var(--ease)}
.rl-tab.is-on{color:var(--paper)}
.rl-line{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--rust);
  transition:transform 620ms cubic-bezier(.16,1,.3,1),width 620ms cubic-bezier(.16,1,.3,1)}
.rl-h,.rl-r{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:16px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(46,49,55,.6)}
.rl-h{padding-top:15px;border-bottom-color:var(--rule)}
.rl-r{opacity:0}
.rl-t{font-size:15px;color:var(--paper)}
.rl-v{font:500 13px/1 var(--mono);color:var(--body);font-variant-numeric:tabular-nums;
  will-change:transform,opacity}
.rl-note{display:flex;align-items:baseline;gap:12px;margin-top:auto;padding-top:15px}
.rl-note-t{font-size:15px;color:var(--body)}

/* F. Composer */
.mv--cmp{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.cm-bar{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--rule);
  background:rgba(245,244,241,.025);padding:12px 15px}
.cm-bar .mv-lab{flex:none;color:var(--rust);padding-top:3px}
.cm-in{display:flex;align-items:flex-start;gap:3px;min-width:0;font-size:15px;line-height:1.35;color:var(--paper)}
.cm-txt{text-wrap:pretty}
.cm-car{flex:none;width:7px;height:15px;margin-top:2px;background:var(--rust);animation:caret 1.05s steps(1) infinite}
.cm-out{flex:1;min-height:0;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,2.4vw,34px)}
.cm-fields{display:flex;flex-direction:column;min-width:0}
.cm-fields > .mv-lab{margin-bottom:7px}
.cm-f{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:5px 0;
  border-bottom:1px solid rgba(46,49,55,.6);font-size:15px;color:var(--body);opacity:0;will-change:transform,opacity}
.cm-ty{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none}
.cm-right{display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  border-left:1px solid var(--rule);padding-left:clamp(18px,2.2vw,28px)}
.cm-flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cm-s{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label);
  border:1px solid var(--rule);padding:7px 9px;opacity:0;transition:color 260ms var(--ease),border-color 260ms var(--ease)}
.cm-s.is-on{color:var(--rust);border-color:rgba(113,134,255,.55)}
.cm-rule{opacity:0}
.cm-rt{font-size:15px;line-height:1.45;color:var(--paper);margin-top:9px;max-width:32ch}
.cm-live{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font:400 10px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--rust);opacity:0}
.cm-live::before{content:"";width:6px;height:6px;background:var(--rust);animation:pulse 2.8s var(--ease) infinite}
.cm-ft{display:flex;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid var(--rule)}
.cm-ft .mv-big{margin-top:0}
.cm-ft .mv-lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:1180px) and (min-width:861px){
  .mvs{height:clamp(430px,55vh,478px)}
  .cm-f{padding:4px 0}
  .cm-rt{font-size:14px;margin-top:7px}
  .cm-live{margin-top:9px}
  .cm-ft{padding-top:9px}
  .cm-flow{margin-top:8px}
  #look .stage-pin.is-scrub{min-height:135vh}
  .cm-out{gap:20px}
  .rt-r{grid-template-columns:clamp(104px,16vw,150px) minmax(0,1fr) 116px;gap:14px}
  .rt-nowwrap{right:130px}
}
@media (max-width:860px){
  .mvs{height:clamp(404px,56vh,440px)}
  #look .stage-pin.is-scrub{min-height:145vh}
  .stage-stick{top:max(56px,calc(50vh - 250px))}
  .sb-h,.sb-r,.rl-h,.rl-r{padding:8px 0}
  .rl-h{padding-top:12px}
  .sb-h,.sb-r{grid-template-columns:minmax(0,1fr) 104px;row-gap:4px}
  .sb-t,.sb-w,.sb-h span:nth-child(1),.sb-h span:nth-child(3){display:none}
  .mv--quote{grid-template-columns:1fr}
  .qt-r{padding:6px 0}
  .qt-l > .mv-lab{margin-bottom:10px}
  .qt-tot{margin-top:10px;padding-top:10px}
  .mv--quote{gap:14px}
  .qt-r-col{flex-direction:row;flex-wrap:wrap;gap:12px;border-left:0;padding-left:0;
    border-top:1px solid var(--rule);padding-top:12px}
  .qt-r-col > div{flex:1 1 40%}
  .mp-t{font-size:15px}
  .rt-r{grid-template-columns:clamp(96px,30vw,140px) minmax(0,1fr);gap:14px}
  .rt-st{display:none}
  .rt-nowwrap{right:0;left:calc(clamp(96px,30vw,140px) + 14px)}
  .rt-axis span:nth-child(2){display:none}
  .rl-h,.rl-r{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:10px}
  .rl-h > :nth-child(4),.rl-r > :nth-child(4){display:none}
  .rl-tabs{gap:14px}
  .cm-out{grid-template-columns:1fr;gap:14px}
  .cm-right{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:14px}
  .cm-in{font-size:13px}
  .cm-f{padding:6px 0}
}
@media (prefers-reduced-motion:reduce){
  #look .stage-pin.is-scrub{min-height:0}
  .stage-stick{position:static}
  .cross-kicker,.cross-out,.kw{opacity:1;transform:none;transition:none}
  .kw > span{background-size:100% clamp(3px,.45vw,7px);transition:none}
  .mv-nav{display:none}
}


@media (max-width:520px){
  .mvs{height:clamp(392px,64vh,436px)}
  #look .stage-pin.is-scrub{min-height:0}
  .stage-stick{position:static}
  .mv-cap{font-size:13px}
  .cm-bar{flex-direction:column;gap:7px;padding:11px 13px}
  .cm-ft .mv-lab,.rt-f .mv-lab{white-space:normal;line-height:1.5}
  .rl-h,.rl-r{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px}
  .rl-h > :nth-child(3),.rl-r > :nth-child(3){display:none}
  .rt-axis{display:none}
}


/* keep the map footer on one line at tablet/phone widths */
@media (max-width:1180px){
  .mp-count{gap:10px;min-width:0}
  .mp-count .mv-lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (max-width:860px){
  .mv--map{gap:8px}
  .mp-n{font-size:26px}
}