/* =============================================
   GLOBAL STYLES
   ============================================= */

/* Rimuove la scrollbar mantenendo la funzionalità */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1c1819; 
}
::-webkit-scrollbar-thumb {
  background: #333; 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b2003b; 
}

/* Base body styles per fluidità */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================
     UPCOMING EVENT MODAL
     ============================================= */

.event-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.event-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.event-modal-content {
    width: min(90vw, 560px);
    aspect-ratio: 2048 / 2500;
    max-height: calc(100svh - 2rem);
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-height: 700px) {
    .event-modal-content {
        width: auto;
        height: calc(100svh - 2rem);
    }
}

.event-modal.is-visible .event-modal-content {
    opacity: 1;
    transform: scale(1);
}

.event-modal-background {
    background: #1c1819;
}

.event-modal-open {
    overflow: hidden;
}

/* ============================================
   GLASSMORPHISM
   ============================================ */

.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.glass-panel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(178, 0, 59, 0.3);
}

/* =============================================
   HEADER BASE - Transizione fluida per tutte le proprietà
    che cambieranno quando lo header diventa scrolled
   ============================================ */

#home-header {
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================
   HEADER SCROLLED STATE WITH DYNAMIC GLASS EFFECT
   ============================================= */

.header-scrolled {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background-color: rgba(28, 24, 25, 0.75) !important;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
}

/* =============================================
   HAMBURGER EFFECT
   ============================================ */

/* Animazione per l'icona Hamburger */
.mobile-menu-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.mobile-menu-open span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
} 


/* =============================================
   EXPERIENCE ITEMS ANIMATION ON SCROLL
   ============================================ */

/* Stato iniziale dell'animazione */
.experience-item {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stato applicato via JS quando l'elemento entra nel viewport */
.experience-item.is-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* =============================================
   EXPERIENCE IMAGES HOVER EFFECT
   ============================================ */

/* Transizione fluida universale per i contenitori immagine */
.expander-container {
    transition: width 0.4s ease-in-out, transform 0.4s ease-in-out !important;
}

.actual-image {
    transform-origin: center center;
    transition: transform 0.4s ease-in-out;
}

.actual-image:hover {
    transform: none !important;
}

.actual-image img {
    transform-origin: center center;
    transition: transform 0.7s ease-in-out;
}

.actual-image:hover img {
    transform: scale(1.05);
}

/* Espansione per immagini a DESTRA (verso sinistra) */
#masterclass:has(.actual-image:hover) .expander-right, 
#privacy:has(.actual-image:hover) .expander-right,
#harmony:has(.actual-image:hover) .expander-right,
#memories:has(.actual-image:hover) .expander-right {
    width: 100% !important;
    transform: translate(0, 0) !important;
}

/* Espansione per immagini a SINISTRA (verso destra) */
#history:has(.actual-image:hover) .expander-left,
#expert:has(.actual-image:hover) .expander-left,
#flavors:has(.actual-image:hover) .expander-left {
    width: 100% !important;
    transform: translate(0, 0) !important;
}

/* Attivazione Overlay Testo */
#experience div:has(.actual-image:hover) .text-overlay {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}


/* Espansione immagine */
.masterclass-image-container {
    transition: width 0.6s ease-in-out, transform 0.6s ease-in-out !important;
}

#masterclass:has(.actual-image:hover) .masterclass-image-container {
    width: 100% !important;
    transform: translateX(0) !important;
}

/* Sovrascrivi o integra la regola precedente nel tuo CSS */
#masterclass:has(.actual-image:hover) .text-overlay {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

/* =============================================
   EXPERIENCE CAROUSEL DRAG CURSOR
   ============================================ */

.carousel-track {
    cursor: grab;
    user-select: none;
}

.carousel-track.is-dragging {
    cursor: grabbing;
}

/* =============================================
   BTN-WINE: WAVY FILL EFFECTS
   ============================================= */

.btn-wine-down {
    display: inline-block; /* Fondamentale per i link */
}

