/* =============================================
   Apa! Barna — Onboarding
   ============================================= */

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

body {
  font-family: 'Poppins', sans-serif;
  background-color: #0D0D0D;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
}

.pantalla {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  background-image: url('../../img/grafics/fons.jpg');
  background-size: cover;
  background-position: center top;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px 28px 72px 28px;
  position: relative;
  overflow: hidden;
}


/* ---- Estrelles ---- */

.estrelles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sp {
  position: absolute;
  display: block;
}

.sp svg { width: 100%; height: auto; }

/* 7 estrelles repartides per tota la pantalla en zones */
/* sp1: superior dreta — zona entre títol i flors */
.sp1 { width: 18px; top: 20%; left: 76%; animation: parpelleig 5s ease-in-out infinite,         flotar 7s ease-in-out infinite; }
/* sp2: centre esquerra — zona buida */
.sp2 { width: 26px; top: 32%; left: 22%; animation: parpelleig 6s ease-in-out infinite 1.2s,   flotar 8s ease-in-out infinite 0.8s; }
/* sp3: centre — entre la zona de les flors i la taca blava */
.sp3 { width: 14px; top: 50%; left: 52%; animation: parpelleig 7s ease-in-out infinite 2s,     flotar 6s ease-in-out infinite 1.5s; }
/* sp4: inferior dreta */
.sp4 { width: 11px; top: 83%; left: 80%; animation: parpelleig 5.5s ease-in-out infinite 0.5s, flotar 7.5s ease-in-out infinite 0.4s; }
/* sp5: sota subtítol */
.sp5 { width: 14px; top: 28%; left: 55%; animation: parpelleig 6s ease-in-out infinite 1.6s,   flotar 8s ease-in-out infinite 1.3s; }
/* sp6: inferior esquerra */
.sp6 { width: 16px; top: 72%; left: 14%; animation: parpelleig 5.5s ease-in-out infinite 0.9s, flotar 7s ease-in-out infinite 1.1s; }
/* sp7: centre alt dreta */
.sp7 { width: 10px; top: 34%; left: 88%; animation: parpelleig 6.5s ease-in-out infinite 2.3s, flotar 9s ease-in-out infinite 0.7s; }
/* sp8: centre baix esquerra, acompanya sp6 */
.sp8 { width: 13px; top: 62%; left: 10%; animation: parpelleig 5.5s ease-in-out infinite 1.8s, flotar 7s ease-in-out infinite 0.6s; }
/* sp9: mig dreta, entre sp1 i sp3 */
.sp9 { width: 16px; top: 44%; left: 68%; animation: parpelleig 6s ease-in-out infinite 0.4s,   flotar 8s ease-in-out infinite 1.9s; }

/* Punts rodons */
.punt {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  animation: parpelleig 6s ease-in-out infinite;
}

.punt1 { top:  6%; left: 18%; animation-delay: 0.6s; }
.punt2 { top: 13%; left: 60%; animation-delay: 2.1s; }
.punt3 { top: 60%; left: 78%; animation-delay: 1.0s; }
.punt4 { top: 68%; left: 38%; animation-delay: 3.0s; }
.punt5 { top: 88%; left: 42%; animation-delay: 1.7s; }


/* ---- Animació entrada ---- */

.titol {
  animation: entrada 1s ease-out both;
}

.subtitol {
  animation: entrada 1s ease-out 0.2s both;
}

.btn-login {
  animation: entrada 1s ease-out 0.38s both;
}

.btn-registre {
  animation: entrada 1s ease-out 0.52s both;
}

@keyframes entrada {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes parpelleig {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 1; }
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}


/* ---- Text ---- */

.contingut {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.titol {
  font-size: 42px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sparkle-titol {
  width: 22px;
  height: auto;
  flex-shrink: 0;
  margin-top: 8px;
}

.subtitol {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: 280px;
  position: relative;
  z-index: 1;
}


/* ---- Botons ---- */

.botons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.btn-login {
  display: block;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  padding: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  text-decoration: none;
}

.btn-registre {
  display: block;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  padding: 16px;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
}