/* =========================================================
   Logon Sistemas  /  shapes.css
   Recortes orgânicos nas fotos e divisores de seção em SVG
   ========================================================= */

.shape-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================ foto com recorte orgânico */
.ph {
  position: relative;
  display: block;
  margin: 0;
  isolation: isolate;
  aspect-ratio: var(--ratio, 4 / 3);
}

.ph-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  /* o recorte entra aqui, nunca no .ph, para o halo ficar de fora */
  clip-path: var(--recorte, none);
  -webkit-clip-path: var(--recorte, none);
  transition: transform 0.9s var(--ease);
}

.ph-media img,
.ph-media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph:hover .ph-media { transform: scale(1.03); }

/* brilho atrás do recorte, faz a foto nascer do fundo em vez de flutuar */
.ph-halo {
  position: absolute;
  inset: -8% 0 -10% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(44, 123, 242, 0.34), transparent 72%);
  filter: blur(42px);
  pointer-events: none;
}

.dark .ph-halo { background: radial-gradient(closest-side, rgba(97, 160, 255, 0.4), transparent 70%); }

/* variantes de forma */
.ph--wave   { --recorte: url(#sh-wave);  --ratio: 4 / 5; }
.ph--wavex  { --recorte: url(#sh-wavex); --ratio: 16 / 10; }
.ph--blob   { --recorte: url(#sh-blob);  --ratio: 1 / 1; }
.ph--blob2  { --recorte: url(#sh-blob2); --ratio: 1 / 1; }
.ph--arch   { --recorte: url(#sh-arch);  --ratio: 4 / 5; }
.ph--tri    { --recorte: url(#sh-tri);   --ratio: 1 / 1; }
.ph--leaf   { --recorte: url(#sh-leaf);  --ratio: 5 / 4; }
.ph--petal  { --recorte: url(#sh-petal); --ratio: 1 / 1; }
.ph--rasgo  { --recorte: url(#sh-rasgo); --ratio: 1 / 1; }

/* moldura opcional acompanhando a forma */
.ph--linha .ph-media { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }

/* deixa a foto invadir o texto ao lado, integrando as duas colunas */
.ph--sangra { margin-inline: -6%; }

@media (max-width: 980px) {
  .ph--sangra { margin-inline: 0; }
}

/* pontilhado decorativo atrás da foto */
/* O pontilhado sangra só para baixo. Com recuo negativo à direita ele
   estourava a largura do documento sempre que a foto caía na coluna direita.
   Como a foto já é recortada por uma forma orgânica, a caixa dela é mais larga
   que os pixels visíveis e o efeito de "sair da foto" continua igual. */
.ph--pontos::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 -9% auto;
  width: 42%;
  aspect-ratio: 1;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  color: var(--brand-300);
  opacity: 0.45;
  pointer-events: none;
}

.dark .ph--pontos::before { color: var(--brand-400); opacity: 0.5; }

/* No celular o halo também entra para dentro. */
@media (max-width: 980px) {
  .ph--pontos::before { width: 34%; bottom: -5%; }
  .ph-halo { inset: -6% 0 -8% 0; }
}

/* véu e canvas da revelação por partículas */
.ph-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: var(--recorte, none);
  -webkit-clip-path: var(--recorte, none);
  pointer-events: none;
  transition: opacity 0.55s var(--ease-soft);
}

.ph-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  clip-path: var(--recorte, none);
  -webkit-clip-path: var(--recorte, none);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-soft);
}

.ph.is-done .ph-veil,
.ph.is-done .ph-canvas { opacity: 0; }

/* ============================================ divisores de seção */
.divisor {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  line-height: 0;
  margin-block: -2px;
  pointer-events: none;
  /* --de e a cor da seção de cima; sem ela o traçado sumiria no fundo branco */
  background: var(--de, transparent);
}

.divisor svg {
  display: block;
  width: 100%;
  height: var(--alt, clamp(52px, 7vw, 116px));
  vertical-align: top;
}

/* sela as emendas: o SVG esticado deixa faixas de 1px entre seções */
.divisor::before,
.divisor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  pointer-events: none;
}

.divisor::before {
  top: -2px;
  background: var(--de, transparent);
}

.divisor::after {
  bottom: -2px;
  background: var(--para, transparent);
}

.divisor.flip svg { transform: rotate(180deg); }

/* ============================================ movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .ph:hover .ph-media { transform: none; }
}