/* BASE COMUNE */
.btn-wine-up, .btn-wine-down {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: none;
    cursor: pointer;
    background: transparent;
    transition: color 2.5s ease; /* cambiamento in sintonia con il movimento del vino: transition: color 2.5s cubic-bezier(0.16, 1, 0.3, 1); */
}

.btn-wine-up:hover, .btn-wine-down:hover {
    color: white;
}

.btn-wine-up::before, .btn-wine-up::after,
.btn-wine-down::before, .btn-wine-down::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: bottom 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-wine-up::before, .btn-wine-down::before { background-color: rgba(178, 0, 59, 0.9); }
.btn-wine-up::after, .btn-wine-down::after { background-color: rgba(209, 25, 86, 0.6); }

/* LOGICA DI MOVIMENTO */
.btn-wine-up::before, .btn-wine-up::after { bottom: -100%; }
.btn-wine-up:hover::before, .btn-wine-up:hover::after { bottom: -15%; }

.btn-wine-down::before, .btn-wine-down::after { bottom: -15%; }
.btn-wine-down:hover::before, .btn-wine-down:hover::after { bottom: -100%; }

/* ANIMAZIONI ONDE (Stile Footer) */
.btn-wine-up:hover::before, .btn-wine-down::before {
    animation: wineSwingA 5s ease-in-out infinite;
}
.btn-wine-up:hover::after, .btn-wine-down::after {
    animation: wineSwingB 3s ease-in-out infinite;
}

/* Onde a 4 punti (Come il footer) */
@keyframes wineSwingA {
    0%, 100% { clip-path: polygon(0% 10%, 100% 20%, 100% 100%, 0% 100%); }
    50%      { clip-path: polygon(0% 20%, 100% 10%, 100% 100%, 0% 100%); }
}

@keyframes wineSwingB {
    0%, 100% { clip-path: polygon(0% 20%, 100% 10%, 100% 100%, 0% 100%); }
    50%      { clip-path: polygon(0% 10%, 100% 20%, 100% 100%, 0% 100%); }
}

/* =============================================
   VALUEPROPOSITION SECTION FULL-SCREEN FIXED
   ============================================= */

#valueproposition {
    position: fixed; /* Si blocca allo schermo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1; /* Sta sotto a tutto il resto */
    pointer-events: none; /* Permette di cliccare ciò che c'è sotto */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Creiamo uno "spaziatore" nel flusso della pagina */
/* Senza questo, le sezioni successive salterebbero direttamente sopra la Hero */
.valueproposition-spacer {
    height: 100vh; 
    background: transparent;
    pointer-events: none;
}

/* Tutte le altre sezioni devono avere uno sfondo solido e z-index superiore */
section:not(#valueproposition), footer {
    position: relative;
    z-index: 10;
    background-color: #1c1819; /* Il tuo bg-app-dark */
}

/* Header inizialmente trasparente */
#home-header {
    background: transparent;
}

/* La Hero deve stare sopra inizialmente */
section:first-of-type {
    z-index: 20;
}

/* =============================================
   GUESTS ITEMS ANIMATION ON SCROLL
   ============================================= */

.guests-item {
    opacity: 0;
    transform: translateY(30px);
    /* Utilizziamo la variabile --delay che viene assegnata via JS */
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guests-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   FAQ ITEMS ANIMATION ON SCROLL
   ============================================= */

/* Stato iniziale dell'animazione */
.faq-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stato applicato via JS quando l'elemento entra nel viewport */
.faq-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   ITALIAN WAY SHIMMER EFFECT
   ============================================= */

.italian-way {
    display: inline-block;
    position: relative;
    /* Colore di base con sfumatura metallica */
    background: linear-gradient(
        to right, 
        #71717a 20%, 
        #ffffff 40%, 
        #ffffff 60%, 
        #71717a 80%
    );
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    
    /* Animazione shimmer base */
    animation: shine 5s linear infinite;
    cursor: default;
}

@keyframes shine {
    to { background-position: 200% center; }
}