/* Home: intro 3D a tutto schermo, poi il sito con i compiti divisi per gruppi. */

:root {
    --sfondo: #0e0f13;
    --bianco: #f0ece4;
    --tenue: rgba(240, 236, 228, .6);
    --fioco: rgba(240, 236, 228, .42);
    --fuoco: #ff6a1e;
    --carta: rgba(255, 255, 255, .045);
    --bordo: rgba(255, 255, 255, .1);
    --stretto: "Barlow Condensed", "Arial Narrow", sans-serif;
    --testo: "Barlow", system-ui, sans-serif;
    --mono: "JetBrains Mono", Menlo, monospace;
    --margine: clamp(16px, 7vw, 110px);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--sfondo); }
html.in-intro { overflow: hidden; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(70vw 60vh at 85% 0, rgba(255, 106, 30, .14), transparent 70%),
        var(--sfondo);
    color: var(--bianco);
    font: 18px/1.45 var(--testo);
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---------- Intro ---------- */

#intro {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #05060a;
    transition: opacity .9s ease;
}

body.pronto #intro { opacity: 0; pointer-events: none; }

#scena { display: block; width: 100%; height: 100%; }

#salta {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: 20px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(10, 12, 16, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--bianco);
    font: 600 13px var(--stretto);
    letter-spacing: .16em;
    text-transform: uppercase;
}

#salta:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

#carica {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #05060a;
    font: 500 13px var(--mono);
    letter-spacing: .2em;
    color: var(--tenue);
    transition: opacity 1s;
}

#carica.via { opacity: 0; pointer-events: none; }

/* ---------- Sito ---------- */

#sito {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(40px, 9vh, 110px) var(--margine) 60px;
}

/* Entrando dallo schermo del monitor la pagina "si assesta" */
body:not(.pronto) #sito { opacity: 0; }
#sito { transition: opacity .9s ease; }

.sopra {
    margin: 0;
    font: 600 14px/1 var(--stretto);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tenue);
}

h1 {
    margin: .12em 0 .1em;
    font: 700 clamp(56px, 10vw, 150px)/.9 var(--stretto);
    letter-spacing: .01em;
    text-transform: uppercase;
}

.sotto { margin: 0; font-size: clamp(18px, 2vw, 22px); color: var(--tenue); }

.testa { margin-bottom: clamp(36px, 8vh, 80px); }

.gruppo { margin-bottom: 48px; }

h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 16px;
    font: 600 22px var(--stretto);
    letter-spacing: .08em;
    text-transform: uppercase;
}

h2 span { font: 500 14px var(--mono); color: var(--fuoco); letter-spacing: 0; }
h2 em { margin-left: 4px; font: 400 13px var(--mono); font-style: normal; color: var(--fioco); letter-spacing: 0; text-transform: none; }

.carte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.carta {
    --mx: 50%;
    --my: 50%;
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 22px 24px;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    background: var(--carta);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s, background .2s, transform .2s;
}

.carta b { font-weight: 500; font-size: 20px; padding-right: 28px; }
.carta small { font-size: 15px; line-height: 1.4; color: var(--tenue); }

/* Luce che segue il mouse e freccia che compare */
.carta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 106, 30, .18), transparent 65%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

.carta::after {
    content: "→";
    position: absolute;
    top: 20px;
    right: 22px;
    font: 500 20px var(--testo);
    color: var(--fuoco);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s, transform .2s;
}

.carta:hover::before, .carta:hover::after, .carta:focus-visible::after { opacity: 1; transform: none; }

/* Entrata delle carte quando l'intro è già stata vista */
body.entrata .testa, body.entrata .gruppo h2, body.entrata .carta {
    animation: entra .7s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}

@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
.carta code { font: 400 13px var(--mono); color: var(--fioco); overflow-wrap: anywhere; }

.carta:hover, .carta:focus-visible {
    border-color: rgba(255, 106, 30, .8);
    background: rgba(255, 106, 30, .1);
    transform: translateY(-2px);
}

.carta:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; }

.piede {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--bordo);
}

.piede span { margin-left: auto; font: 400 13px var(--mono); color: var(--fioco); }

.piede a, .piede button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tenue);
    font: 600 14px var(--stretto);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
}

.piede a:hover, .piede button:hover { color: var(--bianco); }
.piede a:focus-visible, .piede button:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 4px; }

/* ---------- Cursore personalizzato ---------- */

.cursore-custom, .cursore-custom * { cursor: none !important; }

#cursore { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .2s; }
#cursore.visibile { opacity: 1; }

#cursore span { position: fixed; left: 0; top: 0; }

#cursore .punto {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--fuoco);
    transition: width .15s, height .15s, margin .15s, border-radius .15s;
}

#cursore .anello::before {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    left: -18px;
    top: -18px;
    border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s, border-color .2s;
}

#cursore.sopra .anello::before { transform: scale(1.55); background: rgba(255, 106, 30, .14); border-color: var(--fuoco); }
#cursore.premuto .anello::before { transform: scale(.7); }
#cursore.testo .anello::before { transform: scale(0); }
#cursore.testo .punto { width: 2px; height: 22px; margin: -11px 0 0 -1px; border-radius: 1px; animation: lampeggia 1s steps(2) infinite; }

@keyframes lampeggia { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    body.entrata .testa, body.entrata .gruppo h2, body.entrata .carta { animation: none; }
    #sito, #intro { transition: opacity .3s; }
}