/* BrewHauser Deferred CSS - Below-the-Fold Styles
 * Loaded after critical CSS to optimize initial render
 * Contains: Animations, secondary components, footer, advanced effects
 */

/* ========================================
   ANIMATIONS & KEYFRAMES
   ======================================== */
@keyframes fadeIn{
0%{opacity:0}
to{opacity:1}
}

@keyframes fadeInUp{
0%{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes slideIn{
0%{opacity:0;transform:translateX(100%)}
to{opacity:1;transform:translateX(0)}
}

@keyframes slideOut{
0%{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(100%)}
}

@keyframes bounce{
0%,to{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-4px)}
}

@keyframes glow-pulse{
0%,to{box-shadow:0 4px 15px var(--shadow-amber),inset 0 1px 0 var(--glass-white)}
50%{box-shadow:0 4px 25px var(--glow-gold),inset 0 1px 0 var(--glass-white),0 0 30px var(--glow-gold)}
}

@keyframes mini-float{
0%,to{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-2px) rotate(-2deg)}
}

@keyframes mini-beer-fill{
0%,to{height:92%}
50%{height:95%}
}

@keyframes mini-foam-bob{
0%,to{top:8%}
50%{top:5%}
}

@keyframes gentle-float{
0%,to{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-10px) rotate(2deg)}
}

@keyframes rise{
0%{opacity:0;transform:translateY(0) translateX(0) scale(.4)}
10%{opacity:.6}
25%{transform:translateY(-25vh) translateX(10px) scale(.6)}
50%{opacity:.8;transform:translateY(-50vh) translateX(-8px) scale(.8)}
75%{transform:translateY(-75vh) translateX(5px) scale(.9)}
to{opacity:0;transform:translateY(-110vh) translateX(0) scale(1)}
}

@keyframes gentle-rise{
0%{opacity:0;transform:translateY(100%) scale(.5)}
20%{opacity:.5}
80%{opacity:.2}
to{opacity:0;transform:translateY(-100vh) scale(1)}
}

@keyframes divider-glow{
0%,to{opacity:1;text-shadow:0 0 20px rgba(245,166,35,.2)}
50%{opacity:1;text-shadow:0 0 30px rgba(245,166,35,.6)}
}

@keyframes shimmer{
0%{left:-100%}
to{left:100%}
}

@keyframes pulse{
0%,to{transform:scale(1)}
50%{transform:scale(1.1)}
}

@keyframes gradientShift{
0%{background-position:0 50%}
50%{background-position:100% 50%}
to{background-position:0 50%}
}

@keyframes foam-drift{
0%,to{transform:translateX(0) translateY(0)}
25%{transform:translateX(30px) translateY(10px)}
50%{transform:translateX(-20px) translateY(5px)}
75%{transform:translateX(10px) translateY(15px)}
}

