/* =============================================================================
   TickTack — design system
   A identidade inteira sai da logo que o Marco aprovou em 05/09/2026: papel creme,
   tinta grafite, ponteiro âmbar, lettering geométrico. Os hex e a geometria foram
   medidos pixel a pixel naquele arquivo — o método está em
   design-system/assets/marca/gerar.py e em docs/marca_identidade.md.

   O que cada efeito faz, e por que: design-system/TECNOLOGIAS.md
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("/ds/fonts/Jost.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Variable";
  src: url("/ds/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. tokens ---------------------------------------------------- */

:root {
  /* 1.1 famílias — Jost é a letra da marca; Inter carrega o texto longo ---- */
  --font-display: "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --font-regular: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numero: "Jost", ui-monospace, "SF Mono", Menlo, monospace;

  /* 1.2 pesos ------------------------------------------------------------ */
  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  /* 1.3 títulos — Jost, tracking levemente aberto como no logotipo -------- */
  --titulo-1-tam: 1.0625rem; --titulo-1-alt: 1.4;   --titulo-1-esp: 0;
  --titulo-2-tam: 1.25rem;   --titulo-2-alt: 1.35;  --titulo-2-esp: 0;
  --titulo-3-tam: 1.5rem;    --titulo-3-alt: 1.3;   --titulo-3-esp: -0.005em;
  --titulo-4-tam: 2rem;      --titulo-4-alt: 1.18;  --titulo-4-esp: -0.008em;
  --titulo-5-tam: 2.5rem;    --titulo-5-alt: 1.12;  --titulo-5-esp: -0.012em;
  --titulo-6-tam: 3.25rem;   --titulo-6-alt: 1.06;  --titulo-6-esp: -0.016em;
  --titulo-7-tam: 4rem;      --titulo-7-alt: 1.02;  --titulo-7-esp: -0.02em;

  /* 1.4 texto ------------------------------------------------------------ */
  --texto-grande-tam: 1.125rem; --texto-grande-alt: 1.6;
  --texto-tam: 1rem;            --texto-alt: 1.65;
  --texto-peq-tam: 0.9375rem;   --texto-peq-alt: 1.55;
  --texto-mini-tam: 0.875rem;   --texto-mini-alt: 1.5;
  --texto-micro-tam: 0.8125rem; --texto-micro-alt: 1.45;

  /* 1.5 papel — o creme da logo (#FBF5EA, medido) ------------------------ */
  --papel-050: #fefcf8;
  --papel-100: #fbf5ea;
  --papel-200: #f4ebdb;
  --papel-300: #e8dcc7;
  --papel-400: #d9c9ac;

  /* 1.6 tinta — o grafite da logo (#3C4450, medido) ---------------------- */
  --tinta-900: #232830;
  --tinta-800: #2c323c;
  --tinta-700: #3c4450;
  --tinta-600: #4e5765;
  --tinta-500: #5e6779;
  --tinta-400: #8c94a3;
  --tinta-300: #b4bac5;

  /* 1.7 âmbar — o ponteiro da logo (#D2874A, medido) --------------------- */
  --ambar-100: #f7e6d4;
  --ambar-300: #edc49e;
  --ambar-400: #e0a271;
  --ambar-500: #d2874a;
  --ambar-600: #a9682f;
  --ambar-700: #8a5526;

  /* 1.8 papéis semânticos (o claro é o padrão) --------------------------- */
  --fundo: var(--papel-100);
  --fundo-2: var(--papel-200);
  --fundo-3: var(--papel-300);
  --superficie: var(--papel-050);
  --borda: var(--papel-300);
  --borda-forte: var(--papel-400);

  --texto: var(--tinta-700);       /* 9,06:1 sobre o papel */
  --texto-2: var(--tinta-600);     /* 6,73:1 */
  --texto-3: var(--tinta-500);     /* 5,24:1 */
  --texto-4: var(--tinta-400);     /* só decorativo sobre papel */
  --acento: var(--ambar-500);      /* gráfico, nunca texto sobre papel: 2,65:1 */
  --acento-texto: var(--ambar-700);/* 5,68:1 — o âmbar quando precisa ser lido */

  /* 1.9 raios — o relógio é redondo; a página acompanha ------------------ */
  --raio-4: 4px;
  --raio-8: 8px;
  --raio-12: 12px;
  --raio-16: 16px;
  --raio-24: 24px;
  --raio-redondo: 9999px;

  /* 1.10 sombras — de papel: baixas, quentes, nunca azuis ---------------- */
  --sombra-baixa: 0 1px 2px rgba(60, 68, 80, 0.05), 0 2px 8px rgba(60, 68, 80, 0.04);
  --sombra-media: 0 2px 4px rgba(60, 68, 80, 0.06), 0 10px 28px rgba(60, 68, 80, 0.08);
  --sombra-alta: 0 4px 10px rgba(60, 68, 80, 0.07), 0 20px 56px rgba(60, 68, 80, 0.13);
  --sombra-acento: 0 6px 18px rgba(169, 104, 47, 0.28);

  /* 1.11 tempo — o passo do relógio, não a rampa do software ------------- */
  --vel-rapida: 0.12s;
  --vel-normal: 0.24s;
  --vel-lenta: 0.5s;
  --curva-saida: cubic-bezier(0.215, 0.61, 0.355, 1);
  --curva-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --curva-passo: cubic-bezier(0.77, 0, 0.175, 1);

  /* O RELÓGIO DA PÁGINA: um ciclo só, de 12 s, comanda tudo que se mexe em laço —
     o aparelho da hero, os anéis do símbolo e a dobra do vilão. É a decisão D8.
     Trocar este número muda a página inteira de uma vez; não crie um segundo. */
  --ciclo: 12s;

  /* 1.12 medidas da página ---------------------------------------------- */
  --altura-cabecalho: 64px;
  --largura-pagina: 1120px;
  --largura-prosa: 620px;
  --respiro-lateral: 20px;
  --respiro-secao: 88px;
  --fio: 1px;
  --camada-cabecalho: 100;

  color-scheme: light;
}

