/* =========================================================
   FolhaTools – camada visual moderna (3D, vidro e movimento)
   Só muda a aparência: não altera tamanhos nem o funcionamento.
   ========================================================= */
@property --fx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --fx-verde: #22c55e;
  --fx-verde2: #16a34a;
  --fx-agua: #2dd4bf;
  --fx-claro: #bbf7d0;
  --fx-grad: linear-gradient(135deg, #4ade80 0%, #22c55e 45%, #14b8a6 100%);
  --fx-relevo: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.22);
  --fx-sombra: 0 10px 22px -10px rgba(0,0,0,.65), 0 2px 5px rgba(0,0,0,.28);
  --fx-brilho: 0 16px 34px -12px color-mix(in srgb, var(--fx-verde) 60%, transparent);
  --fx-mola: cubic-bezier(.2, .9, .25, 1.2);
}

/* transição suave entre páginas (navegadores novos) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

html { scrollbar-color: #22c55e rgba(255,255,255,.04); }
::selection { background: color-mix(in srgb, var(--fx-verde) 45%, transparent); color: #fff; }

/* ---------- logo da folha balançando no topo ---------- */
@keyframes fx-folha {
  0%, 100% { rotate: -4deg; translate: 0 0; }
  50%      { rotate: 4deg;  translate: 0 -2px; }
}
img.brand-logo-img, img[src^="logo.png"], img[src^="/logo.png"] {
  animation: fx-folha 5s ease-in-out infinite;
  transform-origin: 30% 90%;
  filter: drop-shadow(0 6px 10px rgba(34,197,94,.35)) drop-shadow(0 2px 2px rgba(0,0,0,.4));
  object-fit: contain !important;
}

/* ---------- botões principais em 3D ---------- */
:is(.btn, .btn-tool, .btn-primary, .btn-acao, .export-btn, .btn-painel, .btn-traduzir, .btn-ouvir) {
  transition: translate .2s var(--fx-mola), scale .2s var(--fx-mola), box-shadow .25s ease, filter .25s ease, background-color .25s ease !important;
  box-shadow: var(--fx-relevo), var(--fx-sombra);
  -webkit-tap-highlight-color: transparent;
}
:is(.btn, .btn-tool, .btn-primary, .btn-acao, .export-btn, .btn-painel, .btn-traduzir, .btn-ouvir):not(:disabled):hover {
  translate: 0 -2px;
  box-shadow: var(--fx-relevo), var(--fx-brilho), 0 3px 6px rgba(0,0,0,.3);
  filter: brightness(1.08) saturate(1.1);
}
:is(.btn, .btn-tool, .btn-primary, .btn-acao, .export-btn, .btn-painel, .btn-traduzir, .btn-ouvir):not(:disabled):active {
  translate: 0 1px; scale: .98;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
}
:is(button, .btn, a.btn):focus-visible { outline: 2px solid var(--fx-agua) !important; outline-offset: 3px; }
:is(.btn, button):disabled { filter: grayscale(.4) brightness(.85); cursor: not-allowed; }

/* botões pequenos, de barra e abas: só o “levanta e afunda” */
:is(.btn-mini, .toolbar-btn, .aba-btn, .tab-btn, .aba, .m-aba, .abaC, .bg-btn, .fill-btn, .btn-secondary, .btn-controls button) {
  transition: translate .18s var(--fx-mola), box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important;
}
:is(.btn-mini, .toolbar-btn, .aba-btn, .tab-btn, .aba, .m-aba, .abaC, .bg-btn, .fill-btn, .btn-secondary):not(:disabled):hover { translate: 0 -1px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
:is(.btn-mini, .toolbar-btn, .aba-btn, .tab-btn, .aba, .m-aba, .abaC, .bg-btn, .fill-btn, .btn-secondary):not(:disabled):active { translate: 0 1px; }

/* botão voltar: vidro discreto */
.btn-voltar { transition: translate .2s var(--fx-mola), color .2s, background-color .2s !important; }
.btn-voltar:hover { translate: -3px 0; }

/* efeito de onda ao clicar (criado pelo folha-3d.js) */
.fx-onda {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 70%);
  translate: -50% -50%; scale: 0; animation: fx-onda .6s ease-out forwards;
}
@keyframes fx-onda { to { scale: 1; opacity: 0; } }

/* =========================================================
   PÁGINA INICIAL
   ========================================================= */

