/*
 * Formação de Registros Akáshicos 2026 — refinamento visual do hero e movimento.
 * Mantido separado do design system para facilitar rollback e ajustes finos.
 */

/* ---------- atmosfera geral ---------- */
main {
  background-image:
    radial-gradient(48rem 38rem at -8% 24%, oklch(0.56 0.21 305 / 0.08), transparent 70%),
    radial-gradient(42rem 34rem at 108% 48%, oklch(0.83 0.14 86 / 0.055), transparent 72%),
    radial-gradient(42rem 34rem at 12% 76%, oklch(0.7 0.2 320 / 0.055), transparent 72%);
}

main > section:not(:first-of-type) {
  position: relative;
  isolation: isolate;
}

main > section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  left: -10rem;
  width: 25rem;
  height: 25rem;
  border-radius: 9999px;
  background: radial-gradient(circle, oklch(0.56 0.21 305 / 0.085), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

main > section:nth-of-type(3n)::before {
  left: auto;
  right: -11rem;
  background: radial-gradient(circle, oklch(0.83 0.14 86 / 0.06), transparent 68%);
}

/* ---------- hero: background específico PC ---------- */
main > section:first-of-type {
  overflow: hidden;
  background-color: oklch(0.075 0.04 300);
  background-image:
    linear-gradient(90deg, oklch(0.055 0.025 300 / 0.52) 0%, oklch(0.07 0.035 302 / 0.2) 48%, oklch(0.055 0.025 300 / 0.28) 100%),
    linear-gradient(180deg, transparent 52%, oklch(0.055 0.025 300 / 0.96) 100%),
    url("/formacao/hero-background-desktop.webp");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  box-shadow: inset 0 -1px 0 oklch(0.83 0.14 86 / 0.2);
}

main > section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 16%,
    oklch(0.95 0.09 100 / 0.015) 33%,
    oklch(0.83 0.14 86 / 0.075) 43%,
    transparent 58%
  );
  transform: translate3d(-75%, 0, 0);
  animation: hero-light-sweep 12s ease-in-out infinite;
  will-change: transform;
}

/* Michelle ganha vida sem deslocar livros/elementos da composição. */
main > section:first-of-type img[alt^="Michelle Gil, mentora"] {
  animation: portrait-breathe 7s ease-in-out infinite;
  transform-origin: 50% 70%;
}

/* Badge mais luminoso, mas ainda sofisticado. */
main > section:first-of-type span:first-child {
  box-shadow:
    inset 0 1px 0 oklch(0.95 0.09 100 / 0.12),
    0 8px 28px -16px oklch(0.83 0.14 86 / 0.7);
}

/* ---------- mobile: Michelle abre a página ---------- */
@media (max-width: 767px) {
  body {
    background-attachment: scroll;
  }

  main > section:first-of-type {
    padding-top: 0 !important;
    background-image:
      linear-gradient(180deg, oklch(0.055 0.025 300 / 0.08) 0%, oklch(0.06 0.03 300 / 0.44) 42%, oklch(0.055 0.025 300 / 0.96) 82%, oklch(0.055 0.025 300) 100%),
      radial-gradient(26rem 18rem at 18% 8%, oklch(0.83 0.14 86 / 0.13), transparent 72%),
      url("/formacao/hero-background-mobile.webp");
    background-size: cover;
    background-position: center top;
  }

  /* grid do hero */
  main > section:first-of-type > div:last-child {
    gap: 0 !important;
  }

  /* coluna de copy: a composição da Michelle vira o primeiro item visual */
  main > section:first-of-type > div:last-child > div:first-child > div:first-of-type {
    order: -3;
    width: calc(100% + 2.5rem) !important;
    margin: -0.35rem -1.25rem 0 !important;
    position: relative;
    z-index: 2;
  }

  /* amplia a Michelle no primeiro impacto sem cortar o rosto */
  main > section:first-of-type > div:last-child > div:first-child > div:first-of-type > div {
    width: min(112vw, 31.5rem) !important;
    max-width: none !important;
    transform-origin: top center;
  }

  /* badge sobre a parte inferior da foto */
  main > section:first-of-type > div:last-child > div:first-child > span:first-child {
    order: -2;
    position: relative;
    z-index: 30;
    margin-top: -3.6rem !important;
    margin-bottom: 1.35rem !important;
    border-color: oklch(0.83 0.14 86 / 0.58) !important;
    background: oklch(0.095 0.055 300 / 0.76) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
      inset 0 1px 0 oklch(0.95 0.09 100 / 0.14),
      0 12px 30px -13px oklch(0.83 0.14 86 / 0.78),
      0 0 28px oklch(0.7 0.2 320 / 0.12);
  }

  /* headline e toda a copy passam a vir depois da foto/badge */
  main > section:first-of-type > div:last-child > div:first-child > h1 {
    order: -1;
    position: relative;
    z-index: 4;
    margin-top: 0;
  }

  main > section:first-of-type > div:last-child > div:first-child > p:first-of-type {
    margin-top: 1rem;
  }
}

