/* =====================================================
   PRIME WEB — POR QUE ESCOLHER A PRIME WEB
   Blocos editoriais premium. Muito espaço, pouco texto,
   numeral editorial grande, composição alternada.
   Self-contained — não depende de header.css / hero.css /
   services.css / portfolio.css / process.css.
   ===================================================== */

.why{
  position: relative;
  background: linear-gradient(180deg, var(--c-black) 0%, var(--c-graphite) 48%, var(--c-black) 100%);
  padding: clamp(84px, 13vw, 148px) 0 clamp(80px, 11vw, 132px);
  overflow: hidden;
}

.why::before{
  content: "";
  position: absolute;
  top: 4%; left: 50%;
  width: 1px;
  height: 92%;
  background: linear-gradient(180deg, transparent, var(--c-border) 10%, var(--c-border) 90%, transparent);
  opacity: 0.35;
  pointer-events: none;
}

/* =====================================================
   CABEÇALHO DA SEÇÃO
   ===================================================== */
.why__intro{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto clamp(64px, 9vw, 120px);
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.why__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-ice-dim);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border-strong);
  background: rgba(244,244,242,0.03);
  backdrop-filter: blur(8px);
}

.why__eyebrow-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 10px 2px var(--c-gold-dim);
  flex-shrink: 0;
}

.why__title{
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ice);
  max-width: 20ch;
}

.why__subtitle{
  max-width: 480px;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--c-ice-dim);
}

/* =====================================================
   LISTA DE DIFERENCIAIS
   ===================================================== */
.why__list{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 11vw, 148px);
}

.why-block{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- numeral editorial de fundo ---------- */
.why-block__number{
  position: absolute;
  top: -0.5em;
  left: -0.02em;
  z-index: 0;
  font-family: var(--f-display);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,244,242,0.10);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color var(--dur-slow) var(--ease-out);
}

.why-block.is-active .why-block__number{
  -webkit-text-stroke-color: var(--c-gold-dim);
}

/* ---------- visual abstrato ---------- */
.why-block__visual{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 5 / 3.4;
  border-radius: var(--radius-l);
  border: 1px solid var(--c-border-strong);
  background: var(--c-graphite-2);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96) translateY(20px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: transform;
}

.why-block.is-inview .why-block__visual{
  opacity: 1;
  transform: scale(1) translateY(0);
}

.why-block__visual::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 24% 18%, rgba(139,92,246,0.10), transparent 58%);
  pointer-events: none;
  z-index: 4;
  opacity: 0.7;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.why-block:hover .why-block__visual::before{
  opacity: 1;
}

.why-block__canvas{
  position: absolute;
  inset: 0;
  will-change: transform;
}

.why-block__canvas img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- conteúdo textual ---------- */
.why-block__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 46ch;
}

.why-block__label{
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
}

.why-block__title{
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ice);
  position: relative;
  display: inline-block;
}

/* sublinhado roxo que se desenha no hover */
.why-block__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.why-block:hover .why-block__title::after{
  transform: scaleX(1);
}

.why-block__lines{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.why-block__lines p{
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--c-ice-dim);
}

.why-block__lines p:first-child{
  color: var(--c-ice);
  font-weight: 400;
}

/* =====================================================
   REVELAÇÃO — herda .reveal-up global (animations.css)
   ===================================================== */
.why-block .reveal-up{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.why-block .reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   PRIMITIVAS DO CANVAS ABSTRATO
   ===================================================== */
.wy-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--c-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35;
}

.wy-line{ position: absolute; background: var(--c-border-strong); }
.wy-line--h{ height: 1px; }
.wy-line--v{ width: 1px; }

.wy-panel{
  position: absolute;
  border-radius: var(--radius-m);
  border: 1px solid var(--c-border);
  background: rgba(244,244,242,0.045);
  backdrop-filter: blur(10px);
}

.wy-ring{
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
}

