:root{--animation-ease:linear;--snap:x mandatory;--image:url(./assets/matcha-C3cElHUB.jpeg)}*{box-sizing:border-box}@property --scroll-pct{syntax:"<number>";inherits:true;initial-value:0}html{-moz-font-smoothing:antialiased;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;height:100%;margin:0;text-rendering:optimizelegibility!important}body{timeline-scope:--carouselScroll;background-color:#f5f5f5;height:100%;margin:0;font-family:Playfair Display,serif;font-weight:400}.carousel-wrapper{scroll-snap-type:var(--snap);scroll-behavior:smooth;overscroll-behavior-x:contain;scroll-timeline:--carouselScroll inline;align-items:center;width:100%;height:100%;padding:0 calc(50% - 140px);display:flex;position:relative;overflow:auto hidden}body:not(.debug) .carousel-wrapper{scrollbar-width:none;-ms-overflow-style:none}@supports not (animation-timeline:view()){.carousel-wrapper{gap:20px}}body:not(.debug) .carousel-wrapper::-webkit-scrollbar{display:none}.carousel-card{scroll-snap-align:center;flex-shrink:0;width:280px;height:450px;position:relative}body.debug .carousel-card{outline:1px solid red}.carousel-card:before{content:"";z-index:-1;background-image:var(--image);filter:blur(10px);opacity:.2;background-position:50%;background-size:cover;width:120vw;height:120vh;margin:0 auto;animation:linear both bgImageAnimation;animation-timeline:view(inline);animation-range:cover 40% cover 60%;position:absolute;top:50%;left:calc(50% - 60vw);right:0}@supports not (animation-timeline:view()){.carousel-card:before{transform:translate(-10%,-50%);animation:none!important}}.carousel-card__content{transform-origin:50% 200%;width:100%;height:100%;animation:cardContentAnimation var(--animation-ease) both;background-color:#fff;border-radius:30px;flex-direction:column;justify-content:flex-end;padding:40px 30px;animation-timeline:view(inline);animation-range:cover;display:flex;position:relative;overflow:clip;transform:rotate(0);box-shadow:0 20px 30px #0003}@supports not (animation-timeline:view()){.carousel-card__content{box-shadow:0 20px 30px #0003;animation:none!important}}.carousel-card__content:before{content:"";opacity:.5;background:linear-gradient(#6a530600 0%,#6a5306 100%);border-radius:30px;width:100%;height:100%;position:absolute;top:0;left:0}.carousel-card__bg{z-index:-1;background-image:var(--image);width:calc(100% + 200px);height:calc(100% + 200px);animation:cardBgAnimation var(--animation-ease) both;background-position:50%;background-size:cover;animation-timeline:view(inline);animation-range:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@supports not (animation-timeline:view()){.carousel-card__bg{z-index:0;transform:translate(-50%,-50%);animation:none!important}}.carousel-card__info{z-index:1;flex-direction:column;flex:1;justify-content:flex-end;display:flex;position:relative}.carousel-card__title{color:#fff;animation:slideTitle var(--animation-ease) both;font-size:30px;animation-timeline:view(inline);animation-range:cover 40% cover 60%}.carousel-card__subtitle{color:#fff;font-size:16px;overflow:clip}.carousel-card__subtitle span{animation:slideSubTitle var(--animation-ease) both;animation-timeline:view(inline);animation-range:contain 43% contain 57%;display:block}.pct-bar{z-index:9;width:100%;height:5px;transform:translateX(calc(var(--scroll-pct) * 1% - 100%));transform-origin:0;background-color:#713916;animation:linear both pctBarAnimation;animation-timeline:--carouselScroll;position:fixed;bottom:0;left:0}.pct-bar:after{counter-reset:percentage calc(var(--scroll-pct) * 1);content:counter(percentage) "%";color:#fff;background-color:#713916;border-radius:50px;padding:5px 10px;font-size:12px;position:absolute;top:-30px;right:0}.h-scroll{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;font-size:14px;display:flex;position:absolute;bottom:80px;left:0;right:0}.h-scroll svg{width:40px}.change-browser{pointer-events:none;display:none}@supports not (animation-timeline:view()){.change-browser{border:1px solid #000;flex-direction:column;justify-content:center;align-items:center;max-width:800px;margin:0 auto;padding:20px;font-size:22px;display:flex;position:absolute;top:80px;left:0;right:0}}@keyframes cardContentAnimation{0%{transform-origin:-50% 200%;transform:rotate(30deg);box-shadow:100px 20px 30px #0003}50%{transform-origin:50% 200%;transform:rotate(0);box-shadow:0 20px 30px #0003}to{transform-origin:150% 200%;transform:rotate(-30deg);box-shadow:-100px 20px 30px #0003}}@keyframes slideTitle{0%{opacity:0;transform:translate(100px)}50%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes slideSubTitle{0%{opacity:0;transform:translateY(-50px)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(50px)}}@keyframes bgImageAnimation{0%{opacity:0;transform:translate(-10%,-50%)}50%{opacity:.35;transform:translateY(-50%)}to{opacity:0;transform:translate(10%,-50%)}}@keyframes cardBgAnimation{0%{transform:translate(calc(100px - 50%),-50%)}50%{transform:translate(-50%,-50%)}to{transform:translate(calc(-50% - 100px),-50%)}}@keyframes pctBarAnimation{0%{--scroll-pct:0}to{--scroll-pct:100}}.co-footer{flex-direction:column;justify-content:center;align-items:center;margin:0 auto 15px;padding:0;display:flex;position:absolute;bottom:0;left:0;right:0}.co-footer-links{flex-wrap:wrap;justify-content:center;column-gap:10px;display:flex}.co-footer-btn{text-transform:uppercase;color:#000;text-align:center;background:0 0;border:1px solid #000;border-radius:5px;margin-bottom:10px;padding:7px 10px;font-size:12px;font-weight:500;text-decoration:none}.co-footer-btn:hover{color:#fff;background-color:#000}.co-footer-btn--link{border:1px solid #0000;text-decoration:underline}.co-footer-btn--link:hover{color:#fff;background-color:#6a5306}.co-footer-btn--link:after{content:"↗";font-family:arial;font-weight:800;text-decoration:none}