/*
 * I pavimenti della sala.
 *
 * Un foglio solo, come per gli arredi: prima stavano in tre copie
 * identiche — editor, modulo del cliente, selettore dei tavoli — e
 * cambiarne uno voleva dire cambiarne tre, o mostrare tre sale diverse.
 *
 * Disegnati in CSS e non con immagini, e non e' un vezzo: questa
 * piantina si ingrandisce da 18 a 60 pixel per cella, e una fotografia
 * di parquet a quel punto e' sfocata. Un gradiente e' nitido a
 * qualunque zoom, non pesa niente e non chiede nessuna richiesta al
 * server.
 *
 * Tutte le misure sono in `--tile`, che ogni piantina definisce a modo
 * suo: l'editor lo lega alla cella in pixel, le due viste del cliente
 * a una percentuale della larghezza. Cosi' il motivo scala insieme
 * alla sala senza che nessuna delle tre sappia niente delle altre.
 *
 * I selettori non nominano il contenitore — sono `.floor-x` e basta —
 * perche' i tre contenitori si chiamano in tre modi diversi. Nessun
 * altro stile in questo progetto usa `floor-`, quindi non c'e' niente
 * con cui litigare.
 */

/* ------------------------------------------------------------------ */
/* Parquet: listoni orizzontali                                        */
/*                                                                     */
/* Quattro strati, e ognuno fa una cosa sola: la venatura lunga, la    */
/* riga fra un corso e l'altro, il riflesso sotto quella riga (e' il   */
/* riflesso che da' lo spessore) e una variazione di tono ogni tre     */
/* corsi, perche' un pavimento con tutte le assi dello stesso colore   */
/* non esiste.                                                         */

.floor-parquet {
    background-color: #c99a63;
    background-image:
        /* venatura: righe sottili di larghezza irregolare */
        repeating-linear-gradient(
            90deg,
            rgba(103, 62, 24, .10) 0,
            rgba(103, 62, 24, .10) 1px,
            transparent 1px,
            transparent calc(var(--tile) * .17),
            rgba(140, 92, 44, .09) calc(var(--tile) * .17),
            rgba(140, 92, 44, .09) calc(var(--tile) * .19),
            transparent calc(var(--tile) * .19),
            transparent calc(var(--tile) * .41)
        ),
        /* riflesso chiaro sotto ogni giunto: e' quello che fa lo spessore */
        repeating-linear-gradient(
            180deg,
            rgba(255, 245, 230, .22) 0,
            rgba(255, 245, 230, .22) 2px,
            transparent 2px,
            transparent calc(var(--tile) * .5)
        ),
        /* giunto fra un corso e l'altro */
        repeating-linear-gradient(
            180deg,
            rgba(88, 50, 18, .38) 0,
            rgba(88, 50, 18, .38) 1px,
            transparent 1px,
            transparent calc(var(--tile) * .5)
        ),
        /* tono diverso ogni tre corsi */
        repeating-linear-gradient(
            180deg,
            rgba(90, 55, 22, .07) 0,
            rgba(90, 55, 22, .07) calc(var(--tile) * .5),
            transparent calc(var(--tile) * .5),
            transparent calc(var(--tile) * 1),
            rgba(255, 236, 209, .10) calc(var(--tile) * 1),
            rgba(255, 236, 209, .10) calc(var(--tile) * 1.5),
            transparent calc(var(--tile) * 1.5),
            transparent calc(var(--tile) * 2)
        );
}

/* ------------------------------------------------------------------ */
/* Piastrelle: quadrate, con la fuga                                   */
/*                                                                     */
/* La fuga e' due righe e non una: una scura e una chiara appena       */
/* sotto. Con una sola sembra una griglia disegnata; con due sembra    */
/* che le piastrelle abbiano uno spessore.                             */

.floor-tiles {
    background-color: #e9edf0;
    background-image:
        /* riflesso sul lato in ombra della fuga */
        linear-gradient(90deg, transparent calc(var(--tile) * 1.5 - 2px), rgba(255, 255, 255, .85) calc(var(--tile) * 1.5 - 2px)),
        linear-gradient(180deg, transparent calc(var(--tile) * 1.5 - 2px), rgba(255, 255, 255, .85) calc(var(--tile) * 1.5 - 2px)),
        /* la fuga */
        linear-gradient(90deg, rgba(120, 133, 143, .42) 1.5px, transparent 1.5px),
        linear-gradient(180deg, rgba(120, 133, 143, .42) 1.5px, transparent 1.5px),
        /* luce sulla piastrella, dall'angolo in alto a sinistra */
        linear-gradient(135deg, rgba(255, 255, 255, .55) 0, transparent 55%);
    background-size:
        calc(var(--tile) * 1.5) calc(var(--tile) * 1.5),
        calc(var(--tile) * 1.5) calc(var(--tile) * 1.5),
        calc(var(--tile) * 1.5) calc(var(--tile) * 1.5),
        calc(var(--tile) * 1.5) calc(var(--tile) * 1.5),
        calc(var(--tile) * 1.5) calc(var(--tile) * 1.5);
}

/* ------------------------------------------------------------------ */
/* Scacchi                                                             */
/*                                                                     */
/* Con `conic-gradient` la scacchiera e' una riga sola e viene         */
/* precisa. Quella di prima erano due gradienti a 45 gradi sovrapposti */
/* e usciva a strisce diagonali, non a scacchi.                        */

