/* =========================
   KOMMUNITY FAYRE — styles.css (responsive)
   ========================= */

:root{
  --bg:#000000;
  --text:#ffffff;
  --muted:rgba(255,255,255,.60);
  --accent:#d97a3a;

  --title:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --radius:30px;

  --container-wide:1100px;
  --container:900px;
  --container-narrow:680px;

  /* altezza “stimata” del menu (serve per offset/scroll) */
  --menu-h:72px;
}

/* ---------- RESET / BASE ---------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden; /* blocca lo scroll laterale */
}

a{
  color:inherit;
  text-decoration:none;
}

a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:10px;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* aiuta in caso di parole lunghissime (titoli che sbordano) */
h1, h2, p, li, a{
  overflow-wrap:anywhere;
}

/* ---------- MENU FIXED ---------- */
.menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:rgba(217,122,58,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menu nav{
  max-width:var(--container-wide);
  margin-inline:auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

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

.menu .links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.menu .links a{
  font-size:.95rem;
  opacity:.85;
}

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

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

  /* spazio per non farsi coprire dal menu */
  padding-top:calc(var(--menu-h) + 24px);
  padding-bottom:48px;
}

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

.hero-content{
  position:relative;
  width:min(700px, 100% - 32px);
  padding:clamp(18px, 4vw, 40px);
}

.hero h1{
  font-family:var(--title);
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:clamp(2.2rem, 9vw, 5rem);
  line-height:1.05;
  margin:0 0 10px;
}

.hero-date{
  margin:0 0 14px;
  font-weight:500;
  font-size:clamp(1.2rem, 4.5vw, 2rem);
  opacity:.95;
}

.hero-tagline{
  margin:0 0 18px;
  font-style:italic;
}

.hero-actions{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.hero-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:var(--radius);
  background:var(--accent);
  color:#000;
  font-weight:600;
  max-width:100%;
  text-align:center;
}

.hero-actions a:hover{
  filter:brightness(1.05);
}

/* ---------- SECTIONS ---------- */
.section{
  padding-block:clamp(70px, 10vw, 110px);
  padding-inline:clamp(16px, 4vw, 24px);
  text-align:center;

  /* offset per anchor links con menu fixed */
  scroll-margin-top:calc(var(--menu-h) + 16px);
}

.section.narrow{
  max-width:var(--container-narrow);
  margin-inline:auto;
}

.section.wide{
  max-width:var(--container);
  margin-inline:auto;
}

h2{
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(1.8rem, 7.5vw, 4rem);
  line-height:1.1;
  margin:0 0 26px;
}

p{
  max-width:70ch;
  margin-inline:auto;
}

.section p{
  margin-top:16px;
}

.sold-out{
  color:#ff0000;
  font-weight:700;
  font-size:clamp(1.4rem, 4vw, 2.6rem);
  margin-top:28px;
  letter-spacing:.03em;
  text-transform:uppercase;
}


.lead{
  font-size:clamp(1.05rem, 2.2vw, 1.3rem);
  margin:0 auto 18px;
}

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

/* ---------- LISTS ---------- */
.manifesto,
.expect{
  list-style:none;
  margin:22px auto 0;
  padding:0;
  max-width:70ch;
}

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

/* ---------- CREWS ---------- */
.crews{
  font-style:italic;
  margin-top:20px;
  max-width:75ch;
  margin-inline:auto;
}

/* ---------- IMAGE BREAK ---------- */
.image-break img{
  margin-block:clamp(40px, 8vw, 80px);
}

/* ---------- CTA BUTTON-LINK ---------- */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:var(--radius);
  background:var(--accent);
  color:#000;
  font-weight:600;
  margin-top:28px;
  max-width:100%;
  text-align:center;
}

.cta:hover{
  filter:brightness(1.05);
}

/* ---------- FINAL ---------- */
.final img{
  width:min(500px, 100%);
  margin:0 auto 44px;
}

.final-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.final-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:var(--radius);
  background:var(--accent);
  color:#000;
  font-weight:600;
  max-width:100%;
  text-align:center;
}

.closing{
  margin-top:34px;
  font-style:italic;
  opacity:.95;
}

/* ---------- COUNTDOWN ---------- */
.countdown-section{
  padding-top:clamp(50px, 6vw, 70px);
  padding-bottom:clamp(50px, 6vw, 70px);
}

.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(18px, 4.5vw, 48px);
  align-items:end;
}

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

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

@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(2.6rem, 8vw, 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 effect */
.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; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  /* quando il menu tende a spezzarsi su 2 righe */
  :root{ --menu-h:84px; }
}

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

@media (max-width: 420px){
  .countdown-grid{
    grid-template-columns:1fr;
  }
  .cd-unit::after{
    bottom:-10px;
  }
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  .cd-unit::after,
  .cd-glitch::before,
  .cd-glitch::after{
    animation:none !important;
  }
}