/* ============================================================
   Camada de scroll-scrub. O palco fica preso com position: sticky e os
   capítulos são puxados por cima dele com margem negativa : o filme fica
   sob o texto durante toda a jornada, sem JS de layout.
   ============================================================ */

.ss {
  background: var(--bg);
  position: relative;
}

.ss-stage {
  height: 100lvh;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 0;
}

.ss-layer {
  background-color: var(--bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  position: absolute;
}

.ss-video {
  height: 100%;
  left: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
/* Revelado só quando há um frame decodificado na tela. O poster embaixo é o
   frame zero deste mesmo clipe, então a troca é invisível. */
.ss-video.is-painted {
  opacity: 1;
}

.ss-scrim {
  background: linear-gradient(
    to bottom,
    rgb(10 10 10 / 0.72) 0%,
    rgb(10 10 10 / 0.22) 38%,
    rgb(10 10 10 / 0.55) 100%
  );
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* Escurecida direcional: entra junto com o texto, do lado em que ele está. */
.ss-scrim-dir {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  will-change: opacity;
  z-index: 1;
}
.ss-scrim-left {
  background: linear-gradient(to right, rgb(0 0 0 / 0.58) 0%, rgb(0 0 0 / 0.28) 34%, transparent 62%);
}
.ss-scrim-right {
  background: linear-gradient(to left, rgb(0 0 0 / 0.58) 0%, rgb(0 0 0 / 0.28) 34%, transparent 62%);
}

.ss-chapters {
  margin-top: -100lvh;
  position: relative;
  z-index: 2;
}

.ss-band {
  min-height: 200svh;
}

.ss-copy {
  align-items: center;
  display: flex;
  height: 100svh;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  position: sticky;
  top: 0;
}
/* O trilho é dono da coluna esquerda em telas largas. */
@media (min-width: 1024px) {
  .ss-copy {
    padding-left: 13rem;
  }
}
.ss-copy-inner {
  max-width: 32rem;
  will-change: opacity, transform;
}
.ss-band[data-align="right"] .ss-copy {
  justify-content: flex-end;
}
.ss-band[data-align="right"] .ss-copy-inner {
  text-align: right;
}

.ss-kicker {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.ss-title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.ss-title em {
  background: linear-gradient(180deg, #ff8a50 0%, #ff6736 45%, #e8501e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(232, 80, 30, 0.4));
  font-style: normal;
}

.ss-body {
  color: #f2efe9;
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 1.6rem 0 0;
  max-width: 38ch;
}
.ss-band[data-align="right"] .ss-body {
  margin-left: auto;
}

.ss-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}
.ss-band[data-align="right"] .ss-tags {
  justify-content: flex-end;
}
.ss-tags li {
  color: var(--t3);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  position: relative;
  text-transform: uppercase;
}
.ss-logo {
  display: block;
  height: auto;
  margin-top: 1.8rem;
  width: clamp(235px, 33vw, 411px);
}
.ss-band[data-align="right"] .ss-logo {
  margin-left: auto;
}
/* cidades: presença discreta, mesma régua mono dos eyebrows */
.ss-locs {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  margin-top: 1.5rem;
  text-transform: uppercase;
}
.ss-logo .lg-k {
  fill: #ffffff;
}
.ss-logo .lg-g {
  fill: var(--accent);
}

.ss-cta {
  background: var(--accent);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 1.8rem;
  padding: 0.68rem 1.55rem;
  transition: background 0.25s ease, transform 0.25s ease;
}
.ss-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* barrinha de progresso do download do filme (conexões lentas) */
.ss-filmbar {
  background: linear-gradient(90deg, var(--accent), #ff8a50);
  height: 2px;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s linear, opacity 0.45s ease;
  z-index: 60;
}
.ss-filmbar.is-on {
  opacity: 1;
}
.ss-filmbar.is-done {
  opacity: 0;
  transform: scaleX(1);
}
/* número discreto acompanhando a ponta da barra */
.ss-filmpct {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--mono);
  font-size: 0.6rem;
  left: 0;
  letter-spacing: 0.08em;
  opacity: 0;
  position: fixed;
  top: 7px;
  transition: opacity 0.45s ease;
  z-index: 60;
}
.ss-filmpct.is-on {
  opacity: 1;
}

/* ---------- convite de scroll ---------- */
.ss-scrollhint {
  align-items: center;
  bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  flex-direction: column;
  gap: 0.35rem;
  left: 50%;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  z-index: 30;
}
.ss-scrollhint span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
/* A seta para cima só entra depois do primeiro estágio: o filme anda e volta. */
.ss-hint-up {
  margin-bottom: 0.05rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ss-scrollhint.has-up .ss-hint-up {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .ss-scrollhint {
    transition: opacity 0.35s ease;
  }
  /* As duas setas animam desde o carregamento (a de cima só fica invisível
     até a hora), então os movimentos ficam sempre espelhados em sincronia. */
  .ss-hint-down {
    animation: hint-bounce 1.6s ease-in-out infinite;
  }
  .ss-hint-up {
    animation: hint-bounce-up 1.6s ease-in-out infinite;
  }
}
@keyframes hint-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
@keyframes hint-bounce-up {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.ss-scrollhint.is-off {
  opacity: 0;
}

@media (max-width: 860px) {
  .ss-band {
    min-height: 170svh;
  }
  .ss-copy {
    align-items: flex-end;
    padding-bottom: 16svh;
  }
  .ss-band[data-align="right"] .ss-copy {
    justify-content: flex-start;
  }
  .ss-band[data-align="right"] .ss-copy-inner {
    text-align: left;
  }
  .ss-band[data-align="right"] .ss-body,
  .ss-band[data-align="right"] .ss-tags {
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* Movimento reduzido: nenhum clipe é buscado, o poster conta a história. */
@media (prefers-reduced-motion: reduce) {
  .ss-video {
    display: none;
  }
}


/* mobile: copy do filme em escala menor e centralizada */
@media (max-width: 640px) {
  .ss-copy,
  .ss-band[data-align="right"] .ss-copy {
    justify-content: center;
  }
  .ss-copy-inner,
  .ss-band[data-align="right"] .ss-copy-inner {
    text-align: center;
    width: 100%;
  }
  .ss-copy {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* texto centralizado pede escurecida simétrica: a lateral escura de um
     lado só empurra o bloco visualmente pra fora do centro */
  .ss-scrim-left,
  .ss-scrim-right {
    background: linear-gradient(to top, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.22) 45%, transparent 75%);
  }
  .ss-title {
    font-size: clamp(2.19rem, 9.7vw, 2.76rem);
  }
  .ss-body,
  .ss-band[data-align="right"] .ss-body {
    font-size: 1rem;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    text-wrap: balance;
  }
  .ss-logo,
  .ss-band[data-align="right"] .ss-logo {
    margin-left: auto;
    margin-right: auto;
    width: clamp(153px, 46vw, 213px);
  }
  .ss-cta {
    font-size: 0.7rem;
    padding: 0.55rem 1.2rem;
  }
  .ss-locs {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
}