/* ============================================================
   OrionMC — sections.css
   Impaginazione delle sezioni lunghe: fondo continuo, punti luce,
   angolari retro sulle card, footer. Condiviso da home, store,
   checkout e dashboard.
   Estratto da animations.css.
   ============================================================ */

/* ============================================================
   PAGINA CONTINUA + SEZIONI ASIMMETRICHE
   ------------------------------------------------------------
   Prima ogni sezione dipingeva la propria banda (#0d0e12 / #13151b)
   con un bordo di separazione: scorrendo si vedevano fasce più chiare
   e più scure. Ora il fondo è dipinto UNA VOLTA SOLA sul body ed è
   fisso, quindi le sezioni non hanno più cuciture tra loro.
   ============================================================ */

body {
    /* Un fondo unico per tutta la pagina, senza bande per sezione. Le stelle
       NON stanno qui: una tessera di sfondo si ripete per forza, e scorrendo
       si riconosce il disegno che ricomincia. Le disegna js/stars.js una volta
       sola su tutta l'altezza del documento. */
    background-color: var(--bg-dark);
}

/* Il campo stellare generato da js/stars.js: un elemento solo, tutte le stelle
   sono ombre di quello. Sta sotto a tutto e non intercetta il mouse. */
#starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    z-index: 0;
    pointer-events: none;
}

/* Guscio di sezione: nessuno sfondo, nessun bordo. Il ritmo verticale
   sostituisce le linee di separazione. */
.sec {
    position: relative;
    z-index: 1;
    width: min(1500px, 100%);
    margin-inline: auto;
    padding: clamp(72px, 11vh, 130px) clamp(16px, 4vw, 48px);
    background: none;
    border: none;
}

/* Il contenuto non riempie tutta la larghezza: si appoggia a un lato,
   alternandosi di sezione in sezione. */
.sec-inner {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    margin-inline: auto;
}
.sec-left  .sec-inner { margin-left: 0; margin-right: auto; }
.sec-right .sec-inner { margin-left: auto; margin-right: 0; }

.sec-head { margin-bottom: clamp(40px, 6vh, 72px); }
.sec-left  .sec-head { text-align: left; }
.sec-right .sec-head { text-align: right; }

/* La sottolineatura del titolo segue il lato della sezione invece di
   restare agganciata al centro. */
.sec-left .section-title::after {
    left: 0;
    right: auto;
    transform: none;
}
.sec-right .section-title::after {
    left: auto;
    right: 0;
    transform: none;
}

/* ── Angolari retro sulle card ────────────────────────────────
   Due parentesi ad angolo in diagonale (alto-destra e basso-sinistra),
   stesso arancione dei bottoni e stessa estrusione 3D del tab attivo:
   spigoli netti, nessun raggio, ombra piena sotto.

   Vanno messi sul WRAPPER della card, non sulla card stessa: tutte le
   card hanno overflow:hidden e ritaglierebbero i pseudo-elementi. */
/* Il padding stacca gli angolari dagli spigoli della card, così la
   racchiudono invece di appoggiarcisi sopra. Sta sul wrapper e non come
   offset negativo dei pseudo-elementi, che finirebbero fuori dal box
   ritagliato dall'overflow della card. */
.mc-corners {
    position: relative;
    padding: 26px;

    /* Gli angolari sono l'ultima cosa a comparire: restano invisibili finché
       la card non ha fatto l'85% del suo reveal, poi entrano gradualmente
       nell'ultimo tratto. --p è l'avanzamento 0→1 che animations.js scrive
       su ogni [data-reveal]; qui lo si rimappa su 0.85→1. */
    --corner-p: clamp(0, calc((var(--p, 1) - 0.85) * 6.667), 1);
}

.mc-corners::before,
.mc-corners::after {
    content: '';
    position: absolute;
    z-index: 20;
    width: 38px;
    height: 38px;
    border: 5px solid var(--accent-orange);
    border-radius: 0;
    /* Blur 0: l'ombra resta un blocco netto, come box-shadow 0 4px 0 sui bottoni */
    filter: drop-shadow(0 3px 0 var(--accent-orange-dark));
    pointer-events: none;
    opacity: var(--corner-p);
    /* Ingresso morbido: nessun rimbalzo, la scala segue linearmente lo scroll */
    transform: scale(calc(0.72 + 0.28 * var(--corner-p)));

    /* translate e scale come proprietà a sé, non dentro transform: così
       l'apertura al passaggio del mouse ha il suo tempo (breve, con un filo di
       rimbalzo) senza contagiare la scala legata allo scroll, che deve restare
       lineare o sobbalza mentre si scorre. */
    translate: 0 0;
    scale: 1;
    transition:
        opacity 0.35s linear,
        transform 0.35s linear,
        filter 0.24s ease-out,
        translate 0.26s var(--ease-out-back) var(--corner-delay, 0ms),
        scale 0.26s var(--ease-out-back) var(--corner-delay, 0ms);
}

