/* ==========================================================================
   BACKGROUND & STILE GLOBALE BASE (Tema Chiaro Glassmorphism iOS 26)
   Basato sulle specifiche strutturali fornite - Inverson Fashion Studio
   ========================================================================== */

/* Importazione Font Google come da specifiche */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;600;700&family=Lato:wght@400;600;700&display=swap');

:root {
    /* --- SFONDO AURORA INTEGRALE (Arcobaleno Etereo Ultra-Sfumato) --- */
    --bg-base: #f3f4f8;
    
    /* Mesh gradient liquido: fusione di Viola, Rosa Magenta, Ciano e Oro Solare */
    --bg-gradient: radial-gradient(at 0% 0%, rgba(255, 0, 128, 0.15) 0px, transparent 50%),
                   radial-gradient(at 100% 0%, rgba(0, 212, 255, 0.18) 0px, transparent 50%),
                   radial-gradient(at 100% 100%, rgba(255, 185, 0, 0.15) 0px, transparent 50%),
                   radial-gradient(at 0% 100%, rgba(130, 0, 255, 0.16) 0px, transparent 50%),
                   linear-gradient(135deg, #f5f6fa 0%, #e4e8f5 100%);
    
    --text-main: #111111;  
    --text-dark: #000000;  
    --accent-color: #000000; 
    --accent-hover: #222222;
    
    /* Configurazione Vetro Fluido (Massimizzato per lo sfondo Arcobaleno) */
    --glass-bg: rgba(255, 255, 255, 0.38); /* Abbassato a 0.38: permette alle sfumature accese sotto di fondersi nel vetro */
    --glass-border: rgba(255, 255, 255, 0.55);
    --glass-shadow: 0 30px 60px -15px rgba(25, 30, 50, 0.08); 
    --ios-radius: 28px; 
    
    --font-josefin: "Josefin Sans", sans-serif;
    --transition-fast: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    --transition-carousel: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ELIMINATO IL RESET RETTANGOLARE DELLE CARTOLINE */
*:focus { 
    outline: none !important;
    box-shadow: none !important;
}

html {
    height: 100% !important;
    scroll-behavior: smooth;
}

body {
    position: relative;
    height: 100%;
    font-size: 14px;
    color: var(--text-main);
    font-family: var(--font-josefin);
    background: var(--bg-base);
    background-image: var(--bg-gradient);
    background-size: 140% 140%; /* Dimensione calibrata per distendere le sfumature */
    background-attachment: fixed;
    line-height: 26px;
    margin: 0;
    padding: 0;
    animation: auroraFlow 25s ease infinite alternate; /* Micro-movimento della luce arcobaleno */
}

/* Utility Class: Pannello Effetto Vetro Trasparente iOS 26 */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(30px) saturate(220%); /* Sfocatura aumentata a 30px per liquefare l'arcobaleno sottostante */
    -webkit-backdrop-filter: blur(30px) saturate(220%);
    border: 1px solid var(--glass-border);
    border-radius: var(--ios-radius); 
    box-shadow: var(--glass-shadow);
    transition: var(--transition-fast);
}

.glass-panel:hover {
    background: rgba(255, 255, 255, 0.52);
    transform: translateY(-5px) scale(1.005); 
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 40px 80px -10px rgba(15, 20, 45, 0.12);
}

/* --- ANIMAZIONE NATIVA PER MUOVERE L'ARCOBALENO IN MODO IMPERCETTIBILE --- */
@keyframes auroraFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Contenitore Responsivo standard */
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Tipografia Unificata ad Alto Contrasto */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-josefin);
    font-weight: 700; 
    margin-bottom: 12px;
    color: var(--text-dark); 
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

h1 { font-size: clamp(28px, 5vw, 42px); } 
h2 { font-size: clamp(24px, 4vw, 34px); }
h3 { font-size: clamp(20px, 3.5vw, 28px); }
h4 { font-size: clamp(18px, 3vw, 24px); }

p {
    font-size: 15px; 
    font-family: var(--font-josefin);
    font-weight: 400; 
    line-height: 28px;
    margin: 0 0 15px 0;
    color: var(--text-main);
}

a {
    color: var(--text-main);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    
}

section {
    position: relative;
    padding: 60px 0;
}