@keyframes slideDown{
0%{opacity:0;transform:translateY(-10px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes float-up{
0%{opacity:0;transform:translateY(110vh) scale(0) translateX(0)}
10%{opacity:.7;transform:translateY(90vh) scale(.5) translateX(10px)}
30%{transform:translateY(60vh) scale(.8) translateX(-15px)}
50%{transform:translateY(40vh) scale(1) translateX(20px)}
70%{transform:translateY(20vh) scale(1.1) translateX(-10px)}
90%{opacity:.3;transform:translateY(5vh) scale(1.2) translateX(15px)}
to{opacity:0;transform:translateY(-10vh) scale(1.3) translateX(0)}
}

@keyframes bubble-rise-internal{
0%{opacity:0;transform:translateY(0) scale(.5)}
20%{opacity:.8}
to{opacity:0;transform:translateY(-150px) scale(1)}
}

/* ========================================
   ADDITIONAL CSS VARIABLES
   ======================================== */
:root{
/* Extended color palette */
--beer-amber-light:#fbbf24;
--beer-amber-rich:#f59e0b;
--beer-caramel:#d97706;
--beer-bronze:#92400e;
--gold-accent:#d4af37;

/* Foam colors */
--foam-white:hsla(0,0%,100%,.98);
--foam-cream:hsla(48,96%,89%,.95);
--foam-light:rgba(255,251,235,.9);

/* Bubble colors */
--bubble-white:hsla(0,0%,100%,.6);
--bubble-gold:rgba(252,211,77,.4);
--bubble-shimmer:hsla(0,0%,100%,.9);

/* Additional shadows */
--shadow-amber:rgba(245,158,11,.2);
--glow-gold:rgba(252,211,77,.3);
--glow-white:hsla(0,0%,100%,.1);

/* Focus states */
--hover-glow:#fcd34d;
--active-press:#f59e0b;
--focus-ring:rgba(252,211,77,.5);

/* Additional spacing */
--space-2xl:4rem;
--space-3xl:6rem;

/* Beer colors for visualization */
--beer-brown-dark:#8b4513;
--beer-brown-light:#a0522d;

/* Neutral */
--neutral-cream:#fefce8;
}

/* ========================================
   BACKGROUND EFFECTS
   ======================================== */
.bubbles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
pointer-events:none;
z-index:0;
mix-blend-mode:screen;
}

.bubble{
position:absolute;
bottom:-100px;
background:radial-gradient(circle at 30% 30%,var(--bubble-shimmer),var(--bubble-gold),transparent);
border-radius:50%;
opacity:0;
animation:rise 8s cubic-bezier(.4,0,.2,1) infinite;
box-shadow:0 0 10px var(--glow-gold),0 0 20px var(--glow-white),inset -2px -2px 4px rgba(245,158,11,.2);
will-change:transform,opacity;
}

.particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
pointer-events:none;
z-index:1;
opacity:1;
}

.particle{
position:absolute;
background:var(--bubble-white);
border:1px solid hsla(0,0%,100%,.2);
border-radius:50%;
opacity:.7;
pointer-events:none;
box-shadow:0 0 12px hsla(0,0%,100%,.6),inset -2px -2px 4px hsla(0,0%,100%,.3),inset 2px 2px 4px hsla(0,0%,100%,.5);
}

.section-bubbles{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
pointer-events:none;
z-index:0;
}

.section-bubble{
position:absolute;
width:8px;
height:8px;
background:var(--bubble-white);
border-radius:50%;
animation:gentle-rise 12s ease-in-out infinite;
box-shadow:0 0 6px hsla(0,0%,100%,.5);
}

/* ========================================
   TRUST BAR
   ======================================== */
.trust-bar{
display:flex;
align-items:center;
justify-content:center;
gap:3rem;
padding:2rem 0;
margin:3rem 0;
background:linear-gradient(135deg,rgba(245,166,35,.1),rgba(212,175,55,.1));
border-top:1px solid rgba(245,166,35,.2);
border-bottom:1px solid rgba(245,166,35,.2);
flex-wrap:wrap;
}

.trust-item{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:.25rem;
}

.trust-item strong{
display:block;
font-size:2rem;
font-weight:700;
color:var(--primary-amber);
}

.trust-item span{
font-size:.9rem;
color:hsla(0,0%,96%,.8);
text-transform:uppercase;
letter-spacing:.5px;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.section-divider{
position:relative;
text-align:center;
padding:3rem 0;
overflow:hidden;
}

.section-divider:before,
.section-divider:after{
content:"";
position:absolute;
top:50%;
width:30%;
height:1px;
background:linear-gradient(90deg,transparent 0,var(--primary-amber) 50%,transparent 100%);
opacity:.3;
}

.section-divider:before{left:0}
.section-divider:after{right:0}

.divider-word{
display:inline-block;
font-family:var(--font-display);
font-size:clamp(2rem,4vw,3rem);
font-weight:400;
color:var(--primary-amber);
letter-spacing:.3em;
position:relative;
animation:divider-glow 4s ease-in-out infinite;
}

.divider-word:before,
.divider-word:after{
content:"•";
margin:0 2rem;
opacity:.8;
font-size:.5em;
vertical-align:middle;
}

/* ========================================
   FEATURES SECTION
   ======================================== */
.features-premium{
background:linear-gradient(180deg,rgba(26,43,60,0),rgba(26,43,60,.5));
padding:6rem 0;
position:relative;
}

.section-header{
text-align:center;
margin-bottom:4rem;
}

.section-subtitle{
color:var(--primary-amber);
font-size:1rem;
font-weight:500;
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:1rem;
}

.section-title{
font-family:var(--font-display);
font-size:clamp(2.5rem,4vw,3.5rem);
font-weight:700;
margin-bottom:1.5rem;
}

.section-description{
font-size:1.125rem;
color:hsla(0,0%,96%,.95);
max-width:600px;
margin:0 auto;
}

.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
gap:2rem;
max-width:1200px;
margin:0 auto;
padding:0 2rem;
}

.feature-card{
background:linear-gradient(135deg,hsla(0,0%,100%,.05),rgba(245,166,35,.05));
border:1px solid rgba(245,166,35,.2);
border-radius:20px;
padding:3rem;
position:relative;
overflow:hidden;
transition:all .3s cubic-bezier(.4,0,.2,1);
}

.feature-card:before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,var(--primary-amber),var(--gold-accent));
transform:scaleX(0);
transition:transform .3s ease;
}

