/* =====================================================================
   Cenas de scroll (guia de webs animadas): hero com máscara de texto,
   viagem horizontal fixa, manifesto que se ilumina, linha do tempo.
   Sem JavaScript (ou com "reduzir movimento") tudo aparece no estado final.
   ===================================================================== */

/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Linhas de títulos reveladas por máscara */
.mascara-linha { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mascara-linha > .line { display: block; }
[data-split] .char { display: inline-block; }

/* ---------- 1. Hero: a fotografia vista através da palavra INGLÊS ---------- */
.cena-hero { position: relative; background: var(--noite-950); color: #fff; }
.cena-hero-palco { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.cena-hero-foto { position: absolute; inset: 0; z-index: -2; }
.cena-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; will-change: transform; }
.cena-hero-foto::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(5,10,24,.45) 0%, rgba(5,10,24,.1) 35%, rgba(5,10,24,.88) 92%),
		linear-gradient(90deg, rgba(5,10,24,.7) 0%, rgba(5,10,24,0) 60%);
}
/* camada escura com texto branco + multiply = a foto só aparece dentro das letras */
.cena-hero-mascara {
	position: absolute; inset: 0; z-index: 1; display: none;
	background: var(--noite-950); mix-blend-mode: multiply;
	place-items: center; pointer-events: none;
}
.cena-hero-mascara > span {
	display: block; color: #fff; font-family: var(--serif); font-weight: 600;
	font-size: clamp(96px, 23vw, 440px); line-height: 0.8; letter-spacing: -0.045em;
	font-variation-settings: "opsz" 144; white-space: nowrap; will-change: transform;
	transform-origin: 50% 50%;
}
.cena-hero-intro { position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none; }
.cena-hero-intro .eyebrow { position: absolute; top: 120px; color: var(--ouro); }
.cena-hero-intro .dica { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cena-hero-intro .dica svg { animation: dica 1.6s var(--ease-in-out) infinite; }
@keyframes dica { 50% { transform: translateY(5px); } }
.cena-hero-conteudo { position: absolute; left: 0; right: 0; bottom: clamp(48px, 9vh, 110px); z-index: 3; margin-inline: auto; }
.cena-hero-conteudo h1 { margin: 20px 0 24px; max-width: 13ch; }
.cena-hero-conteudo .lead { color: rgba(255,255,255,.78); }
.cena-hero-conteudo .eyebrow { color: var(--ouro); }
/* com as cenas ativas: começa na palavra; o conteúdo entra com o scroll */
.cenas-ativas .cena-hero-mascara { display: grid; }
.cenas-ativas .cena-hero-intro { display: block; }
/* dentro das letras a foto noturna precisa de mais luz para a palavra se ler */
.cenas-ativas .cena-hero-foto img { filter: brightness(2.1) saturate(1.25); }
.cenas-ativas .cena-hero-conteudo > * { opacity: 0; }

/* ---------- 2. A viagem (painéis horizontais) ---------- */
.viagem { position: relative; background: var(--noite-950); color: #fff; overflow: hidden; padding: clamp(80px, 10vw, 120px) 0; }
.viagem-cab { position: relative; z-index: 2; margin-bottom: 48px; }
.viagem-cab .eyebrow { color: var(--ouro); }
.viagem-cab h2 { margin-top: 14px; }
.viagem-pista { display: flex; gap: clamp(20px, 3vw, 44px); padding-inline: max(20px, calc((100vw - var(--largura)) / 2)); width: max-content; will-change: transform; }
.viagem-painel { position: relative; flex: 0 0 min(68vw, 1060px); height: min(64svh, 640px); border-radius: var(--r-lg); overflow: hidden; background: var(--noite-800); isolation: isolate; }
.viagem-painel figure { position: absolute; inset: 0; margin: 0; z-index: -1; overflow: hidden; }
.viagem-painel figure img { position: absolute; top: 0; left: -8%; width: 116%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
.viagem-painel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,10,24,0) 35%, rgba(5,10,24,.9) 100%); }
.viagem-texto { position: absolute; left: clamp(24px, 3vw, 48px); right: clamp(24px, 3vw, 48px); bottom: clamp(24px, 3vw, 44px); max-width: 560px; }
.viagem-num { font-family: var(--serif); font-size: 15px; color: var(--ouro); letter-spacing: .1em; }
.viagem-texto small { display: inline-block; margin-left: 12px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.viagem-texto h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 60px); line-height: 1.02; letter-spacing: -0.025em; margin: 12px 0 12px; }
.viagem-texto p { margin: 0; color: rgba(255,255,255,.78); font-size: clamp(15px, 1.25vw, 18px); }

/* ---------- 3. Manifesto (palavras acendem com o scroll) ---------- */
.manifesto { padding: clamp(90px, 14vw, 190px) 0; }
.manifesto .eyebrow { margin-bottom: 26px; }
.manifesto-texto { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.6vw, 68px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; max-width: 22ch; color: var(--tinta); font-variation-settings: "opsz" 144; }
.manifesto-texto .word { display: inline-block; }

/* Cartões com fotografia: o segundo também tem foto agora */
.curso-foto img { object-position: 50% 35%; }

/* ---------- Linha do tempo (página do instituto) ---------- */
.linha-tempo { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.linha-tempo-foto { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.linha-tempo-foto img { width: 100%; height: 100%; object-fit: cover; }
.linha-tempo-foto span { position: absolute; left: 32px; bottom: 28px; color: #fff; font-family: var(--serif); font-size: 28px; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.linha-tempo-lista { padding: clamp(64px, 9vw, 140px) clamp(24px, 6vw, 96px); }
.linha-tempo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.linha-tempo li { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--linha); }
.linha-tempo li b { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; color: var(--vermelho); letter-spacing: -0.02em; }
.linha-tempo li h3 { margin: 0 0 6px; font-size: 19px; }
.linha-tempo li p { margin: 0; color: var(--cinza); }

/* Paralaxe: a imagem é maior do que a moldura para poder deslizar */
.cta-parallax img { height: 124%; top: -12%; will-change: transform; }
.hero-paralaxe .hero-img { will-change: transform; }

/* ---------- Telemóvel: versão leve ---------- */
@media (max-width: 900px) {
	.viagem-pista { flex-direction: column; width: auto; padding-inline: 20px; }
	.viagem-painel { flex: none; width: 100%; height: 72svh; max-height: 560px; }
	.linha-tempo { grid-template-columns: 1fr; }
	.linha-tempo-foto { position: relative; height: 52svh; }
	.linha-tempo li { grid-template-columns: 1fr; gap: 8px; }
	.cena-hero-intro .eyebrow { top: 100px; }
}

@media (prefers-reduced-motion: reduce) {
	.cenas-ativas .cena-hero-mascara, .cenas-ativas .cena-hero-intro { display: none; }
	.cenas-ativas .cena-hero-conteudo > * { opacity: 1; }
	.cena-hero-intro .dica svg { animation: none; }
}