/* Fundo decorado — camada de formas atras do conteudo.
   Par em PHP: inc/fundo.php
   Imagens:    ../img/decor/ (caminhos relativos a esta folha)

   Sem a camada o bege fica chapado. Com ela, o fundo ganha profundidade sem
   disputar atencao com o conteudo: opacidades baixas, nada por cima de texto. */

/* A cor vai para o html e o body fica transparente, senao o fundo do body
   taparia a camada (que precisa ficar em z-index negativo). */
html { background-color: var(--wp--preset--color--areia); }
body.tem-fundo-decorado { background-color: transparent; }

.jhonys-fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.jhonys-fundo__forma {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: rotate(var(--giro, 0deg));
}

/* --- as formas ---
   --giro   inclinacao fixa
   --deriva quanto a forma escorrega ao longo da rolagem (profundidade) */

.jhonys-fundo__forma--leaf {
  background-image: url(../img/decor/leaf.webp);
  width: clamp(96px, 11vw, 200px);
  aspect-ratio: 208 / 265;
  top: 11%;
  right: 5%;
  opacity: .42;
  --giro: -10deg;
  --deriva: -120px;
}

.jhonys-fundo__forma--chilli {
  background-image: url(../img/decor/chilli.webp);
  width: clamp(104px, 12vw, 215px);
  aspect-ratio: 253 / 289;
  bottom: 12%;
  left: 1.5%;
  opacity: .16;
  --giro: 8deg;
  --deriva: 95px;
}

.jhonys-fundo__forma--burger-pattern-1 {
  background-image: url(../img/decor/burger-pattern-1.webp);
  width: clamp(150px, 17vw, 305px);
  aspect-ratio: 360 / 329;
  top: 14%;
  left: 1%;
  opacity: .15;
  --giro: -5deg;
  --deriva: -70px;
}

.jhonys-fundo__forma--onion {
  background-image: url(../img/decor/onion.webp);
  width: clamp(100px, 11vw, 200px);
  aspect-ratio: 240 / 292;
  bottom: 9%;
  right: 3%;
  opacity: .13;
  --giro: 12deg;
  --deriva: 130px;
}

.jhonys-fundo__forma--pattern-1 {
  background-image: url(../img/decor/pattern-1.webp);
  width: clamp(48px, 5vw, 80px);
  aspect-ratio: 76 / 16;
  top: 14%;
  left: 46%;
  opacity: .5;
  --giro: -4deg;
  --deriva: -55px;
}

.jhonys-fundo__forma--pattern-4 {
  background-image: url(../img/decor/pattern-4.webp);
  width: clamp(34px, 3.4vw, 52px);
  aspect-ratio: 41 / 24;
  bottom: 3%;
  right: 40%;
  opacity: .45;
  --giro: 10deg;
  --deriva: 70px;
}

/* --- movimento ---
   Deriva presa a rolagem, nao um laco que roda para sempre: parado na tela,
   nada se mexe e nada consome bateria. Onde nao houver suporte, as formas
   ficam onde estao — que ja e o desenho estatico. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .jhonys-fundo__forma {
      animation: jhonys-deriva linear both;
      animation-timeline: scroll(root block);
      will-change: transform;
    }

    @keyframes jhonys-deriva {
      to {
        transform: rotate(var(--giro, 0deg)) translate3d(0, var(--deriva, 0), 0);
      }
    }
  }
}

/* --- telas pequenas ---
   Seis formas em 375px viram sujeira. Ficam duas, menores e mais discretas. */
@media (max-width: 781px) {
  .jhonys-fundo__forma--burger-pattern-1,
  .jhonys-fundo__forma--onion,
  .jhonys-fundo__forma--pattern-4 {
    display: none;
  }

  .jhonys-fundo__forma--leaf { opacity: .32; top: 7%; right: 2%; }
  .jhonys-fundo__forma--chilli { opacity: .12; }
  .jhonys-fundo__forma--pattern-1 { opacity: .4; left: auto; right: 8%; }
}