/* ============================================================
   Filhos da Luz — Abertura cinematográfica (scrollytelling)
   Só usado no index.html. Motor de scroll em js/scrolly.js:
   ele escreve --p (0→1) em cada .scene; o CSS abaixo deriva
   opacidade / translate / scale / blur / parallax a partir daí.
   ============================================================ */

/* style.css usa overflow-x:hidden em html/body, o que cria um scroll
   container e QUEBRA position:sticky. overflow-x:clip corta o excesso
   horizontal sem criar scroll container, mantendo o sticky funcional.
   (scrolly.css só carrega no index.html e vem depois → vence a cascata) */
html { overflow-x: clip; }
body { overflow-x: clip; }

#scrolly {
  --brand:#F38837; --gold:#E8A33D; --yellow:#FFD333; --dark:#151F33; --warm:#F5F0E8;
  position: relative;
  background: var(--dark);
}

/* header oculto e imersivo enquanto a abertura domina a viewport */
body.scrolly-hide-header .site-header {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.site-header { transition: opacity .5s ease, transform .5s ease, background-color .3s ease, box-shadow .3s ease; }

/* ---- estrutura base de uma cena ---- */
.scene {
  --p: 0;
  position: relative;
  min-height: 200vh;
}
.scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 90px);
}
.scene-inner {
  position: relative;
  z-index: 3;
  max-width: 960px;
  width: 100%;
  text-align: center;
}

/* progresso "de rolagem": para baixo, para cima, ficar 1 na janela central */
/* entra (0.06→0.34) e sai (0.72→0.96) — usado por vários elementos */
.fade-hold {
  opacity: calc(clamp(0, (var(--p) - 0.06) * 3.6, 1) * clamp(0, (0.96 - var(--p)) * 4.2, 1));
  transform: translateY(calc((1 - clamp(0, (var(--p) - 0.06) * 3.6, 1)) * 46px));
  transition: none;
  will-change: opacity, transform;
}

.eyebrow-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow);
}
.eyebrow-line::before, .eyebrow-line::after {
  content: ""; width: clamp(24px, 8vw, 60px); height: 1px; background: rgba(255,211,51,.5);
}

/* ============================================================
   CENA 1 — Escuridão e esperança
   ============================================================ */
#s1 .scene-stage { background: radial-gradient(120% 90% at 50% 120%, #24314f 0%, #151F33 55%, #0d1424 100%); }
#s1 canvas.particles {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  display: block;
}
#s1 .halo {
  position: absolute; left: 50%; top: 52%; width: 62vmin; height: 62vmin; transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none;
  background: radial-gradient(circle, rgba(255,211,51,.20) 0%, rgba(243,136,55,.10) 34%, transparent 66%);
  opacity: calc(clamp(0, (var(--p) - 0.02) * 3, 1) * clamp(0, (0.98 - var(--p)) * 4, 1));
  filter: blur(6px);
}
#s1 .s1-title {
  font-family:'Inter',sans-serif; font-weight: 600; color: #fff;
  font-size: clamp(30px, 6vw, 68px); line-height: 1.14; margin: 22px 0 0;
  letter-spacing: -0.01em;
  /* surge esmaecido/desfocado e fica nítido */
  opacity: clamp(0, (var(--p) - 0.08) * 3, 1);
  filter: blur(calc((1 - clamp(0, (var(--p) - 0.08) * 2.4, 1)) * 14px));
  transform: scale(calc(0.94 + clamp(0, var(--p) * 1.2, 1) * 0.06));
  text-shadow: 0 0 40px rgba(255,211,51,.18);
}
#s1 .s1-title b { color: var(--yellow); font-weight: 600; }
#s1 .scroll-cue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4;
  color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: calc(1 - clamp(0, var(--p) * 3, 1));
}
#s1 .scroll-cue .mouse {
  width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; position: relative;
}
#s1 .scroll-cue .mouse::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 3px;
  background: var(--yellow); transform: translateX(-50%); animation: cueDrop 1.6s ease-in-out infinite;
}
@keyframes cueDrop { 0%,100%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 70%{opacity:0; transform:translate(-50%,10px);} }

/* ============================================================
   CENA 2 — A realidade
   ============================================================ */
#s2 .scene-stage { background: #0f1727; }
#s2 .s2-bg {
  position: absolute; inset: -8% 0; z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1518398046578-8cca57782e17?w=1600&q=80');
  background-size: cover; background-position: center;
  transform: translateY(calc(var(--p) * -8vh)) scale(1.08);
  filter: grayscale(.3) brightness(.5);
  opacity: clamp(0, var(--p) * 2.2, .7);
}
#s2 .s2-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,23,39,.55) 0%, rgba(15,23,39,.82) 100%);
}
#s2 .s2-line {
  font-family:'Inter',sans-serif; font-weight: 500; color: #fff;
  font-size: clamp(24px, 4.4vw, 50px); line-height: 1.28; margin: 0 auto; max-width: 880px;
}
#s2 .s2-line span { color: var(--gold); }
/* três "clarões" de texto em janelas diferentes de --p */
#s2 .p-a { opacity: calc(clamp(0,(var(--p) - 0.08)*6,1) * clamp(0,(0.42 - var(--p))*6,1)); transform: translateY(calc((1 - clamp(0,(var(--p)-0.08)*6,1))*30px)); position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(880px,92%); }
#s2 .p-b { opacity: calc(clamp(0,(var(--p) - 0.40)*6,1) * clamp(0,(0.74 - var(--p))*6,1)); transform: translateY(calc((1 - clamp(0,(var(--p)-0.40)*6,1))*30px)); position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(880px,92%); }
#s2 .p-c { opacity: clamp(0,(var(--p) - 0.72)*5,1); transform: translateY(calc((1 - clamp(0,(var(--p)-0.72)*5,1))*30px)); position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(880px,92%); }

