/* ===========================================================================
   Sistema de movimento ASSOCRAC
   ---------------------------------------------------------------------------
   Uma única camada de animação para painel, Espaço do Associado e páginas
   públicas. Tudo é opt-out por prefers-reduced-motion e nada aqui altera o
   layout: só opacidade, transform, sombra e cor — propriedades que o navegador
   anima na GPU sem provocar reflow.
   =========================================================================== */

:root{
    /* Curvas */
    --ease-out:cubic-bezier(.22,.8,.28,1);
    --ease-spring:cubic-bezier(.2,.9,.3,1.25);
    --ease-in-out:cubic-bezier(.65,.05,.36,1);

    /* Durações */
    --fast:140ms;
    --base:240ms;
    --slow:420ms;
    --page:340ms;

    /* Elevações */
    --lift-1:0 4px 14px #14342a12;
    --lift-2:0 10px 28px #14342a1c;
    --lift-3:0 22px 48px #14342a24;
}

*,*::before,*::after{-webkit-tap-highlight-color:transparent}

/* ---------------------------------------------------------------------------
   1. Transição entre rotas
   Navegadores com View Transitions cruzam as páginas nativamente; nos demais
   o conteúdo entra com um fade-up curto e a barra de progresso dá o feedback.
   --------------------------------------------------------------------------- */

@view-transition{navigation:auto}

::view-transition-old(root){animation:vt-out 180ms var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in var(--page) var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* Fallback (Firefox/Safari antigos): anima o container da página. */
html:not(.has-view-transitions) [data-page-transition]{animation:page-in var(--page) var(--ease-out) both}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Estado de saída aplicado pelo motion.js antes de trocar de página. */
html.route-leaving [data-page-transition]{opacity:.45;transform:translateY(-4px);transition:opacity 160ms var(--ease-in-out),transform 160ms var(--ease-in-out)}

/* Barra de progresso da navegação. */
.route-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:9999;pointer-events:none;opacity:0;transition:opacity 200ms ease}
.route-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green,#0b7a57),color-mix(in srgb,var(--green,#0b7a57) 45%,white));box-shadow:0 0 10px color-mix(in srgb,var(--green,#0b7a57) 55%,transparent);transition:width 240ms var(--ease-out)}
html.route-loading .route-progress{opacity:1}

/* ---------------------------------------------------------------------------
   2. Revelação por scroll
   --------------------------------------------------------------------------- */

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out);transition-delay:calc(50ms * var(--i, 0))}
[data-reveal].revealed{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-22px)}
[data-reveal="right"]{transform:translateX(22px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal="left"].revealed,[data-reveal="right"].revealed,[data-reveal="zoom"].revealed{transform:none}

/* ---------------------------------------------------------------------------
   3. Cartões, listas e tabelas
   --------------------------------------------------------------------------- */

.card,.stat,.stat-card,.panel,.record-card,.event-card,.coupon-card,.partner-card,
.member-card,.m-card,.digital-card,.update-card,.success-card,.public-event-card{
    transition:transform var(--base) var(--ease-out),box-shadow var(--base) var(--ease-out),border-color var(--base) ease;
    will-change:transform;
}
.card:hover,.stat:hover,.stat-card:hover,.record-card:hover,.event-card:hover,
.coupon-card:hover,.partner-card:hover,.m-card:hover,.public-event-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--lift-2);
}
@media(hover:none){
    .card:hover,.stat:hover,.stat-card:hover,.record-card:hover,.event-card:hover,
    .coupon-card:hover,.partner-card:hover,.m-card:hover,.public-event-card:hover{transform:none;box-shadow:none}
}

/* Entrada escalonada das linhas de tabela — leve, só no primeiro paint. */
[data-page-transition] table tbody tr{animation:row-in 380ms var(--ease-out) backwards}
[data-page-transition] table tbody tr:nth-child(1){animation-delay:20ms}
[data-page-transition] table tbody tr:nth-child(2){animation-delay:45ms}
[data-page-transition] table tbody tr:nth-child(3){animation-delay:70ms}
[data-page-transition] table tbody tr:nth-child(4){animation-delay:95ms}
[data-page-transition] table tbody tr:nth-child(5){animation-delay:120ms}
[data-page-transition] table tbody tr:nth-child(6){animation-delay:145ms}
[data-page-transition] table tbody tr:nth-child(7){animation-delay:170ms}
[data-page-transition] table tbody tr:nth-child(n+8){animation-delay:190ms}
@keyframes row-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

