/* public/display/display.css
   Tela pública (OBS) — "O que fazer quando a criança entra em crise"
   Direção: penumbra clínica acolhedora, elevada a cinematográfica-editorial.
   Fundo carvão quente (não preto puro, não azul-frio de webinar corporativo).
   Um único acento terracota-argila — humano, o oposto do vermelho-alarme ou
   azul-institucional. Serif editorial para o título (autoridade calma), sans
   humanista para o resto. Toda entrada é encenada: o título ganha peso antes
   do traço se desenhar, as linhas de apoio chegam em cascata. Seis rótulos de
   `data-anim` recebem coreografia própria (ver comentários por bloco).
   Legível a distância, nunca em branco, movimento só em transform/opacity/
   clip-path/filter — nada de rede, nada de layout thrash.
*/

:root {
  /* paleta — carvão quente com leve deriva para a cor da marca (terracota) */
  --bg-0: oklch(16% 0.014 55);      /* fundo base */
  --bg-1: oklch(20% 0.017 55);      /* halo/vinheta, camada superior */
  --bg-2: oklch(24% 0.02 52);       /* halo interno, mais próximo do palco */
  --ink: oklch(96% 0.010 70);       /* texto principal, quase-branco quente */
  --ink-dim: oklch(78% 0.018 65);   /* linhas secundárias */
  --ink-faint: oklch(60% 0.016 60); /* legendas discretas (fontes, marca d'água) */
  --accent: oklch(66% 0.135 40);    /* argila / terracota — único acento */
  --accent-bright: oklch(74% 0.145 42);
  --accent-soft: oklch(66% 0.135 40 / 0.35);
  --accent-dim: oklch(66% 0.135 40 / 0.16);
  --rule: oklch(50% 0.02 55 / 0.35);
  --rule-soft: oklch(50% 0.02 55 / 0.16);

  /* tipografia — stacks de sistema, sem dependência de rede */
  --font-display: 'Iowan Old Style', Charter, 'Noto Serif', 'Source Serif 4', Georgia, serif;
  --font-body: 'Segoe UI', ui-sans-serif, -apple-system, Roboto, system-ui, sans-serif;

  /* timing — curvas expressivas, sem bounce/elastic */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 420ms;
  --dur-normal: 720ms;
  --dur-slow: 1100ms;
  --stagger-step: 90ms;
}

* { margin: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  background:
    radial-gradient(ellipse 120% 90% at 50% 8%, var(--bg-1), transparent 60%),
    radial-gradient(ellipse 140% 100% at 50% 100%, oklch(12% 0.012 50), transparent 55%),
    var(--bg-0);
  color: var(--ink);
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  overflow: hidden;
  position: relative;
}

/* grão sutil para tirar a chapadura digital do fundo */
body::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* moldura fina para ancorar a composição no frame de transmissão */
body::after {
  content: '';
  position: absolute;
  inset: clamp(14px, 2.4vw, 28px);
  pointer-events: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

#slide-stage {
  width: min(88vw, 1240px);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* marca d'água discreta do tema — presença de contexto sem ruído */
#slide-stage::before {
  content: 'crise infantil · o que fazer';
  position: fixed;
  bottom: clamp(20px, 3vw, 34px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.5;
}

/* ============================================================
   BASE — toda troca de slide passa por aqui. O .slide é recriado
   a cada mudança (display.js), então a entrada dispara sozinha.
   Sequência: o bloco assenta (fade + rise sutil) enquanto o
   título ganha peso e o traço terracota se desenha da esquerda
   pro centro; as linhas de apoio chegam em cascata via --i.
   ============================================================ */

.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  animation: stage-in var(--dur-normal) var(--ease-out-quint) both;
  position: relative;
}

