/* Tipografia i base */
body {
  margin: 0;
  font-family: 'Fira Code', monospace;
  line-height: 1.6;
  background-color: #0f172a;
  color: #9cbeb4;
  
}
/* Capçalera */
.site-header {
  position: relative;
  background: #0f172a;
  color: #9cbeb4;
  padding: 1.5rem;
  text-align: center;
  border-bottom: 0px solid #eee;
}
/* Contenidor de la foto i el nom */
.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
/* Foto rodona */
.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profile-pic:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(180, 142, 173, 0.4); 
}

.site-title {
  margin: 0;
  font-size: 2.5rem;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(129, 161, 193, 0.1);
}
/* Menú */
.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem
}

.main-nav a {
  text-decoration: none;
  color: #9cbeb4;
  font-weight: bold;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}

.main-nav a:hover {
  color: #b48ead; 
  transform: scale(1.1);
  text-shadow: 0 0 8px rgba(180, 142, 173, 0.5); /* Brillantor vaporwave */
}

.main-nav a.active {
  color: #81a1c1; 
  border-bottom: 2px solid #b48ead;
}

/* --- Botó del menú: amagat per defecte --- */
.nav-toggle {
  display: none;
}

/* --- Versió mòbil del menú --- */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
    background: none;
    border: 0px solid #9cbeb4;
    color: #9cbeb4;
    font-size: 1.8rem;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 5px;
    padding: 0.2rem 0.6rem;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1.2px;
    transition: color 0.3s, border-color 0.3s;
  }

  .nav-toggle:hover {
    color: #b48ead;
    border-color: #b48ead;
  }

  .main-nav ul {
    display: none;
    flex-direction: column;
    align-items: center;
    background-color: #0f172a;
    padding: 1rem 0;
    gap: 1rem;
    margin: 0;
  }

  .main-nav ul.open {
    display: flex;
  }

  .main-nav a {
    font-size: 1.2rem;
  }
}
/* Seccions */
section {
  background: #ffffff00;  /* fons transparent */
  color: #d4d4d4;         /* text clar */
  box-shadow: none;       /* sense ombra */
  border-radius: 0;       /* sense cantonades rodones */
  padding: 2.5rem 2rem;   /* menys padding vertical a escriptori */
  max-width: 900px;
  margin: 1.5rem auto;    /* menys espai entre seccions */
}

section * {
  opacity: 1 !important;  /* text sempre visible */
}

section h2 {
  color: #9cbeb4;
  margin-bottom: 1rem;
  font-size: 2rem;
}

/* Llistes */
section ul {
  list-style: none;
  padding: 0;
}

section ul li {
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 2.0rem;
}

section ul li::before {
  content: "🫧";
  color: #81a1c1; 
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.3s;
}
section ul li:hover::before {
    transform: rotate(20deg);
    color: #b48ead; /* Es torna lila al passar el ratolí per la línia */
}
/* Footer */
.site-footer {
  background-color: #0f172a;
  color: #9cbeb4;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* Detalls experimentals */
.about-section h2 {
  margin-bottom: 1rem; /* separació entre títol i contingut */ }

.about-content {
  display: flex;           /* Activa Flexbox */
  align-items: center;     /* Centra verticalment text i imatge */
  gap: 20px;               /* Espai entre text i imatge */
}

/* Text dins de .about-content */
.about-content p {
  flex: 1;              /* ocupa espai restant */
  margin: 0;
}

/* Imatge dins de .about-content */
.about-content img {
  width: 180px;
  height: auto;
  border-radius: 10px;
}
.about-contact-layout {
  max-width: 1100px;
  margin: 0 auto 2rem auto;
}

a {
  color: #9cbeb4;
  transition: color 0.3s;
}

a:hover {
  color: #b48ead;
}

/* Secció Sobre mi sense requadre, sobre fons de la pàgina */
#about {
  padding: 3rem 2rem;
  margin: -4rem auto 2rem auto;
  margin-top: -1.5rem;
  background: none;
}

