/* Caminho: public_html/assets/css/cinema.css
   AMVORA :: camada cinematográfica do site (4.9)
   Carregada depois do site.css. Só entra em cena com movimento permitido;
   quase tudo depende de .cinema na raiz (posta pelo cinema.js) ou de
   suporte nativo a linha do tempo de scroll. Só transform, opacity,
   clip-path e filter são animados. */

/* ---------- 0. barra de leitura: o quanto da página já subiu ---------- */
@media (prefers-reduced-motion: no-preference) {
  body::after {
    content: ""; position: fixed; top: 0; left: 0; z-index: 70;
    width: 100%; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, var(--dourado-500), var(--dourado-300));
    transform-origin: left center;
    transform: scaleX(var(--altitude, 0));
    box-shadow: 0 0 12px rgba(218, 169, 81, .55);
  }
}

/* ---------- 1. herói: palavra por palavra ---------- */
.cinema .heroi h1 .palavra { display: inline-block; will-change: transform; }
/* as palavras douradas: o gradiente recortado no texto tem de estar na própria palavra (o pai só pinta o próprio texto) */
.cinema .heroi h1 .ouro .palavra {
  background: linear-gradient(100deg, var(--dourado-400) 0%, var(--dourado-300) 42%, var(--dourado-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not (background-clip: text) { .cinema .heroi h1 .ouro .palavra { color: var(--dourado-400); background: none; } }
.cinema .heroi h1 .linha { padding-bottom: .08em; margin-bottom: -.08em; } /* espaço para o descendente ao girar */

/* ---------- 2. títulos de seção revelados por máscara ---------- */
.cinema.anima .revelar:not(.visivel) .titulo-seccao { clip-path: inset(0 0 100% 0); }
.cinema.anima .revelar .titulo-seccao {
  clip-path: inset(0 0 -20% 0);
  transition: clip-path var(--mov-cine) var(--ease-saida) 120ms;
}
.cinema.anima .revelar:not(.visivel) .eyebrow { opacity: 0; transform: translate3d(-10px, 0, 0); }
.cinema.anima .revelar .eyebrow { transition: opacity var(--mov-expressivo) var(--ease-saida), transform var(--mov-expressivo) var(--ease-saida); }

/* ---------- 3. materiais: foco de luz que segue o ponteiro e inclinação ---------- */
/* a inclinação só existe enquanto o ponteiro está no cartão: parado, o cartão não vira camada de composição */
.cinema .material--ativo { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.cinema .material {
  transition: transform var(--mov-padrao) var(--ease-saida), border-color var(--mov-rapido) ease, box-shadow var(--mov-padrao) ease;
}
.cinema .material::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(235, 198, 133, .16), rgba(235, 198, 133, 0) 62%);
  opacity: 0; transition: opacity var(--mov-padrao) ease;
}
.cinema .material--ativo::after { opacity: 1; }
.cinema .material--ativo { border-color: rgba(235, 198, 133, .42); box-shadow: 0 30px 70px -40px rgba(0, 8, 26, .8), 0 0 0 1px rgba(235, 198, 133, .12) inset; }
/* o formulário é claro: o foco de luz fica azul-frio, para não amarelar o branco */
.cinema .formulario.material::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(10, 46, 92, .07), rgba(10, 46, 92, 0) 62%); }
.cinema .formulario.material--ativo { box-shadow: 0 30px 70px -40px rgba(0, 8, 26, .35); }
/* o resumo de erros e os campos não podem herdar a camada 3D de texto */
.cinema .material .campo, .cinema .material .resumo-erros { transform: none; }

/* aro de luz que gira devagar em volta do cartão ativo: um pseudoelemento extra
   por cima da borda, recortado por máscara, para valer com fundo translúcido */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .cinema .material--ativo { --aro: 1; }
  .cinema .material--ativo .aro { opacity: 1; }
  .cinema .material { position: relative; }
  .aro {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    padding: 1.5px; opacity: 0; transition: opacity var(--mov-padrao) ease;
    background: conic-gradient(from var(--ang), rgba(218, 169, 81, 0) 0 66%, rgba(235, 198, 133, .95) 84%, rgba(218, 169, 81, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  /* o aro só gira enquanto o cartão está sob o ponteiro: gradiente animado custa repintura, e parado não custa nada */
  .cinema .material--ativo .aro { animation: girar-aro 6s linear infinite; }
  @keyframes girar-aro { to { --ang: 360deg; } }
}

/* ---------- 4. botões: magnéticos e com mola ---------- */
.cinema .magnetico {
  transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0);
  transition: transform 420ms var(--ease-mola), background-color var(--dur-1) var(--ease-suave), border-color var(--dur-1) var(--ease-suave), color var(--dur-1) var(--ease-suave), box-shadow var(--dur-2) var(--ease-suave);
}
.cinema .magnetico:hover { transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0) scale(var(--escala-hover)); }
.cinema .magnetico:active { transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0) scale(var(--escala-pressao)); transition-duration: var(--mov-instantaneo); }

