@font-face {
  font-family: "Grained Brutal";
  src: url("assets/font/GrainedBrutal-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bianco: #ffffff;
  --nero: #0a0a0a;
  --grigio: #8a8a8a;
  --laser: #57e3a5;        /* il verde dei laser nel render */
  --gutter: clamp(16px, 3vw, 40px);
  --brutal: "Grained Brutal", "Helvetica Neue", Arial, sans-serif;
  --testo: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--testo);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--gutter);
  font-family: var(--brutal); font-size: 15px; letter-spacing: .04em;
  mix-blend-mode: difference; color: var(--bianco);
}
.top__nav { display: flex; gap: 28px; }
.top a:hover { color: var(--laser); }

/* scena */
.stage { height: 620vh; position: relative; }           /* lunghezza dello scroll della sequenza */
.stage__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--bianco);
}
.stage__canvas, .stage__loop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.stage__loop { object-fit: cover; }   /* i laser arrivano sempre ai bordi */
.stage__loop { opacity: 0; transition: opacity .25s linear; }
.stage.is-looping .stage__loop { opacity: 1; }
.stage__loader, .stage__hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font-family: var(--brutal); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .4s;
}
.stage__hint { opacity: 0; }
.stage.is-ready .stage__loader { opacity: 0; }
.stage.is-ready:not(.has-scrolled) .stage__hint { opacity: 1; animation: respira 1.6s ease-in-out infinite; }
@keyframes respira { 50% { opacity: .25; } }

/* release: schede degli store sotto il CD che gira (stile card Apple del riferimento) */
.stores {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 4vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; pointer-events: none; transform: translateY(16px);
  transition: opacity .5s, transform .5s;
}
.stage.is-looping .stores { opacity: 1; pointer-events: auto; transform: none; transition-delay: .35s; }   /* dopo l'avvio del loop */
.stores__title { font-family: var(--brutal); font-weight: 700; font-size: 15px; letter-spacing: .14em; }
.stores__list {
  list-style: none; display: flex; gap: 10px; padding: 6px var(--gutter) 14px;
  max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.stores__list::-webkit-scrollbar { display: none; }
.card {
  scroll-snap-align: center; flex: 0 0 auto; width: 148px;
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: rgba(255,255,255,.95);   /* niente backdrop-filter: sopra il video in loop costa troppo */
  border-radius: 18px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.10);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.14); }
.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__dot { width: 14px; height: 14px; border-radius: 50%; background: #d9d9d9; }
.card:hover .card__dot { background: var(--laser); }
.card__kind { font-size: 10px; color: var(--grigio); }
/* schede tutte della stessa altezza anche con nomi su due righe (es. Resident Advisor) */
.stores__list > li { display: flex; }
.card__name { flex: 1; display: flex; align-items: center; justify-content: center; }
.card__name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-align: center; padding: 4px 0 2px; color: var(--nero); }
.card__btn {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--nero); color: var(--bianco); border-radius: 999px;
  padding: 8px 12px; font-size: 11px; font-weight: 600;
}

.foot__title {
  font-family: var(--brutal); font-weight: 700;
  font-size: clamp(56px, 14vw, 220px); line-height: .85; letter-spacing: -.01em;
  margin-bottom: 6vh;
}

/* footer */
.foot { background: var(--nero); color: var(--bianco); padding: 16vh var(--gutter) 40px; }
.foot__mail { display: table; font-family: var(--testo); font-weight: 500; font-size: clamp(18px, 2.6vw, 34px); letter-spacing: .01em; }
.foot__mail { border-bottom: 2px solid var(--laser); }
/* social: in riga come prima, ma grandi quanto mail e telefono */
.foot__social { list-style: none; display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 64px); margin: 9vh 0 12vh; }
.foot__social a {
  display: inline-flex; align-items: baseline; gap: .3em;
  font-family: var(--testo); font-weight: 500; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .01em;
  transition: color .2s;
}
.foot__social a::after { content: "\2197"; font-size: .6em; transition: transform .25s; }
.foot__social a:hover { color: var(--laser); }
.foot__social a:hover::after { transform: translate(3px, -3px); }
.foot__mail:hover { color: var(--laser); }
.foot__copy { font-size: 12px; color: var(--grigio); }

@media (max-width: 680px) {
  /* le schede non stanno tutte: la fila scorre in orizzontale */
  .stores__list { justify-content: flex-start; }
  /* social uno sotto l'altro, righe a tutta larghezza con la freccia a destra */
  .foot__social { display: block; border-top: 1px solid rgba(255,255,255,.22); }
  .foot__social li { border-bottom: 1px solid rgba(255,255,255,.22); }
  .foot__social a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 28px; letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage__hint { animation: none !important; }
}