/* An isometric office drawn in SVG and filmed by a spring camera, pinned while the page scrolls through its stops.
   The drawing, the people and the stops are in office-map.js; change them there. Needs ../base/base.css. */

/* ---------- the ladder: one heading at a time, and everything else inside the map. The camera starts behind one
   person, her call on her monitor; steps back to her and the two beside her, an arrow on each; the department; the
   manager's office lit in it; the whole company. The stage stays still while the page scrolls through ten stops. ---------- */
.sc-corsa{position:relative;height:calc(100vh - var(--barra-h) + 400vh);height:calc(100svh - var(--barra-h) + 400svh)}
.sc-palco{position:sticky;top:var(--barra-h);height:calc(100vh - var(--barra-h));height:calc(100svh - var(--barra-h));min-height:540px;overflow:hidden;isolation:isolate}
.sc-palco::before{content:"";position:absolute;inset:0 0 auto;z-index:1;height:72px;background:linear-gradient(var(--fondo),oklch(12.5% 0.038 262/0));pointer-events:none}
.sc-palco.largo::before{z-index:4}   /* under the hero, the glow of her screen fades into the page instead of stopping on a line */
.sc-mappa{position:absolute;inset:0;width:100%;height:100%}
/* the camera's light: what it looks at stays lit, the rest of the office goes dark (the script moves it) */
.sc-spot{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.sc-velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--fondo) 0,var(--fondo) calc(var(--vx,420px) - 60px),oklch(12.5% 0.038 262/0) calc(var(--vx,420px) + 40px))}
.sc-sopra{position:absolute;inset:0;z-index:2;pointer-events:none}
.sc-testo{position:absolute;z-index:3;left:max(var(--gutter),calc((100% - var(--largo)) / 2));top:50%;transform:translateY(-50%);width:min(400px,31vw)}
.sc-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:340px}
.sc-nav button{display:block;padding:0 0 6px;text-align:left;font-size:calc(15 * var(--px));font-weight:560;color:var(--ink-3);transition:color .25s var(--e-ui)}
/* each step's bar fills with the scroll (--f, set by the script): the steps done stay full, the next is empty */
.sc-nav button::before{content:"";display:block;height:4px;margin-bottom:10px;border-radius:4px;background:linear-gradient(90deg,var(--blu-t) calc(var(--f,0) * 100%),var(--riga-2) 0)}
.sc-nav button.fatto{color:var(--ink-2)}
.sc-nav button.on{color:var(--ink)}
.sc-n{margin-right:.4em;opacity:.55}
@media (hover:hover){.sc-nav button:not(.on):hover{color:var(--ink-2)}}
.sc-passi{display:grid;margin-top:30px}
.sc-passo{grid-area:1/1;align-self:start;opacity:0;transform:translateY(16px);transition:opacity .3s var(--e-ui),transform .6s var(--e-esce);pointer-events:none}
.sc-passo.on{opacity:1;transform:none;transition:opacity .45s var(--e-ui) .15s,transform .8s var(--e-molla) .15s}
/* stop zero is not a step: no tabs yet, and its title says what it is */
.sc-nav{transition:opacity .4s var(--e-ui)}
.sc-palco.zero .sc-nav{opacity:0;pointer-events:none}
.sc-h{font-family:var(--serif);font-size:var(--t-h2);font-weight:400;line-height:.96;letter-spacing:-.022em;text-wrap:balance}
.sc-h em{display:block;font-style:italic;color:var(--blu-t)}
/* under each word, two or three points, scannable: an icon each, a number in green where it helps. Where a list
   follows the stops, the point of the stop on screen is lit and the others wait */
.sc-punti{list-style:none;padding:0;margin-top:24px;display:grid;gap:14px;max-width:34ch}
.sc-punti .sc-p{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:14px;margin:0;max-width:none;font-size:var(--t-corpo);line-height:1.35;color:var(--ink);transition:color .35s var(--e-ui)}
.sc-punti .sc-p:not(.on){color:var(--ink-3)}
.sc-punti b{font-weight:650;color:var(--ink)}
.sc-punti b.su{color:var(--ok)}.sc-punti b.giu{color:var(--att)}
.sc-punti .sc-p:not(.on) b{color:inherit}
.sc-ico{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 6px 10px oklch(0% 0 0/.45));transition:opacity .35s var(--e-ui),transform .6s var(--e-molla),filter .35s var(--e-ui)}
.sc-punti .sc-p:not(.on) .sc-ico{opacity:.55;transform:scale(.82);filter:grayscale(1) drop-shadow(0 4px 6px oklch(0% 0 0/.3))}
.sc-p{margin-top:18px;max-width:28ch;font-size:var(--t-lista);line-height:1.4;letter-spacing:-.01em;color:var(--ink-2);text-wrap:pretty}