.feature-card:hover{
background:linear-gradient(135deg,hsla(0,0%,100%,.08),rgba(245,166,35,.08));
transform:translateY(-5px);
box-shadow:0 20px 40px rgba(0,0,0,.2),0 10px 20px rgba(245,166,35,.2);
}

.feature-card:hover:before{
transform:scaleX(1);
}

.feature-icon{
width:60px;
height:60px;
background:linear-gradient(135deg,var(--primary-amber),var(--gold-accent));
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
margin-bottom:2rem;
box-shadow:0 10px 20px rgba(245,166,35,.2);
}

.feature-title{
font-size:1.5rem;
font-weight:600;
margin-bottom:1rem;
}

.feature-description{
color:hsla(0,0%,96%,.95);
line-height:1.7;
}

/* ========================================
   STORYTELLING SECTION
   ======================================== */
.storytelling-section{
background:linear-gradient(180deg,rgba(26,43,60,.5),rgba(26,43,60,.8));
padding:6rem 0;
position:relative;
overflow:hidden;
}

.story-header{
text-align:center;
max-width:900px;
margin:0 auto 3rem;
padding:0 2rem;
}

.chapter-carousel-container{
max-width:1200px;
margin:0 auto;
padding:0 3rem;
position:relative;
overflow:hidden;
}

.chapter-wheel{
display:flex;
gap:3rem;
padding:2rem 0;
transition:transform .5s ease;
will-change:transform;
}

.chapter-panel{
flex:0 0 100%;
min-height:500px;
background:linear-gradient(135deg,rgba(26,43,60,.95),rgba(44,62,80,.95));
border-radius:20px;
padding:0;
position:relative;
overflow:hidden;
opacity:.7;
transition:transform .3s ease,opacity .3s ease;
display:flex;
align-items:center;
box-shadow:0 20px 60px rgba(0,0,0,.4);
scroll-snap-align:center;
}

.chapter-panel.active{
opacity:1;
transform:scale(1.02);
}

.chapter-background{
position:absolute;
inset:0;
z-index:0;
}

.chapter-gradient{
position:absolute;
inset:0;
background:radial-gradient(circle at 20% 50%,rgba(245,166,35,.1) 0,transparent 50%);
}

.chapter-content-wrapper{
position:relative;
z-index:1;
padding:3rem;
width:100%;
}

.chapter-header{
text-align:center;
margin-bottom:2rem;
}

.chapter-header .chapter-number{
display:inline-block;
color:var(--primary-amber);
font-size:.875rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:1rem;
}

.chapter-header .chapter-title{
font-family:var(--font-display);
font-size:3rem;
color:var(--neutral-cream);
margin-bottom:1rem;
}

.chapter-location{
color:hsla(0,0%,96%,.85);
font-size:1rem;
font-style:italic;
}

.chapter-story{
text-align:left;
max-width:800px;
margin:0 auto 3rem;
}

