/* ==========================================================================
   Scene: personaggio, parete 3D, dispositivi, racconti a scorrimento, recensioni,
   domande, mattoncini, ruoli. Complemento di main.css (stessi token e spazi).
   ========================================================================== */

/* --- Apertura: parete 3D e personaggio ------------------------------------ */

.fl-hero { isolation: isolate; }
.fl-wall {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 25%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 70% 40%, #000 25%, transparent 75%);
}
.fl-wall__plane {
  position: absolute;
  top: -30%;
  left: 18%;
  width: 120%;
  height: 160%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  transform: rotateX(48deg) rotateZ(-28deg) translateZ(-80px);
  transform-style: preserve-3d;
  opacity: .5;
  transition: transform 1.2s var(--fl-ease);
}
.fl-wall__col { display: flex; flex-direction: column; gap: 18px; animation: fl-wall-up 60s linear infinite; animation-delay: calc(var(--c) * -9s); }
.fl-wall__col:nth-child(even) { animation-name: fl-wall-down; }
@keyframes fl-wall-up { to { transform: translateY(-50%); } }
@keyframes fl-wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.fl-wall__tile { display: block; overflow: hidden; border-radius: 10px; background: var(--fl-ink-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.fl-wall__tile--wide { aspect-ratio: 16 / 10; }
.fl-wall__tile--tall { aspect-ratio: 9 / 16; width: 70%; align-self: center; }
.fl-wall__tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fl-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .55) 55%, rgba(11, 11, 12, .2) 100%), linear-gradient(0deg, var(--fl-ink) 0%, transparent 30%);
  pointer-events: none;
}
@media (max-width: 899px) {
  .fl-wall__plane { left: -10%; width: 160%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fl-wall__col:nth-child(n+5) { display: none; }
}

/* --- Dispositivi ---------------------------------------------------------- */

.fl-dev { position: relative; margin: 0; }
.fl-dev__body {
  position: relative;
  display: block;
  padding: 2.2%;
  border-radius: 18px;
  background: linear-gradient(145deg, #2c2c31, #111113 55%, #232328);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px #000;
}
.fl-dev__glass { position: relative; display: block; overflow: hidden; border-radius: 8px; background: #fff; isolation: isolate; }
.fl-dev--computer .fl-dev__glass { aspect-ratio: 16 / 10; }
.fl-dev--tablet .fl-dev__body { padding: 4.5%; border-radius: 26px; }
.fl-dev--tablet .fl-dev__glass { aspect-ratio: 820 / 1180; border-radius: 12px; }
.fl-dev--telefono .fl-dev__body { padding: 5%; border-radius: 34px; }
.fl-dev--telefono .fl-dev__glass { aspect-ratio: 390 / 844; border-radius: 24px; }
.fl-dev--telefono .fl-dev__body::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 3.2%;
  left: 50%;
  width: 30%;
  height: 2.6%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.fl-dev__base {
  display: block;
  width: 118%;
  height: 14px;
  margin: -1px 0 0 -9%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#4a4a50, #1b1b1e);
  box-shadow: 0 24px 40px rgba(0, 0, 0, .5);
}
.fl-dev__base::after { content: ""; display: block; width: 16%; height: 5px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #111; }
.fl-dev__glare {
  position: absolute;
  inset: 2.2%;
  z-index: 2;
  border-radius: 8px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}
.fl-screen { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .7s var(--fl-ease); }
.fl-screen[data-step="-1"], .fl-screen.is-on { opacity: 1; }
.fl-screen.is-on ~ .fl-screen[data-step="-1"], .fl-dev__glass:has(.fl-screen.is-on) .fl-screen[data-step="-1"]:not(.is-on) { opacity: 0; }
.fl-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fl-screen--full img { height: auto; min-height: 100%; object-fit: initial; transform: translate3d(0, var(--shift, 0px), 0); will-change: transform; }

/* --- Palco: tre dispositivi, luce, logo ----------------------------------- */

.fl-stage {
  position: relative;
  height: 100%;
  min-height: 420px;
  perspective: 1600px;
  isolation: isolate;
}
.fl-stage__light {
  position: absolute;
  z-index: -1;
  inset: -10% -10% 0;
  background: radial-gradient(50% 45% at 55% 45%, color-mix(in srgb, var(--accent, #c6ff3d) 32%, transparent), transparent 70%);
  transition: background 1s var(--fl-ease);
}
.fl-stage__floor {
  position: absolute;
  z-index: -1;
  right: 5%;
  bottom: 9%;
  left: 5%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}
.fl-stage__rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--fl-ease); }
/* I dispositivi sono disegnati alla misura del primo piano e rimpiccioliti quando stanno dietro:
   così restano nitidi (un ingrandimento con scale sgranerebbe le schermate). */
.fl-stage .fl-dev {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateZ(var(--z, 0)) scale(var(--s, 1));
  transform-origin: 50% 50%;
  opacity: var(--o, 1);
  filter: blur(var(--b, 0));
  transition: left 1s var(--fl-ease), top 1s var(--fl-ease), transform 1s var(--fl-ease), opacity .8s var(--fl-ease), filter .8s;
}
.fl-stage .fl-dev--computer { width: 78%; z-index: 1; }
.fl-stage .fl-dev--tablet { width: 36%; z-index: 2; }
.fl-stage .fl-dev--telefono { width: 23%; z-index: 3; }

/* Tutti insieme (anche la composizione iniziale). */
.fl-stage .fl-dev--computer { --x: 0%; --y: 10%; --s: .9; }
.fl-stage .fl-dev--tablet { --x: 58%; --y: 14%; --s: .62; }
.fl-stage .fl-dev--telefono { --x: 76%; --y: 22%; --s: .6; }
/* Computer in primo piano. */
.fl-stage[data-screen="computer"] .fl-dev--computer { --x: 6%; --y: 8%; --s: 1; --z: 60px; }
.fl-stage[data-screen="computer"] .fl-dev--tablet { --x: 66%; --y: 22%; --s: .42; --o: .25; --b: 2px; }
.fl-stage[data-screen="computer"] .fl-dev--telefono { --x: 80%; --y: 30%; --s: .4; --o: .25; --b: 2px; }
/* Tablet in primo piano. */
.fl-stage[data-screen="tablet"] .fl-dev--computer { --x: -6%; --y: 16%; --s: .62; --o: .25; --b: 2px; }
.fl-stage[data-screen="tablet"] .fl-dev--tablet { --x: 32%; --y: -4%; --s: 1; --z: 80px; }
.fl-stage[data-screen="tablet"] .fl-dev--telefono { --x: 74%; --y: 24%; --s: .52; --o: .5; }
/* Telefono in primo piano. */
.fl-stage[data-screen="telefono"] .fl-dev--computer { --x: -8%; --y: 18%; --s: .6; --o: .2; --b: 3px; }
.fl-stage[data-screen="telefono"] .fl-dev--tablet { --x: 60%; --y: 14%; --s: .5; --o: .3; --b: 2px; }
.fl-stage[data-screen="telefono"] .fl-dev--telefono { --x: 38%; --y: -6%; --s: 1; --z: 100px; }
/* Logo in primo piano: i dispositivi si fanno da parte. */
.fl-stage[data-screen="logo"] .fl-dev { --o: .12; --b: 4px; --s: .7; }

.fl-stage__logos { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; pointer-events: none; }
.fl-stage__logo { grid-area: 1 / 1; opacity: 0; transform: scale(.7) translateY(20px); transition: opacity .7s var(--fl-ease), transform .9s var(--fl-ease); }
.fl-stage[data-screen="logo"] .fl-stage__logo.is-on { opacity: 1; transform: none; }

/* Logo dei lavori su lastra chiara: si legge su qualunque fondo. */
.fl-logo-plate {
  display: inline-grid;
  place-items: center;
  width: clamp(140px, 22vw, 300px);
  aspect-ratio: 1;
  padding: 12%;
  border-radius: 28%;
  background: radial-gradient(circle at 30% 25%, #fff, #e9e7e1);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 0 80px color-mix(in srgb, var(--accent, #c6ff3d) 40%, transparent);
}
.fl-logo-plate img { width: 100%; height: 100%; object-fit: contain; }
.fl-logo-plate__type { color: var(--fl-ink); font-family: var(--fl-display); font-weight: 850; font-stretch: 112%; font-size: clamp(18px, 2.4vw, 32px); line-height: 1; text-align: center; text-transform: uppercase; }
.fl-logo-plate--small { width: 76px; padding: 12px; border-radius: 22px; box-shadow: 0 16px 30px rgba(0, 0, 0, .4); }
.fl-logo-plate--tiny { width: 44px; padding: 7px; border-radius: 13px; box-shadow: none; }
.fl-logo-plate--tiny .fl-logo-plate__type, .fl-logo-plate--small .fl-logo-plate__type { font-size: 11px; }
.fl-logo-plate--hero { width: clamp(120px, 16vw, 200px); }

/* --- Racconto a scorrimento ------------------------------------------------ */

.fl-story { padding-top: var(--fl-section-y); overflow-x: clip; }
.fl-story__head { padding-bottom: var(--fl-space-4); }
.fl-story__intro { max-width: 52ch; font-size: 20px; line-height: 1.6; color: var(--fl-muted); }
.fl-story__intro p { margin: 0; }
.fl-scene {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--fl-space-5);
}
.fl-scene__stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.fl-scene__stage .fl-stage { width: 100%; height: min(78svh, 640px); }
.fl-scene__steps { grid-column: 1; grid-row: 1; }
.fl-chapter-step { min-height: 92svh; display: flex; align-items: center; }
.fl-chapter-step:first-child { min-height: 70svh; }
.fl-chapter-step__card { max-width: 46ch; transition: opacity .6s var(--fl-ease), transform .8s var(--fl-ease); }
.js .fl-chapter-step:not(.is-active) .fl-chapter-step__card { opacity: .22; transform: translateY(12px); }
.fl-chapter-step__label { color: var(--accent, var(--fl-accent)); margin-bottom: var(--fl-space-2); }
.fl-chapter-step__title {
  margin: 0 0 var(--fl-space-3);
  font-family: var(--fl-display);
  font-weight: var(--fl-display-weight);
  font-stretch: var(--fl-display-stretch);
  text-transform: var(--fl-display-case);
  letter-spacing: var(--fl-display-track);
  font-size: clamp(30px, 3.4vw, 56px);
  line-height: 1.05;
}
.fl-chapter-step__text { font-size: 18px; color: var(--fl-muted); }
.fl-chapter-step__link { margin-top: var(--fl-space-3); }

@media (max-width: 899px) {
  .fl-scene { display: block; position: relative; }
  .fl-scene__stage { position: sticky; top: var(--fl-header-h); z-index: 1; height: 52svh; }
  .fl-scene__stage .fl-stage { height: 100%; min-height: 0; }
  .fl-scene__steps { position: relative; z-index: 2; margin-top: -10svh; }
  .fl-chapter-step, .fl-chapter-step:first-child { min-height: 80svh; align-items: flex-end; padding-bottom: 6svh; }
  .fl-chapter-step__card { padding: var(--fl-space-3); border: 1px solid var(--fl-line); border-radius: 16px; background: rgba(11, 11, 12, .9); }
  .js .fl-chapter-step:not(.is-active) .fl-chapter-step__card { opacity: .5; }
}

/* --- Lavori scelti: scena con i dispositivi -------------------------------- */

.fl-reel__item { background: var(--fl-ink); }
.fl-reel__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 72% 45%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--work) 70%, #000), var(--fl-ink) 70%);
}
.fl-reel__inner { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--fl-space-4); }
.fl-reel__caption { position: static; display: grid; justify-items: start; gap: var(--fl-space-2); }
.fl-reel__title { font-size: clamp(40px, 6vw, 110px); }
.fl-reel__summary { font-size: 18px; }
.fl-reel__devices { position: relative; height: 70%; }
.fl-reel__devices .fl-dev { position: absolute; transition: transform 1.2s var(--fl-ease); }
.fl-reel__devices .fl-dev--computer { top: 10%; left: 0; width: 78%; }
.fl-reel__devices .fl-dev--tablet { top: 24%; left: 66%; width: 26%; }
.fl-reel__devices .fl-dev--telefono { top: 40%; left: 84%; width: 15%; }
.fl-reel__link:hover .fl-reel__devices .fl-dev--computer { transform: translateY(-2%) rotate(-1deg); }
.fl-reel__link:hover .fl-reel__devices .fl-dev--telefono { transform: translateY(-6%) rotate(3deg); }
@media (max-width: 899px) {
  .fl-reel__inner { grid-template-columns: minmax(0, 1fr); align-content: end; padding-bottom: var(--fl-space-4); }
  .fl-reel__devices { order: -1; height: 40svh; }
}

/* --- Recensioni ------------------------------------------------------------ */

.fl-reviews { padding-top: var(--fl-section-y); }
.fl-reviews__track {
  display: flex;
  gap: var(--fl-space-3);
  padding: var(--fl-space-2) var(--fl-gutter) var(--fl-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--fl-gutter);
  scrollbar-color: var(--fl-line) transparent;
}
@media (min-width: 1450px) { .fl-reviews__track { padding-inline: calc((100vw - var(--fl-width)) / 2); } }
.fl-review {
  position: relative;
  flex: 0 0 min(86vw, 620px);
  margin: 0;
  padding: var(--fl-space-5) var(--fl-space-4) var(--fl-space-4);
  border: 1px solid var(--fl-line);
  border-radius: 24px;
  background: radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--fl-ink-2);
  scroll-snap-align: start;
  overflow: hidden;
}
.fl-review__mark { position: absolute; top: -.18em; left: .1em; font-family: Georgia, serif; font-size: 220px; line-height: 1; color: var(--accent); opacity: .5; }
.fl-review__text { position: relative; margin: 0; }
.fl-review__body p { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.45; font-weight: 500; }
.fl-review__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fl-space-2); margin-top: var(--fl-space-4); padding-top: var(--fl-space-3); border-top: 1px solid var(--fl-line); }
.fl-review__who > span:not(.fl-logo-plate) { display: grid; flex: 1; }
.fl-review__who .fl-logo-plate { flex: none; }
.fl-review__role { color: var(--fl-muted); font-size: 15px; }
.fl-review--big { max-width: 980px; margin: 0 auto; flex: none; }
.fl-review--big .fl-review__body p { font-size: clamp(24px, 3vw, 40px); }
.fl-quote { padding-top: var(--fl-section-y); }

