/* =========================================================
   DOM Efeitos — transição entre páginas + animações de entrada
   ========================================================= */
:root {
  --dfx-orange: #FF6700;
  --dfx-ink: #000000;
  --dfx-ease: cubic-bezier(0.76, 0, 0.24, 1);      /* cortina */
  --dfx-soft: cubic-bezier(0.2, 0.7, 0.2, 1);      /* entradas */
  --dfx-draw: cubic-bezier(0.65, 0, 0.25, 1);      /* linhas */
}
html.dss-on { scroll-behavior: auto !important; }

/* ---------- cortina (entrada e saída de página) ---------- */
.dfx-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--dfx-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  /* segurança: se o JavaScript não rodar, a cortina sai sozinha */
  animation: dfx-safety 0.8s var(--dfx-ease) 2.6s forwards;
}
.dfx-curtain__mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dfx-ink);
  transform: scale(1);
  animation: dfx-pulse 0.9s ease-in-out infinite alternate;
}
html.dfx-ready .dfx-curtain {
  animation: none;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.85s var(--dfx-ease);
}
html.dfx-ready .dfx-curtain__mark { opacity: 0; transition: opacity 0.25s ease; }
/* saída: a cortina entra por baixo e cobre a tela antes de trocar de página */
html.dfx-prep .dfx-curtain {
  animation: none;
  transition: none;
  transform: translate3d(0, 100%, 0);
}
html.dfx-prep.dfx-leaving .dfx-curtain {
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s var(--dfx-ease);
}
html.dfx-no-curtain .dfx-curtain { display: none; }
@keyframes dfx-safety { to { transform: translate3d(0, -100%, 0); visibility: hidden; } }
@keyframes dfx-pulse { from { transform: scale(0.6); opacity: 0.5; } to { transform: scale(1.3); opacity: 1; } }

/* durante a preparação, nada anima (aplica o estado inicial sem "piscar") */
html.dfx-setup .dfx-letters .dg-letra, html.dfx-setup .dfx-rise, html.dfx-setup .dfx-fade,
html.dfx-setup .dfx-img, html.dfx-setup .dfx-img img, html.dfx-setup .dfx-line { transition: none !important; }

/* ---------- letras dos títulos grandes (onda suave) ---------- */
.dfx-letters .dg-palavra { display: inline-block; white-space: nowrap; }
.dfx-letters .dg-letra {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  filter: blur(6px);
  animation: none !important;
  transition: opacity 0.8s var(--dfx-soft), transform 0.9s var(--dfx-soft), filter 0.8s var(--dfx-soft);
  transition-delay: calc(var(--dfx-d, 0ms) + var(--i, 0) * var(--dfx-ls, 38ms));
}
.dfx-letters.dfx-in .dg-letra { opacity: 1; transform: none; filter: none; }

/* ---------- textos, botões, listas: sobem saindo do desfoque ---------- */
.dfx-rise {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(5px);
  transition: opacity 0.9s var(--dfx-soft), transform 1s var(--dfx-soft), filter 0.9s var(--dfx-soft);
  transition-delay: var(--dfx-d, 0ms);
}
.dfx-rise.dfx-in { opacity: 1; transform: none; filter: none; }

/* elementos que já têm transformação própria: só aparecem (sem mexer na posição) */
.dfx-fade {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 0.9s var(--dfx-soft), filter 0.9s var(--dfx-soft);
  transition-delay: var(--dfx-d, 0ms);
}
.dfx-fade.dfx-in { opacity: 1; filter: none; }

/* ---------- imagens: abrem como uma cortina de baixo para cima ---------- */
.dfx-img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--dfx-draw);
  transition-delay: var(--dfx-d, 0ms);
}
.dfx-img img { transform: scale(1.12); transition: transform 1.5s var(--dfx-soft); transition-delay: var(--dfx-d, 0ms); }
.dfx-img.dfx-in { clip-path: inset(0 0 0 0); }
.dfx-img.dfx-in img { transform: none; }

/* ---------- linhas (bordas) desenhadas do meio para as pontas ---------- */
.dfx-line {
  --dfx-p: 0%;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  background-image: linear-gradient(var(--dfx-c, currentColor), var(--dfx-c, currentColor)),
                    linear-gradient(var(--dfx-c, currentColor), var(--dfx-c, currentColor)) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-position: 50% 0, 50% 100% !important;
  background-size: var(--dfx-p) var(--dfx-th, 0px), var(--dfx-p) var(--dfx-bh, 0px) !important;
  transition: background-size 1.1s var(--dfx-draw) var(--dfx-d, 0ms) !important;
}
.dfx-line.dfx-in { --dfx-p: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dfx-curtain { display: none !important; }
  .dfx-letters .dg-letra, .dfx-rise, .dfx-fade, .dfx-img, .dfx-img img {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important;
  }
  .dfx-line { background-size: 100% var(--dfx-th, 0px), 100% var(--dfx-bh, 0px) !important; transition: none !important; }
}