/* Anuncia Aí — camada de movimento.
   Regras separadas do layout: só transform, opacity, filter e clip-path.
   O style.css já desliga tudo em prefers-reduced-motion. */

:root{
  --m-fast:.26s;
  --m-base:.44s;
  --m-slow:.7s;
  --m-out:cubic-bezier(.16,1,.3,1);
  --m-pop:cubic-bezier(.34,1.56,.64,1);
  --m-swing:cubic-bezier(.76,0,.24,1);
  --m-step:46ms;
}

/* ---------------------------------------------------------------
   1. Saída e entrada da tela inteira (View Transitions API)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-leave var(--m-fast) ease-in both}
  ::view-transition-new(root){animation:vt-arrive var(--m-base) var(--m-out) both}
  html[data-motion="business"]::view-transition-old(root){animation:vt-leave-deep .3s ease-in both}
  html[data-motion="business"]::view-transition-new(root){animation:vt-arrive-deep .5s var(--m-out) both}
  html[data-motion="product"]::view-transition-old(root){animation:vt-leave-push .24s ease-in both}
  html[data-motion="product"]::view-transition-new(root){animation:vt-arrive-zoom .46s var(--m-out) both}
}
@keyframes vt-leave{to{opacity:0;transform:scale(.992)}}
@keyframes vt-arrive{from{opacity:0;transform:scale(1.008)}}
@keyframes vt-leave-deep{to{opacity:0;transform:scale(1.06);filter:blur(7px)}}
@keyframes vt-arrive-deep{from{opacity:0;transform:scale(.94);filter:blur(5px)}}
@keyframes vt-leave-push{to{opacity:0;transform:scale(.96)}}
@keyframes vt-arrive-zoom{from{opacity:0;transform:scale(1.04)}}

/* ---------------------------------------------------------------
   2. Fio de luz no topo a cada navegação
   --------------------------------------------------------------- */