table tbody tr{transition:background-color var(--fast) ease}

/* ---------------------------------------------------------------------------
   4. Botões, links e ripple
   --------------------------------------------------------------------------- */

button,.btn,.text-btn,input[type=submit],a.btn,.record-actions a,
.public-form>button,.success-card>a,.update-card>a,.member-event-register{
    transition:transform var(--fast) var(--ease-out),box-shadow var(--base) var(--ease-out),
               background-color var(--base) ease,color var(--base) ease,opacity var(--base) ease;
}
/* Os botões de mostrar/ocultar senha ficam de fora: eles usam
   transform:translateY(-50%) para se centralizar dentro do campo, e redefinir
   transform no hover os arrancaria do lugar. Têm o próprio destaque abaixo. */
button:not(:where(.password-toggle,[data-password])):hover,.btn:hover,a.btn:hover,.public-form>button:hover,.success-card>a:hover,.update-card>a:hover{
    transform:translateY(-1px);box-shadow:var(--lift-2);
}
button:not(:where(.password-toggle,[data-password])):active,.btn:active,a.btn:active,.public-form>button:active,.success-card>a:active,.update-card>a:active{
    transform:translateY(0) scale(.975);box-shadow:var(--lift-1);
}
button:disabled,.btn:disabled{transform:none !important;box-shadow:none !important;opacity:.6;cursor:not-allowed}

