/* ==========================================================================
   Colorê — movimento: tinta, pinceladas e revelações
   Só animamos transform/translate, opacity, clip-path, mask e stroke-dashoffset.
   ========================================================================== */

:root {
  /* Pincelada que passa da esquerda para a direita (máscara 3x a largura do bloco:
     1/3 opaco, 1/3 borda de pincel, 1/3 transparente) */
  --mascara-pincel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H112C121 9 106 17 117 27S106 43 121 53S108 69 119 79S110 93 114 100H0Z'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath stroke-width='7' d='M110 9H146M114 37H168M112 63H140M108 90H156'/%3E%3Cpath stroke-width='3' opacity='.55' d='M118 21H180M120 48H196M116 74H172M112 97H148'/%3E%3C/g%3E%3C/svg%3E");
  /* Mancha de tinta com borda irregular (troca de tema e abertura da galeria) */
  --mascara-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M95 50.6C94.9 56.8 89.6 64.5 86.8 70.7C84 76.9 83.4 84.3 78.2 87.7C73.1 91.1 62.5 90.1 55.9 91.1C49.3 92.1 44.6 94.1 38.7 93.5C32.7 92.8 24.9 91.4 20.2 87.3C15.6 83.1 13.2 75.6 10.6 68.7C8.1 61.8 5 51.9 5.1 46C5.2 40.1 7.7 37.7 11 33.1C14.3 28.5 19.8 23.1 24.8 18.4C29.7 13.7 34.9 7.4 40.8 5.1C46.6 2.7 53.1 2.2 59.7 4.3C66.4 6.4 75.9 12.9 80.6 17.8C85.2 22.6 85.1 28.1 87.5 33.6C89.9 39.1 95.2 44.4 95 50.6Z'/%3E%3C/svg%3E");
}

html {
  scroll-behavior: smooth;
}

/* ---------- Keyframes ---------- */
@keyframes gota-espalha {
  0% { transform: scale(0) rotate(-25deg); opacity: 0.24; }
  55% { opacity: 0.18; }
  100% { transform: scale(1) rotate(18deg); opacity: 0; }
}

@keyframes veu-entra { from { opacity: 0; } }
@keyframes veu-sai { to { opacity: 0; } }

@keyframes veu-sobe {
  to { transform: translateY(calc(-100% - 44px)); }
}

@keyframes pinta {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@keyframes fab-gota {
  0% { opacity: 0.5; transform: scale(1) rotate(0deg); }
  14% { opacity: 0; transform: scale(1.8) rotate(16deg); }
  100% { opacity: 0; transform: scale(1.8) rotate(16deg); }
}

@keyframes brilho {
  to { transform: translateX(100%); }
}

@keyframes flutua-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-4%, 5%) rotate(9deg); }
}

@keyframes flutua-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(5%, -4%) rotate(-11deg) scale(1.05); }
}

@keyframes respira {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(7deg); }
}

@keyframes redesenha {
  from { stroke-dashoffset: calc(var(--len, 0) * 1.02); }
  to { stroke-dashoffset: 0; }
}

/* ---------- Manchas de fundo: só se movem com a seção visível e a aba ativa ---------- */
.mancha {
  animation: flutua-1 28s ease-in-out infinite;
  animation-play-state: paused;
}

.mancha--2 {
  animation-name: flutua-2;
  animation-duration: 34s;
}

.mancha--3 {
  animation-duration: 22s;
  animation-direction: reverse;
}

.is-visivel .mancha {
  animation-play-state: running;
}

html.aba-oculta .mancha,
html.aba-oculta .fab::before {
  animation-play-state: paused;
}

/* ---------- Revelação de seção por pincelada ---------- */
.js [data-reveal] {
  -webkit-mask-image: var(--mascara-pincel);
  mask-image: var(--mascara-pincel);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  translate: 0 18px;
  transition:
    -webkit-mask-position 1050ms var(--ease) var(--d, 0ms),
    mask-position 1050ms var(--ease) var(--d, 0ms),
    translate 900ms var(--ease) var(--d, 0ms);
}

.js [data-reveal].is-in {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  translate: none;
}

/* Depois de revelado, a máscara sai (para não cortar sombras) */
.js [data-reveal].is-revelado {
  -webkit-mask-image: none;
  mask-image: none;
}

@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .js [data-reveal] {
    opacity: 0;
    transition: opacity 600ms ease var(--d, 0ms), translate 700ms var(--ease) var(--d, 0ms);
  }

  .js [data-reveal].is-in {
    opacity: 1;
  }
}

/* Pincelada sob os títulos */
.js .brush {
  stroke-dashoffset: 1.02;
  transition: stroke-dashoffset 1000ms var(--ease) calc(var(--d, 0ms) + 380ms);
}

.js .is-in .brush {
  stroke-dashoffset: 0;
}

/* Ícones dos departamentos: o traço se desenha como pincel.
   app.js mede cada traço e define --len e stroke-dasharray. */
.js .dept__icone > * {
  stroke-dashoffset: calc(var(--len, 0) * 1.02);
  transition: stroke-dashoffset 1200ms var(--ease) calc(var(--d, 0ms) + 260ms);
}

.js .is-in .dept__icone > * {
  stroke-dashoffset: 0;
}

.dept:hover .dept__icone > *,
.dept:focus-visible .dept__icone > * {
  animation: redesenha 900ms var(--ease) both;
}

.dept:hover .dept__mancha,
.dept:focus-visible .dept__mancha {
  animation: respira 2.6s ease-in-out infinite;
}

/* ---------- Troca de tema em forma de mancha de tinta (View Transitions) ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  -webkit-mask-image: var(--mascara-tinta);
  mask-image: var(--mascara-tinta);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0 0;
  mask-size: 0 0;
}

/* Sem View Transitions: transição simples de cor */
html.tema-trocando,
html.tema-trocando body,
html.tema-trocando .topbar,
html.tema-trocando .dept,
html.tema-trocando .loc__card,
html.tema-trocando .contato__item,
html.tema-trocando .rodape {
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, border-color 300ms ease !important;
}

/* ---------- Movimento reduzido: só fades curtos, nada flutuando ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .js [data-reveal] {
    -webkit-mask-image: none;
    mask-image: none;
    translate: none;
    opacity: 0;
    transition: opacity 220ms ease !important;
  }

  .js [data-reveal].is-in {
    opacity: 1;
  }

  .js .brush,
  .js .dept__icone > * {
    stroke-dashoffset: 0;
  }

  .prefs__tinta,
  .prefs.is-open .prefs__tinta {
    clip-path: none;
  }

  .prefs__painel {
    opacity: 0;
    transition: opacity 160ms ease, visibility 0s linear 160ms !important;
  }

  .prefs.is-open .prefs__painel {
    opacity: 1;
    transition: opacity 160ms ease !important;
  }

  .toast,
  .fab {
    transition-duration: 180ms !important;
  }

  .preloader {
    display: none !important;
  }
}