/* Interfacce ricostruite (dashboard desktop, telefono, elenco offerte) con DATI DI ESEMPIO.
   Tutto in unità "em" = 1% della larghezza del dispositivo (container query), così si scala e si può zoomare senza perdere nitidezza.
   Gli stati iniziali sono quelli finali: senza animazioni la UI è completa. Le animazioni guidate dallo scorrimento stanno in fondo. */

@property --n { syntax: "<integer>"; inherits: true; initial-value: 0; }

.laptop__screen, .phone__screen, .panel3d__screen { container-type: inline-size; }

.ui {
  position: relative; width: 100%; overflow: hidden; color: #fff; font-family: var(--font-sans); font-size: 1cqw; line-height: 1.3;
  background: radial-gradient(120% 100% at 85% 0%, #0d3a46 0%, transparent 55%), linear-gradient(140deg, #07131f 0%, #0b2233 55%, #0e2a3d 100%);
  text-align: left;
}
.ui * { box-sizing: border-box; }
.ui h4, .ui h5, .ui p { margin: 0; }
.ui .icon { fill: currentColor; }

.cnt { --n: var(--t, 0); counter-reset: cn var(--n); font-variant-numeric: tabular-nums; }
.cnt::after { content: counter(cn); }

.ui__label { font-size: 1.05em; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .62); font-weight: 650; }
.ui__icon { position: relative; display: inline-grid; place-items: center; width: 3.4em; height: 3.4em; color: rgb(255 255 255 / .9); }
.ui__dot { position: absolute; top: .55em; right: .6em; width: .8em; height: .8em; border-radius: 50%; background: #5fd8e6; }
.ui__user { display: inline-flex; align-items: center; gap: .9em; font-weight: 650; font-size: 1.15em; }
.ui__user i { font-style: normal; display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: linear-gradient(140deg, #5fd8e6, #2a7fd0); font-size: .85em; }
.ui__user small { display: block; font-weight: 400; color: rgb(255 255 255 / .6); font-size: .82em; }

/* contatti */
.ui__contacts { display: flex; gap: 2em; }
.ct { display: grid; justify-items: center; gap: .15em; min-width: 5.4em; }
.ct i { font-style: normal; display: grid; place-items: center; width: 5.2em; height: 5.2em; border-radius: 50%; font: 700 1.9em var(--font-display); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, #fff 42%, var(--c)), var(--c) 62%); box-shadow: 0 0 0 .3em #0b1230, 0 0 0 .5em rgb(255 255 255 / .22); }
.ct b { font-size: 1.15em; margin-top: .45em; }
.ct small { font-size: .95em; color: rgb(255 255 255 / .58); }

/* saluto */
.ui__hello { position: relative; overflow: hidden; border-radius: 2.4em; padding: 1.9em 2.2em; background: linear-gradient(120deg, #0f8fa6, #0a6f8f 55%, #1263a8); box-shadow: 0 1.2em 3em -1.4em rgb(20 150 180 / .7), inset 0 .1em 0 rgb(255 255 255 / .3); }
.ui__hello::after { content: ""; position: absolute; right: -6em; bottom: -9em; width: 24em; height: 24em; border-radius: 50%; background: rgb(255 255 255 / .1); }
.ui__date { font-size: 1em; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: rgb(255 255 255 / .85); }
.ui__hello h4 { font: 700 3.4em var(--font-display); letter-spacing: -.03em; line-height: 1.1; margin: .1em 0 .25em; }
.ui__hello p { font-size: 1.25em; color: rgb(255 255 255 / .95); }
.ui__hello b { font-weight: 800; }
.ui__cta { display: flex; gap: 1em; margin-top: 1.1em; }
.b { padding: .85em 1.7em; border-radius: 99em; font-weight: 700; font-size: 1.2em; background: rgb(40 180 210 / .35); border: .1em solid rgb(255 255 255 / .45); }
.b--w { background: #fff; color: #07313a; border-color: #fff; }

/* card e task */
.ui__card { border-radius: 2.2em; padding: 1.5em 1.7em; background: rgb(30 38 80 / .72); border: .1em solid rgb(255 255 255 / .12); box-shadow: inset 0 .1em 0 rgb(255 255 255 / .1); }
.ui__card h5 { font: 700 1.7em var(--font-display); letter-spacing: -.02em; display: flex; align-items: center; gap: .6em; margin-bottom: .7em; }
.badge { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 99em; background: #0e8fb0; font: 700 .72em var(--font-sans); }
.alldone { display: none; font-style: normal; font: 650 .62em var(--font-sans); color: #7ee2a8; opacity: 0; }
.task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1em; padding: .8em 0; border-top: .1em solid rgb(255 255 255 / .08); }
.task:first-of-type { border-top: 0; }
.chk { position: relative; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; border: .2em solid #f4a31a; color: transparent; }
.chk .icon { width: 1.1em; height: 1.1em; }
.task strong { display: block; font-size: 1.4em; }
.task small { font-size: 1.08em; color: rgb(255 255 255 / .6); }
.open { padding: .6em 1.4em; border-radius: 1.2em; font-weight: 700; font-size: 1.15em; background: rgb(40 180 210 / .3); color: #8fe3ee; }

/* pipeline */
.pp { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7em; padding-top: 1.6em; }
.pp__c { display: grid; gap: .1em; justify-items: center; padding: .9em .3em; border-radius: 1.2em; background: rgb(255 255 255 / .07); text-align: center; }
.pp__c b { font: 700 2.1em var(--font-display); line-height: 1; }
.pp__c small { font-size: .88em; color: rgb(255 255 255 / .62); }
.pp__tok { position: absolute; top: .2em; left: calc(100% / 14); width: 1.7em; height: 1.7em; margin-left: -.85em; border-radius: 50%; background: #ffb454; box-shadow: 0 0 0 .5em rgb(255 180 84 / .25), 0 .6em 1.4em -.2em #ffb454; }

/* ---------- desktop ---------- */
.ui--desk { aspect-ratio: 2000 / 1057; display: grid; grid-template-columns: 15.6em minmax(0, 1fr); gap: 1.4em; padding: 1.1em; }
.ui__side { display: flex; flex-direction: column; gap: 1.1em; padding: 1.4em 1em; border-radius: 2em; background: rgb(28 38 82 / .8); border: .1em solid rgb(255 255 255 / .12); }
.ui__logo { font: 700 1.9em var(--font-display); letter-spacing: -.03em; padding: .1em .4em; }
.ui__newbtn { display: flex; align-items: center; justify-content: center; gap: .6em; padding: .85em 1em; border-radius: 99em; font-weight: 700; font-size: 1.25em; background: linear-gradient(#35c3d6, #0e8fb0); box-shadow: 0 .6em 1.4em -.4em rgb(40 180 210 / .7); }
.ui__nav { display: grid; gap: .3em; }
.navi { display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: 1.2em; font-size: 1.2em; color: rgb(255 255 255 / .9); }
.navi .icon { color: rgb(255 255 255 / .85); }
.navi.is-on { background: rgb(255 255 255 / .15); color: #7fe6f2; }
.ui__nav--sub { margin-top: auto; padding-top: 1em; border-top: .1em solid rgb(255 255 255 / .12); }
.ui__nav--sub .navi { font-size: 1.1em; color: rgb(255 255 255 / .75); }
.ui__main { display: grid; align-content: start; gap: 1.1em; min-width: 0; }
.ui__top { display: flex; align-items: center; gap: 1em; padding: .8em 1.2em; border-radius: 2.4em; background: rgb(28 38 82 / .72); border: .1em solid rgb(255 255 255 / .12); }
.ui__search { position: relative; flex: 1; max-width: 42em; display: flex; align-items: center; gap: .9em; padding: .9em 1.3em; border-radius: 99em; background: rgb(255 255 255 / .1); font-size: 1.2em; }
.ui__ph { color: rgb(255 255 255 / .55); white-space: nowrap; overflow: hidden; }
.ui__typed { position: absolute; left: 3.3em; top: 50%; translate: 0 -50%; display: none; }
.ui__results { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + .6em); padding: .8em 1em; border-radius: 1.4em; background: rgb(14 20 52 / .97); border: .1em solid rgb(255 255 255 / .18); display: none; }
.ui__results p { padding: .55em .4em; font-size: .95em; }
.ui__results b { display: inline-block; min-width: 6.4em; color: #7fe6f2; font-weight: 700; }
.ui__top > .ui__user { margin-left: auto; }
.ui--desk .ui__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2em; }
.ui--desk .ui__hello h4 { font-size: 3.2em; }
.ui--desk .ct i { width: 4.6em; height: 4.6em; font-size: 1.7em; }

/* ---------- telefono: misure in cqw (1cqw = 1% della larghezza dello schermo) ---------- */
.ui--ph { height: 100%; display: flex; flex-direction: column; gap: 2.8cqw; padding: 1.4cqw 4.4cqw 3cqw; font-size: 4cqw; }
.ui--ph > * { flex-shrink: 0; }
.ui--ph .ph__status { display: flex; justify-content: space-between; align-items: center; padding: 1.6cqw 4cqw 0; font: 700 4.8cqw var(--font-sans); }
.ph__sig { display: inline-flex; gap: .5cqw; align-items: flex-end; }
.ph__sig i { width: .9cqw; background: #fff; border-radius: .3cqw; } .ph__sig i:nth-child(1){height:1.6cqw} .ph__sig i:nth-child(2){height:2.6cqw} .ph__sig i:nth-child(3){height:3.6cqw} .ph__sig i:nth-child(4){height:4.6cqw}
.ph__top { display: flex; align-items: center; gap: 2.4cqw; padding: 1.6cqw 2cqw; border-radius: 9cqw; background: rgb(28 38 82 / .72); border: .4cqw solid rgb(255 255 255 / .12); margin-top: .6cqw; }
.ph__search { flex: 1; display: flex; align-items: center; gap: 2.4cqw; padding: 2.6cqw 4cqw; border-radius: 99cqw; background: rgb(255 255 255 / .1); font-size: 4.4cqw; color: rgb(255 255 255 / .62); }
.ph__search .icon { width: 5.2cqw; height: 5.2cqw; }
.ph__top .ui__icon { width: 9cqw; height: 9cqw; }
.ph__top .ui__icon .icon { width: 5.2cqw; height: 5.2cqw; }
.ph__top .ui__dot { top: 1.6cqw; right: 1.8cqw; width: 2.2cqw; height: 2.2cqw; }
.ph__top .ui__user i { width: 10cqw; height: 10cqw; font-size: 3.4cqw; }
.ui--ph .ui__label { font-size: 3cqw; margin-top: .6cqw; }
.ui--ph .ui__contacts { gap: 4cqw; }
.ui--ph .ct { min-width: 0; }
.ui--ph .ct i { width: 12.4cqw; height: 12.4cqw; font-size: 5cqw; box-shadow: 0 0 0 1cqw #0b1230, 0 0 0 1.5cqw rgb(255 255 255 / .22); }
.ui--ph .ct b { font-size: 3.3cqw; margin-top: 1.2cqw; } .ui--ph .ct small { font-size: 2.9cqw; }
.ui--ph .ui__hello { padding: 4.2cqw 5cqw 4.6cqw; border-radius: 8cqw; }
.ui--ph .ui__hello::after { right: -16cqw; bottom: -24cqw; width: 60cqw; height: 60cqw; }
.ui--ph .ui__date { font-size: 2.8cqw; }
.ui--ph .ui__hello h4 { font-size: 7.6cqw; margin: .4cqw 0 1cqw; }
.ui--ph .ui__hello p { font-size: 3.7cqw; line-height: 1.35; }
.ui--ph .b { font-size: 4cqw; padding: 2.4cqw 4.6cqw; }
.ui--ph .ui__cta { gap: 2.4cqw; margin-top: 3cqw; }
.ph__chips { display: flex; gap: 2.4cqw; font-size: 3.5cqw; }
.ph__chips span { padding: 1.6cqw 3.8cqw; border-radius: 99cqw; border: .3cqw solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .06); }
.ph__chips .on { background: rgb(40 180 210 / .5); }
.ui--ph .ui__card { padding: 3.8cqw 4.4cqw; border-radius: 8cqw; }
.ui--ph .ui__card h5 { font-size: 5.6cqw; margin-bottom: 1.4cqw; }
.ui--ph .badge { font-size: 4cqw; }
.ui--ph .alldone { font-size: 3.6cqw; }
.ui--ph .task { gap: 3cqw; padding: 2cqw 0; }
.ui--ph .task strong { font-size: 4.2cqw; } .ui--ph .task small { font-size: 3.2cqw; }
.ui--ph .chk { width: 5.6cqw; height: 5.6cqw; border-width: .8cqw; } .ui--ph .chk .icon { width: 3.6cqw; height: 3.6cqw; }
.ui--ph .open { font-size: 3.6cqw; padding: 1.6cqw 3.8cqw; border-radius: 3.4cqw; }
.ph__bar { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 2.8cqw 2cqw; border-radius: 11cqw; background: rgb(28 38 82 / .94); border: .4cqw solid rgb(255 255 255 / .14); font-size: 3.4cqw; text-align: center; }
.ph__bar span { display: grid; justify-items: center; gap: .8cqw; color: rgb(255 255 255 / .78); position: relative; }
.ph__bar .on { color: #7fe6f2; }
.ph__bar .icon { width: 6cqw; height: 6cqw; }
.ph__fab { place-self: center; width: 14cqw; height: 14cqw; margin-top: -9cqw; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #7fe6f2, #0e8fb0); display: grid !important; place-items: center; color: #fff !important; box-shadow: 0 0 0 .8cqw rgb(255 255 255 / .9), 0 2cqw 4cqw -1cqw rgb(40 180 210 / .8); }
.ph__fab .icon { width: 7cqw; height: 7cqw; }
.ph__tasks .cnt { position: absolute; top: -2cqw; right: 2.4cqw; display: grid; place-items: center; min-width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #0e8fb0; font: 700 3.2cqw var(--font-sans); color: #fff; }
.ph__toast { position: absolute; z-index: 5; left: 6cqw; right: 6cqw; top: 15cqw; display: flex; gap: 3.4cqw; align-items: center; padding: 4cqw 5cqw; border-radius: 8cqw; background: rgb(244 248 255 / .97); color: #0b1230; box-shadow: 0 6cqw 12cqw -4cqw rgb(0 0 0 / .7); font-size: 4.4cqw; opacity: 0; translate: 0 -30%; pointer-events: none; }
.ph__toast .icon { width: 7cqw; height: 7cqw; color: #0e8fb0; }
.ph__toast small { display: block; color: #4b5c65; font-size: .8em; }

/* ---------- offerte (1em = 1% della larghezza) ---------- */
.ui--off { aspect-ratio: 100 / 70; font-size: 1cqw; background: radial-gradient(120% 100% at 85% 0%, #0d3a46 0%, transparent 55%), linear-gradient(140deg, #07131f 0%, #0b2233 55%, #0e2a3d 100%); }
.of__head { position: absolute; left: 2.5cqw; top: 2.4cqw; right: 2.5cqw; }
.of__head h4 { font: 700 4.6em var(--font-display); letter-spacing: -.03em; line-height: 1; }
.of__head p { margin-top: .6em; font-size: 1.35em; color: rgb(255 255 255 / .72); }
.of__tabs, .of__stat, .of__bar { position: absolute; left: 2.5cqw; right: 2.5cqw; display: flex; gap: .6em; align-items: center; border-radius: 99em; background: rgb(28 38 82 / .72); border: .1em solid rgb(255 255 255 / .12); padding: .5em; font-size: 1.35em; }
.of__tabs { top: 11.4cqw; width: max-content; right: auto; }
.of__stat { top: 17.4cqw; }
.of__bar { top: 23.8cqw; padding: .55em .9em; }
.of__tabs span, .of__stat span { padding: .7em 1.4em; border-radius: 99em; white-space: nowrap; }
.of__tabs .on, .of__stat .on { background: rgb(255 255 255 / .16); font-weight: 700; }
.of__stat b { margin-left: .5em; padding: .15em .65em; border-radius: 99em; background: rgb(0 0 0 / .4); font-size: .85em; }
.of__q, .of__sel { padding: .7em 1.4em; border-radius: 99em; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .62); }
.of__q { flex: 1; max-width: 24em; }
.of__view { position: relative; margin-left: auto; display: inline-flex; padding: .25em; border-radius: 99em; background: rgb(0 0 0 / .28); }
.of__view span { position: relative; z-index: 1; width: 6.4em; text-align: center; padding: .55em 0; }
.of__hl { position: absolute; z-index: 0; top: .25em; bottom: .25em; left: 6.65em; width: 6.4em; border-radius: 99em; background: rgb(255 255 255 / .22); }
.of__kcol { position: absolute; top: 31cqw; width: 29.6cqw; padding: .6em 1em; border-radius: 99em; background: rgb(255 255 255 / .1); font-size: 1.3em; font-weight: 700; opacity: 0; }
.of__kcol--1 { left: 2.5cqw; } .of__kcol--2 { left: 35.2cqw; } .of__kcol--3 { left: 67.9cqw; }
.oc { position: absolute; overflow: hidden; border-radius: 1.8em; background: rgb(30 38 80 / .85); border: .1em solid rgb(255 255 255 / .14); box-shadow: 0 1.5em 3em -1.5em rgb(0 0 0 / .6); width: 30.4em; height: 21em; left: var(--sx); top: var(--sy); }
.oc__ph { height: 12em; background: radial-gradient(60% 80% at 25% 30%, color-mix(in srgb, #fff 30%, var(--g1)), transparent 70%), linear-gradient(135deg, var(--g1), var(--g2)); }
.oc__b { padding: 1.1em 1.5em; }
.oc__b small { font-size: 1.05em; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .6); font-weight: 650; }
.oc__b strong { display: flex; align-items: center; gap: .6em; font: 700 1.7em var(--font-display); letter-spacing: -.02em; margin-top: .2em; }
.oc__b p { font-size: 1.15em; color: rgb(255 255 255 / .62); margin-top: .3em; }
.oc__st { width: .8em; height: .8em; border-radius: 50%; background: #3ddc84; flex: none; }
.oc--bozza .oc__st { background: #f4a31a; } .oc--appr .oc__st { background: #4dabf7; }
.oc__chip { position: absolute; right: 1.2em; top: 1.2em; padding: .35em .9em; border-radius: 99em; font-size: 1.05em; font-weight: 700; background: rgb(0 0 0 / .45); opacity: 0; }
.oc--0 { --sx: 2.5em; --sy: 31em; --kx: 67.9em; --ky: 36em; }
.oc--1 { --sx: 34.2em; --sy: 31em; --kx: 67.9em; --ky: 44.4em; }
.oc--2 { --sx: 65.9em; --sy: 31em; --kx: 67.9em; --ky: 52.8em; }
.oc--3 { --sx: 2.5em; --sy: 53em; --kx: 2.5em; --ky: 36em; }
.oc--4 { --sx: 34.2em; --sy: 53em; --kx: 35.2em; --ky: 36em; }
.oc--5 { --sx: 65.9em; --sy: 53em; --kx: 2.5em; --ky: 44.4em; }

/* =====================================================================================
   ANIMAZIONI DENTRO LE INTERFACCE: guidate dallo scorrimento della scena che le contiene.
   ===================================================================================== */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  .ui--desk:not(.ui--static) { --tl: --film-z; }
  .ui--ph { --tl: --film-p; }
  .ui--off { --tl: --film-o; }

  /* contatori che salgono */
  .ui:not(.ui--static) .cnt { animation: cnt-up linear both; animation-timeline: var(--tl); animation-range: contain var(--a, 0%) contain var(--b, 1%); }
  @keyframes cnt-up { from { --n: 0; } to { --n: var(--t); } }
  .ui:not(.ui--static) .badge.cnt, .ui--ph .ph__tasks .cnt, .ui--ph .badge.cnt { animation-name: cnt-down; }
  @keyframes cnt-down { from { --n: var(--t); } to { --n: 0; } }

  /* menu: le voci si accendono una dopo l'altra */
  .ui:not(.ui--static) .navi--a { animation: navi-on linear both; animation-timeline: var(--tl); animation-range: contain var(--a) contain var(--b); }
  @keyframes navi-on { 0% { background: transparent; color: rgb(255 255 255 / .9); } 30%, 80% { background: rgb(255 255 255 / .2); color: #7fe6f2; box-shadow: 0 0 0 .15em rgb(127 230 242 / .5); } 100% { background: transparent; color: rgb(255 255 255 / .9); box-shadow: none; } }

  /* ricerca che si scrive da sola */
  .ui:not(.ui--static) .ui__typed { display: block; }
  .ui:not(.ui--static) .ui__typed span { display: block; overflow: hidden; white-space: nowrap; width: 0; border-right: .15em solid #fff; font-size: 1.2em; animation: typing linear both; animation-timeline: --film-z; animation-range: contain 42% contain 50%; }
  @keyframes typing { from { width: 0; } to { width: 14.2ch; border-right-color: transparent; } }
  .ui:not(.ui--static) .ui__ph { animation: ph-out linear both; animation-timeline: --film-z; animation-range: contain 41% contain 43%; }
  @keyframes ph-out { to { opacity: 0; } }
  .ui:not(.ui--static) .ui__results { display: block; opacity: 0; translate: 0 -.8em; scale: .97; animation: res-in linear both; animation-timeline: --film-z; animation-range: contain 49% contain 53%; }
  @keyframes res-in { to { opacity: 1; translate: 0; scale: 1; } }

  /* contatti che entrano uno alla volta */
  .ui:not(.ui--static) .ct { animation: ct-in linear both; animation-timeline: var(--tl); animation-range: contain calc(3% + var(--k) * .8%) contain calc(9% + var(--k) * .8%); }
  .ui--ph .ct { animation: none; }
  @keyframes ct-in { from { opacity: 0; transform: translateY(1.2em) scale(.7); } to { opacity: 1; transform: none; } }

  /* task che si spuntano */
  .ui:not(.ui--static) .task .chk { animation: chk-on linear both; animation-timeline: var(--tl); animation-range: contain var(--a) contain var(--b); }
  .ui:not(.ui--static) .task strong, .ui:not(.ui--static) .task small { animation: task-done linear both; animation-timeline: var(--tl); animation-range: contain var(--a) contain var(--b); }
  .ui:not(.ui--static) .task .open { animation: open-done linear both; animation-timeline: var(--tl); animation-range: contain var(--a) contain var(--b); }
  @keyframes chk-on { 0% { background: transparent; border-color: #f4a31a; color: transparent; transform: scale(1); } 55% { transform: scale(1.35); } 100% { background: #3ddc84; border-color: #3ddc84; color: #06220f; transform: scale(1); } }
  @keyframes task-done { to { opacity: .45; text-decoration: line-through; } }
  @keyframes open-done { to { opacity: .35; } }
  .ui:not(.ui--static) .alldone { display: inline; animation: all-done linear both; animation-timeline: var(--tl); animation-range: contain 86% contain 90%; }
  .ui--ph .alldone { animation-range: contain 74% contain 78%; }
  @keyframes all-done { from { opacity: 0; transform: translateX(-.6em); } to { opacity: 1; transform: none; } }

  /* pipeline: la candidatura avanza tappa per tappa */
  .ui:not(.ui--static) .pp__tok { animation: pp-run linear both; animation-timeline: --film-z; animation-range: contain 92% contain 100%; }
  @keyframes pp-run {
    0%, 4% { left: calc(100% / 14); } 20% { left: calc(100% / 14 * 3); } 36% { left: calc(100% / 14 * 5); } 52% { left: calc(100% / 14 * 7); } 68% { left: calc(100% / 14 * 9); } 84% { left: calc(100% / 14 * 11); } 100% { left: calc(100% / 14 * 13); }
  }
  .ui:not(.ui--static) .pp__c:nth-child(7) b { animation: pp-pulse linear both; animation-timeline: --film-z; animation-range: contain 97% contain 100%; }
  @keyframes pp-pulse { to { color: #ffb454; transform: scale(1.25); } }

  /* telefono: arriva una notifica, il campanello suona, il + pulsa */
  .ui--ph .ph__toast { animation: toast linear both; animation-timeline: --film-p; animation-range: contain 8% contain 26%; }
  @keyframes toast { 0% { opacity: 0; translate: 0 -40%; } 18%, 72% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -30%; } }
  .ui--ph .ph__bell .icon { transform-origin: 50% 0; animation: ring linear both; animation-timeline: --film-p; animation-range: contain 12% contain 20%; }
  @keyframes ring { 0%, 100% { rotate: 0deg; } 15% { rotate: 22deg; } 30% { rotate: -20deg; } 45% { rotate: 14deg; } 60% { rotate: -10deg; } 75% { rotate: 5deg; } }
  .ui--ph .ph__fab { animation: fab-pulse 2.4s ease-in-out infinite; }
  @keyframes fab-pulse { 50% { box-shadow: 0 0 0 .8cqw rgb(255 255 255 / .9), 0 0 0 4cqw rgb(40 180 210 / .25), 0 2cqw 4cqw -1cqw rgb(40 180 210 / .8); } }

  /* offerte: da Schede a Kanban, poi una bozza diventa pubblicata */
  .ui--off .of__stat .cnt { animation-range: contain var(--a, 0%) contain var(--b, 1%); }
  .ui--off .of__hl { animation: hl-move linear both; animation-timeline: --film-o; animation-range: contain 56% contain 64%; }
  @keyframes hl-move { from { left: 6.65em; } to { left: 13.05em; } }
  .ui--off .oc { animation: oc-morph linear both; animation-timeline: --film-o; animation-range: contain 0% contain 100%; }
  .ui--off .oc--3 { animation-name: oc-story; }
  @keyframes oc-morph {
    0%, 56% { left: var(--sx); top: var(--sy); width: 30.4em; height: 21em; animation-timing-function: cubic-bezier(.65,0,.35,1); }
    68%, 100% { left: var(--kx); top: var(--ky); width: 29.6em; height: 7.4em; }
  }
  @keyframes oc-story {
    0%, 56% { left: var(--sx); top: var(--sy); width: 30.4em; height: 21em; animation-timing-function: cubic-bezier(.65,0,.35,1); }
    68%, 82% { left: var(--kx); top: var(--ky); width: 29.6em; height: 7.4em; animation-timing-function: cubic-bezier(.65,0,.35,1); }
    89%, 91% { left: 35.2em; top: 44.4em; width: 29.6em; height: 7.4em; animation-timing-function: cubic-bezier(.65,0,.35,1); }
    98%, 100% { left: 67.9em; top: 61.2em; width: 29.6em; height: 7.4em; }
  }
  .ui--off .oc__ph { animation: ph-collapse linear both; animation-timeline: --film-o; animation-range: contain 0% contain 100%; }
  @keyframes ph-collapse { 0%, 56% { height: 12em; } 68%, 100% { height: 0; } }
  .ui--off .oc__b p { animation: p-fade linear both; animation-timeline: --film-o; animation-range: contain 54% contain 62%; }
  @keyframes p-fade { to { opacity: 0; height: 0; margin: 0; } }
  .ui--off .of__kcol { animation: k-in linear both; animation-timeline: --film-o; animation-range: contain 60% contain 68%; }
  @keyframes k-in { to { opacity: 1; } }
  .ui--off .oc--3 .oc__st { animation: st-story linear both; animation-timeline: --film-o; animation-range: contain 82% contain 98%; }
  @keyframes st-story { 0%, 40% { background: #f4a31a; } 41%, 80% { background: #4dabf7; } 100% { background: #3ddc84; } }
  .ui--off .oc__chip--1 { animation: chip1 linear both; animation-timeline: --film-o; animation-range: contain 68% contain 86%; }
  .ui--off .oc__chip--2 { animation: chip2 linear both; animation-timeline: --film-o; animation-range: contain 86% contain 94%; }
  .ui--off .oc__chip--3 { animation: chip3 linear both; animation-timeline: --film-o; animation-range: contain 93% contain 100%; }
  @keyframes chip1 { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes chip2 { 0%, 100% { opacity: 0; } 18%, 82% { opacity: 1; } }
  @keyframes chip3 { 0% { opacity: 0; } 35%, 100% { opacity: 1; } }
}
}