/* ============================================================
   Evolventa: font principale del sito.
   Il woff2 e' piu' leggero e lo capiscono tutti i browser recenti;
   il woff resta come ripiego. font-display: swap fa comparire subito
   il testo con il font di sistema, senza attese.
   Licenza GPL con eccezione per i font, vedi assets/fonts/LICENSE.txt
   ============================================================ */
/* ----------------------------------------------------------------
 * I caratteri del sito
 *
 * Due famiglie con due mestieri diversi. Evolventa e' un geometrico
 * tipo Futura: ha carattere e funziona nei titoli e nel marchio, ma
 * sui paragrafi lunghi stanca, perche' ha l'occhio piccolo e lettere
 * troppo simili fra loro. Inter e' disegnato per gli schermi, con
 * occhio alto e lettere aperte: e' quello che si legge senza
 * accorgersene, ed e' il posto giusto per il corpo dei testi.
 * ---------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Evolventa';
    src: url('../fonts/evolventa-regular.woff2') format('woff2'),
         url('../fonts/evolventa-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Evolventa';
    src: url('../fonts/evolventa-bold.woff2') format('woff2'),
         url('../fonts/evolventa-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Evolventa';
    src: url('../fonts/evolventa-oblique.woff2') format('woff2'),
         url('../fonts/evolventa-oblique.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Evolventa';
    src: url('../fonts/evolventa-bold-oblique.woff2') format('woff2'),
         url('../fonts/evolventa-bold-oblique.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Evolventa ha due soli pesi, 400 e 700: i pesi intermedi usati nelle
   classi Tailwind (500, 600) vengono resi con il grassetto dal browser. */

/* Benevento Centro - Stylesheet */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Card hover transitions */
.card,
a[class*="rounded-2xl"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hero gradient animation */
@keyframes heroGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-animated {
    background-size: 200% 200%;
    animation: heroGradient 15s ease infinite;
}

/* Hero fotografico homepage: lento zoom della foto e testi che entrano in sequenza */
@keyframes heroZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}
@keyframes heroEntra {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-foto-img {
    animation: heroZoom 9s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}
.hero-entra {
    animation: heroEntra 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-entra-2 { animation-delay: 0.15s; }
.hero-entra-3 { animation-delay: 0.3s; }
.hero-entra-4 { animation-delay: 0.45s; }
.hero-oro {
    background: linear-gradient(135deg, #f3dca4 0%, #D4A853 45%, #b8923f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-foto h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.hero-foto h1 .hero-oro { text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .hero-foto-img, .hero-entra { animation: none; }
}

/* Custom scrollbar for horizontal scroll */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #D4A853 transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #D4A853;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #b8923f;
}

/* Fascia oro della sezione Da non perdere: gradiente caldo con due aloni di luce */
.fascia-oro {
    background:
        radial-gradient(ellipse 60% 70% at 10% 0%, rgba(255, 248, 225, 0.75), transparent 70%),
        radial-gradient(ellipse 50% 60% at 95% 100%, rgba(128, 0, 0, 0.14), transparent 70%),
        linear-gradient(135deg, #f1dca6 0%, #e2c07a 40%, #d4a853 75%, #c49a45 100%);
}

/* Barra di scorrimento scura, visibile sullo sfondo oro */
.scrollbar-scura {
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 26, 26, 0.6) rgba(255, 255, 255, 0.35);
}

.scrollbar-scura::-webkit-scrollbar {
    height: 8px;
}

.scrollbar-scura::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.scrollbar-scura::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 26, 0.6);
    border-radius: 4px;
}

.scrollbar-scura::-webkit-scrollbar-thumb:hover {
    background: #800000;
}

/* ---------------------------------------------------------------- *
 * Tabellone dei treni: effetti dell'aggiornamento continuo
 *
 * La pagina non si ricarica: quando un dato cambia si accende per un
 * momento la casella interessata, cosi' si vede cosa e' cambiato.
 * ---------------------------------------------------------------- */

/* pallino che pulsa accanto all'ora di aggiornamento */
@keyframes battito {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.6); opacity: 0.45; }
}
.pallino-live {
    animation: battito 2s ease-in-out infinite;
}