/* superfície escura — a tela do alarme, e as dobras que a citam */
[data-superficie="escura"] {
  --fundo: var(--tinta-900);
  --fundo-2: var(--tinta-800);
  --fundo-3: #363d49;
  --superficie: var(--tinta-800);
  --borda: #3a414d;
  --borda-forte: #4a5361;

  --texto: var(--papel-100);       /* 13,65:1 */
  --texto-2: var(--tinta-300);     /* 7,60:1 */
  --texto-3: var(--tinta-400);     /* 4,85:1 */
  --texto-4: #6d7687;
  --acento: var(--ambar-500);      /* 5,15:1 sobre tinta-900 — aqui pode ser texto */
  --acento-texto: var(--ambar-400);/* 6,75:1 */

  --sombra-media: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.38);
  --sombra-alta: 0 4px 10px rgba(0, 0, 0, 0.34), 0 24px 60px rgba(0, 0, 0, 0.44);

  color: var(--texto);
  background: var(--fundo);
  color-scheme: dark;
}

/* ---------- 2. base ------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font-regular);
  font-size: var(--texto-tam);
  line-height: var(--texto-alt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* o grão do papel: uma textura de ruído em SVG, 0 requisição, 0 imagem.
   Fica atrás de tudo e não intercepta clique. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--peso-medio);
  color: var(--texto);
}

h1 { font-size: var(--titulo-6-tam); line-height: var(--titulo-6-alt); letter-spacing: var(--titulo-6-esp); }
h2 { font-size: var(--titulo-5-tam); line-height: var(--titulo-5-alt); letter-spacing: var(--titulo-5-esp); }
h3 { font-size: var(--titulo-4-tam); line-height: var(--titulo-4-alt); letter-spacing: var(--titulo-4-esp); }
h4 { font-size: var(--titulo-3-tam); line-height: var(--titulo-3-alt); letter-spacing: var(--titulo-3-esp); }

p { margin: 0; }

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

button, input { font: inherit; color: inherit; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--ambar-600);
  outline-offset: 3px;
  border-radius: var(--raio-4);
}

@media (min-width: 720px) {
  :root { --respiro-lateral: 32px; --respiro-secao: 112px; }
}

/* ---------- 3. estrutura ------------------------------------------------- */

