/* ============================================================
   ECLYSS — "I Quattro Elementi" + Test "Scopri il tuo Elemento"
   Usato da due pagine:
   - entra-nel-nostro-mondo.html → la sezione "I Quattro Elementi"
   - scopri-il-tuo-elemento.html → la pagina del test
   Caricato DOPO entra-nel-nostro-mondo.css (ne eredita variabili,
   .section-label, .section-title, .btn-hero).
   ============================================================ */

:root{
  --el-silenzio:#E2D2C0;
  --el-caos:#FF4A1F;
  --el-ombra:#8E4CCB;
  --el-tempo:#63D315;
}

/* ── SEZIONE ELEMENTI ── */
.elementi{background:transparent;overflow:hidden}
.elementi-inner{max-width:1280px;margin:0 auto}

/* Blocco introduttivo centrato */
.el-top{
  display:block;max-width:720px;margin:0 auto 56px;text-align:center;
}
.el-intro .section-label{justify-content:center;text-align:center}
.el-intro .section-title{text-align:center;font-size:clamp(30px,3.6vw,46px);line-height:1.15;margin-bottom:10px}
/* Piccolo rombo separatore sotto il titolo, come nella referenza */
.el-intro-rule{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;
  color:rgba(192,132,252,.55);font-size:11px;
}
.el-intro-rule::before,.el-intro-rule::after{
  content:'';display:block;width:34px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(192,132,252,.5));
}
.el-intro-rule::after{background:linear-gradient(90deg,rgba(192,132,252,.5),transparent)}
.el-intro-lead{font-size:18px;line-height:1.75;color:rgba(255,255,255,.78);margin-bottom:26px}

/* CTA verso il test */
.el-cta-wrap{
  display:flex;justify-content:center;margin-top:38px;
}
.el-cta{
  display:inline-flex;align-items:center;gap:16px;
  border:1px solid rgba(192,132,252,.45);border-radius:3px;
  background:rgba(123,47,255,.12);padding:14px 24px;
  text-decoration:none;color:var(--white);
  box-shadow:0 0 30px rgba(123,47,255,.18);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}
.el-cta:hover{
  background:rgba(123,47,255,.22);border-color:var(--purple-glow);
  box-shadow:0 8px 34px rgba(123,47,255,.4);transform:translateY(-2px);
}
.el-cta-glyph{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(192,132,252,.45);
  color:var(--purple-light);font-size:12px;line-height:1;
}
.el-cta-txt{display:block}
.el-cta-main{
  display:block;font-family:'Asul',sans-serif;font-size:19px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
}
.el-cta-sub{display:block;font-size:15px;color:rgba(255,255,255,.6);letter-spacing:.5px;margin-top:2px}

/* ── DIAGRAMMA DEI QUATTRO ELEMENTI ── */
.el-diagram{
  position:relative;width:100%;max-width:640px;margin:0 auto;
  aspect-ratio:1/1;justify-self:center;
}
.el-orbit-system{
  position:absolute;inset:0;
}
.el-diagram-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.el-orbit-rings circle:nth-child(1){stroke-dasharray:420 60 260 316}
.el-orbit-rings circle:nth-child(2){stroke-dasharray:620 90 390 257}
.el-orbit-rings circle:nth-child(3){stroke-dasharray:280 45 210 219}
/* Disco del sigillo, condiviso da diagramma / carte / responso del test.
   I PNG dei simboli hanno il disegno centrato su nero pieno:
   overflow:hidden su un contenitore tondo ritaglia il quadrato in un disco,
   così sotto al simbolo non resta nessuno spigolo visibile. */
.el-sigillo{
  position:relative;border-radius:50%;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:
    0 0 0 1.5px var(--c),
    0 0 22px color-mix(in srgb,var(--c) 60%,transparent),
    0 0 48px color-mix(in srgb,var(--c) 28%,transparent);
  transition:box-shadow .28s ease,transform .28s ease;
}
.el-sigillo img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* I PNG hanno il simbolo piccolo e non perfettamente centrato dentro un
     quadrato nero: ogni simbolo viene ingrandito e ricentrato in modo che il
     disegno riempia il disco. --sig-s = ingrandimento, --sig-y = ricentratura
     verticale (in % dell'altezza, prima della scala). */
  transform:scale(var(--sig-s,1)) translateY(var(--sig-y,0));
  transform-origin:50% 50%;
}
/* Valori tarati sulle proporzioni dei singoli file in assets/nuovi simboli/ */
.el-sigillo img[src*="SILENZIO"]{--sig-s:1.93;--sig-y:5.1%}
.el-sigillo img[src*="CAOS"]    {--sig-s:1.81;--sig-y:5.2%}
.el-sigillo img[src*="OMBRA"]   {--sig-s:1.55;--sig-y:1%}
.el-sigillo img[src*="TEMPO"]   {--sig-s:1.23;--sig-y:0}

