/* =====================================================================
   Camada "premium" — profundidade, luz, textura e movimento.
   Carregada DEPOIS do site.css; usa as variáveis do tema (--deep, --gold,
   --sand, --card) para não brigar com o design system existente.

   Princípio: numa decisão cara e com medo envolvido, o site precisa parecer
   caro e seguro. Bloco de cor chapado e foto encaixotada comunicam o oposto.
   Todo efeito respeita prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. Textura: grão sutil tira o aspecto "chapado" do digital ---------- */
.fx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 2. Luz: brilho dourado que dá volume ao fundo escuro ---------- */
.fx-glow {
  position: relative;
}
.fx-glow::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -20%;
  right: -10%;
  width: 70%;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in oklch, var(--gold) 22%, transparent) 0%, transparent 62%);
  filter: blur(24px);
}

/* ---------- 3. A foto sem caixa: a borda dura é o que mais "empobrece" ---------- */
/* Dissolve a imagem no fundo em vez de cortá-la num retângulo. */
.fx-fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
}
.fx-fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.fx-fade-both {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 100%),
                      linear-gradient(to bottom, #000 62%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 100%),
              linear-gradient(to bottom, #000 62%, transparent 98%);
  mask-composite: intersect;
}

/* ---------- 4. Cartão de credencial sobreposto à foto ---------- */
.fx-cartao {
  background: color-mix(in oklch, var(--deep) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklch, var(--gold) 35%, transparent);
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / 0.9);
}

/* ---------- 5. Entrada por scroll: conteúdo chega, não aparece de repente ---------- */
.fx-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fx-reveal.fx-visivel {
  opacity: 1;
  transform: none;
}
/* Escalonamento: a sequência cria ritmo, tudo junto vira "pisca". */
.fx-reveal[data-atraso="1"] { transition-delay: 0.08s; }
.fx-reveal[data-atraso="2"] { transition-delay: 0.16s; }
.fx-reveal[data-atraso="3"] { transition-delay: 0.24s; }
.fx-reveal[data-atraso="4"] { transition-delay: 0.32s; }
.fx-reveal[data-atraso="5"] { transition-delay: 0.40s; }

/* ---------- 6. Cartões com profundidade e resposta ao toque ---------- */
.fx-card {
  position: relative;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}
.fx-card::after {               /* filete dourado que acende na interação */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in oklch, var(--gold) 18%, transparent), transparent 55%);
  transition: opacity 0.45s ease;
}
.fx-card:hover,
.fx-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -34px color-mix(in oklch, var(--deep) 60%, transparent);
  border-color: color-mix(in oklch, var(--gold) 55%, transparent);
}
.fx-card:hover::after,
.fx-card:focus-within::after { opacity: 1; }

/* Imagem dentro do cartão respira no hover. */
.fx-zoom { overflow: hidden; }
.fx-zoom img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-card:hover .fx-zoom img,
.fx-zoom:hover img { transform: scale(1.055); }

/* ---------- 7. Transição entre faixas: fim do bloco de cor cortado a faca ---------- */
.fx-emenda-topo { position: relative; }
.fx-emenda-topo::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 7rem;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--deep) 100%, transparent), transparent);
}
.fx-emenda-claro::before {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--card) 100%, transparent), transparent);
}

/* ---------- 8. Número que conta: prova social com peso ---------- */
.fx-numero {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- 9. Cabeçalho que encolhe: devolve área de leitura ao rolar ---------- */
.fx-topo {
  transition: padding 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
.fx-topo.fx-compacto {
  box-shadow: 0 10px 40px -24px rgb(0 0 0 / 0.8);
  background: color-mix(in oklch, var(--deep) 92%, transparent);
}

/* ---------- 10. Botão com varredura de luz: convida ao clique ---------- */
.fx-brilho {
  position: relative;
  overflow: hidden;
}
.fx-brilho::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.28), transparent);
}
.fx-brilho:hover::before { animation: fx-varredura 0.9s ease; }
@keyframes fx-varredura {
  to { left: 140%; }
}

/* ---------- 11. Linha dourada que se desenha sob o título ---------- */
.fx-regua {
  position: relative;
  padding-bottom: 1.1rem;
}
.fx-regua::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.fx-visivel.fx-regua::after,
.fx-visivel .fx-regua::after { width: 5.5rem; }

/* ---------- 12. Respeito a quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fx-card, .fx-zoom img, .fx-topo { transition: none; }
  .fx-brilho:hover::before { animation: none; }
  .fx-regua::after { transition: none; width: 5.5rem; }
  [data-parallax] { transform: none !important; }
}

/* ---- Portão 18+ para imagem de área íntima ----
   O borrão real vem do arquivo servido; estas regras só cuidam da tampa e da transição. */
.costi-18__borrado { filter: blur(2px); }          /* reforço visual; a proteção é o arquivo */
.costi-18__tampa {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  background: color-mix(in oklch, var(--deep) 72%, transparent);
  backdrop-filter: blur(6px);
}
.costi-18__texto {
  margin: 0;
  max-width: 17rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #fff;
}
.costi-18__botao {
  padding: 0.6rem 1.1rem;
  border: 1px solid color-mix(in oklch, var(--gold) 60%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.costi-18__botao:hover { background: var(--gold); color: var(--deep); }
.costi-18--aberto img { transition: filter 0.5s ease; }

/* Botão "ver mais" das listas longas no celular. */
.fx-vermais {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in oklch, var(--deep) 25%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--deep);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.fx-vermais:hover { background: color-mix(in oklch, var(--deep) 6%, transparent); }