/* --- Domande frequenti ------------------------------------------------------ */

.fl-faq { padding-top: var(--fl-section-y); }
.fl-faq__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--fl-space-5); align-items: start; }
.fl-faq__head { position: sticky; top: calc(var(--fl-header-h) + var(--fl-space-3)); }
.fl-faq__list { border-top: 1px solid var(--fl-line); }
.fl-faq__item { border-bottom: 1px solid var(--fl-line); }
.fl-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--fl-space-3); padding: var(--fl-space-3) 0; cursor: pointer; list-style: none; }
.fl-faq__item summary::-webkit-details-marker { display: none; }
.fl-faq__item summary h3 { margin: 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 650; line-height: 1.3; transition: color .3s; }
.fl-faq__item summary:hover h3 { color: var(--fl-accent); }
.fl-faq__plus { position: relative; width: 28px; height: 28px; flex: none; border: 1px solid var(--fl-line); border-radius: 50%; }
.fl-faq__plus::before, .fl-faq__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--fl-ease); }
.fl-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.fl-faq__item[open] .fl-faq__plus::after { transform: translate(-50%, -50%) rotate(0); }
.fl-faq__item[open] .fl-faq__plus { border-color: var(--fl-accent); color: var(--fl-accent); }
.fl-faq__answer { padding-bottom: var(--fl-space-3); color: var(--fl-muted); }
@media (max-width: 899px) {
  .fl-faq__inner { grid-template-columns: minmax(0, 1fr); }
  .fl-faq__head { position: static; }
}

