/* ==========================================================
   Nazateen — pilares: barra de "stories", carrossel 3D
   arrastável (cada card leva à página do pilar).
   ========================================================== */

/* ---------- stories ---------- */
.stories{ display:flex; gap:14px; overflow-x:auto; padding:4px 4px 8px; scrollbar-width:none; }
.stories::-webkit-scrollbar{ display:none; }
.story{
  flex:0 0 auto; width:66px; padding:0; border:0; background:none;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.story-ring{
  width:58px; height:58px; padding:2.5px; border-radius:50%;
  background:var(--line-bright); transition:background .25s ease, transform .25s ease;
}
.story:hover .story-ring{ transform:translateY(-2px); }
.story.is-active .story-ring{ background:conic-gradient(from 200deg, var(--accent), var(--accent-dim), var(--accent)); }
.story-img{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--bg-elev) center 22% / cover no-repeat; box-shadow:inset 0 0 0 2px var(--bg);
  font-family:var(--font-display); font-size:15px; color:var(--accent-soft);
}
.story-name{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); text-align:center; transition:color .25s ease; }
.story.is-active .story-name{ color:var(--accent-soft); }

/* ---------- palco ---------- */
.pilares{ position:relative; max-width:1400px; margin:26px auto 0; }
.pilares-glow{
  position:absolute; inset:-80px 0; z-index:0; pointer-events:none; filter:blur(50px);
  background:
    radial-gradient(ellipse 55% 60% at 30% 20%, rgba(212,255,61,.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 55% at 75% 80%, rgba(212,255,61,.09) 0%, transparent 70%);
}
.pilares-viewport{
  position:relative; z-index:1; overflow:hidden;
  height:clamp(400px, 62vh, 520px);
  display:flex; align-items:center; justify-content:center;
  perspective:1000px;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, rgba(23,29,15,.85) 0%, transparent 75%);
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;
}
.pilares-viewport.is-dragging{ cursor:grabbing; }
.pilares-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 70% 65% at 50% 45%, transparent 40%, rgba(3,4,1,.75) 100%);
}
.pilares-grain{ z-index:2; opacity:.06; }
.pilares-hint{
  position:absolute; top:16px; left:50%; z-index:6; transform:translateX(-50%);
  padding:4px 12px; border:1px solid var(--line-bright); border-radius:20px; background:rgba(14,17,9,.7);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
  transition:opacity .4s ease;
}
.pilares-hint.is-hidden{ opacity:0; }
.pilares-camera{ position:relative; z-index:3; transform-style:preserve-3d; transform:rotateX(2.2deg); }
.pilares-track{ position:relative; width:210px; height:280px; transform-style:preserve-3d; }

/* ---------- card ---------- */
.pilar-card{
  position:absolute; inset:0; padding:0; overflow:hidden;
  border:1px solid var(--line-bright); border-radius:12px;
  background:var(--bg-elev) center / cover no-repeat;
  will-change:transform, opacity;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  -webkit-box-reflect:below 6px linear-gradient(transparent, transparent 60%, rgba(0,0,0,.35));
}
.pilar-card:focus-visible{ outline-offset:4px; }
.pilar-card-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 38%); pointer-events:none; }
.pilar-card-name{
  position:absolute; left:14px; right:14px; bottom:12px; text-align:left;
  font-family:var(--font-display); font-size:22px; line-height:1; text-transform:uppercase; color:#fff;
}
/* card sem arte própria (ex.: IDE): nome grande e textura */
.pilar-card--sem-arte{
  background:
    repeating-linear-gradient(135deg, rgba(212,255,61,.07) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, rgba(212,255,61,.32), rgba(14,17,9,.94) 70%);
}
.pilar-card--sem-arte .pilar-card-name{
  top:50%; bottom:auto; transform:translateY(-50%); text-align:center;
  font-size:64px; color:var(--accent);
  text-shadow:.02em .02em 0 #8fae1f, .04em .04em 0 #5f7813, .06em .06em 0 #2f4207;
}

/* card trancado (cadeado): escurecido, listrado, cadeado no meio */
.pilar-card.is-bloqueado{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  cursor:not-allowed;
  background:
    repeating-linear-gradient(135deg, rgba(238,242,230,.035) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 50% 40%, rgba(212,255,61,.10), transparent 60%),
    linear-gradient(160deg, #1a2010, #0b0d07 75%);
}
.pilar-card.is-bloqueado[style*="background-image"]{ filter:grayscale(1) brightness(.45); }
.pilar-card-cadeado{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:50%;
  border:1.5px solid rgba(233,255,156,.55); background:rgba(9,11,6,.75); color:var(--accent-soft);
  box-shadow:0 0 30px rgba(212,255,61,.18);
}
.pilar-card-cadeado svg{ width:34px; height:34px; }
.pilar-card-cadeado.is-tremendo{ animation:cadeadoTreme .45s ease; }
@keyframes cadeadoTreme{
  20%{ transform:translateX(-6px) rotate(-8deg); } 40%{ transform:translateX(5px) rotate(6deg); }
  60%{ transform:translateX(-3px) rotate(-4deg); } 80%{ transform:translateX(2px) rotate(2deg); }
}
.pilar-card-bloq-nome{
  position:relative; z-index:1; font-family:var(--font-display); font-size:26px; line-height:1;
  text-transform:uppercase; color:var(--text); opacity:.85;
}
.pilar-card-bloq-tag{
  position:relative; z-index:1; padding:4px 12px; border-radius:20px;
  border:1px dashed rgba(233,255,156,.45);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft);
}
.btn.is-bloqueado{ opacity:.6; cursor:not-allowed; }
.btn.is-bloqueado:hover{ transform:none; border-color:var(--line-paper); color:var(--text); }

/* ---------- legenda + navegação ---------- */
.pilares-caption{
  position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:18px;
  max-width:var(--wrap); margin:0 auto; padding:18px var(--gutter) 6px;
  border-top:1px solid var(--line-bright);
}
.caption-text{ min-height:92px; min-width:0; }
.caption-text > *{ transition:opacity .3s ease, transform .3s ease; }
.caption-text.is-changing > *{ opacity:0; transform:translateY(6px); }
.caption-cat{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.caption-title{ margin-top:6px; font-size:clamp(24px, 4vw, 34px); color:var(--text); }
.caption-desc{ margin-top:6px; max-width:58ch; font-size:14px; line-height:1.5; }
.caption-nav{ display:flex; align-items:center; gap:10px; flex:none; }
.caption-count{ min-width:58px; text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--accent-soft); font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .pilares-track{ width:168px; height:224px; }
  .pilares-caption{ flex-direction:column; align-items:stretch; gap:14px; }
  .caption-text{ min-height:118px; }
  .caption-nav{ justify-content:space-between; }
  .pilar-card--sem-arte .pilar-card-name{ font-size:52px; }
}