/* ==========================================================
   FUNDO DO CLUBE ENTRELINHAS

   Este é o arquivo mais fácil para personalizar o fundo.
   Depois de alterar uma cor ou posição, salve com Ctrl + S
   e atualize o navegador com Ctrl + R.
   ========================================================== */

:root {
  /* Cor do papel ao fundo */
  --fundo-papel: #fffefa;

  /* Cores das manchas grandes e transparentes */
  --mancha-verde-clara: rgba(224, 229, 214, 0.66);
  --mancha-verde-rodape: rgba(198, 211, 191, 0.72);
  --mancha-pessego: rgba(250, 207, 187, 0.62);
}

body {
  background-color: var(--fundo-papel);
}

main {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /*
     Cada radial-gradient cria uma mancha arredondada.
     Os dois últimos valores controlam o fundo marfim.
  */
  background:
    radial-gradient(
      ellipse 37rem 25rem at 17% 25%,
      var(--mancha-verde-clara) 0%,
      rgba(244, 243, 236, 0.42) 58%,
      transparent 59%
    ),
    radial-gradient(
      ellipse 29rem 34rem at 101% 92%,
      var(--mancha-pessego) 0%,
      rgba(250, 226, 211, 0.45) 56%,
      transparent 57%
    ),
    radial-gradient(
      ellipse 21rem 24rem at -3% 87%,
      var(--mancha-verde-rodape) 0%,
      rgba(224, 231, 216, 0.48) 60%,
      transparent 61%
    ),
    linear-gradient(180deg, #ffffff 0%, var(--fundo-papel) 58%, #faf8f1 100%);
}

/* Configuração comum das quatro folhagens */
main::before,
.botanical-top,
.history-section::before,
.history-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Galho com contorno, na lateral esquerda */
main::before {
  z-index: -1;
  width: 175px;
  height: 330px;
  left: 8px;
  top: 165px;
  opacity: 0.85;
  background-image: url("botanical-left.svg");
}

/* Galho verde no canto superior direito */
.botanical-top {
  z-index: 1;
  width: min(34vw, 520px);
  height: 180px;
  right: -8px;
  top: -5px;
  background-image: url("botanical-top-right.svg");
}

/* Folhagem no canto inferior esquerdo */
.history-section::before {
  z-index: -1;
  width: 330px;
  height: 230px;
  left: -22px;
  bottom: -6px;
  opacity: 0.85;
  background-image: url("botanical-bottom-left.svg");
}

/* Folhagem com contorno no canto inferior direito */
.history-section::after {
  z-index: -1;
  width: 240px;
  height: 330px;
  right: -22px;
  bottom: -55px;
  opacity: 0.72;
  background-image: url("botanical-bottom-right.svg");
}

/* Fundo adaptado para celular */
@media (max-width: 760px) {
  main {
    background:
      radial-gradient(ellipse 25rem 20rem at 30% 13%, var(--mancha-verde-clara), transparent 65%),
      radial-gradient(ellipse 18rem 25rem at 110% 94%, var(--mancha-pessego), transparent 65%),
      linear-gradient(180deg, #ffffff, var(--fundo-papel));
  }

  main::before {
    width: 105px;
    height: 210px;
    left: -35px;
    top: 170px;
    opacity: 0.28;
  }

  .botanical-top {
    width: 230px;
    height: 95px;
    right: -35px;
    opacity: 0.30;
  }

  .history-section::before {
    width: 190px;
    height: 140px;
    left: -55px;
    opacity: 0.38;
  }

  .history-section::after {
    width: 145px;
    height: 220px;
    right: -42px;
    opacity: 0.38;
  }
}