/* Motion uses transforms and opacity. The unenhanced page stays fully visible. */
.motion-toggle{background:none;min-height:44px;padding:10px 0;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-align:left}
#product-volume-number{display:inline-block}
.motion-progress{position:fixed;z-index:80;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#2E3565,#5C6BC0);transform:scaleX(0);transform-origin:left;pointer-events:none}
.motion-ready .motion-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .72s var(--ease),transform .85s var(--ease);transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-reveal.motion-visible{opacity:1;transform:translate3d(0,0,0)}
.motion-enabled .hero-copy>*,.motion-enabled .detail-copy>*,.motion-enabled .page-intro .kicker,.motion-enabled .page-intro h1,.motion-enabled .page-intro .wrap>p{animation:copy-enter .7s var(--ease) both}
.motion-enabled .hero-copy>:nth-child(2),.motion-enabled .detail-copy>:nth-child(2),.motion-enabled .page-intro h1{animation-delay:75ms}
.motion-enabled .hero-copy>:nth-child(3),.motion-enabled .detail-copy>:nth-child(3),.motion-enabled .page-intro .wrap>p{animation-delay:140ms}
.motion-enabled .hero-copy>:nth-child(4),.motion-enabled .detail-copy>:nth-child(4){animation-delay:210ms}
.motion-enabled .detail-copy>:nth-child(5){animation-delay:260ms}
.motion-enabled .hero-photo picture{animation:photo-drift 12s ease-in-out infinite;transform-origin:center 60%}
.motion-enabled .hero-photo:after{content:"";position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 38%,#ffffff24 47%,transparent 56%);transform:translateX(-70%);animation:photo-light 11s ease-in-out infinite;pointer-events:none}
.motion-enabled .hero-badge{animation:badge-drift 8s ease-in-out infinite}
.motion-enabled .hero-badge:after{content:"";position:absolute;inset:-8px;border:1px dashed #5C6BC06b;border-radius:50%;animation:motion-orbit 28s linear infinite;pointer-events:none}
.motion-enabled .location-dot{position:relative}
.motion-enabled .location-dot:after{content:"";position:absolute;inset:-5px;border:1px solid #5C6BC080;border-radius:50%;animation:location-wave 4s ease-out infinite;pointer-events:none}
.motion-enabled .product-art:not(.is-changing) img{animation:bottle-drift 7s ease-in-out infinite}
.motion-enabled .product-art:before{border-style:dashed;animation:catalog-orbit 36s linear infinite}
.motion-enabled .product-art:after,.motion-enabled .detail-art:after{animation:shadow-breathe 7s ease-in-out infinite}
.motion-enabled .detail-art img{animation:bottle-drift 8s ease-in-out infinite}
.motion-enabled .detail-art:before{content:"";position:absolute;width:310px;height:310px;border:1px dashed #b4bde0;border-radius:50%;animation:motion-orbit 32s linear infinite;pointer-events:none}
.motion-enabled .material-visual:before{border-style:dashed;animation:motion-orbit 35s linear infinite}
.motion-enabled .material-visual:after{animation:material-breathe 8s ease-in-out infinite}
.motion-enabled .material-tag{animation:tag-drift 9s ease-in-out infinite}
.motion-enabled .material-seal{animation:tag-drift 10s ease-in-out infinite reverse}
.motion-tilt{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease-out}
.motion-loop:not(.motion-running),.motion-loop:not(.motion-running) *, .motion-loop:not(.motion-running):before,.motion-loop:not(.motion-running):after,.motion-loop:not(.motion-running) *:before,.motion-loop:not(.motion-running) *:after{animation-play-state:paused!important}
.btn{position:relative;isolation:isolate;overflow:hidden}
.motion-enabled .btn:before{content:"";position:absolute;inset:-30% -50%;background:linear-gradient(110deg,transparent 38%,#ffffff38 48%,transparent 58%);transform:translateX(-95%);transition:transform .65s ease;pointer-events:none}
.btn .icon,.text-link .icon,.card-link .icon,.application-request .icon{transition:transform .35s var(--ease)}
.motion-enabled .btn:active{transform:translateY(1px) scale(.98)}
.motion-enabled .volume-tab{transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.motion-enabled .volume-tab[aria-pressed=true]{box-shadow:0 6px 20px #2E356518}
.motion-enabled .volume-tab:active{transform:scale(.96)}
.motion-enabled .order-step,.motion-enabled .production-list>div{position:relative}
.motion-enabled .order-step:before,.motion-enabled .production-list>div:before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:linear-gradient(90deg,#5C6BC0,transparent);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);transition-delay:var(--motion-delay,0ms)}
.motion-enabled .order-step.motion-visible:before,.motion-enabled .production-list>div.motion-visible:before{transform:scaleX(1)}
.motion-enabled .production-copy.motion-visible .production-list>div:before{transform:scaleX(1)}
.motion-enabled .production-copy.motion-visible .production-list>div:nth-child(2):before{transition-delay:150ms}
.motion-enabled .production-copy.motion-visible .production-list>div:nth-child(3):before{transition-delay:300ms}
.motion-enabled .step-number .icon{transition:transform .5s var(--ease)}
.motion-enabled .mobile-nav.is-open{animation:menu-enter .28s ease-out both}
.motion-enabled dialog[open]{animation:dialog-enter .34s var(--ease) both}
.motion-enabled dialog[open]::backdrop{animation:backdrop-enter .25s ease-out both}
.motion-enabled .faq-list details[open]>p{animation:answer-enter .28s ease-out both}
.motion-enabled .faq-list summary .icon{transition:transform .3s var(--ease)}
.motion-enabled .faq-list details[open] summary .icon{transform:rotate(45deg)}
.motion-enabled .form-status[data-state=success]:not(:empty){animation:answer-enter .3s ease-out both}
@media(hover:hover) and (pointer:fine){
  .motion-enabled .btn:hover:before,.motion-enabled .btn:focus-visible:before{transform:translateX(95%)}
  .motion-enabled .btn:hover>.icon,.motion-enabled .text-link:hover>.icon,.motion-enabled .application-request:hover>.icon{transform:translateX(4px) rotate(-12deg)}
  .motion-enabled .catalog-card img{transition:transform .55s var(--ease)}
  .motion-enabled .catalog-card:hover img,.motion-enabled .catalog-card:focus-visible img{transform:translateY(-8px) rotate(3deg)}
  .motion-enabled .catalog-card:hover .card-link .icon{transform:translateX(5px)}
  .motion-ready .motion-visible.catalog-card:hover,.motion-ready .motion-visible.related-card:hover{transform:translateY(-5px);transition-delay:0ms}
  .motion-enabled .volume-tab:hover{transform:translateY(-3px)}
  .motion-enabled .application-icon{transition:transform .5s var(--ease)}
  .motion-enabled .application-card:hover .application-icon{transform:translateY(-3px) rotate(-9deg)}
  .motion-enabled .order-step:hover .step-number .icon{transform:translateX(8px)}
}
@keyframes copy-enter{from{transform:translate3d(0,15px,0)}to{transform:translate3d(0,0,0)}}
@keyframes photo-drift{0%,100%{transform:scale(1.015) translateY(0)}50%{transform:scale(1.045) translateY(-4px)}}
@keyframes photo-light{0%,60%,100%{transform:translateX(-70%);opacity:0}66%{opacity:1}83%{transform:translateX(70%);opacity:0}}
@keyframes badge-drift{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-8px) rotate(12deg)}}
@keyframes bottle-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes motion-orbit{to{transform:rotate(360deg)}}
@keyframes catalog-orbit{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes shadow-breathe{0%,100%{transform:scaleX(1);opacity:.85}50%{transform:scaleX(.87);opacity:.65}}
@keyframes material-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.95)}}
@keyframes tag-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes location-wave{0%{transform:scale(.65);opacity:0}20%{opacity:.7}80%,100%{transform:scale(1.4);opacity:0}}
@keyframes menu-enter{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes answer-enter{from{opacity:.3;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition-duration:0s!important;transition-delay:0s!important}
.motion-paused{scroll-behavior:auto!important}
.motion-paused .motion-reveal{opacity:1!important;transform:none!important}
.motion-paused .motion-tilt{transform:none!important}
.motion-paused .motion-progress{display:none}
.motion-paused .hero-copy>*,.motion-paused .detail-copy>*,.motion-paused .page-intro .kicker,.motion-paused .page-intro h1,.motion-paused .page-intro .wrap>p,.motion-paused dialog[open],.motion-paused .faq-list details[open]>p,.motion-paused .form-status[data-state=success]{animation:none!important}
.motion-paused .btn:before{display:none}
@media(max-width:740px){.motion-progress{height:2px}.motion-ready .motion-reveal{transform:translate3d(0,18px,0);transition-duration:.6s}.motion-enabled .hero-photo:after{display:none}.motion-enabled .hero-photo picture{animation-duration:16s}.motion-enabled .hero-badge:after{inset:-5px}}
@media(prefers-reduced-motion:reduce){
  .motion-progress,.motion-enabled .hero-photo:after,.motion-enabled .location-dot:after{display:none!important}
  .motion-ready .motion-reveal{opacity:1!important;transform:none!important}
  .motion-tilt{transform:none!important}
  .motion-enabled *, .motion-enabled *:before,.motion-enabled *:after{animation:none!important;transition:none!important}
}