/* ============ REVEAL AO ROLAR ============ */
/* Só esconde quando o JS está presente (html.js); sem JS tudo aparece. */
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ============ FORMAS FLUTUANTES DO HERO ============ */
.hero__shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shape { position: absolute; display: block; opacity: 0.9; animation: float 7s ease-in-out infinite; }
.shape--sun {
  width: 120px; height: 120px; border-radius: 50%; top: 8%; right: 8%;
  background: var(--color-accent-yellow);
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--color-accent-yellow) 30%, transparent);
  animation-duration: 9s;
}
.shape--cloud {
  width: 110px; height: 44px; border-radius: var(--radius-pill); background: var(--color-surface);
  box-shadow: var(--shadow-sm); animation-duration: 11s;
}
.shape--cloud::before { content: ""; position: absolute; left: 22px; top: -22px; width: 48px; height: 48px; border-radius: 50%; background: inherit; }
.shape--cloud-1 { top: 18%; left: 4%; }
.shape--cloud-2 { bottom: 22%; right: 20%; animation-delay: -4s; }
.shape--heart {
  width: 36px; height: 36px; background: var(--color-primary); top: 60%; left: 12%;
  transform: rotate(45deg); animation-delay: -2s;
}
.shape--heart::before, .shape--heart::after { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: inherit; }
.shape--heart::before { left: -18px; } .shape--heart::after { top: -18px; }
.shape--star {
  width: 40px; height: 40px; top: 30%; right: 30%; background: var(--color-accent-lilac);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation-delay: -5s;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-16px) rotate(var(--rot, 0deg)); }
}
.shape--heart { --rot: 45deg; }
@media (min-width: 1024px) {
  /* com a foto à direita, texto e foto ocupam o centro: as formas vão para as bordas */
  .shape--heart { top: 88%; left: 4%; }
  .shape--star { top: 14%; right: 46%; }
}
@media (max-width: 639px) {
  .shape--sun { width: 80px; height: 80px; box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-accent-yellow) 30%, transparent); }
  .shape--cloud-1 { top: 6%; left: 2%; width: 80px; height: 32px; }
  .shape--cloud-1::before { width: 36px; height: 36px; top: -16px; left: 16px; }
  .shape--heart { display: none; }
  .shape--cloud-2, .shape--star { display: none; }
}

/* ============ PÁSSAROS ============ */
.bird {
  position: absolute; width: 40px; height: 15px; left: -60px; overflow: visible;
  fill: none; stroke: var(--color-text); stroke-width: 3; stroke-linecap: round; opacity: 0.55;
  animation: fly var(--fly-duration, 22s) linear infinite; animation-delay: var(--fly-delay, 0s);
}
.bird__wing { transform-origin: 32px 14px; animation: flap 0.8s ease-in-out infinite alternate; }
.bird__wing--r { animation-name: flap-r; }
.bird--1 { top: 18%; --fly-duration: 24s; --fly-delay: -6s; }
.bird--2 { top: 26%; --fly-duration: 30s; --fly-delay: -18s; width: 28px; height: 11px; opacity: 0.4; }
.bird--3 { top: 12%; --fly-duration: 27s; --fly-delay: -12s; width: 34px; height: 13px; opacity: 0.45; }
@keyframes fly {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(calc(25vw + 15px), -14px); }
  50%  { transform: translate(calc(50vw + 30px), 6px); }
  75%  { transform: translate(calc(75vw + 45px), -10px); }
  100% { transform: translate(calc(100vw + 120px), 0); }
}
@keyframes flap   { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
@keyframes flap-r { from { transform: rotate(18deg); } to { transform: rotate(-22deg); } }
@media (max-width: 639px) { .bird--2 { display: none; } }

/* ============ ONDA DIVISÓRIA ============ */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; fill: var(--color-bg); }

/* ============ FUNDO COM CONFETE SUTIL ============ */
.section--tint {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 18%, transparent) 2px, transparent 2.5px),
    radial-gradient(circle, color-mix(in srgb, var(--color-secondary) 18%, transparent) 2px, transparent 2.5px);
  background-size: 48px 48px, 64px 64px; background-position: 0 0, 24px 32px;
}

/* ============ BOTÕES: BRILHO DESLIZANTE ============ */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-overlay-light), transparent);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}
.btn:hover::after { transform: translateX(100%); }

/* ============ FAB: PULSO ============ */
.fab-whatsapp::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--color-whatsapp); z-index: -1; animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }

/* ============ ÍCONES DOS CARDS: MICRO-BOUNCE ============ */
html.js .reveal.is-visible .card__icon { animation: bounce-in 600ms var(--transition-base) both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes bounce-in { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ============ REDUÇÃO DE MOVIMENTO ============ */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
  .shape, .fab-whatsapp::before, .card__icon, .bird, .bird__wing { animation: none !important; }
  .bird { display: none; }
  .btn::after { display: none; }
}