/* Wine Cellar Page Styles - Gold & Black Theme with Enhanced Effects */

/* Updated Color Variables */
:root {
    --primary-gold: #d4af37;  /* Riduci luminosità: #b8941f */
   --rich-gold: #ae902e;
   --wine-amber: #483c2a;
   --ruby-gold: #e6b15f;
   --deep-amber: #544123;
   --wine-white: #f7f4e9;
   --wine-champagne: #f5e6d3;
   --dark-bg: #1a1a1a;
    --card-bg: rgba(42, 42, 42, 0.95);  /* Più scuro: rgba(20, 20, 20, 0.98) */
    --accent-light: rgba(212, 175, 55, 0.1);  /* Riduci: rgba(212, 175, 55, 0.05) */
   --gold-accent: rgba(212, 175, 55, 0.15);
   --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);  /* Riduci: rgba(255, 255, 255, 0.6) */
   --border-subtle: rgba(212, 175, 55, 0.2);
   --gold-border: rgba(212, 175, 55, 0.3);
   --glass-effect: rgba(255, 255, 255, 0.1);
   
   /* Shadow Colors */
   --shadow-red: rgba(255, 255, 255, 0.3);
   --shadow-gold: rgba(212, 175, 55, 0.3);
   --shadow-yellow: rgba(255, 215, 0, 0.3);
   --shadow-orange: rgba(255, 140, 0, 0.3);
}

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

body {
   font-family: 'Urbanist', 'Arial', sans-serif;
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%);
   color: var(--text-primary);
   line-height: 1.6;
   overflow-x: hidden;
}

/* Hero Section */
.hero-section {
   height: 100vh;
   background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), 
               url('https://images.unsplash.com/photo-1553361371-9b22f78e8b1d?w=1920') center/cover;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
   z-index: 1;
   clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.hero-section::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 300px;
   background: linear-gradient(transparent, var(--dark-bg));
   z-index: 2;
   pointer-events: none;
}

.hero-content {
   max-width: 800px;
   padding: 0 20px;
   animation: vineGrow 1.2s ease-out;
}

.hero-title {
   font-family: 'Playfair Display', serif;
   font-size: clamp(3rem, 8vw, 6rem);
   font-weight: 600;
   margin-bottom: 20px;
   background: linear-gradient(45deg, var(--primary-gold), var(--ruby-gold), var(--primary-gold));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: 0.02em;
   text-shadow: 0 0 30px var(--shadow-gold);
   filter: drop-shadow(0 0 20px var(--shadow-yellow));
}

.hero-subtitle {
   font-size: 1.5rem;
   margin-bottom: 40px;
   color: var(--text-secondary);
   text-shadow: 0 0 15px var(--shadow-gold);
}

.scroll-indicator {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   color: var(--primary-gold);
   animation: wineFlow 2.5s infinite;
   cursor: pointer;
   filter: drop-shadow(0 0 10px var(--shadow-gold));
}

/* Main Container */
.cantina-container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 80px 20px;
   position: relative;
   z-index: 10;
}

.section-intro {
   text-align: center;
   margin-bottom: 80px;
}

.section-title {
   font-size: 3rem;
   color: var(--primary-gold);
   margin-bottom: 20px;
   position: relative;
   text-shadow: 0 0 20px var(--shadow-gold);
   filter: drop-shadow(0 0 15px var(--shadow-orange));
}

.section-title::after {
   content: '';
   display: block;
   width: 120px;
   height: 4px;
   background: linear-gradient(45deg, var(--primary-gold), var(--ruby-gold), var(--primary-gold));
   margin: 20px auto;
   border-radius: 50px;
   box-shadow: 0 0 15px var(--shadow-gold);
}

.section-description {
   font-size: 1.3rem;
   color: var(--text-secondary);
   max-width: 800px;
   margin: 0 auto;
}

/* Territory Section - Enhanced with better mobile support */
.territory-section {
   margin-bottom: 80px;
   background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(212, 175, 55, 0.1));
   padding: 80px 60px;
   border: 2px solid var(--gold-border);
   position: relative;
   overflow: hidden;
   border-radius: 30px;
}

.territory-section::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, var(--shadow-gold), transparent 70%);
   animation: rotate 20s linear infinite;
   pointer-events: none;
}

.territory-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   position: relative;
   z-index: 2;
   padding: 10px;
}

