/* Feedback curto e movimento progressivo; conteúdo visível mesmo sem JavaScript. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.mobile-nav:not([hidden]){animation:menu-unfold .24s var(--motion-ease) both;transform-origin:top}
@keyframes menu-unfold{from{opacity:.5;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq-list summary>span{transition:transform .22s var(--motion-ease)}
.faq-list details[open]>p{animation:answer-in .22s var(--motion-ease)}
@keyframes answer-in{from{opacity:.5;transform:translateY(-4px)}to{opacity:1;transform:none}}
@supports(interpolate-size:allow-keywords){
  .faq-list details{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .24s var(--motion-ease),content-visibility .24s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
}
.button .icon,.text-link .icon,.product-cta .icon{transition:transform .18s var(--motion-ease)}
.category-image,.product-image>img,.product-image>.reference-photo{transition:transform .35s var(--motion-ease)}
@media(hover:hover) and (pointer:fine){
  .category-card:hover .category-image{transform:scale(1.035)}
  .product-card:hover .product-image>img,.product-card:hover .product-image>.reference-photo{transform:scale(1.035)}
  .button:hover .icon:has(use[href="#i-arrow"]),.text-link:hover .icon,.product-cta:hover .icon{transform:translateX(3px)}
}
.motion-offscreen .hero-carousel-track,.motion-offscreen .review-track,
.motion-tab-hidden .hero-carousel-track,.motion-tab-hidden .review-track{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mobile-nav:not([hidden]),.faq-list details[open]>p{animation:none}
  .faq-list details::details-content{transition:none}
  .faq-list summary>span,.category-image,.product-image>img,.product-image>.reference-photo,.button .icon,.text-link .icon,.product-cta .icon{transition:none}
  .category-card:hover .category-image,.product-card:hover .product-image>img,.product-card:hover .product-image>.reference-photo,.button:hover{transform:none}
}
