/**
 * mobile-transitions.css  v2.0
 * Melhorias de transição e feedback tátil — nível app de banco.
 * 100% CSS · sem interferência com lógica JS.
 *
 * REGRA: nada que toque em display, visibility ou altere dimensões.
 * Apenas: tap feedback, touch-action, scroll, sheets, toast, toasts.
 *
 *  1. Tokens
 *  2. Tap highlight + touch-action global  ← maior ganho de UX
 *  3. Feedback de clique (scale/opacity no :active)
 *  4. Scroll — momentum, overscroll, barra oculta
 *  5. Bottom sheets — curva de abertura mais natural
 *  6. Dropdown do switcher — entrada animada (só CSS, não mexe no display)
 *  7. Botão "ocupado" (disabled pulsing)
 *  8. Preview overlay — fade de entrada
 *  9. Mobile nav — spring nos level chips
 * 10. Toast — entrada fluida
 * 11. Redução de movimento (a11y)
 */

/* ═══════════════════════════════════════════════════════════════
   1. TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --mt-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mt-ease-out:    cubic-bezier(.16, 1,    .3,  1);
  --mt-ease-std:    cubic-bezier(.4,  0,    .2,  1);
  --mt-ease-decel:  cubic-bezier(.0,  0,    .2,  1);

  --mt-instant: 60ms;
  --mt-fast:   120ms;
  --mt-normal: 240ms;
  --mt-slow:   380ms;
}


/* ═══════════════════════════════════════════════════════════════
   2. TAP HIGHLIGHT & TOUCH-ACTION GLOBAL
   Elimina o delay de 300ms do iOS e o flash do browser em todos
   os elementos interativos de uma só vez.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  button,
  [role="button"],
  a,
  label,
  .le-lesson-card,
  .le-drop-item,
  .le-lc-act,
  .le-fab-item-btn,
  .le-add-pill-btn,
  .le-sheet-handle,
  .unit-card,
  [class*="unit-card"],
  .card,
  .cwm-pill,
  .cwm-price-chip,
  .kpab-icon-btn,
  .le-switcher-btn,
  .le-sw-edit-btn,
  .mnb-tab,
  .mnb-tab-edit,
  .ulas-action-btn,
  .umm-sh-cancel,
  .umm-sh-save,
  .le-pf-back,
  .le-pf-drop-item,
  .le-version-item {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color:         transparent !important;
    touch-action:                manipulation !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   3. FEEDBACK DE CLIQUE — scale + opacity imediatos no :active
   O usuário sabe instantaneamente que tocou — sem esperar o JS.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Unit cards ── */
  .unit-card:active,
  [class*="unit-card"]:active {
    transform:  scale(.97) translateZ(0) !important;
    opacity:    .92 !important;
    transition: transform var(--mt-instant) var(--mt-ease-std),
                opacity   var(--mt-instant) linear !important;
  }

  /* ── Botões de ação dos cards (Abrir / Editar / Excluir) ── */
  .btn-open:active,
  .btn-edit:active,
  .btn-delete:active {
    transform:  scale(.93) !important;
    transition: transform var(--mt-instant) var(--mt-ease-spring) !important;
  }

  /* ── FAB units ── */
  #umFab:active {
    transform:  scale(.91) !important;
    box-shadow: 0 2px 8px rgba(13,13,13,.15) !important;
    transition: transform var(--mt-instant) var(--mt-ease-spring),
                box-shadow var(--mt-instant) linear !important;
  }

  /* ── Items do dropdown de lessons ── */
  .le-drop-item:active {
    background: rgba(13,13,13,.06) !important;
    transition: background var(--mt-instant) linear !important;
  }

  /* ── Switcher btn ── */
  .le-switcher-btn:active {
    background: rgba(13,13,13,.03) !important;
    transition: background var(--mt-instant) linear !important;
  }

  /* ── Action sheet de level ── */
  .ulas-action-btn:active {
    transform:  scale(.98) !important;
    background: rgba(13,13,13,.08) !important;
    transition: transform  var(--mt-instant) var(--mt-ease-std),
                background var(--mt-instant) linear !important;
  }

  /* ── Nav tabs ── */
  .mnb-tab:active {
    transform:  scale(.92) !important;
    opacity:    .75 !important;
    transition: transform var(--mt-instant) var(--mt-ease-spring),
                opacity   var(--mt-instant) linear !important;
  }

  /* ── Section cards (pílulas) ── */
  #lePillsScrollHost .section-card:active,
  .sections-area .section-card:active {
    transform:  scale(.985) !important;
    transition: transform var(--mt-instant) var(--mt-ease-std) !important;
  }

  /* ── Botão voltar no preview ── */
  .le-pf-back:active {
    transform:  scale(.94) !important;
    transition: transform var(--mt-instant) var(--mt-ease-spring) !important;
  }

  /* ── Items de versão no dropdown do preview ── */
  .le-pf-drop-item:active,
  .le-version-item:active {
    background: rgba(13,13,13,.05) !important;
    transition: background var(--mt-instant) linear !important;
  }

  /* ── Chips wizard de curso ── */
  .cwm-pill:active,
  .cwm-price-chip:active {
    transform:  scale(.93) translateZ(0) !important;
    transition: transform var(--mt-instant) var(--mt-ease-spring) !important;
  }

  /* ── Lc-act (ações de swipe) ── */
  .le-lc-act:active {
    filter: brightness(1.15) !important;
    transition: filter var(--mt-instant) linear !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4. SCROLL — momentum nativo iOS, overscroll containment
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .le-pane-scroll,
  .le-pills-host,
  .le-versions-list,
  .le-sheet-body,
  .umm-sheet-body,
  #lePillsScrollHost,
  .sections-scroll-body,
  .kpab-settings,
  .cwm-content,
  #courseTemplateSelector {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y:      contain !important;
    scroll-behavior:            smooth !important;
  }

  /* Scrollbar completamente oculta */
  .le-pane-scroll::-webkit-scrollbar,
  .le-pills-host::-webkit-scrollbar,
  #lePillsScrollHost::-webkit-scrollbar,
  .sections-scroll-body::-webkit-scrollbar,
  .le-sheet-body::-webkit-scrollbar,
  .umm-sheet-body::-webkit-scrollbar,
  .kpab-settings::-webkit-scrollbar,
  .cwm-content::-webkit-scrollbar {
    display: none !important;
    width:   0    !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   5. BOTTOM SHEETS — abertura com curva decel (sente "real")
   Handle com feedback visual ao apertar.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Abertura: deceleration — pesado, real, como Google Pay */
  .le-sheet-bd.le-sheet-show .le-sheet,
  .le-versions-sheet-bd.le-vs-open .le-versions-sheet,
  .umm-sheet-bd.umm-sheet-show .umm-sheet {
    transition: transform var(--mt-slow) var(--mt-ease-decel) !important;
  }

  /* Backdrop: fade rápido */
  .le-sheet-bd,
  .le-versions-sheet-bd,
  .umm-sheet-bd,
  #umLevelActionSheet {
    transition: opacity var(--mt-fast) var(--mt-ease-std) !important;
  }

  /* Handle: cresce levemente ao apertar */
  .le-sheet-handle,
  .le-versions-sheet-handle,
  .umm-sheet-handle,
  .ulas-handle {
    cursor:     grab !important;
    transition: transform var(--mt-fast) var(--mt-ease-spring),
                opacity   var(--mt-fast) linear !important;
  }
  .le-sheet-handle:active,
  .le-versions-sheet-handle:active,
  .umm-sheet-handle:active,
  .ulas-handle:active {
    transform: scaleX(1.3) scaleY(1.5) !important;
    opacity:   .35 !important;
  }

  /* Section picker (abre como sheet) */
  #sectionPickerModal .modal-content {
    transition: transform var(--mt-slow) var(--mt-ease-decel) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   6. DROPDOWN DO SWITCHER — animação de abertura
   O JS apenas altera display: none/block.
   A animation CSS roda automaticamente quando o elemento é exibido.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .le-switcher-drop {
    transform-origin: top center;
    animation:        mt-drop-in var(--mt-fast) var(--mt-ease-out) both;
  }

  @keyframes mt-drop-in {
    from { opacity: 0; transform: scaleY(.92) translateY(-6px); }
    to   { opacity: 1; transform: scaleY(1)   translateY(0);    }
  }
}


