/* ============================================================
   LIVE SIGNAL — design system for pietroluzzati.com
   ============================================================ */

:root{
  --bg-base:#0A1929;
  --bg-elevated:#0F2438;
  --bg-card:#13293F;
  --line:#1E3A54;
  --text-primary:#F2F6FA;
  --text-muted:#7E97AF;
  --cyan:#00E5FF;
  --magenta:#FF2D95;
  --green:#8FD694;
  --amber:#FFB454;
  --violet:#C9A6FF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

body::before{
  content:"";
  position:fixed;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
  z-index:999;
}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;
  z-index:100;
  background:linear-gradient(to bottom, rgba(10,25,41,0.92), transparent);
}
.logo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.5px;
}
.nav-links{display:flex;gap:32px;font-size:13px;}
.nav-links a{
  color:var(--text-muted);
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-size:11px;
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--cyan);}
.on-air{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:1px;
  color:var(--magenta);
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--magenta);
  animation:blink 1.4s infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.25;}}

/* ---------- HERO (home) ---------- */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 40px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right, transparent, var(--cyan), transparent);
  animation:scan 6s linear infinite;
}
@keyframes scan{0%{top:0;}100%{top:100%;}}
.timecode{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--text-muted);letter-spacing:1px;margin-bottom:28px;
}
.timecode span{color:var(--cyan);}
h1.name{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(48px, 10vw, 128px);
  line-height:0.92;letter-spacing:-2px;margin:0;text-transform:uppercase;
}
h1.name .accent{color:var(--cyan);}
.role-line{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;
  font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text-muted);
}
.role-line span{padding:4px 10px;border:1px solid var(--line);border-radius:2px;}
.role-line span:nth-child(1){color:var(--cyan);border-color:rgba(0,229,255,0.3);}
.role-line span:nth-child(2){color:var(--magenta);border-color:rgba(255,45,149,0.3);}
.scroll-cue{
  position:absolute;bottom:36px;left:40px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);
  display:flex;align-items:center;gap:10px;
}
.scroll-cue .bar{width:1px;height:32px;background:var(--line);position:relative;overflow:hidden;}
.scroll-cue .bar::after{
  content:"";position:absolute;top:-32px;left:0;width:100%;height:32px;
  background:var(--cyan);animation:fall 1.8s ease-in-out infinite;
}
@keyframes fall{0%{top:-32px;}100%{top:32px;}}

/* ---------- TICKER ---------- */
.ticker-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-elevated);padding:16px 0;overflow:hidden;white-space:nowrap;
}
.ticker{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--text-muted);letter-spacing:1px;animation:ticker 60s linear infinite;
}
.ticker span{margin:0 22px;}
.ticker .sep{color:var(--magenta);}
@keyframes ticker{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ---------- SECTIONS ---------- */
.section{padding:120px 40px;max-width:1400px;margin:0 auto;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:56px;flex-wrap:wrap;gap:20px;
}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;display:block;
}
.section-head h2{
  font-family:'Space Grotesk',sans-serif;font-size:38px;margin:0;letter-spacing:-1px;
}
.section-head p{color:var(--text-muted);max-width:340px;font-size:14px;line-height:1.6;margin:0;}

/* filter pills */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.filter-btn{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  padding:8px 16px;border:1px solid var(--line);border-radius:2px;background:transparent;
  color:var(--text-muted);cursor:pointer;transition:all .2s ease;
}
.filter-btn:hover{color:var(--text-primary);border-color:var(--text-muted);}
.filter-btn.active{color:var(--bg-base);background:var(--cyan);border-color:var(--cyan);}