.el-node{
  position:absolute;left:50%;top:50%;
  width:19%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  /* reset del <button> */
  background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:opacity .28s ease;
}
.el-node .el-sigillo{width:100%;height:100%}
.el-node:focus-visible{outline:none}
.el-node:focus-visible .el-sigillo,
.el-node:hover .el-sigillo,
.el-node.is-active .el-sigillo{
  transform:scale(1.09);
  box-shadow:
    0 0 0 2px var(--c),
    0 0 34px var(--c),
    0 0 76px color-mix(in srgb,var(--c) 55%,transparent);
}
/* Quando un elemento è selezionato, gli altri si spengono */
.el-diagram.has-active .el-node:not(.is-active):not(.el-node-center){opacity:.4}
.el-node-name{
  position:absolute;white-space:nowrap;
  font-family:'Asul',sans-serif;font-size:clamp(13px,1.5vw,19px);font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:#fff;
  text-shadow:0 0 18px var(--c),0 2px 8px rgba(0,0,0,.9);
}
.el-node-top .el-node-name{bottom:118%;left:50%;transform:translateX(-50%)}
.el-node-bottom .el-node-name{top:118%;left:50%;transform:translateX(-50%)}
.el-node-left .el-node-name{right:118%;top:50%;transform:translateY(-50%)}
.el-node-right .el-node-name{left:118%;top:50%;transform:translateY(-50%)}

.el-node-top{top:22%}
.el-node-bottom{top:78%}
.el-node-left{left:22%}
.el-node-right{left:78%}

/* Nodo centrale ECLYSS */
.el-node-center{
  width:23%;border-radius:50%;background:radial-gradient(circle,#12002b 0%,#05000c 72%);
}
/* Il nodo centrale non ha un sigillo: alone e anello se li disegna da solo */
.el-node-center::before{
  content:none;
}
.el-node-center::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(192,132,252,.75);
  box-shadow:0 0 30px rgba(123,47,255,.7),0 0 70px rgba(123,47,255,.35);
}
.el-node-center span{
  position:relative;z-index:1;
  font-family:'Asul',sans-serif;font-size:clamp(12px,1.9vw,24px);font-weight:700;
  letter-spacing:2.5px;color:#fff;text-shadow:0 0 20px rgba(192,132,252,.9);
}

/* ── CARTE DEI QUATTRO ELEMENTI ── */
.el-cards{
  display:flex;flex-direction:column;gap:14px;
  width:100%;max-width:820px;margin:0 auto;
}
.el-card{
  display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;
  column-gap:20px;row-gap:3px;align-items:center;
  padding:16px 24px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--c) 10%,#090510) 0%,#08060d 38%,#050509 100%);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.el-card{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .28s ease}
.el-card:hover,.el-card.is-active{
  transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 62%,transparent);
  box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 34px color-mix(in srgb,var(--c) 28%,transparent);
}
.el-card:hover .el-sigillo,.el-card.is-active .el-sigillo{
  transform:scale(1.06);
  box-shadow:0 0 0 2px var(--c),0 0 30px var(--c),0 0 64px color-mix(in srgb,var(--c) 45%,transparent);
}
/* Con un elemento selezionato le altre carte restano leggibili ma spente */
.el-cards.has-active .el-card:not(.is-active){opacity:.42}
.el-cards.has-active .el-card:not(.is-active):hover{opacity:1}
.el-card-icon{grid-row:1 / 3;width:56px;height:56px}
.el-card-name{
  align-self:end;
  font-family:'Asul',sans-serif;font-size:22px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;color:#fff;
  text-shadow:0 0 20px color-mix(in srgb,var(--c) 70%,transparent);
}
.el-card-body{grid-column:2;align-self:start;font-size:16px;line-height:1.4;color:rgba(255,255,255,.58)}