.territory-title {
   font-size: 2.5rem;
   color: var(--primary-gold);
   margin-bottom: 25px;
   font-family: 'Playfair Display', serif;
   text-shadow: 0 0 15px var(--shadow-gold);
   filter: drop-shadow(0 0 10px var(--shadow-yellow));
}

.territory-description {
   font-size: 1.2rem;
   color: var(--text-secondary);
   margin-bottom: 30px;
   line-height: 1.8;
}

.territory-highlights {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.highlight-item {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 15px 20px;
   background: rgba(212, 175, 55, 0.2);
   border-radius: 0 25px 0 25px;
   border: 1px solid var(--gold-border);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 15px var(--shadow-red);
}

.highlight-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, var(--shadow-gold), transparent);
   transition: left 0.5s ease;
}

.highlight-item:hover::before {
   left: 100%;
}

.highlight-item:hover {
   transform: translateX(10px);
   box-shadow: 0 5px 20px var(--shadow-gold);
}

.highlight-icon {
   color: var(--primary-gold);
   font-size: 1.3rem;
   width: 25px;
   text-align: center;
   filter: drop-shadow(0 0 5px var(--shadow-yellow));
}

.wine-showcase {
   position: relative;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 20px 60px var(--shadow-gold);
   transform: rotate(5deg);
   transition: transform 0.5s ease;
}

.wine-showcase:hover {
   transform: rotate(-2deg) scale(1.05);
}

.showcase-image {
   width: 100%;
   height: 400px;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.wine-showcase:hover .showcase-image {
   transform: scale(1.2) rotate(-5deg);
}

.wine-badge {
   position: absolute;
   top: 30px;
   right: 30px;
   background: linear-gradient(45deg, var(--wine-amber), var(--primary-gold));
   color: white;
   padding: 12px 20px;
   border-radius: 25px;
   font-weight: 600;
   box-shadow: 0 10px 30px var(--shadow-gold);
   animation: pulse 3s infinite;
}

/* Wine Selection Grid - Enhanced */
.wine-selection-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
   gap: 50px;
   margin-bottom: 80px;
}

.wine-category-card {
   padding: 50px 40px;
    background: rgba(15, 15, 15, 0.98);  /* Invece di rgba(42, 42, 42, 0.95) */
    border: 1px solid var(--border-subtle);  /* Invece di 2px */
       transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
   border-radius: 30px;
   box-shadow: 0 0 20px var(--shadow-red);
}

.wine-category-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, var(--gold-accent), transparent, var(--accent-light));
   opacity: 0;
   transition: opacity 0.5s ease;
   z-index: 1;
}

.wine-category-card:hover::before {
   opacity: 1;
}

.wine-category-card:hover {
   transform: translateY(-15px) scale(1.02);
   box-shadow: 0 30px 80px var(--shadow-gold);
   border-color: var(--primary-gold);
}

.category-header {
   text-align: center;
   margin-bottom: 35px;
   position: relative;
   z-index: 2;
}

.category-icon {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: linear-gradient(45deg, var(--wine-amber), var(--primary-gold));
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   color: white;
   font-size: 2rem;
   box-shadow: 0 15px 40px var(--shadow-gold);
   animation: float 6s ease-in-out infinite;
}

.category-icon.rosso {
   background: linear-gradient(45deg, var(--deep-amber), var(--wine-amber));
   box-shadow: 0 15px 40px var(--shadow-red);
}

.category-icon.bollicine {
   background: linear-gradient(45deg, #e8e8e8, var(--primary-gold));
   color: var(--wine-amber);
   box-shadow: 0 15px 40px var(--shadow-yellow);
}

.category-title {
   font-size: 1.8rem;
   color: var(--primary-gold);
   margin-bottom: 8px;
   font-weight: 600;
   text-shadow: 0 0 10px var(--shadow-gold);
}

.category-subtitle {
   color: var(--text-secondary);
   font-size: 1rem;
}

.wine-list {
   margin-bottom: 30px;
   position: relative;
   z-index: 2;
}

.wine-item {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 25px 20px;
   margin-bottom: 15px;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 15px;
   border: 1px solid var(--border-subtle);
   transition: all 0.4s ease;
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 10px var(--shadow-red);
}

.wine-item::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 4px;
   height: 100%;
   background: linear-gradient(to bottom, var(--wine-amber), var(--primary-gold));
   transform: scaleY(0);
   transition: transform 0.3s ease;
}

.wine-item.featured {
   background: linear-gradient(135deg, var(--gold-accent), rgba(212, 175, 55, 0.1));
   border: 2px solid var(--gold-border);
   transform: scale(1.02);
   box-shadow: 0 0 20px var(--shadow-gold);
}

