/* Scene a scorrimento ("film"). Il CSS di base qui sotto è la versione STATICA e leggibile: vale per chi riduce il movimento
   e per i browser senza timeline guidate dallo scorrimento. Il blocco finale (@supports + no-preference) la trasforma in scene fissate che si evolvono scorrendo. */

.film { position: relative; padding-block: var(--section-y); }
.film__stage { position: relative; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.film__lead { max-width: 30ch; }

.progress { display: none; }
.jhead { text-align: center; }
.jhead h2 { font-size: var(--fs-h2); max-width: 22ch; margin-inline: auto; }
.jnote { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
.rail-token { display: none; }
.dhead, .ehead { text-align: center; margin-bottom: var(--s-6); }
.dhead h2, .ehead h2 { font-size: var(--fs-h2); }

/* ---------- Scena A: il problema e la sua fine (versione statica) ---------- */
.chip {
  display: inline-flex; align-items: center; padding: 12px 20px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 500; color: var(--ink); white-space: nowrap;
  box-shadow: 0 10px 30px -14px rgb(0 0 0 / .6);
}
.film--a .chaos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-7); }
.film--a .chip { position: static; }
.beats { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.beat { max-width: 40ch; }
.beat strong { display: block; font: 700 var(--fs-title) var(--font-display); letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--s-1); }
.beat span { color: var(--ink-2); }
.beat--stop, .flash, .shock, .srail { display: none; }
.beat--hero { max-width: none; text-align: center; }
.beat--hero h1 { font-size: clamp(2.4rem, 1rem + 5.2vw, 5.4rem); line-height: .98; max-width: 16ch; margin-inline: auto; }
.beat--hero h1 .word { display: inline-block; animation: word-in 1000ms var(--ease-out) both; animation-delay: calc(var(--w) * 70ms + 100ms); }
.beat--hero h1 .word--accent { color: var(--accent); }
.beat--hero .hero__lead { margin-inline: auto; }
.film--a h2.beat { font: 800 var(--fs-h2) var(--font-display); letter-spacing: -0.03em; color: var(--accent); margin-top: var(--s-5); max-width: 24ch; }
.beat--sub { color: var(--ink-2); }
.beat--sub strong { display: inline; font: 700 1.1em var(--font-sans); }

/* ---------- Scena B: il viaggio (versione statica) ---------- */
.film--b .journey { display: none; }
.jcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.jcard { padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; background: var(--glass-strong); }
.jcard h3 { font: 600 var(--fs-title) var(--font-display); letter-spacing: -0.02em; }
.jcard p { color: var(--ink-2); }
.jcard__n { font: 500 var(--fs-label) var(--font-mono); color: var(--signal); }
.jcard__moves { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jcard__moves li { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px; border-radius: var(--r-pill); background: var(--mist); border: 1px solid var(--glass-edge); font-size: var(--fs-small); }
.jcard__moves .icon { color: var(--accent); }
.jcard__auto { font-size: var(--fs-small); color: var(--ink-3); }
.jnote { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-3); }
@media (max-width: 1023px) { .jcards { grid-template-columns: 1fr; } .jcard { padding: var(--s-5); } }