body::after{
  content:'';position:fixed;z-index:999;top:0;left:0;right:0;height:3px;
  pointer-events:none;opacity:0;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--red),var(--blue) 55%,var(--red));
}
html[data-beam="a"] body::after{animation:beam-a .8s var(--m-out)}
html[data-beam="b"] body::after{animation:beam-b .8s var(--m-out)}
@keyframes beam-a{0%{opacity:1;transform:scaleX(0)}60%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes beam-b{0%{opacity:1;transform:scaleX(0)}60%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* ---------------------------------------------------------------
   3. Troca de abas: deslize direcional da área de conteúdo
   (o cabeçalho, a barra lateral e a nav inferior são fixos e ficam parados)
   --------------------------------------------------------------- */
#app main#content,
#app .d-workspace,
#app .ref-workspace{animation:slide-in var(--m-base) var(--m-out) backwards}
html[data-nav="back"] #app main#content,
html[data-nav="back"] #app .d-workspace,
html[data-nav="back"] #app .ref-workspace{animation-name:slide-in-back}
@keyframes slide-in{from{opacity:0;transform:translate3d(34px,8px,0) scale(.99)}}
@keyframes slide-in-back{from{opacity:0;transform:translate3d(-34px,8px,0) scale(.99)}}

/* A conversa tem composer fixo dentro do <main>: só esmaece. */
html[data-motion="messages"] #app main#content{animation:none}

/* Cascata padrão dos blocos da página. */
html[data-motion="page"] #app main#content>*,
html[data-motion="page"] #app .d-workspace>.d-main>*,
html[data-motion="categories"] #app .ref-workspace>.ref-explore>*{
  animation:rise .52s var(--m-out) backwards;
  animation-delay:calc(60ms + var(--i,0) * 40ms);
}
html[data-motion="page"] #app main#content>*:nth-child(1),
html[data-motion="page"] #app .d-workspace>.d-main>*:nth-child(1){animation-delay:60ms}
html[data-motion="page"] #app main#content>*:nth-child(2),
html[data-motion="page"] #app .d-workspace>.d-main>*:nth-child(2){animation-delay:.11s}
html[data-motion="page"] #app main#content>*:nth-child(3),
html[data-motion="page"] #app .d-workspace>.d-main>*:nth-child(3){animation-delay:.16s}
html[data-motion="page"] #app main#content>*:nth-child(n+4),
html[data-motion="page"] #app .d-workspace>.d-main>*:nth-child(n+4){animation-delay:.21s}
@keyframes rise{from{opacity:0;transform:translate3d(0,20px,0)}}

/* ---------------------------------------------------------------
   4. Categorias — os cartões se montam em grade
   --------------------------------------------------------------- */
html[data-motion="categories"] .ref-explore-heading h1{animation:cat-title .72s var(--m-out) .08s backwards}
html[data-motion="categories"] .ref-explore-heading h1 em{animation:cat-accent .6s var(--m-pop) .34s backwards;display:inline-block}
html[data-motion="categories"] .ref-local-banner{animation:cat-banner .78s var(--m-out) .12s backwards}
html[data-motion="categories"] .ref-category-grid>*{
  animation:cat-card .62s var(--m-pop) backwards;
  animation-delay:calc(.16s + var(--i,0) * 38ms);
}
html[data-motion="categories"] .ref-feature-grid>*,
html[data-motion="categories"] .ref-collections>*{
  animation:cat-wide .66s var(--m-out) backwards;
  animation-delay:calc(.1s + var(--i,0) * 60ms);
}
html[data-motion="categories"] .ref-trending>*{
  animation:cat-pill .5s var(--m-pop) backwards;
  animation-delay:calc(.08s + var(--i,0) * 32ms);
}
@keyframes cat-title{from{opacity:0;transform:translate3d(-26px,0,0);filter:blur(4px)}}
@keyframes cat-accent{from{opacity:0;transform:translate3d(0,12px,0) rotate(-4deg)}}
@keyframes cat-banner{from{opacity:0;transform:translate3d(46px,0,0) scale(.97)}}
@keyframes cat-card{from{opacity:0;transform:translate3d(0,26px,0) scale(.9)}}
@keyframes cat-wide{from{opacity:0;transform:translate3d(0,30px,0) scale(.965)}}
@keyframes cat-pill{from{opacity:0;transform:translate3d(0,10px,0) scale(.8)}}

/* ---------------------------------------------------------------
   5. Mensagens — exclusiva: balões que "chegam" na tela
   --------------------------------------------------------------- */
/* A perspectiva vai dentro do próprio transform: aplicada a um contêiner, ela
   viraria bloco de contenção do composer fixo da conversa. */
html[data-motion="messages"] .messages-page .page-heading,
html[data-motion="messages"] .d-conversation-panel>h1,
html[data-motion="messages"] .chat-header{animation:msg-head .54s var(--m-out) backwards}
html[data-motion="messages"] .message-tabs>*,
html[data-motion="messages"] .d-message-tabs>*{
  animation:msg-tab .46s var(--m-pop) backwards;
  animation-delay:calc(.12s + var(--i,0) * 60ms);
}
html[data-motion="messages"] .conversation-list>*,
html[data-motion="messages"] .d-conversations>*{
  animation:msg-row .58s var(--m-out) backwards;
  animation-delay:calc(.14s + var(--i,0) * 55ms);
  transform-origin:0% 50%;
}
html[data-motion="messages"] .conversation-list>* .conversation-avatar,
html[data-motion="messages"] .d-conversations>* img,
html[data-motion="messages"] .d-conversations>* svg{
  animation:msg-avatar .6s var(--m-pop) backwards;
  animation-delay:calc(.2s + var(--i,0) * 55ms);
}
html[data-motion="messages"] .chat-page>.bubble,
html[data-motion="messages"] .d-chat-row{
  animation:msg-bubble .56s var(--m-pop) backwards;
  animation-delay:calc(.1s + var(--i,0) * 70ms);
}
html[data-motion="messages"] .chat-page>.bubble.incoming{transform-origin:0% 100%}
html[data-motion="messages"] .chat-page>.bubble.outgoing{transform-origin:100% 100%}
html[data-motion="messages"] .chat-composer,
html[data-motion="messages"] .d-chat-composer{animation:msg-composer .6s var(--m-out) .26s backwards}
html[data-motion="messages"] .unread,
html[data-motion="messages"] .d-unread{animation:msg-ping 1.1s ease-out .5s 2 backwards}
@keyframes msg-head{from{opacity:0;transform:translate3d(0,-22px,0)}}
@keyframes msg-tab{from{opacity:0;transform:translate3d(0,14px,0) scale(.86)}}
@keyframes msg-row{from{opacity:0;transform:perspective(1000px) translate3d(-38px,0,0) rotateY(22deg) scale(.96)}}
@keyframes msg-avatar{from{opacity:0;transform:scale(.3) rotate(-22deg)}}
@keyframes msg-bubble{from{opacity:0;transform:translate3d(0,22px,0) scale(.72)}}
@keyframes msg-composer{from{opacity:0;transform:translate3d(0,100%,0)}}
@keyframes msg-ping{0%{transform:scale(.4);opacity:0}45%{transform:scale(1.35);opacity:1}70%{transform:scale(.92)}100%{transform:scale(1);opacity:1}}

/* ---------------------------------------------------------------
   6. Favoritos — exclusiva: batida de coração e cartões estourando
   --------------------------------------------------------------- */
html[data-motion="favorites"] .favorite-heading,
html[data-motion="favorites"] .d-favorites-title{animation:fav-head .6s var(--m-out) backwards;position:relative}
html[data-motion="favorites"] .favorite-heading>.icon,
html[data-motion="favorites"] .d-favorites-title>.icon{animation:heartbeat 1.35s var(--m-pop) .12s 2 backwards;transform-origin:50% 55%}
html[data-motion="favorites"] .favorite-heading::after,
html[data-motion="favorites"] .d-favorites-title::after{
  content:'';position:absolute;left:-14px;top:50%;width:76px;height:76px;margin-top:-38px;
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,#ff002933,#ff002900 70%);
  animation:fav-glow 1.6s ease-out .1s 2 backwards;
}
html[data-motion="favorites"] .favorite-tabs>*,
html[data-motion="favorites"] .d-favorite-tabs>*{animation:fav-tab .46s var(--m-pop) backwards;animation-delay:calc(.14s + var(--i,0) * 45ms)}
html[data-motion="favorites"] .product-grid>*,
html[data-motion="favorites"] .d-favorites-grid>*{
  animation:fav-card .66s var(--m-pop) backwards;
  animation-delay:calc(.16s + var(--i,0) * 52ms);
}
html[data-motion="favorites"] .product-grid>* .favorite-button,
html[data-motion="favorites"] .d-favorites-grid>* .favorite-button{
  animation:fav-burst .7s var(--m-pop) backwards;
  animation-delay:calc(.34s + var(--i,0) * 52ms);
}
@keyframes fav-head{from{opacity:0;transform:translate3d(0,-18px,0)}}
@keyframes heartbeat{0%{transform:scale(.55);opacity:.2}18%{transform:scale(1.28);opacity:1}32%{transform:scale(.96)}46%{transform:scale(1.16)}62%,100%{transform:scale(1)}}
@keyframes fav-glow{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes fav-tab{from{opacity:0;transform:translate3d(0,12px,0) scale(.84)}}
@keyframes fav-card{from{opacity:0;transform:translate3d(0,34px,0) scale(.82) rotate(-2.5deg)}}
@keyframes fav-burst{0%{opacity:0;transform:scale(0) rotate(-40deg)}55%{opacity:1;transform:scale(1.4) rotate(6deg)}100%{transform:scale(1) rotate(0)}}

/* ---------------------------------------------------------------
   7. Minha conta — exclusiva: abertura em íris a partir do perfil
   --------------------------------------------------------------- */
html[data-motion="account"] #app main#content,
html[data-motion="account"] #app .d-workspace{animation:iris .72s var(--m-swing) backwards}
html[data-motion="account"] .account-profile{animation:acc-card .7s var(--m-out) .12s backwards}
html[data-motion="account"] .account-profile .avatar{animation:acc-avatar .82s var(--m-pop) .18s backwards}
html[data-motion="account"] .account-stats>*{
  animation:acc-stat .6s var(--m-pop) backwards;
  animation-delay:calc(.3s + var(--i,0) * 80ms);
}
html[data-motion="account"] .account-menu>*{
  animation:acc-row .5s var(--m-out) backwards;
  animation-delay:calc(.34s + var(--i,0) * 42ms);
}
@keyframes iris{from{clip-path:circle(14% at 18% 22%);opacity:.35}to{clip-path:circle(150% at 18% 22%);opacity:1}}
@keyframes acc-card{from{opacity:0;transform:translate3d(0,26px,0) scale(.94)}}
@keyframes acc-avatar{0%{opacity:0;transform:scale(.2) rotate(-150deg)}70%{opacity:1;transform:scale(1.12) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes acc-stat{from{opacity:0;transform:translate3d(0,22px,0) scale(.8)}}
@keyframes acc-row{from{opacity:0;transform:translate3d(-26px,0,0)}}

/* ---------------------------------------------------------------
   8. "Tem um negócio?" — exclusiva: cortina vermelha e azul
   --------------------------------------------------------------- */
html[data-motion="business"] #app::before,
html[data-motion="business"] #app::after{
  content:'';position:fixed;inset:-25% -30%;z-index:900;pointer-events:none;
  animation:curtain .85s var(--m-swing) both;
}
html[data-motion="business"] #app::before{background:linear-gradient(100deg,#ff0029,#c4001f)}
html[data-motion="business"] #app::after{background:linear-gradient(100deg,#0750d4,#061b51);animation-delay:.11s}
@keyframes curtain{
  0%{transform:translate3d(-150%,0,0) skewX(-15deg)}
  44%{transform:translate3d(0,0,0) skewX(-15deg)}
  100%{transform:translate3d(150%,0,0) skewX(-15deg)}
}
html[data-motion="business"] #app main#content{animation:none}
html[data-motion="business"] .frontier-page-heading{animation:biz-title .9s var(--m-out) .42s backwards;transform-origin:50% 100%}
html[data-motion="business"] .frontier-page-heading h1{position:relative;overflow:hidden}
html[data-motion="business"] .frontier-page-heading h1::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,#ffffff00 35%,#ffffffd9 50%,#ffffff00 65%);
  transform:translate3d(-130%,0,0);
  animation:shine 1.15s ease-in-out .95s backwards;
}
html[data-motion="business"] .frontier-back{animation:rise .6s var(--m-out) .4s backwards}
html[data-motion="business"] .frontier-business-summary>*{
  animation:biz-card .82s var(--m-out) backwards;
  animation-delay:calc(.6s + var(--i,0) * 95ms);
  transform-origin:50% 0;
}
html[data-motion="business"] .frontier-business-grid>*,
html[data-motion="business"] .frontier-business-callout,
html[data-motion="business"] .frontier-prose{
  animation:biz-lift .8s var(--m-out) .75s backwards;
}
@keyframes biz-title{from{opacity:0;transform:perspective(900px) translate3d(0,54px,0) rotateX(-55deg);filter:blur(8px)}}
@keyframes shine{from{transform:translate3d(-130%,0,0)}to{transform:translate3d(130%,0,0)}}
@keyframes biz-card{from{opacity:0;transform:perspective(1100px) translate3d(0,40px,0) rotateX(42deg) scale(.92)}}
@keyframes biz-lift{from{opacity:0;transform:translate3d(0,34px,0)}}

/* ---------------------------------------------------------------
   9. Anúncio aberto — a foto cresce e as informações sobem
   --------------------------------------------------------------- */
html[data-motion="product"] .gallery-hero,
html[data-motion="product"] .d-product-gallery{animation:prod-hero .7s var(--m-out) backwards;transform-origin:50% 40%}
html[data-motion="product"] .thumbnails>*,
html[data-motion="product"] .d-thumbnails>*{
  animation:prod-thumb .5s var(--m-pop) backwards;
  animation-delay:calc(.22s + var(--i,0) * 55ms);
}
html[data-motion="product"] .product-title,
html[data-motion="product"] .d-product-top h1{animation:prod-line .6s var(--m-out) .16s backwards}
html[data-motion="product"] .product-subtitle,
html[data-motion="product"] .detail-page .price,
html[data-motion="product"] .d-product-top .price{animation:prod-price .66s var(--m-pop) .26s backwards;display:inline-block}
html[data-motion="product"] .product-pills>*{animation:prod-pill .46s var(--m-pop) backwards;animation-delay:calc(.34s + var(--i,0) * 50ms)}
html[data-motion="product"] .d-seller-panel,
html[data-motion="product"] .d-product-contact{animation:prod-panel .72s var(--m-out) .2s backwards}
html[data-motion="product"] .product-grid>*,
html[data-motion="product"] .d-related-grid>*{
  animation:rise .6s var(--m-out) backwards;
  animation-delay:calc(.4s + var(--i,0) * 48ms);
}
@keyframes prod-hero{from{opacity:0;transform:scale(.84);filter:blur(10px)}}
@keyframes prod-thumb{from{opacity:0;transform:translate3d(0,16px,0) scale(.7)}}
@keyframes prod-line{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes prod-price{0%{opacity:0;transform:scale(.55)}65%{opacity:1;transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes prod-pill{from{opacity:0;transform:translate3d(0,10px,0) scale(.7)}}
@keyframes prod-panel{from{opacity:0;transform:translate3d(38px,0,0)}}

/* ---------------------------------------------------------------
   10. Detalhes que dão vida ao resto da interface
   --------------------------------------------------------------- */
.brand-logo{transition:transform .35s var(--m-pop),filter .35s ease}
.brand:hover .brand-logo,.d-brand:hover .brand-logo,.ref-brand:hover .brand-logo{transform:scale(1.04) rotate(-.8deg)}
.brand:active .brand-logo,.d-brand:active .brand-logo,.ref-brand:active .brand-logo{transform:scale(.97)}
.nav-item,.ref-mobile-nav a{transition:color .2s ease}
.nav-item .nav-icon,.ref-mobile-nav a .icon{transition:transform .38s var(--m-pop)}
.nav-item.active .nav-icon,.ref-mobile-nav a:hover .icon{transform:translateY(-3px) scale(1.12)}
.d-sidebar nav a,.ref-sidebar nav a{transition:transform .28s var(--m-out),background-color .22s ease,color .22s ease}
.d-sidebar nav a:hover,.ref-sidebar nav a:hover{transform:translateX(4px)}
.card,.product-card,.d-card,.ref-category,.ref-product{transition:transform .34s var(--m-out),box-shadow .34s ease}
.card:hover,.product-card:hover,.d-card:hover,.ref-category:hover,.ref-product:hover{transform:translateY(-4px)}
dialog[open]{animation:modal-in .4s var(--m-pop)}
dialog[open]::backdrop{animation:backdrop-in .3s ease}
@keyframes modal-in{from{opacity:0;transform:translate3d(0,26px,0) scale(.94)}}
@keyframes backdrop-in{from{opacity:0}}