/* ==========================================================================
   BELMONT FILMS — Movimento
   Regras:
   - Só animamos transform e opacity (as duas propriedades mais baratas para o navegador).
   - Tudo é desligado quando o sistema pede "reduzir movimento".
   ========================================================================== */

/* ---------- Revelação ao rolar ---------- */
/* O estado oculto só existe com JavaScript ativo (classe .js no <html>). */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Segurança: se o JavaScript não carregar, o conteúdo aparece mesmo assim */
.js:not(.is-ready) [data-reveal] {
  animation: reveal-fallback 0s 2.5s forwards;
}

@keyframes reveal-fallback {
  to { opacity: 1; transform: none; }
}

/* ---------- Prólogo fotográfico ----------
   A foto surge do preto assim que está decodificada e posicionada (.is-set).
   A indicação de rolagem aparece depois, e o traço desce em loop. */
.js .prologue__photo,
.js .prologue__backdrop {
  opacity: 0;
}

.prologue.is-set .prologue__photo,
.prologue.is-set .prologue__backdrop {
  animation: fade-from-black 1.2s var(--ease-in-out) both;
}

/* Segurança: se o JavaScript não carregar, a foto aparece mesmo assim */
.js:not(.is-ready) .prologue__photo,
.js:not(.is-ready) .prologue__backdrop {
  animation: reveal-fallback 0s 2.5s forwards;
}

.prologue__hint > * {
  animation: soft-rise 0.9s var(--ease-out) 1.4s both;
}

.prologue__hint-line::after {
  animation: hint-drop 2.2s var(--ease-in-out) 2s infinite;
}

@keyframes hint-drop {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- Abertura: sequência de entrada (~2 s) ----------
   0,00 s  imagem surge do preto
   0,35 s  BELMONT sobe letra por letra, saindo da linha de base
   0,85 s  "Films" entra com puxada de foco (desfocado → nítido)
   1,25 s  linha superior e rodapé aparecem
   A sequência começa quando o <html> recebe .intro (fontes carregadas).
   Com o prólogo fotográfico, a abertura espera (.is-waiting) até assumir a tela. */

/* Respiração lenta de câmera sobre a imagem (Ken Burns) */
.hero__media {
  animation: slow-push 24s var(--ease-in-out) infinite alternate;
}

.js .hero__media {
  opacity: 0;
}

.intro .hero:not(.is-waiting) .hero__media {
  animation:
    fade-from-black 1.8s var(--ease-in-out) both,
    slow-push 24s var(--ease-in-out) infinite alternate;
}

@keyframes fade-from-black {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slow-push {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); }
}

/* BELMONT: cada letra sobe da máscara */
.js .hero__char {
  transform: translate3d(0, 110%, 0);
}

.intro .hero:not(.is-waiting) .hero__char {
  animation: char-rise 1.15s var(--ease-out) both;
  animation-delay: calc(350ms + var(--i, 0) * 55ms);
}

@keyframes char-rise {
  from { transform: translate3d(0, 110%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Films: puxada de foco */
.js .hero__focus {
  opacity: 0;
}

.intro .hero:not(.is-waiting) .hero__focus {
  animation: focus-pull 1.4s var(--ease-out) 850ms both;
}

@keyframes focus-pull {
  from { opacity: 0; filter: blur(14px); transform: translate3d(0, 0.1em, 0) scale(1.03); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* Linha superior (selo, timecode) e rodapé (frase, botões) */
.js .hero__top,
.js .hero__footer {
  opacity: 0;
}

.intro .hero:not(.is-waiting) .hero__top {
  animation: soft-rise 0.9s var(--ease-out) 1.25s both;
}

.intro .hero:not(.is-waiting) .hero__footer {
  animation: soft-rise 0.9s var(--ease-out) 1.4s both;
}

@keyframes soft-rise {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* Abertura conduzida pela rolagem (cena 3D do prólogo): o título, a linha superior,
   o rodapé e a imagem entram pelo progresso da rolagem (prologue.js), não pelo tempo.
   A respiração lenta da câmera (Ken Burns) continua. */
.intro .hero.is-scrubbed .hero__char,
.intro .hero.is-scrubbed .hero__focus,
.intro .hero.is-scrubbed .hero__top,
.intro .hero.is-scrubbed .hero__footer {
  animation: none;
}

.intro .hero.is-scrubbed .hero__media {
  animation: slow-push 24s var(--ease-in-out) infinite alternate;
}

/* Celular em pé: o Brand Film aparece inteiro, então a respiração de câmera não o amplia
   (nada do quadro fica de fora). A entrada pelo preto continua. */
@media (orientation: portrait) {
  .hero__media,
  .intro .hero.is-scrubbed .hero__media {
    animation: none;
  }

  .intro .hero:not(.is-waiting):not(.is-scrubbed) .hero__media {
    animation: fade-from-black 1.8s var(--ease-in-out) both;
  }
}

/* ---------- Player do Brand Film: entra e sai pelo preto, rápido (o filme é o destaque) ---------- */
.player[open] {
  animation: player-in 0.2s var(--ease-out) both;
}

.player.is-closing {
  animation: player-out 0.2s var(--ease-in-out) both;
}

@keyframes player-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes player-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Linha do "Ver projetos" percorrendo */
.hero__scroll-line::after {
  animation: scroll-hint 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-hint {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* Ponto "REC" piscando */
.rec-dot {
  animation: rec-blink 1.6s steps(1, end) infinite;
}

@keyframes rec-blink {
  50% { opacity: 0.2; }
}

/* ---------- Projetos: aproximação suave no hover (só com mouse) ---------- */
@media (hover: hover) and (pointer: fine) {
  .project__frame {
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .project__link:hover .project__frame {
    transform: scale(1.045);
  }

  .project__title {
    transition: transform var(--dur-base) var(--ease-out);
  }

  .project__link:hover .project__title {
    transform: translateX(0.25em);
  }

  .service__name {
    transition: transform var(--dur-base) var(--ease-out);
  }

  .service:hover .service__name {
    transform: translateX(0.12em);
  }
}

/* ---------- Menu mobile: abertura em "cortina" ---------- */
.menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-base) var(--ease-in-out);
}

.menu.is-open {
  clip-path: inset(0 0 0 0);
}

.menu__list li {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.menu.is-open .menu__list li {
  opacity: 1;
  transform: none;
}

.menu.is-open .menu__list li:nth-child(1) { transition-delay: 120ms; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: 170ms; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: 220ms; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: 270ms; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: 320ms; }

/* ---------- Reduzir movimento: respeita a preferência do sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}