.chapter-story p{
color:hsla(0,0%,96%,.9);
font-size:1.1rem;
line-height:1.8;
margin-bottom:1.5rem;
}

.chapter-footer{
display:flex;
justify-content:center;
}

.chapter-explore{
display:inline-flex;
align-items:center;
gap:1rem;
color:var(--primary-amber);
font-size:1.1rem;
font-weight:600;
text-decoration:none;
transition:all .3s ease;
}

.chapter-explore:hover{
color:var(--gold-accent);
transform:translateX(5px);
}

.carousel-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
background:rgba(26,43,60,.9);
border:2px solid var(--primary-amber);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--primary-amber);
font-size:1.5rem;
cursor:pointer;
transition:all .3s ease;
z-index:10;
}

.carousel-nav:hover{
background:var(--primary-amber);
color:var(--secondary-navy);
transform:translateY(-50%) scale(1.1);
}

.carousel-prev{left:20px}
.carousel-next{right:20px}

.chapter-indicators{
display:flex;
justify-content:center;
gap:1rem;
margin-top:3rem;
}

.chapter-indicators .indicator{
width:12px;
height:12px;
background:hsla(0,0%,96%,.3);
border-radius:50%;
cursor:pointer;
transition:all .3s ease;
}

.chapter-indicators .indicator.active{
background:var(--primary-amber);
transform:scale(1.3);
}

.chapter-indicators .indicator:hover{
background:rgba(245,166,35,.6);
}

/* ========================================
   BREWERY CTA SECTION
   ======================================== */
.brewery-cta{
background:linear-gradient(135deg,rgba(245,166,35,.15),rgba(212,175,55,.1));
padding:6rem 2rem;
text-align:center;
margin-top:6rem;
}

.brewery-cta h2{
font-family:var(--font-display);
font-size:2.5rem;
color:var(--primary-amber);
margin-bottom:1rem;
}

.brewery-cta p{
font-size:1.2rem;
color:hsla(0,0%,96%,.9);
margin-bottom:3rem;
}

.brewery-benefits{
display:flex;
justify-content:center;
gap:3rem;
margin-bottom:3rem;
flex-wrap:wrap;
}

.brewery-benefits div{
display:flex;
align-items:center;
gap:.5rem;
font-size:1.1rem;
color:var(--neutral-cream);
}

/* ========================================
   FOOTER
   ======================================== */
.footer-premium{
background:linear-gradient(180deg,#1a2b3c,#0a0f17);
border-top:1px solid rgba(245,166,35,.1);
padding:6rem 0 3rem;
}

.footer-container{
max-width:1400px;
margin:0 auto;
padding:0 2rem;
}

.footer-content{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:3rem;
margin-bottom:3rem;
}

.footer-section h3,
.footer-section h4{
color:var(--primary-amber);
margin-bottom:1.5rem;
}

.newsletter-form{
display:flex;
gap:1rem;
margin:1.5rem 0;
}

.newsletter-form input{
flex:1;
padding:1rem;
background:hsla(0,0%,100%,.05);
border:1px solid rgba(245,166,35,.2);
border-radius:50px;
color:var(--neutral-cream);
}

.newsletter-form button{
padding:1rem 2rem;
background:linear-gradient(135deg,var(--primary-amber),var(--gold-accent));
border:none;
border-radius:50px;
color:var(--secondary-navy);
font-weight:600;
cursor:pointer;
transition:all .3s ease;
}

.newsletter-form button:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(245,166,35,.3);
}

.footer-section.links a{
display:block;
color:hsla(0,0%,96%,.9);
padding:.5rem 0;
text-decoration:none;
transition:color .3s ease;
}

.footer-section.links a:hover{
color:var(--primary-amber);
}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
padding-top:3rem;
border-top:1px solid rgba(245,166,35,.1);
}

.trust-badges{
display:flex;
gap:2rem;
}

.trust-badges .badge{
color:hsla(0,0%,96%,.8);
font-size:.875rem;
}

.footer-legal{
display:flex;
align-items:center;
gap:2rem;
}

