/* ============================================
   PIQUED JACKS — Global Styles
   Palette: B/N contrastato + toni caldi desaturati anni '70
   Font: Inter (sostituto Neue Haas Grotesk)
   ============================================ */
 
/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=DM+Sans:ital,wght@0,300;0,400;1,300&display=swap');
 
/* --- CSS Variables --- */
:root {
  /* Palette B/N contrastato */
  --pj-black:      #0a0908;
  --pj-dark:       #0d0c0a;
  --pj-mid:        #1e1c18;
 
  /* Toni caldi desaturati anni '70 */
  --pj-cream:      #ede8dc;
  --pj-warm:       #d4c9b0;
  --pj-tan:        #b5a98a;
  --pj-accent:     #8a7355;
  --pj-panna:      #e8e2d4;
 
  /* Testo */
  --pj-text-light: rgba(237, 232, 220, 0.92);
  --pj-text-dark:  #1e1c18;
 
  /* Font */
  --pj-font-title: 'Inter', sans-serif;
  --pj-font-body:  'DM Sans', sans-serif;
 
  /* Transizioni */
  --pj-transition-slow: 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  --pj-transition-mid:  0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --pj-transition-fast: 0.25s ease;
}
 
/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
html {
  scroll-behavior: auto;
  font-size: 16px;
}
 
body {
  background: var(--pj-dark);
  color: var(--pj-cream);
  font-family: var(--pj-font-body);
  overflow-x: hidden;
  overflow-y: hidden; /* gestito da JS su desktop */
}
 
/* Nessun glow, nessun neon, nessun 3D */
* {
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
/* ============================================
   GRAIN OVERLAY GLOBALE
   ============================================ */
#pj-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
 
/* ============================================
   LOGO FISSO IN ALTO AL CENTRO
   ============================================ */
#pj-logo-fixed {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  font-family: var(--pj-font-title);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--pj-cream);
  white-space: nowrap;
  mix-blend-mode: difference;
  transition: opacity var(--pj-transition-fast);
  text-decoration: none;
}
 
/* ============================================
   SEZIONI — STRUTTURA BASE
   ============================================ */
.pj-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
 
/* Sfondo fotografico */
.pj-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: filter var(--pj-transition-slow), transform var(--pj-transition-slow);
  will-change: filter, transform;
  z-index: 0;
}
 
/* Blur opzionale controllato da pannello */
.pj-bg--blur {
  filter: blur(3px) !important;
  transform: scale(1.04) !important;
}

/* Foto mobile: si attiva sotto i 768px se la CSS var è impostata */
@media (max-width: 768px) {
  .pj-bg[style*="--pj-bg-mobile"] {
    background-image: var(--pj-bg-mobile) !important;
  }
}

/* Overlay scuro per leggibilità */
.pj-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 9, 8, 0.42);
  transition: background var(--pj-transition-slow);
}
 
/* Contenuto principale sopra sfondo */
.pj-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 780px;
  text-align: center;
  transition: opacity 0.3s ease;
}
 
/* ============================================
   EFFETTO MOTION BLUR — TRANSIZIONE SCROLL
   Applicato via JS aggiungendo .pj-blurring
   ============================================ */
.pj-section.pj-blurring .pj-bg {
  filter: blur(22px) brightness(0.35);
  transform: scale(1.06);
}
 
.pj-section.pj-blurring .pj-overlay {
  background: rgba(10, 9, 8, 0.65);
}
 
.pj-section.pj-blurring .pj-content {
  opacity: 0;
}
 
/* ============================================
   BLUR LEGGERO SFONDO — Solo sezione Spotify
   Sempre attivo, non legato alla transizione
   ============================================ */
.pj-section--spotify .pj-bg {
  filter: blur(3px);
  transform: scale(1.04);
}
 
/* Spotify: durante transizione aumenta blur */
.pj-section--spotify.pj-blurring .pj-bg {
  filter: blur(24px) brightness(0.35);
  transform: scale(1.07);
}
 
/* ============================================
   TIPOGRAFIA GLOBALE
   ============================================ */
.pj-label {
  font-family: var(--pj-font-title);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--pj-accent);
  display: block;
  margin-bottom: 1.2rem;
}
 
.pj-title {
  font-family: var(--pj-font-title);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--pj-cream);
}
 
.pj-subtitle {
  font-family: var(--pj-font-body);
  font-weight: 300;
  font-style: italic;
  color: var(--pj-warm);
  letter-spacing: 0.18em;
}
 
.pj-body {
  font-family: var(--pj-font-body);
  font-weight: 300;
  line-height: 1.78;
  color: var(--pj-text-dark);
}
 
/* ============================================
   ANIMAZIONI
   ============================================ */
@keyframes pj-fade-up {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
@keyframes pj-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
 
@keyframes pj-line-down {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
 
/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
  body {
    /* Su mobile scroll naturale */
    overflow-y: auto;
  }
 
  .pj-section {
    height: auto;
    min-height: 100vh;
  }
 
  #pj-logo-fixed {
    font-size: 10px;
    letter-spacing: 0.3em;
    top: 20px;
  }
 
  .pj-content {
    width: 88%;
    padding: 80px 0 60px;
  }
 
  /* Mobile: blur Spotify ridotto */
  .pj-section--spotify .pj-bg {
    filter: blur(2px);
    transform: scale(1.02);
  }
 
  /* Mobile: motion blur transizione più leggero */
  .pj-section.pj-blurring .pj-bg {
    filter: blur(10px) brightness(0.4);
    transform: scale(1.02);
  }
}
 
@media (max-width: 480px) {
  .pj-label {
    font-size: 0.6rem;
    letter-spacing: 0.28em;
  }
}