/* ===========================================================
   Jumply Template v1 — "Neon Atelier"
   Creator: Laura Mikus
   Design system: electric maximalism / dark navy + neon pink + teal
   =========================================================== */

html, body {
  margin: 0;
  padding: 0;
}

html {
  /* Disattiva pull-to-refresh + rubber band overscroll su mobile */
  overscroll-behavior: none;
}

body {
  min-height: max(884px, 100dvh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

/* Material symbols weight baseline */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===========================================================
   Desktop "boutique" layout:
   su viewport >= 768px la pagina si centra in una colonna mobile-like,
   con sfondo atmosferico (foto sfocata + halo neon) ai lati.
   Questo è il pattern usato da Linktree/Beacons — evita
   l'effetto "foto persa nel mezzo" e dà un look premium e coerente.
   =========================================================== */

body {
  position: relative;
  isolation: isolate;
}

/* Background atmosferico desktop: solo su schermi larghi */
@media (min-width: 768px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url("../img/profile.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(60px) saturate(1.4) brightness(0.55);
    transform: scale(1.2); /* evita bordi bianchi dovuti al blur */
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 80% 60% at 20% 20%, rgba(255, 136, 181, 0.15), transparent 60%),
      radial-gradient(ellipse 80% 60% at 80% 80%, rgba(90, 248, 251, 0.12), transparent 60%),
      linear-gradient(180deg, rgba(6, 13, 36, 0.72), rgba(6, 13, 36, 0.88));
  }

  /* La "shell" mobile-like centrata su desktop */
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body > * {
    width: 100%;
    max-width: 480px;
  }
  /* Eccezione: bottom nav deve restare full-width */
  body > nav.fixed {
    max-width: none;
  }
}

/* ---------- Hero — dimensioni basate su aspect-ratio ----------
   Il rapporto è ancorato alla LARGHEZZA del viewport (stabile durante
   lo scroll), non all'altezza (che cambia quando la barra URL di
   Safari/Chrome mobile si nasconde/appare → causava lo zoom percepito).
   Niente GPU hints (translateZ/will-change/contain) perché su iOS
   Safari forzano ri-rasterizzazioni intermedie che amplificano l'effetto.
------------------------------------------------------------------ */
.hero {
  width: 100%;
  aspect-ratio: 9 / 11;
  max-height: 560px;
  min-height: 380px;
  background: #060d24;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero {
    aspect-ratio: auto;
    height: 520px;
    max-height: 560px;
    border-radius: 0 0 2rem 2rem;
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.5),
      0 0 60px rgba(255, 136, 181, 0.15);
  }
}

/* Hero image: cover + face-weighted position */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}


/* ---------- Neon glows ---------- */
.neon-glow-primary  { box-shadow: 0 0 25px 2px rgba(255, 136, 181, 0.5); }
.neon-glow-secondary{ box-shadow: 0 0 25px 2px rgba(90, 248, 251, 0.5); }
.neon-glow-spotify  { box-shadow: 0 0 20px 2px rgba(29, 185, 84, 0.4); }

.text-shadow-neon {
  text-shadow: 0 0 15px rgba(90, 248, 251, 0.8);
}

/* ---------- CTA hover states (desktop mouse) ---------- */
.cta {
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    filter 0.2s ease;
}
@media (hover: hover) {
  .cta-primary:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 0 35px 4px rgba(255, 136, 181, 0.75);
    filter: brightness(1.06);
  }
  .cta-secondary:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 0 35px 4px rgba(90, 248, 251, 0.75);
    filter: brightness(1.06);
  }
  .music-card:hover,
  .social-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(162, 162, 255, 0.15);
  }
}

/* ---------- Glass panel ---------- */
.glass-panel {
  background: rgba(26, 36, 69, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ---------- Badge FREE ---------- */
.badge-free {
  background: linear-gradient(135deg, #5af8fb 0%, #ff88b5 100%);
  color: #060d24;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(90, 248, 251, 0.4);
}

/* ---------- Pointer (top-right, in-app browser hint) ---------- */
.pointer {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  pointer-events: none;
}
.pointer-badge {
  background: rgba(10, 18, 43, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e0e4ff;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 0 20px rgba(90, 248, 251, 0.35);
  animation: pointerPulse 2.2s ease-in-out infinite;
}
@keyframes pointerPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---------- Popup 18+ ---------- */
.popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 13, 36, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: popupFade 0.25s ease-out;
}
.popup.open { display: flex; }

@keyframes popupFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.popup-content {
  position: relative;
  background: #0a122b;
  border-radius: 2rem;
  padding: 32px 24px 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 40px rgba(255, 136, 181, 0.15);
  animation: popupSlide 0.3s ease-out;
}

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

.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #a4aac8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.popup-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.popup-close .material-symbols-outlined { font-size: 20px; }

.popup-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #151e3c;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.popup-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.popup-sub {
  color: #a4aac8;
  font-size: 14px;
  margin: 0 0 24px;
  font-family: 'Be Vietnam Pro', sans-serif;
}

.popup-btn {
  display: block;
  background: linear-gradient(135deg, #ff88b5, #ff6ea9);
  color: #4b0027;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 16px;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 0 25px rgba(255, 136, 181, 0.5);
  transition: transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.02em;
}
.popup-btn:hover { box-shadow: 0 0 35px rgba(255, 136, 181, 0.7); }
.popup-btn:active { transform: scale(0.97); }

.popup-divider {
  margin: 24px 0 16px;
  position: relative;
  text-align: center;
}
.popup-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(164, 170, 200, 0.2), transparent);
}
.popup-divider span {
  position: relative;
  background: #0a122b;
  padding: 0 12px;
  color: #6e7490;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

.popup-steps {
  text-align: left;
  padding: 0 0 0 20px;
  margin: 0;
  color: #a4aac8;
  font-size: 14px;
  line-height: 1.6;
  font-family: 'Be Vietnam Pro', sans-serif;
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}
.popup-steps li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 36px;
  counter-increment: step;
}
.popup-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: rgba(90, 248, 251, 0.12);
  color: #5af8fb;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-steps li strong { color: #e0e4ff; font-weight: 600; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pointer-badge,
  .popup,
  .popup-content {
    animation: none !important;
  }
}