.wine-item.featured::before {
   transform: scaleY(1);
   width: 6px;
}

.wine-item:hover {
   transform: translateX(15px) scale(1.02);
   background: linear-gradient(135deg, var(--gold-accent), rgba(212, 175, 55, 0.1));
   border-color: var(--primary-gold);
   box-shadow: 0 10px 30px var(--shadow-gold);
}

.wine-item:hover::before {
   transform: scaleY(1);
}

.wine-info {
   flex: 1;
}

.wine-name {
   font-size: 1.1rem;
   color: var(--text-primary);
   margin-bottom: 5px;
   font-weight: 600;
}

.wine-producer {
   font-size: 0.9rem;
   color: var(--primary-gold);
   margin-bottom: 8px;
   font-style: italic;
   text-shadow: 0 0 5px var(--shadow-gold);
}

.wine-description {
   font-size: 0.85rem;
   color: var(--text-secondary);
   line-height: 1.5;
}

.wine-price {
   font-size: 1.4rem;
   color: var(--primary-gold);
   font-weight: 700;
   min-width: 70px;
   text-align: right;
   text-shadow: 0 0 10px var(--shadow-gold);
}

/* Wine Experiences Section */
.wine-experiences {
   margin-bottom: 80px;
    background: rgba(10, 10, 10, 0.95);  /* Più scuro */
   border-radius: 30px;
   padding: 70px 50px;
   border: 3px solid var(--gold-border);
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 30px var(--shadow-gold);
}

.wine-experiences::before {
   content: '';
   position: absolute;
   top: 20px;
   left: 20px;
   right: 20px;
   bottom: 20px;
   border: 1px solid var(--primary-gold);
   border-radius: 25px;
   pointer-events: none;
   opacity: 0.3;
}

.experiences-header {
   text-align: center;
   margin-bottom: 50px;
}

.experiences-title {
   font-size: 2.5rem;
   color: var(--primary-gold);
   margin-bottom: 15px;
   font-family: 'Playfair Display', serif;
   text-shadow: 0 0 20px var(--shadow-gold);
}

.experiences-subtitle {
   font-size: 1.2rem;
   color: var(--text-secondary);
}

.experiences-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 40px;
}

.experience-card {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 25px;
   padding: 40px 35px;
   text-align: center;
   border: 2px solid var(--border-subtle);
   transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   backdrop-filter: blur(10px);
   overflow: hidden;
   box-shadow: 0 0 15px var(--shadow-red);
}

.experience-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(circle at 30% 70%, var(--gold-accent), transparent 70%);
   opacity: 0;
   transition: opacity 0.5s ease;
}

.experience-card.premium {
   border-color: var(--primary-gold);
   background: linear-gradient(135deg, var(--gold-accent), rgba(212, 175, 55, 0.1));
   box-shadow: 0 0 25px var(--shadow-gold);
}

.experience-card:hover {
   transform: translateY(-15px) rotate(2deg);
   box-shadow: 0 25px 70px var(--shadow-gold);
   border-color: var(--primary-gold);
}

.experience-card:hover::before {
   opacity: 1;
}

.experience-icon {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   background: linear-gradient(45deg, var(--wine-amber), var(--primary-gold));
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 25px;
   color: white;
   font-size: 2.2rem;
   box-shadow: 0 15px 40px var(--shadow-gold);
   position: relative;
   z-index: 2;
   animation: morphing 8s ease-in-out infinite;
}

.experience-title {
   font-size: 1.5rem;
   color: var(--text-primary);
   margin-bottom: 15px;
   font-weight: 600;
   position: relative;
   z-index: 2;
}

.experience-description {
   color: var(--text-secondary);
   margin-bottom: 25px;
   line-height: 1.6;
   position: relative;
   z-index: 2;
}

.experience-details {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
   padding: 18px;
   background: linear-gradient(135deg, var(--gold-accent), rgba(212, 175, 55, 0.1));
   border-radius: 15px;
   border: 1px solid var(--gold-border);
   position: relative;
   z-index: 2;
   box-shadow: 0 0 10px var(--shadow-yellow);
}

.experience-duration,
.experience-price {
   font-weight: 600;
}

.experience-duration {
   color: var(--text-secondary);
}

.experience-price {
   color: var(--primary-gold);
   font-size: 1.2rem;
   text-shadow: 0 0 10px var(--shadow-gold);
}

