/* =============================================
/* =============================================
   BIOLINK — style.css
   ============================================= */

:root {
  --white:        #ffffff;
  --muted:        rgba(255,255,255,0.85);
  --glass-border: rgba(255,255,255,0.15);
  --rose:         #e8b4b8;
  --rose-hover:   rgba(232,180,184,0.12);
  --radius:       13px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size: 16pt; }

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  color: var(--white);
  background: #08040a;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-text-size-adjust: none;
}

/* =============================================
   BACKGROUND
   ============================================= */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* strong central dark veil so text is always legible */
.bg-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(6,2,8,0.00) 0%,
      rgba(6,2,8,0.00) 30%,
      rgba(6,2,8,0.55) 60%,
      rgba(6,2,8,0.75) 100%),
    linear-gradient(to bottom,
      rgba(6,2,8,0.30) 0%,
      rgba(6,2,8,0.08) 40%,
      rgba(6,2,8,0.40) 100%);
}

/* =============================================
   PAGE — full-screen centred column
   ============================================= */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

/* =============================================
   INNER — constrained width, left-aligned text
   (mirrors the reference screenshot)
   ============================================= */
.inner {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;

  opacity: 0;
  animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}

/* =============================================
   TITLE
   ============================================= */
.title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

/* =============================================
   BIO
   ============================================= */
.bio {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.6rem;
}

.bio strong {
  color: var(--white);
  font-weight: 400;
}

.bio a {
  color: #fff;
  text-decoration: none;
}

/* Contenitore principale per mantenere tutto fluido */
.bio-container {
  display: inline;
  line-height: 1.6;
}

/* Rende il tag details parte del testo */
.details-inline {
  display: inline;
}

/* Rimuove lo stile di default del summary */
.details-inline summary {
  display: inline;
  list-style: none;
  cursor: pointer;
  color: var(--rose); /* Il tuo colore rosa */
  font-weight: 600;
  margin-left: 2px;
  text-decoration: none !important;
}

.details-inline summary::-webkit-details-marker {
  display: none;
}

/* Gestione icone: Mostra '+' quando è chiuso, 'less' quando è aperto */
.icon-close { display: none; }

.details-inline[open] .icon-expand { 
  display: none; 
}

.details-inline[open] .icon-close { 
  display: inline;
  font-size: 0.9em;
  opacity: 0.8;
  margin-left: 8px;
  text-decoration: none !important;
}

/* Assicura che il testo extra sia inline */
.content-text {
  display: inline;
}

/* Effetto hover per le icone */
.details-inline summary:hover {
  text-decoration: underline;
  opacity: 1;
}

/* =============================================
   SOCIAL ROW
   ============================================= */
.socials {
  display: flex;
  gap: 24px;
  align-self: center;
}

.icon-btn {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition:
    transform    0.2s ease,
    background   0.2s ease,
    border-color 0.2s ease,
    color        0.2s ease;
}

.icon-btn:hover {
  transform: translateY(-3px) scale(1.08);
  background: var(--rose-hover);
  border-color: rgba(232,180,184,0.3);
  color: var(--white);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.icon-btn.sound svg {
	width: 24px;
	height: 24px;
}

/* =============================================
   BADGE
   ============================================= */
.badge {
  margin-top: 2rem;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.22);
}

.badge a {
	color: rgba(255,255,255,0.22);
	font-size: 10px;
}

/* =============================================
   ANIMATION
   ============================================= */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* =============================================
   RESPONSIVE
   ============================================= */
/* mobile: soggetto centrato, velo uniforme */
@media (max-width: 736px) {
  .bg-layer::before {
    background:
      rgba(6,2,8,0.1);
  }
}

@media (max-width: 480px) {
  .inner { max-width: 100%; }
  .page  { padding: 2.5rem 1.4rem; align-items: center; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .page { padding: 1.5rem 2rem; }
  .bio  { margin-bottom: 1rem; }
}