/* ==========================================================
   Animações: cortina de entrada/saída de página, variações
   de entrada dos elementos (.reveal) e parallax
   Lógica em assets/js/components/animacoes.js
   ========================================================== */

/* ---------- CORTINA (entrada e saída de página) ---------- */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: var(--color-black);
  pointer-events: none;
  animation: cortina-abre 0.85s cubic-bezier(0.76, 0, 0.24, 1) 0.15s both;
}

/* Borda amarela que acompanha o movimento */
.page-curtain::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--color-yellow);
}

.page-curtain__brand {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  animation: cortina-logo 0.5s ease both;
}

.page-curtain__mark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 1;
  color: var(--color-yellow);
}

.page-curtain .tricolor {
  width: 72px;
}

/* Saída: a cortina sobe de baixo e cobre a tela antes de trocar de página */
.page-curtain.is-leaving {
  pointer-events: auto;
  animation: cortina-fecha 0.6s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.page-curtain.is-leaving::before {
  top: 0;
  bottom: auto;
}

@keyframes cortina-abre {
  to { transform: translateY(-100%); }
}

@keyframes cortina-fecha {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@keyframes cortina-logo {
  from { opacity: 0; transform: scale(0.85); }
}

/* ---------- VARIAÇÕES DE ENTRADA (data-reveal) ---------- */
/* Padrão (sem data-reveal): sobe — definido em global.css */
.reveal[data-reveal="left"]  { transform: translateX(-56px); }
.reveal[data-reveal="right"] { transform: translateX(56px); }
.reveal[data-reveal="zoom"]  { transform: scale(0.9); }

/* Cortina de baixo para cima, para imagens e títulos */
.reveal[data-reveal="clip"] {
  transform: translateY(24px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

.reveal.is-visible[data-reveal] {
  transform: none;
}

/* Elementos que já tinham "transition" própria (hover) perdiam a de entrada:
   aqui as duas são somadas */
.pillar.reveal,
.audience-card.reveal,
.service-card.reveal,
.service-item.reveal,
.life-card.reveal,
.link-arrow.reveal {
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition), background-color var(--transition),
    padding var(--transition), gap var(--transition);
}

/* Margem negativa para não cortar enfeites que saem da caixa (fita de claquete etc.) */
.reveal.is-visible[data-reveal="clip"] {
  clip-path: inset(-60px -60px -60px -60px);
}

/* ---------- PARALLAX ---------- */
/* Usa a propriedade "translate" para somar com os "transform" de hover e entrada */
[data-parallax] {
  translate: 0 var(--parallax-y, 0px);
  will-change: translate;
}

/* Topo da home: fundo desce mais devagar e o conteúdo sobe e some ao rolar */
.hero .hero__bg {
  inset: -10% 0 0;
  translate: 0 calc(var(--exit, 0) * 35%);
}

.hero .hero__content {
  opacity: calc(1 - var(--exit, 0) * 1.4);
  translate: 0 calc(var(--exit, 0) * -120px);
}

.hero .viewfinder,
.hero .hero__scroll {
  opacity: calc(1 - var(--exit, 0) * 2);
}

/* Topo das páginas internas: palavra gigante desce, texto sobe e some */
.page-hero::after {
  translate: 0 calc(var(--exit, 0) * 45%);
}

.page-hero > .container {
  opacity: calc(1 - var(--exit, 0) * 1.3);
  translate: 0 calc(var(--exit, 0) * -80px);
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-curtain {
    display: none;
  }

  .reveal[data-reveal] {
    clip-path: none;
  }

  [data-parallax],
  .hero .hero__bg,
  .hero .hero__content,
  .page-hero::after,
  .page-hero > .container {
    translate: none;
    opacity: 1;
  }
}