/* ---------- Pétalas soltas pela página ----------
   As 3 formas da lótus do logo (central, média, lateral), como as folhas da LP da iscool.
   A forma vem do SVG como máscara e a cor do CSS; o filtro (sombra ou desfoque) fica no
   elemento de fora, porque a máscara recortaria a sombra.
   "Perto": maior, nítida, com sombra, anda mais ao rolar. "Longe": menor, desfocada, anda menos.
   Ficam atrás do conteúdo (z-index -1 dentro da seção, que tem isolation: isolate). */

.petala {
  --tam: 64px;
  --giro: 0deg;
  --viagem: 60px;
  position: absolute;
  z-index: -1;
  width: var(--tam);
  aspect-ratio: var(--proporcao);
  rotate: var(--giro);
  pointer-events: none;
}
.petala::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cor);
  -webkit-mask: var(--forma) center / contain no-repeat;
  mask: var(--forma) center / contain no-repeat;
}

.petala--central { --forma: url('../img/petala-central.svg'); --proporcao: 17.2 / 28.7; }
.petala--media { --forma: url('../img/petala-media.svg'); --proporcao: 19.1 / 20.5; }
.petala--lateral { --forma: url('../img/petala-lateral.svg'); --proporcao: 26.8 / 18.1; }

.petala--perto {
  --cor: linear-gradient(155deg, #f3e9b4 0%, var(--manteiga) 42%, #c98a4e 100%);
  --viagem: 48px; /* no celular anda pouco, para não cruzar o texto da seção vizinha */
  filter: drop-shadow(0 18px 26px rgb(20 6 6 / 0.45));
}
.petala--longe {
  --cor: linear-gradient(160deg, var(--rose) 0%, var(--malva) 70%);
  --viagem: 24px;
  opacity: 0.75;
  filter: blur(2px);
}

/* Celular: só as que não brigam com o texto, menores e sangrando pela borda */
.petala--desk { display: none; }

.p-enc-1 { --tam: 74px; --giro: 24deg; top: 24px; right: -14px; }
.p-enc-2 { --tam: 52px; --giro: -32deg; bottom: 9%; left: -18px; }
.p-ori-1 { --tam: 54px; --giro: 38deg; top: 14%; left: 6%; }
.p-por-1 { --tam: 70px; --giro: 62deg; top: 26px; right: -20px; }
.p-pq-1 { --tam: 56px; --giro: -24deg; top: 6%; left: -10px; }
.p-pq-2 { --tam: 44px; --giro: 28deg; top: 10px; right: -10px; }
.p-como-1 { --tam: 60px; --giro: -48deg; top: 30px; right: -16px; }
.p-cand-1 { --tam: 70px; --giro: 34deg; bottom: 4%; left: -22px; }
.p-cand-2 { --tam: 46px; --giro: -40deg; top: 10px; right: -10px; }

@media (min-width: 1024px) {
  .petala--desk { display: block; }
  .petala--perto { --viagem: 110px; }
  .petala--longe { --viagem: 45px; }

  .p-hero-1 { --tam: 64px; --giro: 26deg; top: 20%; left: 44%; opacity: 0.5; }
  .p-hero-2 { --tam: 120px; --giro: -18deg; bottom: 7%; left: 2%; }
  .p-enc-1 { --tam: 210px; --giro: 22deg; top: -60px; right: 5%; }
  .p-enc-2 { --tam: 110px; --giro: -34deg; bottom: 14%; left: 2%; }
  .p-ori-1 { --tam: 104px; --giro: 40deg; top: auto; bottom: 12%; left: auto; right: 5%; }
  .p-por-1 { --tam: 160px; --giro: 60deg; top: 70px; right: 6%; }
  .p-por-2 { --tam: 120px; --giro: -14deg; bottom: -50px; left: 3%; }
  .p-pq-1 { --tam: 180px; --giro: -26deg; top: 14%; left: 7%; }
  .p-pq-2 { --tam: 120px; --giro: 30deg; top: 8%; right: 9%; }
  .p-como-1 { --tam: 150px; --giro: -50deg; top: 50px; right: 7%; }
  /* o h2 "Perguntas" e a intro da candidatura ficam presos na coluna esquerda ao rolar:
     as pétalas dessas seções vão para a direita, saindo por trás do conteúdo */
  .p-faq-1 { --tam: 120px; --giro: 18deg; top: 4%; right: 3%; }
  .p-cand-1 { --tam: 180px; --giro: 36deg; bottom: 6%; left: auto; right: -50px; }
  .p-cand-2 { --tam: 110px; --giro: -42deg; top: 3%; right: 5%; }
}

/* ---------- Parallax ao rolar ----------
   Animação ligada à rolagem (CSS scroll-driven), sem listener de scroll.
   Navegador sem suporte mostra tudo parado; "reduzir movimento" também. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .petala {
      animation: petala-flutua linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .carrossel__linha {
      animation: carrossel-desliza linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .carrossel__linha--inversa { animation-direction: reverse; }
  }
}
@keyframes petala-flutua {
  from { translate: 0 var(--viagem); rotate: calc(var(--giro) - 12deg); }
  to { translate: 0 calc(var(--viagem) * -1); rotate: calc(var(--giro) + 12deg); }
}
@keyframes carrossel-desliza {
  from { translate: 6% 0; }
  to { translate: -6% 0; }
}