/* «Cosa puoi fare su Relinx» (home, components/services_map.html): i sette verbi a sinistra con la barra che scorre,
   a destra la voce scelta con la sua scena animata sulla mappa (components/services_scenes/*.html), testo e pulsanti.
   Le scene: solo SVG e CSS; gli spostamenti lungo le strade sono <animateMotion>, riportati a zero da js/services-map.js. */

@layer components {
  .do {
    --do-sel: color-mix(in srgb, var(--accent-soft) 70%, var(--ground)); /* come la citta' aperta della mappa */
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gap);
    align-items: stretch;
  }

  /* i sette verbi */
  .do-list { position: relative; display: grid; align-content: start; padding-left: 22px; box-shadow: inset 2px 0 0 var(--line); }
  .do-bar {
    position: absolute; left: 0; top: var(--y, 0); width: 4px; height: var(--h, 0); border-radius: 2px; background: var(--accent);
    transition: top .4s var(--ease), height .4s var(--ease);
  }
  .do-tab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; background: none; text-align: left; cursor: pointer;
    font-family: var(--display); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.15; color: var(--ink-soft);
    transition: color .3s var(--ease), translate .3s var(--ease);
    &:hover { color: var(--ink); translate: 4px 0; }
    &[aria-selected="true"] { color: var(--ink); translate: 6px 0; }
    &:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  }
  .do-go { width: 24px; height: 24px; color: var(--accent); opacity: 0; translate: -10px 0; transition: opacity .3s var(--ease), translate .3s var(--ease); }
  .do-tab[aria-selected="true"] .do-go { opacity: 1; translate: 0 0; }

  /* la voce scelta */
  .do-stage { min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--do-sel); transition: height .35s var(--ease); }
  .do-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; height: 100%; padding: 20px 20px 28px; }
  .do-panel[hidden] { display: none; }
  .do-art { height: 140px; overflow: hidden; border-radius: var(--r-md); background: var(--ground); }
  .do-scene { display: block; width: 100%; height: 100%; }
  .do-body { display: grid; gap: 10px; align-content: start; padding-inline: 12px; }
  .do-lead { font-family: var(--display); font-size: var(--step-lead); font-weight: 400; line-height: 1.2; }
  .do-text { max-width: 68ch; font-size: var(--step-small); color: var(--ink-soft); }
  .do-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .do-actions .btn.ghost { --btn-bg: var(--ground); }

  /* al cambio di voce il contenuto sale e compare */
  .do-panel.is-in > * { animation: do-up .45s var(--ease) both; }
  .do-panel.is-in > :nth-child(2) { animation-delay: .06s; }
  @keyframes do-up { from { opacity: 0; translate: 0 14px; } }

  @media (max-width: 860px) {
    .do { grid-template-columns: minmax(0, 1fr); }
    .do-list { display: flex; gap: 6px; margin-inline: -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; box-shadow: none; }
    .do-bar, .do-go { display: none; }
    .do-tab {
      flex: none; padding: 8px 16px; border-radius: var(--r-pill); background: var(--tint);
      font-family: var(--font); font-size: var(--step-small); font-weight: 500; translate: none !important;
    }
    .do-tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
    .do-panel { padding: 14px 14px 22px; }
    .do-body { padding-inline: 6px; }
    .do-actions .btn { white-space: normal; text-align: center; }
  }

  /* ---------- Le scene: tutte sulla stessa mappa (viewBox 720x130) ---------- */
  .do-scene {
    & * { transform-box: fill-box; }
    & .road { fill: none; stroke: var(--tint-2); stroke-width: 12; stroke-linecap: round; }
    & .p path { fill: color-mix(in srgb, var(--ink) 40%, var(--tint-2)); }
    & .p .on, & .on { fill: var(--accent); }
    & .dot { fill: var(--ground); }
    & .me { fill: var(--ink); }
    & .route { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
    & .route.soft { stroke: color-mix(in srgb, var(--accent) 55%, var(--tint-2)); stroke-width: 3; }
    & .house { fill: color-mix(in srgb, var(--ink) 40%, var(--tint-2)); }
    & .house-on { fill: var(--accent); }
    & .agency { fill: var(--ink); }
    & .card > rect:first-child { fill: var(--ink); }
    & .b1 { fill: var(--on-ink); }
    & .b2 { fill: color-mix(in srgb, var(--on-ink) 45%, transparent); }
    & .b3 { fill: var(--accent-soft); }
    & .tick { fill: none; stroke: var(--accent-soft); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
    & .tick.dark { stroke: var(--accent); }
    & .post { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
    & .sign { fill: var(--accent); }
    & .key2 circle, & .key2 path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
    & .loop, & .loop-head { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    & .radius { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 6; }
    & .bar { fill: color-mix(in srgb, var(--on-ink) 35%, transparent); }
    & .bar.on { fill: var(--accent-soft); }
    & .ring { fill: none; stroke: var(--accent); stroke-width: 2.5; }
    & .gavel rect { fill: var(--ink); }
    & .gavel path { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
    & .net { fill: none; stroke: color-mix(in srgb, var(--accent) 50%, var(--tint-2)); stroke-width: 2.5; stroke-linejoin: round; }
    & .ag { fill: var(--ink); }
    & .ag.on { fill: var(--accent); }
    & .msg rect, & .msg path { fill: var(--accent); }
    & .reply rect { fill: var(--ink); }
    & .reply circle { fill: var(--on-ink); }

    /* movimenti: ritardo in --d, durata del tratto in --t, origine in --o (classi w-* qui sotto) */
    & .a-drop { transform-origin: 50% 100%; animation: do-drop .55s var(--d, 0s) var(--ease) both; }
    & .a-on { opacity: 0; animation: do-on .4s var(--d, 0s) forwards; }
    & .a-on.gone { animation: do-on .3s var(--d, 0s) forwards, do-off .4s 2.3s forwards; }
    & .a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: do-draw var(--t, 1s) var(--d, 0s) ease-in-out forwards; }
    & .a-pop { transform-origin: var(--o, 0% 100%); animation: do-pop .45s var(--d, 0s) var(--ease) both; }
    & .a-grow { transform-origin: 50% 100%; animation: do-grow .6s var(--d, 0s) var(--ease) both; }
    & .a-ring { transform-origin: 50% 50%; opacity: 0; animation: do-ring 1.8s var(--d, 0s) ease-out infinite; }
    & .a-strike { transform-box: view-box; transform-origin: 432px 86px; animation: do-strike 1s var(--d, 0s) var(--ease) both; }
    & .w-vb { transform-box: view-box; } /* la testa del martelletto ruota sul suo centro (attributo transform) */
    & .w-oc { --o: 50% 50%; }
    & .w-obl { --o: 0% 100%; }
    & .w-d10 { --d: 0.1s; }
    & .w-d20 { --d: 0.2s; }
    & .w-d22 { --d: 0.22s; }
    & .w-d25 { --d: 0.25s; }
    & .w-d30 { --d: 0.3s; }
    & .w-d34 { --d: 0.34s; }
    & .w-d35 { --d: 0.35s; }
    & .w-d40 { --d: 0.4s; }
    & .w-d46 { --d: 0.46s; }
    & .w-d50 { --d: 0.5s; }
    & .w-d58 { --d: 0.58s; }
    & .w-d60 { --d: 0.6s; }
    & .w-d65 { --d: 0.65s; }
    & .w-d70 { --d: 0.7s; }
    & .w-d82 { --d: 0.82s; }
    & .w-d85 { --d: 0.85s; }
    & .w-d100 { --d: 1s; }
    & .w-d115 { --d: 1.15s; }
    & .w-d120 { --d: 1.2s; }
    & .w-d130 { --d: 1.3s; }
    & .w-d135 { --d: 1.35s; }
    & .w-d140 { --d: 1.4s; }
    & .w-d145 { --d: 1.45s; }
    & .w-d150 { --d: 1.5s; }
    & .w-d160 { --d: 1.6s; }
    & .w-d170 { --d: 1.7s; }
    & .w-d175 { --d: 1.75s; }
    & .w-d180 { --d: 1.8s; }
    & .w-d190 { --d: 1.9s; }
    & .w-d210 { --d: 2.1s; }
    & .w-d220 { --d: 2.2s; }
    & .w-d225 { --d: 2.25s; }
    & .w-d230 { --d: 2.3s; }
    & .w-d240 { --d: 2.4s; }
    & .w-d250 { --d: 2.5s; }
    & .w-d260 { --d: 2.6s; }
    & .w-d280 { --d: 2.8s; }
    & .w-d290 { --d: 2.9s; }
    & .w-d300 { --d: 3s; }
    & .w-d310 { --d: 3.1s; }
    & .w-d320 { --d: 3.2s; }
    & .w-d360 { --d: 3.6s; }
    & .w-t40 { --t: 0.4s; }
    & .w-t60 { --t: 0.6s; }
    & .w-t70 { --t: 0.7s; }
    & .w-t90 { --t: 0.9s; }
    & .w-t100 { --t: 1s; }
    & .w-t110 { --t: 1.1s; }
    & .w-t120 { --t: 1.2s; }
  }
  .do.is-waiting .do-scene * { animation-play-state: paused; } /* js/services-map.js: si parte quando la sezione e' in vista */
  @keyframes do-drop { 0% { opacity: 0; translate: 0 -36px; scale: .6; } 70% { opacity: 1; translate: 0 4px; scale: 1.05; } }
  @keyframes do-on { to { opacity: 1; } }
  @keyframes do-off { to { opacity: 0; } }
  @keyframes do-draw { to { stroke-dashoffset: 0; } }
  @keyframes do-pop { from { opacity: 0; scale: .6; } }
  @keyframes do-grow { from { scale: 1 0; } }
  @keyframes do-ring { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 2.2; } }
  @keyframes do-strike { 0% { opacity: 0; rotate: -40deg; } 30% { opacity: 1; rotate: -40deg; } 62% { rotate: 12deg; } 75% { rotate: 2deg; } 100% { opacity: 1; rotate: 6deg; } }

  @media (prefers-reduced-motion: reduce) {
    .do-bar, .do-tab, .do-go, .do-stage { transition: none; }
    .do-panel.is-in > * { animation: none; }
    .do-scene * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  }
}