/* ==========================================================================
   dark-factory.space — _BuildingSection.cshtml
   Sezione trasversale SVG dell'edificio, doppio stato:
     .df-bs--human  = HUMAN-RATED (luci accese, impianti comfort, persone)
     .df-bs--robot  = ROBOT-ONLY  (buio, soffitto abbassato, ghost + quota, cabinet ambra)
   Il flip è SOLO un cambio di classe: entrambi gli stati vivono nello stesso markup.
   L'unica custom property parametrica è --df-ceiling-shift (impostata dal server).
   ========================================================================== */

.df-bs {
    margin: 0;
    line-height: 0;
}

.df-bs svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.df-bs text {
    font-family: var(--df-font-mono);
    fill: var(--df-fg-dim);
}

.df-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Interno edificio: la fascia alta smette di esistere nello stato robot --- */
.df-bs-scene-upper,
.df-bs-scene-lower {
    fill: #191920;
    transition: opacity .7s ease, fill .7s ease;
}
.df-bs--robot .df-bs-scene-upper { opacity: 0; }
.df-bs--robot .df-bs-scene-lower { fill: #0b0b10; }

/* --- Luce: coni e tubi si spengono --- */
.df-bs-cones { transition: opacity .55s ease; }
.df-bs--robot .df-bs-cones { opacity: 0; }

.df-bs-tube {
    fill: #f4ead8;
    opacity: .85;
}

/* --- Impianti comfort (condotti, diffusori, barre luce): si dissolvono --- */
.df-bs-equip { transition: opacity .6s ease .1s; }
.df-bs--robot .df-bs-equip { opacity: 0; }

/* --- Pareti --- */
.df-bs-wall { fill: #3a3a46; }
.df-bs-upper { transition: opacity .6s ease .15s; }
.df-bs--robot .df-bs-upper { opacity: 0; }

/* --- Ghost tratteggiato dell'altezza non costruita --- */
.df-bs-ghost line {
    stroke: var(--df-violet);
    stroke-width: 2;
    stroke-dasharray: 7 6;
}
.df-bs-ghost {
    opacity: 0;
    transition: opacity .5s ease .55s;
}
.df-bs--robot .df-bs-ghost { opacity: .55; }

/* --- Trave di copertura: scende della quota parametrica --- */
.df-bs-roof {
    fill: #454553;
    transition: transform .9s cubic-bezier(.65, .05, .35, 1) .1s;
}
.df-bs--robot .df-bs-roof { transform: translateY(var(--df-ceiling-shift, 0px)); }

/* --- Quota tecnica (violet = capex evitato) --- */
.df-bs-quota line { stroke: var(--df-violet); stroke-width: 1.5; }
.df-bs-quota polygon { fill: var(--df-violet); }
.df-bs-quota-num {
    fill: var(--df-violet);
    font-size: 16px;
    font-weight: 700;
}
.df-bs-quota-sub {
    fill: #a89ef5;
    font-size: 11.5px;
    letter-spacing: .08em;
}
.df-bs-quota {
    opacity: 0;
    transition: opacity .45s ease .85s;
}
.df-bs--robot .df-bs-quota { opacity: 1; }

/* --- Ventilazione Ra (processo): resta sempre, tono neutro --- */
.df-bs-ra line { stroke: #5f7076; stroke-width: 2; }
.df-bs-ra polygon { fill: #5f7076; }
.df-bs-ra-label {
    fill: var(--df-muted);
    font-size: 12px;
}

/* --- Persone + frecce Rp: svaniscono una a una --- */
.df-bs-person circle,
.df-bs-person rect { fill: #9a97ab; }
.df-bs-rp { stroke: var(--df-cyan); stroke-width: 2; }
.df-bs-rp-head { fill: var(--df-cyan); }
.df-bs-person { transition: opacity .45s ease; }
.df-bs--robot .df-bs-person { opacity: 0; }
.df-bs--robot .df-bs-person:nth-of-type(1) { transition-delay: .05s; }
.df-bs--robot .df-bs-person:nth-of-type(2) { transition-delay: .22s; }
.df-bs--robot .df-bs-person:nth-of-type(3) { transition-delay: .39s; }
.df-bs--robot .df-bs-person:nth-of-type(4) { transition-delay: .56s; }
.df-bs-rp-label {
    fill: var(--df-cyan);
    font-size: 12.5px;
    transition: opacity .45s ease;
}
.df-bs--robot .df-bs-rp-label { opacity: 0; }

/* --- Robot AMR: LED e fari prendono vita al buio --- */
.df-bs-robot > rect { fill: #2c2c38; stroke: #444452; stroke-width: 1; }
.df-bs-wheel { fill: #1d1d26; stroke: #444452; stroke-width: 1; }
.df-bs-led { fill: var(--df-cyan); }
.df-bs-ledglow {
    opacity: .25;
    transition: opacity .6s ease .3s;
}
.df-bs--robot .df-bs-ledglow { opacity: .95; }
.df-bs-headlight {
    opacity: 0;
    transition: opacity .6s ease .5s;
}
.df-bs--robot .df-bs-headlight { opacity: .8; }

/* --- Cabinet elettronica/batterie: la voce ambra che RESTA --- */
.df-bs-cab-body {
    fill: #14141a;
    stroke: var(--df-amber);
    stroke-width: 1.6;
}
.df-bs-cab-cell {
    fill: #1f1a12;
    stroke: #6b5330;
    stroke-width: 1;
}
.df-bs-cab-dot { fill: var(--df-amber); }
.df-bs-cab-ac {
    fill: #1a1a22;
    stroke: var(--df-amber);
    stroke-width: 1.2;
}
.df-bs-cab-fan {
    fill: none;
    stroke: var(--df-amber);
    stroke-width: 1.2;
}
.df-bs-cab-grill { stroke: var(--df-amber); stroke-width: 1.2; }
.df-bs-cab-temp {
    fill: var(--df-amber);
    font-size: 15px;
    font-weight: 700;
}
.df-bs-cab-sub {
    fill: #c9a06a;
    font-size: 11.5px;
    letter-spacing: .1em;
}
.df-bs-cabglow {
    opacity: .3;
    transition: opacity .7s ease .3s;
}
.df-bs--robot .df-bs-cabglow { opacity: .8; }

/* --- Etichetta scenario --- */
.df-bs-arealabel {
    fill: var(--df-muted);
    font-size: 12px;
}

/* --- Striscia termica 0–55 °C --- */
.df-bs-comfort rect {
    fill: rgba(63, 197, 218, .22);
    stroke: var(--df-cyan);
    stroke-width: 1;
}
.df-bs-comfort .df-bs-band-label { fill: var(--df-cyan); }
.df-bs-comfort { transition: opacity .5s ease .2s; }
.df-bs--robot .df-bs-comfort { opacity: .15; }

.df-bs-components rect {
    fill: rgba(224, 164, 88, .22);
    stroke: var(--df-amber);
    stroke-width: 1;
}
.df-bs-components .df-bs-band-label { fill: var(--df-amber); }

.df-bs-band-label { font-size: 12px; }
.df-bs-axis { stroke: var(--df-border-strong); stroke-width: 1.5; }
.df-bs-tick { stroke: var(--df-border-strong); stroke-width: 1; }
.df-bs-ticklabel {
    fill: var(--df-muted);
    font-size: 11.5px;
}

/* --- Variante compatta (hero home): solo edificio + cabinet + quota --- */
.df-bs--compact .df-bs-thermal,
.df-bs--compact .df-bs-ra,
.df-bs--compact .df-bs-arealabel,
.df-bs--compact .df-bs-rp-label { display: none; }

/* --- Accessibilità: niente movimento se l'utente non lo vuole --- */
@media (prefers-reduced-motion: reduce) {
    .df-bs *,
    .df-bs { transition: none !important; }
}