.ds-pagina {
  width: 100%;
  max-width: var(--largura-pagina);
  margin-inline: auto;
  padding-inline: var(--respiro-lateral);
  position: relative;
  z-index: 1;
}

.ds-secao {
  padding-block: var(--respiro-secao);
  background: var(--fundo);
  position: relative;
  z-index: 1;
}

.ds-secao--fina { padding-block: calc(var(--respiro-secao) * 0.6); }
.ds-secao--alterna { background: var(--fundo-2); }

.ds-prosa { max-width: var(--largura-prosa); }
.ds-prosa > * + * { margin-top: 16px; }

.ds-texto-grande { font-size: var(--texto-grande-tam); line-height: var(--texto-grande-alt); color: var(--texto-2); }
.ds-texto-peq { font-size: var(--texto-peq-tam); line-height: var(--texto-peq-alt); }
.ds-texto-mini { font-size: var(--texto-mini-tam); line-height: var(--texto-mini-alt); }
.ds-texto-micro { font-size: var(--texto-micro-tam); line-height: var(--texto-micro-alt); }
.ds-suave { color: var(--texto-2); }
.ds-suave-2 { color: var(--texto-3); }

/* a linha de olho: o rótulo pequeno em versalete acima do título */
.ds-olho {
  font-family: var(--font-display);
  font-size: var(--texto-micro-tam);
  font-weight: var(--peso-medio);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-texto);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-olho::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--raio-redondo);
  background: var(--acento);
  flex: none;
}

/* ---------- 4. a marca ---------------------------------------------------- */

/* O logotipo é texto de verdade em Jost, não imagem: escala, seleciona e pesa 0.
   O segundo T sai em âmbar — é a única letra colorida, como na logo aprovada. */
.ds-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: var(--peso-normal);
  font-size: 1.5rem;
  letter-spacing: 0.005em;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.ds-marca__simbolo { width: 1.5em; height: 1.5em; flex: none; }
.ds-marca__t { color: var(--acento); }

/* O ponteiro NÃO gira: ele está parado na hora marcada, e é isso que a marca diz.
   O que se move é o SOM — dois anéis âmbar que saem do símbolo em dois tempos,
   como a onomatopeia do nome. É a decisão D7 (`docs/decisoes/2026_09.md`).
   Eles saem no mesmo instante em que o alarme toma a tela do aparelho da hero:
   os dois correm no relógio de 12 s da seção 12. */
.ds-simbolo { position: relative; display: inline-flex; }
.ds-simbolo svg { position: relative; z-index: 1; }
.ds-simbolo--toca::before,
.ds-simbolo--toca::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid var(--acento);
  opacity: 0;
  animation: ds-toca var(--ciclo) var(--curva-expo) infinite;
  /* dentro de um bloco com relógio (seção 12.1) ele para junto quando o bloco sai
     da tela; solto no cabeçalho, que está sempre visível, ele roda sempre */
  animation-play-state: var(--anima, running);
}
/* o segundo tempo do nome: 0,42 s depois do primeiro — 3,5% do ciclo */
.ds-simbolo--toca::after { animation-delay: calc(var(--ciclo) * 0.035); }

/* Fora da janela de toque o anel é invisível e do tamanho do símbolo: o gesto
   acontece de uma vez, no segundo 3 do ciclo, e no resto do tempo não há nada
   se mexendo ali. */
@keyframes ds-toca {
  0%, 24.9%   { transform: scale(1);   opacity: 0; }
  25%         { transform: scale(1);   opacity: 0.55; }
  35%         { transform: scale(1.6); opacity: 0; }
  35.1%, 100% { transform: scale(1);   opacity: 0; }
}