/* ---------- Scena D: prima e dopo (versione statica) ---------- */
.hpan { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.ans { padding: var(--s-6); display: grid; gap: var(--s-3); }
.ans__before { font-size: var(--fs-small); color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--danger); }
.ans__after { font: 700 var(--fs-title) var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
.ans p { color: var(--ink-2); max-width: 54ch; }

/* ================================================================================================
   VERSIONE ANIMATA: scene fissate che evolvono con lo scorrimento.
   Solo dove il browser supporta le timeline guidate dallo scorrimento e l'utente non ha chiesto di ridurre il movimento.
   ================================================================================================ */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  body { timeline-scope: --film-h, --film-a, --film-b, --film-s, --film-d, --film-z, --film-p, --film-o; }

  /* barra di avanzamento della pagina */
  .progress {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70;
    background: linear-gradient(90deg, var(--accent), var(--signal));
    transform-origin: left; transform: scaleX(0);
    animation: grow linear both; animation-timeline: scroll(root);
  }
  @keyframes grow { to { transform: scaleX(1); } }

  .film { padding-block: 0; }
  .film__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; max-width: none; margin: 0; padding-inline: 0; }
  .film--a { height: 780vh; view-timeline: --film-a block; }
  .film--b { height: 640vh; view-timeline: --film-b block; }
  .film--d { height: 460vh; view-timeline: --film-d block; }
    .film > .container { max-width: none; padding: 0; }
  .film [data-reveal].will-reveal { opacity: 1; transform: none; }

  /* l'aurora racconta il problema: parte calma, diventa dissonante mentre il problema cresce, poi di colpo calma quando esplode */
  .scene { animation: mood-pin linear both; animation-timeline: --film-a; animation-range: contain 0% contain 100%; }
  @keyframes mood-pin { 0% { filter: hue-rotate(0deg); } 38%, 70% { filter: hue-rotate(150deg) saturate(1.45); } 78%, 100% { filter: hue-rotate(0deg) saturate(1); } }

  /* ---------- A: il problema cresce e poi esplode ---------- */
  .film--a .film__stage { place-items: stretch; animation: shake linear both; animation-timeline: --film-a; animation-range: contain 0% contain 100%; }
  @keyframes shake {
    0%, 66% { translate: 0 0; } 67% { translate: -5px 4px; } 68% { translate: 6px -5px; } 69% { translate: -8px 3px; } 70% { translate: 5px 7px; }
    71% { translate: -4px -6px; } 72% { translate: 9px 4px; } 73% { translate: -6px -4px; } 74%, 100% { translate: 0 0; }
  }
  .film--a .chaos { position: absolute; inset: 0; display: block; margin: 0; }
  .film--a .chip {
    position: absolute; left: calc(var(--x) * 1vw); top: calc(var(--y) * 1dvh); translate: -50% -50%; margin: 0;
    border-color: color-mix(in srgb, var(--danger) 62%, var(--glass-edge));
    animation: chip-run linear both; animation-timeline: --film-a; animation-range: contain 0% contain 100%; will-change: transform, opacity;
  }
  @keyframes chip-run {
    0%   { opacity: .95; transform: translate(0, 0) rotate(var(--r)) scale(1); }
    16%  { transform: translate(calc(var(--jx) * 1px), calc(var(--jy) * 1px)) rotate(calc(var(--r) * -.8)); }
    28%  { transform: translate(calc(var(--jx) * -1.4px), calc(var(--jy) * .9px)) rotate(calc(var(--r) * 1.2)); }
    40%  { transform: translate(calc(var(--jx) * 1.3px), calc(var(--jy) * -1.3px)) rotate(calc(var(--r) * -1.1)); }
    52%  { transform: translate(calc(var(--jx) * -1.9px), calc(var(--jy) * 1.6px)) rotate(calc(var(--r) * 1.7)) skewX(7deg); }
    60%  { transform: translate(calc(var(--jx) * 2.3px), calc(var(--jy) * -2px)) rotate(calc(var(--r) * -2.1)) skewX(-9deg); }
    66%  { transform: translate(calc(var(--jx) * -2.7px), calc(var(--jy) * 2.3px)) rotate(calc(var(--r) * 2.5)) skewX(11deg) scale(1.08); box-shadow: 0 0 40px -6px var(--danger); }
    71%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1.3); box-shadow: 0 0 60px 6px var(--danger); }
    78%, 100% { opacity: 0; transform: translate(calc(var(--bx) * 1px), calc(var(--by) * 1px)) rotate(calc(var(--r) * 6)) scale(.12); filter: blur(14px); }
  }
  .film--a .beats { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .film--a .beat { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: min(92vw, 1040px); max-width: none; text-align: center; opacity: 0; animation: beat linear both; animation-timeline: --film-a; animation-range: contain calc(var(--s) * 1%) contain calc(var(--e) * 1%); }
  .film--a .beat strong { font-size: clamp(1.9rem, 1rem + 3.9vw, 4.3rem); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: var(--s-4); }
  .film--a .beat span { font-size: var(--fs-lead); }
  @keyframes beat {
    0%   { opacity: 0; transform: translateY(46px) scale(.96); filter: blur(14px); }
    22%  { opacity: 1; transform: none; filter: blur(0); }
    78%  { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: 0; transform: translateY(-46px) scale(1.03); filter: blur(14px); }
  }
  .film--a .beat--hero { --s: 0; --e: 14; top: 47%; pointer-events: none; animation-name: beat-first; }
  .film--a .beat--hero .btn { pointer-events: auto; }
  @keyframes beat-first { 0%, 55% { opacity: 1; transform: none; filter: blur(0); visibility: visible; } 99% { visibility: visible; } 100% { opacity: 0; transform: translateY(-46px) scale(1.03); filter: blur(14px); visibility: hidden; } }
  .film--a .beat--stop { display: block; top: 44%; font: 800 clamp(5rem, 2rem + 16vw, 15rem) var(--font-display); letter-spacing: -0.05em; line-height: .9; color: var(--ink); text-shadow: 0 0 80px color-mix(in srgb, var(--danger) 60%, transparent); animation-name: beat-stop; }
  @keyframes beat-stop {
    0%   { opacity: 0; transform: scale(2.4); filter: blur(24px); }
    22%  { opacity: 1; transform: scale(1); filter: blur(0); }
    84%  { opacity: 1; transform: scale(1); filter: blur(0); }
    100% { opacity: 0; transform: scale(.82); filter: blur(10px); }
  }
  .film--a h2.beat--final { top: 30%; margin: 0; max-width: none; font-size: clamp(2.6rem, 1rem + 7.6vw, 8.4rem); line-height: .95; color: var(--ink); animation-name: beat-final; }
  @keyframes beat-final {
    0%   { opacity: 0; transform: translateY(40px); filter: blur(16px); font-weight: 200; letter-spacing: .14em; }
    30%  { opacity: 1; transform: none; filter: blur(0); font-weight: 300; letter-spacing: .04em; }
    100% { opacity: 1; transform: none; filter: blur(0); font-weight: 800; letter-spacing: -0.045em; }
  }
  .film--a .beat--sub { top: 49%; font-size: var(--fs-lead); color: var(--ink-2); animation-name: beat-hold; }
  .film--a .beat--sub strong { display: inline; font: 700 1em var(--font-sans); letter-spacing: 0; color: var(--ink); margin: 0; }
  @keyframes beat-hold { 0% { opacity: 0; transform: translateY(46px) scale(.96); filter: blur(14px); } 24%, 100% { opacity: 1; transform: none; filter: blur(0); } }

  /* esplosione: lampo e onde d'urto */
  .film--a .flash { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 46%, #fff 0%, color-mix(in srgb, var(--accent) 70%, transparent) 30%, transparent 68%); opacity: 0; animation: flash linear both; animation-timeline: --film-a; animation-range: contain 0% contain 100%; }
  @keyframes flash { 0%, 71% { opacity: 0; } 73% { opacity: .95; } 79%, 100% { opacity: 0; } }
  .film--a .shock { display: block; position: absolute; left: 50%; top: 46%; width: 36vmin; height: 36vmin; margin: -18vmin 0 0 -18vmin; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 60px var(--accent), inset 0 0 60px color-mix(in srgb, var(--accent) 50%, transparent); opacity: 0; scale: 0; z-index: 3; animation: shock linear both; animation-timeline: --film-a; animation-range: contain 0% contain 100%; }
  .film--a .shock--2 { animation-name: shock2; }
  @keyframes shock { 0%, 71% { opacity: 0; scale: .1; } 72% { opacity: 1; scale: .1; } 86%, 100% { opacity: 0; scale: 7; } }
  @keyframes shock2 { 0%, 74% { opacity: 0; scale: .1; } 75% { opacity: .8; scale: .1; } 90%, 100% { opacity: 0; scale: 8; } }

  /* la sequenza che nasce dalle macerie: sette nodi e la candidatura che li attraversa */
  .film--a .srail { display: block; position: absolute; inset: 0; z-index: 2; }
  .srail__line { position: absolute; left: 10vw; right: 10vw; top: 74dvh; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent) 8%, var(--accent) 92%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 70%, transparent); transform-origin: left; animation: rail linear both; animation-timeline: --film-a; animation-range: contain 0% contain 100%; }
  @keyframes rail { 0%, 78% { transform: scaleX(0); opacity: 0; } 79% { opacity: 1; } 90%, 100% { transform: scaleX(1); opacity: 1; } }
  .srail__n { position: absolute; left: calc(10vw + var(--i) * 13.333vw); top: 74dvh; width: 22px; height: 22px; margin: -9.5px 0 0 -11px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 22px var(--accent); scale: 0; animation: n-pop linear both; animation-timeline: --film-a; animation-range: contain calc(78% + var(--i) * 1.6%) contain calc(81% + var(--i) * 1.6%); }
  @keyframes n-pop { 0% { scale: 0; } 70% { scale: 1.5; } 100% { scale: 1; } }
  .srail__n b { position: absolute; top: 175%; left: 50%; translate: -50% 0; white-space: nowrap; font: 500 var(--fs-label) var(--font-mono); letter-spacing: .04em; color: var(--ink-2); }
  .srail__token { position: absolute; left: 10vw; top: 74dvh; width: 18px; height: 18px; margin: -8px 0 0 -9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 24%, transparent), 0 8px 24px -2px var(--signal); animation: s-run linear both; animation-timeline: --film-a; animation-range: contain 0% contain 100%; }
  @keyframes s-run { 0%, 88% { opacity: 0; transform: translateX(0); } 89% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(80vw); } }

  /* ---------- B: il viaggio lungo il percorso ---------- */
  .film--b .film__stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2dvh; padding-top: calc(var(--header-h) + 5dvh); }
  .film--b .jhead { text-align: center; padding-inline: var(--gutter); }
  .film--b .jhead h2 { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.6rem); max-width: 28ch; }
  .film--b .journey { display: block; width: min(1180px, 96vw); height: 38dvh; max-height: 380px; overflow: visible; flex: none; }
  .film--b .journey--m { display: none; }
  .film--b .jnote { position: absolute; left: 50%; bottom: 1.4dvh; translate: -50% 0; width: min(980px, 92vw); margin: 0; font-size: .8125rem; line-height: 1.3; }
  .film--b .jcards { position: absolute; left: 50%; bottom: 8dvh; translate: -50% 0; width: min(980px, 92vw); display: block; margin: 0; }
  .jcard {
    position: absolute; left: 0; right: 0; bottom: 0;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-5) var(--s-6);
    opacity: 0;
    animation: card-io linear both; animation-timeline: --film-b; animation-range: contain var(--a) contain var(--b);
  }
  .jcard[data-i="0"] { animation-name: card-first; }
  .jcard[data-i="6"] { animation-name: card-last; }
  .jcard .jcard__n, .jcard h3 { grid-column: 1; }
  .jcard > p { grid-column: 1; }
  .jcard .jcard__side { grid-column: 2; grid-row: 1 / span 4; }
  @keyframes card-io {
    0%   { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(10px); }
    28%  { opacity: 1; transform: none; filter: blur(0); }
    72%  { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: 0; transform: translateY(-30px) scale(.98); filter: blur(10px); }
  }
  @keyframes card-first { 0% { opacity: 1; transform: none; filter: none; } 72% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(-30px) scale(.98); filter: blur(10px); } }
  @keyframes card-last { 0% { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(10px); } 28%, 100% { opacity: 1; transform: none; filter: none; } }

  .journey__track { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
  .journey__lit { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px var(--accent)); animation: line-d linear both; animation-timeline: --film-b; animation-range: contain 0% contain 100%; }
  .journey--m .journey__lit { animation-name: line-m; }
  .journey__token { fill: var(--signal); filter: drop-shadow(0 0 12px var(--signal)); animation: tok-d linear both; animation-timeline: --film-b; animation-range: contain 0% contain 100%; }
  .journey--m .journey__token { animation-name: tok-m; }
  .jn__halo { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .jn__dot { fill: var(--bg); stroke: var(--line-strong); stroke-width: 3; }
  .jn { animation: node-on linear both; animation-timeline: --film-b; animation-range: contain var(--lit) contain calc(var(--lit) + 4%); }
  .jn .jn__dot, .jn .jn__halo { animation: inherit; }
  .jn .jn__dot { animation-name: dot-on; }
  .jn .jn__halo { animation-name: halo-on; }
  @keyframes node-on { from { opacity: 1; } to { opacity: 1; } }
  @keyframes dot-on { from { fill: var(--bg); stroke: var(--line-strong); } to { fill: var(--accent); stroke: var(--accent); } }
  @keyframes halo-on { 0% { opacity: 0; transform: scale(.5); } 50% { opacity: .9; transform: scale(1.5); } 100% { opacity: .35; transform: scale(1); } }

  /* ---------- D: prima e dopo, scorrimento orizzontale ---------- */
  .film--d .film__stage { place-items: center start; overflow: hidden; }
  .film--d .dhead { position: absolute; top: calc(var(--header-h) + 28px); left: var(--gutter); right: var(--gutter); z-index: 3; text-align: center; pointer-events: none; }
  .film--d .dhead h2 { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); }
  .film--d .hpan {
    display: flex; gap: 6vw; align-items: center; width: max-content; height: 100%; margin: 0; padding: calc(var(--header-h) + 90px) 14vw 6dvh;
    animation: pan linear both; animation-timeline: --film-d; animation-range: contain 0% contain 100%;
  }
  @keyframes pan { to { transform: translateX(calc(-100% + 100vw)); } }
  .film--d .ans { width: min(72vw, 940px); min-height: 44dvh; padding: var(--s-7); align-content: center; gap: var(--s-4); }
  .ans__before {
    animation: before-out linear both; animation-timeline: --film-d;
    animation-range: contain calc(var(--s) * 1%) contain calc(var(--e) * 1% - 2%);
  }
  .ans__after {
    font-size: clamp(2rem, 1rem + 3.4vw, 4.2rem); letter-spacing: -0.035em; line-height: 1;
    animation: after-in linear both; animation-timeline: --film-d;
    animation-range: contain calc(var(--s) * 1%) contain calc(var(--e) * 1%);
  }
  .ans p { animation: after-in linear both; animation-timeline: --film-d; animation-range: contain calc(var(--s) * 1%) contain calc(var(--e) * 1%); }
  @keyframes before-out { 0% { opacity: 1; filter: none; transform: none; } 100% { opacity: .35; filter: blur(2px); transform: translateX(-12px); } }
  @keyframes after-in { 0% { opacity: .15; filter: blur(14px); transform: translateY(24px) scale(.96); } 100% { opacity: 1; filter: none; transform: none; } }
  .ans.glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass-strong); }

}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
@supports (animation-timeline: view()) {
  .film--a .chip { font-size: .8125rem; padding: 8px 12px; }
  .film--a .chip:nth-child(1) { --x: 24 !important; --y: 13 !important; }
  .film--a .chip:nth-child(2) { --x: 76 !important; --y: 17 !important; }
  .film--a .chip:nth-child(3) { --x: 16 !important; --y: 27 !important; }
  .film--a .chip:nth-child(4) { --x: 82 !important; --y: 30 !important; }
  .film--a .chip:nth-child(5) { --x: 24 !important; --y: 84 !important; }
  .film--a .chip:nth-child(6) { --x: 76 !important; --y: 80 !important; }
  .film--a .chip:nth-child(7) { --x: 50 !important; --y: 90 !important; }
  .film--a .chip:nth-child(8) { --x: 50 !important; --y: 20 !important; }
  .film--a .beat strong { font-size: 1.75rem; }
  .film--a h2.beat--final { top: 26%; }
  .film--a .beat--sub { top: 44%; }
  .srail__n b { display: none; }
  .srail__n { left: calc(8vw + var(--i) * 14vw); }
  .srail__line { left: 8vw; right: 8vw; }
  .srail__token { left: 8vw; }
  @keyframes s-run { 0%, 88% { opacity: 0; transform: translateX(0); } 89% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(84vw); } }
  .film--b .journey--d { display: none; }
  .film--b .journey--m { display: block; width: 92vw; height: 38dvh; }
  .film--b .jnote { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jcard__auto { display: none; }
  .jcard > p { font-size: var(--fs-small); }
  .jcard h3 { font-size: 1.125rem; }
  .jcard { grid-template-columns: 1fr; padding: var(--s-4); }
  .jcard .jcard__side { grid-column: 1; grid-row: auto; }
  .jcard > p:nth-of-type(n+2) { display: none; }
  .film--b .jcards { bottom: 3dvh; width: 94vw; }
  .film--d .ans { width: 78vw; padding: var(--s-5); min-height: 50dvh; }
  .film--d .hpan { gap: 5vw; padding-inline: 11vw; }
}
}

