/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* BASE */
body{
  background:#f5f5f5;
  color:#2d2d2d;
  font-family: 'Inter', sans-serif;
  font-weight:300;
  font-size:13px;
  line-height:1.8;
  letter-spacing:0.2px;
}

/* LAYOUT */
.wrapper{
  width:950px;
  margin:100px auto;
  display:flex;
  gap:50px;
}

.main{ width:620px; }
.sidebar{ width:220px; }

/* LOGO */
.logo{
  width:35px 
}
/* NAV */
nav{
  margin-bottom:30px;
}

nav a{
  margin-right:18px;
  text-decoration:none;
  color:#6fa89a;
  font-size:12px;
  position:relative;
}

/* hover elegant */
nav a::after{
  content:"";
  position:absolute;
  width:0;
  height:1px;
  bottom:-3px;
  left:0;
  background:#6fa89a;
  transition:0.3s;
}

nav a:hover::after{
  width:100%;
}

/* BACK */
.back{
  display:inline-block;
  margin-bottom:25px;
  font-size:12px;
  color:#6fa89a;
}

/* TITOLS */
h1{
  font-size:22px;
  margin-bottom:25px;
  letter-spacing:1px;
}

h2{
  font-size:15px;
  margin-bottom:10px;
  font-weight:400;
}

/* TEXT */
p{
  color:#444;
  max-width:520px;
}

/* INTRO */
.intro img{
  width:100%;
  margin-bottom:15px;
  filter:brightness(0.95);
}

/* CARDS */
.card{
  margin-bottom:60px;
}

/* CAIXES SUAUS */
.soft-box{
  background:rgba(255,255,255,0.7);
  padding:18px;
  backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.03);
}

/* IMATGES */
img{
  width:100%;
  transition:0.5s;
}

img:hover{
  transform:scale(1.05);
  filter:brightness(1.05);
}

/* OVERLAY TEXT (MOLT IMPORTANT) */
.overlay-box{
  position:relative;
  overflow:hidden;
}

.overlay-box p{
  position:absolute;
  bottom:10px;
  left:10px;
  background:rgba(255,255,255,0.8);
  padding:4px 8px;
  font-size:11px;
  backdrop-filter:blur(3px);
}

/* DIVIDER */
.divider{
  height:1px;
  background:linear-gradient(to right, transparent, #ddd, transparent);
  margin:40px 0;
}

/* GALLERY */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.music{
  background: var(--blanc);
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  padding:20px;
  margin:30px 0;
  text-align:center;
}

.music img{
  width:180px;
  border-radius:10px;
  margin-bottom:15px;
}

.music p{
  font-weight:600;
  color: var(--verd);
  margin-bottom:15px;
}

.music iframe{
  width:100%;
  max-width:420px;
  height:152px;   /* mida bona per Spotify */
  border:none;
  border-radius:12px;
}
/* MUSIC */
.music{
  margin-bottom:30px;
}

audio{
  width:100%;
  margin-top:8px;
}

/* ALBUMS */
.albums{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

/* SIDEBAR */
.sidebar{
  font-size:12px;
  color:#666;
  line-height:1.6;
}

/* ANIMACIONS */
.fade{
  opacity:0;
  transform:translateY(25px);
  transition:0.8s ease;
}

.fade.show{
  opacity:1;
  transform:translateY(0);
}

/* CURSOR aesthetic */
body{
  cursor:default;
}

a{
  cursor:pointer;
}

/* SCROLL SUAU */
html{
  scroll-behavior:smooth;
}

/* CAPA DE FONS SUAU */
.bg-layer{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:radial-gradient(circle at 20% 20%, #e6f2ed, transparent),
             radial-gradient(circle at 80% 30%, #f0f7f5, transparent);
  z-index:-2;
}

/* CAPA DE GRAIN (efecte tumblr) */
.grain{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0.04;
  background-image:url("https://www.transparenttextures.com/patterns/noise.png");
  z-index:-1;
}

/* EFECTE FLOAT SUAU */
.card{
  transition:0.4s;
}

.card:hover{
  transform:translateY(-5px);
}

/* GLASS EFFECT MÉS PRO */
.soft-box{
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
}

/* OMBRA SUAU */
.card{
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  /* POSTS */
.post{
  margin-bottom:60px;
}

/* TAGS */
.tags{
  margin-top:10px;
}

.tags span{
  font-size:11px;
  margin-right:8px;
  color:#5f9c89;
}

/* LIKES */
.likes{
  margin-top:12px;
}

.likes button{
  background:none;
  border:none;
  font-size:13px;
  cursor:pointer;
  color:#5f9c89;
  transition:0.3s;
}

.likes button:hover{
  transform:scale(1.1);
}

.hero{
  margin-top:40px;
  margin-bottom:50px;
}

.hero h1{
  font-size:32px;
  margin-bottom:10px;
}

.hero p{
  color:#5f9c89;
  font-size:14px;
}

.line{
  height:1px;
  background:linear-gradient(to right, transparent, #5f9c89, transparent);
  margin:30px 0;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
}

.logo{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:50%;
}

.subtitle{
  opacity:0.9;
  font-size:14px;
  margin-top:5px;
}

.about-hero{
  display:flex;
  gap:25px;
  align-items:center;
}

.about-hero img{
  width:180px;
  border-radius:12px;
}

.about-text{
  flex:1;
}

.updates-box{
  background: var(--blanc);
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  padding:15px;
  width:320px;
}

.updates-title{
  font-weight:700;
  color: var(--verd);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}

.updates-list{
  max-height:140px;   /* alçada del quadre */
  overflow-y:auto;    /* activa la barra */
  border:1px solid #dfe7df;
  padding:8px;
  border-radius:8px;
  background:#f7fbf7;
  font-size:14px;
  line-height:1.6;
}

.updates-list p{
  margin-bottom:6px;
}