/* Al-Mysaan motion system: content stays visible without JavaScript. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes pageEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes floatBottle{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-17px) rotate(-6deg)}}
@keyframes floatJar{0%,100%{transform:rotate(8deg) translateY(110px)}50%{transform:rotate(5deg) translateY(94px)}}
@keyframes bloom{0%,100%{transform:rotate(0deg) scale(1);opacity:.5}50%{transform:rotate(14deg) scale(1.12);opacity:.85}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bagBounce{0%,100%{transform:scale(1)}45%{transform:scale(1.18);color:#a28a56}}
@keyframes toastEnter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes checkDraw{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
@keyframes circleDraw{from{stroke-dashoffset:180}to{stroke-dashoffset:0}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 #81907630}50%{box-shadow:0 0 0 10px #81907600}}
#app.route-enter{animation:pageEnter .6s var(--ease-out) both}
.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}
.hero-copy .eyebrow,.hero-copy h1,.hero-copy p,.hero-copy .cta,.hero-note{animation:pageEnter .95s var(--ease-out) both}
.hero-copy h1{animation-delay:.1s}.hero-copy p{animation-delay:.2s}.hero-copy .cta{animation-delay:.3s}.hero-note{animation-delay:.4s}
.hero-sculpture>.pack{animation:floatBottle 7s ease-in-out infinite;will-change:transform}
.hero-sculpture>.pack:nth-child(2){animation:floatJar 8s ease-in-out infinite;animation-delay:-2s}
.hero-sculpture:before{animation:bloom 16s ease-in-out infinite;transform-origin:center}
.hero-sculpture:after{animation:pageEnter 1.2s var(--ease-out) .5s both}
.header{transition:padding .35s var(--ease-out),box-shadow .35s,background .35s;backdrop-filter:blur(16px)}
.header.scrolled{box-shadow:0 7px 30px #29392e0b;background:#f8f5edf2}
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#819076,#c0ab70);width:100%;transform-origin:left;transform:scaleX(0);z-index:100;pointer-events:none}
.cta{position:relative;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s,background .3s,color .3s}
.cta:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#ffffff25 50%,transparent 80%);transform:translateX(-140%);transition:transform .7s var(--ease-out);pointer-events:none}
.cta:hover:after{transform:translateX(140%)}.cta:hover{transform:translateY(-3px);box-shadow:0 10px 22px #29392e20}.cta:active{transform:translateY(0) scale(.98)}
nav>a,.footer-links>a{position:relative}nav>a:after,.footer-links>a:after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}nav>a:hover:after,.footer-links>a:hover:after{transform:scaleX(1);transform-origin:left}
.product-image{transition:background .5s,box-shadow .5s}.product-image .pack{transition:transform .65s var(--ease-out),box-shadow .65s}.product:hover .product-image .pack{transform:translateY(-9px) rotate(1deg);box-shadow:18px 30px 30px #29392e28}.product:hover .product-image{box-shadow:inset 0 0 0 1px #29392e15}
.add{transition:transform .35s var(--ease-spring),background .3s,color .3s;z-index:2}.add:hover{transform:rotate(90deg) scale(1.12);background:var(--ink);color:var(--cream)}.add:active{transform:rotate(90deg) scale(.9)}
.tab{transition:background .3s,color .3s,transform .3s}.tab:hover{transform:translateY(-2px);background:#e0e5d6}.tab.active:hover{background:var(--ink)}
.collection{transition:box-shadow .5s}.collection:hover{box-shadow:0 15px 40px #29392e12}.collection .pack{transition:transform .8s var(--ease-out)}.collection:hover .pack{transform:translateY(-10px) rotate(3deg)}
.dropdown-menu{animation:pageEnter .25s var(--ease-out) both}.dropdown-menu a{transition:background .2s,padding-left .25s}.dropdown-menu a:hover{padding-left:18px}
.field input,.field textarea,.field select{transition:background .3s,border-color .3s,box-shadow .3s}.field input:focus,.field textarea:focus,.field select:focus{outline:none;background:white;border-color:#819076;box-shadow:0 0 0 3px #81907618}
.field:focus-within{color:#657653}.quantity button{transition:background .2s}.quantity button:hover{background:#dce2d1}
.toast{animation:toastEnter .4s var(--ease-spring) both;border:1px solid #ffffff25}.bag-bounce{animation:bagBounce .55s var(--ease-spring)}
.pack-scene .pack{transition:transform .8s var(--ease-out)}.pack-scene:hover .pack{transform:rotate(0) translateY(-8px)}
summary{transition:color .25s}summary:hover{color:#819076}details[open]>p{animation:pageEnter .3s var(--ease-out)}
.review{transition:transform .4s var(--ease-out),box-shadow .4s}.review:hover{transform:translateY(-7px);box-shadow:0 20px 40px #29392e0d}
.success-mark{width:75px;height:75px;margin:0 auto 28px;display:block}.success-mark circle{stroke-dasharray:180;animation:circleDraw 1s var(--ease-out) both}.success-mark path{stroke-dasharray:48;animation:checkDraw .65s var(--ease-out) .5s both}
.cart-fly{position:fixed;width:16px;height:16px;z-index:110;pointer-events:none;border-radius:50%;background:#a28a56;box-shadow:0 0 0 5px #a28a5620}
.ripple{position:absolute;border-radius:50%;background:#ffffff35;pointer-events:none;transform:scale(0)}
.back-top{position:fixed;right:23px;bottom:25px;border:1px solid #c4ccb8;width:43px;height:43px;border-radius:50%;background:var(--cream);color:var(--ink);z-index:30;opacity:0;transform:translateY(15px);pointer-events:none;transition:opacity .3s,transform .3s,background .3s}.back-top.show{opacity:1;transform:none;pointer-events:auto}.back-top:hover{background:#e3e8d9;transform:translateY(-4px)}
@media(hover:none){.hero-sculpture>.pack{will-change:auto}.cta:hover{transform:none;box-shadow:none}.product:hover .product-image .pack{transform:rotate(-5deg)}}
@media(max-width:620px){@keyframes floatJar{0%,100%{transform:rotate(8deg) translateY(60px)}50%{transform:rotate(5deg) translateY(50px)}}.back-top{right:14px;bottom:18px;width:38px;height:38px}.motion-ready .reveal{transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}.cart-fly,.ripple{display:none}.hero-sculpture>.pack{will-change:auto}}