/* --- Caso studio ------------------------------------------------------------ */

.fl-case__hero { position: relative; overflow: hidden; padding-bottom: var(--fl-space-5); isolation: isolate; }
.fl-case__glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--work) 80%, #000), var(--fl-ink) 80%);
}
.fl-case__head { text-align: center; display: grid; justify-items: center; }
.fl-case__head .fl-back { justify-self: start; }
.fl-case__brand { margin-bottom: var(--fl-space-4); }
.fl-case__lead { justify-content: center; text-align: left; }
.fl-case__trio { position: relative; height: clamp(320px, 52vw, 720px); margin-top: var(--fl-space-5); perspective: 1600px; }
.fl-case__trio .fl-dev { position: absolute; }
.fl-case__trio .fl-dev--computer { left: 12%; width: 66%; top: 4%; }
.fl-case__trio .fl-dev--tablet { left: 2%; width: 22%; top: 30%; }
.fl-case__trio .fl-dev--telefono { left: 80%; width: 15%; top: 36%; }
.js .fl-case__trio .fl-dev { opacity: 0; transform: translateY(80px) rotateX(18deg); animation: fl-rise-dev 1.4s var(--fl-ease) forwards; }
.js .fl-case__trio .fl-dev--tablet { animation-delay: .25s; }
.js .fl-case__trio .fl-dev--telefono { animation-delay: .4s; }
@keyframes fl-rise-dev { to { opacity: 1; transform: none; } }
.fl-case .fl-facts { margin-top: var(--fl-space-4); }
.fl-story--case { padding-top: var(--fl-space-5); }

