/* ============================================================
   Painel do Estudante — Fluidez e Micro-interações
   Overrides finos para deixar as transições suaves, evitar
   layout thrashing e respeitar prefers-reduced-motion.
   Este arquivo é carregado APÓS style.css e animations.css.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. TRANSIÇÃO ENTRE GUIAS — cross-fade real
   A seção anterior recebe .is-leaving (pinada em position:fixed
   pelo JS para preservar a posição visual) e é animada para fora
   enquanto a nova entra. Isso dá a sensação de dois "slides"
   fundindo, em vez de um flash.
   ────────────────────────────────────────────────────────────*/
.page-section {
  contain: layout paint style;
}

.page-section.active {
  animation: pageFadeSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: opacity, transform;
}

@keyframes pageFadeSlideIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Seção já visitada: cross-fade mais rápido, mas ainda suave (não instantâneo) */
.page-section.section-warmed.active {
  animation: pageFadeSlideWarmed 0.22s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes pageFadeSlideWarmed {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Seção saindo — o JS pin ela em position:fixed antes de aplicar essa classe */
.page-section.is-leaving {
  display: block !important;
  animation: pageFadeSlideOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  will-change: opacity, transform;
}

@keyframes pageFadeSlideOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
}

/* Cards em visitas subsequentes ainda têm um "shimmer" de entrada
   suave (curto, sem stagger longo) para não parecerem "quebrados". */
.page-section.section-warmed .animate-fade-in-up.opacity-0 {
  animation: warmedCardFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0ms !important;
  opacity: 1 !important;
}

@keyframes warmedCardFadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Stagger CURTO nas visitas subsequentes — bem menos que o original */
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-100 { animation-delay: 35ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-200 { animation-delay: 65ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-300 { animation-delay: 90ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-350 { animation-delay: 105ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-400 { animation-delay: 120ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-500 { animation-delay: 145ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-600 { animation-delay: 165ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-700 { animation-delay: 185ms !important; }
.page-section.section-warmed .animate-fade-in-up.opacity-0.delay-800 { animation-delay: 200ms !important; }

/* ─────────────────────────────────────────────────────────────
   2. INDICADOR DO BOTTOM-NAV — deslize fluido e sedoso
   Duração maior (0.55s) com curva "expo out" para dar a
   sensação de "líquido". Não bouncy — apenas macio.
   ────────────────────────────────────────────────────────────*/
.nav-indicator-active {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
  will-change: transform, width;
  left: 0 !important;
}

/* Realce sutil quando o mouse está sobre o nav (não sobre um item específico) */
#bottom-nav:hover .nav-indicator-active {
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.65),
    0 12px 28px -5px rgba(107, 92, 231, 0.32) !important;
}

/* Item de nav em si — transição da cor e movimento do ícone mais macia */
.nav-item {
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              gap 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-item .material-symbols-outlined {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s ease !important;
}

.nav-item.active .material-symbols-outlined {
  transform: translateY(-1px) scale(1.08);
}

.nav-item:active .material-symbols-outlined {
  transform: scale(0.9);
  transition-duration: 0.12s !important;
}

/* O indicador já provê o feedback visual do hover — evitamos
   overlays extras que poderiam causar retriggering de blur. */

/* ─────────────────────────────────────────────────────────────
   3. CARDS DA DASHBOARD — hover sem "transition-all"
   Substitui o hover custoso (que anima background/backdrop-filter)
   por transições restritas a transform + box-shadow — MUITO mais
   leve para o GPU.
   ────────────────────────────────────────────────────────────*/
#section-dashboard .glass-metric-amber,
#section-dashboard .glass-metric-primary,
#section-dashboard .glass-metric-purple,
#section-dashboard .glass-metric-red,
#section-dashboard .liquid-glass-amber,
#section-dashboard .liquid-glass,
#btn-pomo-desempenho-dash,
#btn-dash-daily-goals {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease,
              border-color 0.28s ease !important;
  will-change: transform;
}

/* Hover apenas quando dispositivo suporta hover fino (mouse) */
@media (hover: hover) and (pointer: fine) {
  #section-dashboard .glass-metric-amber:hover,
  #section-dashboard .glass-metric-primary:hover,
  #section-dashboard .glass-metric-purple:hover,
  #section-dashboard .glass-metric-red:hover,
  #section-dashboard .liquid-glass-amber:hover,
  #section-dashboard .liquid-glass:hover,
  #btn-pomo-desempenho-dash:hover,
  #btn-dash-daily-goals:hover {
    /* mantém o efeito visual, mas evita re-triggerar backdrop-filter */
    will-change: transform;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. BOTÕES DE MÉTODO (LAB) — feedback tátil consistente
   ────────────────────────────────────────────────────────────*/
#section-lab .method-card,
#section-lab .tool-panel,
#section-lab .liquid-glass-tool,
#section-lab .liquid-glass-button {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              background 0.25s ease !important;
}

#section-lab .method-card:active,
#section-lab .liquid-glass-button:active {
  transform: scale(0.97);
  transition-duration: 0.08s !important;
}

/* Botão voltar do lab mais visível */
#btn-back-to-methods {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.22s ease,
              color 0.22s ease !important;
}

#btn-back-to-methods:hover {
  transform: translateX(-2px);
}

/* Entrada suave da ferramenta ativa dentro do lab */
#tool-content:not(.hidden) {
  animation: toolContentIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes toolContentIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ─────────────────────────────────────────────────────────────
   5. CALENDÁRIO E CRONOGRAMA — botões e cards com feedback tátil
   ────────────────────────────────────────────────────────────*/
#section-cronograma .liquid-glass-button,
#section-cronograma button {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease,
              background 0.25s ease,
              border-color 0.25s ease !important;
}

#section-cronograma .liquid-glass-button:active,
#section-cronograma button:active {
  transform: scale(0.97);
  transition-duration: 0.08s !important;
}

/* Botões de dia/navegação do calendário */
#section-calendario #cal-prev-month,
#section-calendario #cal-next-month {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.22s ease,
              color 0.22s ease !important;
}