.footer-legal p{
color:hsla(0,0%,96%,.8);
margin:0;
}

.footer-legal a{
color:hsla(0,0%,96%,.8);
text-decoration:none;
transition:color .3s ease;
}

.footer-legal a:hover{
color:var(--primary-amber);
}

/* ========================================
   CARDS & CONTENT COMPONENTS
   ======================================== */
.city-card,
.brewery-card,
.featured-brewery-card{
background:rgba(255,255,255,.03);
border:1px solid rgba(245,166,35,.2);
border-radius:15px;
padding:2rem;
transition:all .3s ease;
cursor:pointer;
}

.city-card:hover,
.brewery-card:hover,
.featured-brewery-card:hover{
background:rgba(255,255,255,.05);
border-color:var(--primary-amber);
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(245,166,35,.2);
}

.cities-grid,
.breweries-grid{
display:grid;
gap:1.5rem;
padding:.5rem;
}

.cities-grid{
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}

.breweries-grid{
grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
}

/* ========================================
   FILTERS & SEARCH
   ======================================== */
.filter-bar{
background:rgba(26,43,60,.95);
padding:2rem;
border-bottom:1px solid rgba(245,166,35,.2);
position:sticky;
top:80px;
z-index:100;
backdrop-filter:blur(10px);
}

.filter-container{
max-width:1200px;
margin:0 auto;
display:flex;
gap:1rem;
flex-wrap:wrap;
justify-content:center;
}

.filter-btn{
padding:.5rem 1.2rem;
background:transparent;
border:2px solid rgba(245,166,35,.4);
border-radius:25px;
color:rgba(245,245,245,.9);
cursor:pointer;
transition:all .3s ease;
}

.filter-btn:hover{
background:rgba(245,166,35,.1);
border-color:var(--primary-amber);
color:var(--primary-amber);
transform:translateY(-1px);
}

.filter-btn.active{
background:rgba(245,166,35,.15);
color:var(--primary-amber);
border-color:var(--primary-amber);
font-weight:600;
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width:768px){
.trust-bar{
gap:2rem;
padding:2rem 1rem;
}

.trust-item strong{
font-size:1.5rem;
}

.section-divider{
margin:2rem 0;
padding:2rem 0;
}

.divider-word{
font-size:.875rem;
padding:0 1rem;
}

.features-grid{
grid-template-columns:1fr;
gap:2rem;
padding:0 1rem;
}

.feature-card{
padding:2rem;
}

.chapter-carousel-container{
padding:0 1rem;
}

.carousel-nav{
width:40px;
height:40px;
font-size:1.2rem;
}

.carousel-prev{left:10px}
.carousel-next{right:10px}

.brewery-cta h2{
font-size:2rem;
}

.brewery-benefits{
flex-direction:column;
gap:1rem;
}

.footer-content{
grid-template-columns:1fr;
gap:3rem;
text-align:center;
}

.newsletter-form{
flex-direction:column;
}

.newsletter-form input,
.newsletter-form button{
width:100%;
border-radius:8px;
}

.footer-bottom{
flex-direction:column;
gap:2rem;
text-align:center;
}

.trust-badges,
.footer-legal{
flex-direction:column;
gap:1rem;
}

.cities-grid{
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:1rem;
padding:.25rem;
}

.breweries-grid{
grid-template-columns:1fr;
}

.filter-bar{
top:70px;
}
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */
.lazy-section{
opacity:0;
transform:translateY(20px);
transition:opacity .6s ease,transform .6s ease;
}

.lazy-section.loaded{
opacity:1;
transform:translateY(0);
}

/* Reduce animations on mobile for performance */
@media (max-width:768px){
.particle{
animation-duration:15s;
opacity:.5;
}

.section-bubble,
.divider-word{
animation:none;
}

.nav-premium{
backface-visibility:hidden;
transform:translateZ(0);
}
}

/* Print styles */
@media print{
.nav-premium,
.mobile-menu,
.bubbles,
.particles,
.section-bubbles,
.brewery-cta,
.footer-premium{
display:none;
}

body{
background:#fff;
color:#000;
}
}