/* Destaque sem tocar no transform que os posiciona. */
.password-toggle,[data-password]{transition:background-color var(--base) ease,color var(--base) ease,box-shadow var(--base) ease}
.password-toggle:hover,[data-password]:hover{background:color-mix(in srgb,var(--green,#0b7a57) 16%,white);box-shadow:var(--lift-1)}

/* Ondulação no ponto do clique.
   O motion.js desenha o efeito numa camada própria sobre o botão, NUNCA
   alterando o botão em si. A versão anterior aplicava position:relative no
   elemento clicado e isso derrubava do lugar qualquer botão posicionado com
   position:absolute — o olho de "mostrar senha" e o botão de recolher o menu. */
.ripple-layer{position:fixed;overflow:hidden;pointer-events:none;z-index:9998;contain:strict}
.ripple{position:absolute;border-radius:50%;transform:scale(0);opacity:.2;pointer-events:none;animation:ripple 520ms var(--ease-out) forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ---------------------------------------------------------------------------
   5. Formulários
   --------------------------------------------------------------------------- */

input,select,textarea{transition:border-color var(--base) ease,box-shadow var(--base) ease,background-color var(--base) ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--green,#0b7a57) 16%,transparent)}
label{transition:color var(--fast) ease}
label:focus-within{color:var(--green,#0b7a57)}

/* Anel de foco consistente para navegação por teclado. */
:focus-visible{outline:2px solid var(--green,#0b7a57);outline-offset:2px;border-radius:6px}

/* Estado de envio: o botão vira um spinner sem mudar de tamanho. */
button[data-submitting]{position:relative;color:transparent !important;pointer-events:none}
button[data-submitting]::after{
    content:'';position:absolute;inset:0;margin:auto;width:17px;height:17px;border-radius:50%;
    border:2px solid #ffffff66;border-top-color:#fff;animation:spin 620ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Sacudida curta em campo inválido. */
.shake{animation:shake 420ms var(--ease-out)}
@keyframes shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}38%{transform:translateX(6px)}58%{transform:translateX(-4px)}78%{transform:translateX(2px)}}

/* ---------------------------------------------------------------------------
   6. Modais, folhas e dropdowns
   --------------------------------------------------------------------------- */

/* .modal alterna display:none/grid no CSS legado. Para a entrada animar, o
   motion.js adiciona .is-open no quadro seguinte ao display. */
.modal.show{opacity:0;transition:opacity var(--base) ease}
.modal.show.is-open{opacity:1}
.modal.show>*{transform:translateY(22px) scale(.97);opacity:0;transition:transform var(--slow) var(--ease-spring),opacity var(--base) ease}
.modal.show.is-open>*{transform:none;opacity:1}

.mobile-overlay,.member-overlay{transition:opacity var(--base) ease,visibility var(--base)}
.mobile-more-sheet,.member-more-sheet{transition:transform var(--slow) var(--ease-spring),opacity var(--base) ease}

.user-dropdown,.notification-dropdown{
    transform-origin:top right;
    transition:opacity var(--fast) ease,transform var(--base) var(--ease-spring),visibility var(--base);
}
.user-menu:not(.open) .user-dropdown,.notification-menu:not(.open) .notification-dropdown{
    opacity:0;transform:translateY(-8px) scale(.96);
}
.user-menu.open .user-dropdown,.notification-menu.open .notification-dropdown{opacity:1;transform:none}

.notification-dropdown .notification-list a{animation:row-in 320ms var(--ease-out) backwards;animation-delay:calc(40ms * var(--i, 0))}
.notification-trigger .dot{animation:pulse-dot 2.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 #e2574c66}55%{box-shadow:0 0 0 6px #e2574c00}}

/* ---------------------------------------------------------------------------
   7. Toasts
   --------------------------------------------------------------------------- */

.toast,.member-toast{animation:toast-in 460ms var(--ease-spring) both}
.toast.leaving,.member-toast.leaving{animation:toast-out 260ms var(--ease-in-out) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-12px) scale(.97)}}

/* ---------------------------------------------------------------------------
   8. Skeleton / carregamento
   --------------------------------------------------------------------------- */

.skeleton{position:relative;overflow:hidden;background:#eef3f1;border-radius:10px;color:transparent !important}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffffcc,transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* Imagens entram com fade quando terminam de carregar. */
img[data-fade]{opacity:0;transition:opacity var(--slow) var(--ease-out)}
img[data-fade].loaded{opacity:1}

/* ---------------------------------------------------------------------------
   9. Números que contam
   --------------------------------------------------------------------------- */

[data-count-up]{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------
   10. Topbar com elevação ao rolar
   --------------------------------------------------------------------------- */

.topbar,.member-header,.public-header{transition:box-shadow var(--base) ease,background-color var(--base) ease,backdrop-filter var(--base) ease}
html.scrolled .topbar,html.scrolled .member-header,html.scrolled .public-header{
    box-shadow:0 6px 24px #14342a14;
    background:#ffffffee;
    backdrop-filter:saturate(160%) blur(9px);
}

/* Botão "voltar ao topo". */
.to-top{
    position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:80;
    width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
    background:var(--green,#0b7a57);color:#fff;box-shadow:var(--lift-3);
    opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
    transition:opacity var(--base) ease,transform var(--base) var(--ease-spring),visibility var(--base);
}
.to-top.visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-2px)}
@media(max-width:980px){.to-top{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------------------------------------------------------------------------
   11. Abas
   --------------------------------------------------------------------------- */

/* O display dos painéis continua com .settings-section / .email-section; aqui
   entra só a animação de entrada, para não competir com o CSS existente. */
[data-settings-tab],[data-email-tab],.public-tabs button{transition:color var(--base) ease,background-color var(--base) ease,box-shadow var(--base) ease}
[data-settings-panel].active,[data-email-panel].active{animation:panel-in 320ms var(--ease-out) both}
@keyframes panel-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.public-form.active{animation:panel-in 340ms var(--ease-out) both}

/* ---------------------------------------------------------------------------
   12. Respeito à preferência do usuário
   Quem pede menos movimento recebe as mesmas telas, sem deslocamento.
   --------------------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    [data-reveal]{opacity:1 !important;transform:none !important}
    .modal>*{transform:none}
    ::view-transition-old(root),::view-transition-new(root){animation:none}
}