.wy-dot{
  position: absolute;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 12px 2px var(--c-gold-dim);
}

.wy-bar{
  position: absolute;
  border-radius: 3px;
  background: var(--c-border-strong);
}
.wy-bar--gold{ background: linear-gradient(180deg, var(--c-gold-soft), var(--c-gold)); }

.wy-tag{
  position: absolute;
  font-family: var(--f-body);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--c-ice-dim);
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--c-border-strong);
  background: rgba(8,8,10,0.5);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

@keyframes wyFloat{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(-4%, 5%); }
}
@keyframes wyFloatAlt{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(5%, -4%); }
}
@keyframes wySpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes wyPulse{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.4); opacity: 0.55; }
}
@keyframes wyScan{
  0%{ transform: translateY(-100%); opacity: 0; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ transform: translateY(2100%); opacity: 0; }
}

/* =====================================================
   COMPOSIÇÃO 01 — PROJETOS EXCLUSIVOS
   Fragmentos assimétricos, sem grade repetida.
   ===================================================== */
.wy-case--01 .wy-panel:nth-of-type(1){ top: 12%; left: 8%; width: 30%; height: 40%; transform: rotate(-6deg); animation: wyFloat 15s ease-in-out infinite; }
.wy-case--01 .wy-panel:nth-of-type(2){ top: 34%; left: 40%; width: 24%; height: 30%; transform: rotate(4deg); animation: wyFloatAlt 18s ease-in-out infinite; }
.wy-case--01 .wy-panel:nth-of-type(3){ top: 54%; left: 20%; width: 18%; height: 24%; transform: rotate(-3deg); }
.wy-case--01 .wy-ring{ width: 16%; height: 16%; top: 16%; right: 14%; border-color: var(--c-gold-dim); }
.wy-case--01 .wy-tag{ bottom: 12%; right: 12%; }
.wy-case--01 .wy-dot{ top: 62%; right: 24%; width: 5px; height: 5px; }

/* =====================================================
   COMPOSIÇÃO 02 — DESIGN ESTRATÉGICO
   Retícula de alinhamento / mira editorial.
   ===================================================== */