/* ---------- 5. botões ---------------------------------------------------- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 24px;
  border: var(--fio) solid transparent;
  border-radius: var(--raio-redondo);
  font-family: var(--font-display);
  font-size: var(--texto-peq-tam);
  font-weight: var(--peso-medio);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--vel-rapida) var(--curva-saida),
    border-color var(--vel-rapida) var(--curva-saida),
    transform var(--vel-rapida) var(--curva-saida),
    box-shadow var(--vel-normal) var(--curva-saida);
}

/* O texto do botão âmbar é GRAFITE, não creme: creme sobre âmbar dá 2,65:1 e
   reprova na WCAG; grafite dá 5,15:1. A regra veio da conta, não do gosto. */
.ds-btn--primario {
  background: var(--ambar-500);
  color: var(--tinta-900);
  box-shadow: var(--sombra-acento);
}
.ds-btn--primario:hover { background: var(--ambar-400); transform: translateY(-1px); }
.ds-btn--primario:active { background: var(--ambar-600); transform: translateY(0); }

.ds-btn--fantasma {
  background: transparent;
  color: var(--texto-2);
  border-color: var(--borda-forte);
}
.ds-btn--fantasma:hover { background: var(--fundo-2); color: var(--texto); border-color: var(--texto-4); }

.ds-btn--peq { height: 38px; padding-inline: 16px; font-size: var(--texto-mini-tam); }
.ds-btn--largo { width: 100%; }

/* ---------- 6. etiqueta e cartão ----------------------------------------- */

.ds-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding-inline: 14px;
  border-radius: var(--raio-redondo);
  background: var(--ambar-100);
  border: var(--fio) solid var(--ambar-300);
  color: var(--ambar-700);
  font-family: var(--font-display);
  font-size: var(--texto-micro-tam);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
}
[data-superficie="escura"] .ds-etiqueta {
  background: rgba(210, 135, 74, 0.14);
  border-color: rgba(210, 135, 74, 0.36);
  color: var(--ambar-300);
}

.ds-cartao {
  padding: 24px;
  border: var(--fio) solid var(--borda);
  border-radius: var(--raio-16);
  background: var(--superficie);
  box-shadow: var(--sombra-baixa);
  transition: box-shadow var(--vel-normal) var(--curva-saida),
    transform var(--vel-normal) var(--curva-saida),
    border-color var(--vel-normal) var(--curva-saida);
}
.ds-cartao--vivo:hover {
  box-shadow: var(--sombra-media);
  transform: translateY(-2px);
  border-color: var(--borda-forte);
}

.ds-grade { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .ds-grade--2 { grid-template-columns: repeat(2, 1fr); }
  .ds-grade--3 { grid-template-columns: repeat(3, 1fr); }
  .ds-grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 7. cabeçalho ------------------------------------------------- */

.ds-cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--camada-cabecalho);
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--papel-100) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--fio) solid transparent;
  transition: border-color var(--vel-normal) var(--curva-saida),
    background var(--vel-normal) var(--curva-saida);
}
.ds-cabecalho[data-rolou="sim"] {
  border-bottom-color: var(--borda);
  background: color-mix(in srgb, var(--papel-100) 94%, transparent);
}
.ds-cabecalho .ds-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ds-cabecalho__acoes { display: flex; align-items: center; gap: 8px; }

/* ---------- 8. formulário ------------------------------------------------ */

.ds-campo {
  width: 100%;
  height: 48px;
  padding-inline: 18px;
  border: var(--fio) solid var(--borda-forte);
  border-radius: var(--raio-redondo);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color var(--vel-rapida) var(--curva-saida),
    box-shadow var(--vel-rapida) var(--curva-saida);
}
.ds-campo::placeholder { color: var(--texto-4); }
.ds-campo:focus {
  outline: none;
  border-color: var(--ambar-500);
  box-shadow: 0 0 0 3px rgba(210, 135, 74, 0.22);
}
.ds-campo[aria-invalid="true"] { border-color: #b4472e; }

.ds-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 9. surgimento ao rolar --------------------------------------- */

/* Nasce invisível SÓ quando o JavaScript está de pé (a classe .js entra no
   <html> por um script no <head>). Sem isso, JS quebrado apaga a página. */
.js .ds-surge {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--vel-lenta) var(--curva-expo),
    transform var(--vel-lenta) var(--curva-expo);
}
.js .ds-surge[data-visivel="sim"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .ds-surge { opacity: 1; transform: none; transition: none; }
}

