/* Hero cinematográfico 3D — Instituto Fabiana Ferraz — 13/08/2026
   Camada isolada por cima do bundle compilado (não altera o React).
   Desfazer: remover do index.html o <link> deste arquivo, a tag <script>
   do ff-hero3d.js e o script inline "ffh-init".

   Duas fases:
   1) ENTRADA — enquanto <html> tem a classe .ffh-init, os elementos da 1a
      dobra ficam no estado inicial (deitados/atrás). O ff-hero3d.js remove
      a classe e eles caem na posição natural pela transição = a animação.
      Se o JS não rodar, um failsafe no próprio inline script remove a
      classe em 3s — a página NUNCA fica com conteúdo invisível.
   2) VIVA — depois da entrada o JS marca .ffh-live e passa a mexer só em
      transform (mouse/scroll). O halo dourado é 100% CSS. */

/* ---------- 1) ESTADO INICIAL DA ENTRADA ---------- */

/* coluna de texto: cada filho (título, assinatura, parágrafo, botões, números) */
.ffh-init section.min-h-screen > div > .grid > div:first-child > * {
  opacity: 0;
  transform: perspective(900px) rotateX(-14deg) translateY(26px);
}

/* coluna da foto: vem de trás, desfocada */
.ffh-init section.min-h-screen > div > .grid > div:last-child {
  opacity: 0;
  transform: perspective(1400px) translateZ(-140px) scale(0.94);
  filter: blur(8px);
}

/* transições que fazem a entrada acontecer (o delay em cascata vem do JS) */
section.min-h-screen > div > .grid > div:first-child > * {
  transition: opacity 0.75s ease-out,
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

section.min-h-screen > div > .grid > div:last-child {
  transition: opacity 1s ease-out,
              transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 1s ease-out;
}

/* clarão dourado com o formato da própria silhueta da foto (o PNG é
   recortado; um brilho retangular denunciaria a moldura) */
.ffh-init .ffh-photo {
  filter: drop-shadow(0 0 45px rgba(255, 214, 130, 0.95)) brightness(1.22);
}

.ffh-photo {
  transition: filter 1.4s ease-out;
}

/* ---------- 2) FASE VIVA ---------- */

/* movimento do mouse/scroll: suavizado por transição curta, dá a flutuação */
.ffh-live .ffh-photo {
  transition: transform 0.4s ease-out, filter 1.4s ease-out;
  will-change: transform;
}

.ffh-live .ffh-text {
  transition: transform 0.55s ease-out;
  will-change: transform;
}

/* halo dourado girando atrás da foto — só no desktop, para não gastar
   bateria/GPU no celular */
@media (min-width: 1024px) {
  .ffh-photocol {
    position: relative;
  }

  .ffh-photocol::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78%;
    padding-bottom: 78%;
    height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(42px);
    opacity: 0;
    background: conic-gradient(
      from 0deg,
      rgba(212, 175, 55, 0) 0deg,
      rgba(212, 175, 55, 0.30) 70deg,
      rgba(255, 231, 170, 0.16) 150deg,
      rgba(212, 175, 55, 0) 220deg,
      rgba(255, 214, 130, 0.24) 300deg,
      rgba(212, 175, 55, 0) 360deg
    );
    animation: ffh-halo-spin 22s linear infinite;
    transition: opacity 1.6s ease-out;
  }

  .ffh-live .ffh-photocol::before {
    opacity: 1;
  }

  /* a foto precisa ficar na frente do halo */
  .ffh-photocol > * {
    position: relative;
    z-index: 1;
  }
}

@keyframes ffh-halo-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ---------- ACESSIBILIDADE ---------- */

/* quem pediu menos movimento não recebe nada disso (o inline script nem
   chega a marcar .ffh-init; estas regras zeram o resto por garantia) */
@media (prefers-reduced-motion: reduce) {
  section.min-h-screen > div > .grid > div:first-child > *,
  section.min-h-screen > div > .grid > div:last-child,
  .ffh-photo,
  .ffh-text {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .ffh-photocol::before {
    display: none !important;
  }
}