/* ============================================================
   CENA 3 — O impacto (contadores)
   ============================================================ */
#s3 .scene-stage { background: radial-gradient(120% 100% at 50% 0%, #1b2740 0%, #151F33 60%); }
#s3 .s3-head {
  color: #fff; font-family:'Inter',sans-serif; font-weight: 600;
  font-size: clamp(22px, 3.4vw, 38px); margin: 0 0 clamp(36px, 6vw, 64px);
}
#s3 .counters {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 5vw, 60px);
}
#s3 .counter { border-top: 2px solid rgba(255,211,51,.25); padding-top: 22px; }
#s3 .counter .num {
  font-family:'Inter',sans-serif; font-weight: 700; color: var(--yellow);
  font-size: clamp(40px, 7vw, 84px); line-height: 1; letter-spacing: -0.02em;
  text-shadow: 0 0 34px rgba(255,211,51,.18);
}
#s3 .counter .label {
  margin-top: 14px; color: rgba(255,255,255,.78); font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 500; letter-spacing: .02em;
}
#s3 .counter.is-placeholder .num { color: rgba(255,211,51,.55); }
@media (max-width: 720px) {
  #s3 .counters { grid-template-columns: 1fr; gap: 34px; }
}

/* ============================================================
   CENA 4 — A transformação (fotos + depoimentos em paralaxe)
   ============================================================ */
#s4 { min-height: 240vh; }
#s4 .scene-stage { background: #10192a; }
#s4 .s4-bg {
  position: absolute; inset: -6% 0; z-index: 1; background-size: cover; background-position: center;
  transform: translateY(calc((0.5 - var(--p)) * 8vh));
}
#s4 .s4-veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(16,25,42,.72) 0%, rgba(16,25,42,.58) 40%, rgba(16,25,42,.78) 100%); }
#s4 .s4-quote { position: relative; z-index: 3; max-width: 720px; margin: 0 auto; }
#s4 .s4-quote .mark { font-family:'Inter',sans-serif; color: var(--gold); font-size: 64px; line-height: .5; }
#s4 .s4-quote p {
  font-family:'Inter',sans-serif; font-weight: 500; color: #fff;
  font-size: clamp(22px, 3.6vw, 42px); line-height: 1.32; margin: 18px 0 0;
}
#s4 .s4-quote cite { display: block; margin-top: 22px; font-style: normal; color: var(--yellow); font-size: 15px; font-weight: 600; letter-spacing: .04em; }

/* ============================================================
   CENA 5 — Convite à ação (a tela clareia)
   ============================================================ */
#s5 .scene-stage {
  /* mistura dark → warm conforme --p */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--dark) calc((1 - var(--p)) * 100%), var(--warm)) 0%,
      color-mix(in srgb, var(--dark) calc((1 - var(--p)) * 100%), #ffffff) 100%);
}
#s5 .s5-title {
  font-family:'Inter',sans-serif; font-weight: 600; line-height: 1.16;
  font-size: clamp(30px, 5.4vw, 64px); letter-spacing: -0.01em;
  color: color-mix(in srgb, #ffffff calc((1 - var(--p)) * 100%), var(--dark));
  margin: 0 0 34px;
}
#s5 .s5-sub {
  color: color-mix(in srgb, rgba(255,255,255,.85) calc((1 - var(--p)) * 100%), var(--body, #4F4F4F));
  font-size: clamp(16px, 2vw, 20px); line-height: 1.6; max-width: 620px; margin: 0 auto 40px;
}
#s5 .s5-cta { display: inline-flex; }
#s5 .glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 90vmin; height: 90vmin; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,211,51,.28) 0%, transparent 60%);
  opacity: var(--p);
}

/* ============================================================
   Acessibilidade — reduzir movimento: cenas viram blocos estáticos
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scene { min-height: auto !important; }
  .scene-stage { position: static !important; height: auto !important; min-height: 60vh; padding-block: clamp(60px, 10vw, 120px); }
  .fade-hold, #s1 .s1-title, #s2 .p-a, #s2 .p-b, #s2 .p-c,
  #s4 .s4-bg, #s4 .s4-quote, #s1 .halo {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  #s2 .p-a, #s2 .p-b, #s2 .p-c { position: static !important; translate: none !important; margin: 0 auto 20px; }
  #s1 canvas.particles, #s1 .scroll-cue, #s5 .glow { display: none !important; }
  #s5 .scene-stage { background: var(--warm) !important; }
  #s5 .s5-title { color: var(--dark) !important; }
  #s5 .s5-sub { color: #4F4F4F !important; }
}