/* área de soltar arquivo */
#solte {
  border-color: rgba(74,222,128,.55) !important;
  background: radial-gradient(120% 140% at 50% 0%, rgba(34,197,94,.12), rgba(15,23,42,.25) 70%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 50px -30px rgba(34,197,94,.55);
  transition: translate .3s var(--fx-mola), box-shadow .3s, border-color .3s !important;
}
#solte:hover, #solte.sobre, #solte.arrastando {
  translate: 0 -3px;
  border-color: #4ade80 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -28px rgba(34,197,94,.75);
}
#solte .ic { color: #4ade80 !important; display: inline-block; animation: fx-flutua 3s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(34,197,94,.45)); }
@keyframes fx-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* busca */
.busca-home input { transition: box-shadow .25s, border-color .25s !important; }
.busca-home input:focus { outline: none; border-color: #4ade80 !important; box-shadow: 0 0 0 4px rgba(34,197,94,.18), 0 14px 30px -18px rgba(34,197,94,.7) !important; }

/* selos e contadores: vidro com relevo */
:is(.selos span, .uso-contador > span) {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px -10px rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
}
.selos span i, .uso-contador i { color: #4ade80 !important; }

/* botões do topo e abas de categoria: pílulas 3D */
:is(.acoes-hero button, .abas button) {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(74,222,128,.35) !important;
  color: #dcfce7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -12px rgba(0,0,0,.8);
  transition: translate .2s var(--fx-mola), box-shadow .25s, background .25s, border-color .25s !important;
  position: relative; overflow: hidden;
}
:is(.acoes-hero button, .abas button):hover {
  translate: 0 -2px; border-color: #4ade80 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 26px -12px rgba(34,197,94,.65);
}
.abas button.ativa {
  background: var(--fx-grad) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: var(--fx-relevo), 0 12px 24px -10px rgba(34,197,94,.7);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* ---------- cartões das ferramentas: inclinação 3D + luz que segue o mouse ---------- */
:is(.card, .exc, .yt-card) {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) !important;
  transition: transform .35s ease, translate .35s var(--fx-mola), box-shadow .35s ease, border-color .35s ease, background .35s ease !important;
  will-change: transform;
}
:is(.card, .exc, .yt-card):hover { translate: 0 -6px; }
:is(.card, .exc, .yt-card).fx-movendo { transition: transform .08s linear, translate .35s var(--fx-mola), box-shadow .35s ease, border-color .35s ease !important; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -28px rgba(0,0,0,.9);
}
.card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -24px rgba(34,197,94,.55) !important; }
/* luz que acompanha o mouse */
.card::after, .exc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(74,222,128,.16), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.exc { position: relative; }
:is(.card, .exc):hover::after { opacity: 1; }

/* contorno animado girando nos destaques "Só no FolhaTools" */
.exc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--fx-ang), transparent 0 55%, #4ade80 70%, #2dd4bf 80%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.exc:hover::before { opacity: 1; animation: fx-gira 2.4s linear infinite; }
@keyframes fx-gira { to { --fx-ang: 360deg; } }
.exc:hover { border-color: transparent !important; box-shadow: 0 26px 50px -24px rgba(34,197,94,.6) !important; }

/* ícones dos cartões: “bolha” 3D com brilho */
.card-icon {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(0,0,0,.28), 0 12px 22px -10px rgba(20,184,166,.7), 0 3px 6px rgba(0,0,0,.35) !important;
  transition: translate .35s var(--fx-mola), rotate .35s var(--fx-mola), scale .35s var(--fx-mola), box-shadow .35s !important;
}
.card-icon svg { filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.card:hover .card-icon {
  transform: none !important; translate: 0 -4px; rotate: -5deg; scale: 1.08;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.25), 0 18px 30px -10px rgba(34,197,94,.8), 0 4px 8px rgba(0,0,0,.35) !important;
}

/* botão de cada cartão: vidro verde que acende no hover */
.card .btn {
  background: linear-gradient(180deg, rgba(34,197,94,.22), rgba(22,163,74,.10)) !important;
  color: #bbf7d0 !important; border: 1px solid rgba(74,222,128,.35) !important;
  position: relative; overflow: hidden;
}
.card:hover .btn { background: var(--fx-grad) !important; color: #fff !important; border-color: transparent !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* reflexo passando no botão */
.card .btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  translate: 0 0; opacity: 0;
}
.card:hover .btn::after { animation: fx-reflexo .9s ease forwards; }
@keyframes fx-reflexo { from { translate: 0 0; opacity: 1; } to { translate: 420% 0; opacity: 0; } }

/* cartões aparecendo ao rolar a página (sem JavaScript) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.card, .exc) {
      animation: fx-surge linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    @keyframes fx-surge { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
  }
}

/* quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  :is(.card, .exc, .yt-card) { transform: none !important; }
}

/* =========================================================
   PÁGINAS DAS FERRAMENTAS
   ========================================================= */
/* áreas de escolher/soltar arquivo: verde com relevo */
:is(.zona, .upload-area, .envio, label[for][style*="dashed"]) {
  border-color: rgba(74,222,128,.55) !important;
  background: radial-gradient(120% 160% at 50% 0%, rgba(34,197,94,.10), rgba(15,23,42,.20) 70%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -28px rgba(34,197,94,.55);
  transition: translate .3s var(--fx-mola), box-shadow .3s, border-color .3s !important;
}
:is(.zona, .upload-area, .envio, label[for][style*="dashed"]):hover {
  translate: 0 -2px; border-color: #4ade80 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 48px -26px rgba(34,197,94,.75);
}
:is(.zona, .upload-area, .envio, label[for][style*="dashed"]) i[class^="ph"] { color: #4ade80; }

/* caixas de "passo a passo" */
.passos li { background: rgba(34,197,94,.06) !important; border-left-color: #22c55e !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

/* área principal da ferramenta: vidro com profundidade */
.tool-container { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -40px rgba(0,0,0,.9); }