:root{
  --bg:#000000;
  --text:#ffffff;
  --muted:#555;
  --accent:#d97a3a;

  --title:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}

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

body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}



/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:url("assets/DETAIL2-01.png") center/cover no-repeat;
  opacity:.85;
}

.hero-content{
  position:relative;
  max-width:700px;
  padding:40px;
}

.hero h1{
  font-family:var(--title);
  font-size:5rem;
  margin-bottom:10px;
}

.hero-date{
  font-weight:100;

  margin-bottom:14px;
}

.hero-tagline{
  font-style:italic;
  margin-bottom:28px;
}

.hero-actions a{
  display:inline-block;
  margin:6px 10px;
  padding:10px 20px;
  text-decoration:none;
  border-radius:30px;
  background:var(--accent);
  color:#000;
  font-weight:500;
}

/* SECTIONS */
.section{
  padding:90px 20px;
  text-align:center;
}

.section.narrow{max-width:680px;margin:auto;}
.section.wide{max-width:900px;margin:auto;}

h2{
  font-family:var(--title);
  font-size:4rem;
  margin-bottom:26px;
}

.lead{
  font-size:1.3rem;
  margin-bottom:20px;
}

.strong{
  font-weight:600;
  margin-top:30px;
}

/* LISTS */
.manifesto,
.expect{
  list-style:none;
  margin-top:20px;
}

.manifesto li,
.expect li{
  margin:14px 0;
}

/* CREWS */
.crews{
  font-style:italic;
  margin-top:20px;
}

/* IMAGE BREAKS */
.image-break img{
  width:100%;
  display:block;
  margin:80px 0;
}

/* CTA */
.cta{
  display:inline-block;
  margin-top:30px;
  padding:12px 26px;
  background:var(--accent);
  color:#000;
  border-radius:30px;
  text-decoration:none;
}

/* FINAL */
.final img{
  max-width:500px;
  margin-bottom:50px;
}

.final-actions a{
  display:inline-block;
  margin:10px;
  padding:12px 26px;
  background:var(--accent);
  border-radius:30px;
  text-decoration:none;
  color:#000;
}

.closing{
  margin-top:40px;
  font-style:italic;
}

/* FIXED MENU */
.menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:rgba(255, 102, 0, 0.75);
  backdrop-filter: blur(10px);
}

.menu nav{
  max-width:1100px;
  margin:auto;
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.menu a{
  text-decoration:none;
  color:var(--text);
  font-size:0.95rem;
}

.menu .logo{
  font-family:var(--title);
  font-weight:700;
}

.menu .links a{
  margin-left:20px;
  opacity:.75;
}

.menu .links a:hover{
  opacity:1;
}

/* HERO OFFSET (per non coprire il contenuto) */
.hero{
  padding-top:100px;
}

/* MOBILE */
@media(max-width:700px){
  .menu nav{
    flex-direction:column;
    gap:10px;
  }
  .menu .links a{
    margin:0 10px;
    font-size:0.9rem;
  }
}


/* COUNTDOWN  */
.countdown-section{
  padding-top:70px;
  padding-bottom:70px;
}

.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:3rem;
  align-items:end;
}

.cd-unit{
  position:relative;
  text-align:center;
}

/* pulsing accent beat (underline + glow) */
.cd-unit::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  width:26px;
  height:2px;
  background:var(--accent);
  animation:kfBeat 900ms ease-in-out infinite;
  transform-origin:center;
  filter: drop-shadow(0 0 0 rgba(217,122,58,0));
}

@keyframes kfBeat{
  0%,100%{
    transform:translateX(-50%) scaleX(1);
    opacity:.85;
    filter: drop-shadow(0 0 0 rgba(217,122,58,0));
  }
  50%{
    transform:translateX(-50%) scaleX(1.8);
    opacity:1;
    filter: drop-shadow(0 0 10px rgba(217,122,58,.85));
  }
}

.cd-number{
  font-family:var(--title);
  font-weight:700;
  letter-spacing:-0.05em;
  font-size:clamp(3rem, 7vw, 5.5rem);
  line-height:1;
  display:inline-block;
  position:relative;
}

.cd-label{
  margin-top:.6rem;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  font-family:var(--body);
}

/* glitch */
.cd-glitch{
  position:relative;
  display:inline-block;
}

.cd-glitch::before,
.cd-glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
}

.cd-glitch::before{
  transform:translate(2px, 0);
  color:var(--accent);
  mix-blend-mode:screen;
  animation:kfGlitchTop 2.8s infinite steps(1, end);
}

.cd-glitch::after{
  transform:translate(-2px, 0);
  color:var(--text);
  opacity:.75;
  animation:kfGlitchBot 3.3s infinite steps(1, end);
}

@keyframes kfGlitchTop{
  0%, 92%, 100% { clip-path: inset(0 0 0 0); transform: translate(2px,0); opacity:.9; }
  93% { clip-path: inset(0 0 65% 0); transform: translate(4px,-2px); opacity:1; }
  94% { clip-path: inset(35% 0 25% 0); transform: translate(-3px,1px); }
  95% { clip-path: inset(10% 0 55% 0); transform: translate(6px,0); }
  96% { clip-path: inset(0 0 0 0); transform: translate(2px,0); }
}

@keyframes kfGlitchBot{
  0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(-2px,0); opacity:.75; }
  91% { clip-path: inset(60% 0 0 0); transform: translate(-5px,2px); opacity:1; }
  92% { clip-path: inset(20% 0 50% 0); transform: translate(3px,0); }
  93% { clip-path: inset(45% 0 15% 0); transform: translate(-7px,-1px); }
  94% { clip-path: inset(0 0 0 0); transform: translate(-2px,0); opacity:.75; }
}

@media (max-width:768px){
  .countdown-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:2rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .cd-unit::after,
  .cd-glitch::before,
  .cd-glitch::after{
    animation:none !important;
  }
}