/* Scene animate (SVG) degli strumenti dell'annuncio: s1 stima, s3 planimetria 3D, s4 pubblicazione,
   s7 3D Tour (SMIL), s8 servizi del quartiere, s9 tour 360, s10 home staging.
   Markup: <div class="stage">{% include "v2/components/scenes/s3.html" %}</div>.
   Girano solo quando la card e' visibile (v2.js aggiunge .play); con movimento ridotto restano ferme. */

@layer components {
  /* ---------- Griglia degli strumenti: card con la scena animata (.stage), titolo e testo (home, Vendi) ----------
     Sul telefono le card scorrono di lato invece di sei schermi in colonna. */
  .tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 64px) var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;

    & li { min-width: 0; }
    & .stage { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--tint); }
    & h3 { margin-top: 18px; font-family: var(--font); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
    & p { margin-top: 6px; color: var(--ink-soft); }
  }
  @media (max-width: 1080px) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .tools-grid { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
    .tools-grid > li { flex: 0 0 78%; scroll-snap-align: start; }
  }

  .stage { aspect-ratio: 4 / 5; border-radius: var(--r-md); background: var(--tint); overflow: hidden; }
  .scene { display: block; width: 100%; height: 100%; }
  .scene * { transform-box: fill-box; transform-origin: center; }
  .scene .w { fill: var(--ground); } .scene .ink { fill: var(--ink); } .scene .acc { fill: var(--accent); } .scene .soft { fill: var(--accent-soft); }
  .scene .fld { fill: var(--tint); } .scene .ln { fill: var(--tint-2); }
  .scene .t-sm { font: 500 9px var(--font); fill: var(--ink-soft); }
  .scene .t-md { font: 600 11.5px var(--font); fill: var(--ink); }
  .scene .t-in { font: 600 10px var(--font); fill: var(--ink); }
  .scene .t-big { font: 600 18px var(--display); fill: var(--accent); }
  .scene .t-w { fill: var(--ground); } .scene .t-soft { fill: var(--accent-soft); }
  .scene .tick { fill: none; stroke: var(--ground); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .scene .cur { transform-origin: 0 0; fill: var(--ink); stroke: var(--ground); stroke-width: 1.4; stroke-linejoin: round; }
  .scene .lp, .scene [class*="s1-"], .scene [class*="s2-"], .scene [class*="s3-"], .scene [class*="s4-"], .scene [class*="s5-"], .scene [class*="s6-"], .scene [class*="s8-"], .scene [class*="s9-"] { animation-duration: 7s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.55, 0, .35, 1); }
  .scene .lp { animation-name: lp; animation-timing-function: linear; }
  @keyframes lp { 0% { opacity: 0; } 5%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }

  /* 1. stima */
  .s1-type { transform: scaleX(0); transform-origin: right center; animation-name: s1-type; animation-timing-function: steps(18, end); }
  .s1-btn { animation-name: s1-btn; }
  .s1-res { animation-name: s1-res; }
  .s1-cur { animation-name: s1-cur; }
  @keyframes s1-type { 0%, 16% { transform: scaleX(1); } 36%, 100% { transform: scaleX(0); } }
  @keyframes s1-btn { 0%, 47% { transform: none; } 49% { transform: scale(.94); } 52%, 100% { transform: none; } }
  @keyframes s1-res { 0%, 52% { opacity: 0; transform: translateY(10px); } 58%, 100% { opacity: 1; transform: none; } }
  @keyframes s1-cur {
    0% { opacity: 0; transform: translate(200px, 300px); } 6% { opacity: 1; transform: translate(200px, 290px); }
    13% { transform: translate(160px, 98px) scale(1); } 15% { transform: translate(160px, 98px) scale(.8); } 17%, 38% { transform: translate(160px, 98px) scale(1); }
    46% { transform: translate(140px, 192px) scale(1); } 48% { transform: translate(140px, 192px) scale(.8); } 51% { transform: translate(140px, 192px) scale(1); }
    66% { transform: translate(206px, 262px); } 86% { opacity: 1; transform: translate(206px, 262px); } 92%, 100% { opacity: 0; transform: translate(206px, 262px); }
  }

  /* 2. agenzia di zona */
  .scene .street { fill: none; stroke: var(--ground); stroke-width: 7; }
  .s2-pulse { fill: none; stroke: var(--accent); stroke-width: 2; animation: s2-pulse 1.75s ease-out infinite !important; }
  .s2-ag { fill: var(--accent); stroke: var(--ground); stroke-width: 3; animation-name: s2-pop; }
  .s2-ag.a2 { animation-delay: .4s; } .s2-ag.a3 { animation-delay: .8s; }
  .s2-sel { fill: none; stroke: var(--ink); stroke-width: 2; animation-name: s2-sel; }
  .s2-route { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation-name: s2-route; }
  .s2-card { animation-name: s2-card; }
  .s2-phone { animation-name: s2-ring; }
  @keyframes s2-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(4); opacity: 0; } }
  @keyframes s2-pop { 0%, 6% { transform: scale(0); } 10% { transform: scale(1.3); } 13%, 100% { transform: scale(1); } }
  @keyframes s2-sel { 0%, 30% { opacity: 0; transform: scale(.5); } 36%, 100% { opacity: 1; transform: none; } }
  @keyframes s2-route { 0%, 36% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
  @keyframes s2-card { 0%, 52% { opacity: 0; transform: translateY(40px); } 60%, 100% { opacity: 1; transform: none; } }
  @keyframes s2-ring { 0%, 62% { transform: none; } 64% { transform: rotate(-14deg); } 66% { transform: rotate(14deg); } 68% { transform: rotate(-14deg); } 70% { transform: rotate(14deg); } 72% { transform: rotate(-8deg); } 74%, 100% { transform: none; } }

  /* 3. foto e planimetria 3D */
  .s3-draw path, .s3-top path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; }
  .s3-draw path { animation: s3-dash 7s cubic-bezier(.55, 0, .35, 1) infinite both; }
  .s3-fill { animation-name: s3-fill; }
  .s3-iso { animation-name: s3-iso; }
  .s3-lift { opacity: 0; animation-name: s3-lift; }
  .s3-top path { stroke: var(--accent); }
  .s3-chip { animation-name: s3-chip; }
  .s3-vf { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation-name: s3-vf; }
  .s3-flash { opacity: 0; animation-name: s3-flash; animation-timing-function: linear; }
  @keyframes s3-dash { 0%, 4% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
  @keyframes s3-fill { 0%, 30% { opacity: 0; } 38%, 100% { opacity: 1; } }
  @keyframes s3-iso { 0%, 42% { transform: none; } 54%, 100% { transform: scaleY(.58) rotate(-40deg); } }
  @keyframes s3-lift { 0%, 46% { opacity: 0; transform: none; } 58%, 100% { opacity: 1; transform: translateY(-16px); } }
  @keyframes s3-chip { 0%, 56% { opacity: 0; transform: scale(.4); } 62%, 100% { opacity: 1; transform: none; } }
  @keyframes s3-vf { 0%, 64% { opacity: 0; transform: scale(1.08); } 68%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
  @keyframes s3-flash { 0%, 72% { opacity: 0; } 73.5% { opacity: .9; } 80%, 100% { opacity: 0; } }

  /* 4. annuncio ovunque */
  .s4-btn { animation-name: s4-btn; }
  .s4-cur { animation-name: s4-cur; }
  .scene .fly-b { stroke: var(--line); stroke-width: 1.5; }
  .s4-fly { opacity: 0; }
  .s4-fly.f1 { animation-name: s4-f1; } .s4-fly.f2 { animation-name: s4-f2; } .s4-fly.f3 { animation-name: s4-f3; }
  .s4-tile { stroke: var(--accent); stroke-width: 2; animation-name: s4-tile; }
  .s4-ok { animation-name: s4-ok; }
  .t2, .o2 { animation-delay: .7s; } .t3, .o3 { animation-delay: 1.4s; }
  @keyframes s4-btn { 0%, 13% { transform: none; } 15% { transform: scale(.92); } 18%, 100% { transform: none; } }
  @keyframes s4-cur { 0% { opacity: 0; transform: translate(200px, 300px); } 6% { opacity: 1; transform: translate(200px, 290px); } 13% { transform: translate(130px, 158px) scale(1); } 15% { transform: translate(130px, 158px) scale(.8); } 18% { transform: translate(130px, 158px) scale(1); } 30% { transform: translate(214px, 120px); } 86% { opacity: 1; transform: translate(214px, 120px); } 92%, 100% { opacity: 0; transform: translate(214px, 120px); } }
  @keyframes s4-f1 { 0%, 20% { opacity: 0; transform: none; } 22% { opacity: 1; transform: none; } 34% { opacity: 1; transform: translate(-70px, 154px) scale(.6); } 37%, 100% { opacity: 0; transform: translate(-70px, 154px) scale(.6); } }
  @keyframes s4-f2 { 0%, 30% { opacity: 0; transform: none; } 32% { opacity: 1; transform: none; } 44% { opacity: 1; transform: translate(0, 154px) scale(.6); } 47%, 100% { opacity: 0; transform: translate(0, 154px) scale(.6); } }
  @keyframes s4-f3 { 0%, 40% { opacity: 0; transform: none; } 42% { opacity: 1; transform: none; } 54% { opacity: 1; transform: translate(70px, 154px) scale(.6); } 57%, 100% { opacity: 0; transform: translate(70px, 154px) scale(.6); } }
  @keyframes s4-tile { 0%, 33% { stroke: var(--line); } 36%, 100% { stroke: var(--accent); } }
  @keyframes s4-ok { 0%, 34% { transform: scale(0); } 38% { transform: scale(1.3); } 41%, 100% { transform: scale(1); } }

  /* 5. visite e proposte */
  .s5-in { animation-name: s5-in; }
  .s5-in.n2 { animation-delay: 1.4s; } .s5-in.n3 { animation-delay: 2.8s; }
  .s5-bell { transform-origin: 50% 0; animation-name: s5-bell; animation-timing-function: ease-in-out; }
  .s5-press { animation-name: s5-press; }
  .s5-badge { animation-name: s5-badge; }
  .s5-cur { opacity: 0; animation-name: s5-cur; }
  @keyframes s5-in { 0%, 8% { opacity: 0; transform: translateX(60px); } 14%, 100% { opacity: 1; transform: none; } }
  @keyframes s5-bell { 0%, 10%, 18%, 30%, 38%, 50%, 58%, 100% { transform: none; } 12%, 32%, 52% { transform: rotate(16deg); } 14%, 34%, 54% { transform: rotate(-16deg); } 16%, 36%, 56% { transform: rotate(8deg); } }
  @keyframes s5-press { 0%, 66% { transform: none; } 68% { transform: scale(.96); } 71%, 100% { transform: none; } }
  @keyframes s5-badge { 0%, 72% { opacity: 0; transform: scale(.5); } 77% { opacity: 1; transform: scale(1.1); } 80%, 100% { opacity: 1; transform: none; } }
  @keyframes s5-cur { 0%, 50% { opacity: 0; transform: translate(210px, 300px); } 54% { opacity: 1; transform: translate(210px, 285px); } 64% { transform: translate(170px, 200px) scale(1); } 68% { transform: translate(170px, 200px) scale(.8); } 71% { transform: translate(170px, 200px) scale(1); } 82% { transform: translate(214px, 276px); } 88% { opacity: 1; transform: translate(214px, 276px); } 94%, 100% { opacity: 0; transform: translate(214px, 276px); } }

  /* 6. rogito */
  .scene .sline { stroke: var(--line); stroke-width: 1.5; }
  .s6-sign { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation-name: s6-sign; animation-timing-function: ease-in-out; }
  .scene .stamp-b { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 2.5; }
  .scene .t-stamp { font: 700 13px var(--font); fill: var(--accent); }
  .s6-stamp { transform: rotate(-12deg); animation-name: s6-stamp; }
  .s6-c { fill: var(--accent); opacity: 0; animation-name: s6-conf; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  .s6-c:nth-of-type(2n) { fill: var(--ink); }
  .scene .key { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
  .s6-keys { animation-name: s6-keys; }
  @keyframes s6-sign { 0%, 14% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
  @keyframes s6-stamp { 0%, 52% { opacity: 0; transform: rotate(-12deg) scale(1.9); } 57% { opacity: 1; transform: rotate(-12deg) scale(.94); } 60%, 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
  @keyframes s6-conf { 0%, 57% { opacity: 0; transform: none; } 59% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
  @keyframes s6-keys { 0%, 66% { opacity: 0; transform: translateY(-24px) rotate(-30deg); } 74% { opacity: 1; transform: translateY(2px) rotate(6deg); } 78%, 100% { opacity: 1; transform: none; } }

  /* 7. 3D Tour: il punto cammina sulla pianta passando dalle porte (SMIL, vedi lo script) */
  .scene .s7-walls { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
  /* variante isometrica: le matrici partono dall'origine del disegno, non dal centro di ogni elemento */
  .scene.iso * { transform-box: view-box; transform-origin: 0 0; }
  .scene.iso .s7-side use { fill: none; stroke: var(--tint-2); stroke-width: 5; stroke-linejoin: round; }
  .scene.iso .s7-walls { stroke-width: 5; stroke-linecap: square; }
  .scene .s7-trail { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 6; }

  /* 8. servizi del quartiere */
  .s8-poi { animation-name: s8-pop; }
  .s8-poi circle { stroke: var(--accent); stroke-width: 2.5; }
  .s8-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; animation-name: s8-line; }
  .p2 { animation-delay: .5s; } .p3 { animation-delay: 1s; } .p4 { animation-delay: 1.5s; }
  .s8-card { animation-name: s8-card; }
  @keyframes s8-pop { 0%, 8% { opacity: 0; transform: scale(0); } 13% { opacity: 1; transform: scale(1.25); } 16%, 100% { opacity: 1; transform: none; } }
  @keyframes s8-line { 0%, 6% { stroke-dashoffset: 1; } 14%, 100% { stroke-dashoffset: 0; } }
  @keyframes s8-card { 0%, 42% { opacity: 0; transform: translateY(30px); } 50%, 100% { opacity: 1; transform: none; } }

  /* 9. tour virtuale 360 */
  /* 10. home staging: la stessa stanza, vuota e arredata, con il cursore che scorre */
  .s10 { position: relative; overflow: hidden; }
  .s10 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .s10-after, .s10-line { animation: 7s cubic-bezier(.55, 0, .3, 1) infinite both; }
  .s10-after { animation-name: s10-after; }
  .s10-line { position: absolute; inset: 0 auto 0 0; width: 3px; margin-left: -1.5px; background: var(--ground); animation-name: s10-line; }
  @keyframes s10-after { 0%, 10% { clip-path: inset(0 0 0 75%); } 45%, 55% { clip-path: inset(0 0 0 20%); } 90%, 100% { clip-path: inset(0 0 0 75%); } }
  @keyframes s10-line { 0%, 10% { left: 75%; } 45%, 55% { left: 20%; } 90%, 100% { left: 75%; } }

  .scene .s9-frame { fill: none; stroke: var(--ground); stroke-width: 3; }
  .s9-pan { animation-name: s9-pan; }
  .s9-needle { animation-name: s9-needle; }
  @keyframes s9-pan { 0%, 10% { transform: none; } 45%, 55% { transform: translateX(-220px); } 90%, 100% { transform: none; } }
  @keyframes s9-needle { 0%, 10% { transform: none; } 45%, 55% { transform: rotate(180deg); } 90%, 100% { transform: none; } }


  /* Ferme fuori schermo; ferme sullo stato finale con movimento ridotto */
  .stage:not(.play) .scene, .stage:not(.play) .scene * { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) {
    .scene, .scene * { animation: none !important; }
    .scene .cur, .s3-lift { display: none; }
  }
}