.floor-checker {
    background-color: #f2f2ef;
    background-image:
        conic-gradient(
            #33383f 0 25%,
            #f2f2ef 0 50%,
            #33383f 0 75%,
            #f2f2ef 0
        ),
        linear-gradient(140deg, rgba(255, 255, 255, .16) 0, transparent 70%);
    background-size:
        calc(var(--tile) * 2) calc(var(--tile) * 2),
        100% 100%;
}

/* ------------------------------------------------------------------ */
/* Cotto: a corsa diagonale                                            */
/*                                                                     */
/* Il cotto delle trattorie si posa quasi sempre in diagonale. Due     */
/* gradienti incrociati a 45 gradi danno il reticolo a rombi, e un     */
/* terzo strato smacchia il colore: il cotto vero non e' mai di un     */
/* tono solo, ed e' quello che lo distingue da un rettangolo arancione.*/

.floor-terracotta {
    background-color: #c47a52;
    background-image:
        /* fuga chiara, nelle due diagonali */
        repeating-linear-gradient(
            45deg,
            rgba(246, 232, 214, .55) 0,
            rgba(246, 232, 214, .55) 1.5px,
            transparent 1.5px,
            transparent calc(var(--tile) * 1.1)
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(246, 232, 214, .55) 0,
            rgba(246, 232, 214, .55) 1.5px,
            transparent 1.5px,
            transparent calc(var(--tile) * 1.1)
        ),
        /* macchie di cottura */
        radial-gradient(ellipse at 25% 30%, rgba(150, 74, 40, .22) 0, transparent 55%),
        radial-gradient(ellipse at 70% 75%, rgba(226, 158, 116, .28) 0, transparent 60%);
    background-size:
        auto auto,
        auto auto,
        calc(var(--tile) * 3.3) calc(var(--tile) * 2.7),
        calc(var(--tile) * 4.1) calc(var(--tile) * 3.9);
}

/* ------------------------------------------------------------------ */
/* Marmo                                                               */
/*                                                                     */
/* Le venature sono strati sottili a scale e angoli diversi: presi     */
/* insieme non si ripetono a occhio, che e' l'unica cosa che conta.    */
/* Le due precedenti erano due sole bande larghe e si vedeva il        */
/* motivo ricominciare.                                                */

.floor-marble {
    background-color: #f6f5f2;
    background-image:
        /* vena principale, sottile e scura */
        repeating-linear-gradient(
            107deg,
            transparent 0,
            transparent calc(var(--tile) * 2.6),
            rgba(122, 128, 138, .30) calc(var(--tile) * 2.6),
            rgba(122, 128, 138, .30) calc(var(--tile) * 2.62),
            transparent calc(var(--tile) * 2.62),
            transparent calc(var(--tile) * 5.9)
        ),
        /* vena secondaria, quasi parallela ma non del tutto */
        repeating-linear-gradient(
            99deg,
            transparent 0,
            transparent calc(var(--tile) * 1.7),
            rgba(140, 146, 156, .16) calc(var(--tile) * 1.7),
            rgba(140, 146, 156, .16) calc(var(--tile) * 1.74),
            transparent calc(var(--tile) * 1.74),
            transparent calc(var(--tile) * 4.3)
        ),
        /* vena chiara di rimando, nell'altro verso */
        repeating-linear-gradient(
            -71deg,
            transparent 0,
            transparent calc(var(--tile) * 3.1),
            rgba(255, 255, 255, .8) calc(var(--tile) * 3.1),
            rgba(255, 255, 255, .8) calc(var(--tile) * 3.16),
            transparent calc(var(--tile) * 3.16),
            transparent calc(var(--tile) * 7.3)
        ),
        /* nuvola di fondo, per togliere il piatto */
        radial-gradient(ellipse at 30% 25%, rgba(206, 208, 205, .5) 0, transparent 60%),
        radial-gradient(ellipse at 78% 70%, rgba(232, 230, 224, .6) 0, transparent 55%);
    background-size:
        auto auto,
        auto auto,
        auto auto,
        calc(var(--tile) * 9) calc(var(--tile) * 7),
        calc(var(--tile) * 11) calc(var(--tile) * 8);
}

/* ------------------------------------------------------------------ */
/* Cemento                                                             */
/*                                                                     */
/* Il cemento e' grana fine, non pois. Quello di prima erano due       */
/* cerchi ripetuti e si vedevano come bolle. Qui la grana e' fatta da  */
/* punti piccoli a passi diversi fra loro, piu' una macchia larga che  */
/* rompe la regolarita'.                                               */

.floor-concrete {
    background-color: #dfe1e2;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(96, 104, 110, .16) 0, transparent 1.2px),
        radial-gradient(circle at 68% 12%, rgba(96, 104, 110, .13) 0, transparent 1.4px),
        radial-gradient(circle at 42% 78%, rgba(255, 255, 255, .55) 0, transparent 1.3px),
        radial-gradient(circle at 88% 62%, rgba(96, 104, 110, .11) 0, transparent 1.1px),
        radial-gradient(ellipse at 30% 40%, rgba(160, 168, 173, .22) 0, transparent 58%),
        radial-gradient(ellipse at 75% 65%, rgba(244, 246, 246, .5) 0, transparent 52%);
    background-size:
        calc(var(--tile) * .34) calc(var(--tile) * .29),
        calc(var(--tile) * .27) calc(var(--tile) * .38),
        calc(var(--tile) * .31) calc(var(--tile) * .26),
        calc(var(--tile) * .43) calc(var(--tile) * .33),
        calc(var(--tile) * 5.5) calc(var(--tile) * 4.5),
        calc(var(--tile) * 7) calc(var(--tile) * 6);
}