/* =============================================================================
   Home — estilos específicos (usa css/base.css)
   ========================================================================== */

body { overflow-x: clip; }

/* --------------------------------------------------------- ecossistema -- */
.eco {
  max-width: 1560px; margin: 0 auto; padding: 0 32px;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
.eco__h2 {
  font-size: clamp(28px, 6vw, 70px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
}
.eco__h2 em { font-style: normal; color: var(--brand-2); }

/* ------------------------------------------------- produtos (scroll pin) -- */
.prod-track { position: relative; height: 300vh; }

/* o pin ocupa a largura toda para que o brilho sangre até as bordas da tela;
   o conteúdo é que fica limitado a 1760px */
.prod-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.prod-pin__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 1;
  transition: background .5s ease, opacity .15s linear;
}
.prod-pin__wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 32px;
}
.prod-dots {
  position: absolute; left: 32px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 16px; z-index: 2;
}
.prod-dots button {
  width: 14px; height: 14px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  opacity: .4; transform: scale(1);
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.prod-pin__inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.prod-pin__tag {
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color .3s;
}
.prod-pin__title {
  display: flex; align-items: center; gap: 24px;
  color: var(--text); flex-wrap: wrap; justify-content: center;
}
.prod-pin__title:hover { color: var(--text); }
.prod-pin__thin { font-size: clamp(58px, 9vw, 112px); font-weight: 700; letter-spacing: -0.02em; }
.prod-pin__name { font-size: clamp(58px, 9vw, 112px); font-weight: 300; letter-spacing: -0.02em; }
.prod-pin__title svg { flex-shrink: 0; }
.prod-pin__title svg path { transition: stroke .3s; }
.prod-pin__desc { font-size: 21px; color: var(--text-dim); max-width: 68ch; line-height: 1.6; }

.prod-more {
  position: relative; display: flex; align-items: center;
  height: 34px; margin-top: 10px;
  font-weight: 600; font-size: 17px; color: var(--text);
}
.prod-more:hover { color: var(--text); }
.prod-more__dot {
  position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; border: 1px solid var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%);
  transition:
    width .5s cubic-bezier(0.34, 1.56, 0.64, 1),
    height .5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background .3s, border .3s;
}
.prod-more__dot svg { opacity: 0; transition: opacity .2s; }
.prod-more__text {
  position: relative; padding-bottom: 6px;
  transform: translateX(18px);
  transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prod-more__line {
  position: absolute; left: 0; bottom: 0;
  height: 1.5px; width: 100%; background: var(--text-dim);
  transform-origin: right; transform: scaleX(1);
  transition: transform .35s cubic-bezier(0.65, 0, 0.35, 1);
}
/* no hover o círculo cresce e se preenche com a cor do produto ativo
   (--more-accent é definido em js/home.js a cada troca de produto) */
.prod-more:hover .prod-more__dot {
  width: 54px; height: 54px;
  border: none;
  background: var(--more-accent, var(--brand));
}
.prod-more:hover .prod-more__dot svg { opacity: 1; }
.prod-more:hover .prod-more__text { transform: translateX(74px); }
.prod-more:hover .prod-more__line { transform: scaleX(0); }

/* ---------------------------------------------------- níveis (scroll pin) -- */
.level-track { position: relative; height: 400vh; }
.level-pin {
  position: sticky; top: 0;
  max-width: 1760px; margin: 0 auto;
  padding: 20px 32px 60px; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.level-pin .sec-head { margin-bottom: clamp(16px, 3vh, 40px); }

.ring-wrap { display: flex; justify-content: center; margin-top: clamp(12px, 4vh, 52px); }
.ring { position: relative; width: min(620px, 88vw, 52vh); aspect-ratio: 1 / 1; }
.ring__rotor {
  position: absolute; inset: 0;
  transform: rotate(0deg); opacity: 1;
  transition: transform .85s cubic-bezier(.65, 0, .35, 1), opacity .7s ease;
}
.ring__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ring__svg circle[data-ring-progress] {
  transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1);
}
.ring__node {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform .85s cubic-bezier(.65, 0, .35, 1);
  background: none; border: none; padding: 0; cursor: pointer;
}
.ring__node span {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 700;
  color: var(--text-dim);
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
}

.ring__center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 46%;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; text-align: center;
  transition: top .7s ease, transform .7s ease;
}
.ring__kicker { font-size: 12px; letter-spacing: 0.12em; color: var(--text-dim); }
.ring__name { font-size: 19px; font-weight: 700; line-height: 1.25; transition: color .4s ease; }
.ring__desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

.ring__ai {
  position: relative; width: 86px; height: 86px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 52px; margin-top: -44px;
  animation: checkPop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.ring__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(139, 92, 246, 0.5);
  animation: aiRing 2.4s ease-out infinite;
}
.ring__pulse--delay { animation-delay: 1.2s; }
.ring__orb {
  width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #a78bfa, #7C3AED 70%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.55);
  animation: aiFloat 3.2s ease-in-out infinite;
}

/* estado final: a roda some e o núcleo cresce */
.ring.is-done .ring__rotor { opacity: 0; pointer-events: none; }
.ring.is-done .ring__center { top: 62%; transform: translate(-50%, -50%) scale(1.35); }

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 1024px) {
  .ring { width: min(430px, 92vw, 58vh); }
  .prod-dots { left: 16px; }
  .prod-pin__desc { font-size: 17px; }
}

@media (max-width: 640px) {
  .eco { padding: 0 18px; }
  .prod-pin, .level-pin { padding-left: 18px; padding-right: 18px; }
  .prod-pin__title { gap: 12px; }
  .prod-pin__title svg { width: 40px; height: 24px; }
}