#section-calendario #cal-prev-month:hover {
  transform: translateX(-2px);
}

#section-calendario #cal-next-month:hover {
  transform: translateX(2px);
}

#section-calendario #cal-prev-month:active,
#section-calendario #cal-next-month:active {
  transform: scale(0.9);
}

/* Modais do calendário/metas — fade suave */
#modal-metas-hub,
#modal-calendar-hub,
#modal-event-editor {
  transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────
   6. AJUSTES — grupos e toggles com feedback claro
   ────────────────────────────────────────────────────────────*/
#section-ajustes .setting-tab,
#section-ajustes button,
#section-ajustes label,
#section-ajustes .toggle {
  transition: color 0.2s ease,
              background 0.2s ease,
              transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
}

#section-ajustes button:active,
#section-ajustes .toggle:active {
  transform: scale(0.97);
}

#section-ajustes input:focus,
#section-ajustes textarea:focus,
#section-ajustes select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
  transition: box-shadow 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────
   7. MODAIS — abertura/fechamento suave e consistente
   ────────────────────────────────────────────────────────────*/
.modal-open-anim {
  animation: modalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   8. FOCO ACESSÍVEL — teclado tem contorno visível e suave
   ────────────────────────────────────────────────────────────*/
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.75);
  outline-offset: 3px;
  border-radius: 12px;
  transition: outline-offset 0.15s ease;
}

/* ─────────────────────────────────────────────────────────────
   9. SCROLL na troca de guia
   O reset do scroll é controlado pelo JS (window.scrollTo com
   behavior 'auto'), então NÃO habilitamos scroll-behavior:smooth
   global — a combinação causa uma rolagem atrasada que dá a
   sensação de "travado" ao trocar de aba.
   ────────────────────────────────────────────────────────────*/

/* ─────────────────────────────────────────────────────────────
   10. prefers-reduced-motion — respeitar preferências do usuário
   ────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .page-section.active,
  .page-section.section-warmed.active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-float,
  .animate-float-delayed,
  .animate-slow-pan,
  .pomodoro-ring-glow,
  .pomo-pulse,
  .flashcard-3d-card,
  .srs-curve-path,
  .srs-point,
  .srs-point-delayed,
  .node-floating-1,
  .node-floating-2,
  .calendar-day-active,
  .goal-task-checkbox,
  .goal-xp-fill,
  .level-up-tag,
  .lila-logo-animated,
  .animate-shine::after {
    animation: none !important;
  }

  .nav-indicator-active {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   11. Orbs de fundo — menor custo de renderização
   Manter a estética, mas evitar reflows quando o painel troca
   de background.
   ────────────────────────────────────────────────────────────*/