/* Text i imatges visibles */
#about * {
  opacity: 1 !important;
  color: #d4d4d4;           /* text clar sobre el fons fosc del body */
}
#about h2 {
  color: #9cbeb4; /* el mateix blau clar que el web */
}
.language-switch {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.language-switch a {
  color: #9cbeb4;
  text-decoration: none;
  margin: 0rem 0rem;
}

.language-switch a:hover {
  color: #b48ead;
}

@media (max-width: 768px) {
  .about-content {
    display: flex;
    flex-direction: column; /* canvia de fila a columna */
    align-items: center; /* centra la imatge i el text */
    text-align: left; /* opcional: centra també el text */
  }

  .about-content img.profile-pic {
    margin-top: 1rem; /* espai entre el text i la imatge */
    width: 80%; /* opcional: redueix la mida si és massa gran */
    max-width: 300px; /* limita la mida màxima */
  }
}
/* --- Versió mòbil: menys espai vertical entre seccions --- */
@media (max-width: 768px) {

  /* Redueix el padding i marge de totes les seccions */
  section {
    padding: 1.5rem 1.5rem;  /* menys espai intern */
    margin: 1rem auto;     /* menys espai entre seccions */
  }

  /* Redueix la separació sota el menú desplegable */
  .main-nav {
    margin-bottom: 0.2rem; /* gairebé enganxat al següent element */
  }

  /* Ajusta el "Sobre mi" perquè comenci més amunt */
  #about {
    margin-top: -1.75rem;   /* lleugerament negatiu per compensar */
    padding-top: 1.5rem;   /* menys espai intern a dalt */
  }

  /* Si encara queda massa espai, pots provar amb això:
  #about { margin-top: -1rem; }
  */
}
/* Secció vídeo enganxada a la part superior */
#video-section {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw; /* elimina qualsevol màxim */
}

/* Contenidor del vídeo */
.video-container {
  width: 100%;       /* tota l'amplada */
  max-height: 150px; /* alçada de franja */
  overflow: hidden;
  cursor: pointer;
  position: relative;

  display: flex;         /* activem flexbox */
  justify-content: center; /* centrat horitzontal */
}

/* Vídeo dins de la franja */
.video-container video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* omple la franja */
  transition: transform 0.3s ease;
}

/* Botó de mute dins de la franja */
.mute-toggle {
  /* --- Posicionament (Mantenim l'original) --- */
  position: absolute;
  top: 15px;   /* Li donem una mica més d'aire que el 8px original */
  right: auto; /* Anul·lem la dreta */
  left: 15px;  /* El posem a l'ESQUERRA */

  
  /* --- Nou disseny visual (Rodó i maco) --- */
  display: none; /* Amagat per defecte */
  width: 45px;
  height: 45px;
  border-radius: 50%; /* Això el fa rodó */
  background: rgba(156, 190, 180, 0.9); /* El teu color accent, força sòlid */
  color: #0f172a; /* Icona fosca per contrast */
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  
  /* Animació suau */
  transition: transform 0.2s ease, background-color 0.2s ease;
  
  /* Centrat de la icona (preparat per quan es faci visible) */
  align-items: center;
  justify-content: center;
}

/* Efecte al passar el ratolí */
.mute-toggle:hover {
  transform: scale(1.1);
  background: #b48ead; /* Lila */
}
/* Mostra el botó només quan el vídeo s'obre */
.video-container.open .mute-toggle {
  display: block;
}

