.bottle-scroll-animation{position:relative;min-height:600px;max-height:600px;background:linear-gradient(135deg,#f8fafc,#e2e8f0,#f1f5f9);overflow:hidden;padding:80px 0}.bottle-scroll-animation__container{max-width:1400px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:600px;height:600px}.bottle-scroll-animation.content-center .bottle-scroll-animation__container{justify-items:center}.bottle-scroll-animation__content{z-index:2;position:relative;display:flex;align-items:flex-start;justify-content:center;height:100%;padding-top:0}.bottle-scroll-animation__text{max-width:500px;width:100%}.bottle-scroll-animation.content-center .bottle-scroll-animation__content{text-align:center;justify-content:center}.bottle-scroll-animation.content-center .bottle-scroll-animation__text{max-width:600px;margin:0 auto}.bottle-scroll-animation__badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(130deg,#00585b,#2ab673,#00585b);color:#fff;padding:12px 24px;border-radius:50px;font-size:14px;font-weight:700;font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;margin-bottom:28px;box-shadow:0 6px 25px #05966966;opacity:0;transform:translateY(20px);animation:fadeInUp .8s ease-out .2s forwards}.bottle-scroll-animation__badge .badge-icon{font-size:16px}.bottle-scroll-animation__title{font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;color:#00585b;margin:0 0 28px;line-height:1.05;letter-spacing:-.03em;opacity:0;transform:translateY(30px);animation:fadeInUp .8s ease-out .4s forwards}.bottle-scroll-animation__title .gradient-accent{background:linear-gradient(135deg,#059669,#10b981,#6ee7b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:#059669}.bottle-scroll-animation__subtitle{font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:20px;color:#6b7280;margin:0 0 28px;line-height:1.6;font-weight:500;opacity:0;transform:translateY(20px);animation:fadeInUp .8s ease-out .6s forwards}.bottle-scroll-animation__description{font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;color:#4b5563;margin:0 0 36px;line-height:1.7;font-weight:500;opacity:0;transform:translateY(20px);animation:fadeInUp .8s ease-out .8s forwards}.bottle-scroll-animation__description p{margin:0}.bottle-scroll-animation__cta{opacity:0;transform:translateY(20px);animation:fadeInUp .8s ease-out 1s forwards}.bottle-scroll-animation__button{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(130deg,#00585b,#2ab673,#00585b);color:#fff;text-decoration:none;padding:16px 32px;border-radius:12px;font-size:16px;font-weight:600;transition:all .3s ease;box-shadow:0 8px 30px #00605b4d;position:relative;overflow:hidden}.bottle-scroll-animation__button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.bottle-scroll-animation__button:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00605b66}.bottle-scroll-animation__button:hover:before{left:100%}.bottle-scroll-animation__button svg{transition:transform .3s ease}.bottle-scroll-animation__button:hover svg{transform:translate(4px)}.bottle-scroll-animation__visual{position:relative;display:flex;justify-content:center;align-items:center;height:100%;z-index:1}.bottle-container{position:relative;width:400px;height:600px;display:flex;justify-content:center;align-items:center;overflow:visible}.bottle-bg-elements{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.bottle-bg-circle{position:absolute;border-radius:50%;background:linear-gradient(135deg,#05a0551a,#00605b0d);animation:float 6s ease-in-out infinite}.bottle-bg-circle--1{width:180px;height:180px;top:-40px;right:-40px;animation-delay:-2s}.bottle-bg-circle--2{width:140px;height:140px;bottom:-40px;left:-40px;animation-delay:-4s}.bottle-bg-gradient{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(5,160,85,.08) 0%,transparent 70%)}.bottle-wrapper{position:relative;width:350px;height:700px;z-index:2;overflow:visible}.bottle-svg{width:100%;height:100%;filter:drop-shadow(0 10px 30px rgba(0,96,91,.2))}.bottle-label-logo{opacity:.9;transition:opacity .3s ease,transform .3s ease;filter:invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.3));transform-origin:center}.bottle-label-logo:hover{opacity:1;transform:scale(1.1)}.logo-animated{animation:logoGlow 3s ease-in-out infinite,logoPulse 2s ease-in-out infinite alternate}@keyframes logoGlow{0%,to{filter:invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.3))}50%{filter:invert(1) drop-shadow(0 0 8px rgba(255,255,255,.8)) drop-shadow(0 1px 3px rgba(0,0,0,.3))}}@keyframes logoPulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.bottle-container:hover .logo-animated{animation:logoSpin 1s ease-in-out,logoGlow 3s ease-in-out infinite}@keyframes logoSpin{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(180deg)}to{transform:scale(1) rotate(360deg)}}.bottle-body,.bottle-neck{transition:all .3s ease}.bottle-cap{transform-origin:100px 80px;transition:transform .6s cubic-bezier(.25,.46,.45,.94);will-change:transform}.bottle-liquid{transform-origin:100px 245px;transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}.bottle-sparkles{opacity:0;transition:opacity .8s ease}.sparkle{filter:drop-shadow(0 0 4px currentColor)}.bottle-container.opening .bottle-cap{transform:translateY(-30px) rotate(15deg)}.bottle-container.opening .bottle-liquid{opacity:1;transform:scaleY(1)}.bottle-container.opening .bottle-sparkles{opacity:1}.bottle-container.opened .bottle-cap{transform:translateY(-50px) rotate(25deg) scale(.9)}.bottle-container.opened .bottle-liquid{opacity:1;transform:scaleY(1.2)}.bottle-container.opened .bottle-sparkles{opacity:1}.scroll-progress{position:absolute;bottom:-80px;left:50%;transform:translate(-50%);text-align:center;opacity:0;animation:fadeIn 1s ease 1.2s forwards}.scroll-progress__track{width:200px;height:4px;background:#64748b33;border-radius:2px;overflow:hidden;margin-bottom:8px}.scroll-progress__fill{height:100%;background:linear-gradient(90deg,#00605b,#05a055);border-radius:2px;width:0%;transition:width .3s ease}.scroll-progress__text{font-size:14px;color:#64748b;font-weight:500}.floating-elements{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1}.floating-element{position:absolute;color:#05a0554d;animation:floatMove 8s ease-in-out infinite}.floating-element--1{top:20%;left:10%;animation-delay:0s}.floating-element--2{top:60%;right:15%;animation-delay:-2s}.floating-element--3{bottom:30%;left:20%;animation-delay:-4s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{to{opacity:1}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}@keyframes floatMove{0%,to{transform:translate(0) scale(1)}25%{transform:translate(10px,-15px) scale(1.1)}50%{transform:translate(-5px,-25px) scale(.9)}75%{transform:translate(-15px,-10px) scale(1.05)}}@media (max-width: 1024px){.bottle-scroll-animation__container{grid-template-columns:1fr 1fr;gap:40px;text-align:center}.bottle-scroll-animation__content{justify-content:center}.bottle-scroll-animation__text{max-width:none}.bottle-container{width:400px;height:500px}.bottle-wrapper{width:320px;height:500px}}@media (max-width: 768px){.bottle-scroll-animation{min-height:100vh;max-height:720px!important;height:100vh;padding:40px 20px}.bottle-scroll-animation__container{grid-template-columns:1fr;gap:30px;min-height:100vh;height:100vh;text-align:center}.bottle-container{width:300px;height:350px}.bottle-wrapper{width:240px;height:350px}.bottle-scroll-animation__text h2{font-size:clamp(2rem,4vw,2.5rem)}.bottle-scroll-animation__text p{font-size:1rem}}@media (max-width: 480px){.bottle-scroll-animation{padding:30px 0;min-height:100vh;height:78vh}.bottle-scroll-animation__container{padding:0 16px;gap:20px;min-height:100vh;height:100vh}.bottle-container{width:280px;height:320px}.bottle-wrapper{width:200px;height:430px;margin-top:60px}.bottle-scroll-animation__button{padding:14px 24px;font-size:14px}}.bottle-scroll-animation *{will-change:auto}.bottle-scroll-animation.scrolling .bottle-cap,.bottle-scroll-animation.scrolling .bottle-liquid,.bottle-scroll-animation.scrolling .bottle-sparkles{will-change:transform,opacity}.bottle-container{cursor:pointer;transform-style:preserve-3d;perspective:1000px;transition:transform .1s ease-out}.bottle-container.bottle-hovering{transform-style:preserve-3d}.bottle-container:hover{z-index:10}.bottle-container svg{transform-style:preserve-3d;backface-visibility:hidden}.bottle-container:not(:hover){transition:transform .6s cubic-bezier(.25,.46,.45,.94),filter .6s ease}.bottle-cap{cursor:grab;transform-origin:center center;transition:transform .2s ease,filter .3s ease}.bottle-cap:hover{cursor:grabbing}.powder-particle-1,.powder-particle-2,.powder-particle-3,.powder-particle-4{transition:opacity .3s ease,transform .3s ease}.bottle-container[data-scroll-direction=down]{--scroll-direction: "\2193"}.bottle-container[data-scroll-direction=up]{--scroll-direction: "\2191"}@media (prefers-reduced-motion: reduce){.bottle-scroll-animation *,.bottle-scroll-animation *:before,.bottle-scroll-animation *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bottle-bg-circle,.floating-element{animation:none}.bottle-container{transform:none!important}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/bottle-scroll-animation.css.map */