/* ==========================================================
   Profundidade (efeito 3D sutil) · Lucas Souza
   Ativado só quando o JS marca html.fx3d (sem JS ou com
   "reduzir movimento" o site fica exatamente como antes).
   ========================================================== */

/* Retrato do hero: inclina com o mouse, legenda flutua à frente */
.fx3d .hero-figure { perspective: 1100px; }
.fx3d .tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-expo, cubic-bezier(.16, 1, .3, 1));
  will-change: transform;
}
.fx3d .tilt picture { display: block; transform: translateZ(0); }
.fx3d .tilt .hero-photo {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 18px 30px -10px rgba(0, 0, 0, .35), 0 50px 80px -30px rgba(0, 0, 0, .55);
}
.fx3d .tilt .hero-caption { transform: translateZ(60px); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); }
.fx3d .tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .22), transparent 55%);
  opacity: var(--go, 0); transition: opacity .4s; transform: translateZ(1px);
}
.fx3d .hero-grid > div:first-child { transition: transform 0.6s var(--ease-expo, cubic-bezier(.16, 1, .3, 1)); }

/* Cards: inclinação com brilho e camadas */
.fx3d .card, .fx3d .fact-card { transform-style: preserve-3d; }
.fx3d .card.tilting, .fx3d .fact-card.tilting { transition: transform .12s linear, box-shadow .3s; }
/* só depois do primeiro hover, para não atrapalhar a entrada (fade-up) */
.fx3d .card.tilt-ready:not(.tilting), .fx3d .fact-card.tilt-ready:not(.tilting) { transition-delay: 0s; transition: transform .6s var(--ease-expo, cubic-bezier(.16, 1, .3, 1)), box-shadow .4s, border-color .4s; }
.fx3d .card.tilting { box-shadow: 0 2px 4px rgba(46, 70, 102, .06), 0 30px 50px -22px rgba(46, 70, 102, .38); }
.fx3d .post-thumb-wrap { transform: translateZ(28px); }
.fx3d .post-body { transform: translateZ(18px); }
.fx3d .glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 50%);
  opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
}
.fx3d .tilting .glare { opacity: 1; }

/* Botão principal com volume */
.fx3d .btn-primary {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 4px 0 rgba(20, 33, 52, .28), 0 12px 24px -10px rgba(20, 33, 52, .45);
}
.fx3d .btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(20, 33, 52, .28), 0 6px 14px -8px rgba(20, 33, 52, .45);
}