/* La pagina intera che scorre nel computer mentre si scorre la sezione. */
.fl-scroller { position: relative; height: 320svh; margin-top: var(--fl-section-y); }
.fl-scroller__sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; align-content: center; gap: var(--fl-space-3); padding: var(--fl-header-h) var(--fl-gutter) var(--fl-space-3); }
.fl-scroller .fl-dev--big { width: min(100%, 1200px, calc((100svh - var(--fl-header-h) - 120px) * 1.6)); }
.fl-scroller .fl-screen--full { opacity: 1; }
.fl-scroller iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; transform-origin: 0 0; }

.fl-gallery { padding-top: var(--fl-section-y); }
.fl-gallery__track { display: flex; gap: var(--fl-space-3); padding: 0 var(--fl-gutter) var(--fl-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--fl-line) transparent; cursor: grab; }
.fl-gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.fl-gallery__item { flex: 0 0 min(78vw, 980px); margin: 0; scroll-snap-align: center; }
.fl-gallery__item--tall { flex-basis: min(42vw, 300px); }
.fl-gallery__item img { width: 100%; border-radius: 14px; border: 1px solid var(--fl-line); pointer-events: none; }
.fl-gallery__item figcaption { margin-top: var(--fl-space-1); }

/* --- Archivio: anteprima che segue il cursore -------------------------------- */