/* ---------- 10. rodapé ---------------------------------------------------- */

.ds-rodape {
  padding-block: 40px;
  border-top: var(--fio) solid var(--borda);
  background: var(--fundo);
  position: relative;
  z-index: 1;
}
.ds-rodape .ds-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ds-rodape a { color: var(--texto-3); text-decoration: none; }
.ds-rodape a:hover { color: var(--texto); text-decoration: underline; }

/* ---------- 11. escada de títulos em telas pequenas ---------------------- */

@media (max-width: 720px) {
  :root {
    --titulo-6-tam: 2.25rem;
    --titulo-5-tam: 1.875rem;
    --titulo-4-tam: 1.5rem;
    --titulo-3-tam: 1.25rem;
  }
}

/* =============================================================================
   12. O RELÓGIO — os efeitos desta marca
   Um ciclo só, `--ciclo` (12 s), comanda tudo que roda em laço. Aos 25% do ciclo
   (o segundo 3) a página toca junto: o alarme toma a tela do aparelho, os anéis
   saem do símbolo e os anéis em escala de página saem de trás do aparelho.
   O mapa de cada efeito está em design-system/TECNOLOGIAS.md.
   ========================================================================== */

/* ---------- 12.1 o interruptor ------------------------------------------- */

/* Só anima o que está na tela. O JavaScript marca data-animando="sim" enquanto o
   bloco está visível (IntersectionObserver); fora dela o laço para — bateria no
   celular, e nada de CPU disputando com a rolagem. Sem JavaScript o bloco fica
   no estado de repouso, que é o estado que interessa: o alarme tocando. */
[data-ds-relogio] { --anima: paused; }
[data-ds-relogio][data-animando="sim"] { --anima: running; }

/* ---------- 12.2 o palco: os anéis do som em escala de página ------------ */

.ds-palco {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 30px;
  overflow: hidden;
}

/* O mostrador, parado: os dois anéis do símbolo em marca d'água atrás do aparelho.
   Dois radial-gradient, um anel cada. `closest-side` faz 100% valer meia largura,
   e aí a proporção sai direto da geometria medida da logo: o anel externo tem
   raio 28 de 32 (87,5%) e o interno 17,94 de 32 (56%). Sem imagem, sem elemento
   extra. Não use box-shadow inset para isto: o `transparent` de cima não apaga a
   cor de baixo, e o resultado é um disco chapado. */
.ds-palco::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(96%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle closest-side at 50% 50%,
      transparent 0 86.6%, var(--borda-forte) 86.6% 88.4%, transparent 88.4%),
    radial-gradient(circle closest-side at 50% 50%,
      transparent 0 55.1%, var(--borda-forte) 55.1% 56.9%, transparent 56.9%),
    radial-gradient(circle closest-side at 50% 50%,
      var(--fundo-2) 0 88%, transparent 88%);
}

/* os dois tempos do som, em escala de página: saem de trás do aparelho no mesmo
   instante em que o alarme toma a tela */
.ds-palco__anel {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--acento);
  opacity: 0;
  pointer-events: none;
}
.js [data-ds-relogio] .ds-palco__anel {
  animation: ds-toque-palco var(--ciclo) var(--curva-expo) infinite;
  animation-play-state: var(--anima);
}
.ds-palco__anel--2 { animation-delay: calc(var(--ciclo) * 0.035); }

@keyframes ds-toque-palco {
  0%, 24.9%   { transform: scale(0.92); opacity: 0; }
  25%         { transform: scale(0.92); opacity: 0.5; }
  42%         { transform: scale(1.85); opacity: 0; }
  42.1%, 100% { transform: scale(0.92); opacity: 0; }
}