/* Sommelier Choice Section */
.sommelier-choice {
   margin-bottom: 80px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(212, 175, 55, 0.03));
   padding: 80px 50px;
   border: 3px solid var(--gold-border);
   border-radius: 30px;
   box-shadow: 0 0 30px var(--shadow-gold);
}

.sommelier-content {
   display: grid;
   grid-template-columns: 350px 1fr;
   gap: 60px;
   align-items: start;
}

.sommelier-image {
   position: relative;
   transform: rotate(-3deg);
   transition: transform 0.5s ease;
}

.sommelier-image:hover {
   transform: rotate(1deg) scale(1.05);
}

.sommelier-photo {
   width: 100%;
   height: 400px;
   object-fit: cover;
   border-radius: 25px;
   box-shadow: 0 25px 70px var(--shadow-gold);
   border: 3px solid var(--gold-border);
}

.sommelier-badge {
   position: absolute;
   bottom: 25px;
   left: 25px;
   background: linear-gradient(45deg, var(--wine-amber), var(--primary-gold));
   color: white;
   padding: 12px 18px;
   border-radius: 25px;
   font-weight: 600;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
   gap: 8px;
   box-shadow: 0 10px 30px var(--shadow-gold);
}

.sommelier-title {
   font-size: 2.2rem;
   color: var(--primary-gold);
   margin-bottom: 25px;
   font-family: 'Playfair Display', serif;
   text-shadow: 0 0 15px var(--shadow-gold);
}

.sommelier-quote {
   font-size: 1.2rem;
   color: var(--text-secondary);
   line-height: 1.8;
   font-style: italic;
   margin-bottom: 30px;
   position: relative;
   padding: 25px;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 20px;
   border-left: 4px solid var(--primary-gold);
   box-shadow: 0 0 15px var(--shadow-yellow);
}

.sommelier-quote::before {
   content: '"';
   font-size: 5rem;
   color: var(--primary-gold);
   position: absolute;
   left: -15px;
   top: -30px;
   font-family: serif;
   opacity: 0.3;
}

.sommelier-signature {
   display: flex;
   flex-direction: column;
   margin-bottom: 40px;
   padding: 20px;
   background: var(--gold-accent);
   border-radius: 15px;
   border: 1px solid var(--gold-border);
   box-shadow: 0 0 10px var(--shadow-gold);
}

.signature-name {
   font-size: 1.4rem;
   color: var(--text-primary);
   font-weight: 600;
}

.signature-title {
   color: var(--primary-gold);
   font-size: 1rem;
   text-shadow: 0 0 5px var(--shadow-gold);
}

.monthly-selection {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 20px;
   padding: 35px;
   border: 2px solid var(--gold-border);
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 20px var(--shadow-yellow);
}

.monthly-selection::before {
   content: '';
   position: absolute;
   top: 10px;
   left: 10px;
   right: 10px;
   bottom: 10px;
   border: 1px solid var(--primary-gold);
   border-radius: 15px;
   pointer-events: none;
   opacity: 0.3;
}

.selection-title {
   color: var(--primary-gold);
   margin-bottom: 20px;
   font-size: 1.4rem;
   text-shadow: 0 0 10px var(--shadow-gold);
}

.selected-wine {
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 25px;
   align-items: center;
}

.wine-bottle-icon {
   font-size: 2.5rem;
   color: var(--primary-gold);
   animation: gentle-sway 4s ease-in-out infinite;
   filter: drop-shadow(0 0 10px var(--shadow-gold));
}

.wine-details .wine-name {
   font-size: 1.2rem;
   color: var(--text-primary);
   margin-bottom: 5px;
   font-weight: 600;
}

.wine-details .wine-producer {
   color: var(--primary-gold);
   font-size: 1rem;
   margin-bottom: 10px;
   text-shadow: 0 0 5px var(--shadow-gold);
}

.wine-details .wine-note {
   color: var(--text-secondary);
   font-size: 0.95rem;
   line-height: 1.5;
}

.wine-action {
   text-align: center;
}

.wine-action .wine-price {
   display: block;
   font-size: 1.4rem;
   color: var(--primary-gold);
   font-weight: 700;
   margin-bottom: 10px;
   text-shadow: 0 0 15px var(--shadow-gold);
}

/* CTA Section */
.cta-section {
   text-align: center;
   padding: 90px 50px;
   background: linear-gradient(135deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 5%));
   border: 3px solid var(--gold-border);
   position: relative;
   overflow: hidden;
   border-radius: 30px;
   box-shadow: 0 0 40px var(--shadow-gold);
}

