/* ---------- 10 · O DIAL EDEN™ --------------------------------------------
   A peça central da página. Não é uma lista de quatro itens: é um
   instrumento. A seção é pinada e o scroll gira o anel — cada dimensão sobe
   até a marca fixa no topo, como um segredo de cofre que para no número.

   Geometria herdada do anel original da OTAH (viewBox 600, arcos de raio 236
   em quadrante), com o que faltava: varredura cônica, cometa na órbita,
   preenchimento do arco por sub-progresso e halo que respira no núcleo.

   Sem JS, sem ponteiro fino ou em movimento reduzido, tudo isto vira uma
   lista de quatro blocos — ver o fim do arquivo.
   -------------------------------------------------------------------------- */

#metodo{height:460vh;padding:0 var(--gut);background:var(--void);}
#metodo .pinwrap{height:100vh;}
#metodo .pinned{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;}

.eden{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);
  align-items:center;margin-top:var(--blk);}

/* ---- o anel ------------------------------------------------------------- */
.eden__dial{position:relative;aspect-ratio:1;width:100%;
  max-width:min(560px,52vh);margin-inline:auto;}

/* halo que respira: o núcleo continua vivo mesmo com o scroll parado */
.eden__glow{position:absolute;inset:14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgb(var(--m-luz) / .30),rgb(var(--m-luz) / .07) 45%,transparent 70%);
  animation:edenPulso 5.5s var(--e-soft) infinite;}
@keyframes edenPulso{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.1);opacity:1}}

/* varredura cônica: o radar por trás do anel */
.eden__sweep{position:absolute;inset:5%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgb(var(--m-nucleo) / 0) 210deg,
    rgb(var(--m-nucleo) / .14) 322deg,rgb(var(--m-nucleo) / .55) 357deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 76%,#000 77%);
  mask:radial-gradient(closest-side,transparent 76%,#000 77%);
  animation:edenGira 6.5s linear infinite;}

/* cometa na órbita externa */
.eden__orbit{position:absolute;inset:0;pointer-events:none;
  animation:edenGira 11s linear infinite;}
.eden__orbit i{position:absolute;left:50%;top:1.4%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:#fbffe4;
  box-shadow:0 0 10px 2px rgb(var(--m-nucleo) / .9),0 0 26px 8px rgb(var(--m-luz) / .45);}
@keyframes edenGira{to{transform:rotate(360deg)}}

/* a marca fixa no topo: onde a dimensão ativa estaciona */
.eden__marca{position:absolute;left:50%;top:-2px;width:0;height:0;margin-left:-7px;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:11px solid var(--vio);pointer-events:none;z-index:3;
  filter:drop-shadow(0 0 8px rgb(var(--m-nucleo) / .9));}

/* o conjunto que gira: arcos + chips viram juntos */
.eden__roda{position:absolute;inset:0;
  transform:rotate(var(--rot,45deg));
  transition:transform 1.05s var(--e-out);}
html.semmov .eden__roda{transition:none;}

.eden__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.eden__svg .tick{stroke:rgb(var(--m-claro) / .18);stroke-width:1;fill:none;}
.eden__svg .hair{stroke:rgba(255,255,255,.07);stroke-width:1;fill:none;}

/* o arco em repouso é o trilho; o ativo é desenhado por cima dele */
.eden__svg .trilho{stroke:rgba(255,255,255,.05);stroke-width:44;fill:none;stroke-linecap:butt;}
.eden__svg .arc{stroke:rgb(var(--m-nucleo) / .34);stroke-width:44;fill:none;stroke-linecap:butt;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke .5s,filter .5s,stroke-width .5s var(--e-out);}
.eden__svg .arc.on{stroke:rgb(var(--m-nucleo) / .9);stroke-width:46;
  filter:drop-shadow(0 0 16px rgb(var(--m-nucleo) / .55));}

/* raio do núcleo até a marca: liga o centro à dimensão ativa */
.eden__raio{position:absolute;left:50%;top:6%;width:1px;height:24%;margin-left:-.5px;
  background:linear-gradient(180deg,rgb(var(--m-nucleo) / .85),rgb(var(--m-nucleo) / 0));
  pointer-events:none;z-index:2;}

/* ---- chips ------------------------------------------------------------- */
.eden__chip{position:absolute;left:var(--x);top:var(--y);z-index:3;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--rot,45deg)));
  transition:transform 1.05s var(--e-out),border-color .35s,background .35s,color .35s;
  display:flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);background:rgba(12,12,12,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#a5a59a;white-space:nowrap;}
html.semmov .eden__chip{transition:none;}
.eden__chip b{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);
  font-family:var(--f-disp);font-size:12.5px;font-weight:700;color:#f4f2ee;
  transition:background .35s,color .35s,box-shadow .35s;}
