/**
 * Facchini Timeline — [facchini_timeline]
 * Slideshow dirigido pela rolagem da PÁGINA (sticky stage), com vídeos de fundo
 * do YouTube. A seção ocupa N telas de altura; o palco fica fixo (sticky) e cada
 * slide desliza verticalmente conforme o scroll. Depois da última tela, o fluxo
 * segue normalmente (rodapé aparece). Tudo encapsulado sob .fcc-timeline.
 */

.fcc-timeline, .fcc-timeline *, .fcc-timeline *::before, .fcc-timeline *::after { box-sizing: border-box; }

.fcc-timeline {
  --fcc-red: #CC0000;
  --fcc-font: 'Inter', system-ui, sans-serif;
  position: relative;
  width: 100%;
  /* altura total (N * 100vh) definida inline pelo shortcode */
  background: #000;
  color: #fff;
  font-family: var(--fcc-font);
  margin-top: -145px;
  z-index: 0;
}

/* ── PALCO FIXO ── */
.fcc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* ── SLIDE (empilhado, desliza na vertical) ── */
.fcc-timeline .fcc-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .9s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.fcc-timeline .fcc-slide.fcc-active { transform: translateY(0); z-index: 2; }
.fcc-timeline .fcc-slide.fcc-above  { transform: translateY(-100%); z-index: 1; }

/* linha vermelha no topo do slide ativo */
.fcc-timeline .fcc-slide::after {
  content: ''; position: absolute; top: 0; left: 0;
  height: 3px; width: 0; z-index: 5;
  background: var(--fcc-red);
  transition: width 1.4s ease .1s;
}
.fcc-timeline .fcc-slide.fcc-active::after { width: 100%; }

/* ── YOUTUBE BG ── */
.fcc-timeline .fcc-yt-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #000; }
.fcc-timeline .fcc-yt-wrap iframe {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; height: 100vh;
  min-width: 100%; min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: none; pointer-events: none;
  transition: opacity 1s ease; opacity: 0;
}
.fcc-timeline .fcc-slide.fcc-active .fcc-yt-wrap iframe { opacity: 1; }
.fcc-timeline .fcc-yt-cover { position: absolute; inset: 0; z-index: 1; background: transparent; }

/* ── OVERLAY ── */
.fcc-timeline .fcc-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,  rgba(0,0,0,.96) 0%, rgba(0,0,0,.2) 50%, transparent 75%),
    linear-gradient(to right, rgba(0,0,0,.55) 0%, transparent 60%);
  transition: opacity 1.2s ease;
}

/* ── CONTEÚDO ── */
.fcc-timeline .fcc-content { position: relative; z-index: 3; padding: 0 7vw 6vh; max-width: 680px; }
.fcc-timeline .fcc-section {
  font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.38); margin-bottom: .6rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease .1s, transform .45s ease .1s;
}
.fcc-timeline .fcc-slide.fcc-active .fcc-section { opacity: 1; transform: translateY(0); }
.fcc-timeline .fcc-year {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff; background: var(--fcc-red); border-radius: 3px;
  padding: .22rem .7rem; margin-bottom: 1rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.fcc-timeline .fcc-slide.fcc-active .fcc-year { opacity: 1; transform: translateY(0); }
.fcc-timeline .fcc-title {
  font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -.035em; margin: 0;
  opacity: 0; transform: translateY(26px);
  transition: opacity .65s ease .34s, transform .65s ease .34s;
}
.fcc-timeline .fcc-slide.fcc-active .fcc-title { opacity: 1; transform: translateY(0); }
.fcc-timeline .fcc-desc {
  margin-top: 1rem; font-size: clamp(.82rem, 1.35vw, 1rem);
  font-weight: 400; line-height: 1.84; color: rgba(255,255,255,.65); max-width: 520px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease .5s, transform .55s ease .5s;
}
.fcc-timeline .fcc-slide.fcc-active .fcc-desc { opacity: 1; transform: translateY(0); }

/* ── DOTS (presos ao palco) ── */
.fcc-timeline .fcc-nav {
  position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .75rem; z-index: 100;
}
.fcc-timeline .fcc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; padding: 0;
  transition: background .28s, transform .28s, box-shadow .28s; position: relative;
}
.fcc-timeline .fcc-dot:hover { background: rgba(255,255,255,.5); transform: scale(1.5); }
.fcc-timeline .fcc-dot.fcc-on {
  background: var(--fcc-red); border-color: var(--fcc-red);
  transform: scale(1.5); box-shadow: 0 0 8px rgba(204,0,0,.55);
}
.fcc-timeline .fcc-dot::before {
  content: attr(data-label);
  position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.84); color: #fff; font-family: var(--fcc-font);
  font-size: .58rem; font-weight: 500; letter-spacing: .06em;
  padding: .18rem .5rem; border-radius: 3px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s;
}
.fcc-timeline .fcc-dot:hover::before { opacity: 1; }

/* ── MARCA ── */
.fcc-timeline .fcc-brand { position: absolute; left: 2rem; top: 1.8rem; z-index: 100; display: flex; align-items: center; gap: .7rem; }
.fcc-timeline .fcc-brand img { height: 26px; filter: brightness(0) invert(1); opacity: .6; transition: opacity .3s; }
.fcc-timeline .fcc-brand img:hover { opacity: 1; }
.fcc-timeline .fcc-brand-sep { width: 1px; height: 20px; background: rgba(255,255,255,.15); }
.fcc-timeline .fcc-brand-text { font-size: .58rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.28); line-height: 1.4; }

/* ── CONTADOR / HINT ── */
.fcc-timeline .fcc-counter { position: absolute; left: 2rem; bottom: 2rem; font-size: .58rem; letter-spacing: .1em; color: rgba(255,255,255,.2); z-index: 100; }
.fcc-timeline .fcc-counter span { color: rgba(255,255,255,.5); }
.fcc-timeline .fcc-hint { position: absolute; right: 2rem; bottom: 2rem; font-size: .55rem; color: rgba(255,255,255,.15); letter-spacing: .07em; z-index: 100; }

@media (max-width: 680px) {
  .fcc-timeline .fcc-content { padding: 0 5vw 9vh; }
  .fcc-timeline .fcc-nav { right: .7rem; }
  .fcc-timeline .fcc-brand-text, .fcc-timeline .fcc-hint { display: none; }
}