/* ---------- 12.3 o aparelho e a tela ------------------------------------- */

/* A tela do app é HTML e CSS, nunca print: o app não tem screenshot (T3 da spec
   001). Pesa 0 KB e fica nítida em qualquer densidade. */
.ds-aparelho {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 244px;
  aspect-ratio: 9 / 17.5;
  border-radius: 28px;
  padding: 9px;
  background: var(--tinta-800);
  border: var(--fio) solid #4a5361;
  box-shadow: var(--sombra-alta);
}
.ds-tela {
  height: 100%;
  border-radius: 21px;
  overflow: hidden;
  display: grid;
  background: var(--tinta-900);
  color: var(--papel-100);
}
/* as duas camadas ocupam a mesma célula: a de bloqueio e a do alarme */
.ds-camada {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  text-align: center;
  min-width: 0;
}

/* ---------- 12.4 a tela de bloqueio: antes da hora ----------------------- */

.ds-bloqueio {
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(180deg, #262c36 0%, var(--tinta-900) 62%);
  opacity: 0;
}
.js [data-ds-relogio] .ds-bloqueio {
  animation: ds-bloqueio var(--ciclo) var(--curva-saida) infinite;
  animation-play-state: var(--anima);
}
.ds-bloqueio__data { font-size: var(--texto-micro-tam); color: var(--tinta-400); }
.ds-bloqueio__relogio {
  position: relative;
  display: grid;
  font-family: var(--font-numero);
  font-size: 3rem;
  font-weight: var(--peso-leve);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ds-bloqueio__relogio span { grid-area: 1 / 1; }
.js [data-ds-relogio] .ds-bloqueio__relogio [data-antes] {
  animation: ds-minuto-antes var(--ciclo) steps(1, end) infinite;
  animation-play-state: var(--anima);
}
.js [data-ds-relogio] .ds-bloqueio__relogio [data-depois] {
  animation: ds-minuto-depois var(--ciclo) steps(1, end) infinite;
  animation-play-state: var(--anima);
}
.ds-bloqueio__proximo {
  margin-top: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--raio-12);
  background: rgba(251, 245, 234, 0.06);
  border: var(--fio) solid rgba(251, 245, 234, 0.1);
  text-align: left;
}
.ds-bloqueio__hora {
  font-family: var(--font-numero);
  font-size: var(--texto-mini-tam);
  font-weight: var(--peso-medio);
  color: var(--ambar-300);
  flex: none;
}
.ds-bloqueio__nome { font-size: var(--texto-micro-tam); color: var(--tinta-300); min-width: 0; }
.ds-bloqueio__nome span { display: block; color: var(--tinta-400); font-size: 11px; }

@keyframes ds-bloqueio {
  0%, 23%    { opacity: 1; }
  25.5%, 68% { opacity: 0; }
  70%, 100%  { opacity: 1; }
}
@keyframes ds-minuto-antes {
  0%, 19%   { opacity: 1; }
  20%, 96%  { opacity: 0; }
  97%, 100% { opacity: 1; }
}
@keyframes ds-minuto-depois {
  0%, 19%   { opacity: 0; }
  20%, 96%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* ---------- 12.5 o alarme: a tela cheia --------------------------------- */

/* O repouso desta camada é VISÍVEL, e é de propósito: sem JavaScript, ou com
   movimento reduzido, o que fica na tela é o alarme tocando — a coisa que a
   página está vendendo. */
.ds-alarme {
  align-items: center;
  justify-content: center;
  gap: 5px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(210, 135, 74, 0.2) 0%, transparent 62%),
    var(--tinta-900);
}
.js [data-ds-relogio] .ds-alarme {
  animation: ds-alarme var(--ciclo) var(--curva-saida) infinite;
  animation-play-state: var(--anima);
}
.ds-alarme__agora {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar-300);
}
.ds-alarme__hora {
  font-family: var(--font-numero);
  font-size: clamp(3rem, 15vw, 3.75rem);
  font-weight: var(--peso-leve);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--papel-100);
}
.ds-alarme__nome { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ambar-300); }
.ds-alarme__fonte { font-size: 11px; color: var(--tinta-400); }
.ds-alarme__botao {
  margin-top: 10px;
  height: 36px;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--raio-redondo);
  background: rgba(251, 245, 234, 0.1);
  color: var(--tinta-300);
  font-family: var(--font-display);
  font-size: var(--texto-micro-tam);
}