/* onda che si allarga sotto il pallino, come un segnale radio */
.pallino-live::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: currentColor;
    animation: ondaLive 2s ease-out infinite;
}
@keyframes ondaLive {
    0%   { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(3.2); opacity: 0; }
}

/* ---------------------------------------------------------------- *
 * Tabellone a palette, quello delle stazioni di una volta
 *
 * Ricostruito sulla fotografia di un tabellone Solari: palette quasi
 * nere separate da un filo di luce, lettere in bianco caldo, la riga
 * d'ombra che taglia a meta' la casella dove le due alette si
 * incontrano. Gli spazi del nome sono palette vuote, come nel vero:
 * e' la casella nera a dare il ritmo alla parola.
 *
 * Il giro delle alette lo comanda il JavaScript, che fa scorrere le
 * lettere in ordine fino a quella giusta; qui c'e' solo lo scatto di
 * una paletta, che dura un attimo e si ripete a ogni cambio.
 * ---------------------------------------------------------------- */
.tabellone-orario {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    perspective: 500px;
}

.tabellone-cifra {
    position: relative;
    display: inline-block;
    text-align: center;
    color: #ece7d9;
    background: linear-gradient(180deg, #2f2f2f 0%, #1d1d1d 49%, #151515 51%, #0a0a0a 100%);
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.4);
    transform-origin: center center;
    backface-visibility: hidden;
    font-variant-numeric: tabular-nums;
}

/* la riga dove le due alette si incontrano */
.tabellone-cifra::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* L'ora: palette piccole, da leggere dentro la riga e non da lontano.
   La misura e' legata al testo che la contiene, cosi' cresce con lo schermo. */
.tabellone-cifra {
    min-width: 0.78em;
    padding: 0.1em 0.12em;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.25;
}

/* Il separatore e' un punto in basso, come sui tabelloni veri: li' l'ora si
   scrive 10.04, non 10:04. Sta fuori dalle palette, e' inciso sul telaio. */
.tabellone-punto {
    color: #9a9a9a;
    padding: 0 1px;
    font-weight: 700;
    align-self: flex-end;
    line-height: 1.6;
}

/* lo scatto di una singola aletta, ripetuto dal JavaScript a ogni cambio */
.tabellone-cifra.gira {
    animation: giraPaletta 0.09s ease-out;
}

@keyframes giraPaletta {
    0%   { transform: rotateX(-84deg); filter: brightness(1.7); }
    70%  { transform: rotateX(8deg);   filter: brightness(1.05); }
    100% { transform: rotateX(0);      filter: brightness(1); }
}

/* a chi ha chiesto meno movimento il tabellone appare gia' scritto */
@media (prefers-reduced-motion: reduce) {
    .tabellone-cifra.gira {
        animation: none;
    }
}
    100% { transform: rotateX(0);      opacity: 1; }
}

/* Trenino del riquadro in homepage: fa una corsetta e torna, per dire che il
   dato e' vivo. Il movimento e' piccolo, dentro il suo quadrato. */
@keyframes trenoCorre {
    0%, 12%   { transform: translateX(-120%); opacity: 0; }
    22%, 78%  { transform: translateX(0);     opacity: 1; }
    92%, 100% { transform: translateX(120%);  opacity: 0; }
}
.treno-corre {
    animation: trenoCorre 6s ease-in-out infinite;
}

/* Treni in arrivo o in partenza nei prossimi dieci minuti: la riga sta su un
   giallo acceso con una barra piena sul bordo sinistro.
   Il selettore parte da tr per avere la meglio sulle righe bianche e grigie. */
tr.riga-imminente {
    background-color: #fdf16b;
}
tr.riga-imminente > td:first-child {
    box-shadow: inset 4px 0 0 0 #eab308;
}
/* al passaggio del mouse il giallo resta, appena piu' scuro */
tr.riga-imminente:hover {
    background-color: #fbe94a;
}

