/* Seconda scena della home: FORMAZIONE e ORGANIGRAMMA nella dashboard. Stessa tecnica delle altre scene:
   senza animazioni (o senza supporto) si vede la dashboard ferma sulla formazione; con lo scorrimento la camera entra nelle zone. */

.ui--y .ui__main { align-content: start; }
.pvs { position: relative; min-height: 46em; }
.pv { display: grid; gap: 1.1em; align-content: start; }
.pv--org { display: none; }
.pv__head { display: flex; align-items: center; gap: .9em; }
.pv__head h4 { font: 700 2.6em var(--font-display); letter-spacing: -.03em; margin-right: .3em; }
.chipx { padding: .45em 1em; border-radius: 99em; font-size: 1.05em; font-weight: 650; background: rgb(255 180 84 / .18); color: #ffd08a; }
.chipx--b { background: rgb(95 216 230 / .16); color: #7fe6f2; }

.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; }
.course { border-radius: 2em; overflow: hidden; background: rgb(30 38 80 / .72); border: .1em solid rgb(255 255 255 / .12); }
.course__th { position: relative; aspect-ratio: 16 / 7; display: grid; place-items: center; background: linear-gradient(135deg, #0f8fa8, #3b5bdb 70%, #7048e8); }
.course:nth-child(2) .course__th { background: linear-gradient(135deg, #e8590c, #c2255c 80%); }
.course:nth-child(3) .course__th { background: linear-gradient(135deg, #12a150, #0c8599 80%); }
.course__play { display: grid; place-items: center; width: 4.2em; height: 4.2em; border-radius: 50%; background: rgb(255 255 255 / .92); color: #0b2233; }
.course__ok { position: absolute; right: .8em; top: .8em; padding: .3em .8em; border-radius: 99em; background: #12a150; font-style: normal; font-size: .95em; font-weight: 700; }
.course__bd { display: grid; gap: .35em; padding: 1.1em 1.3em 1.3em; }
.course__bd small { font-size: .95em; letter-spacing: .1em; text-transform: uppercase; color: #7fe6f2; font-weight: 700; }
.course__bd strong { font: 700 1.5em var(--font-display); letter-spacing: -.02em; line-height: 1.2; }
.course__bd span { color: rgb(255 255 255 / .62); font-size: 1.05em; }
.bar { height: .8em; margin-top: .5em; border-radius: 9em; background: rgb(255 255 255 / .14); overflow: hidden; }
.bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5fd8e6, #3de6f5); transform-origin: left; transform: scaleX(var(--p, 1)); }
.bar--s { flex: 1; margin: 0; }
.pv__cols { grid-template-columns: 1.3fr 1fr; }
.trow { display: flex; align-items: center; gap: .9em; padding: .55em 0; font-size: 1.15em; }
.trow i { font-style: normal; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--c); font-size: .8em; font-weight: 700; }
.trow b { min-width: 3.6em; }
.trow small { width: 3em; text-align: right; color: rgb(255 255 255 / .7); }
.cert__sheet { display: grid; gap: .3em; justify-items: center; text-align: center; padding: 1.2em 1em; border-radius: 1.2em; background: #fff; color: #10171c; border: .35em double #0f8fa8; }
.cert__sheet small { letter-spacing: .16em; text-transform: uppercase; color: #6b7280; font-size: .8em; }
.cert__sheet strong { font: 800 1.9em var(--font-display); color: #0f8fa8; line-height: 1.1; }
.cert__sheet span { font-size: .95em; color: #4b5563; } .cert__sheet b { font-size: 1.1em; } .cert__sheet em { font-style: normal; font-size: .8em; color: #6b7280; }

.orgx { display: grid; gap: 2.2em; justify-items: center; padding-top: 1em; }
.orgx__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; width: 100%; position: relative; }
.orgx__row::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: -1.1em; border-top: .2em solid rgb(255 255 255 / .25); }
.orgx__root::after { content: ""; display: block; width: .2em; height: 1.1em; margin: 0 auto; background: rgb(255 255 255 / .25); }
.orgx__br { display: grid; gap: 1.6em; justify-items: center; position: relative; }
.orgx__br::before { content: ""; position: absolute; top: -1.1em; width: .2em; height: 1.1em; background: rgb(255 255 255 / .25); }
.orgx__leaves { display: flex; gap: 1em; }
.nd { display: grid; justify-items: center; gap: .15em; min-width: 11em; padding: 1em 1.2em; border-radius: 1.6em; background: rgb(30 38 80 / .8); border: .1em solid rgb(255 255 255 / .14); border-top: .45em solid var(--c); }
.nd i { font-style: normal; display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--c); font-weight: 800; margin-bottom: .3em; }
.nd b { font-size: 1.2em; } .nd small { color: rgb(255 255 255 / .65); font-size: 1em; }
.nd--s { min-width: 9em; padding: .8em .9em; } .nd--s i { width: 2.4em; height: 2.4em; font-size: .85em; } .nd--s b { font-size: 1em; text-align: center; }

/* scena */
.film--y .caps { margin-top: var(--s-6); }

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .film--y { height: 480vh; view-timeline: --film-y block; padding: 0; }
  .film--y .film__stage { perspective: 1700px; place-items: center; }
  .film--y .ui--y { --tl: --film-y; }
  .film--y .zhead { position: absolute; top: calc(var(--header-h) + 5dvh); left: var(--gutter); right: var(--gutter); margin: 0; z-index: 3; animation: fade-out linear both; animation-timeline: --film-y; animation-range: contain 4% contain 14%; }
  .laptop--y { margin: 0; width: min(1000px, 90vw, 120dvh); transform-origin: 50% 50%; will-change: transform; animation: y-cam linear both; animation-timeline: --film-y; animation-range: contain 0% contain 100%; }
  @keyframes y-cam {
    0%, 8%    { opacity: 1; transform: scale(.8) translateY(7%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    14%, 24%  { transform: scale(1.7) translate(22%, 4%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    30%, 44%  { transform: scale(1.75) translate(6%, 10%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    48%, 55%  { transform: scale(2.3) translate(-14%, -9%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    60%, 66%  { transform: scale(1.7) translate(22%, 6%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    74%, 100% { transform: scale(1.3) translate(4%, 5%); }
  }
  .film--y .caps { position: absolute; left: 50%; bottom: 4dvh; translate: -50% 0; width: min(720px, 90vw); display: block; margin: 0; z-index: 4; }
  .film--y .cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; opacity: 0; animation: card-io linear both; animation-timeline: --film-y; animation-range: contain var(--a) contain var(--b); }
  .film--y .cap:first-child { animation-name: card-first; }
  .film--y .cap:last-child { animation-name: card-last; }
  .laptop--y .laptop__screen::before { animation: scan-z linear both; animation-timeline: --film-y; animation-range: contain 4% contain 14%; }

  /* menu: la voce attiva resta accesa per tutta la sezione */
  .ui--y .navi--a { animation: navi-hold linear both; animation-timeline: --film-y; animation-range: contain var(--a) contain var(--b); }
  .ui--y .navi.is-on { background: transparent; color: rgb(255 255 255 / .9); animation: navi-hold-first linear both; animation-timeline: --film-y; animation-range: contain 12% contain 55%; }
  @keyframes navi-hold { 0% { background: transparent; color: rgb(255 255 255 / .9); } 6%, 94% { 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; } }
  @keyframes navi-hold-first { 0% { background: transparent; color: rgb(255 255 255 / .9); } 8%, 92% { 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; } }

  /* i due pannelli si danno il cambio */
  .pvs { display: block; }
  .pv--org { display: grid; position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; animation: pv-in linear both; animation-timeline: --film-y; animation-range: contain 56% contain 62%; }
  .pv--train { animation: pv-out linear both; animation-timeline: --film-y; animation-range: contain 54% contain 59%; }
  @keyframes pv-in { from { opacity: 0; translate: 0 2em; } to { opacity: 1; translate: 0 0; } }
  @keyframes pv-out { from { opacity: 1; } to { opacity: 0; translate: 0 -2em; } }

  /* le barre si riempiono, l'attestato compare, i nodi dell'organigramma si accendono uno dopo l'altro */
  .ui--y .bar i { animation: bar-fill linear both; animation-timeline: --film-y; animation-range: contain var(--a) contain var(--b); }
  @keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(var(--p, 1)); } }
  .ui--y .cert__sheet { animation: cert-in linear both; animation-timeline: --film-y; animation-range: contain 44% contain 50%; }
  @keyframes cert-in { from { opacity: 0; transform: translateY(1.5em) scale(.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
  .ui--y .course__ok { animation: cert-in linear both; animation-timeline: --film-y; animation-range: contain 36% contain 40%; }
  .ui--y .nd { animation: nd-in linear both; animation-timeline: --film-y; animation-range: contain calc(60% + var(--k) * 2.6%) contain calc(64% + var(--k) * 2.6%); }
  @keyframes nd-in { from { opacity: 0; transform: translateY(1em) scale(.86); } to { opacity: 1; transform: none; } }

  .hud__t[data-f="y"] { --tl: --film-y; }
}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
@supports (animation-timeline: view()) {
  .laptop--y { width: 96vw; }
  @keyframes y-cam {
    0%, 10%   { opacity: 1; transform: scale(.9) translateY(4%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    16%, 52%  { transform: scale(1.5) translate(10%, 4%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    60%, 100% { transform: scale(1.15) translate(2%, 4%); }
  }
}
}