.cta-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 200%;
   height: 100%;
   background: linear-gradient(90deg, #00000000, rgb(62 51 16 / 30%), #00000000);
   animation: wave-flow 8s linear infinite;
}

.cta-title {
   font-size: 2.8rem;
   color:white;
   margin-bottom: 25px;
   font-family: 'Playfair Display', serif;
   text-shadow: 0 0 25px var(--shadow-gold);
   position: relative;
   z-index: 2;
}

.cta-description {
   font-size: 1.4rem;
   color: var(--text-secondary);
   margin-bottom: 50px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.7;
   position: relative;
   z-index: 2;
}

.cta-buttons {
   display: flex;
   gap: 25px;
   justify-content: center;
   flex-wrap: wrap;
   position: relative;
   z-index: 2;
}

.cta-btn {
   padding: 20px 40px;
   border-radius: 25px;
   font-size: 1.3rem;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   text-decoration: none;
   display: inline-block;
   border: 3px solid transparent;
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 20px var(--shadow-red);
}

.cta-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s ease;
}

.cta-btn:hover::before {
   left: 100%;
}

.cta-btn.primary {
   background: linear-gradient(45deg, var(--wine-amber), var(--primary-gold));
   color: white;
   box-shadow: 0 10px 30px var(--shadow-gold);
}

.cta-btn.secondary {
   background: transparent;
   color: var(--primary-gold);
   border-color: var(--primary-gold);
   box-shadow: inset 0 0 20px var(--gold-accent);
}

.cta-btn:hover {
   transform: translateY(-8px) scale(1.05);
   box-shadow: 0 20px 50px var(--shadow-gold);
}

.cta-btn.secondary:hover {
   background: linear-gradient(45deg, var(--wine-amber), var(--primary-gold));
   color: white;
   border-color: transparent;
}

/* Buttons and Interactive Elements */
.explore-btn,
.experience-btn,
.wine-order-btn {
   padding: 12px 25px;
   background: linear-gradient(45deg, var(--wine-amber), var(--primary-gold));
   color: white;
   border: none;
   border-radius: 25px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
   display: inline-block;
   position: relative;
   z-index: 2;
   box-shadow: 0 5px 15px var(--shadow-gold);
}

.explore-btn:hover,
.experience-btn:hover,
.wine-order-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px var(--shadow-gold);
   filter: brightness(1.1);
}

.category-cta {
   text-align: center;
   position: relative;
   z-index: 2;
}

/* Background particles effect */
.particles {
   position: fixed;
top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: -1;
}

.particle {
   position: absolute;
   width: 3px;
   height: 3px;
   background: linear-gradient(45deg, var(--primary-gold), var(--ruby-gold));
   border-radius: 50%;
   animation: wine-particles 12s linear infinite;
   opacity: 0.4;
   box-shadow: 0 0 6px var(--shadow-gold);
}

/* Advanced Animations */
@keyframes vineGrow {
   0% {
       opacity: 0;
       transform: translateY(100px) scale(0.8);
   }
   50% {
       opacity: 0.7;
       transform: translateY(20px) scale(0.95);
   }
   100% {
       opacity: 1;
       transform: translateY(0) scale(1);
   }
}

@keyframes wineFlow {
   0%, 100% {
       transform: translateX(-50%) translateY(0);
       color: var(--primary-gold);
   }
   25% {
       transform: translateX(-50%) translateY(-15px);
       color: var(--ruby-gold);
       filter: drop-shadow(0 0 15px var(--shadow-yellow));
   }
   50% {
       transform: translateX(-50%) translateY(-8px);
       color: var(--primary-gold);
   }
   75% {
       transform: translateX(-50%) translateY(-20px);
       color: var(--ruby-gold);
       filter: drop-shadow(0 0 15px var(--shadow-orange));
   }
}

@keyframes rotate {
   from {
       transform: rotate(0deg);
   }
   to {
       transform: rotate(360deg);
   }
}

@keyframes float {
   0%, 100% {
       transform: translateY(0px);
   }
   50% {
       transform: translateY(-20px);
   }
}

@keyframes pulse {
   0% {
       box-shadow: 0 0 0 0 var(--shadow-gold);
       transform: scale(1);
   }
   50% {
       box-shadow: 0 0 0 15px rgba(212, 175, 55, 0);
       transform: scale(1.05);
   }
   100% {
       box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
       transform: scale(1);
   }
}