@keyframes stage-in {
  from { opacity: 0; transform: translateY(18px) scale(0.982); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.slide p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}

/* título: entra com leve profundidade + peso, nunca invisível no start
   (opacity parte de 0.001, não de 0 puro fora do keyframe, então um
   frame perdido de animação ainda mostra o texto) */
.slide p[data-line='0'] {
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-bottom: clamp(0.6rem, 1.6vw, 1rem);
  animation: title-in var(--dur-normal) var(--ease-out-quint) both;
}

@keyframes title-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* o traço terracota se desenha (scaleX) a partir do centro, com leve
   atraso pra ler como consequência do título assentando, não simultâneo */
.slide p[data-line='0']::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: clamp(46px, 6vw, 84px);
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 24px 2px var(--accent-soft);
  transform-origin: 50% 50%;
  animation: rule-draw 620ms var(--ease-out-expo) 260ms both;
}

@keyframes rule-draw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* linhas de apoio: sans humanista, tom mais contido, cascata via --i.
   Cada linha entra com leve subida + esmaecimento do blur, atrasada
   pelo índice — a leitura vira "uma ideia de cada vez", não um bloco só. */
.slide p:not([data-line='0']) {
  font-family: var(--font-body);
  font-weight: 440;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  animation: line-in var(--dur-fast) var(--ease-out-quart) both;
  animation-delay: calc(220ms + var(--i) * var(--stagger-step));
}

@keyframes line-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ============================================================
   BESPOKE — data-anim
   ============================================================ */

/* --- opening (slide 1) ---------------------------------------
   Abertura da live: entrada mais grandiosa, com respiro dramático.
   O título vem de mais longe e mais devagar, o traço demora um
   fôlego extra pra se desenhar (mais largo que o padrão), e as
   linhas de apoio (nome, especialidade) chegam com mais espaço
   entre elas — como créditos de abertura, não uma lista. */

.slide[data-anim='opening'] {
  animation-duration: var(--dur-slow);
  gap: clamp(0.7rem, 2.2vw, 1.4rem);
}

.slide[data-anim='opening'] p[data-line='0'] {
  font-size: clamp(3rem, 7.6vw, 6rem);
  animation: opening-title-in 1000ms var(--ease-out-quint) both;
}

@keyframes opening-title-in {
  from { opacity: 0; transform: translateY(26px) scale(0.94); filter: blur(10px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.slide[data-anim='opening'] p[data-line='0']::after {
  width: clamp(64px, 9vw, 120px);
  animation: rule-draw 900ms var(--ease-out-expo) 480ms both;
}

.slide[data-anim='opening'] p:not([data-line='0']) {
  animation-name: opening-line-in;
  animation-duration: 620ms;
  animation-delay: calc(560ms + var(--i) * 140ms);
}

@keyframes opening-line-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --- timeline (slide 10) — as 4 fases da crise -----------------
   O slide mais importante: precisa comunicar progressão temporal
   sem que o usuário toque em JS. Estratégia: um traço vertical
   central "cresce" atrás das fases (clip-path, não height) enquanto
   cada fase acende em sequência — nome ganha cor/peso plena só
   quando "alcançada" pelo traço, as demais ficam num estado mais
   apagado até a vez delas. Título tem o comportamento base; as
   4 fases (data-line 1..4) são o corpo da coreografia. */

.slide[data-anim='timeline'] {
  position: relative;
  padding-top: clamp(0.4rem, 1vw, 0.8rem);
}

/* trilho vertical: nasce atrás do título, cresce até a última fase.
   clip-path em vez de height para não disparar layout. */
.slide[data-anim='timeline']::before {
  content: '';
  position: absolute;
  top: clamp(5.2rem, 11vw, 8.6rem);
  bottom: clamp(0.2rem, 1vw, 0.5rem);
  left: 50%;
  width: 2px;
  translate: -50% 0;
  background: linear-gradient(to bottom, var(--accent-soft), var(--rule-soft) 85%);
  clip-path: inset(0 0 100% 0);
  animation: timeline-rail-grow 1400ms var(--ease-out-quint) 480ms both;
  z-index: 0;
}

@keyframes timeline-rail-grow {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

/* cada fase começa apagada/contraída e "acende" quando o trilho a
   alcança — delay calibrado por --i para casar com o crescimento
   do trilho acima (rail termina ~1880ms; 4 fases dividem esse tempo) */
.slide[data-anim='timeline'] p:not([data-line='0']) {
  position: relative;
  z-index: 1;
  animation-name: timeline-phase-in;
  animation-duration: 520ms;
  animation-timing-function: var(--ease-out-quart);
  animation-delay: calc(560ms + var(--i) * 320ms);
  color: var(--ink-faint);
}

@keyframes timeline-phase-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(4px); color: var(--ink-faint); }
  55%  { opacity: 1; transform: translateY(0) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); color: var(--ink-dim); }
}

/* marcador de fase: um pequeno nó terracota que "acende" junto com
   o texto — reforça a leitura de estações ao longo de uma linha do
   tempo, sem recorrer a numeração 01/02/03 (banida). */
.slide[data-anim='timeline'] p:not([data-line='0'])::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 0;
  height: 0;
}