@media (max-width: 390px) {
  main > section:first-of-type > div:last-child > div:first-child > div:first-of-type > div {
    width: min(116vw, 29rem) !important;
  }

  main > section:first-of-type > div:last-child > div:first-child > span:first-child {
    margin-top: -3.25rem !important;
    padding-inline: 0.82rem !important;
    letter-spacing: 0.13em !important;
  }
}

/* ---------- CTAs: brilho e chamada de atenção ---------- */
.cta-gold {
  isolation: isolate;
  animation: cta-breathe 3.25s ease-in-out infinite;
  box-shadow:
    0 18px 45px -18px oklch(0.83 0.14 86 / 0.55),
    0 0 0 1px oklch(0.95 0.09 100 / 0.09);
}

.cta-gold::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.42),
    inset 0 -7px 18px oklch(0.62 0.12 70 / 0.09);
}

.cta-gold:hover {
  box-shadow:
    0 22px 52px -17px oklch(0.83 0.14 86 / 0.72),
    0 0 32px -5px oklch(0.95 0.09 100 / 0.48),
    0 0 0 1px oklch(0.95 0.09 100 / 0.16);
}

main a[href*="api.whatsapp.com"] {
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 42px -25px oklch(0.83 0.14 86 / 0.7);
  animation: outline-breathe 4.6s ease-in-out infinite;
}

/* ---------- cards e divisores mais vivos ---------- */
.surface-card {
  position: relative;
  overflow: hidden;
}

.surface-card::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -28%;
  width: 17%;
  transform: translate3d(-220%, 0, 0) rotate(13deg);
  background: linear-gradient(90deg, transparent, oklch(0.95 0.09 100 / 0.09), transparent);
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.surface-card:hover::after {
  transform: translate3d(760%, 0, 0) rotate(13deg);
}

.divider-gold {
  position: relative;
  overflow: visible;
}

.divider-gold::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--gold-light);
  box-shadow: 0 0 14px 4px oklch(0.83 0.14 86 / 0.52);
  transform: translate3d(-10px, -50%, 0);
  animation: divider-spark 8s ease-in-out infinite;
}

@keyframes hero-light-sweep {
  0%, 68%, 100% { transform: translate3d(-75%, 0, 0); opacity: 0.18; }
  82% { transform: translate3d(62%, 0, 0); opacity: 0.72; }
}

@keyframes portrait-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -5px, 0) scale(1.008); }
}

@keyframes cta-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 oklch(0.83 0.14 86 / 0)); }
  50% { filter: drop-shadow(0 0 12px oklch(0.83 0.14 86 / 0.42)); }
}

@keyframes outline-breathe {
  0%, 100% { box-shadow: 0 18px 42px -25px oklch(0.83 0.14 86 / 0.52); }
  50% { box-shadow: 0 18px 44px -18px oklch(0.83 0.14 86 / 0.72), 0 0 22px -12px oklch(0.7 0.2 320 / 0.48); }
}

@keyframes divider-spark {
  0%, 12% { left: 0%; opacity: 0; }
  20% { opacity: 1; }
  78% { opacity: 1; }
  88%, 100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  main > section:first-of-type::after,
  main > section:first-of-type img[alt^="Michelle Gil, mentora"],
  .cta-gold,
  main a[href*="api.whatsapp.com"],
  .divider-gold::after {
    animation: none !important;
  }
}