.fl-card__meta { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--fl-space-2); }
.fl-card__meta .fl-logo-plate { grid-row: span 2; }
.fl-cursor-preview {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 170px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg)) scale(.6);
  transition: opacity .3s, transform .5s var(--fl-ease);
}
.fl-cursor-preview.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg)) scale(1); }
.fl-cursor-preview .fl-dev__body { padding: 6px; border-radius: 26px; }
.fl-cursor-preview img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 20px; }

/* --- Chi sono: mattoncini e ruoli ------------------------------------------ */

.fl-about__hero { padding: calc(var(--fl-header-h) + var(--fl-space-6)) 0 var(--fl-space-5); }
.fl-about__copy { max-width: 980px; }
.fl-about__text { margin-top: var(--fl-space-4); font-size: 20px; line-height: 1.6; }

.fl-lego { position: relative; margin-top: var(--fl-section-y); }
.fl-lego__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--fl-space-5); }
.fl-lego__stage { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: var(--fl-space-3); padding-top: var(--fl-header-h); }
.fl-lego__title { margin: 0; }
.fl-lego__build { position: relative; }
.fl-lego__wall { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.fl-lego__brick { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; transition-delay: calc(var(--col) * 45ms); }
.js .fl-lego.is-building .fl-lego__row:not(.is-on) .fl-lego__brick { opacity: 0; transform: translateY(-260px) rotate(-8deg); transition-delay: 0s; }
.fl-lego__dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fl-lego__dots li { width: 28px; height: 4px; border-radius: 4px; background: var(--fl-line); transition: background .4s; }
.fl-lego__dots li.is-on { background: var(--fl-accent); }
.fl-lego__step { min-height: 90svh; display: flex; flex-direction: column; justify-content: center; }
.fl-lego__step:first-child { min-height: 100svh; }
.fl-lego__step-title { margin: var(--fl-space-1) 0 var(--fl-space-2); font-family: var(--fl-display); font-weight: var(--fl-display-weight); font-stretch: var(--fl-display-stretch); text-transform: var(--fl-display-case); font-size: clamp(28px, 3vw, 48px); line-height: 1.05; }
.js .fl-lego__step { transition: opacity .6s; }
.js .fl-lego.is-building .fl-lego__step:not(.is-active) { opacity: .25; }
@media (max-width: 899px) {
  .fl-lego__inner { display: block; }
  .fl-lego__stage { position: sticky; top: var(--fl-header-h); z-index: 1; height: auto; padding: var(--fl-space-2) 0; background: var(--fl-ink); }
  .fl-lego__title { font-size: 28px; }
  .fl-lego__steps { position: relative; z-index: 2; }
  .fl-lego__step, .fl-lego__step:first-child { min-height: 70svh; justify-content: flex-end; padding: var(--fl-space-3); margin-bottom: var(--fl-space-3); border: 1px solid var(--fl-line); border-radius: 16px; background: rgba(11, 11, 12, .92); }
}

.fl-roles { padding-top: var(--fl-section-y); }
.fl-roles__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--fl-space-3); margin: 0; padding: 0; list-style: none; }
.fl-role {
  position: relative;
  padding: var(--fl-space-3);
  border: 1px solid var(--fl-line);
  border-radius: 22px;
  background: var(--fl-ink-2);
  transition: border-color .4s, transform .6s var(--fl-ease), background .4s;
}
.fl-role:hover, .fl-role:focus-visible, .fl-role.is-active { border-color: var(--fl-accent); transform: translateY(-6px); background: #17170f; }
.fl-role__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: rgba(198, 255, 61, .1); color: var(--fl-accent); }
.fl-role__name { margin: var(--fl-space-2) 0 4px; font-size: 22px; line-height: 1.2; }
.fl-role__nick { color: var(--fl-accent); }
.fl-role__text { margin-top: var(--fl-space-2); font-size: 16px; color: var(--fl-muted); }