/* ── TEST "SCOPRI IL TUO ELEMENTO" ── */
.eltest{background:transparent}
.eltest-inner{max-width:900px;margin:0 auto}
.eltest-lead{
  text-align:center;font-size:18px;line-height:1.8;color:rgba(255,255,255,.76);
  max-width:720px;margin:0 auto 40px;
}

.eltest-box{
  border:1px solid rgba(192,132,252,.22);border-radius:5px;
  background:linear-gradient(165deg,rgba(14,5,30,.92),rgba(5,0,12,.94));
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 50px rgba(123,47,255,.1);
  padding:34px 34px 30px;
}

/* Barra di avanzamento */
.eltest-progress{margin-bottom:26px}
.eltest-progress-top{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;
  font-family:'Asul',sans-serif;letter-spacing:2.5px;text-transform:uppercase;
}
.eltest-step{font-size:15px;font-weight:700;color:var(--purple-light)}
.eltest-count{font-size:14px;color:var(--gray)}
.eltest-bar{height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.eltest-bar-fill{
  height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--purple),var(--purple-light));
  box-shadow:0 0 14px rgba(192,132,252,.7);transition:width .35s ease;
}

.eltest-q{
  font-family:'Asul',sans-serif;font-size:clamp(21px,2.4vw,28px);font-weight:700;
  line-height:1.4;margin-bottom:24px;color:#fff;
}
.eltest-answers{display:flex;flex-direction:column;gap:12px}
.eltest-ans{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:16px 20px;border-radius:3px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.85);font-family:'Asul',sans-serif;font-size:17px;line-height:1.5;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,color .2s ease;
}
.eltest-ans:hover{
  border-color:rgba(192,132,252,.55);background:rgba(123,47,255,.12);
  color:#fff;transform:translateX(4px);
}
.eltest-ans-key{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(192,132,252,.4);color:var(--purple-light);
  font-size:14px;font-weight:700;letter-spacing:1px;
}
.eltest-ans:hover .eltest-ans-key{background:rgba(123,47,255,.28);border-color:var(--purple-light);color:#fff}

.eltest-nav{display:flex;align-items:center;justify-content:space-between;margin-top:22px;min-height:22px}
.eltest-back{
  background:none;border:0;cursor:pointer;padding:0;
  font-family:'Asul',sans-serif;font-size:15px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gray);transition:color .2s;
}
.eltest-back:hover{color:var(--purple-light)}
.eltest-back[hidden]{display:none}
.eltest-hint{font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray)}

/* ── RISULTATO ── */
.eltest-result{text-align:center;padding:6px 0 4px}
.eltest-result-icon{width:132px;height:132px;margin:0 auto 22px}
.eltest-result-label{
  font-family:'Asul',sans-serif;font-size:15px;font-weight:700;letter-spacing:4px;
  text-transform:uppercase;color:var(--gray-light);margin-bottom:8px;
}
.eltest-result-name{
  font-family:'Asul',sans-serif;font-size:clamp(32px,5vw,54px);font-weight:700;
  letter-spacing:6px;text-transform:uppercase;color:#fff;margin-bottom:14px;
  text-shadow:0 0 34px color-mix(in srgb,var(--c) 80%,transparent);
}
.eltest-result-text{
  font-size:18px;line-height:1.75;color:rgba(255,255,255,.78);
  max-width:600px;margin:0 auto 28px;
}
.eltest-powers-label{
  font-family:'Asul',sans-serif;font-size:14px;font-weight:700;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--gray-light);margin-bottom:14px;
}
.eltest-powers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:30px}
.eltest-power{
  padding:7px 16px;border-radius:20px;font-size:15px;letter-spacing:1px;
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 10%,transparent);color:rgba(255,255,255,.9);
}
/* Barre di affinità con gli altri elementi */
.eltest-scores{max-width:440px;margin:0 auto 30px;display:flex;flex-direction:column;gap:10px}
.eltest-score{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:12px}
.eltest-score-name{
  font-family:'Asul',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,.7);text-align:left;
}
.eltest-score-track{height:4px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden}
.eltest-score-fill{
  display:block;height:100%;width:0;border-radius:3px;background:var(--c);
  box-shadow:0 0 12px var(--c);transition:width .6s ease;
}
.eltest-score-val{font-size:14px;color:var(--gray-light);text-align:right}
.eltest-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.eltest-restart{
  background:none;cursor:pointer;
  border:1px solid rgba(192,132,252,.4);border-radius:3px;padding:13px 26px;
  font-family:'Asul',sans-serif;font-size:16px;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:background .2s,border-color .2s,transform .2s;
}
.eltest-restart:hover{background:rgba(123,47,255,.18);border-color:var(--purple-glow);transform:translateY(-2px)}
.eltest-restart.is-primary{background:rgba(123,47,255,.2);box-shadow:0 0 26px rgba(123,47,255,.25)}