/* ================================================================================================
   ATTI NUOVI: ingresso con portatile, interludio, dashboard reale, telefono, offerte.
   Base statica (leggibile ovunque) + versione animata più sotto.
   ================================================================================================ */

@keyframes fade-out { 0%, 40% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Dispositivi ---------- */
.device-note { margin-top: var(--s-4); text-align: center; font-size: var(--fs-small); color: var(--ink-3); }
.laptop { position: relative; width: min(1000px, 100%); margin-inline: auto; transform-origin: 50% 100%; }
.laptop__lid {
  padding: 10px; border-radius: 22px;
  background: linear-gradient(160deg, #2c3643, #0e1319);
  border: 1px solid rgb(255 255 255 / .34);
  box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 -24px 90px -30px color-mix(in srgb, var(--accent) 70%, transparent), 0 70px 120px -50px rgb(0 0 0 / .8), 0 30px 60px -30px color-mix(in srgb, var(--accent) 35%, transparent);
}
.laptop__screen { position: relative; border-radius: 12px; overflow: hidden; background: #070b10; }
.laptop__screen img { display: block; width: 100%; height: auto; }
.laptop__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .14), transparent 34%, transparent 70%, rgb(255 255 255 / .05)); }
.laptop__base { height: 14px; margin: 0 -3%; border-radius: 2px 2px 18px 18px; background: linear-gradient(#d3dae1, #8d97a1); box-shadow: 0 30px 50px -20px rgb(0 0 0 / .7); }
.laptop__base::before { content: ""; display: block; width: 18%; height: 5px; margin: 0 auto; border-radius: 0 0 10px 10px; background: rgb(0 0 0 / .22); }

.phone { position: relative; height: min(78dvh, 760px); aspect-ratio: 921 / 2000; margin-inline: auto; }
.phone__body { position: absolute; inset: 0; padding: 2.6%; border-radius: 16% / 7.4%; background: linear-gradient(160deg, #2c3643, #0e1319); border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 70px 110px -40px rgb(0 0 0 / .85), 0 30px 70px -30px color-mix(in srgb, var(--accent) 40%, transparent); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 13.6% / 6.2%; overflow: hidden; background: #070b10; }
.phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgb(255 255 255 / .12), transparent 30%); }
.phone__island { position: absolute; top: 2.3%; left: 50%; width: 27%; height: 2.4%; translate: -50% 0; border-radius: 99px; background: #02040a; }
.phone .device-note { position: absolute; left: 50%; bottom: -34px; translate: -50% 0; width: max-content; margin: 0; }

.panel3d { position: relative; width: min(1000px, 100%); margin-inline: auto; transform-origin: 50% 50%; }
.panel3d__screen { display: block; width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 1px 0 rgb(255 255 255 / .28) inset, 0 80px 120px -50px rgb(0 0 0 / .85), 0 40px 80px -40px color-mix(in srgb, var(--signal) 28%, transparent); }

/* ---------- Ingresso (statico) ---------- */
.film--h { padding-top: var(--s-6); }
.hero2 { text-align: center; max-width: 1040px; margin: 0 auto var(--s-8); }
.hero2 h1 { font-size: clamp(2.5rem, 1rem + 5.2vw, 5.4rem); line-height: .98; margin-inline: auto; max-width: 15ch; }
.hero2 h1 .word { display: inline-block; animation: word-in 1000ms var(--ease-out) both; animation-delay: calc(var(--w) * 90ms + 120ms); }
.hero2 h1 .word--accent { color: var(--accent); }
.hero__lead { margin: var(--s-5) auto 0; max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-2); animation: word-in 1000ms var(--ease-out) 800ms both; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); animation: word-in 1000ms var(--ease-out) 950ms both; }
@media (max-width: 767px) { .hero__actions .btn { width: 100%; } .hero2 { margin-bottom: var(--s-7); } }

/* ---------- Interludio (statico) ---------- */
.film--s { padding-block: var(--s-10); }
.statement { font: 700 clamp(2rem, 1rem + 4.2vw, 5rem) var(--font-display); letter-spacing: -0.035em; line-height: 1.04; max-width: 17ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.film--s .film__stage { display: grid; place-items: center; }

/* ---------- Dashboard, telefono, offerte (statici) ---------- */
.zhead, .ohead { text-align: center; margin-bottom: var(--s-6); }
.zhead h2, .ohead h2 { font-size: var(--fs-h2); max-width: 20ch; margin-inline: auto; }
.caps { display: grid; gap: var(--s-3); margin: var(--s-6) auto 0; max-width: 62ch; }
.cap { padding: var(--s-4) var(--s-5); background: var(--glass-strong); }
.cap b { color: var(--ink); }
.cap { color: var(--ink-2); }
.pbeats { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); max-width: 46ch; margin-inline: auto; text-align: center; }
.pbeat strong { display: block; font: 700 var(--fs-title) var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.pbeat span { color: var(--ink-2); }
.film--p .phone { margin-bottom: var(--s-7); }

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  .film--h { height: 330vh; view-timeline: --film-h block; padding: 0; }
  .film--s { height: 300vh; view-timeline: --film-s block; padding: 0; }
  .film--z { height: 620vh; view-timeline: --film-z block; padding: 0; }
  .film--p { height: 460vh; view-timeline: --film-p block; padding: 0; }
  .film--o { height: 420vh; view-timeline: --film-o block; padding: 0; }
  .film--h .film__stage, .film--z .film__stage, .film--p .film__stage, .film--o .film__stage { perspective: 1700px; }

  /* --- ingresso: il titolo si rimpicciolisce, il portatile sale e si apre --- */
  .film--h .film__stage { place-items: start center; }
  .hero2 { position: absolute; top: calc(var(--header-h) + 6dvh); left: 0; right: 0; margin: 0; padding-inline: var(--gutter); transform-origin: 50% 0; animation: h-text linear both; animation-timeline: --film-h; animation-range: contain 0% contain 60%; }
  @keyframes h-text { 0%, 6% { transform: none; animation-timing-function: cubic-bezier(.65,0,.35,1); } 100% { transform: translateY(-3dvh) scale(.44); } }
  .hero2 h1 .word { animation: word-rise 1000ms var(--ease-out) both, word-fill linear both; animation-delay: calc(var(--w) * 90ms + 120ms), 0s; animation-timeline: auto, --film-h; animation-range: normal, contain calc(var(--w) * 2.5%) contain calc(var(--w) * 2.5% + 14%); }
  @keyframes word-rise { from { transform: translateY(0.5em); } to { transform: none; } }
  @keyframes word-fill { from { opacity: .58; filter: blur(2px); } to { opacity: 1; filter: none; } }
  .hero2 .hero__lead, .hero2 .hero__actions { animation: lead-out linear both; animation-timeline: --film-h; animation-range: contain 6% contain 26%; }
  @keyframes lead-out { 0% { opacity: 1; transform: none; visibility: visible; } 99% { visibility: visible; } 100% { opacity: 0; transform: translateY(-24px); filter: blur(10px); visibility: hidden; } }
  .laptop--hero { position: absolute; left: 50%; bottom: 3dvh; translate: -50% 0; width: min(1000px, 90vw, 108dvh); margin: 0; animation: laptop-rise linear both; animation-timeline: --film-h; animation-range: contain 0% contain 80%; will-change: transform; }
  .laptop--hero .device-note { display: none; }
  @keyframes laptop-rise {
    0%   { transform: translateY(40dvh) rotateX(34deg) scale(.86); filter: brightness(.9); }
    100% { transform: translateY(3dvh) rotateX(0deg) scale(1); filter: brightness(1); }
  }

  /* --- interludio: la frase si accende parola per parola --- */
  .statement { margin: 0; max-width: 16ch; }
  .sw { display: inline-block; animation: sw-on linear both; animation-timeline: --film-s; animation-range: contain calc(var(--i) * 4.6%) contain calc(var(--i) * 4.6% + 12%); }
  @keyframes sw-on { from { opacity: .14; filter: blur(8px); transform: translateY(.12em); } to { opacity: 1; filter: none; transform: none; } }

  /* --- dashboard reale: il portatile si apre e la camera entra nelle zone --- */
  .film--z .film__stage { place-items: center; }
  .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-z; animation-range: contain 6% contain 17%; }
  .laptop--zoom { margin: 0; width: min(1000px, 90vw, 120dvh); transform-origin: 50% 50%; will-change: transform; animation: z-cam linear both; animation-timeline: --film-z; animation-range: contain 0% contain 100%; }
  @keyframes z-cam {
    0%, 19% { opacity: 1; transform: scale(.8) translateY(7%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    23%, 37%  { transform: scale(2.1) translate(26%, 0%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    42%, 56%  { transform: scale(2.4) translate(20%, 26%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    60%, 72%  { transform: scale(1.6) translate(4%, 3%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    76%, 90%  { transform: scale(1.9) translate(12%, -18%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    94%, 100% { transform: scale(1.9) translate(-26%, -18%); }
  }
  .film--z .caps, .film--o .caps { position: absolute; left: 50%; bottom: 4dvh; translate: -50% 0; width: min(720px, 90vw); display: block; margin: 0; z-index: 4; }
  .film--z .cap, .film--o .cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; opacity: 0; animation: card-io linear both; animation-timeline: --film-z; animation-range: contain var(--a) contain var(--b); }
  .film--z .cap:first-child { animation-name: card-first; }
  .film--z .cap:last-child { animation-name: card-last; }
  .film--o .cap { animation-timeline: --film-o; }
  .film--o .cap:first-child { animation-name: card-first; }
  .film--o .cap:last-child { animation-name: card-last; }

  /* --- telefono: arriva in prospettiva, poi la camera scende sul contenuto --- */
  .film--p .film__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); place-items: center; padding-inline: var(--gutter); max-width: none; }
  .pbeats { grid-column: 1; position: relative; width: min(520px, 100%); height: 50dvh; margin: 0; max-width: none; text-align: left; justify-self: end; margin-right: 6vw; }
  .pbeat { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; animation: beat linear both; animation-timeline: --film-p; animation-range: contain var(--a) contain var(--b); }
  .pbeat strong { font-size: clamp(2rem, 1rem + 2.8vw, 3.8rem); line-height: 1; letter-spacing: -0.035em; margin-bottom: var(--s-3); }
  .pbeat span { font-size: var(--fs-lead); }
  .pbeat:last-of-type { animation-name: beat-hold; }
  @keyframes beat-hold { 0% { opacity: 0; transform: translateY(46px) scale(.96); filter: blur(14px); } 22%, 100% { opacity: 1; transform: none; filter: blur(0); } }
  .film--p .phone { grid-column: 2; justify-self: start; margin: 0 0 0 4vw; height: min(76dvh, 760px); transform-origin: 50% 50%; will-change: transform; animation: p-cam linear both; animation-timeline: --film-p; animation-range: contain 0% contain 100%; }
  @keyframes p-cam {
    0%   { opacity: 0; transform: translateY(46dvh) rotateY(-34deg) rotateX(12deg) scale(.82); animation-timing-function: cubic-bezier(.22,1,.36,1); }
    14%  { opacity: 1; transform: translateY(0) rotateY(-10deg) rotateX(0) scale(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    24%  { transform: translateY(0) rotateY(0) rotateX(0) scale(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    32%, 50%  { transform: scale(1.55) translateY(11%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    58%, 76%  { transform: scale(1.55) translateY(-22%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    84%, 100% { transform: scale(1.7) translateY(-38%); }
  }
  .film--p .phone .device-note { display: none; }

  /* --- offerte: un pannello in prospettiva che si raddrizza e si avvicina --- */
  .film--o .film__stage { place-items: center; }
  .ohead { 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-o; animation-range: contain 0% contain 16%; }
  .panel3d { margin: 0; width: min(1000px, 90vw, 120dvh); will-change: transform; animation: o-cam linear both; animation-timeline: --film-o; animation-range: contain 0% contain 100%; }
  .panel3d .device-note { display: none; }
  @keyframes o-cam {
    0%   { opacity: 0; transform: translateX(16vw) rotateY(-36deg) rotateX(14deg) rotateZ(5deg) scale(.66); animation-timing-function: cubic-bezier(.22,1,.36,1); }
    14%  { opacity: 1; transform: translateX(0) rotateY(0) rotateX(0) rotateZ(0) scale(.84); }
    24%  { transform: scale(.84); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    30%, 50%  { transform: scale(1.45) translate(0%, 19%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    56%, 78%  { transform: scale(1.3) translate(-5%, -12%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    84%, 100% { transform: scale(1.5) translate(-12%, -30%); }
  }
}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
@supports (animation-timeline: view()) {
  .film--a .chip { font-size: .8125rem; padding: 8px 12px; }
  .film--a .chip:nth-child(1) { --x: 22 !important; --y: 12 !important; --ex: 28 !important; --ey: 58 !important; }
  .film--a .chip:nth-child(2) { --x: 76 !important; --y: 17 !important; --ex: 72 !important; --ey: 58 !important; }
  .film--a .chip:nth-child(3) { --x: 18 !important; --y: 86 !important; --ex: 28 !important; --ey: 66 !important; }
  .film--a .chip:nth-child(4) { --x: 78 !important; --y: 82 !important; --ex: 72 !important; --ey: 66 !important; }
  .film--a .chip:nth-child(5) { --x: 30 !important; --y: 93 !important; --ex: 28 !important; --ey: 74 !important; }
  .film--a .chip:nth-child(6) { --x: 70 !important; --y: 91 !important; --ex: 72 !important; --ey: 74 !important; }
  .film--a .rail-a, .film--a .rail-token { display: none; }
  .film--a .beat--final { top: 30%; }
  .film--b .journey--d { display: none; }
  .film--b .journey--m { display: block; width: 92vw; height: 38dvh; }
  .film--b .jnote { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jcard__auto { display: none; }
  .jcard > p { font-size: var(--fs-small); }
  .jcard h3 { font-size: 1.125rem; }
  .jcard { grid-template-columns: 1fr; padding: var(--s-4); }
  .jcard .jcard__side { grid-column: 1; grid-row: auto; }
  .jcard > p:nth-of-type(n+2) { display: none; }
  .film--b .jcards { bottom: 3dvh; width: 94vw; }
  .film--d .ans { width: 78vw; padding: var(--s-5); min-height: 50dvh; }
  .film--d .hpan { gap: 5vw; padding-inline: 11vw; }
}
}

/* ================================================================================================
   ATTI NUOVI: ingresso con portatile, interludio, dashboard reale, telefono, offerte.
   Base statica (leggibile ovunque) + versione animata più sotto.
   ================================================================================================ */

@keyframes fade-out { 0%, 40% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Dispositivi ---------- */
.device-note { margin-top: var(--s-4); text-align: center; font-size: var(--fs-small); color: var(--ink-3); }
.laptop { position: relative; width: min(1000px, 100%); margin-inline: auto; transform-origin: 50% 100%; }
.laptop__lid {
  padding: 10px; border-radius: 22px;
  background: linear-gradient(160deg, #2c3643, #0e1319);
  border: 1px solid rgb(255 255 255 / .34);
  box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 -24px 90px -30px color-mix(in srgb, var(--accent) 70%, transparent), 0 70px 120px -50px rgb(0 0 0 / .8), 0 30px 60px -30px color-mix(in srgb, var(--accent) 35%, transparent);
}
.laptop__screen { position: relative; border-radius: 12px; overflow: hidden; background: #070b10; }
.laptop__screen img { display: block; width: 100%; height: auto; }
.laptop__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .14), transparent 34%, transparent 70%, rgb(255 255 255 / .05)); }
.laptop__base { height: 14px; margin: 0 -3%; border-radius: 2px 2px 18px 18px; background: linear-gradient(#d3dae1, #8d97a1); box-shadow: 0 30px 50px -20px rgb(0 0 0 / .7); }
.laptop__base::before { content: ""; display: block; width: 18%; height: 5px; margin: 0 auto; border-radius: 0 0 10px 10px; background: rgb(0 0 0 / .22); }

.phone { position: relative; height: min(78dvh, 760px); aspect-ratio: 921 / 2000; margin-inline: auto; }
.phone__body { position: absolute; inset: 0; padding: 2.6%; border-radius: 16% / 7.4%; background: linear-gradient(160deg, #2c3643, #0e1319); border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 70px 110px -40px rgb(0 0 0 / .85), 0 30px 70px -30px color-mix(in srgb, var(--accent) 40%, transparent); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 13.6% / 6.2%; overflow: hidden; background: #070b10; }
.phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgb(255 255 255 / .12), transparent 30%); }
.phone__island { position: absolute; top: 2.3%; left: 50%; width: 27%; height: 2.4%; translate: -50% 0; border-radius: 99px; background: #02040a; }
.phone .device-note { position: absolute; left: 50%; bottom: -34px; translate: -50% 0; width: max-content; margin: 0; }

.panel3d { position: relative; width: min(1000px, 100%); margin-inline: auto; transform-origin: 50% 50%; }
.panel3d__screen { display: block; width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 1px 0 rgb(255 255 255 / .28) inset, 0 80px 120px -50px rgb(0 0 0 / .85), 0 40px 80px -40px color-mix(in srgb, var(--signal) 28%, transparent); }

/* ---------- Ingresso (statico) ---------- */
.film--h { padding-top: var(--s-6); }
.hero2 { text-align: center; max-width: 1040px; margin: 0 auto var(--s-8); }
.hero2 h1 { font-size: clamp(2.5rem, 1rem + 5.2vw, 5.4rem); line-height: .98; margin-inline: auto; max-width: 15ch; }
.hero2 h1 .word { display: inline-block; animation: word-in 1000ms var(--ease-out) both; animation-delay: calc(var(--w) * 90ms + 120ms); }
.hero2 h1 .word--accent { color: var(--accent); }
.hero__lead { margin: var(--s-5) auto 0; max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-2); animation: word-in 1000ms var(--ease-out) 800ms both; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); animation: word-in 1000ms var(--ease-out) 950ms both; }
@media (max-width: 767px) { .hero__actions .btn { width: 100%; } .hero2 { margin-bottom: var(--s-7); } }

/* ---------- Interludio (statico) ---------- */
.film--s { padding-block: var(--s-10); }
.statement { font: 700 clamp(2rem, 1rem + 4.2vw, 5rem) var(--font-display); letter-spacing: -0.035em; line-height: 1.04; max-width: 17ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.film--s .film__stage { display: grid; place-items: center; }

/* ---------- Dashboard, telefono, offerte (statici) ---------- */
.zhead, .ohead { text-align: center; margin-bottom: var(--s-6); }
.zhead h2, .ohead h2 { font-size: var(--fs-h2); max-width: 20ch; margin-inline: auto; }
.caps { display: grid; gap: var(--s-3); margin: var(--s-6) auto 0; max-width: 62ch; }
.cap { padding: var(--s-4) var(--s-5); background: var(--glass-strong); }
.cap b { color: var(--ink); }
.cap { color: var(--ink-2); }
.pbeats { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); max-width: 46ch; margin-inline: auto; text-align: center; }
.pbeat strong { display: block; font: 700 var(--fs-title) var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.pbeat span { color: var(--ink-2); }
.film--p .phone { margin-bottom: var(--s-7); }

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  .film--h { height: 330vh; view-timeline: --film-h block; padding: 0; }
  .film--s { height: 300vh; view-timeline: --film-s block; padding: 0; }
  .film--z { height: 620vh; view-timeline: --film-z block; padding: 0; }
  .film--p { height: 460vh; view-timeline: --film-p block; padding: 0; }
  .film--o { height: 420vh; view-timeline: --film-o block; padding: 0; }
  .film--h .film__stage, .film--z .film__stage, .film--p .film__stage, .film--o .film__stage { perspective: 1700px; }

  /* --- ingresso: il titolo si rimpicciolisce, il portatile sale e si apre --- */
  .film--h .film__stage { place-items: start center; }
  .hero2 { position: absolute; top: calc(var(--header-h) + 6dvh); left: 0; right: 0; margin: 0; padding-inline: var(--gutter); transform-origin: 50% 0; animation: h-text linear both; animation-timeline: --film-h; animation-range: contain 0% contain 60%; }
  @keyframes h-text { 0%, 6% { transform: none; animation-timing-function: cubic-bezier(.65,0,.35,1); } 100% { transform: translateY(-3dvh) scale(.44); } }
  .hero2 h1 .word { animation: word-rise 1000ms var(--ease-out) both, word-fill linear both; animation-delay: calc(var(--w) * 90ms + 120ms), 0s; animation-timeline: auto, --film-h; animation-range: normal, contain calc(var(--w) * 2.5%) contain calc(var(--w) * 2.5% + 14%); }
  @keyframes word-rise { from { transform: translateY(0.5em); } to { transform: none; } }
  @keyframes word-fill { from { opacity: .58; filter: blur(2px); } to { opacity: 1; filter: none; } }
  .hero2 .hero__lead, .hero2 .hero__actions { animation: lead-out linear both; animation-timeline: --film-h; animation-range: contain 6% contain 26%; }
  @keyframes lead-out { 0% { opacity: 1; transform: none; visibility: visible; } 99% { visibility: visible; } 100% { opacity: 0; transform: translateY(-24px); filter: blur(10px); visibility: hidden; } }
  .laptop--hero { position: absolute; left: 50%; bottom: 3dvh; translate: -50% 0; width: min(1000px, 90vw, 108dvh); margin: 0; animation: laptop-rise linear both; animation-timeline: --film-h; animation-range: contain 0% contain 80%; will-change: transform; }
  .laptop--hero .device-note { display: none; }
  @keyframes laptop-rise {
    0%   { transform: translateY(40dvh) rotateX(34deg) scale(.86); filter: brightness(.9); }
    100% { transform: translateY(3dvh) rotateX(0deg) scale(1); filter: brightness(1); }
  }

  /* --- interludio: la frase si accende parola per parola --- */
  .statement { margin: 0; max-width: 16ch; }
  .sw { display: inline-block; animation: sw-on linear both; animation-timeline: --film-s; animation-range: contain calc(var(--i) * 4.6%) contain calc(var(--i) * 4.6% + 12%); }
  @keyframes sw-on { from { opacity: .14; filter: blur(8px); transform: translateY(.12em); } to { opacity: 1; filter: none; transform: none; } }

  /* --- dashboard reale: il portatile si apre e la camera entra nelle zone --- */
  .film--z .film__stage { place-items: center; }
  .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-z; animation-range: contain 6% contain 17%; }
  .laptop--zoom { margin: 0; width: min(1000px, 90vw, 120dvh); transform-origin: 50% 50%; will-change: transform; animation: z-cam linear both; animation-timeline: --film-z; animation-range: contain 0% contain 100%; }
  @keyframes z-cam {
    0%, 19% { opacity: 1; transform: scale(.8) translateY(7%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    23%, 37%  { transform: scale(2.1) translate(26%, 0%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    42%, 56%  { transform: scale(2.4) translate(20%, 26%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    60%, 72%  { transform: scale(1.6) translate(4%, 3%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    76%, 90%  { transform: scale(1.9) translate(12%, -18%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    94%, 100% { transform: scale(1.9) translate(-26%, -18%); }
  }
  .film--z .caps, .film--o .caps { position: absolute; left: 50%; bottom: 4dvh; translate: -50% 0; width: min(720px, 90vw); display: block; margin: 0; z-index: 4; }
  .film--z .cap, .film--o .cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; opacity: 0; animation: card-io linear both; animation-timeline: --film-z; animation-range: contain var(--a) contain var(--b); }
  .film--z .cap:first-child { animation-name: card-first; }
  .film--z .cap:last-child { animation-name: card-last; }
  .film--o .cap { animation-timeline: --film-o; }
  .film--o .cap:first-child { animation-name: card-first; }
  .film--o .cap:last-child { animation-name: card-last; }

  /* --- telefono: arriva in prospettiva, poi la camera scende sul contenuto --- */
  .film--p .film__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); place-items: center; padding-inline: var(--gutter); max-width: none; }
  .pbeats { grid-column: 1; position: relative; width: min(520px, 100%); height: 50dvh; margin: 0; max-width: none; text-align: left; justify-self: end; margin-right: 6vw; }
  .pbeat { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; animation: beat linear both; animation-timeline: --film-p; animation-range: contain var(--a) contain var(--b); }
  .pbeat strong { font-size: clamp(2rem, 1rem + 2.8vw, 3.8rem); line-height: 1; letter-spacing: -0.035em; margin-bottom: var(--s-3); }
  .pbeat span { font-size: var(--fs-lead); }
  .pbeat:last-of-type { animation-name: beat-hold; }
  @keyframes beat-hold { 0% { opacity: 0; transform: translateY(46px) scale(.96); filter: blur(14px); } 22%, 100% { opacity: 1; transform: none; filter: blur(0); } }
  .film--p .phone { grid-column: 2; justify-self: start; margin: 0 0 0 4vw; height: min(76dvh, 760px); transform-origin: 50% 50%; will-change: transform; animation: p-cam linear both; animation-timeline: --film-p; animation-range: contain 0% contain 100%; }
  @keyframes p-cam {
    0%   { opacity: 0; transform: translateY(46dvh) rotateY(-34deg) rotateX(12deg) scale(.82); animation-timing-function: cubic-bezier(.22,1,.36,1); }
    14%  { opacity: 1; transform: translateY(0) rotateY(-10deg) rotateX(0) scale(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    24%  { transform: translateY(0) rotateY(0) rotateX(0) scale(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    32%, 50%  { transform: scale(1.55) translateY(11%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    58%, 76%  { transform: scale(1.55) translateY(-22%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    84%, 100% { transform: scale(1.7) translateY(-38%); }
  }
  .film--p .phone .device-note { display: none; }

  /* --- offerte: un pannello in prospettiva che si raddrizza e si avvicina --- */
  .film--o .film__stage { place-items: center; }
  .ohead { 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-o; animation-range: contain 0% contain 16%; }
  .panel3d { margin: 0; width: min(1000px, 90vw, 120dvh); will-change: transform; animation: o-cam linear both; animation-timeline: --film-o; animation-range: contain 0% contain 100%; }
  .panel3d .device-note { display: none; }
  @keyframes o-cam {
    0%   { opacity: 0; transform: translateX(16vw) rotateY(-36deg) rotateX(14deg) rotateZ(5deg) scale(.66); animation-timing-function: cubic-bezier(.22,1,.36,1); }
    14%  { opacity: 1; transform: translateX(0) rotateY(0) rotateX(0) rotateZ(0) scale(.84); }
    24%  { transform: scale(.84); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    30%, 52%  { transform: scale(2.1) translate(18%, 17%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    58%, 76%  { transform: scale(2.0) translate(-8%, 3%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    82%, 100% { transform: scale(1.5) translate(-2%, -20%); }
  }
}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
@supports (animation-timeline: view()) {
  .hero2 h1 { font-size: clamp(2.2rem, 1rem + 6.4vw, 3rem); }
  .laptop--hero { width: 96vw; bottom: 8dvh; }
  @keyframes laptop-rise { 0% { transform: translateY(46dvh) rotateX(40deg) scale(.9); filter: brightness(.65); } 100% { transform: translateY(0) rotateX(0) scale(1); filter: brightness(1); } }
  .laptop--zoom { width: 96vw; }
  .film--p .film__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; }
  .pbeats { grid-column: 1; grid-row: 2; height: 24dvh; justify-self: center; margin: 0; width: 88vw; text-align: center; }
  .film--p .phone { grid-column: 1; grid-row: 1; justify-self: center; margin: 0; height: 56dvh; }
  .pbeat strong { font-size: 1.7rem; }
  .pbeat span { font-size: var(--fs-small); }
  .film--p .film__stage { padding-top: calc(var(--header-h) + 3dvh); }
  .panel3d { width: 96vw; }
}
}

/* ================================================================================================
   TECH: HUD di avanzamento, pavimento a griglia, scansioni luminose, rete di particelle.
   ================================================================================================ */
.hud, .gridfloor, .net { display: none; }
.jsub { margin: var(--s-2) auto 0; max-width: 46ch; color: var(--ink-2); font-size: var(--fs-lead); }
.laptop__screen::before { content: ""; position: absolute; left: 0; right: 0; top: -24%; height: 22%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent); }

@media (prefers-reduced-motion: no-preference) {
  .laptop--hero .laptop__screen::before { animation: scan-loop 5.5s ease-in-out infinite 2.6s; }
  @keyframes scan-loop { 0% { top: -24%; opacity: 0; } 8%, 50% { opacity: .95; } 60%, 100% { top: 112%; opacity: 0; } }
}

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .net { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .75; z-index: 0; }
  .film--h .hero2, .film--h .laptop--hero { z-index: 1; }

  /* scansione che attraversa lo schermo mentre il portatile si apre */
  .laptop--zoom .laptop__screen::before { animation: scan-z linear both; animation-timeline: --film-z; animation-range: contain 8% contain 22%; }
  @keyframes scan-z { 0% { top: -24%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 112%; opacity: 0; } }

  /* pavimento a griglia: scorre mentre la candidatura avanza */
  .film--b .gridfloor {
    display: block; position: absolute; left: -25%; right: -25%; bottom: -8dvh; height: 64dvh; z-index: 0; pointer-events: none;
    transform: perspective(520px) rotateX(66deg); transform-origin: 50% 100%;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, transparent) 0 1px, transparent 1px 7vw), repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 42%, transparent) 0 1px, transparent 1px 7vw);
    -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 88%); mask-image: linear-gradient(to top, #000 12%, transparent 88%);
    animation: grid-run linear both; animation-timeline: --film-b; animation-range: contain 0% contain 100%;
  }
  @keyframes grid-run { from { background-position: 0 0, 0 0; } to { background-position: 0 84vw, 0 84vw; } }
  .film--b .journey, .film--b .jhead, .film--b .jcards, .film--b .jnote { position: relative; z-index: 1; }
  .film--b .jcards, .film--b .jnote { position: absolute; }

  /* HUD: la storia ha dei capitoli e si vede dove sei */
  @media (min-width: 1100px) {
    .hud { position: fixed; right: 20px; top: 50%; translate: 0 -50%; z-index: 45; display: grid; gap: 16px; justify-items: end; pointer-events: none; }
    .hud__t { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; }
    .hud__t[data-f="a"] { --tl: --film-a; } .hud__t[data-f="b"] { --tl: --film-b; } .hud__t[data-f="d"] { --tl: --film-d; }
    .hud__t[data-f="z"] { --tl: --film-z; } .hud__t[data-f="p"] { --tl: --film-p; } .hud__t[data-f="o"] { --tl: --film-o; }
    .hud__t b { font: 500 .75rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: 0; translate: 10px 0; animation: hud-b linear; animation-timeline: var(--tl); animation-range: contain 0% contain 100%; }
    .hud__t i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); animation: hud-i linear; animation-timeline: var(--tl); animation-range: contain 0% contain 100%; }
    @keyframes hud-b { 0%, 100% { opacity: 1; translate: 0 0; } }
    @keyframes hud-i { 0%, 100% { background: var(--accent); box-shadow: 0 0 14px var(--accent); scale: 1.7; } }
  }
}
}

/* l'ingresso è la prima battuta del problema: i .word del titolo non ereditano lo stile delle battute */
.film--a .beat--hero h1 .word { font-size: inherit; color: var(--ink); letter-spacing: inherit; }
.film--a .beat--hero h1 .word--accent { color: var(--accent); }

/* ---------- A: oggetti 3D in orbita (attivi solo con orbit.js; altrimenti restano le pillole) ---------- */
.orbit { display: none; }
html.has-orbit .film--a .chaos { display: none; }
html.has-orbit .film--a .orbit {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  perspective: 1200px; perspective-origin: 50% 46%;
  --heat: 0;
  --hc: color-mix(in srgb, var(--danger) calc(var(--heat) * 100%), var(--accent));
  --grain: .3;
}
.o3 { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform-style: preserve-3d; will-change: transform, opacity; }
.o3__cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.o3__f {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 23%; overflow: hidden; backface-visibility: hidden; color: #fff;
  background: linear-gradient(150deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 45%), linear-gradient(165deg, color-mix(in srgb, var(--bc) 94%, #fff), color-mix(in srgb, var(--bc) 70%, #000));
  border: 1px solid rgb(255 255 255 / .28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 -12px 28px rgb(0 0 0 / .26), 0 0 34px -10px var(--bc), 0 22px 40px -18px rgb(0 0 0 / .85);
}
/* grana da pellicola: rumore sopra icona e fondo, che si intensifica con l'instabilità */
.o3__f::before {
  content: ""; position: absolute; inset: -20%; z-index: 2; pointer-events: none; mix-blend-mode: overlay; opacity: var(--grain, .3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px; animation: grain 2.6s steps(5) infinite;
}
@keyframes grain { 0% { translate: 0 0; } 20% { translate: -6% 4%; } 40% { translate: 5% -7%; } 60% { translate: -4% -3%; } 80% { translate: 7% 5%; } 100% { translate: 0 0; } }
.o3__f::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, var(--danger), transparent 75%); mix-blend-mode: multiply; opacity: calc(var(--heat) * .38); }
.o3__f svg { position: relative; z-index: 1; width: 54%; height: 54%; fill: #fff; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .3)) drop-shadow(var(--gx, 0px) 0 0 rgb(255 30 80 / .85)) drop-shadow(calc(var(--gx, 0px) * -1) 0 0 rgb(0 225 255 / .85)); }
.o3__f1 { transform: translateZ(2px); }
.o3__f2 { transform: rotateY(180deg) translateZ(2px); }
.o3__lab { position: absolute; left: 50%; top: 100%; margin-top: calc(var(--s) * .62); translate: -50% 0; white-space: nowrap; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 0 12px #000; opacity: 0; transition: opacity .25s, color .2s, text-shadow .2s; }
.o3.is-hot .o3__f { border-color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 54px 2px var(--hc), 0 18px 34px -16px rgb(0 0 0 / .8); }
.o3.is-hot .o3__lab { color: #fff; text-shadow: 0 0 14px var(--hc); opacity: 1; }
@media (max-width: 767px) { .o3 { --s: calc(var(--s0, 64px) * .72); } .o3__lab { font-size: 9px; letter-spacing: .06em; } }
html.has-orbit .film--a .beats { z-index: 2; }
html.has-orbit .film--a .orbit { --q: 0; }
html.has-orbit .film--a .orbit::before { content: ""; position: absolute; left: 50%; top: 47%; width: 34vmin; height: 34vmin; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--accent) 80%, #fff) 22%, transparent 64%); opacity: calc(var(--q) * .95); scale: calc(.15 + var(--q) * 1.2); filter: blur(8px); }

/* ---------- A: dopo "Basta." arriva la soluzione, la dashboard ---------- */
.arrive { display: none; }
.zhead p { margin: var(--s-3) auto 0; max-width: 44ch; font-size: var(--fs-lead); color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .film--a .arrive { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; perspective: 1700px; }
    .film--a .arrive .zhead { opacity: 0; animation: a-title linear both; animation-timeline: --film-a; animation-range: contain 79% contain 90%; }
    @keyframes a-title { from { opacity: 0; transform: translateY(26px); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
    .laptop--arrive { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; width: min(1000px, 90vw, 120dvh); transform-origin: 50% 50%; opacity: 0; will-change: transform, opacity; animation: a-arrive linear both; animation-timeline: --film-a; animation-range: contain 74% contain 95%; }
    .laptop--arrive .device-note { display: none; }
    @keyframes a-arrive {
      0%   { opacity: 0; transform: rotateX(62deg) rotateZ(-16deg) scale(.1) translateY(10%); filter: blur(20px) brightness(2.4); }
      45%  { opacity: 1; filter: blur(0) brightness(1.3); }
      100% { opacity: 1; transform: scale(.8) translateY(7%); filter: none; }
    }
  }
}