/* Camada de movimento: entrada do hero, revelações, barra de progresso e
   transições do portfólio. Tudo desligado sob prefers-reduced-motion ou
   quando o usuário aperta "Pausar movimento" (.motion-paused no <html>). */

/* ---------- barra de progresso de leitura ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--lime);z-index:60;pointer-events:none;will-change:transform}
.portfolio-page .scroll-progress{background:var(--petrol)}

/* ---------- entrada do hero ---------- */
/* A animação em si é aplicada por motion.js com element.animate(), para que
   o estado natural do hero continue visível se o script não rodar. */
@keyframes move-fade{to{opacity:1}}

/* ---------- revelação genérica no scroll ---------- */
.motion-ready [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.75,.25,1),transform .75s cubic-bezier(.2,.75,.25,1)}
.motion-ready [data-reveal][data-reveal=side]{transform:translateX(-26px)}
.motion-ready [data-reveal][data-reveal=zoom]{transform:scale(.96)}
.motion-ready [data-reveal].is-in{opacity:1;transform:none}

/* sublinhado que corre sob os títulos de seção */
.display-underline{position:relative}
.display-underline:after{content:'';position:absolute;left:0;bottom:-10px;height:4px;width:100%;background:var(--lime);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.75,.25,1) .15s}
.motion-ready .display-underline:after{transform:scaleX(0)}
.display-underline.is-in:after{transform:scaleX(1)}

/* ---------- marquee de marcas: pausa no hover ---------- */
@media(hover:hover) and (pointer:fine){
 .brand-window:hover .brand-grid{animation-play-state:paused}
}
.brand-grid img{transition:filter .25s,opacity .25s,transform .25s}
@media(hover:hover) and (pointer:fine){
 .brand-grid img:hover{transform:scale(1.08)}
}

/* ---------- FAQ ---------- */
.faq-plus{transition:transform .3s cubic-bezier(.2,.75,.25,1),color .3s}
.faq-item[open] .faq-plus{transform:rotate(45deg);color:var(--lime)}
.faq-item{transition:background .3s}
.faq-item summary{transition:padding-left .3s}
@media(hover:hover) and (pointer:fine){
 .faq-item summary:hover{padding-left:26px}
}

/* ---------- menu lateral: itens em cascata ---------- */
.site-menu nav a,.site-menu nav button{transition:padding-left .28s cubic-bezier(.2,.75,.25,1),color .28s}
@media(hover:hover) and (pointer:fine){
 .site-menu nav a:hover,.site-menu nav button:hover{padding-left:12px}
}

/* ---------- formulário: troca de passo ---------- */
/* Animado por motion.js; sem estado inicial escondido no CSS. */
#form-progress{transition:none}
#form-progress::-webkit-progress-value{transition:inline-size .45s cubic-bezier(.2,.75,.25,1)}
#form-progress::-moz-progress-bar{transition:inline-size .45s cubic-bezier(.2,.75,.25,1)}

/* ---------- rodapé ---------- */
.nav2 a,.nav2 button{position:relative}
.nav2 a:after,.nav2 button:after{content:'';position:absolute;left:0;bottom:6px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s cubic-bezier(.2,.75,.25,1)}
@media(hover:hover) and (pointer:fine){
 .nav2 a:hover:after,.nav2 button:hover:after{transform:scaleX(1);transform-origin:0 50%}
}

/* ---------- portfólio ---------- */
.portfolio-item>img{transition:transform .5s cubic-bezier(.2,.75,.25,1),filter .35s}
.portfolio-item{overflow:hidden}
.portfolio-item>img{will-change:transform}
@media(hover:hover) and (pointer:fine){
 .portfolio-item:hover>img,.portfolio-item:focus-visible>img{transform:scale(1.06);filter:brightness(.88)}
 .portfolio-item:hover .portfolio-item-caption strong{color:#2f6b3f}
}
.portfolio-item-caption strong{transition:color .25s}
.portfolio-filters button{transition:background .25s,color .25s,border-color .25s,transform .25s}
@media(hover:hover) and (pointer:fine){
 .portfolio-filters button:hover{transform:translateY(-2px)}
}
#portfolio-dialog[open]{animation:portfolio-dialog-enter .26s cubic-bezier(.2,.75,.25,1)}
#portfolio-dialog::backdrop{animation:move-fade-in .26s ease-out}
@keyframes move-fade-in{from{opacity:0}to{opacity:1}}
/* A entrada da mídia no lightbox é animada por motion.js. */
.portfolio-dialog-foot button{transition:background .25s,color .25s,transform .25s}
@media(hover:hover) and (pointer:fine){
 .portfolio-dialog-foot button:not(:disabled):hover{background:var(--petrol);color:var(--lime);transform:translateY(-2px)}
}
.portfolio-bottom{transition:transform .4s cubic-bezier(.2,.75,.25,1)}

/* ---------- respeito à preferência do usuário ---------- */
.motion-paused .scroll-progress{display:none}
.motion-paused [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
.motion-paused .display-underline:after{transform:scaleX(1);transition:none}
.motion-paused #portfolio-dialog[open]{animation:none!important}
.motion-paused .brand-grid{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
 .scroll-progress{display:none}
 [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
 .display-underline:after{transform:scaleX(1);transition:none}
 #portfolio-dialog[open]{animation:none!important}
}