/* riga nuova che entra e riga che se ne va */
@keyframes rigaEntra {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.riga-nuova {
    animation: rigaEntra 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.riga-uscita {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* barra sottile che scorre durante la richiesta dei dati */
@keyframes scorriBarra {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
.barra-aggiornamento {
    overflow: hidden;
}
.barra-aggiornamento > span {
    display: block;
    width: 25%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #D4A853, transparent);
    animation: scorriBarra 1.1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pallino-live,
    .pallino-live::after,
    .treno-corre,
    .tabellone-cifra,
    .riga-nuova,
    .barra-aggiornamento > span {
        animation: none;
    }
}

/* Placeholder gradients */
.placeholder-gradient {
    background: linear-gradient(135deg, rgba(128,0,0,0.15) 0%, rgba(212,168,83,0.1) 50%, rgba(128,0,0,0.05) 100%);
}

/* Focus outline */
*:focus-visible {
    outline: 2px solid #800000;
    outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #800000;
    box-shadow: 0 0 0 3px rgba(128,0,0,0.1);
}

/* Prose links */
.prose a {
    color: #800000;
    text-decoration: underline;
    text-decoration-color: rgba(128,0,0,0.3);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.prose a:hover {
    color: #D4A853;
    text-decoration-color: #D4A853;
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Snap scroll */
.snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.snap-start {
    scroll-snap-align: start;
}

/* Image loading shimmer */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

img[loading="lazy"] {
    background: linear-gradient(90deg, #f5f5f5 25%, #e5e5e5 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

img[loading="lazy"].loaded {
    animation: none;
    background: none;
}

/* Backdrop blur support */
@supports (backdrop-filter: blur(8px)) {
    .backdrop-blur-sm {
        backdrop-filter: blur(8px);
    }
}

@supports not (backdrop-filter: blur(8px)) {
    header.sticky {
        background-color: #1a1a1a;
    }
}

/* Selection color */
::selection {
    background-color: rgba(128,0,0,0.15);
    color: #2D1810;
}

/* ---------------------------------------------------------------- *
 * Pulsante Condividi
 *
 * Costruito su details e summary: senza JavaScript il menu si apre
 * comunque e i collegamenti funzionano. Il triangolino predefinito
 * va tolto a mano, perche' ogni browser lo disegna a modo suo.
 * ---------------------------------------------------------------- */
.condividi > summary {
    list-style: none;
    cursor: pointer;
}
.condividi > summary::-webkit-details-marker,
.condividi > summary::marker {
    display: none;
    content: '';
}
.condividi > summary:focus-visible {
    outline: 2px solid #800000;
    outline-offset: 2px;
}

.condividi-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 13rem;
    padding: 0.25rem 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.875rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    animation: condividiEntra .14s ease-out;
}

/* vicino al bordo destro il menu esce dallo schermo: la classe la mette
   il JavaScript quando si accorge che non c'e' spazio */
.condividi-menu.a-sinistra {
    left: auto;
    right: 0;
}

@keyframes condividiEntra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* sul telefono il menu occupa la larghezza utile e resta dentro lo schermo */
@media (max-width: 480px) {
    .condividi-menu {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 15rem;
        max-width: calc(100vw - 2rem);
    }
    .condividi-menu.a-sinistra {
        left: 50%;
        right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .condividi-menu { animation: none; }
}

/* Sul telefono il pulsante deve essere abbastanza alto da centrarlo con il
   dito: 44 pixel e' la misura sotto la quale si sbaglia il bersaglio. */
@media (max-width: 640px) {
    .condividi > summary {
        min-height: 44px;
    }
}

/* Il triangolino predefinito del riquadro richiudibile va tolto a mano:
   ogni browser lo disegna a modo suo. */
details > summary.list-none::-webkit-details-marker,
details > summary.list-none::marker {
    display: none;
    content: '';
}


/* ----------------------------------------------------------------
 * Chi usa quale carattere
 *
 * Il corpo del testo passa a Inter dal foglio di stile e non dalla
 * configurazione di Tailwind, cosi' vale anche se il CDN tarda a
 * rispondere. I titoli restano al carattere del marchio: sono corti,
 * si guardano piu' che leggerli, ed e' li' che il sito ha la sua
 * faccia.
 * ---------------------------------------------------------------- */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4,
.font-marchio {
    font-family: 'Evolventa', system-ui, -apple-system, 'Segoe UI', sans-serif;
}