/* ====== BREWLY — Animations ====== */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeScale{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes slideLeft{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slideRight{from{transform:translateX(-100%)}to{transform:translateX(0)}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-8px) rotate(2deg)}66%{transform:translateY(4px) rotate(-1deg)}}
@keyframes drift{0%,100%{transform:translate(0,0)}25%{transform:translate(8px,-12px)}50%{transform:translate(-6px,6px)}75%{transform:translate(10px,-4px)}}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmer{0%{left:-100%}100%{left:200%}}
@keyframes countPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes steamDrift{0%{opacity:0;transform:translateY(0) scaleX(1)}25%{opacity:.4;transform:translateY(-16px) scaleX(1.2)}50%{opacity:.2;transform:translateY(-32px) scaleX(.8)}75%{opacity:.1;transform:translateY(-48px) scaleX(1.1)}100%{opacity:0;transform:translateY(-64px) scaleX(.9)}}
@keyframes badgePop{0%{transform:scale(0) rotate(-12deg);opacity:0}60%{transform:scale(1.15) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.12);opacity:0}}
@keyframes ringExpand{0%{transform:scale(1);opacity:.3}100%{transform:scale(2);opacity:0}}

@keyframes steam{0%,100%{transform:translateY(0) scaleY(1);opacity:.4}50%{transform:translateY(-24px) scaleY(1.5);opacity:0}}
@keyframes blob{0%,100%{border-radius:50% 50% 30% 70%/60% 40% 60% 40%;transform:translate(0,0)}33%{border-radius:40% 60% 70% 30%/40% 60% 40% 60%;transform:translate(-30px,20px)}66%{border-radius:60% 40% 30% 70%/50% 50% 50% 50%;transform:translate(20px,-30px)}}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

@keyframes bottleFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-8px) rotate(2deg)}75%{transform:translateY(4px) rotate(-1deg)}}
@keyframes fillBottle{from{height:0}to{height:var(--fill,60%)}}
@keyframes drip{0%{height:0;opacity:1}100%{height:60px;opacity:0}}

@keyframes wordIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes textGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes revealText{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes typing{0%,100%{opacity:.3}50%{opacity:1}}

@keyframes beanFall{from{transform:translateY(-60px) rotate(0deg);opacity:0}to{transform:translateY(0) rotate(360deg);opacity:1}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(60px) rotate(720deg);opacity:0}}
@keyframes steamRise{0%{transform:translateY(0) scale(1);opacity:.6}100%{transform:translateY(-40px) scale(2);opacity:0}}

@keyframes progressFill{from{width:0%}to{width:var(--progress,100%)}}
@keyframes loaderSlide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
@keyframes loaderPulse{0%,100%{opacity:.2}50%{opacity:.6}}

@keyframes layerFill{from{height:0;opacity:0}to{height:var(--h,30%);opacity:1}}
@keyframes glassShine{0%{transform:translateX(-100%) skewX(-15deg)}50%,100%{transform:translateX(200%) skewX(-15deg)}}

