/* SyncroFlow V3.1 — Direzione A «Titoli di testa» per il percorso 3D.
   I testi stanno sulla scena come titoli di un film: niente schede, un velo
   morbido e localizzato garantisce la lettura. Ogni tappa ha il suo ritmo.
   Ingresso: quando la camera arriva (.is-travelling viene rimossa).
   Permanenza: nessuna animazione continua. Uscita: rapida, mentre la camera parte. */

:root.film-ready{--sf-scrim:var(--sf-paper-rgb)}
:root.film-ready body{font-family:var(--sf-font-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root.film-ready .city-experience{
  --sf-text:var(--sf-ink);--sf-text-soft:var(--sf-ink-soft);--sf-text-muted:var(--sf-muted);
  --sf-rule:var(--sf-line);--sf-glow:rgb(var(--sf-scrim) / .75);
  font-family:var(--sf-font-text);
}
/* Il palco del Ticket è notturno: velo scuro e testo chiaro. */
:root.film-ready .city-experience[data-city-current="ticket"]{
  --sf-scrim:var(--sf-night-rgb);
  --sf-text:#f3f7fb;--sf-text-soft:#d5e1ec;--sf-text-muted:#a9bccd;
  --sf-rule:rgba(255,255,255,.18);--sf-glow:rgb(var(--sf-night-rgb) / .8);
}

/* ---------- Velo di lettura (sostituisce le schede in vetro) ---------- */
:root.film-ready .city-experience .city-stage-shade{background:linear-gradient(0deg,rgb(var(--sf-paper-rgb) / .55),transparent 20%)}
:root.film-ready .city-experience[data-city-current="ticket"] .city-stage-shade{background:linear-gradient(0deg,rgb(var(--sf-night-rgb) / .55),transparent 22%)}
:root.film-ready .city-experience .city-panels{
  right:clamp(28px,4.2vw,76px);left:auto;top:108px;bottom:132px;height:auto;max-height:none;
  width:clamp(340px,33vw,500px);container-type:inline-size;
}
:root.film-ready .city-experience .city-panels::before{
  content:"";position:absolute;z-index:-1;inset:-14% -42% -18% -46%;pointer-events:none;
  background:radial-gradient(58% 56% at 54% 50%,rgb(var(--sf-scrim) / .9) 0%,rgb(var(--sf-scrim) / .8) 42%,rgb(var(--sf-scrim) / .38) 68%,rgb(var(--sf-scrim) / 0) 100%);
  opacity:1;transition:opacity var(--sf-dur-very-slow) var(--sf-ease-out),background-color 0s;
}
:root.film-ready .city-experience.is-travelling .city-panels::before,
:root.film-ready .city-experience.is-finale .city-panels::before{opacity:0;transition-duration:var(--sf-dur-medium)}

/* ---------- Il «pannello» diventa un blocco di titoli senza contenitore ---------- */
:root.film-ready .city-experience .city-panel,
:root.film-ready .city-experience .city-panel.city-product,
:root.film-ready .city-experience .city-intro,
:root.film-ready .city-experience .city-sync{
  background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;
  color:var(--sf-text);
  /* Uscita: via in fretta, prima che la camera prenda velocità. */
  opacity:0;visibility:hidden;transform:translate3d(0,-6px,0);
  transition:opacity var(--sf-dur-fast) var(--sf-ease-in),transform var(--sf-dur-fast) var(--sf-ease-in),visibility 0s linear var(--sf-dur-fast);
}
:root.film-ready .city-experience:not(.is-travelling) .city-panel.is-current{
  opacity:1;visibility:visible;transform:none;transition:none;
}
:root.film-ready .city-experience.is-travelling .city-panel{opacity:0;visibility:hidden;pointer-events:none}
:root.film-ready .city-experience .city-panel-scroll,
:root.film-ready .city-experience .city-intro .city-panel-scroll{
  display:flex;flex-direction:column;align-items:flex-start;height:100%;overflow-y:auto;overflow-x:hidden;
  padding:8px 6px 8px 2px;scrollbar-width:thin;scrollbar-color:var(--sf-rule) transparent;
}
/* Centra verticalmente senza tagliare l'inizio quando il testo scorre. */
:root.film-ready .city-experience .city-panel-scroll::before,
:root.film-ready .city-experience .city-panel-scroll::after{content:"";flex:1 0 0;min-height:0}
:root.film-ready .city-experience .city-panel-scroll>*{flex:none;max-width:100%}
:root.film-ready .city-experience .city-panel :is(p,h1,h2,a,span,small,strong,b){text-shadow:0 0 18px var(--sf-glow),0 0 2px var(--sf-glow)}
/* Il titolo riceve il focus all'arrivo della camera (per i lettori di schermo): niente anello, non è un comando. */
:root.film-ready .city-experience .city-panel :is(h1,h2)[tabindex="-1"]:focus{outline:none}

/* ---------- Tipografia ---------- */
:root.film-ready .city-experience .city-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:0;
  font:600 var(--sf-size-small)/1.3 var(--sf-font-text);letter-spacing:.005em;text-transform:none;color:var(--sf-text-muted);
}
:root.film-ready .city-experience .city-eyebrow>span:first-child{
  font-size:.875em;font-weight:700;color:var(--sf-acc,var(--sf-link));font-variant-numeric:tabular-nums;letter-spacing:.04em;
  padding-right:12px;border-right:1px solid var(--sf-rule);
}
:root.film-ready .city-experience :is(.city-intro,.city-brand,.city-sync) .city-eyebrow{font-size:var(--sf-size-caption);letter-spacing:.12em}
:root.film-ready .city-experience .city-product{--sf-acc:color-mix(in oklab,var(--city-accent) 64%,#0b1f24)}
:root.film-ready .city-experience[data-city-current="ticket"] .city-product{--sf-acc:color-mix(in oklab,var(--city-accent) 82%,#fff)}

:root.film-ready .city-experience .city-product-heading{display:flex;align-items:center;gap:14px;margin:0 0 22px}
:root.film-ready .city-experience .city-product-heading img{width:46px;height:46px;border-radius:12px;background:none;box-shadow:none;filter:drop-shadow(0 6px 14px rgba(20,50,58,.18))}
:root.film-ready .city-experience .city-product-heading h2{
  margin:0;font:700 clamp(1.5rem,1.1rem + .9vw,1.875rem)/1.05 var(--sf-font-display);letter-spacing:-.02em;color:var(--sf-text);
}
:root.film-ready .city-experience .city-product-heading h2 small{
  display:block;margin:0 0 4px;font:500 var(--sf-size-caption)/1.2 var(--sf-font-text);letter-spacing:.02em;text-transform:none;color:var(--sf-text-muted);
}

:root.film-ready .city-experience .city-promise,
:root.film-ready .city-experience .city-panel h1,
:root.film-ready .city-experience :is(.city-brand,.city-sync) h2{
  margin:0 0 20px;max-width:none;
  font-family:var(--sf-font-display);font-size:var(--sf-size-title);font-size:min(var(--sf-size-title),var(--sf-fit,13.5cqi));font-weight:var(--sf-title-weight,620);
  line-height:.96;letter-spacing:var(--sf-title-tracking,-.04em);color:var(--sf-text);text-wrap:balance;
  font-variation-settings:"opsz" 96;
}
:root.film-ready .city-experience .city-panel h1{--sf-fit:15cqi}
:root.film-ready .city-experience :is(.city-brand,.city-sync) h2{--sf-fit:10.6cqi}
:root.film-ready .city-experience .city-panel h1 em{font:inherit;color:var(--sf-link);font-style:normal;letter-spacing:inherit}
:root.film-ready .city-experience .city-line{display:block;overflow:hidden;padding:.02em .06em .1em 0;margin-bottom:-.08em}
:root.film-ready .city-experience .city-line>span{display:block}

:root.film-ready .city-experience :is(.city-story,.city-intro-text){
  max-width:38ch;margin:0 0 22px;font:400 var(--sf-size-body)/1.55 var(--sf-font-text);color:var(--sf-text-soft);
}
:root.film-ready .city-experience :is(.city-product-note,.city-intro-note){
  max-width:40ch;margin:0 0 18px;font:500 var(--sf-size-caption)/1.5 var(--sf-font-text);color:var(--sf-text-muted);
}

/* ---------- Azioni ---------- */
:root.film-ready .city-experience .city-product .city-download-spotlight{
  position:static;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:0 0 26px;padding:0;background:none;border-radius:0;
}
:root.film-ready .city-experience :is(.city-product .city-download-cta,.city-intro .city-primary,.city-brand .city-primary,.city-sync .city-primary){
  display:inline-flex;align-items:center;gap:14px;width:auto;min-height:50px;padding:0 22px 0 24px;
  border:0;border-radius:var(--sf-radius-pill);
  background:var(--sf-acc,var(--sf-action));color:#fff;
  font:650 var(--sf-size-body)/1 var(--sf-font-text);letter-spacing:.005em;text-decoration:none;text-shadow:none;
  box-shadow:0 14px 30px -14px color-mix(in oklab,var(--sf-acc,var(--sf-action)) 80%,transparent);
  transition:transform var(--sf-dur-fast) var(--sf-ease-out),background-color var(--sf-dur-fast) var(--sf-ease-out),box-shadow var(--sf-dur-fast) var(--sf-ease-out);
}
:root.film-ready .city-experience[data-city-current="ticket"] .city-product .city-download-cta{color:#04182b}
:root.film-ready .city-experience :is(.city-product .city-download-cta,.city-intro .city-primary,.city-brand .city-primary,.city-sync .city-primary) span{font-size:1.05em;text-shadow:none;transition:transform var(--sf-dur-fast) var(--sf-ease-out)}
:root.film-ready .city-experience :is(.city-product .city-download-cta,.city-primary):hover{transform:translate3d(0,-2px,0)}
:root.film-ready .city-experience :is(.city-product .city-download-cta,.city-primary):hover span{transform:translate3d(2px,-2px,0)}
:root.film-ready .city-experience :is(.city-product .city-download-cta,.city-primary):active{transform:scale(.98);transition-duration:var(--sf-dur-micro)}
:root.film-ready .city-experience .city-product .city-download-cta:hover{background:color-mix(in oklab,var(--sf-acc) 86%,#000)}

:root.film-ready .city-experience :is(.city-product .city-download-help,.city-product-actions a,.city-secondary,.city-install-link,.city-room-links a){
  justify-self:auto;font:600 var(--sf-size-small)/1.3 var(--sf-font-text);color:var(--sf-text);
  text-decoration:underline;text-decoration-color:var(--sf-rule);text-decoration-thickness:1.5px;text-underline-offset:5px;
  transition:text-decoration-color var(--sf-dur-fast) var(--sf-ease-out),color var(--sf-dur-fast) var(--sf-ease-out);
}
:root.film-ready .city-experience :is(.city-product .city-download-help,.city-product-actions a,.city-secondary,.city-install-link,.city-room-links a):hover{text-decoration-color:currentColor;color:var(--sf-acc,var(--sf-link))}

/* Funzioni: un indice di capitoli, non una fila di bottoni. */
:root.film-ready .city-experience .city-feature-links{display:flex;flex-direction:column;gap:0;width:100%;margin:0 0 24px;border-top:1px solid var(--sf-rule)}
:root.film-ready .city-experience .city-feature-links a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:10px 2px;
  border:0;border-bottom:1px solid var(--sf-rule);border-radius:0;background:none;
  font:550 var(--sf-size-body)/1.25 var(--sf-font-text);color:var(--sf-text);
  transition:padding var(--sf-dur-fast) var(--sf-ease-out),color var(--sf-dur-fast) var(--sf-ease-out);
}
:root.film-ready .city-experience .city-feature-links a>span:last-child{font-size:1rem;color:var(--sf-acc,var(--sf-link));transition:transform var(--sf-dur-fast) var(--sf-ease-out)}
:root.film-ready .city-experience .city-feature-links a:hover{background:none;padding-left:8px;color:var(--sf-acc,var(--sf-link))}
:root.film-ready .city-experience .city-feature-links a:hover>span:last-child{transform:translate3d(2px,-2px,0)}

/* «Scopri l'app» e «Funzioni e piani» sulla stessa riga. */
:root.film-ready .city-experience .city-product .city-primary{
  display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 20px;margin:0;
  background:transparent;color:var(--sf-text);border:1.5px solid var(--sf-line-strong);border-radius:var(--sf-radius-pill);
  font:650 var(--sf-size-small)/1 var(--sf-font-text);box-shadow:none;
  transition:border-color var(--sf-dur-fast) var(--sf-ease-out),transform var(--sf-dur-fast) var(--sf-ease-out);
}
:root.film-ready .city-experience[data-city-current="ticket"] .city-product .city-primary{border-color:rgba(255,255,255,.4)}
:root.film-ready .city-experience .city-product .city-primary:hover{background:transparent;border-color:var(--sf-acc);color:var(--sf-text)}
:root.film-ready .city-experience .city-product .city-primary>span{font-size:1rem}
:root.film-ready .city-experience .city-product .city-primary+.city-product-actions{margin:-46px 0 0;padding-left:var(--sf-actions-gap,0);min-height:46px;align-items:center}
:root.film-ready .city-experience .city-product-actions{display:flex;width:100%;justify-content:flex-start;gap:16px;font-size:inherit;margin:0;padding:0}
:root.film-ready .city-experience .city-product .city-primary+.city-product-actions{pointer-events:none}
:root.film-ready .city-experience .city-product .city-product-actions a{margin-left:auto;pointer-events:auto}
:root.film-ready .city-experience .city-room-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0}
:root.film-ready .city-experience .city-room-links a{font-size:var(--sf-size-caption);color:var(--sf-text-muted)}

/* Home, Rotonda, SYNC */
:root.film-ready .city-experience .city-brand-emblem{width:112px;height:72px;margin:0 0 18px}
:root.film-ready .city-experience .v2-mother-logo{width:112px;height:auto;mix-blend-mode:normal;margin:0 0 18px}
:root.film-ready .city-experience .city-sync-symbol{display:block;margin:0 0 14px;font:700 var(--sf-size-caption)/1 var(--sf-font-text);letter-spacing:.3em;color:#9a7a33}
:root.film-ready .city-experience :is(.city-brand,.city-sync) .city-feature-links{margin-bottom:22px}
:root.film-ready .city-experience :is(.city-brand,.city-sync) .city-secondary,
:root.film-ready .city-experience .city-install-link{display:inline-block;margin:16px 0 0}
:root.film-ready .city-experience .city-sync .city-product-note{margin-top:20px}
:root.film-ready .city-experience .city-intro-note{margin-top:16px}

/* ---------- Comandi di scena ---------- */
:root.film-ready .city-experience .city-view-tools{top:96px;left:clamp(22px,3.2vw,52px);gap:8px}
:root.film-ready .city-experience :is(.city-view-tools button,.city-motion,.v2-dev-label){
  min-height:40px;padding:0 14px;gap:8px;border:1px solid var(--sf-line);border-radius:var(--sf-radius-pill);
  background:rgb(var(--sf-paper-rgb) / .86);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  font:600 var(--sf-size-caption)/1 var(--sf-font-text);color:var(--sf-ink);
  display:inline-flex;align-items:center;transition:background-color var(--sf-dur-fast) var(--sf-ease-out),border-color var(--sf-dur-fast) var(--sf-ease-out);
}
:root.film-ready .city-experience .v2-dev-label{background:transparent;border-style:dashed;color:var(--sf-muted);font-weight:500}
:root.film-ready .city-experience :is(.city-view-tools button,.city-motion):hover{background:var(--sf-surface);border-color:var(--sf-line-strong)}
:root.film-ready .city-experience .city-view-tools svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
:root.film-ready .city-experience .city-topbar{top:96px;right:clamp(22px,3.2vw,52px)}

/* ---------- Barra del percorso: un rullo sottile in basso ---------- */
:root.film-ready .city-experience .city-journey{
  left:clamp(22px,3.2vw,52px);right:clamp(22px,3.2vw,52px);bottom:22px;height:auto;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px;row-gap:0;
  padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;pointer-events:none;overflow:visible;
}
:root.film-ready .city-experience .city-journey-heading{display:contents}
:root.film-ready .city-experience .city-journey-heading>span:first-child{
  grid-column:1;grid-row:1;display:inline-flex;align-items:center;gap:8px;padding:0;background:none;border-radius:0;
  font:700 var(--sf-size-small)/1 var(--sf-font-text);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--sf-ink);
  text-shadow:0 0 14px rgb(var(--sf-paper-rgb) / .9);pointer-events:auto;
}
:root.film-ready .city-experience .city-journey-dot{width:7px;height:7px;border-radius:50%;background:var(--sf-link)}
:root.film-ready .city-experience .city-input-hint{
  grid-column:2;grid-row:2;justify-self:start;margin-top:6px;padding:0;background:none;border-radius:0;
  font:500 var(--sf-size-caption)/1.2 var(--sf-font-text);color:var(--sf-muted);text-shadow:0 0 12px rgb(var(--sf-paper-rgb) / .95);
}
:root.film-ready .city-experience .city-arrows{grid-column:3;grid-row:1;margin:0;gap:8px}
:root.film-ready .city-experience .city-arrows button{
  height:48px;min-height:48px;width:48px;min-width:48px;border-radius:var(--sf-radius-pill);
  background:rgb(var(--sf-paper-rgb) / .92);border:1px solid var(--sf-line);color:var(--sf-ink);box-shadow:none;font:600 1.125rem/1 var(--sf-font-text);
  transition:transform var(--sf-dur-fast) var(--sf-ease-out),background-color var(--sf-dur-fast) var(--sf-ease-out);
}
:root.film-ready .city-experience .city-arrows button[data-city-next]{
  display:inline-flex;align-items:center;width:auto;padding:0 22px;gap:14px;background:var(--sf-action);border-color:var(--sf-action);color:#fff;
  font:650 var(--sf-size-small)/1 var(--sf-font-text);box-shadow:0 14px 30px -16px rgba(20,50,58,.7);
}
:root.film-ready .city-experience .city-arrows button[data-city-next]:hover{background:var(--sf-action-hover);transform:translate3d(0,-2px,0)}
:root.film-ready .city-experience .city-arrows button:active{transform:scale(.97)}
:root.film-ready .city-experience #film-next-label{font-size:inherit}

:root.film-ready .city-experience .city-chapters{
  grid-column:2;grid-row:1;position:relative;inset:auto;width:auto;transform:none;
  display:flex;justify-content:space-between;gap:4px;padding:0;overflow-x:auto;scrollbar-width:none;pointer-events:auto;
  border-top:1px solid var(--sf-line-strong);
}
:root.film-ready .city-experience .city-chapters::-webkit-scrollbar{display:none}
:root.film-ready .city-experience .city-chapters a{
  position:relative;flex:0 0 auto;min-height:44px;padding:12px 8px 6px;background:none;border:0;border-radius:0;color:var(--sf-muted);
  text-shadow:0 0 12px rgb(var(--sf-paper-rgb) / .95);
}
:root.film-ready .city-experience .city-chapters a>b{font:550 var(--sf-size-small)/1 var(--sf-font-text);letter-spacing:0;color:inherit}
:root.film-ready .city-experience .city-chapters a::after{
  content:"";position:absolute;left:8px;right:8px;top:-1px;height:3px;border-radius:0 0 2px 2px;background:var(--sf-link);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--sf-dur-slow) var(--sf-ease-out);
}
:root.film-ready .city-experience .city-chapters a:hover{background:none;color:var(--sf-ink)}
:root.film-ready .city-experience .city-chapters a[aria-current="location"]{background:none;color:var(--sf-ink);border:0}
:root.film-ready .city-experience .city-chapters a[aria-current="location"]>b{font-weight:700}
:root.film-ready .city-experience .city-chapters a[aria-current="location"]::after{transform:none}
:root.film-ready .city-experience .city-progress{display:none}

/* Sul palco notturno i comandi restano leggibili. */
:root.film-ready .city-experience[data-city-current="ticket"] :is(.city-chapters a,.city-input-hint,.city-journey-heading>span:first-child){color:#e3ecf5;text-shadow:0 0 12px rgb(var(--sf-night-rgb) / .9)}
:root.film-ready .city-experience[data-city-current="ticket"] .city-chapters{border-top-color:rgba(255,255,255,.3)}
:root.film-ready .city-experience[data-city-current="ticket"] .city-chapters a::after{background:#5fd3f5}

/* ==================== Coreografie d'ingresso ==================== */
@keyframes sf-rise{from{opacity:0;transform:translate3d(0,var(--sf-y,12px),0)}to{opacity:1;transform:none}}
@keyframes sf-soft{from{opacity:0;transform:translate3d(0,18px,0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes sf-line{from{transform:translate3d(0,108%,0)}to{transform:none}}
@keyframes sf-wipe{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% -2% -10% 0)}}
@keyframes sf-build{from{clip-path:inset(100% 0 -10% 0);transform:translate3d(0,.18em,0)}to{clip-path:inset(-10% -2% -10% 0);transform:none}}
@keyframes sf-stately{from{opacity:0;transform:translate3d(0,.32em,0) scale(1.035)}to{opacity:1;transform:none}}
@keyframes sf-pop{0%{opacity:0;transform:scale(.88)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes sf-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes sf-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sf-corner{from{opacity:0;transform:scale(.4)}to{opacity:.6;transform:none}}

/* Ordine di comparsa condiviso; ogni app ne cambia il ritmo. */
:root.film-ready .city-experience .city-panel{
  --sf-step:70ms;--sf-start:60ms;--sf-dur:var(--sf-dur-very-slow);--sf-ease:var(--sf-ease-out);--sf-y:12px;
  --sf-anim:sf-rise;--sf-title-anim:sf-line;--sf-title-dur:640ms;--sf-title-ease:var(--sf-ease-out);--sf-line-step:90ms;
}
:root.film-ready .city-experience .city-panel-scroll>.city-eyebrow{--i:0}
:root.film-ready .city-experience .city-panel-scroll>:is(.city-product-heading,.city-brand-emblem,.v2-mother-logo,.city-sync-symbol){--i:1}
:root.film-ready .city-experience .city-panel-scroll>.city-download-spotlight{--i:2}
:root.film-ready .city-experience .city-panel-scroll>:is(.city-promise,h1,h2){--i:3}
:root.film-ready .city-experience .city-panel-scroll>:is(.city-story,.city-intro-text){--i:5}
:root.film-ready .city-experience .city-panel-scroll>.city-feature-links{--i:6}
:root.film-ready .city-experience .city-panel-scroll>:is(.city-product-note,.city-primary,.city-product-actions,.city-room-links,.city-secondary,.city-install-link,.city-intro-note,.city-intro-links,.film-start-status){--i:7}

:root.film-ready .city-experience:not(.is-travelling) .city-panel.is-current .city-panel-scroll>:not(.city-promise):not(.city-line){
  animation:var(--sf-anim) var(--sf-dur) var(--sf-ease) both;animation-delay:calc(var(--sf-start) + var(--i,4) * var(--sf-step));
}
:root.film-ready .city-experience:not(.is-travelling) .city-panel.is-current .city-promise .city-line>span{
  animation:var(--sf-title-anim) var(--sf-title-dur) var(--sf-title-ease) both;
  animation-delay:calc(var(--sf-start) + 3 * var(--sf-step));
}
:root.film-ready .city-experience:not(.is-travelling) .city-panel.is-current .city-promise .city-line+.city-line>span{
  animation-delay:calc(var(--sf-start) + 3 * var(--sf-step) + var(--sf-line-step));
}

/* FAMILY — emozione: comparsa morbida, sfocata, quasi un respiro. */
:root.film-ready .city-experience [data-city-panel="family"]{
  --sf-anim:sf-soft;--sf-dur:820ms;--sf-step:110ms;--sf-ease:cubic-bezier(.25,.9,.3,1);
  --sf-title-anim:sf-soft;--sf-title-dur:980ms;--sf-line-step:160ms;--sf-title-weight:560;--sf-title-tracking:-.035em;
}
:root.film-ready .city-experience [data-city-panel="family"] .city-line{overflow:visible}

/* MONEY — precisione: le righe si scrivono da sinistra, in ordine esatto. */
:root.film-ready .city-experience [data-city-panel="money"]{
  --sf-anim:sf-rise;--sf-y:6px;--sf-dur:420ms;--sf-step:55ms;--sf-ease:cubic-bezier(.65,0,.35,1);
  --sf-title-anim:sf-wipe;--sf-title-dur:620ms;--sf-title-ease:cubic-bezier(.65,0,.35,1);--sf-line-step:120ms;
  --sf-title-weight:650;--sf-title-tracking:-.03em;
}
:root.film-ready .city-experience [data-city-panel="money"] .city-promise{--sf-fit:10.4cqi}
:root.film-ready .city-experience [data-city-panel="service"] .city-promise{--sf-fit:11.6cqi}
:root.film-ready .city-experience [data-city-panel="ticket"] .city-promise{--sf-fit:12.6cqi}
:root.film-ready .city-experience [data-city-panel="money"] .city-eyebrow{position:relative;padding-bottom:12px;width:100%}
:root.film-ready .city-experience [data-city-panel="money"] .city-eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:72px;height:2px;background:var(--sf-acc);transform-origin:left center;
}
:root.film-ready .city-experience:not(.is-travelling) [data-city-panel="money"].is-current .city-eyebrow::after{animation:sf-draw 520ms cubic-bezier(.65,0,.35,1) 200ms both}

/* PERSONAL — tempo: elementi scanditi a intervalli regolari, come i secondi. */
:root.film-ready .city-experience [data-city-panel="personal"]{
  --sf-anim:sf-rise;--sf-y:8px;--sf-dur:300ms;--sf-step:120ms;--sf-ease:var(--sf-ease-out);
  --sf-title-anim:sf-line;--sf-title-dur:420ms;--sf-line-step:240ms;--sf-title-weight:600;
}
:root.film-ready .city-experience [data-city-panel="personal"] .city-product-heading{position:relative;padding-bottom:12px}
:root.film-ready .city-experience [data-city-panel="personal"] .city-product-heading::after{
  content:"";position:absolute;left:60px;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--sf-acc),transparent);transform-origin:left center;
}
:root.film-ready .city-experience:not(.is-travelling) [data-city-panel="personal"].is-current .city-product-heading::after{animation:sf-draw 1200ms linear 160ms both}

/* SERVICE & QUOTES — progettazione: il titolo si costruisce dal basso, con i segni di squadra. */
:root.film-ready .city-experience [data-city-panel="service"]{
  --sf-anim:sf-rise;--sf-y:10px;--sf-dur:400ms;--sf-step:70ms;--sf-ease:cubic-bezier(.4,0,.2,1);
  --sf-title-anim:sf-build;--sf-title-dur:560ms;--sf-title-ease:cubic-bezier(.4,0,.2,1);--sf-line-step:140ms;
  --sf-title-weight:680;--sf-title-tracking:-.03em;
}
:root.film-ready .city-experience [data-city-panel="service"] .city-promise{position:relative;width:fit-content;padding:12px 18px 12px 14px;margin-left:-14px}
:root.film-ready .city-experience [data-city-panel="service"] .city-promise::before,
:root.film-ready .city-experience [data-city-panel="service"] .city-promise::after{
  content:"";position:absolute;width:16px;height:16px;border-color:var(--sf-acc);border-style:solid;opacity:.6;
}
:root.film-ready .city-experience [data-city-panel="service"] .city-promise::before{left:0;top:0;border-width:2px 0 0 2px;transform-origin:top left}
:root.film-ready .city-experience [data-city-panel="service"] .city-promise::after{right:0;bottom:0;border-width:0 2px 2px 0;transform-origin:bottom right}
:root.film-ready .city-experience:not(.is-travelling) [data-city-panel="service"].is-current .city-promise::before{animation:sf-corner 360ms var(--sf-ease-out) 120ms both}
:root.film-ready .city-experience:not(.is-travelling) [data-city-panel="service"].is-current .city-promise::after{animation:sf-corner 360ms var(--sf-ease-out) 520ms both}

/* ESTATE — prestigio: titolo più autorevole, entrata decisa e composta. */
:root.film-ready .city-experience [data-city-panel="estate"]{
  --sf-anim:sf-rise;--sf-y:14px;--sf-dur:600ms;--sf-step:80ms;--sf-ease:cubic-bezier(.16,1,.3,1);
  --sf-title-anim:sf-stately;--sf-title-dur:900ms;--sf-title-ease:cubic-bezier(.16,1,.3,1);--sf-line-step:0ms;
  --sf-title-weight:760;--sf-title-tracking:-.045em;
}
:root.film-ready .city-experience [data-city-panel="estate"] .city-promise{--sf-fit:14.5cqi;line-height:.93}
:root.film-ready .city-experience [data-city-panel="estate"] .city-line{overflow:visible}

/* TICKET — energia: entrata scenografica e un solo passaggio di luce sul titolo. */
:root.film-ready .city-experience [data-city-panel="ticket"]{
  --sf-anim:sf-rise;--sf-y:16px;--sf-dur:380ms;--sf-step:45ms;--sf-ease:var(--sf-ease-bounce);
  --sf-title-anim:sf-pop;--sf-title-dur:520ms;--sf-title-ease:var(--sf-ease-bounce);--sf-line-step:70ms;
  --sf-title-weight:720;--sf-title-tracking:-.035em;
}
:root.film-ready .city-experience [data-city-panel="ticket"] .city-line{overflow:visible}
:root.film-ready .city-experience [data-city-panel="ticket"] .city-line>span{
  background:linear-gradient(100deg,currentColor 0 42%,#bff0ff 50%,currentColor 58% 100%) 0 0/260% 100% no-repeat;text-shadow:none;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transform-origin:left 70%;
}
:root.film-ready .city-experience:not(.is-travelling) [data-city-panel="ticket"].is-current .city-promise .city-line>span{
  animation:sf-pop 520ms var(--sf-ease-bounce) both,sf-sweep 1100ms cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(var(--sf-start) + 3 * var(--sf-step)),calc(var(--sf-start) + 3 * var(--sf-step) + 260ms);
}
:root.film-ready .city-experience:not(.is-travelling) [data-city-panel="ticket"].is-current .city-promise .city-line+.city-line>span{
  animation-delay:calc(var(--sf-start) + 3 * var(--sf-step) + 70ms),calc(var(--sf-start) + 3 * var(--sf-step) + 330ms);
}

/* HOME, ROTONDA, SYNC — il marchio: ritmo neutro e pulito. */
:root.film-ready .city-experience :is([data-city-panel="home"],[data-city-panel="syncroflow"],[data-city-panel="sync"]){--sf-dur:560ms;--sf-step:80ms;--sf-title-weight:600}

/* ==================== Tablet ==================== */
@media (max-width:1100px) and (min-width:761px){
  :root.film-ready .city-experience .city-panels{width:min(400px,44vw);right:28px}
  :root.film-ready .city-experience .city-input-hint{display:none}
  :root.film-ready .city-experience .city-journey{column-gap:16px}
}
@media (max-height:780px) and (min-width:761px){
  :root.film-ready .city-experience{--sf-size-title:clamp(2.4rem,1.6rem + 2.6vw,3.6rem)}
  :root.film-ready .city-experience .city-panels{top:92px;bottom:108px}
  :root.film-ready .city-experience :is(.city-view-tools,.city-topbar){top:84px}
  :root.film-ready .city-experience .city-input-hint{display:none}
}

/* Tablet in verticale: la camera inquadra a tutto schermo, quindi il testo scende in basso. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  :root.film-ready .city-experience .city-panels{left:clamp(28px,5vw,48px);right:clamp(28px,5vw,48px);width:auto;top:auto;bottom:128px;height:calc(100svh - 128px - 52svh);min-height:300px}
  :root.film-ready .city-experience .city-panels::before{
    inset:-30% -48px -150px -48px;
    background:linear-gradient(0deg,rgb(var(--sf-scrim) / .96) 0%,rgb(var(--sf-scrim) / .9) 60%,rgb(var(--sf-scrim) / .5) 82%,rgb(var(--sf-scrim) / 0) 100%);
  }
  :root.film-ready .city-experience .city-panel-scroll{max-width:640px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 14px),transparent 100%)}
  :root.film-ready .city-experience .city-panel-scroll::after{display:none}
}

/* ==================== Smartphone ==================== */
@media (max-width:760px){
  :root.film-ready .city-experience{--sf-size-title:clamp(2.1rem,1.5rem + 3.4vw,2.75rem)}
  /* Il testo parte sotto l'oggetto inquadrato (la camera lo alza del 19%) e scorre al suo interno. */
  :root.film-ready .city-experience .city-panels{left:20px;right:20px;width:auto;top:auto;bottom:118px;max-height:none;min-height:240px;height:calc(100svh - 118px - 46svh)}
  :root.film-ready .city-experience .city-panels::before{
    inset:-34% -20px -130px -20px;
    background:linear-gradient(0deg,rgb(var(--sf-scrim) / .97) 0%,rgb(var(--sf-scrim) / .93) 60%,rgb(var(--sf-scrim) / .55) 82%,rgb(var(--sf-scrim) / 0) 100%);
  }
  :root.film-ready .city-experience .city-panel-scroll,
  :root.film-ready .city-experience .city-intro .city-panel-scroll{
    padding:18px 2px 12px 0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 14px),transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 14px),transparent 100%);
  }
  /* Sul telefono il testo parte dal basso, vicino al pollice. */
  :root.film-ready .city-experience .city-panel-scroll::after{display:none}
  :root.film-ready .city-experience .city-eyebrow{font-size:var(--sf-size-caption);margin-bottom:12px}
  :root.film-ready .city-experience .city-product-heading{margin-bottom:14px}
  :root.film-ready .city-experience .city-product-heading img{width:40px;height:40px}
  :root.film-ready .city-experience .city-product-heading h2{font-size:1.5rem}
  :root.film-ready .city-experience .city-product .city-download-spotlight{margin-bottom:18px;gap:8px 18px}
  :root.film-ready .city-experience :is(.city-promise,.city-panel h1,.city-brand h2,.city-sync h2){margin-bottom:14px;max-width:none}
  :root.film-ready .city-experience :is(.city-story,.city-intro-text){font-size:1rem;margin-bottom:16px}
  :root.film-ready .city-experience .city-brand-emblem{display:block;width:84px;height:54px;margin-bottom:10px}
  :root.film-ready .city-experience .v2-mother-logo{width:84px;margin-bottom:10px}
  :root.film-ready .city-experience .city-sync-symbol{display:block}
  :root.film-ready .city-experience .city-room-links{margin-top:16px}

  :root.film-ready .city-experience .city-view-tools{top:80px;left:16px;gap:6px}
  :root.film-ready .city-experience .city-topbar{top:80px;right:16px}
  :root.film-ready .city-experience :is(.city-view-tools button,.city-motion){min-height:40px;padding:0 12px}
  :root.film-ready .city-experience .city-view-tools :is(button[data-film-stats],.v2-dev-label){display:none}
  :root.film-ready .city-experience :is(.city-view-tools button,.city-motion){white-space:nowrap}

  :root.film-ready .city-experience .city-journey{
    left:0;right:0;bottom:0;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:6px;
    padding:0 16px max(14px,env(safe-area-inset-bottom));
  }
  :root.film-ready .city-experience .city-chapters{
    grid-column:1 / -1;grid-row:1;justify-content:flex-start;gap:2px;margin:0 -16px;padding:0 16px;border-top:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }
  :root.film-ready .city-experience .city-chapters a{min-height:40px;padding:10px 10px 8px}
  :root.film-ready .city-experience .city-chapters a::after{top:auto;bottom:2px;left:10px;right:10px;border-radius:2px}
  :root.film-ready .city-experience .city-journey-heading>span:first-child{grid-column:1;grid-row:2}
  :root.film-ready .city-experience .city-arrows{grid-column:2;grid-row:2;justify-self:end}
  :root.film-ready .city-experience .city-arrows button{height:46px;min-height:46px;width:46px;min-width:46px}
  :root.film-ready .city-experience .city-arrows button[data-city-next]{width:auto;padding:0 18px}
}
@media (max-width:380px){
  :root.film-ready .city-experience .city-panels{left:16px;right:16px}
  :root.film-ready .city-experience .city-view-tools button span{display:none}
  :root.film-ready .city-experience .city-view-tools button{width:40px;padding:0;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  :root.film-ready .city-experience .city-panel,
  :root.film-ready .city-experience .city-panels::before{transition:none!important}
  :root.film-ready .city-experience .city-panel *,:root.film-ready .city-experience .city-panel *::before,:root.film-ready .city-experience .city-panel *::after{animation:none!important}
}

/* Strumenti di sviluppo: nascosti al pubblico, visibili in locale o con ?verifica (classe .sf-dev da site.js). */
:root.film-ready:not(.sf-dev) .city-experience .city-view-tools :is([data-film-stats],.v2-dev-label){display:none}