/* ===== Animação de scroll do topo (usa os tokens de style.css) ===== */
.scrolly {
  position: relative;
  height: 500vh; /* quanto maior, mais lenta (mais rolagem) a animação */
  background: var(--black);
  color: var(--white);
}

.scrolly__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;   /* fallback */
  height: 100svh;  /* não "pula" quando a barra do navegador aparece/some no celular */
  overflow: hidden;
  background: var(--black);
}

.scrolly__poster,
.scrolly__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scrolly__poster { object-fit: cover; transition: opacity .4s ease; }
.scrolly__canvas { display: block; }
.is-ready .scrolly__poster { opacity: 0; }

.scrolly__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26,26,26,.6) 0%, rgba(26,26,26,0) 28%),
    linear-gradient(0deg, rgba(26,26,26,.9) 0%, rgba(26,26,26,0) 55%);
}

/* ===== Navbar escondida durante a animação ===== */
.header {
  transition: transform .35s ease, visibility 0s;
}

.in-intro .header {
  transform: translateY(-100%);
  visibility: hidden; /* também tira os links do foco pelo teclado */
  transition: transform .35s ease, visibility 0s .35s;
}

/* ===== Textos ===== */
.scrolly__captions { position: absolute; inset: 0; pointer-events: none; }

.caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  max-width: 680px;
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

.caption.is-active { pointer-events: auto; }

.caption__title {
  font-size: clamp(2.8rem, 11vw, 6rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: .75rem;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}

.caption__title span { color: var(--orange); }

.caption__text {
  max-width: 540px;
  margin-bottom: 1.5rem;
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.caption__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ===== Indicador "role para baixo" ===== */
.scrolly__hint {
  position: absolute;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  transition: opacity .3s;
}

.scrolly__hint i {
  width: 2px;
  height: 28px;
  background: linear-gradient(var(--orange), transparent);
  animation: hint 1.6s ease-in-out infinite;
}

.is-scrolled .scrolly__hint { opacity: 0; }

@keyframes hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ===== Loader (não bloqueia a rolagem) ===== */
.loader {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 20px;
  width: 140px;
  transition: opacity .4s;
}

.loader__bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .2s; }
.loader__text { margin-top: .4rem; font-size: .7rem; text-align: right; color: rgba(255,255,255,.75); }
.is-loaded .loader { opacity: 0; pointer-events: none; }

@media (min-width: 900px) {
  .caption { left: max(20px, calc((100vw - 1180px) / 2 + 20px)); bottom: 14vh; }
}

/* ===== Movimento reduzido: imagem estática, sem seção longa ===== */
@media (prefers-reduced-motion: reduce) {
  .scrolly { height: auto; }
  .scrolly__hint, .loader { display: none; }
}