@keyframes ds-alarme {
  0%, 23%    { opacity: 0; transform: scale(1.05); }
  25.5%, 68% { opacity: 1; transform: scale(1); }
  70%, 100%  { opacity: 0; transform: scale(1.05); }
}

/* ---------- 12.6 o desafio, e a resposta que aparece --------------------- */

.ds-desafio {
  margin-top: 12px;
  width: 100%;
  padding: 11px 10px;
  border-radius: var(--raio-12);
  background: rgba(210, 135, 74, 0.12);
  border: var(--fio) solid rgba(210, 135, 74, 0.34);
}
.js [data-ds-relogio] .ds-desafio {
  animation: ds-desafio var(--ciclo) var(--curva-saida) infinite;
  animation-play-state: var(--anima);
}
.ds-desafio__conta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-numero);
  font-size: 1.375rem;
  font-weight: var(--peso-medio);
  color: var(--ambar-300);
}
.ds-desafio__resposta { display: inline-flex; min-width: 1.6ch; justify-content: flex-start; }
.js [data-ds-relogio] .ds-desafio__resposta i {
  font-style: normal;
  opacity: 0;
  animation: ds-resposta var(--ciclo) steps(1, end) infinite;
  animation-play-state: var(--anima);
  animation-delay: calc(var(--ciclo) * var(--vez, 0));
}
.ds-desafio__cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  align-self: center;
  background: var(--ambar-500);
  opacity: 0;
}
.js [data-ds-relogio] .ds-desafio__cursor {
  animation:
    ds-cursor-vive var(--ciclo) steps(1, end) infinite,
    ds-pisca 0.9s steps(2, start) infinite;
  animation-play-state: var(--anima), var(--anima);
}
.ds-desafio__rotulo { position: relative; display: grid; margin-top: 3px; }
.ds-desafio__rotulo span { grid-area: 1 / 1; font-size: 11px; color: var(--tinta-300); }
.js [data-ds-relogio] .ds-desafio__rotulo [data-pedindo] {
  animation: ds-rotulo-pedindo var(--ciclo) steps(1, end) infinite;
  animation-play-state: var(--anima);
}
.ds-desafio__rotulo [data-desligado] { color: var(--ambar-300); opacity: 0; }
.js [data-ds-relogio] .ds-desafio__rotulo [data-desligado] {
  animation: ds-rotulo-desligado var(--ciclo) steps(1, end) infinite;
  animation-play-state: var(--anima);
}

