/* Motor de slides: palco 1440x810 escalado, transições, barra e controles. Só tokens. */
html, body { margin: 0; height: 100%; background: var(--palco); overflow: hidden; }
body { font-family: var(--fonte); }

#deck {
  position: fixed; left: 50%; top: 50%;
  width: 1440px; height: 810px;
  transform: translate(-50%, -50%) scale(var(--k));
  transform-origin: center center;
  overflow: hidden;
  background: var(--roxo-noite);
}

.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(60px) scale(.985);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              visibility 0s linear var(--dur-2);
}
.slide.antes { transform: translateX(-60px) scale(.985); }
.slide.depois { transform: translateX(60px) scale(.985); }
.slide.ativo {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* Cortina da transição "fita": elemento próprio acima dos slides; cobre e revela em 900 ms */
#motor-cortina {
  position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background: var(--fita); transform: translateX(-101%);
}
#motor-cortina.varrendo { animation: varredura 900ms var(--ease) both; }
@keyframes varredura {
  0%   { transform: translateX(-101%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* Entrada em cascata dos elementos marcados (propriedades individuais, preservam o transform do layout) */
[data-entrada] {
  opacity: 0; translate: 0 24px;
  transition: opacity var(--dur-2) var(--ease), translate var(--dur-2) var(--ease);
  transition-delay: 0s;
}
[data-entrada].entrou {
  opacity: 1; translate: 0 0;
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Controles */
.motor-ui { position: fixed; z-index: 100; font-family: var(--fonte); }
#motor-barra { left: 0; top: 0; height: 4px; width: 100%; background: transparent; }
#motor-barra i {
  display: block; height: 100%; width: 0; background: var(--laranja);
  transition: width var(--dur-2) var(--ease);
}
#motor-contador {
  right: 16px; bottom: 14px; color: var(--branco); font-weight: 700; pointer-events: none;
  font-size: 16px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
#motor-botoes { left: 16px; bottom: 8px; display: flex; gap: 8px; }
#motor-botoes button {
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: var(--raio-pilula);
  color: var(--branco); font-size: 20px; font-weight: 700;
  background: var(--roxo-3); opacity: .7;
  transition: opacity var(--dur-1) var(--ease);
}
#motor-botoes button:hover, #motor-botoes button:focus-visible { opacity: 1; }
#motor-botoes button:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* Reduced motion: sem transição (classe do JS e media query, para valer antes do JS) */
html.reduzido .slide, html.reduzido [data-entrada], html.reduzido #motor-barra i { transition: none !important; }
html.reduzido [data-entrada] { opacity: 1; translate: 0 0; }
html.reduzido #motor-cortina { display: none; }
@media (prefers-reduced-motion: reduce) {
  .slide, [data-entrada], #motor-barra i { transition: none !important; }
  [data-entrada] { opacity: 1; translate: 0 0; }
  #motor-cortina { display: none; }
}

/* ?pilha=1: todos os slides empilhados, sem motor */
html.pilha, html.pilha body { overflow: auto; height: auto; }
html.pilha #deck {
  position: static; transform: none; height: auto; overflow: visible; width: 1440px; margin: 0 auto;
}
html.pilha .slide {
  position: relative; opacity: 1; visibility: visible; transform: none; transition: none;
  height: 810px; pointer-events: auto;
}
html.pilha [data-entrada] { opacity: 1; translate: 0 0; transition: none; }
html.pilha #motor-cortina { display: none; }
html.pilha .motor-ui { display: none; }

/* Contador legível em qualquer fundo (slide claro/laranja ou palco nas laterais): pílula própria */
#motor-contador { background: var(--roxo-noite); color: var(--branco); padding: 4px 10px; border-radius: var(--raio-pilula); }

/* Toque: o palco só deixa rolar na vertical; o swipe horizontal é do motor */
#deck { touch-action: pan-y; }

/* Celular em retrato: aviso para girar (o JS preenche o texto e liga .on) */
#motor-gire { display: none; }
#motor-gire.on {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  inset: 0; z-index: 200; padding: 24px; text-align: center;
  background: var(--roxo-noite); color: var(--lilas);
}
#motor-gire.on svg { color: var(--laranja); }
#motor-gire p { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; max-width: 18ch; }