/* Homepage motion add-ons. Two pieces, both switched on by motion.js once it has what it needs,
   so with scripts off (or data.js missing) the page is exactly the page it was.
   1. The revenue dollar: the intro frame opens on its photograph, then plays the published roofing sample.
   2. Routes: a marker travels the numbered steps in "How the engagement works". */

/* ---------- 1. the revenue dollar, inside the intro frame ---------- */
#valoris-cinematic .vc-stackscene{display:none}
#valoris-cinematic .vc-ss-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#valoris-cinematic.vc-stack-on{--vc-frame-h:clamp(500px,calc(100svh - var(--nav-height) - 96px),680px);--vc-frame-top:max(calc(var(--nav-height) + 12px),calc(var(--nav-height) + (100svh - var(--nav-height) - var(--vc-frame-h)) / 2))}
#valoris-cinematic.vc-stack-on .vc-intro{overflow:clip}
#valoris-cinematic.vc-stack-on .vc-intro-grid{align-items:start}
#valoris-cinematic.vc-stack-on .vc-stack-track{position:relative;min-width:0;height:max(2300px,340svh)}
#valoris-cinematic.vc-stack-on .vc-intro-statement,
#valoris-cinematic.vc-stack-on .vc-stack-track .vc-planning-visual{position:sticky;top:var(--vc-frame-top)}
#valoris-cinematic.vc-stack-on .vc-intro-statement{min-height:var(--vc-frame-h);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#valoris-cinematic.vc-stack-on .vc-stack-track .vc-planning-visual{aspect-ratio:auto;height:var(--vc-frame-h)}

#valoris-cinematic.vc-stack-on .vc-stackscene{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:14px;padding:26px 28px 22px;opacity:0;background:linear-gradient(90deg,#cdbb910d 1px,transparent 1px) 0 0/12.5% 100%,#0b1b27f2;will-change:opacity}
#valoris-cinematic .vc-ss-head{display:flex;justify-content:space-between;gap:14px;flex:none}
#valoris-cinematic .vc-ss-head span{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--vc-gold)}
#valoris-cinematic .vc-ss-head span:last-child{color:#93a1a3;text-align:right}
#valoris-cinematic .vc-ss-head b{font-weight:inherit;text-transform:uppercase}
#valoris-cinematic .vc-ss-cap{display:none;flex:none;font-size:15px;line-height:1.5;color:#c8d0ce;min-height:3em;transition:opacity .2s}
#valoris-cinematic .vc-ss-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px}
#valoris-cinematic .vc-ss-stackcol{position:relative;flex:1 1 0;min-height:170px;min-width:0}
#valoris-cinematic .vc-ss-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#valoris-cinematic .vc-ss-lab{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:2px;padding-left:26px;white-space:nowrap;opacity:0;will-change:transform,opacity}
#valoris-cinematic .vc-ss-lab>span{font-size:11px;line-height:12px;letter-spacing:1.2px;text-transform:uppercase;color:#aebbb9}
#valoris-cinematic .vc-ss-lab>div{display:flex;align-items:baseline;gap:7px}
#valoris-cinematic .vc-ss-lab var{font:400 19px/1 Georgia,serif;font-style:normal;font-variant-numeric:tabular-nums;color:#ede9df;transition:color .25s,text-shadow .25s}
#valoris-cinematic .vc-ss-lab small{font-size:11px;line-height:1;font-variant-numeric:tabular-nums;color:#93a1a3}
#valoris-cinematic .vc-ss-lab:last-of-type var,#valoris-cinematic .vc-ss-lab:last-of-type small{color:var(--vc-gold)}
#valoris-cinematic .vc-ss-lab.is-hot var{color:#f4e9c9;text-shadow:0 0 16px #cdbb9177}
#valoris-cinematic .vc-ss-list{flex:none;min-width:0}
#valoris-cinematic .vc-ss-list ol{list-style:none;margin:0;padding:0}
#valoris-cinematic .vc-ss-pips{display:none;align-items:center;gap:5px;margin-bottom:9px}
#valoris-cinematic .vc-ss-pips span{margin-right:auto;font-size:11px;line-height:1;letter-spacing:1.4px;text-transform:uppercase;color:#93a1a3}
#valoris-cinematic .vc-ss-pips i{width:18px;height:2px;background:#cdbb9133;transition:background .3s,box-shadow .3s}
#valoris-cinematic .vc-ss-pips i.is-on{background:var(--vc-gold)}
#valoris-cinematic .vc-ss-pips i.is-now{background:#f4e9c9;box-shadow:0 0 8px #cdbb91cc}
#valoris-cinematic .vc-ss-list li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0 6px;border-top:1px solid #cdbb9126;font-size:13px;line-height:1.45;color:#d2dcd8;opacity:.32;transition:opacity .35s;position:relative}
#valoris-cinematic .vc-ss-list li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:#ddceac;transform-origin:0 50%;transform:scaleX(var(--m,0))}
#valoris-cinematic .vc-ss-list li.is-on{opacity:1}
#valoris-cinematic .vc-ss-list li span{min-width:0}
#valoris-cinematic .vc-ss-list li b{font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--vc-gold)}
#valoris-cinematic .vc-ss-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-top:1px solid #50616a;margin-top:6px;padding-top:12px}
#valoris-cinematic .vc-ss-total span{font-size:13px;color:#c8d0ce}
#valoris-cinematic .vc-ss-total var{font:400 clamp(28px,2.6vw,44px)/1.1 Georgia,serif;font-style:normal;font-variant-numeric:tabular-nums;color:#ddceac;white-space:nowrap;transition:color .3s,text-shadow .3s}
#valoris-cinematic .vc-ss-total var.is-live{color:#f4e9c9;text-shadow:0 0 22px #cdbb9166}
#valoris-cinematic .vc-ss-total var b{font-weight:400}
#valoris-cinematic .vc-ss-note{flex:none;font-size:12px;line-height:1.6;color:#93a1a3;font-style:italic}

