/* ==========================================================================
   QUEBRA EM PAPEL RASGADO — a seção clara arranca um pedaço do escuro
   Prefixo: torn-
   Tokens usados: --dark (só no invólucro; a seção continua lendo o próprio
   escopo de tom, este componente nunca toca em --fg nem em --bg)

   Duas peças, e a ordem importa:
     .torn-band   invólucro que pinta a cor que aparece DENTRO do rasgo
     .torn        a seção recortada

   clip-path não desenha: ele apaga. O que aparece no lugar do pedaço
   arrancado é o que estiver pintado ATRÁS da seção — nunca a seção vizinha,
   que fica ao lado e não embaixo. Por isso o invólucro existe, e por isso
   ele é a única parte do componente que lê uma cor.

   O polígono tem 58 vértices — 29 em cima, 29 embaixo — espaçados a cada
   3,571% da largura. Ele é FIXO, não sorteado: a mesma marca de rasgo em
   toda a página, como uma folha de verdade. Ruído diferente por seção lê
   como bug, não como papel.

   A profundidade de cada vértice é uma medida em px multiplicada por um
   knob. São três, e nenhum deles precisa que o polígono seja reescrito:
     --torn-depth  escala geral do rasgo (1 = padrão, mordida máxima 22px)
     --torn-top    profundidade da borda de cima  (0 = borda reta)
     --torn-bot    profundidade da borda de baixo (0 = borda reta)
     --torn-behind cor que aparece dentro do rasgo (no .torn-band)
   ========================================================================== */

/* O invólucro é um <div>, não uma <section>: ele é decoração e não pode
   virar landmark falso para leitor de tela. Só existe para garantir a cor
   do vão — se o fundo da página já for exatamente a cor que você quer ver
   dentro do rasgo, ele pode ser dispensado. */
.torn-band{
  --torn-behind:var(--dark);
  background:var(--torn-behind);
}

.torn{
  --torn-depth:1;
  --torn-top:var(--torn-depth);
  --torn-bot:var(--torn-depth);

  clip-path:polygon(
    /* ---- borda de cima, da esquerda para a direita ---- */
    0.0% calc(15px * var(--torn-top)),    3.6% calc(3px * var(--torn-top)),    7.1% calc(8px * var(--torn-top)),
    10.7% calc(7px * var(--torn-top)),   14.3% calc(17px * var(--torn-top)),  17.9% calc(16px * var(--torn-top)),
    21.4% calc(20px * var(--torn-top)),  25.0% calc(4px * var(--torn-top)),   28.6% calc(10px * var(--torn-top)),
    32.1% calc(3px * var(--torn-top)),   35.7% calc(6px * var(--torn-top)),   39.3% calc(12px * var(--torn-top)),
    42.9% calc(3px * var(--torn-top)),   46.4% calc(6px * var(--torn-top)),   50.0% calc(15px * var(--torn-top)),
    53.6% calc(13px * var(--torn-top)),  57.1% calc(6px * var(--torn-top)),   60.7% calc(14px * var(--torn-top)),
    64.3% calc(18px * var(--torn-top)),  67.9% calc(2px * var(--torn-top)),   71.4% calc(18px * var(--torn-top)),
    75.0% calc(16px * var(--torn-top)),  78.6% calc(9px * var(--torn-top)),   82.1% calc(5px * var(--torn-top)),
    85.7% calc(21px * var(--torn-top)),  89.3% calc(9px * var(--torn-top)),   92.9% calc(4px * var(--torn-top)),
    96.4% calc(4px * var(--torn-top)),  100.0% calc(19px * var(--torn-top)),

    /* ---- borda de baixo, da direita para a esquerda ---- */
    100.0% calc(100% - 17px * var(--torn-bot)),  96.4% calc(100% - 5px * var(--torn-bot)),
     92.9% calc(100% - 14px * var(--torn-bot)),  89.3% calc(100% - 15px * var(--torn-bot)),
     85.7% calc(100% - 21px * var(--torn-bot)),  82.1% calc(100% - 7px * var(--torn-bot)),
     78.6% calc(100% - 6px * var(--torn-bot)),   75.0% calc(100% - 9px * var(--torn-bot)),
     71.4% calc(100% - 9px * var(--torn-bot)),   67.9% calc(100% - 15px * var(--torn-bot)),
     64.3% calc(100% - 8px * var(--torn-bot)),   60.7% calc(100% - 4px * var(--torn-bot)),
     57.1% calc(100% - 7px * var(--torn-bot)),   53.6% calc(100% - 4px * var(--torn-bot)),
     50.0% calc(100% - 8px * var(--torn-bot)),   46.4% calc(100% - 7px * var(--torn-bot)),
     42.9% calc(100% - 3px * var(--torn-bot)),   39.3% calc(100% - 16px * var(--torn-bot)),
     35.7% calc(100% - 14px * var(--torn-bot)),  32.1% calc(100% - 19px * var(--torn-bot)),
     28.6% calc(100% - 14px * var(--torn-bot)),  25.0% calc(100% - 19px * var(--torn-bot)),
     21.4% calc(100% - 13px * var(--torn-bot)),  17.9% calc(100% - 10px * var(--torn-bot)),
     14.3% calc(100% - 22px * var(--torn-bot)),  10.7% calc(100% - 13px * var(--torn-bot)),
      7.1% calc(100% - 17px * var(--torn-bot)),   3.6% calc(100% - 18px * var(--torn-bot)),
      0.0% calc(100% - 14px * var(--torn-bot))
  );
}

/* Rasga só uma das bordas. Zerar o knob do outro lado é o que mantém o
   polígono único: não existe um segundo clip-path escrito à mão para cada
   variação, e por isso os breakpoints abaixo não ressuscitam a borda reta —
   eles mexem em --torn-depth, que já foi consumido aqui. */
.torn--top{--torn-bot:0}
.torn--bottom{--torn-top:0}

/* ---- mobile ----
   A profundidade é px e o espaçamento é %, então a inclinação do rasgo muda
   com a largura da tela. Em 1240px cada dente tem 44px de base para 22px de
   altura e lê como papel; em 375px a base cai para 13px e a mesma altura
   vira serra. Encolher a mordida é o que preserva a leitura. */
@media(max-width:900px){
  .torn{--torn-depth:.72}
}
@media(max-width:560px){
  .torn{--torn-depth:.5}
}