/* --- PALETTE UFFICIALE --- */
:root {
    --yellow: #F6DC00;
    --black: #000000;
    --orange: #e37c1a;
    --purple: #9C0AA3;
    --green: #38A800;
    --celeste: #19B5D1;
    --white: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--black);
    font-family: 'Caraque Regular', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
    
}

/* --- TIPOGRAFIA --- */
h1, h2, h3 {
    font-family: 'Caraque Bold', sans-serif;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

h2 { font-size: clamp(2rem, 5vw, 3rem); text-shadow: 3px 3px 0px var(--white); }
h3 { font-size: 1.5rem; color: var(--yellow); }

p {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
}

strong {
    font-family: 'Caraque Bold', sans-serif;
    letter-spacing: 0.5px;
}

/* --- LOGO HERO --- */
.hero-section {
    background-color: var(--yellow);
    padding: 5rem 5% 2rem 5%;
    text-align: center;
}

.hero-logo {
    width: 100%;
    max-width: 450px;
    height: auto;
    transform: rotate(-3deg);
}

.hero-subtitle {
    font-family: 'Caraque Bold', sans-serif;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    background-color: var(--black);
    color: var(--white);
    display: inline-block;
    padding: 0.5rem 1.5rem;
    transform: skew(-5deg) rotate(2deg);
    margin-top: 1.5rem;
}

/* --- SEZIONI E COLATURE --- */
.content-section {
    padding: 2rem 5% 4rem 5%;
}

.paint-drip {
    display: block;
    width: 100%;
    height: 80px;
    margin-top: -1px;
    margin-bottom: -1px;
    position: relative;
    z-index: 5;
}

/* --- GRAFFITI BUBBLES GLOBALI --- */
.graffiti-bubble {
    border: 8px solid var(--black);
    border-radius: 200px 70px 220px 80px / 80px 220px 60px 200px;
    padding: 3.5rem 2.5rem;
    max-width: 950px;
    margin: 0 auto;
    box-shadow: 16px 16px 0px var(--black);
    position: relative;
    z-index: 10;
}

.bubble-yellow { background-color: var(--yellow); color: var(--black); border-color: var(--black); }
.bubble-yellow h2 { color: var(--black); text-shadow: 3px 3px 0px var(--white); }

.bubble-black { background-color: var(--black); color: var(--white); border-color: var(--yellow); box-shadow: 16px 16px 0px var(--yellow); }
.bubble-black h2 { color: var(--orange); text-shadow: 3px 3px 0px var(--black); }

.bubble-white { background-color: var(--white); color: var(--black); border-color: var(--black); }
.bubble-white h2 { color: var(--green); text-shadow: 3px 3px 0px var(--black); }

.bubble-celeste { background-color: var(--celeste); color: var(--black); border-color: var(--black); }
.bubble-celeste h2 { color: var(--white); text-shadow: 3px 3px 0px var(--black); }

.scattered-wrapper {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
}

.scattered-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.scattered-bubble {
    padding: 2.5rem 2rem;
    position: relative;
}

/* --- NUOVO LAYOUT RECAP & GALLERIA (VOL 1) --- */
.recap-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: stretch;
    margin-top: 3rem;
}

.lineup-poster {
    background-color: var(--black);
    border: 8px solid var(--white);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 12px 12px 0px var(--celeste);
    transform: rotate(-1.5deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lineup-artists {
    color: var(--white);
    font-size: 1.25rem;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 1.5rem;
}

.lineup-artists strong {
    color: var(--yellow);
    display: inline-block;
    margin: 0 0.2rem;
}

.gallery-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 3; /* Forza una proporzione costante invece di un'altezza fissa */
min-height: auto; /* Rimuoviamo il vincolo dei 400px */
background-color: var(--black);
border: 8px solid var(--white); /* Bordo ridotto (era 16px) */
border-radius: 16px;
box-shadow: 10px 10px 0px var(--black);
overflow: hidden;
transform: rotate(2deg);
z-index: 1;
}

/* --- FOTO IN BIANCO E NERO CONTRASTATO --- */
/* Assicuriamoci che le slide siano sempre contenute */
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Taglia l'immagine per riempire il riquadro senza deformarsi */
opacity: 0;
transition: opacity 0.6s ease-in-out;
filter: grayscale(100%) contrast(1.2); 
}