/* Angolo in alto a destra: restano solo i lati alto e destro.
   L'origine sullo spigolo fa "crescere" l'angolare verso l'interno. */
.mc-corners::before {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    transform-origin: top right;
}

/* Angolo in basso a sinistra: restano solo i lati basso e sinistro.
   Parte 70ms dopo l'altro: due angolari che si muovono identici e insieme
   sono precisamente ciò che fa sembrare la cosa un meccanismo. */
.mc-corners::after {
    --corner-delay: 70ms;
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    transform-origin: bottom left;
}

/* Gli angolari si scostano lungo la propria diagonale, come una cornice che
   si apre: si muove tutto insieme, bordo compreso, invece di allargare la
   scatola lasciando il bordo dello stesso spessore. */
.mc-corners:hover::before,
.mc-corners:focus-within::before {
    translate: 7px -7px;
    scale: 1.08;
    filter: drop-shadow(0 5px 0 var(--accent-orange-dark));
}
.mc-corners:hover::after,
.mc-corners:focus-within::after {
    translate: -7px 7px;
    scale: 1.08;
    filter: drop-shadow(0 5px 0 var(--accent-orange-dark));
}

/* Variante specchiata: angolari in alto a SINISTRA e in basso a destra.
   La scheda dello staff entra da destra, e su quella diagonale i due
   angoli restano liberi. Si ridefiniscono solo lato e origine, il resto
   (ingresso, apertura al passaggio del mouse) resta quello di sopra. */
.mc-corners-mirror::before {
    right: auto;
    left: 0;
    border-left: 5px solid var(--accent-orange);
    border-right: none;
    transform-origin: top left;
}
.mc-corners-mirror::after {
    left: auto;
    right: 0;
    border-right: 5px solid var(--accent-orange);
    border-left: none;
    transform-origin: bottom right;
}
/* Stessa apertura in diagonale, verso l'angolo opposto. */
.mc-corners-mirror:hover::before,
.mc-corners-mirror:focus-within::before { translate: -7px -7px; }
.mc-corners-mirror:hover::after,
.mc-corners-mirror:focus-within::after { translate: 7px 7px; }

/* ── Hover della card ─────────────────────────────────────────
   La card si solleva e si inclina di un soffio, e la foto dentro spinge
   contro la cornice contro-ruotando: il quadro e il suo contenuto non si
   muovono come un blocco solo, ed è quello a dare profondità senza ricorrere
   a un'ombra sfocata o a un tilt che insegue il mouse.

   Le proprietà usate sono translate/rotate/scale a sé, non transform: quella
   è scritta inline dal motore dei reveal (su .mc-corners) e dal carosello
   (sull'immagine, scale(1.04) al cambio slide). Come proprietà separate si
   compongono invece di sovrascriversi, e il .mc-window-static con
   "transform: none !important" resta rispettato.

   Tempi: ease-out-expo è già la curva del sito — parte svelta e si posa a
   lungo, che è come si muove una cosa che pesa. */
/* La prospettiva sta sul GENITORE: perspective agisce sui figli, non
   sull'elemento che la porta. Il :has evita di dover aggiungere una classe
   ai tre contenitori, che sono diversi fra loro. */
:has(> .mc-corners[data-reveal]) {
    perspective: 1100px;
}

.mc-corners[data-reveal] {
    transition:
        /* Il sollevamento pesa e si posa con calma... */
        translate 0.45s var(--ease-out-expo),
        /* ...l'inclinazione invece insegue il puntatore, quindi corta. Un
           filo di ritardo però ci vuole: senza, la card è incollata al mouse
           e sembra un pannello trascinato, non un oggetto che reagisce. */
        rotate 0.22s ease-out;
}
.mc-corners[data-reveal]:hover,
.mc-corners[data-reveal]:focus-within {
    translate: 0 -4px;
}

.mc-corners[data-reveal] .mc-window img {
    transition:
        scale 0.55s var(--ease-out-expo),
        rotate 0.55s var(--ease-out-expo);
}
.mc-corners[data-reveal]:hover .mc-window img,
.mc-corners[data-reveal]:focus-within .mc-window img {
    scale: 1.055;
    /* Controrotazione: la foto resiste all'inclinazione della cornice invece
       di seguirla. Meno della metà, o sembra che scivoli. */
    rotate: 0.28deg;
}

/* Il contatore slide stava proprio sotto l'angolare in alto a destra:
   lo si sposta nell'angolo libero. */
.mc-corners .carousel-counter {
    right: auto;
    left: 12px;
}

