/* ================================
   ABOUT PAGE — COERENTE CON LANDING
   ================================ */

.about-page{
  background-color: var(--blancos);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  --space: 0.6rem;
}

.about-page .stage{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0 2vw;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding-top: 8vh;
  padding-bottom: 12vh; /* spazio contatti */
}

/* Navbar */
.about-page .navbar{
  position: absolute;
  top: 2vh;
  left: 2vw;
  right: 2vw;
  z-index: 10;
}

.about-page .name-link{
  font-family: var(--Super_text-font-family);
  font-weight: var(--Super_text-font-weight);
  font-size: var(--Super_text-font-size);
  letter-spacing: var(--Super_text-letter-spacing);
  line-height: var(--Super_text-line-height);
  font-style: var(--Super_text-font-style);
  color: var(--neros);
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}

.about-page .name-link:hover{
  opacity: 0.75;

  text-decoration: underline;
}

/* bio */
.about-page .bio{
  max-width: 96ch;
  font-family: var(--testi-font-family);
  font-weight: var(--testi-font-weight);
  font-size: var(--Super_text-font-size);
  letter-spacing: var(--testi-letter-spacing);
  line-height: var(--testi-line-height);
  color: var(--neros);
  text-indent: var(--testi-text-indent);
}

/* Contacts */
.about-page .telefono,
.about-page .email{
  position: absolute;
  bottom: 2vh;
  font-family: var(--testi-font-family), Helvetica;
  font-weight: 400;
  opacity: 0.75;
  color: var(--neros);
  font-size: 18px;
  letter-spacing: 0;
}
.about-page .telefono{ left: 2vw; }
.about-page .email{ right: 2vw; }

/* ================================
   MOBILE
   ================================ */
@media (max-width: 700px){
  .about-page .bio{
    font-size: 12px;
    line-height: 1.35;
  }

  .about-page .telefono{
    left: 2vw;
    right: auto;
    bottom: calc(2vh + var(--space) + 1em);
    font-size: 14px;
  }

  .about-page .email{
    left: 2vw;
    right: auto;
    bottom: 2vh;
    font-size: 14px;
  }
}


/* =========================
   D20 
   ========================= */

.d20-card{
  width: min(360px, calc(100vw - 4vw));
  margin: clamp(8px, 6vh, 10px) auto 0;  /* auto = centro pagina */
  --d20-space: 12px; /* ← QUESTA È LA BASE (1x) */
  scale: 0.9;
}

/* =========================
   DIVIDER — NEROS GLOSSY
   ========================= */

.sigil-divider{
  display: grid;
  place-items: center;
  margin: calc(var(--d20-space) * 2) 0;
}

.sigil-divider--inside{
  margin: var(--d20-space) 0;
}

.sigil-divider__svg{
  width: min(320px, 80vw);
  height: auto;
}

/* base */
.sigil-line--base{
  stroke: var(--neros);
  stroke-width:0.7;
  stroke-linejoin: bevel;
  opacity: 0.75;
}

/* gloss */
.sigil-line--gloss{
  stroke: rgba(0,0,0,0.25);
  stroke-width: 2;
  filter: blur(0.4px);
  opacity: 0.45;
}

/* sigil mark */
.sigil-mark--base{
  fill: var(--neros);
}

.sigil-mark--gloss{
  fill: rgba(0,0,0,0.35);
  filter: blur(8px);
  opacity: 0.9;
}

/* inside thinner */
.sigil-divider--inside .sigil-line--base{
  stroke-width: 0.2;
}
.sigil-divider--inside .sigil-line--gloss{
  stroke-width: 1;
  filter: blur(0.3px);
}

/* =========================
   D20 — DICE
   ========================= */

.d20-die{
  width: 100%;
  margin: var(--d20-space) 0;   /* 1x sopra e sotto */
  border: 0;
  background: none;
  display: grid;
  place-items: center;  /* centro dentro la card */
}

.d20-svg{
  display: block;
  width: min(100px, 50vw); 
  height: auto;
  margin: 0 auto;
  opacity: 0.9;
}

.d20-flat-base polygon,
.d20-flat-base polyline,
.d20-flat-base line{
  fill: var(--neros);
  stroke: var(--blancos);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d20-flat-gloss polygon,
.d20-flat-gloss polyline,
.d20-flat-gloss line{
  fill: none;
  stroke: rgba(255, 255, 255, 0.981);
  stroke-width: 7;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
  opacity: 0.55;
}

/* number */
.d20-number{
  fill: var(--blancos);
  font-family: var(--testi-font-family), Helvetica;
  font-size: 32px;
}

.d20-copy{
  margin:
    var(--d20-space)   /* sopra: dal divider interno */
    0
    calc(var(--d20-space) * 2); /* sotto: verso divider esterno */

  text-align: center;
  font-family: var(--testi-font-family);
  font-size: calc(var(--testi-font-size) * 0.95);
  line-height: 1.2;
  letter-spacing: var(--testi-letter-spacing);

  color: var(--neros);
  opacity: 0.95;
}

.d20-result{
  opacity: 0.95;
  transition: opacity .2s ease, transform .2s ease;
}

.d20-result.is-visible{
  opacity: 0.6;
  transform: translateY(0);
}

.d20-hint{
  opacity: 0.45;
}

/* =========================
   D20 — HEAD (testi sopra al dado)
   ========================= */

.d20-head{
  display: flex;
  flex-direction: column;
  gap: 4px;

  text-align: center;
  align-items: center;
  width: 100%;

  margin:
    calc(var(--d20-space) * 2)  /* sopra: dal divider esterno */
    0
    var(--d20-space);           /* sotto: verso divider interno */

  opacity: 0.85;
}


/* label sopra */
.d20-title__label{
  font-family: var(--testi-font-family);
  font-weight: 400;
  font-size: calc(var(--testi-font-size) * 0.85);
  line-height: 1.3;
  letter-spacing: var(--testi-letter-spacing);

  color: var(--neros);
  opacity: 0.35;
}

/* CTA / stato */
.d20-title__value{
  font-family: var(--testi-font-family);
  font-weight: 400;
  font-size: calc(var(--testi-font-size) * 0.95);
  line-height: 1.2;
  letter-spacing: var(--testi-letter-spacing);

  color: var(--neros);
  opacity: 0.8;
}


/* mobile left align */
@media (max-width: 700px){
  .d20-card{
    margin: clamp(40px, 10vh, 10px) auto 0; /* centrata */
    scale: 0.75;            /* ← QUI regoli la dimensione */
    transform-origin: top center;
  }
  .d20-svg{
  display: block;
  width: min(80px, 60vw); 
}
}

/* animazione lancio */
.d20-die.is-rolling .d20-svg{
  animation: d20Wiggle 700ms ease-in-out;
}

@keyframes d20Wiggle{
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-4px) rotate(-4deg) scale(0.99); }
  55%  { transform: translateY(2px) rotate(5deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}