/* --- Riduci animazioni ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fl-wall__col { animation: none !important; }
  .js .fl-case__trio .fl-dev { opacity: 1; transform: none; }
  .js .fl-lego.is-building .fl-lego__row:not(.is-on) .fl-lego__brick { opacity: 1; transform: none; }
  .fl-scroller { height: auto; }
  .fl-scroller__sticky { position: static; height: auto; }
}

/* --- Rifiniture per il telefono --------------------------------------------- */

@media (max-width: 899px) {
  .fl-scene__stage { height: 46svh; }
  .fl-scene__steps { margin-top: 0; }
  .fl-chapter-step, .fl-chapter-step:first-child { min-height: 100svh; align-items: flex-end; padding-bottom: 3svh; }
  .fl-chapter-step__card { padding: var(--fl-space-2) var(--fl-space-3) var(--fl-space-3); background: linear-gradient(to bottom, rgba(11, 11, 12, .82), rgba(11, 11, 12, .97) 30%); }
  .fl-chapter-step__title { font-size: 26px; margin-bottom: var(--fl-space-2); }
  .fl-chapter-step__text { font-size: 16px; }
  .fl-chapter-step__text p + p { margin-top: .8em; }
  .fl-reel__devices { height: 30svh; }
  .fl-reel__title { font-size: 40px; }
  .fl-reel__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; }
  .fl-reel__inner { gap: var(--fl-space-2); padding-top: var(--fl-space-5); }
  .fl-logo-plate--small { width: 60px; padding: 9px; border-radius: 18px; }
}