.slide.active {
    opacity: 1;
    z-index: 2;
}

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: 'Caraque Bold', sans-serif;
    font-size: 1.5rem;
    background: repeating-linear-gradient(45deg, var(--black), var(--black) 15px, #1a1a1a 15px, #1a1a1a 30px);
}

@keyframes blink { 
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Correzione per il testo REC su mobile */
#rec-overlay {
font-size: 0.9rem !important; /* Testo più piccolo su mobile */
top: 10px !important;
right: 15px !important;
}
/* --- GRIGLIA MISSIONI --- */
.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.mission-box {
    background-color: var(--white);
    border: 6px solid var(--black);
    padding: 2rem;
    border-radius: 60px 20px 50px 30px;
    box-shadow: 8px 8px 0px var(--black);
}

.mission-box h3 { color: var(--black); margin-bottom: 0.5rem; text-shadow: none; }
.mission-box p { color: var(--black); font-size: 1.1rem; }

.slogan-box {
    background-color: var(--black);
    color: var(--yellow);
    font-family: 'Caraque Bold', sans-serif;
    font-size: 1.4rem;
    padding: 2rem;
    text-align: center;
    border: 6px solid var(--yellow);
    border-radius: 40px 90px 30px 80px;
    margin-top: 3rem;
    box-shadow: 10px 10px 0px var(--black);
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .recap-layout { grid-template-columns: 1fr; gap: 4rem; }
    .gallery-frame { aspect-ratio: 4 / 3; min-height: auto; }
}

@media (max-width: 768px) {
    .mission-grid, .scattered-grid { grid-template-columns: 1fr; }
    .graffiti-bubble { 
        padding: 2rem 1.5rem; 
        border-radius: 100px 40px 120px 50px / 50px 120px 40px 100px;
    }
}
/* --- GRANA ANALOGICA (FILM GRAIN) --- */
#film-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Generatore di rumore visivo in SVG ultraleggero */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.35; /* Intensità della grana. Alzala a 0.5 se la vuoi più marcata! */
    mix-blend-mode: overlay; /* Fonde la grana con le ombre e le luci della foto */
    z-index: 5;
    pointer-events: none; /* Evita che blocchi i click o le interazioni */
}
/* Centratura titolo e stile per l'immagine */
/* Layout a due colonne per la sezione ANIMA */
.intro-flex-container {
display: flex;
align-items: center; /* Allinea verticalmente l'immagine al testo */
gap: 3rem; /* Spazio tra immagine e testo */
margin-top: 2rem;
}

.puppet-side {
flex: 0 0 250px; /* Larghezza fissa per l'immagine (più grande) */
text-align: center;
}

.puppet-img-side {
width: 100%;
height: auto;

filter: drop-shadow(2px 4px 2px var(--black)); /* Ombra coerente col brand */
}

.text-side {
flex: 1; /* Il testo occupa tutto lo spazio rimanente */
}

/* Responsive: su mobile torna in colonna per non stringere troppo il testo */
@media (max-width: 768px) {
.intro-flex-container {
flex-direction: column;
gap: 1.5rem;
}
.puppet-side {
flex: 0 0 auto;
width: 180px;
}
}

/* --- LOADER SCREEN STYLE --- */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100vw; /* Usa vw/vh per coprire tutto */
height: 100vh;
background-color: var(--black);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Sopra a tutto */
transition: opacity 0.6s ease-out, visibility 0.6s;
}

.loader-content {
text-align: center;
width: 80%; /* Usa una percentuale per adattarsi allo schermo */
max-width: 300px; /* Ridotto il max-width per i telefoni piccoli */
}