@media (max-width: 640px) {
    .mc-corners { padding: 16px; }
    .mc-corners::before,
    .mc-corners::after {
        width: 26px;
        height: 26px;
        border-width: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-corners::before,
    .mc-corners::after {
        transition: none;
        opacity: 1;
        transform: none;
        translate: 0 0;
        scale: 1;
    }
    .mc-corners:hover::before,
    .mc-corners:hover::after,
    .mc-corners:focus-within::before,
    .mc-corners:focus-within::after {
        translate: 0 0;
        scale: 1;
    }
    .mc-corners[data-reveal],
    .mc-corners[data-reveal]:hover,
    .mc-corners[data-reveal]:focus-within,
    .mc-corners[data-reveal]:hover .mc-window img,
    .mc-corners[data-reveal]:focus-within .mc-window img {
        transition: none;
        translate: 0 0;
        rotate: 0deg;
        scale: 1;
    }
}


.site-footer {
    background: none;
    border: none;
    /* Nessun filetto di separazione: lo stacco lo fa già lo spazio */
    box-shadow: none;
}

/* Sotto il breakpoint l'asimmetria diventa illeggibile: si torna
   al layout centrato classico. */
@media (max-width: 900px) {
    .sec-left  .sec-inner,
    .sec-right .sec-inner { margin-inline: auto; }
    .sec-left  .sec-head,
    .sec-right .sec-head { text-align: center; }
    .sec-left  .section-title::after,
    .sec-right .section-title::after { left: 50%; right: auto; transform: translateX(-50%); }
}


/* ============================================================
   TESTATA DI SEZIONE — vocabolario comune
   ------------------------------------------------------------
   Prima ogni sezione scriveva il proprio titolo con una manciata di
   utility (text-2xl sm:text-3xl md:text-4xl lg:text-5xl…), quindi
   due sezioni avevano scale diverse per motivi che non c'entravano
   col contenuto. Qui la scala è una sola, e sopra al titolo c'è
   un'etichetta numerata: la pagina è lunga, e il numero dice a che
   punto della visita si è arrivati — come il capitolo di un manuale.
   ============================================================ */

/* Due larghezze in più oltre alle due colonne laterali: piena per le
   griglie (numeri, feature) e stretta per la lettura (domande). */
.sec-wide   .sec-inner { width: min(1240px, 100%); margin-inline: auto; }
.sec-narrow .sec-inner { width: min(820px, 100%);  margin-inline: auto; }

.sec-head-center { text-align: center; }
.sec-head-center .section-title::after { left: 50%; right: auto; transform: translateX(-50%); }

/* display:flex e non inline-flex: il titolo è un inline-block (.section-title
   gli serve per misurare la sottolineatura), quindi un'etichetta inline gli
   si affiancava sulla stessa riga invece di stargli sopra. width:max-content
   la tiene stretta sul testo pur restando un blocco. */
.sec-eyebrow {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
}
/* Il numero è dentro un quadrato pieno: il resto dell'etichetta è
   grigio e piatto, quindi l'unico blocco di colore della riga è il
   segnaposto del capitolo.

   La cifra la conta il CSS e non il markup: se una sezione si toglie di
   mezzo perché il dato che mostra non è arrivato (i numeri della home lo
   fanno), un contatore scritto a mano lascerebbe un buco nella numerazione.
   Un elemento in display:none non incrementa il contatore, quindi la
   sequenza si richiude da sola. */
main { counter-reset: sec; }
.sec-eyebrow b::before {
    content: counter(sec, decimal-leading-zero);
}
.sec-eyebrow b {
    counter-increment: sec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    font-weight: normal;
    color: #2a1a04;
    background: var(--accent-orange);
    border: 2px solid var(--mc-border-dark);
    border-radius: 2px;
}

/* Nelle pagine a schede il contatore non funziona: i pannelli nascosti
   sono in display:none, non incrementano niente, e ogni scheda mostrerebbe
   "01". L'etichetta può quindi portarsi il numero addosso (<b data-n="02">)
   e allora il contatore si toglie di mezzo. */
.sec-eyebrow b[data-n] { counter-increment: none; }
.sec-eyebrow b[data-n]::before { content: attr(data-n); }

/* Titolo: una sola scala per tutte le sezioni. La parola dopo <span>
   è quella colorata, così il markup non ripete text-orange-500. */
.sec-title {
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1.15rem, 3vw, 2.5rem);
    line-height: 1.35;
    color: #fff;
}
.sec-title span { color: var(--accent-orange); }

/* Sottotitolo della testata e testo corrente delle sezioni: sono
   l'unico posto in cui la home usa Outfit a misura di lettura. */
.sec-sub {
    margin: 28px auto 0;
    max-width: 620px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-gray);
}
.sec-text {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--text-gray);
}
.sec-text b { color: #e5e7eb; font-weight: 700; }

/* Sotto il breakpoint le testate laterali sono già centrate dal blocco
   più in alto: qui basta riportare al centro anche l'etichetta. */
/* L'etichetta segue il lato della sezione, come il titolo. */
.sec-head-center .sec-eyebrow { margin-inline: auto; }
.sec-right .sec-head .sec-eyebrow { margin-left: auto; }

@media (max-width: 900px) {
    .sec-left .sec-head .sec-eyebrow,
    .sec-right .sec-head .sec-eyebrow { margin-inline: auto; }
}