/* Lote 2 do redesenho: base de movimento da loja e das páginas de guia.
   Administração e recuperação de senha não carregam este arquivo. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1)}

/* Troca entre páginas da loja: o cabeçalho fica parado e o conteúdo desliza. */
@view-transition{navigation:auto}
body>header{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:0s}
::view-transition-old(root){animation:page-out .18s ease both}
::view-transition-new(root){animation:page-in .4s var(--ease-out) both}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-in{from{opacity:0;transform:translateY(14px)}}

/* Cabeçalho vira vidro depois que a página rola. */
.motion-header{transition:background-color .3s,border-color .3s,box-shadow .3s}
.motion-header.is-scrolled{background:#090e18c7;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:#2a3b50;box-shadow:0 12px 30px -20px #000}

/* Sublinhado que cresce nos links do menu. */
body>header nav a:not(.nav-cta){position:relative}
body>header nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#43baff;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
body>header nav a:not(.nav-cta):hover::after,body>header nav a[aria-current=page]::after{transform:scaleX(1)}

/* Brilho que atravessa os botões principais. */
:is(.primary,.button,.nav-cta){position:relative;overflow:hidden}
:is(.primary,.button,.nav-cta)::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff3d 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
:is(.primary,.button,.nav-cta):hover::after{transform:translateX(120%);transition:transform .7s var(--ease-out)}

/* Seções abaixo da dobra entram ao rolar; o resto já nasce visível. */
.reveal-pending{opacity:0;transform:translateY(24px)}
.reveal-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-in .reveal-item{animation:reveal-item .6s var(--ease-out) both;animation-delay:calc(var(--reveal-index,0) * 70ms + 120ms)}
@keyframes reveal-item{from{opacity:0;transform:translateY(16px)}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .reveal-pending{opacity:1;transform:none}
}