/* COFFEE POUR */
@keyframes pourStream{0%{height:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{height:80px;opacity:0}}
@keyframes cupFill{from{height:0%}to{height:var(--cup-fill,60%)}}
@keyframes ripple{0%{transform:scale(1);opacity:.3}100%{transform:scale(2.5);opacity:0}}
@keyframes beanRain{0%{transform:translateY(-20px) rotate(0deg);opacity:0}10%{opacity:.6}90%{opacity:.4}100%{transform:translateY(100vh) rotate(360deg);opacity:0}}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes starFill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes haptic{0%{transform:scale(1)}50%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes sweetBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes charmFloat{0%{transform:translate3d(0,18px,0) rotate(0deg);opacity:0}15%{opacity:.55}85%{opacity:.38}100%{transform:translate3d(var(--dx,18px),-100vh,0) rotate(180deg);opacity:0}}
@keyframes buttonGleam{0%{transform:translateX(-120%) skewX(-18deg);opacity:0}20%{opacity:.45}100%{transform:translateX(220%) skewX(-18deg);opacity:0}}
@keyframes softBreath{0%,100%{transform:scale(1);filter:saturate(1) contrast(1)}50%{transform:scale(1.018);filter:saturate(1.08) contrast(1.04)}}
@keyframes tinyPop{0%{transform:scale(.8) translateY(6px);opacity:0}55%{transform:scale(1.1) translateY(-2px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes aromaFloat{0%,100%{transform:translateY(0);opacity:.36}50%{transform:translateY(-10px);opacity:.62}}
@keyframes ingredientDrop{0%{transform:translate3d(0,-18px,0) rotate(0deg);opacity:0}18%{opacity:.75}52%{transform:translate3d(16px,225px,0) rotate(170deg);opacity:.75}72%,100%{transform:translate3d(22px,255px,0) rotate(210deg);opacity:0}}

/* RITUAL TIMER */
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(200,146,94,0);border-color:rgba(200,146,94,0.12)}50%{box-shadow:0 0 40px rgba(200,146,94,0.08);border-color:rgba(200,146,94,0.2)}}
@keyframes ritualDone{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(2deg)}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes msgFade{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

/* LOADER — Coffee Cup */
@keyframes cupFillLoader{0%{height:0}60%{height:55%}80%{height:50%}100%{height:55%}}
@keyframes steamLoader{0%,100%{transform:translateY(0) scale(1);opacity:.3}50%{transform:translateY(-20px) scale(1.5);opacity:0}}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.v{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}
.reveal-d4{transition-delay:.4s}.reveal-d5{transition-delay:.5s}.reveal-d6{transition-delay:.6s}

.word-anim span{display:inline-block;opacity:0;transform:translateY(15px);will-change:opacity,transform}
.word-anim.v span{animation:wordIn .4s cubic-bezier(.22,1,.36,1) forwards}
.word-anim.v span:nth-child(1){animation-delay:.05s}.word-anim.v span:nth-child(2){animation-delay:.08s}
.word-anim.v span:nth-child(3){animation-delay:.11s}.word-anim.v span:nth-child(4){animation-delay:.14s}
.word-anim.v span:nth-child(5){animation-delay:.17s}.word-anim.v span:nth-child(6){animation-delay:.2s}

.count-up{display:inline-block;font-feature-settings:"tnum"}

/* LOADER */
.loader{position:fixed;inset:0;z-index:1000;background:var(--espresso);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity .6s,visibility .6s}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-cup{width:60px;height:70px;position:relative}
.loader-cup .cup-body{position:absolute;inset:0;border:2px solid rgba(200,146,94,0.3);border-radius:0 0 10px 10px;overflow:hidden}
.loader-cup .cup-body .fill{position:absolute;bottom:0;left:0;right:0;height:0;background:linear-gradient(180deg,var(--amber),var(--coffee));border-radius:0 0 8px 8px;animation:cupFillLoader 2s ease-in-out infinite}
.loader-cup .handle{position:absolute;top:8px;right:-14px;width:14px;height:24px;border:2px solid rgba(200,146,94,0.3);border-radius:0 6px 6px 0;border-left:none}
.loader-cup .steam{position:absolute;top:-8px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.loader-cup .steam span{width:2px;height:12px;background:rgba(200,146,94,0.2);border-radius:2px;animation:steamLoader 1.5s infinite}
.loader-cup .steam span:nth-child(2){animation-delay:.3s}
.loader-cup .steam span:nth-child(3){animation-delay:.6s}
.loader-text{font-family:var(--font-serif);font-size:.7rem;color:rgba(253,246,236,0.2);letter-spacing:.15em;text-transform:uppercase;animation:loaderPulse 2s infinite}

/* FLY TO CART */
.fly-clone{position:fixed;z-index:999;pointer-events:none;transition:all .8s cubic-bezier(.22,1,.36,1)}
.fly-clone.fly{transform:scale(.1) translate(100px,-200px);opacity:0}

/* BEAN RAIN */
.bean-rain{position:fixed;inset:0;pointer-events:none;z-index:1}
.bean-rain span{position:absolute;top:-30px;font-size:var(--bean-size,.8rem);animation:beanRain var(--bean-dur,6s) linear infinite;opacity:0}
.bean-rain span:nth-child(1){left:5%;--bean-dur:7s;animation-delay:0s}
.bean-rain span:nth-child(2){left:15%;--bean-dur:9s;animation-delay:2s;font-size:.6rem}
.bean-rain span:nth-child(3){left:25%;--bean-dur:8s;animation-delay:4s}
.bean-rain span:nth-child(4){left:35%;--bean-dur:10s;animation-delay:1s;font-size:.9rem}
.bean-rain span:nth-child(5){left:45%;--bean-dur:7.5s;animation-delay:3s}
.bean-rain span:nth-child(6){left:55%;--bean-dur:8.5s;animation-delay:5s;font-size:.6rem}
.bean-rain span:nth-child(7){left:65%;--bean-dur:9.5s;animation-delay:.5s}
.bean-rain span:nth-child(8){left:75%;--bean-dur:7s;animation-delay:3.5s;font-size:.9rem}
.bean-rain span:nth-child(9){left:85%;--bean-dur:8s;animation-delay:2.5s}
.bean-rain span:nth-child(10){left:92%;--bean-dur:11s;animation-delay:4.5s;font-size:.6rem}

/* BEAN CONFETTI */
.beanAnim{position:fixed;pointer-events:none;z-index:50}
.beanAnim span{position:absolute;font-size:1.2rem;animation:beanFall 1.2s cubic-bezier(.22,1,.36,1) forwards}
.beanAnim span:nth-child(2){animation-delay:.15s;left:40%}
.beanAnim span:nth-child(3){animation-delay:.3s;left:60%}
.beanAnim span:nth-child(4){animation-delay:.45s;left:30%}
.beanAnim span:nth-child(5){animation-delay:.6s;left:70%}

/* PRICE PER CUP */
.ppc-badge{padding:6px 14px;border-radius:20px;font-size:.7rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.ppc-badge .num{font-family:var(--font-serif);font-size:1.1rem}

/* STOCK COUNTER */
.stock-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:6px}
.stock-bar .fill{height:100%;border-radius:2px;transition:width 1s ease}
.stock-bar .fill.low{background:linear-gradient(90deg,#e74c3c,#f39c12)}
.stock-bar .fill.med{background:linear-gradient(90deg,#f39c12,var(--amber))}
.stock-bar .fill.high{background:linear-gradient(90deg,var(--amber),var(--warm))}

/* THEME TRANSITION */
html{transition:background .6s,color .6s}
[data-theme]{transition:background .6s,color .6s}
.theme-btn .ico{display:inline-block;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.theme-btn.spin .ico{transform:rotate(360deg)}

/* NAV CART BOUNCE */
.cart-btn.bounce svg{animation:haptic .3s ease}

/* BUTTON HAPTIC */
.btn:active{animation:haptic .2s ease}
.btn-primary{isolation:isolate}
.btn-primary::before{content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none;z-index:-1}
.btn-primary:hover::before{animation:buttonGleam .9s cubic-bezier(.22,1,.36,1)}

/* CHART BARS */
.chart-bar-wrap{display:flex;align-items:flex-end;gap:4px;height:80px;padding:4px 0}
.chart-bar{width:100%;border-radius:3px 3px 0 0;transform-origin:bottom;animation:barGrow .6s cubic-bezier(.22,1,.36,1) forwards;min-height:4px;position:relative}
.chart-bar .val{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.5rem;color:var(--text-light);white-space:nowrap}

/* URGE BADGE */
.urge-badge{display:inline-flex;align-items:center;gap:6px;font-size:.65rem;color:var(--amber);padding:4px 12px;background:rgba(200,146,94,0.06);border-radius:20px;border:1px solid rgba(200,146,94,0.08)}

/* HOVER GLOW */
.glow-hover{position:relative;overflow:hidden}
.glow-hover::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(200,146,94,0.12),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.glow-hover:hover::after{opacity:1}

/* BREWLY CHARM LAYER */
.brewly-charm-field{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.brewly-charm-field span{position:absolute;bottom:-28px;left:var(--x,50%);font-size:var(--s,.8rem);color:rgba(200,146,94,0.38);animation:charmFloat var(--d,10s) linear infinite;animation-delay:var(--delay,0s);text-shadow:0 8px 24px rgba(74,44,26,0.12)}
.hero-visual [data-tilt]{animation:none}
.story-scroll.video-ready .story-video-frame{animation:none}
.selector-card.selected .icon{animation:tinyPop .34s cubic-bezier(.34,1.56,.64,1)}

/* STAR ANIMATION */
.stars-anim{display:inline-flex;gap:2px;overflow:hidden}
.stars-anim span{display:inline-block;opacity:0;transform:translateY(10px)}
.stars-anim.v span{animation:countUp .3s forwards}
.stars-anim.v span:nth-child(1){animation-delay:0s}
.stars-anim.v span:nth-child(2){animation-delay:.1s}
.stars-anim.v span:nth-child(3){animation-delay:.2s}
.stars-anim.v span:nth-child(4){animation-delay:.3s}
.stars-anim.v span:nth-child(5){animation-delay:.4s}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1!important;transform:none!important}.word-anim span{opacity:1!important;transform:none!important;animation:none!important}}

@media(max-width:768px){@keyframes blob{0%,100%{transform:translate(0,0)}50%{transform:translate(0,0)}}@keyframes bottleFloat{0%,100%{transform:translateY(0) rotate(0deg)}}}