/* ==========================================================================
   SEÇÃO "MÉTODO" — MOTION EDITION
   Seção fixa na tela enquanto rola (pin); a lista de passos destaca o
   item ativo e a cena isométrica ao lado reage a cada passo.
   ========================================================================== */

.lumina-process-motion {
  position: relative;
  background: var(--lumina-navy-950);
  color: var(--color-text-on-dark);
}

.lumina-process-motion__pin {
  /* Precisa da própria cor de fundo (não basta a do .lumina-process-motion
     pai): quando o GSAP/ScrollTrigger fixa este elemento (position: fixed)
     para o efeito de pin, ele passa a empilhar por cima do conteúdo da
     página normalmente, e sem um fundo próprio o navy some e deixa a
     seção anterior "vazar" por trás durante a rolagem. */
  position: relative;
  background: var(--lumina-navy-950);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.lumina-process-motion__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

/* ---------- Coluna da lista ---------- */
.lumina-process-motion__list-col .lumina-eyebrow { margin-bottom: 0.6rem; }

.lumina-process-motion__list-col h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: #fff;
  margin-bottom: 2.4rem;
}

.lumina-process-motion__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lumina-process-motion__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  border-radius: var(--radius-md);
  transition: background var(--dur-med) var(--ease-lumina);
}

.lumina-process-motion__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--color-text-on-dark-muted);
  border: 1px solid var(--color-border-on-dark);
  transition: background var(--dur-med) var(--ease-lumina),
              color var(--dur-med) var(--ease-lumina),
              border-color var(--dur-med) var(--ease-lumina);
}

.lumina-process-motion__item-body h3 {
  font-size: 1.05rem;
  color: var(--color-text-on-dark-muted);
  margin: 0.25rem 0 0;
  transition: color var(--dur-med) var(--ease-lumina);
}

.lumina-process-motion__desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--color-text-on-dark-muted);
  font-size: 0.92rem;
  margin: 0.4rem 0 0;
  transition: max-height var(--dur-med) var(--ease-lumina),
              opacity var(--dur-fast) var(--ease-lumina);
}

.lumina-process-motion__item.is-active .lumina-process-motion__num {
  background: var(--color-accent);
  color: var(--lumina-navy-950);
  border-color: var(--color-accent);
}

.lumina-process-motion__item.is-active .lumina-process-motion__item-body h3 {
  color: #fff;
}

.lumina-process-motion__item.is-active .lumina-process-motion__desc {
  max-height: 6rem;
  opacity: 1;
}

/* ---------- Coluna da cena ---------- */
.lumina-process-motion__scene-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lumina-process-motion__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 520px;
  perspective: 1400px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(39, 65, 104, 0.4), transparent 70%);
}

.lumina-process-motion__grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(45deg, rgba(226, 181, 79, 0.1) 25%, transparent 25%, transparent 75%, rgba(226, 181, 79, 0.1) 75%, rgba(226, 181, 79, 0.1)),
    linear-gradient(45deg, rgba(226, 181, 79, 0.1) 25%, transparent 25%, transparent 75%, rgba(226, 181, 79, 0.1) 75%, rgba(226, 181, 79, 0.1)),
    linear-gradient(rgba(167, 175, 189, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 175, 189, 0.06) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 32px 32px, 32px 32px;
  background-position: 0 0, 32px 32px, 0 0, 0 0;
  transform: rotateX(58deg) rotateZ(45deg) scale(1.6);
  transform-style: preserve-3d;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, black 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, black 40%, transparent 78%);
}

.lumina-process-motion__beam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lumina-process-motion__beam line {
  stroke: rgba(226, 181, 79, 0.4);
  stroke-width: 0.35;
  stroke-dasharray: 1.2 1.6;
}

.lumina-process-motion__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lumina-process-motion__tile-glow {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(226, 181, 79, 0.28), rgba(226, 181, 79, 0.04));
  border: 1px solid rgba(226, 181, 79, 0.45);
  box-shadow: 0 10px 30px -8px rgba(226, 181, 79, 0.45), inset 0 0 20px rgba(226, 181, 79, 0.12);
}

.lumina-process-motion__tile-icon {
  position: absolute;
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  opacity: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.lumina-process-motion__tile-icon.is-active { opacity: 1; }

.lumina-process-motion__tile-icon svg { width: 100%; height: 100%; }

.lumina-process-motion__counter {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-text-on-dark-muted);
}

#lumina-process-counter-current { color: var(--color-accent); }

.lumina-process-motion__counter-sep { margin: 0 0.2em; }

@media (max-width: 980px) {
  .lumina-process-motion__inner {
    grid-template-columns: 1fr;
  }

  .lumina-process-motion__scene-col { order: -1; }

  .lumina-process-motion__scene { max-width: 360px; margin-inline: auto; }
}

/* Em telas pequenas, o pin de altura total de viewport fica cansativo —
   o JS desliga o pin abaixo do breakpoint e a seção rola normalmente com
   todos os passos e descrições sempre visíveis (ver process-scroll.js). */
@media (max-width: 720px) {
  .lumina-process-motion__pin { min-height: 0; padding-block: 4rem; }

  .lumina-process-motion__desc {
    max-height: none !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lumina-process-motion__grid,
  .lumina-process-motion__tile,
  .lumina-process-motion__tile-icon,
  .lumina-process-motion__desc,
  .lumina-process-motion__num {
    transition: none !important;
  }
}