/* the map: an isometric office drawn in SVG by the script below; people sit with their back to us, facing their screen */
.sc-mappa polygon{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sc-suolo .t{fill:oklch(15.5% 0.039 262)}.sc-suolo .l{fill:oklch(11% 0.038 262)}.sc-suolo .r{fill:oklch(13% 0.038 262)}
.sc-rep .t{fill:oklch(19.5% 0.041 262);stroke:oklch(96% .005 262/.1);stroke-width:1;transition:fill .6s var(--e-ui),stroke .6s var(--e-ui)}
.sc-rep .l{fill:oklch(14% 0.039 262)}.sc-rep .r{fill:oklch(16.5% 0.040 262)}
.sc-rep.acceso .t{fill:oklch(29% .09 258);stroke:oklch(73% .14 252/.85)}
.sc-tappeto{fill:oklch(23.5% .018 280)}
.sc-banco .t{fill:oklch(37% 0.044 262)}.sc-banco .l{fill:oklch(26% 0.042 262)}.sc-banco .r{fill:oklch(31% 0.042 262)}
.sc-schermo .t{fill:oklch(30% 0.042 262)}.sc-schermo .l{fill:oklch(14% 0.040 262)}.sc-schermo .r{fill:oklch(20% 0.042 262)}
.sc-vetrino{fill:oklch(22% .03 258)}
.sc-lez-f{fill:oklch(44% .13 258)}.sc-lez-t{fill:oklch(92% .02 258)}.sc-lez-r{fill:oklch(80% .05 258/.7)}
.sc-cru-f{fill:oklch(19% .02 258)}.sc-cru-b{fill:oklch(73% .14 252/.8)}
.sc-nuovo{fill:oklch(62% .19 258);opacity:0;transition:opacity .5s var(--e-ui)}
.sc-vetro{fill:oklch(85% .04 230/.06);stroke:oklch(88% .04 230/.32);stroke-width:1}
.sc-copia .t{fill:oklch(80% .006 262)}.sc-copia .l{fill:oklch(58% 0.038 262)}.sc-copia .r{fill:oklch(67% .006 262)}
.sc-foglio{fill:oklch(98% 0 0)}
.sc-vaso .t{fill:oklch(48% .05 50)}.sc-vaso .l{fill:oklch(34% .04 50)}.sc-vaso .r{fill:oklch(41% .04 50)}
.sc-foglie{fill:oklch(50% .1 150)}
.sc-fig{transition:opacity .5s var(--e-ui)}
/* written on the floor, like the signs painted in an office */
.sc-scritta{font-family:var(--font);font-weight:720;letter-spacing:.06em;fill:oklch(96% .005 262/.5);transition:fill .5s var(--e-ui)}
.sc-scritta.piccola{font-weight:650;fill:oklch(96% .005 262/.42)}
.sc-scritta.acceso{fill:oklch(88% .08 252)}
.sc-bisogno{font-family:var(--font);font-weight:720;letter-spacing:.06em;fill:var(--blu-t);opacity:0;transition:opacity .4s var(--e-ui)}
.sc-bisogno.on{opacity:1}
/* level 2: how each person is doing, above their head, and flying into the manager's screen */
.sc-stato{opacity:0;stroke:oklch(12.5% 0.038 262);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:opacity .3s var(--e-ui)}
.sc-stato.ok,.sc-dato.ok{fill:var(--ok)}.sc-stato.aiuto,.sc-dato.aiuto{fill:var(--att)}.sc-stato.va,.sc-dato.va{fill:var(--blu-t)}
.sc-dato{transition:transform .95s cubic-bezier(.5,0,.3,1),opacity .95s ease-in}
.sc-luce{fill:url(#sc-luce);opacity:0;transition:opacity .6s var(--e-ui)}
.sc-palco[data-f="3"] .sc-luce{opacity:1}
/* level 3: something new, a wave across the company */
.sc-onda{fill:none;stroke:var(--blu-t);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.sc-onda.va{animation:sc-onda 1.6s var(--e-esce)}
@keyframes sc-onda{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(26)}}

/* close up: her call plays on her monitor (the script lays the video on the monitor's face), and she is drawn again
   in front of it */
.sc-vicino{position:absolute;inset:0;pointer-events:none}
.sc-tv{position:absolute;left:0;top:0;width:312px;height:192px;object-fit:cover;transform-origin:0 0;background:#000}
.sc-davanti{position:absolute;inset:0;width:100%;height:100%}
/* what the camera points at: an arrow with a line of text, and a label over each person */
.sc-etichette{position:absolute;inset:0}
.sc-freccia,.sc-chip{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .35s var(--e-ui)}
.sc-freccia.on,.sc-chip.on{opacity:1}
.sc-chip.on.giu{opacity:.28}
.sc-freccia-in{position:absolute;left:0;bottom:0;width:max-content;display:grid;justify-items:center;transform:translateX(-50%);transition:transform .6s var(--e-molla)}
.sc-freccia.sola .sc-freccia-in{transform:translate(-50%,calc(-1 * var(--lift,40px)))}
.sc-freccia-t{max-width:min(420px,calc(100vw - 28px));padding:10px 16px;border-radius:14px;background:oklch(22% 0.041 262/.94);box-shadow:0 0 0 1.5px oklch(73% .14 252/.85),0 18px 40px -14px oklch(0% 0 0/.8);font-size:calc(16.5 * var(--px));font-weight:620;line-height:1.3;letter-spacing:-.01em;text-align:center;text-wrap:balance;transform:translateX(var(--dx,0));transition:opacity .18s var(--e-ui)}
.sc-freccia-t.cambia{opacity:0}
.sc-freccia i{position:relative;width:2px;height:38px;margin-bottom:6px;background:oklch(73% .14 252/.85);transition:height .5s var(--e-molla),opacity .3s var(--e-ui)}
.sc-freccia i::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;border-right:2px solid oklch(73% .14 252);border-bottom:2px solid oklch(73% .14 252);transform:translateX(-50%) rotate(45deg)}
.sc-freccia.sola i{height:0;opacity:0}
.sc-chip span{position:absolute;left:0;bottom:6px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:oklch(21% 0.040 262/.94);box-shadow:0 0 0 1px var(--riga-2);font-size:calc(12.5 * var(--px));font-weight:600;white-space:nowrap}
.sc-chip .e,.sc-etichette[data-m="esito"] .sc-chip .c{display:none}
.sc-etichette[data-m="esito"] .sc-chip .e{display:block}
.sc-chip.ok .e{color:var(--ok)}.sc-chip.va .e{color:var(--blu-t)}.sc-chip.aiuto .e{color:var(--att);box-shadow:0 0 0 1.5px var(--att)}
.sc-filo{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-filo path{fill:none;stroke:var(--att);stroke-width:2;stroke-dasharray:5 6;opacity:0;transition:opacity .4s var(--e-ui)}
.sc-etichette.filo .sc-filo path{opacity:.9;animation:sc-filo 1s linear infinite}
@keyframes sc-filo{to{stroke-dashoffset:-22}}
.sc-palco:not(.largo) .sc-freccia-t{padding:8px 12px;font-size:calc(14.5 * var(--px))}
.sc-palco:not(.largo) .sc-chip span{padding:4px 8px;font-size:calc(11 * var(--px))}
/* the stage comes in as a whole once it fills most of the screen, and leaves the same way (the script decides) */
.sc-palco :is(.sc-mappa,.sc-vicino,.sc-sopra,.sc-testo){transition:opacity .7s var(--e-ui)}
.sc-palco:not(.dentro) :is(.sc-mappa,.sc-vicino,.sc-sopra,.sc-testo){opacity:0}

/* the layout follows the script's choice (.largo: text beside the map; otherwise text on top), so a phone held
   sideways gets the side layout; .basso is a short screen */
.sc-palco:not(.largo) .sc-velo{background:linear-gradient(180deg,var(--fondo) 0,var(--fondo) calc(var(--vy,200px) - 16px),oklch(12.5% 0.038 262/0) calc(var(--vy,200px) + 30px))}
.sc-palco:not(.largo) .sc-testo{inset:0 0 auto;transform:none;width:auto;padding:18px var(--gutter) 0}
.sc-palco:not(.largo) .sc-nav{max-width:none}
.sc-palco:not(.largo) .sc-passi,.sc-palco.basso .sc-passi{margin-top:16px}
.sc-palco:not(.largo) .sc-punti,.sc-palco.basso .sc-punti{margin-top:12px;gap:8px;max-width:none}
.sc-palco:not(.largo) .sc-punti .sc-p,.sc-palco.basso .sc-punti .sc-p{grid-area:1/1;grid-template-columns:40px minmax(0,1fr);gap:12px;font-size:calc(15.5 * var(--px));opacity:0;transform:translateY(8px);transition:opacity .3s var(--e-ui),transform .6s var(--e-molla)}
.sc-palco:not(.largo) .sc-punti .sc-p.on,.sc-palco.basso .sc-punti .sc-p.on{opacity:1;transform:none}
.sc-palco:not(.largo) .sc-ico,.sc-palco.basso .sc-ico{width:40px;height:40px}
.sc-palco:not(.largo) .sc-h,.sc-palco.basso .sc-h{font-size:clamp(28px,7.4vw,36px)}
.sc-palco:not(.largo) .sc-p,.sc-palco.basso .sc-p{margin-top:8px;font-size:calc(16 * var(--px));max-width:36ch}
.sc-palco.basso .sc-testo{width:min(300px,34vw)}
@media (max-height:560px){.sc-palco{min-height:0}}
@media (max-width:899px){
  .sc-nav button{font-size:calc(14 * var(--px))}
  .sc-nav button::before{margin-bottom:8px}
}

/* ---------- by day (the section is .giorno): a white office on a cool floor, the screens stay dark, the labels stay
   navy pills (their container is .notte); what the camera leaves out fades to white instead of to night ---------- */
.giorno .sc-suolo .t{fill:oklch(94.5% .01 255)}.giorno .sc-suolo .l{fill:oklch(84% .018 258)}.giorno .sc-suolo .r{fill:oklch(89% .014 256)}
.giorno .sc-rep .t{fill:oklch(99.2% .003 255);stroke:oklch(28% .04 262/.12)}
.giorno .sc-rep .l{fill:oklch(88% .016 258)}.giorno .sc-rep .r{fill:oklch(92.5% .012 256)}
.giorno .sc-rep.acceso .t{fill:oklch(95% .035 258);stroke:oklch(55% .2 262/.55)}
.giorno .sc-tappeto{fill:oklch(94% .02 268)}
.giorno .sc-banco .t{fill:oklch(100% 0 0)}.giorno .sc-banco .l{fill:oklch(83% .014 258)}.giorno .sc-banco .r{fill:oklch(90% .01 256)}
.giorno .sc-schermo .t{fill:oklch(46% .03 262)}.giorno .sc-schermo .l{fill:oklch(26% .04 262)}.giorno .sc-schermo .r{fill:oklch(34% .04 262)}
.giorno .sc-vetro{fill:oklch(72% .08 240/.1);stroke:oklch(58% .12 248/.4)}
.giorno .sc-copia .t{fill:oklch(97% .004 262)}.giorno .sc-copia .l{fill:oklch(78% .012 262)}.giorno .sc-copia .r{fill:oklch(87% .008 262)}
.giorno .sc-vaso .t{fill:oklch(72% .06 50)}.giorno .sc-vaso .l{fill:oklch(56% .06 50)}.giorno .sc-vaso .r{fill:oklch(64% .06 50)}
.giorno .sc-foglie{fill:oklch(64% .13 150)}
.giorno .sc-scritta{fill:oklch(28% .04 262/.4)}
.giorno .sc-scritta.piccola{fill:oklch(28% .04 262/.34)}
.giorno .sc-scritta.acceso{fill:var(--blu)}
.giorno .sc-stato{stroke:oklch(100% 0 0)}
.giorno .sc-ico{filter:drop-shadow(0 6px 10px oklch(30% .08 262/.22))}
.giorno .sc-punti .sc-p:not(.on) .sc-ico{filter:grayscale(1) drop-shadow(0 4px 6px oklch(30% .08 262/.15))}

/* ---------- playing by itself (.autoplay: no scroll track, as inside an answer that opens): a stage of its own height,
   the words smaller, the light fading into the window's own colour ---------- */
.sc-palco.autoplay{position:relative;top:auto;height:min(600px,66vh);min-height:440px;border-radius:20px;--fondo:var(--fondo-2)}
.sc-palco.autoplay .sc-testo{left:clamp(16px,2.4vw,32px);width:min(330px,34%)}
.sc-palco.autoplay .sc-h{font-size:var(--t-h3)}
.sc-palco.autoplay .sc-punti .sc-p{font-size:calc(15.5 * var(--px))}
.sc-palco.autoplay .sc-ico{width:40px;height:40px}
.sc-palco.autoplay:not(.largo) .sc-testo{left:0;width:auto}
.sc-palco.autoplay:not(.largo) .sc-h{font-size:clamp(24px,6.4vw,30px)}