.slide[data-anim='timeline'] p:not([data-line='0'])::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55em);
  translate: -50% 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px var(--accent-dim), 0 0 16px 2px var(--accent-soft);
  opacity: 0;
  animation: timeline-node-in 380ms var(--ease-out-expo) both;
  animation-delay: calc(560ms + var(--i) * 320ms);
}

@keyframes timeline-node-in {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- iceberg (slide 16) ------------------------------------------
   Estrutura fixa: título, depois "Acima: ..." (linha 1), depois
   "Abaixo: ..." + duas linhas de contexto (linhas 2-4). Sugerimos a
   metáfora com uma linha d'água horizontal entre visível/invisível:
   o que está acima entra de cima com leveza (visível, no ar); o que
   está abaixo entra de baixo, mais lento e mais grave (submerso). */

.slide[data-anim='iceberg'] {
  position: relative;
}

/* linha d'água: aparece entre a 1ª linha de apoio (Acima) e as
   demais (Abaixo + contexto) */
.slide[data-anim='iceberg'] p:nth-child(2)::after {
  content: '';
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: calc(-0.55rem);
  width: min(72%, 420px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  animation: waterline-draw 560ms var(--ease-out-expo) 460ms both;
}

@keyframes waterline-draw {
  to { transform: scaleX(1); }
}

/* "Acima" (primeira linha de apoio): vem de cima, leve, rápido */
.slide[data-anim='iceberg'] p:nth-child(2) {
  animation-name: iceberg-above-in;
  animation-duration: 520ms;
  animation-delay: 220ms;
  padding-bottom: 0.9rem;
  position: relative;
}

@keyframes iceberg-above-in {
  from { opacity: 0; transform: translateY(-14px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* "Abaixo" + contexto (linhas 3 e 4): sobem devagar, como emergindo
   da profundidade — mais peso no movimento, cor levemente mais funda */
.slide[data-anim='iceberg'] p:nth-child(3),
.slide[data-anim='iceberg'] p:nth-child(4),
.slide[data-anim='iceberg'] p:nth-child(5) {
  animation-name: iceberg-below-in;
  animation-duration: 720ms;
  animation-timing-function: var(--ease-out-quart);
  animation-delay: calc(620ms + var(--i) * 130ms);
  color: var(--ink-dim);
}

.slide[data-anim='iceberg'] p:nth-child(3) {
  color: var(--ink);
  font-weight: 480;
}

@keyframes iceberg-below-in {
  from { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* --- checklist (slides 17, 18) — gatilhos como lista sendo marcada -
   Cada item de apoio ganha um marcador circular à esquerda do texto
   que se completa (stroke se fecha) no momento em que o item chega —
   sensação de "check" elegante, sem emoji, sem ícone de biblioteca. */

.slide[data-anim='checklist'] p:not([data-line='0']) {
  position: relative;
  padding-left: clamp(1.6rem, 3vw, 2.2rem);
  text-align: left;
  animation-name: checklist-item-in;
  animation-duration: 460ms;
  animation-timing-function: var(--ease-out-quart);
}

@keyframes checklist-item-in {
  from { opacity: 0; transform: translateX(-14px); filter: blur(3px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* marcador: anel terracota que se desenha via clip-path (sem SVG,
   sem stroke-dasharray — mantém tudo em transform/clip-path) */
.slide[data-anim='checklist'] p:not([data-line='0'])::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: checklist-marker-in 320ms var(--ease-out-expo) both;
  animation-delay: calc(260ms + var(--i) * var(--stagger-step));
}

@keyframes checklist-marker-in {
  from { opacity: 0; transform: scale(0.4) rotate(-40deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* miolo do marcador: preenche um instante depois, como um check
   sendo confirmado */
.slide[data-anim='checklist'] p:not([data-line='0'])::after {
  content: '';
  position: absolute;
  left: 0.16em;
  top: 0.48em;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 10px 1px var(--accent-soft);
  opacity: 0;
  animation: checklist-fill-in 260ms var(--ease-out-expo) both;
  animation-delay: calc(420ms + var(--i) * var(--stagger-step));
}

@keyframes checklist-fill-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* os itens alinham o texto à esquerda (bullet + palavra), mas o bloco
   inteiro precisa continuar centralizado no frame como um só grupo —
   senão cada linha centraliza sozinha e os marcadores ficam em ziguezague.
   Fix: o .slide vira uma coluna que se auto-dimensiona pelo item mais
   largo (width: fit-content) e se centraliza via margin auto; dentro
   dela, todo item left-aligna contra a mesma borda esquerda comum. */
.slide[data-anim='checklist'] {
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.slide[data-anim='checklist'] p[data-line='0'] {
  align-self: center;
  width: 100%;
}

.slide[data-anim='checklist'] p:not([data-line='0']) {
  width: max-content;
  max-width: 100%;
}

/* --- closing (slide 43) — "Obrigada" + fontes ---------------------
   Encerramento sereno: título mais contido (sem urgência), a
   penúltima linha (@handle) surge com calma, e a última linha
   (fontes — longa, densa) é tratada como rodapé discreto: menor,
   mais apagada, sem cascata agressiva — só um esmaecimento lento
   para permanecer legível sem competir com "Obrigada". */

.slide[data-anim='closing'] {
  gap: clamp(0.6rem, 1.8vw, 1.2rem);
}

.slide[data-anim='closing'] p[data-line='0'] {
  animation-duration: 900ms;
}

.slide[data-anim='closing'] p:not([data-line='0']) {
  animation-duration: 620ms;
}

/* última linha = fontes: pequena, discreta, legível, entra por
   último e mais devagar — nunca disputa atenção com "Obrigada" */
.slide[data-anim='closing'] p:last-child {
  font-family: var(--font-body);
  font-size: clamp(0.62rem, 1vw, 0.82rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--ink-faint);
  max-width: 62ch;
  text-wrap: pretty;
  animation-name: closing-footnote-in;
  animation-duration: 900ms;
  animation-delay: calc(420ms + var(--i) * var(--stagger-step));
}

@keyframes closing-footnote-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   REDUCED MOTION — crossfade simples, mesmo resultado final
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide p,
  .slide p[data-line='0'],
  .slide p[data-line='0']::after,
  .slide[data-anim='timeline']::before,
  .slide[data-anim='timeline'] p:not([data-line='0'])::after,
  .slide[data-anim='iceberg'] p:nth-child(2)::after,
  .slide[data-anim='checklist'] p:not([data-line='0'])::before,
  .slide[data-anim='checklist'] p:not([data-line='0'])::after,
  .slide[data-anim='closing'] p:last-child {
    animation-name: reduced-fade;
    animation-duration: 260ms;
    animation-timing-function: ease-out;
    animation-delay: 0ms !important;
    animation-fill-mode: both;
    filter: none !important;
    transform: none !important;
    clip-path: inset(0 0 0% 0) !important;
  }

  .slide[data-anim='timeline'] p:not([data-line='0']) {
    color: var(--ink-dim) !important;
  }

  @keyframes reduced-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* telas menores usadas em preview/monitor — mantém proporção e respiro */
@media (max-width: 720px) {
  #slide-stage { width: 92vw; }
  .slide p[data-line='0'] { font-size: clamp(2rem, 8vw, 3.2rem); }
  .slide p:not([data-line='0']) { font-size: clamp(1.1rem, 4vw, 1.5rem); }
  .slide[data-anim='checklist'] p:not([data-line='0']) { padding-left: 1.4rem; }
}