/* Efeitos de navegação: vidro líquido nas abas, troca de página como app, holofote, entrada do título, fotos na rolagem */

/* ===== Vidro líquido (estilo Apple) ===== */
.vidro { position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38));
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06); backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(0,0,0,.06), 0 10px 34px rgba(40,10,0,.22), 0 2px 6px rgba(40,10,0,.12); }
.vidro::before { /* reflexo da luz na borda, como vidro de verdade */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255,255,255,.7), transparent 55%), radial-gradient(80% 50% at 90% 120%, rgba(255,255,255,.35), transparent 60%); }
.gota { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.72));
  box-shadow: inset 0 1px 1px #fff, 0 4px 14px rgba(200,36,28,.28);
  transition: left .55s cubic-bezier(.34,1.56,.64,1), width .55s cubic-bezier(.34,1.56,.64,1), transform .25s; }
.gota.estica { transform: scaleY(.86) scaleX(1.08); }

@media (min-width: 961px) {
  .abas.vidro { padding: 5px; border-radius: 999px; gap: 2px; }
  .abas.vidro a { position: relative; z-index: 1; color: var(--tinta); }
  .abas.vidro a:hover { background: transparent; color: var(--verm); }
  .abas.vidro a[aria-current="page"] { background: transparent; color: var(--verm); }
}
@media (max-width: 960px) {
  .barra.vidro { position: fixed; /* .vidro põe relative; a barra precisa continuar presa embaixo */ background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.42)); border-radius: 30px; padding: 6px; }
  .barra.vidro a { position: relative; z-index: 1; color: #2a2220; }
  .barra.vidro a[aria-current="page"] { background: transparent; color: var(--verm); }
}

/* ===== Trocar de aba como num app ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .28s cubic-bezier(.4,0,1,1) both sai; }
::view-transition-new(root) { animation: .42s cubic-bezier(0,0,.2,1) both entra2; }
@keyframes sai { to { opacity: 0; transform: scale(.985); } }
@keyframes entra2 { from { opacity: 0; transform: translateY(14px); } }
.topo .logo { view-transition-name: logo; }
.abas { view-transition-name: abas-topo; }
.barra { view-transition-name: abas-baixo; }
.cabeca h1 { view-transition-name: titulo; }

/* ===== Holofote que segue o mouse ===== */
.ev, .passo, .pessoa, .cartao-setor { position: relative; }
.setor::after, .ev::after, .passo::after, .pessoa::after, .cartao-setor::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(242,138,58,.18), transparent 60%); }
.setor::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.2), transparent 60%); }
.setor:hover::after, .ev:hover::after, .passo:hover::after, .pessoa:hover::after, .cartao-setor:hover::after { opacity: 1; }

/* ===== Título do topo entrando palavra por palavra ===== */
.hero h1 .pal { display: inline-block; animation: pal .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
@keyframes pal { from { opacity: 0; transform: translateY(.35em) rotate(2deg); filter: blur(6px); } }

/* ===== Fotos que se acertam ao entrar na tela ===== */
@supports (animation-timeline: view()) {
  .fotos img, .ged-foto img { animation: ajusta linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes ajusta { from { transform: scale(1.14); filter: saturate(.6); } to { transform: scale(1); filter: none; } }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .gota { transition: none; }
  .hero h1 .pal { animation: none; }
}