/* ── RESPONSIVE ── */
@media (max-width:1100px){
  .el-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* Su telefono il testo va sopra, il diagramma sotto a piena larghezza */
  .el-top{grid-template-columns:1fr;gap:34px;margin-bottom:40px}
  .el-intro{text-align:center}
  .el-intro .section-label{justify-content:center}
  .el-intro .section-title{text-align:center;font-size:clamp(30px,8.5vw,42px)}
  .el-intro-rule{justify-content:center}
  .el-intro-lead{font-size:17px}
  .el-cta-wrap{margin-top:28px;padding:0 4px}
  .el-cta{width:100%;max-width:340px;margin:0;justify-content:center}
  .el-diagram{max-width:420px}
  .el-node-name{letter-spacing:2px}
  .el-cards{grid-template-columns:1fr;gap:12px}
  .el-card{grid-template-columns:54px 1fr;column-gap:16px;row-gap:3px;padding:15px 18px}
  .el-card-icon{width:52px;height:52px}
  .el-card-body{font-size:15.5px}
  .eltest-lead{font-size:16.5px;margin-bottom:30px}
  .eltest-box{padding:24px 20px 22px}
  .eltest-ans{font-size:16px;padding:14px 16px;gap:12px}
  .eltest-ans:hover{transform:none}
  .eltest-result-text{font-size:16.5px}
  .eltest-score{grid-template-columns:80px 1fr 30px;gap:10px}
}
@media (max-width:560px){
  /* Sotto i 560px le etichette laterali (Ombra / Tempo) arrivavano a 5px dal
     bordo: si stringe il diagramma e le si avvicina ai nodi. */
  .el-diagram{max-width:286px}
  .el-node-name{font-size:12px;letter-spacing:1.5px}
  .el-node-left .el-node-name{right:106%}
  .el-node-right .el-node-name{left:106%}
  .el-card{grid-template-columns:48px 1fr;column-gap:13px;padding:13px 14px;border-radius:13px}
  .el-card-icon{width:46px;height:46px}
  .el-card-name{font-size:18px;letter-spacing:1.4px}
  .el-card-body{font-size:14px}
  .eltest-actions{flex-direction:column}
  .eltest-restart{width:100%;justify-content:center}
}

/* Ingrandimento contenuti solo desktop, coerente col resto della pagina */
@media (min-width:901px){
  .elementi,.eltest{zoom:1.06}
}

/* ── PAGINA DEDICATA AL TEST (scopri-il-tuo-elemento.html) ──
   Qui il test e' l'unico contenuto: serve spazio sotto la nav fissa e un
   po' di respiro attorno al riquadro. */
.eltest-page{padding-top:130px;padding-bottom:80px;min-height:calc(100vh - 300px)}
.eltest-page .section-title{margin-bottom:14px}

/* Riga dei quattro sigilli sopra il titolo */
.eltest-sigilli{display:flex;justify-content:center;gap:18px;margin-bottom:26px}
.eltest-sigilli .el-sigillo{width:60px;height:60px}

.eltest-torna{text-align:center;margin-top:30px}
.eltest-torna a{
  font-family:'Asul',sans-serif;font-size:15px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gray);text-decoration:none;transition:color .2s;
}
.eltest-torna a:hover{color:var(--purple-light)}

@media (max-width:900px){
  .eltest-page{padding-top:100px;padding-bottom:56px;min-height:0}
  .eltest-sigilli{gap:12px;margin-bottom:20px}
  .eltest-sigilli .el-sigillo{width:48px;height:48px}
}
@media (max-width:560px){
  .eltest-sigilli .el-sigillo{width:42px;height:42px}
}