/* ═══════════════════════════════════════════════════════════════
   7. BOTÃO "OCUPADO" — pulsa quando disabled durante operações
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  button:disabled,
  button[disabled] {
    transition:
      opacity    var(--mt-fast) var(--mt-ease-std),
      background var(--mt-fast) var(--mt-ease-std) !important;
    cursor: not-allowed !important;
  }

  /* Publicar: pulsa suavemente enquanto aguarda resposta */
  .le-btn-publish:disabled,
  .le-btn-publish[disabled] {
    animation: mt-btn-pulse 1.4s ease-in-out infinite !important;
  }

  @keyframes mt-btn-pulse {
    0%,100% { opacity: .40; }
    50%      { opacity: .60; }
  }
}


/* ═══════════════════════════════════════════════════════════════
   8. PREVIEW OVERLAY — fade de entrada
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  #lePreviewOverlay.le-preview-overlay-visible {
    animation: mt-preview-in var(--mt-normal) var(--mt-ease-out) both !important;
  }

  @keyframes mt-preview-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}


/* ═══════════════════════════════════════════════════════════════
   9. MOBILE NAV BAR — spring nos level chips ao ativar
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Chip ativo: spring de escala */
  .mnb-tw-active .mnb-tab {
    transition:
      background  var(--mt-fast)   var(--mt-ease-std),
      color       var(--mt-fast)   var(--mt-ease-std),
      transform   var(--mt-normal) var(--mt-ease-spring),
      box-shadow  var(--mt-fast)   var(--mt-ease-std) !important;
  }

  /* Ícone do chip: escala ao ativar */
  .mnb-tab-icon {
    display:    inline-block;
    transition: transform var(--mt-normal) var(--mt-ease-spring) !important;
  }
  .mnb-tw-active .mnb-tab-icon {
    transform: scale(1.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   10. GPU LAYER DO SKELETON
   Forcas o skeleton para a propria camada do compositor GPU.
   Sem isso, em alguns frames o browser pode compositar o conteudo
   por baixo antes de pintar o overlay, causando a piscada.

   NAO usar animation de opacity em .sections-scroll-body nem em
   .le-pane.le-pane-active: qualquer opacity < 1 num elemento pai
   quebra backdrop-filter em todos os filhos (spec CSS). Isso fazia
   os section cards perderem o efeito glass.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Skeleton mobile: camada GPU dedicada garante que fica sempre
     sobre o conteudo durante o fade-out, sem depender de z-index puro. */
  .editor-skeleton--mobile {
    will-change: opacity;
    transform: translateZ(0);
  }

  /* Skeleton inline de pilulas: saida com fade */
  #le-pills-skeleton {
    transition: opacity var(--mt-fast, 120ms) var(--mt-ease-std, cubic-bezier(.4,0,.2,1));
  }
}


/* ═══════════════════════════════════════════════════════════════
  11. REDUÇÃO DE MOVIMENTO — a11y obrigatório
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:  10ms !important;
    animation-delay:     0ms  !important;
    transition-duration: 10ms !important;
  }
}