/* ==========================================================================
   Personalità delle scene: ogni lavoro prende animazioni e atmosfera dal suo sito.
   Più l'apertura della Home e le spaziature compatte. Complemento di scene.css.
   ========================================================================== */

.fl-decor { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.fl-case__hero > .fl-shell, .fl-case__hero > .fl-facts { position: relative; z-index: 1; }
.fl-reel__item .fl-decor { z-index: 0; }

/* Tipografico: parole giganti a contorno che scorrono, titolo che si riempie. */
.fl-decor--words { display: flex; flex-direction: column; justify-content: flex-end; gap: 1vw; padding-bottom: 6%; opacity: .32; }
.fl-decor__row { display: block; white-space: nowrap; overflow: hidden; }
.fl-decor__track {
  display: inline-flex;
  gap: .45em;
  font-family: var(--fl-font);
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(72px, 12vw, 200px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: fl-marquee calc(46s + var(--r) * 12s) linear infinite;
}
.fl-decor__row:nth-child(even) .fl-decor__track { animation-direction: reverse; }
@keyframes fl-marquee { to { transform: translateX(-50%); } }
.fl-scene--tipografico .fl-case__title,
.fl-reel__item.fl-scene--tipografico .fl-reel__title {
  color: transparent;
  -webkit-text-stroke: 2px var(--fl-paper);
  background: linear-gradient(90deg, var(--fl-paper) 50%, transparent 50%) right / 200% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
}
.js .fl-scene--tipografico .fl-case__title.is-visible { animation: fl-fill 1.8s var(--fl-ease) .4s forwards; }
.fl-reel__item.fl-scene--tipografico .fl-reel__link:hover .fl-reel__title { animation: fl-fill 1.2s var(--fl-ease) forwards; }
@keyframes fl-fill { to { background-position: left; } }
.fl-scene--tipografico .fl-chapter-step__title { font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: clamp(36px, 4.4vw, 68px); letter-spacing: 0; }
.fl-scene--tipografico .fl-stage .fl-dev { transition-duration: 1.4s, 1.4s, 1.4s, 1s, 1s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); }

/* Calore: il battito del logo si disegna, impronte che salgono, forme morbide. */
.fl-decor__ecg { position: absolute; top: 58%; left: 0; width: 100%; height: 120px; overflow: visible; }
.fl-decor__ecg path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px var(--accent)); animation: fl-ecg 4.2s ease-in-out infinite; }
@keyframes fl-ecg { 0% { stroke-dashoffset: 1; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 80%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.fl-decor__paw { position: absolute; bottom: -60px; left: calc(4% + var(--i) * 11%); width: 34px; fill: var(--accent); opacity: 0; animation: fl-paw 11s linear infinite; animation-delay: calc(var(--i) * -1.3s); }
.fl-decor__paw svg { display: block; width: 100%; height: auto; }
.fl-decor__paw:nth-child(odd) { width: 24px; animation-duration: 14s; }
@keyframes fl-paw { 0% { transform: translateY(0) rotate(-14deg); opacity: 0; } 12% { opacity: .32; } 88% { opacity: .2; } 100% { transform: translateY(-115vh) rotate(16deg); opacity: 0; } }
.fl-scene--calore .fl-chapter-step__card, .fl-scene--calore .fl-review { border-radius: 28px; }
.fl-scene--calore .fl-logo-plate { border-radius: 40%; }
.fl-scene--calore .fl-stage .fl-dev { transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }

/* App: schede di attività che fluttuano, anello di avanzamento come le ore di Appunta. */
.fl-decor__chip {
  position: absolute;
  padding: 10px 16px 10px 14px;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: rgba(255, 249, 243, .94);
  color: #2b1d17;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: fl-chip 7s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.4s);
}
.fl-decor__chip:nth-child(1) { left: 5%; top: 20%; }
.fl-decor__chip:nth-child(2) { left: 74%; top: 14%; }
.fl-decor__chip:nth-child(3) { left: 8%; top: 68%; }
.fl-decor__chip:nth-child(4) { left: 76%; top: 60%; }
.fl-decor__chip:nth-child(5) { left: 38%; top: 6%; }
.fl-decor__chip:nth-child(6) { left: 58%; top: 84%; }
@keyframes fl-chip { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-18px) rotate(2deg); } }
.fl-scene--app .fl-stage .fl-dev { transition-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
.fl-ring { position: fixed; z-index: 40; right: var(--fl-gutter); bottom: var(--fl-space-3); width: 52px; height: 52px; }
.fl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fl-ring circle { fill: rgba(11, 11, 12, .8); stroke: var(--fl-line); stroke-width: 4; }
.fl-ring .fl-ring__value { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--progress, 0)); }
@media (max-width: 899px) {
  .fl-decor__chip:nth-child(n+5) { display: none; }
  .fl-decor__chip { font-size: 13px; padding: 8px 12px; }
  .fl-decor__chip:nth-child(2), .fl-decor__chip:nth-child(4) { left: auto; right: 4%; }
}