.eden__chip:hover{border-color:rgb(var(--m-claro) / .45);color:#f4f2ee;}
.eden__chip[aria-selected="true"]{border-color:rgb(var(--m-claro) / .6);color:#f4f2ee;
  background:rgba(20,22,8,.82);}
.eden__chip[aria-selected="true"] b{background:var(--vio);color:#0d0d0d;
  box-shadow:0 0 18px rgb(var(--m-nucleo) / .7);}

/* ---- núcleo ------------------------------------------------------------ */
.eden__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38%;aspect-ratio:1;border-radius:50%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid rgba(255,255,255,.1);background:rgba(10,10,10,.72);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 60px rgba(0,0,0,.6);}
.eden__core img{width:clamp(20px,3vw,30px);height:auto;opacity:.9;margin-bottom:4px;}
.eden__core .marca{font-family:var(--f-disp);font-weight:700;font-size:clamp(13px,1.3vw,17px);
  letter-spacing:-.02em;color:#f4f2ee;}
.eden__core .dim{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vios);transition:opacity .28s,transform .28s var(--e-soft);}
.eden.trocando .eden__core .dim{opacity:0;transform:translateY(5px);}

/* ---- painel ------------------------------------------------------------ */
.eden__painel{position:relative;}
.eden__idx{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);
  font-size:var(--t-mono);letter-spacing:.18em;color:#7f7f76;}
.eden__idx b{color:var(--vios);font-weight:500;font-variant-numeric:tabular-nums;}
.eden__idx i{display:block;width:36px;height:1px;background:rgba(255,255,255,.16);}
.eden__letra{margin-top:var(--s5);font-family:var(--f-mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,238,.5);}
.eden__titulo{margin-top:var(--s2);font-family:var(--f-disp);font-weight:500;
  font-size:clamp(28px,3.4vw,52px);line-height:1.06;letter-spacing:-.034em;color:#f6f4ee;}
.eden__copy{margin-top:var(--s5);max-width:44ch;font-size:var(--t-sub);
  line-height:var(--lh-body);color:var(--tdark);min-height:8.5em;}
.eden__letra,.eden__titulo,.eden__copy{
  transition:opacity .28s var(--e-soft),transform .28s var(--e-soft);}
.eden.trocando .eden__letra,.eden.trocando .eden__titulo,.eden.trocando .eden__copy{
  opacity:0;transform:translateY(9px);}

/* trilha de progresso do pin: quanto falta para a próxima dimensão */
.eden__trilha{display:flex;gap:5px;margin-top:var(--s7);}
.eden__trilha i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.1);
  overflow:hidden;position:relative;}
.eden__trilha i::after{content:"";position:absolute;inset:0;transform-origin:left;
  transform:scaleX(var(--f,0));
  background:linear-gradient(90deg,rgb(var(--m-profundo)),var(--vio));
  box-shadow:0 0 10px rgb(var(--m-nucleo) / .6);}
.eden__dica{margin-top:var(--s4);font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#6e6e66;}
.eden__dica b{color:var(--vios);font-weight:500;}

/* ---- sem pin: celular, teclado, movimento reduzido ----------------------
   O anel continua, parado e legível, e as quatro dimensões viram lista. Nada
   depende do scroll para ser lido. */
@media(max-width:900px){
  #metodo{height:auto;padding:var(--sec) var(--gut);}
  #metodo .pinwrap{height:auto;}
  #metodo .pinned{height:auto;overflow:visible;}
  .eden{grid-template-columns:1fr;gap:var(--s7);}
  .eden__dial{max-width:min(420px,78vw);}
  .eden__copy{min-height:0;}
  .eden__dica{display:none;}
}
/* Toque de verdade: coarse E sem nenhum ponteiro fino por perto. O `pointer:
   coarse` sozinho pega desktop com tela sensível ao toque, que tem mouse e
   merece o anel girando. Mesmo critério do eden.js. */
@media(pointer:coarse) and (not (any-pointer:fine)){
  #metodo{height:auto;padding:var(--sec) var(--gut);}
  #metodo .pinwrap{height:auto;}
  #metodo .pinned{height:auto;overflow:visible;}
  .eden{grid-template-columns:1fr;gap:var(--s7);}
  .eden__dial{max-width:min(420px,78vw);}
  .eden__copy{min-height:0;}
  .eden__dica{display:none;}
}
html.semmov #metodo{height:auto;padding:var(--sec) var(--gut);}
html.semmov #metodo .pinwrap{height:auto;}
html.semmov #metodo .pinned{height:auto;overflow:visible;}
html.semmov .eden{grid-template-columns:1fr;}
html.semmov .eden__copy{min-height:0;}
html.semmov .eden__dica{display:none;}
html.semmov .eden__glow,html.semmov .eden__sweep,html.semmov .eden__orbit{animation:none;}
html.semmov .eden__sweep,html.semmov .eden__orbit{display:none;}