/* ---------- WORK GRID ---------- */
.grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.card{
  background:var(--bg-card);
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;transition:background .25s ease;
  min-height:320px;
  overflow:hidden;
}
.card:hover{background:var(--bg-elevated);}
.card:hover .card-title{color:var(--cyan);}
.card:hover .card-thumb img{transform:scale(1.05);opacity:0.55;}
.card-thumb{
  position:relative;height:150px;overflow:hidden;background:var(--bg-elevated);
}
.card-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease, opacity .4s ease;
  opacity:0.75;
}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;justify-content:space-between;}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;}
.tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;
  text-transform:uppercase;padding:4px 8px;border-radius:2px;white-space:nowrap;
}
.tag.sport{color:var(--cyan);background:rgba(0,229,255,0.08);}
.tag.live{color:var(--magenta);background:rgba(255,45,149,0.08);}
.tag.sociale{color:var(--green);background:rgba(143,214,148,0.08);}
.tag.industria{color:var(--amber);background:rgba(255,180,84,0.08);}
.tag.cultura{color:var(--violet);background:rgba(201,166,255,0.08);}
.tag.design{color:#FF8A65;background:rgba(255,138,101,0.08);}
.year{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);}
.card-title{
  font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:500;line-height:1.25;
  margin-top:18px;transition:color .2s ease;
}
.card-client{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);
  margin-top:12px;letter-spacing:0.5px;
}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.about p{font-size:16px;line-height:1.8;color:#C7D4E0;margin:0 0 20px 0;}
.stat-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
.stat{
  display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:13px;
}
.stat .num{font-family:'Space Grotesk',sans-serif;color:var(--cyan);font-size:15px;}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);padding:60px 40px 40px;
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px;
}
footer .signal-status{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted);
  display:flex;align-items:center;gap:8px;
}
footer .signal-status .dot{background:var(--cyan);}
footer .contact-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,5vw,56px);letter-spacing:-1px;}
footer .contact-big .accent{color:var(--magenta);}
.foot-links{display:flex;gap:24px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted);flex-wrap:wrap;}
.foot-links a:hover{color:var(--cyan);}
.foot-meta{
  width:100%;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ============================================================
   PROJECT PAGE
   ============================================================ */
.project-header{
  padding:150px 40px 60px;
  max-width:1200px;margin:0 auto;
  border-bottom:1px solid var(--line);
}
.back-link{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:36px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-muted);transition:color .2s ease;
}
.back-link:hover{color:var(--cyan);}
.back-link .arrow{transition:transform .2s ease;}
.back-link:hover .arrow{transform:translateX(-4px);}
.project-header .eyebrow-row{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;
}
.project-header h1{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(32px, 6vw, 64px);
  line-height:1.05;letter-spacing:-1px;margin:0 0 32px 0;
}
.meta-row{
  display:flex;gap:36px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted);
}
.meta-row .meta-item{display:flex;flex-direction:column;gap:6px;}
.meta-row .meta-label{letter-spacing:1px;text-transform:uppercase;font-size:10px;color:var(--text-muted);opacity:0.7;}
.meta-row .meta-value{color:var(--text-primary);font-size:13px;}

.project-body{max-width:1200px;margin:0 auto;padding:60px 40px 40px;}
.project-hero-img{
  width:100%;
  border:1px solid var(--line);
  margin-bottom:60px;
  background:var(--bg-elevated);
}
.prose{
  max-width:760px;
  font-size:16px;line-height:1.85;color:#C7D4E0;
  margin-bottom:70px;
  white-space:pre-line;
}
.video-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:70px;
}
.video-embed{
  position:relative;width:100%;padding-bottom:56.25%;height:0;
  border:1px solid var(--line);background:var(--bg-elevated);overflow:hidden;
}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(260px,1fr));gap:16px;margin-bottom:70px;
}
.gallery img{border:1px solid var(--line);width:100%;height:220px;object-fit:cover;}
.next-project{
  border-top:1px solid var(--line);padding:60px 40px;max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
}
.next-project .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;}
.next-project .title{font-family:'Space Grotesk',sans-serif;font-size:28px;transition:color .2s ease;}
.next-project a:hover .title{color:var(--cyan);}

@media (max-width:800px){
  .grid{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  nav{padding:18px 20px;}
  .nav-links{display:none;}
  .section{padding:80px 20px;}
  .video-grid{grid-template-columns:1fr;}
  .project-header{padding:120px 20px 40px;}
  .project-body{padding:40px 20px;}
}