@keyframes ds-desafio {
  0%, 54%    { background: rgba(210, 135, 74, 0.12); border-color: rgba(210, 135, 74, 0.34); }
  57%, 68%   { background: rgba(210, 135, 74, 0.26); border-color: var(--ambar-500); }
  70%, 100%  { background: rgba(210, 135, 74, 0.12); border-color: rgba(210, 135, 74, 0.34); }
}
@keyframes ds-resposta {
  0%, 41%   { opacity: 0; }
  42%, 69%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes ds-cursor-vive {
  0%, 25%   { opacity: 0; }
  26%, 47%  { opacity: 1; }
  48%, 100% { opacity: 0; }
}
@keyframes ds-pisca { to { visibility: hidden; } }
@keyframes ds-rotulo-pedindo {
  0%, 54%   { opacity: 1; }
  57%, 68%  { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes ds-rotulo-desligado {
  0%, 54%   { opacity: 0; }
  57%, 68%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* ---------- 12.7 o vilão: o aviso que some, o alarme que fica ------------ */

/* Os dois lados correm no MESMO ciclo. É essa simultaneidade que faz a
   comparação valer: enquanto os três avisos aparecem e somem, o cronômetro do
   alarme ao lado não para de subir. */
.ds-aviso {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--raio-12);
  background: var(--fundo-2);
  border: var(--fio) solid var(--borda);
  opacity: 0.62;
}
/* O aviso não some para o zero: ele volta a ser um fantasma. Some de verdade só
   da atenção — que é exatamente o que a dobra está dizendo. E assim o cartão
   nunca aparece vazio num quadro parado, que é como o Marco olha o print. */
.js [data-ds-relogio] .ds-aviso {
  opacity: 0.16;
  animation: ds-aviso-passa var(--ciclo) var(--curva-saida) infinite;
  animation-play-state: var(--anima);
  animation-delay: calc(var(--ciclo) * var(--vez, 0));
}
.ds-aviso__quadrado { width: 30px; height: 30px; border-radius: var(--raio-8); background: var(--borda-forte); flex: none; }
.ds-aviso__texto { min-width: 0; }
.ds-aviso__titulo { font-size: var(--texto-mini-tam); font-weight: 500; }
.ds-aviso__linha { font-size: var(--texto-micro-tam); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-aviso + .ds-aviso { margin-top: 8px; }

/* cada aviso dura dois segundos: entra em 0,4 s, fica 1,3 s e apaga */
@keyframes ds-aviso-passa {
  0%        { opacity: 0.16; translate: 0 -4px; }
  3.5%      { opacity: 0.78; translate: 0 0; }
  14%       { opacity: 0.78; translate: 0 0; }
  18%, 100% { opacity: 0.16; translate: 0 -4px; }
}

.ds-continua {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 22px 16px;
  border-radius: var(--raio-16);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(210, 135, 74, 0.22) 0%, transparent 64%),
    var(--tinta-900);
  border: var(--fio) solid rgba(210, 135, 74, 0.34);
  color: var(--papel-100);
  text-align: center;
}
.ds-continua__hora {
  font-family: var(--font-numero);
  font-size: 2.25rem;
  font-weight: var(--peso-leve);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ds-continua__nome { font-family: var(--font-display); font-size: 1rem; color: var(--ambar-300); }
.ds-continua__cronometro {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--raio-redondo);
  background: rgba(210, 135, 74, 0.16);
  font-family: var(--font-numero);
  font-size: var(--texto-mini-tam);
  font-variant-numeric: tabular-nums;
  color: var(--ambar-300);
}
.ds-continua__nota { margin-top: 12px; font-size: var(--texto-micro-tam); color: var(--tinta-300); }

/* ---------- 12.8 o ponto vivo -------------------------------------------- */

.ds-ponto-vivo {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--acento);
}
.ds-ponto-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--acento);
  animation: ds-pulso 2.4s var(--curva-expo) infinite;
}
@keyframes ds-pulso {
  0%        { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- 12.9 o brilho que segue o cursor ----------------------------- */

/* O JavaScript só escreve --brilho-x e --brilho-y a cada pointermove; quem
   desenha é o CSS. Em toque, não existe: nada é escrito e a opacidade fica 0. */
.ds-brilho { position: relative; }
.ds-brilho::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--brilho-x, 50%) var(--brilho-y, 0%),
    rgba(210, 135, 74, 0.26), transparent 62%);
  opacity: 0;
  transition: opacity var(--vel-normal) var(--curva-saida);
}
.ds-brilho:hover::after { opacity: 1; }

/* ---------- 13. movimento reduzido -------------------------------------- */

/* Quem pediu menos movimento não recebe nenhum. Toda animação e toda transição
   caem para 0,01 ms e rodam uma vez só; o que sobra na tela é o estado de
   repouso declarado no CSS — o alarme tocando, os textos visíveis. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .ds-surge { opacity: 1; transform: none; }
  .js [data-ds-relogio] .ds-aviso { opacity: 0.62; }
  .js [data-ds-relogio] .ds-desafio__resposta i { opacity: 1; }
}