/* ==========================================================================
   LAB11 — Hero v2 ("reel")
   As fotos passam ao fundo o tempo todo, cada uma com uma transição.
   Por cima, os textos do hero entram um depois do outro (abertura).
   Quando todos passaram, a animação de texto para e o bloco de texto fica
   fixo no canto inferior esquerdo, só com as fotos trocando.
   Sem JavaScript ou com "reduzir movimento" ligado, o hero já abre parado.
   Para voltar à v1, veja _backup/hero-v1/LEIA-ME.txt
   ========================================================================== */

.reel { background: var(--black); }
.reel::after { position: relative; z-index: 3; }

/* ---------- Fotos ---------- */
.reel__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.reel__scene { position: absolute; inset: 0; visibility: hidden; overflow: hidden; background: var(--black); }
.reel__scene.is-prev { visibility: visible; z-index: 1; }
.reel__scene.is-active { visibility: visible; z-index: 2; }
.reel__scene img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Escurecimento sobre as fotos ---------- */
.reel__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.reel__scrim::before, .reel__scrim::after { content: ""; position: absolute; inset: 0; transition: opacity 900ms var(--ease-out); }
/* abertura: véu uniforme, para o texto grande ler bem */
.reel__scrim::before { background: rgba(0, 0, 0, 0.56); opacity: 0; }
/* parado: sombra só no topo (menu) e no canto do texto */
.reel__scrim::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 20%), linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 28%), radial-gradient(ellipse 70% 85% at 0% 100%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0) 100%); }
.reel.is-intro .reel__scrim::before { opacity: 1; }
.reel.is-intro .reel__scrim::after { opacity: 0; }

/* ---------- Textos da abertura ---------- */
.reel__texts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.reel:not(.is-intro) .reel__texts { display: none; }
.reel__text { position: absolute; inset: 0; display: grid; place-items: center; padding: 6rem var(--gutter) 8rem; text-align: center; visibility: hidden; }
.reel__text.is-active, .reel__text.is-leaving { visibility: visible; }
.reel__text.is-leaving { animation: reel-leave var(--leave, 320ms) var(--ease-in-out) both; }
@keyframes reel-leave { to { opacity: 0; transform: translateY(-14px); } }
/* na saída, letras e palavras ficam como estavam; quem some é o bloco inteiro, em fade */
.reel__text.is-leaving .reel__word .c { transform: none; }
.reel__text.is-leaving .w { opacity: 1; }
.reel__text.is-leaving .scribble > svg path { stroke-dashoffset: 0; }

.reel__word { overflow: hidden; padding-block: 0.06em; font-family: var(--font-display); font-weight: 900; font-size: clamp(4.5rem, 21vw, 24rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
.reel__word--long { font-size: clamp(3rem, 13.5vw, 16rem); }
.reel__word--red { color: var(--red); }
.reel__word .c { display: inline-block; transform: translateY(110%); }
.reel__line { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 6.6vw, 7.5rem); line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; max-width: 12ch; }
.reel__lead { max-width: 26ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 3.1vw, 3.25rem); line-height: 1.14; text-transform: uppercase; text-wrap: balance; }
.reel__lead em { font-style: normal; color: var(--red); }
.reel__text .w { display: inline-block; opacity: 0; }
.reel__text .scribble > svg path { stroke-dashoffset: 1; }

/* palavra gigante: letras sobem uma a uma */
.reel__text.is-active .reel__word .c { animation: reel-rise 650ms var(--ease-out) both; animation-delay: calc(var(--i) * 65ms + 120ms); }
@keyframes reel-rise { from { transform: translateY(110%); } to { transform: none; } }
/* frases: palavras entram em sequência */
.reel__text.is-active .w { animation: reel-word 500ms var(--ease-out) both; animation-delay: calc(var(--i) * var(--step, 110ms) + 160ms); }
@keyframes reel-word { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
/* rabisco desenhado no fim da frase */
.reel__text.is-active .scribble > svg path { animation: reel-draw 800ms var(--ease-in-out) 900ms both; }
@keyframes reel-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Bloco de texto fixo (depois da abertura) ---------- */
.reel .hero__content { position: relative; z-index: 3; padding-bottom: var(--sp-5); }
.reel.is-intro .hero__content { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reel.is-settled .hero__content { animation: reel-settle 900ms var(--ease-out) both; }
@keyframes reel-settle { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Rodapé do hero: botão, nome do evento, pausa ---------- */
.reel__foot { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 0 var(--edge) var(--sp-6); }
.reel__meta { display: flex; align-items: center; gap: var(--sp-4); }
.reel__now { color: var(--white); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9); transition: opacity var(--dur-base) var(--ease-out); }
.reel__now:empty { opacity: 0; }
.reel__pause { display: none; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: var(--white); background: rgba(0, 0, 0, 0.35); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.reel__pause:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.reel__pause svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.reel__pause .i-play { display: none; }
.reel.is-paused .reel__pause .i-play { display: block; }
.reel.is-paused .reel__pause .i-pause { display: none; }
.reel.is-running .reel__pause { display: grid; }
.reel.is-paused * { animation-play-state: paused !important; }

/* ---------- Fotos: zoom lento e transições de entrada ---------- */
.reel.is-running .reel__scene.is-active img { animation: reel-zoom var(--dur, 3000ms) linear both; }
@keyframes reel-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }

.reel.is-running .reel__scene[data-fx="wipe"].is-active { animation: reel-wipe 800ms var(--ease-in-out) both; }
.reel.is-running .reel__scene[data-fx="iris"].is-active { animation: reel-iris 900ms var(--ease-in-out) both; }
.reel.is-running .reel__scene[data-fx="shutter"].is-active { animation: reel-shutter 800ms var(--ease-in-out) both; }
.reel.is-running .reel__scene[data-fx="eleven"].is-active { animation: reel-eleven 1500ms var(--ease-in-out) both; }
@keyframes reel-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes reel-iris { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(85% at 50% 55%); } }
@keyframes reel-shutter { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
/* a foto aparece primeiro dentro de duas barras (o "11") e depois toma a tela */
@keyframes reel-eleven {
  0% { clip-path: polygon(38% 0, 38% 0, 38% 100%, 62% 100%, 62% 0, 62% 0, 62% 100%, 38% 100%); }
  35%, 58% { clip-path: polygon(31% 0, 46% 0, 46% 100%, 54% 100%, 54% 0, 69% 0, 69% 100%, 31% 100%); }
  100% { clip-path: polygon(0 0, 50% 0, 50% 100%, 50% 100%, 50% 0, 100% 0, 100% 100%, 0 100%); }
}

@media (max-width: 720px) {
  .reel__text { padding-bottom: 9rem; }
  .reel__now { display: none; }
  .reel__foot { padding-bottom: var(--sp-5); }
  .reel__foot .btn { flex: 1 1 auto; min-width: 0; padding-inline: var(--sp-4); font-size: 0.6875rem; }
  .reel__lead { max-width: 20ch; }
  .reel__scrim::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.9) 68%, rgba(0, 0, 0, 0.96) 100%); }
}