/* Palco su telefono: dispositivi più grandi, composizioni ricalcolate per la scena stretta. */
@media (max-width: 899px) {
  .fl-stage .fl-dev--computer { width: 86%; }
  .fl-stage .fl-dev--tablet { width: 44%; }
  .fl-stage .fl-dev--telefono { width: 31%; }
  .fl-stage .fl-dev--computer { --x: 0%; --y: 14%; --s: .9; }
  .fl-stage .fl-dev--tablet { --x: 56%; --y: 16%; --s: .6; }
  .fl-stage .fl-dev--telefono { --x: 70%; --y: 22%; --s: .6; }
  .fl-stage[data-screen="computer"] .fl-dev--computer { --x: 7%; --y: 16%; --s: 1; }
  .fl-stage[data-screen="computer"] .fl-dev--tablet { --x: 70%; --y: 24%; --s: .4; }
  .fl-stage[data-screen="computer"] .fl-dev--telefono { --x: 80%; --y: 30%; --s: .4; }
  .fl-stage[data-screen="tablet"] .fl-dev--computer { --x: -10%; --y: 20%; --s: .6; }
  .fl-stage[data-screen="tablet"] .fl-dev--tablet { --x: 28%; --y: 2%; --s: 1; }
  .fl-stage[data-screen="tablet"] .fl-dev--telefono { --x: 72%; --y: 28%; --s: .5; }
  .fl-stage[data-screen="telefono"] .fl-dev--computer { --x: -10%; --y: 22%; --s: .55; }
  .fl-stage[data-screen="telefono"] .fl-dev--tablet { --x: 64%; --y: 18%; --s: .5; }
  .fl-stage[data-screen="telefono"] .fl-dev--telefono { --x: 35%; --y: 1%; --s: 1; }
  .fl-stage[data-screen="logo"] .fl-dev { --s: .6; }
  .fl-stage .fl-logo-plate { width: 150px; }
}

/* Il progetto in uso: video nel computer grande (lavori senza pagine lunghe, come le web app). */
.fl-film { display: grid; justify-items: center; gap: var(--fl-space-3); padding-top: var(--fl-section-y); }
.fl-film .fl-dev--big { width: min(100%, 1200px); }
.fl-film__media { position: absolute; inset: 0; aspect-ratio: auto; }
.fl-film__media > .fl-media { position: absolute; inset: 0; aspect-ratio: auto; }
.fl-film__media::after { display: none; }