/* --- Estils per al botó de Tancar (NOU) --- */
.close-video {
  position: absolute;
  top: 15px;
  right: 15px; /* A la cantonada dreta */
  z-index: 1001; /* Per sobre de tot */
  display: none; /* Amagat d'entrada */
  
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(156, 190, 180, 0.9); /* Base verda */
  color: #0f172a;
  border: none;
  font-size: 1.4rem; /* Una mica més gran la X */
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Hover Vaporwave (Lila) */
.close-video:hover {
  transform: scale(1.1);
  background: #b48ead; 
  color: #fff;
}

/* Mostrar el botó quan el vídeo està obert */
.video-container.open .close-video {
  display: flex;
}


/* Quan el vídeo s'obre a gran mida */
.video-container.open {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 90%;
  z-index: 1000;
  background: #000; /* fons negre darrere del vídeo */
}

.video-container.open video {
  width: 100%;
  max-height: 90vh;
  height: auto;
  object-fit: contain;
  display: block;
  outline: none;
}

/* Mostra controls quan està obert */
.video-container.open video::-webkit-media-controls {
  display: block;
}
/* Overlay translúcid sobre el vídeo */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(30,30,30,0) 0%, rgba(30,30,30,1) 100%);
  pointer-events: none; /* permet clics sobre el vídeo */
  opacity: 1;           /* opacitat inicial */
  transition: opacity 0.3s ease; /* transició suau */
  z-index: 1; /* darrere del botó */
}

/* Quan el vídeo s'obre, ocultem l'overlay */
.video-container.open > .video-overlay {
  opacity: 0;
}
.video-credits {
  position: absolute;
  bottom: 5px;        /* a la part inferior de la franja */
  right: 10px;        /* marge a la dreta */
  color: #fff;        /* blanc o contrastant */
  font-size: 0.4rem;
  background: rgba(0,0,0,0.3); /* fons lleugerament translúcid per llegibilitat */
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none; /* no interfereix amb clics */
  z-index: 2;
}
@media (max-width: 768px) {
  .video-credits {
    text-align: center;
    left: 50%;               /* centra horitzontal amb transform */
    transform: translateX(-50%);
    right: auto;             /* elimina el marge dret */
    bottom: 5px;             /* manté la distància inferior */
  }

  /* A mòbil amaguem només el botó de mute, però mantenim visible la X de tancar */
  .mute-toggle,
  .video-container.open .mute-toggle {
    display: none !important;
  }
}

/* Estat inicial (abans de ser vist) */
section h2, section li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Classe que afegeix el JS */
.show {
  opacity: 1 !important;
  transform: translateY(0);
}
#cyber-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Molt important: darrere de tot */
  pointer-events: none; /* Perquè no bloquegi els clics als botons */
  background: #0f172a; /* El teu color de fons base */
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }

  /* Seccions: sense “fade-in” ni desplaçament */
  section h2,
  section li {
    opacity: 1 !important;
    transform: none !important;
  }
}
::selection {
  background: #b48ead; /* Fons lila */
  color: #0f172a; /* Text fosc */
  text-shadow: none;
}
/* --- CINTA INFINITA (TICKER) --- */
.ticker-wrap {
  width: 100%;
  overflow: hidden; /* Amaga el text que surt de la pantalla */
  background: rgba(15, 23, 42, 0.8); /* Fons fosc semitransparent */
  border-top: 1px solid rgba(180, 142, 173, 0.3); /* Vora lila subtil a dalt */
  border-bottom: 1px solid rgba(180, 142, 173, 0.3); /* Vora lila subtil a baix */
  padding: 0.8rem 0; /* Alçada de la cinta */
  white-space: nowrap; /* Obliga al text a estar en una sola línia */
  position: relative;
  z-index: 10;
  backdrop-filter: blur(4px); /* Efecte Liquid Glass */
}

.ticker {
  display: inline-flex; /* Posa els dos blocs de text un al costat de l'altre */
  animation: ticker-scroll 25s linear infinite; /* La màgia del moviment */
}

.ticker-item {
  padding-right: 0; /* Espai entre el final d'un bloc i l'inici del següent */
  font-size: 0.8rem;
  font-weight: bold;
  color: #9cbeb4; /* Verd base */
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* L'estrella o separador */
.separator {
  color: #b48ead;
  margin: 0 1.5rem; /* Espai al voltant de l'estrella */
  text-shadow: 0 0 5px #b48ead; /* Brillantor de neó */
}

/* ANIMACIÓ: Mou el text de dreta a esquerra */
@keyframes ticker-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* Es mou exactament la meitat (una còpia) */
  }
}
.under-construction-image {
  display: block;
  margin: 0.75rem auto 0; 
  max-width: 300px;       
  height: auto;           
  }