@keyframes swing {
   0%, 100% {
       transform: rotate(5deg);
   }
   50% {
       transform: rotate(-5deg);
   }
}

@keyframes morphing {
   0%, 100% {
       border-radius: 50%;
   }
   25% {
       border-radius: 60% 40% 60% 40%;
   }
   50% {
       border-radius: 70% 30% 70% 30%;
   }
   75% {
       border-radius: 40% 60% 40% 60%;
   }
}

@keyframes gentle-sway {
   0%, 100% {
       transform: rotate(-3deg);
   }
   50% {
       transform: rotate(3deg);
   }
}

@keyframes wave-flow {
   0% {
       left: -100%;
   }
   100% {
       left: 100%;
   }
}

@keyframes wine-particles {
   0% {
       transform: translateY(100vh) rotate(0deg);
       opacity: 0;
   }
   10% {
       opacity: 0.4;
   }
   90% {
       opacity: 0.4;
   }
   100% {
       transform: translateY(-100px) rotate(360deg);
       opacity: 0;
   }
}

/* Glowing effects animation */
@keyframes glow-pulse {
   0%, 100% {
       filter: drop-shadow(0 0 5px var(--shadow-gold));
   }
   50% {
       filter: drop-shadow(0 0 20px var(--shadow-yellow)) drop-shadow(0 0 30px var(--shadow-orange));
   }
}

/* Improved Mobile CSS - Redesigned for better readability */
@media (max-width: 1200px) {
   .territory-content {
       grid-template-columns: 1fr;
       gap: 40px;
       text-align: center;
   }
   
   .territory-section {
       padding: 60px 40px;
       border-radius: 25px;
   }
   
   .sommelier-content {
       grid-template-columns: 1fr;
       gap: 40px;
       text-align: center;
   }
   
   .sommelier-image {
       max-width: 350px;
       margin: 0 auto;
       transform: rotate(0deg);
   }
}

@media (max-width: 768px) {
   .cantina-container {
       padding: 40px 20px;
   }
   
   .section-title {
       font-size: 2.2rem;
   }
   
   .territory-section,
   .wine-experiences,
   .sommelier-choice {
       padding: 50px 30px;
       border-radius: 25px;
       margin-bottom: 40px;
   }
   
   .wine-selection-grid {
       grid-template-columns: 1fr;
       gap: 30px;
   }
   
   .wine-category-card {
       padding: 40px 30px;
       border-radius: 25px;
   }
   
   .experiences-grid {
       grid-template-columns: 1fr;
       gap: 30px;
   }
   
   .experience-card {
       border-radius: 25px;
       padding: 35px 25px;
   }
   
   .cta-section {
       border-radius: 25px;
       padding: 60px 30px;
   }
   
   .cta-buttons {
       flex-direction: column;
       align-items: center;
   }
   
   .cta-btn {
       width: 100%;
       max-width: 280px;
       border-radius: 25px;
   }
   
   .selected-wine {
       grid-template-columns: 1fr;
       gap: 20px;
       text-align: center;
   }
   
   .monthly-selection {
       border-radius: 20px;
       padding: 25px 20px;
   }
}