/* ---------- 5. anel do cursor ---------- */
.anel-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 30px; height: 30px; opacity: 0;
  transition: opacity var(--mov-padrao) ease;
  will-change: transform;
}
.anel-cursor::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(235, 198, 133, .85);
  background: rgba(218, 169, 81, 0);
  transition: transform var(--mov-rapido) var(--ease-saida), background-color var(--mov-rapido) ease, border-color var(--mov-rapido) ease;
}
.anel-cursor--visto { opacity: 1; }
.anel-cursor--ativo::before { background: rgba(218, 169, 81, .12); border-color: rgba(235, 198, 133, .5); }
.anel-cursor--pressao::before { transform: scale(.7); background: rgba(218, 169, 81, .3); }
/* sobre a superfície clara do formulário, o aro fica azul */
.cume:hover ~ .anel-cursor::before { border-color: rgba(10, 46, 92, .7); }

/* ---------- 6. o aparelho na mão ---------- */
.cinema .aparelho {
  transform: rotateY(calc((1 - var(--abertura, 1)) * 16deg + var(--ap-ry, 0deg)))
             rotateX(calc((1 - var(--abertura, 1)) * 5deg + var(--ap-rx, 0deg)))
             translateZ(0);
}
.cinema .aparelho--mao { transition: transform var(--mov-padrao) var(--ease-saida), box-shadow var(--dur-2) var(--ease-suave); }
.cinema .aparelho--mao .aparelho-brilho { opacity: .7; transform: translateX(calc((var(--ap-bx, 50%) - 50%) * .5)); transition: transform var(--mov-padrao) var(--ease-saida); }
/* flutua devagar quando ninguém mexe, como objeto em vitrine */
@media (prefers-reduced-motion: no-preference) {
  .cinema .aparelho-cena { animation: flutuar 7s ease-in-out infinite; }
  @keyframes flutuar { 50% { transform: translate3d(0, -8px, 0); } }
  .cinema .aparelho-cena:hover { animation-play-state: paused; }
}

/* ---------- 7. linha do tempo nativa: a tela acende e as etapas chegam ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .aparelho-tela img { filter: brightness(.45) saturate(.8); animation: tela-acender linear both; animation-timeline: --cena-guia; animation-range: entry 30% cover 55%; }
    @keyframes tela-acender { to { filter: brightness(1) saturate(1); } }

    /* cada etapa entra com o próprio pedaço de scroll: escala e opacidade, no contêiner, não no cartão (que inclina) */
    .passo > div { animation: etapa-chega linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
    @keyframes etapa-chega { from { opacity: .25; transform: translate3d(0, 28px, 0) scale(.97); } }

    /* os painéis da transparência e da divisão sobem de leve conforme cruzam a tela */
    .divisao > .painel { animation: painel-sobe linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes painel-sobe { from { transform: translate3d(0, 24px, 0); } }
  }
}

/* ---------- 8. transição entre páginas (index, política, obrigado) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: pagina-sai var(--mov-padrao) var(--ease-entrada) both; }
  ::view-transition-new(root) { animation: pagina-entra var(--mov-expressivo) var(--ease-saida) both; }
  @keyframes pagina-sai { to { opacity: 0; transform: translate3d(0, -12px, 0); } }
  @keyframes pagina-entra { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
}

/* ---------- 9. campos do formulário respiram no foco ---------- */
.cinema .formulario input:focus-visible, .cinema .formulario select:focus-visible, .cinema .formulario textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(218, 169, 81, .22), 0 8px 24px -12px rgba(10, 46, 92, .35);
  transition: box-shadow var(--mov-rapido) ease;
}

/* ---------- 10. movimento reduzido: nada disto se mexe ---------- */
@media (prefers-reduced-motion: reduce) {
  .anel-cursor { display: none; }
  .material, .magnetico { transform: none !important; }
  .aparelho-tela img { filter: none; }
}

/* ---------- 11. o ar da serra (cena.js) ---------- */
.ceu-particulas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; mix-blend-mode: screen; }
/* com as partículas em WebGL, o cintilar em CSS descansa: uma cintilação só */
.com-particulas .estrelas { display: none; }