.loader-logo {
width: 100%; /* Il logo prende la larghezza del contenitore */
max-width: 200px; /* Impedisce che diventi troppo grande */
height: auto;
margin-bottom: 2rem;
animation: pulse-dirty 1.5s infinite ease-in-out;
}

.loader-text {
color: var(--yellow);
font-family: 'Caraque Bold', sans-serif;
letter-spacing: 2px;
margin-top: 1rem;
font-size: 1rem;
}

/* Barra di caricamento stilizzata */
.loader-bar-container {
width: 100%;
height: 10px;
background: #1a1a1a;
border: 2px solid var(--white);
border-radius: 20px;
overflow: hidden;
}

.loader-bar {
width: 0%;
height: 100%;
background-color: var(--yellow);
transition: width 0.4s ease;
}

/* Animazione battito "sporco" */
@keyframes pulse-dirty {
0% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
50% { transform: scale(1.05) rotate(2deg); filter: brightness(1.2); }
100% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
}

/* Classe per nascondere il loader */
#loader.hidden {
opacity: 0;
visibility: hidden;
}
/* --- FIX LINEUP POSTER (MOBILE) --- */
@media (max-width: 768px) {
/* Trasforma la griglia in una colonna singola */
.recap-layout {
display: flex;
flex-direction: column;
gap: 2rem;
}

.lineup-poster {
transform: rotate(0deg); /* Raddrizza il contenitore su mobile per facilitare la lettura */
padding: 1.5rem 1rem;
width: 100%;
box-shadow: 8px 8px 0px var(--celeste); /* Ombra ridotta */
}

.lineup-artists {
font-size: 1.1rem; /* Testo leggermente più piccolo per far entrare i nomi */
line-height: 1.6;
text-align: center;
}

.lineup-poster h4 {
font-size: 1.3rem;
margin-bottom: 1rem;
}


.gallery-frame {
transform: rotate(0deg); /* Lo raddrizziamo per massimizzare lo spazio */
width: 100%;
/* Cambiamo il rapporto: il primo numero è la larghezza, il secondo l'altezza. 
   Aumentando il secondo (es. 3 / 4 o 1 / 1.2) il box diventa più alto. */
aspect-ratio: 1 / 1.2; 
margin-top: 1rem;
border: 8px solid var(--white);
}

.slide {
/* Con l'altezza aumentata, 'cover' assicura che la foto riempia tutto il nuovo spazio */
object-fit: cover; 
}
}
/* --- STILE CREDITI FOTO --- */
.photo-credit {
position: absolute;
bottom: 1px;
right: 3px;
color: rgba(255, 255, 255, 0.8); /* Bianco leggermente trasparente */
font-family: sans-serif; /* Font pulito per i crediti */
font-size: 0.5rem;
letter-spacing: 1px;
z-index: 10;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Ombra per renderlo leggibile su ogni foto */
text-transform: uppercase;
}

/* Modifica specifica per mobile */
@media (max-width: 768px) {
.photo-credit {
bottom: 1px;
right: 3px;
font-size: 0.5rem;
}
}

/* --- SEZIONE PALETTE LINEE CURVE --- */
.palette-bridge {
    width: 100%;
    height: 150px; /* Altezza della transizione */
    display: flex;
    overflow: hidden;
    background: var(--white); /* Parte dal bianco */
}

.color-stripe {
    flex: 1;
    height: 100%;
    /* Crea l'effetto curva in verticale */
    border-radius: 50% 50% 0 0 / 20px 20px 0 0; 
    transform: translateY(10px);
}

/* Colori della palette ANIMA */
.stripe-yellow  { background-color: var(--yellow); }
.stripe-orange  { background-color: var(--orange); }
.stripe-purple  { background-color: var(--purple); }
.stripe-green   { background-color: var(--green); }
.stripe-celeste { background-color: var(--celeste); }
.stripe-black   { background-color: var(--black); }