.orb {
  will-change: transform;
  contain: layout paint style;
}

/* ─────────────────────────────────────────────────────────────
   12. Header (top-nav) — cross-fade suave dos itens ativos
   ────────────────────────────────────────────────────────────*/
[data-header-page] {
  transition: color 0.22s ease,
              background 0.22s ease,
              transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[data-header-page]:active {
  transform: scale(0.96);
}

/* ─────────────────────────────────────────────────────────────
   13. OVERLAY DE CROSS-FADE DO BACKGROUND
   Elemento injetado pelo JS que pulsa levemente quando a aba
   troca — mascara a mudança abrupta dos ::before/::after do body.
   ────────────────────────────────────────────────────────────*/
#tab-transition-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  background: radial-gradient(circle at 50% 40%,
    rgba(120, 100, 240, 0.06) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 75%);
  /* Sem backdrop-filter: o blur em tela cheia é o principal culpado
     pelas quedas de FPS na troca de guia. Um fade sutil no gradient
     já dá a sensação de "cross-fade" sem custo de GPU. */
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#tab-transition-overlay.is-active {
  opacity: 1;
}

html.dark #tab-transition-overlay {
  background: radial-gradient(circle at 50% 40%,
    rgba(165, 180, 252, 0.05) 0%,
    rgba(30, 27, 75, 0.04) 40%,
    transparent 75%);
}

/* Cross-fade dos backgrounds do body — apenas opacity para evitar
   layout thrashing quando trocamos entre body-*-bg */
body::before,
body::after {
  transition: opacity 0.35s ease-in-out;
}

/* ─────────────────────────────────────────────────────────────
   14. BOTÕES DE MÉTODO E CARDS — entrada quando a seção ativa
   Adiciona "pop" leve ao entrar (não substitui os fade-in-up
   originais, complementa nos elementos-chave).
   ────────────────────────────────────────────────────────────*/
/* Cards da seção entrante fazem um "pop" apenas na PRIMEIRA visita.
   Em visitas subsequentes (.section-warmed), quem cuida da entrada
   é o warmedCardFadeIn logo acima — evitamos empilhar duas
   animações no mesmo elemento (era uma das causas do "travado"). */
.page-section.active:not(.section-warmed) .method-card,
.page-section.active:not(.section-warmed) #btn-open-calendar-hub,
.page-section.active:not(.section-warmed) #btn-open-metas-hub {
  animation: cardEnterPop 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardEnterPop {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Escalonamento curto para os method-cards do Lab (só na primeira visita) */
.page-section.active:not(.section-warmed) .method-card:nth-child(1) { animation-delay: 20ms; }
.page-section.active:not(.section-warmed) .method-card:nth-child(2) { animation-delay: 55ms; }
.page-section.active:not(.section-warmed) .method-card:nth-child(3) { animation-delay: 90ms; }
.page-section.active:not(.section-warmed) .method-card:nth-child(4) { animation-delay: 125ms; }
.page-section.active:not(.section-warmed) .method-card:nth-child(5) { animation-delay: 160ms; }
.page-section.active:not(.section-warmed) .method-card:nth-child(6) { animation-delay: 195ms; }

/* ─────────────────────────────────────────────────────────────
   15. SEÇÃO SAINDO — cards e botões acompanham com "wipe" curto
   Somente quando o container tem .is-leaving. Duração alinhada
   com pageFadeSlideOut (0.32s).
   ────────────────────────────────────────────────────────────*/
/* NÃO reanimamos individualmente os cards da seção que sai — o
   container inteiro (.is-leaving) já está animando opacity + translate.
   Reanimar cada card no mesmo momento duplica trabalho no compositor
   e é uma das causas mais fortes do "travado" percebido. */