.wy-case--02 .wy-line--v-1{ left: 30%; top: 10%; height: 80%; }
.wy-case--02 .wy-line--v-2{ left: 70%; top: 10%; height: 80%; }
.wy-case--02 .wy-line--h-1{ top: 30%; left: 10%; width: 80%; }
.wy-case--02 .wy-line--h-2{ top: 70%; left: 10%; width: 80%; }
.wy-case--02 .wy-ring--target-1{ width: 30%; height: 30%; top: 50%; left: 50%; transform: translate(-50%,-50%); border-color: var(--c-gold-dim); }
.wy-case--02 .wy-ring--target-2{ width: 14%; height: 14%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.wy-case--02 .wy-dot{ top: 50%; left: 50%; transform: translate(-50%,-50%); width: 6px; height: 6px; }
.wy-case--02 .wy-tag{ top: 10%; left: 10%; }

/* =====================================================
   COMPOSIÇÃO 03 — PERFORMANCE
   Linhas de velocidade + varredura luminosa.
   ===================================================== */
.wy-case--03 .wy-bar--speed-1{ width: 46%; height: 2px; top: 34%; left: 8%; animation: wyFloat 6s ease-in-out infinite; }
.wy-case--03 .wy-bar--speed-2{ width: 34%; height: 2px; top: 46%; left: 8%; animation: wyFloatAlt 7s ease-in-out infinite; }
.wy-case--03 .wy-bar--speed-3{ width: 58%; height: 2px; top: 58%; left: 8%; animation: wyFloat 8s ease-in-out infinite; }
.wy-case--03 .wy-scan{ position: absolute; left: 0; top: 0; width: 100%; height: 30%; background: linear-gradient(180deg, transparent, rgba(139,92,246,0.14), transparent); animation: wyScan 5s linear infinite; }
.wy-case--03 .wy-tag{ bottom: 12%; right: 12%; color: var(--c-gold-soft); border-color: var(--c-gold-dim); }
.wy-case--03 .wy-ring{ width: 12%; height: 12%; top: 14%; right: 14%; border-color: var(--c-gold-dim); }

/* =====================================================
   COMPOSIÇÃO 04 — EXPERIÊNCIA MOBILE
   Coluna vertical abstrata + barras de sinal, sem mockup.
   ===================================================== */
.wy-case--04 .wy-panel--col{ width: 26%; height: 72%; top: 14%; left: 50%; transform: translateX(-50%); border-radius: 26px; }
.wy-case--04 .wy-bar--signal-1{ width: 4px; height: 14%; bottom: 16%; left: 20%; }
.wy-case--04 .wy-bar--signal-2{ width: 4px; height: 24%; bottom: 16%; left: 30%; }
.wy-case--04 .wy-bar--signal-3{ width: 4px; height: 34%; bottom: 16%; left: 40%; }
.wy-case--04 .wy-bar--signal-4{ width: 4px; height: 44%; bottom: 16%; left: 50%; }
.wy-case--04 .wy-dot{ top: 20%; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; }
.wy-case--04 .wy-tag{ top: 14%; right: 12%; }

/* =====================================================
   COMPOSIÇÃO 05 — SUPORTE
   Nós conectados / rede de acompanhamento contínuo.
   ===================================================== */
.wy-case--05 .wy-ring--orbit{ width: 56%; height: 56%; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: wySpin 46s linear infinite; }
.wy-case--05 .wy-dot--node-1{ top: 22%; left: 50%; width: 8px; height: 8px; animation: wyPulse 3s ease-in-out infinite; }
.wy-case--05 .wy-dot--node-2{ bottom: 24%; left: 26%; width: 6px; height: 6px; animation: wyPulse 3.4s ease-in-out infinite 0.6s; }
.wy-case--05 .wy-dot--node-3{ bottom: 24%; right: 26%; width: 6px; height: 6px; animation: wyPulse 3.8s ease-in-out infinite 1.2s; }
.wy-case--05 .wy-line--link-1{ top: 30%; left: 50%; width: 1px; height: 24%; transform-origin: top; transform: rotate(28deg); background: linear-gradient(180deg, var(--c-gold-dim), transparent); }
.wy-case--05 .wy-line--link-2{ top: 30%; left: 50%; width: 1px; height: 24%; transform-origin: top; transform: rotate(-28deg); background: linear-gradient(180deg, var(--c-gold-dim), transparent); }
.wy-case--05 .wy-tag{ bottom: 10%; left: 50%; transform: translateX(-50%); color: var(--c-gold-soft); border-color: var(--c-gold-dim); }

/* =====================================================
   RESPONSIVIDADE — mobile first (self-contained)
   ===================================================== */
@media (min-width: 900px){
  .why-block{
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
    min-height: 62vh;
  }

  .why-block__visual{
    flex: 1 1 46%;
    aspect-ratio: 6 / 4.4;
  }

  .why-block__content{
    flex: 1 1 48%;
  }

  .why-block:nth-of-type(even){
    flex-direction: row-reverse;
  }

  .why-block__number{
    top: -0.62em;
  }
}

@media (min-width: 1280px){
  .why__intro{ margin-bottom: 132px; }
  .why-block{ min-height: 56vh; }
}

@media (prefers-reduced-motion: reduce){
  .wy-panel:nth-of-type(1),
  .wy-panel:nth-of-type(2),
  .wy-bar--speed-1, .wy-bar--speed-2, .wy-bar--speed-3,
  .wy-scan,
  .wy-ring--orbit,
  .wy-dot--node-1, .wy-dot--node-2, .wy-dot--node-3{
    animation: none !important;
  }
}