/* Enhanced Mobile Design - 400px and below */
@media only screen and (max-width: 400px) {
   html, body {
       overflow-x: hidden;
       width: 100%;
   }
   
   .cantina-container {
       max-width: 100%;
       padding: 30px 15px;
   }
   
   /* Hero Section Mobile */
   .hero-section {
       height: 100vh;
       min-height: 600px;
       clip-path: none;
       border-radius: 0 0 30px 30px;
   }
   
   .hero-content {
       padding: 30px 20px;
       max-width: 100%;
   }
   
   .hero-title {
       font-size: 2.5rem;
       line-height: 1.2;
       margin: 15px 0;
   }
   
   .hero-subtitle {
       font-size: 1.1rem;
       margin-bottom: 30px;
       padding: 0 10px;
   }
   
   /* Section Titles Mobile */
   .section-title {
       font-size: 2rem;
       line-height: 1.3;
       margin-bottom: 20px;
       padding: 0 10px;
   }
   
   .section-description {
       font-size: 1rem;
       line-height: 1.6;
       padding: 0 15px;
       margin-bottom: 40px;
   }
   
   /* Territory Section Mobile - Removed clipping issues */
   .territory-section {
       padding: 40px 20px;
       margin-bottom: 30px;
       border-radius: 20px;
       background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(212, 175, 55, 0.1));
   }
   
   .territory-content {
       gap: 30px;
       padding: 0;
   }
   
   .territory-title {
       font-size: 1.8rem;
       margin-bottom: 20px;
       padding: 0 10px;
   }
   
   .territory-description {
       font-size: 1rem;
       margin-bottom: 25px;
       padding: 0 10px;
   }
   
   .territory-highlights {
       gap: 12px;
       padding: 0 10px;
   }
   
   .highlight-item {
       padding: 15px;
       border-radius: 15px;
       margin-bottom: 10px;
       background: rgba(212, 175, 55, 0.15);
       border: 1px solid var(--gold-border);
   }
   
   .wine-showcase {
       margin: 20px 10px;
       border-radius: 20px;
       transform: rotate(0deg);
   }
   
   .showcase-image {
       height: 250px;
   }
   
   /* Wine Selection Grid Mobile */
   .wine-selection-grid {
       gap: 25px;
       margin-bottom: 40px;
   }
   
   .wine-category-card {
       padding: 30px 20px;
       border-radius: 20px;
       background: rgba(42, 42, 42, 0.95);
       border: 2px solid var(--gold-border);
   }
   
   .category-icon {
       width: 60px;
       height: 60px;
       font-size: 1.5rem;
       margin-bottom: 15px;
   }
   
   .category-title {
       font-size: 1.4rem;
       margin-bottom: 8px;
   }
   
   .category-subtitle {
       font-size: 0.9rem;
       margin-bottom: 20px;
   }
   
   /* Wine Items Mobile - Fixed layout issues */
   .wine-item {
       flex-direction: column;
       gap: 15px;
       align-items: flex-start;
       padding: 20px 15px;
       border-radius: 15px;
       margin-bottom: 12px;
       background: rgba(255, 255, 255, 0.05);
   }
   
   .wine-item.featured {
       padding: 25px 18px;
       background: linear-gradient(135deg, var(--gold-accent), rgba(212, 175, 55, 0.15));
   }
   
   .wine-info {
       width: 100%;
       margin-bottom: 10px;
   }
   
   .wine-name {
       font-size: 1rem;
       margin-bottom: 5px;
   }
   
   .wine-producer {
       font-size: 0.85rem;
       margin-bottom: 8px;
   }
   
   .wine-description {
       font-size: 0.8rem;
       line-height: 1.5;
   }
   
   .wine-price {
       text-align: left;
       font-size: 1.3rem;
       width: 100%;
       border-top: 1px solid var(--gold-border);
       padding-top: 10px;
       margin-top: 10px;
   }
   
   /* Experience Cards Mobile */
   .wine-experiences {
       padding: 40px 20px;
       border-radius: 20px;
       margin-bottom: 30px;
   }
   
   .experiences-title {
       font-size: 1.8rem;
       margin-bottom: 15px;
       padding: 0 10px;
   }
   
   .experiences-subtitle {
       font-size: 1rem;
       margin-bottom: 30px;
       padding: 0 10px;
   }
   
   .experiences-grid {
       gap: 25px;
   }
   
   .experience-card {
       padding: 30px 20px;
       border-radius: 20px;
       background: rgba(255, 255, 255, 0.08);
   }
   
   .experience-icon {
       width: 70px;
       height: 70px;
       font-size: 1.8rem;
       margin-bottom: 20px;
   }
   
   .experience-title {
       font-size: 1.3rem;
       margin-bottom: 15px;
   }
   
   .experience-description {
       font-size: 0.9rem;
       margin-bottom: 20px;
       line-height: 1.6;
   }
   
   /* Experience Details Mobile - Fixed cramped layout */
   .experience-details {
       flex-direction: column;
       gap: 15px;
       text-align: center;
       border-radius: 15px;
       padding: 20px;
       background: rgba(212, 175, 55, 0.1);
   }
   
   .experience-duration {
       font-size: 0.9rem;
       margin-bottom: 5px;
   }
   
   .experience-price {
       font-size: 1.3rem;
       color: var(--primary-gold);
   }
   
   /* Sommelier Section Mobile */
   .sommelier-choice {
       padding: 40px 20px;
       border-radius: 20px;
       margin-bottom: 30px;
   }
   
   .sommelier-content {
       gap: 30px;
   }
   
   .sommelier-photo {
       height: 280px;
       border-radius: 20px;
       margin-bottom: 20px;
   }
   
   .sommelier-title {
       font-size: 1.6rem;
       margin-bottom: 20px;
       padding: 0 10px;
   }
   
   .sommelier-quote {
       font-size: 1rem;
       padding: 20px 15px;
       border-radius: 15px;
       margin-bottom: 25px;
   }
   
   .sommelier-signature {
       padding: 18px 15px;
       border-radius: 15px;
       margin-bottom: 25px;
   }
   
   /* Monthly Selection Mobile - Better spacing */
   .monthly-selection {
       border-radius: 18px;
       padding: 25px 20px;
       background: rgba(255, 255, 255, 0.08);
   }
   
   .selection-title {
       font-size: 1.2rem;
       margin-bottom: 20px;
   }
   
   .selected-wine {
       gap: 20px;
       text-align: center;
   }
   
   .wine-bottle-icon {
       font-size: 2rem;
       margin-bottom: 15px;
   }
   
   .wine-details {
       width: 100%;
   }
   
   .wine-details .wine-name {
       font-size: 1.1rem;
       margin-bottom: 8px;
   }
   
   .wine-details .wine-producer {
       font-size: 0.9rem;
       margin-bottom: 12px;
   }
   
   .wine-details .wine-note {
       font-size: 0.85rem;
       line-height: 1.5;
   }
   
   .wine-action {
       margin-top: 15px;
       padding-top: 15px;
       border-top: 1px solid var(--gold-border);
   }
   
   .wine-action .wine-price {
       font-size: 1.3rem;
       margin-bottom: 12px;
   }
   
   /* CTA Section Mobile */
   .cta-section {
       border-radius: 20px;
       padding: 50px 20px;
       margin-bottom: 30px;
   }
   
   .cta-title {
       font-size: 1.8rem;
       margin-bottom: 20px;
       padding: 0 10px;
   }
   
   .cta-description {
       font-size: 1rem;
       margin-bottom: 35px;
       padding: 0 15px;
       line-height: 1.6;
   }
   
   .cta-buttons {
       gap: 15px;
   }
   
   .cta-btn {
       padding: 15px 30px;
       font-size: 1rem;
       border-radius: 25px;
       width: 100%;
       max-width: 250px;
   }
   
   /* Button improvements */
   .explore-btn,
   .experience-btn,
   .wine-order-btn {
       padding: 12px 25px;
       font-size: 0.9rem;
       border-radius: 20px;
       width: 100%;
       max-width: 200px;
       margin: 0 auto;
       display: block;
       text-align: center;
   }
   
   .category-cta {
       margin-top: 20px;
   }
   
   /* Typography Mobile */
   h1 { font-size: 1.8rem; }
   h2 { font-size: 1.6rem; }
   h3 { font-size: 1.4rem; }
   h4 { font-size: 1.2rem; }
   h5 { font-size: 1.1rem; }
   h6 { font-size: 1rem; }
   
   p, .text, .desc {
       font-size: 0.9rem;
       line-height: 1.6;
   }
   
   /* Image improvements */
   img {
       max-width: 100%;
       height: auto;
       border-radius: 15px;
   }
   
   /* Utility classes */
   .text-center-mobile {
       text-align: center !important;
   }
   
   .hide-mobile {
       display: none !important;
   }
   
   .show-mobile {
       display: block !important;
   }
   
   .margin-bottom-mobile {
       margin-bottom: 25px;
   }
   
   .padding-mobile {
       padding: 20px 15px;
   }
   
   /* Enhanced scroll behavior */
   .scroll-indicator {
       bottom: 20px;
       font-size: 1.5rem;
   }
}

/* Additional JavaScript Effects */
.animate-in {
   opacity: 1;
   transform: translateY(0);
   transition: all 0.8s ease;
}

.animate-in:not(.animate-in) {
   opacity: 0;
   transform: translateY(30px);
}

/* Hover effects for wine elements */
.wine-showcase,
.experience-card,
.wine-category-card {
   will-change: transform;
}

/* Performance optimizations */
.particles,
.territory-section::before,
.wine-experiences::before {
   will-change: transform;
}

/* Enhanced glow effects */
.category-icon,
.experience-icon,
.wine-bottle-icon {
   animation: glow-pulse 4s ease-in-out infinite;
}

/* Improved focus states for accessibility */
.cta-btn:focus,
.explore-btn:focus,
.experience-btn:focus,
.wine-order-btn:focus {
   outline: 2px solid var(--primary-gold);
   outline-offset: 2px;
}