/* Anteprima sotto il cursore: le foto mantengono le proporzioni, senza cornice da telefono. */
.fl-cursor-preview[data-kind="foto"] { width: 260px; }
.fl-cursor-preview[data-kind="foto"] .fl-dev__body { padding: 0; border-radius: 18px; overflow: hidden; }
.fl-cursor-preview[data-kind="foto"] img { aspect-ratio: auto; border-radius: 0; }

/* ==========================================================================
   Apertura della Home: in un colpo d'occhio cosa so fare.
   ========================================================================== */

.fl-hero__skills { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em; margin: 0; font-size: clamp(22px, 2.6vw, 38px); font-weight: 700; line-height: 1.2; }
.fl-hero__skills-fixed { color: var(--fl-muted); font-weight: 500; }
.fl-rotator { position: relative; display: inline-grid; height: 1.2em; overflow: hidden; vertical-align: bottom; color: var(--fl-accent); }
.fl-rotator__word { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: opacity .5s var(--fl-ease), transform .7s var(--fl-ease); }
.fl-rotator:not(.is-running) .fl-rotator__word:first-child, .fl-rotator__word.is-on { opacity: 1; transform: none; }
.fl-rotator__word.is-out { opacity: 0; transform: translateY(-100%); }
.fl-hero__works { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fl-space-2); }
.fl-hero__works-label { margin-right: var(--fl-space-1); }
.fl-hero__work { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--fl-line); border-radius: 999px; background: rgba(11, 11, 12, .6); color: var(--fl-paper); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .3s, transform .4s var(--fl-ease); }
.fl-hero__work:hover { border-color: var(--fl-accent); transform: translateY(-2px); }
.fl-hero__work .fl-logo-plate { width: 36px; padding: 5px; border-radius: 50%; box-shadow: none; }
.fl-hero .fl-wall__plane { opacity: .72; }
.fl-hero::after { background: linear-gradient(90deg, rgba(11, 11, 12, .9) 0%, rgba(11, 11, 12, .45) 50%, rgba(11, 11, 12, .1) 100%), linear-gradient(0deg, var(--fl-ink) 0%, transparent 34%); }

/* ==========================================================================
   Spaziature più compatte
   ========================================================================== */

.fl-page-head { padding: calc(var(--fl-header-h) + var(--fl-space-5)) 0 var(--fl-space-4); }
.fl-case__head { padding: calc(var(--fl-header-h) + var(--fl-space-4)) 0 var(--fl-space-3); }
.fl-case__brand { margin-bottom: var(--fl-space-3); }
.fl-case__lead { margin-top: var(--fl-space-3); }
.fl-case__hero { padding-bottom: var(--fl-space-4); }
.fl-case__trio { height: clamp(260px, 44vw, 600px); margin-top: var(--fl-space-3); }
.fl-case .fl-facts { margin: var(--fl-space-3) auto 0; }
.fl-story__head { padding-bottom: var(--fl-space-2); }
.fl-chapter-step { min-height: 78svh; }
.fl-chapter-step:first-child { min-height: 56svh; }
.fl-lego__step { min-height: 72svh; }
.fl-lego__step:first-child { min-height: 84svh; }
.fl-scroller { height: 260svh; }
.fl-about__hero { padding: calc(var(--fl-header-h) + var(--fl-space-5)) 0 var(--fl-space-4); }
.fl-review { padding: var(--fl-space-4) var(--fl-space-3) var(--fl-space-3); }
.fl-faq__item summary { padding: var(--fl-space-2) 0; }
.fl-footer__title { margin-bottom: var(--fl-space-3); }
.fl-contacts__link { padding: var(--fl-space-2) 0; }
.fl-hero__inner { gap: var(--fl-space-2); }
@media (max-width: 899px) {
  .fl-chapter-step, .fl-chapter-step:first-child { min-height: 88svh; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-decor__track, .fl-decor__ecg path, .fl-decor__paw, .fl-decor__chip { animation: none !important; }
  .fl-decor__ecg path { stroke-dashoffset: 0; }
  .fl-decor__paw { opacity: .2; }
  .js .fl-scene--tipografico .fl-case__title { background-position: left; }
  .fl-rotator__word { transition: none; }
}

/* Apertura del caso studio: i tre dispositivi restano nel loro spazio, i dettagli in colonna con l'apertura. */
.fl-case__trio .fl-dev--tablet { top: 20%; }
.fl-case__trio .fl-dev--telefono { top: 18%; }
.fl-case .fl-facts { width: min(100% - 2 * var(--fl-gutter), 1120px); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 767px) { .fl-case .fl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fl-space-2); } }
.fl-story--case { padding-top: var(--fl-space-3); }
.fl-story--case .fl-chapter-step:first-child { min-height: 44svh; }
@media (max-width: 599px) {
  .fl-case__hero .fl-decor__chip { display: none; }
  .fl-hero__works { gap: 10px; }
  .fl-hero__works-label { flex-basis: 100%; margin: 0; }
}