/* a roomy frame puts the stack and the file side by side */
#valoris-cinematic .vc-stackscene.is-wide{padding:32px 36px 26px;gap:18px}
#valoris-cinematic .vc-stackscene.is-wide .vc-ss-body{flex-direction:row;gap:4%;align-items:stretch}
#valoris-cinematic .vc-stackscene.is-wide .vc-ss-stackcol{flex:0 0 50%}
#valoris-cinematic .vc-stackscene.is-wide .vc-ss-list{flex:1 1 0;display:flex;flex-direction:column;justify-content:center}
#valoris-cinematic .vc-stackscene.is-wide .vc-ss-list li{padding:11px 0 9px;font-size:14px}
#valoris-cinematic .vc-stackscene.is-wide .vc-ss-total{flex-direction:column;align-items:flex-start;gap:4px;margin-top:10px;padding-top:18px}

/* a phone frame shows one move at a time, with a line saying what is happening */
#valoris-cinematic .vc-stackscene.is-compact{padding:20px 20px 16px;gap:12px}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-cap{display:block}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-head span{font-size:10.5px;letter-spacing:1px}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-head b{display:none}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-note{font-size:11px;line-height:1.55}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-list li{display:none;opacity:1}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-pips{display:flex}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-list li.is-cur{display:flex;min-height:3.5em;animation:vc-ss-row .42s cubic-bezier(.2,.7,.2,1) both}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-list li:not(.is-on) b{color:#93a1a3}
#valoris-cinematic .vc-stackscene.is-compact .vc-ss-total var{font-size:30px}

@media(max-width:900px){
  #valoris-cinematic.vc-stack-on{--vc-frame-h:clamp(470px,calc(100svh - var(--nav-height) - 32px),640px);--vc-frame-top:calc(var(--nav-height) + 16px)}
  #valoris-cinematic.vc-stack-on .vc-intro-statement{position:static;min-height:0;display:block}
  #valoris-cinematic.vc-stack-on .vc-stack-track{height:max(1900px,300svh)}
}
#valoris-cinematic.vc-stack-on.vc-reduced-motion .vc-stack-track{height:auto}
#valoris-cinematic.vc-stack-on.vc-reduced-motion .vc-intro-statement,
#valoris-cinematic.vc-stack-on.vc-reduced-motion .vc-stack-track .vc-planning-visual{position:relative;top:0}

/* ---------- 2. routes through the process steps ---------- */
#valoris-cinematic .vc-route{position:relative;width:100%}
#valoris-cinematic .vc-route-svg{display:none}
#valoris-cinematic.vc-route-on .vc-route-svg{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
#valoris-cinematic .vc-route-track{fill:none;stroke:#cdbb9147;stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
#valoris-cinematic .vc-route-run{fill:none;stroke:var(--vc-gold);stroke-width:2;stroke-linecap:round}
#valoris-cinematic .vc-route-ring{fill:#09131a;stroke:var(--vc-gold);stroke-width:1.5}
#valoris-cinematic .vc-route-dot{fill:#ede9df}
#valoris-cinematic.vc-route-on .vc-route .vc-steps{position:relative;z-index:1}
#valoris-cinematic.vc-route-on .vc-route .vc-steps li{grid-template-columns:66px 1fr;gap:14px;align-items:start}
#valoris-cinematic.vc-route-on .vc-route .vc-steps li>span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;background:#09131a;border:1px solid #cdbb9166;transition:background .35s,color .35s,border-color .35s}
#valoris-cinematic.vc-route-on .vc-route .vc-steps li:nth-child(even)>span{transform:translateX(20px)}
#valoris-cinematic.vc-route-on .vc-route .vc-steps li>div{opacity:.45;transition:opacity .5s ease}
#valoris-cinematic.vc-route-on .vc-route .vc-steps li.is-on>span{background:var(--vc-gold);color:#122630;border-color:var(--vc-gold)}
#valoris-cinematic.vc-route-on .vc-route .vc-steps li.is-on>div{opacity:1}
@media(max-width:540px){
  #valoris-cinematic.vc-route-on .vc-route .vc-steps li{grid-template-columns:58px 1fr;gap:10px}
  #valoris-cinematic.vc-route-on .vc-route .vc-steps li>span{width:40px;height:40px;font-size:14px}
  #valoris-cinematic.vc-route-on .vc-route .vc-steps li:nth-child(even)>span{transform:translateX(14px)}
}
@keyframes vc-ss-row{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #valoris-cinematic .vc-ss-lab var,#valoris-cinematic .vc-ss-list li,#valoris-cinematic .vc-ss-cap,#valoris-cinematic .vc-ss-pips i,#valoris-cinematic .vc-ss-total var{transition:none}
  #valoris-cinematic .vc-stackscene.is-compact .vc-ss-list li.is-cur{animation:none}
}