/* =============================================================================
   Trampo Pró — UI Effects (estilos)
   Camada de efeitos visuais reutilizável, carregada em todas as páginas.
   Trabalha em conjunto com assets/js/ui.js
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Scroll reveal genérico — qualquer elemento com .reveal ou [data-reveal]
   começa invisível/deslocado e "aparece" quando entra na viewport.
   --------------------------------------------------------------------------- */
.reveal,
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}
.reveal.shown,
[data-reveal].shown {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Ripple — feedback de clique em botões.
   O JS injeta um <span class="tp-ripple"> dentro do elemento clicado.
   --------------------------------------------------------------------------- */
.tp-ripple-host {
  position: relative;
  overflow: hidden;
}
.tp-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, .16);
  mix-blend-mode: multiply;
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  animation: tp-ripple-anim .55s ease-out forwards;
}
@keyframes tp-ripple-anim {
  to { transform: scale(1); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Foco em campos de formulário — anel de destaque na cor da marca.
   --------------------------------------------------------------------------- */
.tp-field {
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-field:focus {
  outline: none !important;
  border-color: #3498DB !important;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, .16) !important;
}

/* ---------------------------------------------------------------------------
   Botão com estado de carregamento.
   --------------------------------------------------------------------------- */
.tp-loading {
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.tp-loading .tp-loading-label {
  visibility: hidden;
}
.tp-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tp-spin .6s linear infinite;
}
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Tooltip simples via atributo data-tooltip (sem dependências).
   --------------------------------------------------------------------------- */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1c2030;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1000;
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent;
  border-top-color: #1c2030;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1000;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------------------
   Indicador "copiado!" flutuante.
   --------------------------------------------------------------------------- */
.tp-copied-flash {
  position: absolute;
  background: #3498DB;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -6px);
  animation: tp-copied .9s ease forwards;
  z-index: 1100;
}
@keyframes tp-copied {
  0%   { opacity: 0; transform: translate(-50%, 2px); }
  20%  { opacity: 1; transform: translate(-50%, -6px); }
  80%  { opacity: 1; transform: translate(-50%, -6px); }
  100% { opacity: 0; transform: translate(-50%, -12px); }
}

/* ---------------------------------------------------------------------------
   Botão "voltar ao topo".
   --------------------------------------------------------------------------- */
.tp-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #3498DB;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(52, 152, 219, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
  z-index: 999;
}
.tp-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tp-to-top:hover {
  background: #2980B9;
}
.tp-to-top svg {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------------------------
   Toast genérico (assets/js/ui.js → tpToast()).
   Independente dos toasts já existentes nas páginas internas.
   --------------------------------------------------------------------------- */
#tp-toast-stack {
  position: fixed;
  bottom: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1200;
  pointer-events: none;
}
.tp-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1c2030;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  max-width: 320px;
}
.tp-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.tp-toast.tp-toast-success { background: #1f7a4d; }
.tp-toast.tp-toast-error   { background: #b3261e; }
.tp-toast.tp-toast-info    { background: #2980B9; }

/* ---------------------------------------------------------------------------
   Fade-in suave da página ao carregar.
   --------------------------------------------------------------------------- */
body.tp-ready {
  animation: tp-fade-in .35s ease both;
}
@keyframes tp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Utilidades de cor personalizadas — complementam o tailwind.min.css estático
   (o build pré-compilado não inclui classes baseadas em variáveis CSS customizadas)
   --------------------------------------------------------------------------- */
.bg-ink         { background-color: #0d0f14; }
.bg-panel       { background-color: #151820; }
.bg-card        { background-color: #1c2030; }
.bg-accent-soft { background-color: #1A3C55; }
.text-muted     { color: #6b7494; }
.text-light     { color: #e8eaf2; }
.text-accent    { color: #2563EB; }
.text-emerald   { color: #00d97e; }
.text-amber     { color: #f5a623; }
.text-rose      { color: #ff4d6d; }
.border-border  { border-color: #252a3a; }