/* Cornice tablet industrial, vecchia e consumata: riutilizzabile (solo aspetto, nessun posizionamento) */
.lw-tablet {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    pointer-events: none;
    border-radius: 2px;
    box-sizing: border-box;
    /* angoli tagliati, da pannello industriale */
    clip-path: polygon(6px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 9px 100%, 0 calc(100% - 9px), 0 6px);
    /* corpo metallico ruvido */
    background:
        /* vernice scrostata: schegge chiare sparse */
        radial-gradient(circle at 8% 38%, rgba(190,190,180,.5) 0 1.5px, transparent 2px),
        radial-gradient(circle at 93% 61%, rgba(190,190,180,.45) 0 2px, transparent 2.5px),
        radial-gradient(circle at 47% 4%, rgba(190,190,180,.4) 0 1.5px, transparent 2px),
        radial-gradient(circle at 71% 96%, rgba(190,190,180,.45) 0 2px, transparent 2.5px),
        radial-gradient(circle at 3% 82%, rgba(200,200,190,.4) 0 1px, transparent 1.5px),
        /* colature di ruggine e olio */
        linear-gradient(180deg, rgba(110,60,25,.55) 0, transparent 14%) 14% 0 / 4% 100% no-repeat,
        linear-gradient(180deg, rgba(20,14,8,.7) 0, transparent 20%) 63% 0 / 3% 100% no-repeat,
        linear-gradient(0deg, rgba(90,50,20,.5) 0, transparent 16%) 88% 100% / 5% 100% no-repeat,
        /* sporco accumulato lungo i bordi */
        linear-gradient(0deg, rgba(10,8,5,.6), transparent 12%),
        linear-gradient(90deg, rgba(10,8,5,.55), transparent 9%),
        /* graffi */
        linear-gradient(112deg, transparent 0 18%, rgba(255,255,255,.14) 18.2%, transparent 18.6% 61%, rgba(255,255,255,.1) 61.1%, transparent 61.5%),
        linear-gradient(67deg, transparent 0 34%, rgba(0,0,0,.45) 34.2%, transparent 34.7% 83%, rgba(255,255,255,.09) 83.1%, transparent 83.4%),
        /* usura/ruggine agli angoli */
        radial-gradient(circle at 0 0, rgba(120,70,30,.5), transparent 28%),
        radial-gradient(circle at 100% 100%, rgba(100,60,25,.45), transparent 32%),
        radial-gradient(circle at 100% 0, rgba(0,0,0,.4), transparent 25%),
        linear-gradient(145deg, #4d4f4e 0%, #2f3131 45%, #1f2020 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.14),
        inset 0 0 0 5px rgba(0,0,0,.6),
        inset 0 0 0 6px rgba(255,255,255,.1),
        inset 0 0 0 9px rgba(0,0,0,.35),
        inset 0 0 0 10px rgba(255,255,255,.06),
        inset 0 0 34px rgba(0,0,0,.85),
        0 0 0 1px rgba(0,0,0,.6),
        0 8px 24px rgba(0,0,0,.6);
    -webkit-mask-image: linear-gradient(135deg, #000 0, #000 55%, transparent 100%);
    mask-image: linear-gradient(135deg, #000 0, #000 55%, transparent 100%);
}

/* schermo incassato, spento, con riflesso e vetro crepato */
.lw-tablet::before {
    content: "";
    position: absolute;
    inset: 9% 12% 9% 7%;
    border-radius: 6px;
    background:
        linear-gradient(125deg, rgba(255,255,255,.1) 0 22%, transparent 22.3%),
        linear-gradient(75deg, transparent 0 46%, rgba(255,255,255,.12) 46.1%, transparent 46.4% 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 40% 30%, #1d2a24 0%, #0a0f0d 70%);
    box-shadow:
        inset 0 0 0 2px #000,
        inset 0 0 18px rgba(0,0,0,.9),
        0 0 0 3px rgba(255,255,255,.07);
}

/* contenuto dello schermo: stesso riquadro dello schermo incassato */
.lw-tablet__screen {
    position: absolute;
    inset: 9% 12% 9% 7%;
    z-index: 1;
    pointer-events: auto;
    padding: 6% 7%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6%;
    font-family: monospace;
    color: #9fe8c0;
    text-shadow: 0 0 6px rgba(120,255,190,.55);
}
.lw-tablet__logo {
    height: 28%;
    max-width: 55%;
    object-fit: contain;
    object-position: left center;
    opacity: 0;
    transition: opacity 1s ease;
    align-self: flex-start;
}
.lw-tablet__logo.on { opacity: 1; }
.lw-tablet__title {
    font-size: clamp(9px, 1.05vw, 15px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    min-height: 1.3em;
}
.lw-tablet__desc {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    font-size: clamp(8px, .8vw, 12px);
    line-height: 1.45;
}
.lw-tablet__caret::after {
    content: "";
    display: inline-block;
    width: .55em;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: currentColor;
    animation: lwTabletBlink 1s steps(1) infinite;
}
@keyframes lwTabletBlink { 50% { opacity: 0; } }

/* viti esagonali, strisce di pericolo, feritoie, camera e pulsante fisico */
.lw-tablet::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* targhetta stampigliata */
    content: "LW-IND 047 \00B7 MU/TH LINK";
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 9% 2.2% 0;
    box-sizing: border-box;
    font: 700 7px/1 monospace;
    letter-spacing: .18em;
    color: rgba(196,150,20,.55);
    --bolt: radial-gradient(circle, #9a9c9e 0 1.5px, #3c3d3f 2px 4.5px, #0d0d0e 5px 6px, transparent 6.5px);
    background:
        /* viti grosse agli angoli e a metà lato */
        var(--bolt) 6px 6px / 14px 14px no-repeat,
        var(--bolt) calc(100% - 6px) 6px / 14px 14px no-repeat,
        var(--bolt) 6px calc(100% - 6px) / 14px 14px no-repeat,
        var(--bolt) calc(100% - 6px) calc(100% - 6px) / 14px 14px no-repeat,
        var(--bolt) 50% 4px / 14px 14px no-repeat,
        /* striscia di pericolo giallo/nero consumata */
        repeating-linear-gradient(-45deg, rgba(196,150,20,.85) 0 7px, rgba(15,15,15,.9) 7px 14px) 7% calc(100% - 3px) / 52% 3.2% no-repeat,
        /* feritoie di areazione sul bordo destro */
        repeating-linear-gradient(0deg, #050505 0 3px, transparent 3px 7px) calc(100% - 3.5%) 16% / 2.5% 18% no-repeat,
        /* camera */
        radial-gradient(circle, #05080a 0 2px, #444 2.5px 4px, transparent 4.5px) calc(100% - 6%) 9% / 10px 10px no-repeat,
        /* pulsante home */
        radial-gradient(circle, #1a1b1c 0 6px, #66686a 7px 8px, transparent 9px) calc(100% - 4.5%) 58% / 20px 20px no-repeat;
}

/* Posizionamento in Who: sfondo discreto in alto a sinistra */
.who-tablet {
    position: fixed;
    left: 2.5vw;
    top: 14vh;
    width: min(23vw, 340px);
    z-index: 1;
    opacity: .62;
    transform: rotate(-5deg);
}

/* Posizionamento in Home: a destra, ruotato in senso opposto, piena opacità */
.home-tablet {
    position: fixed;
    right: 3vw;
    top: 26vh;
    width: min(23vw, 340px);
    z-index: 1;
    transform: rotate(5deg);
}

@media (max-width: 900px) {
    .who-tablet,
    .home-tablet { display: none; }
}