/* =========================================================
   SPAC — Spazio Politico Artistico Condiviso
   Tutte le misure derivano dai mockup 1366x768.
   Le variabili qui sotto sono i soli valori da toccare
   per registrare posizioni e dimensioni.
   ========================================================= */

@font-face{
  font-family:'Anton';
  src:url('fonts/anton.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Archivo Black';
  src:url('fonts/archivo-black.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}

:root{
  --rosso:#cf1515;
  --nero:#000;
  --bianco:#fff;

  /* --- quadrato rosso in home (mockup: 212px su 1366 di larghezza) --- */
  --sq-size:15.5vw;
  --sq-left:67.4vw;
  --sq-top:32.5vh;

  /* --- logo dell'intro (mockup: 202px di larghezza) --- */
  --logo-w:14.8vw;

  /* --- wordmark SPAC in alto a sinistra --- */
  --brand-size:3.10vw;
  --brand-left:2.78vw;
  --brand-top:4.6vh;

  /* --- menu hamburger --- */
  --burger-w:2.3vw;
  --burger-right:4.5vw;
  --burger-top:5.2vh;

  /* --- claim in basso a destra --- */
  --claim-size:6.07vw;      /* corpo delle lettere piccole */
  --claim-cap:1.13;        /* iniziali rosse, moltiplicatore */
  --claim-stretch:1.085;    /* allargamento orizzontale del blocco */
  --claim-right:0.25vw;
  --claim-bottom:0.5vh;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bianco);
  color:var(--nero);
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   INTRO
   ========================================================= */
#intro{
  position:fixed; inset:0;
  background:var(--bianco);
  display:flex; align-items:center; justify-content:center;
  z-index:40;
}
#logo{
  width:var(--logo-w);
  aspect-ratio:202 / 204;
  overflow:visible;
}
#logoSvg{
  width:100%; height:100%; display:block; overflow:visible;
}
#logoSvg .wrap{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform,opacity;
}
body.no-motion #logoSvg .wrap{opacity:1}
#logoSvg path{fill:var(--nero)}

/* intro conclusa */
body.intro-done #intro{display:none}

/* =========================================================
   QUADRATO ROSSO
   ========================================================= */
#sqWrap{
  position:fixed;
  left:var(--sq-left);
  top:var(--sq-top);
  width:var(--sq-size);
  height:var(--sq-size);
  z-index:45;
  transform-origin:center center;
  will-change:transform;
}
#sq{
  width:100%; height:100%;
  background:var(--rosso);
  opacity:0;
  will-change:transform;
}
body.intro-done #sq,
body.no-motion #sq{opacity:1}

/* tremolio prima dell'esplosione */
@keyframes tremolio{
  0%{transform:translate(0,0) scale(1)}
  12%{transform:translate(-6%,3%) scale(1.04)}
  24%{transform:translate(5%,-4%) scale(0.98)}
  36%{transform:translate(-5%,-3%) scale(1.06)}
  48%{transform:translate(6%,4%) scale(1)}
  60%{transform:translate(-7%,2%) scale(1.08)}
  72%{transform:translate(4%,-5%) scale(1.02)}
  84%{transform:translate(-3%,3%) scale(1.10)}
  100%{transform:translate(0,0) scale(1)}
}
#sq.tremolio{animation:tremolio var(--tremolio-dur,780ms) linear both}

/* =========================================================
   HOME — barra alta
   ========================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0;
  z-index:60;
  pointer-events:none;
}
.topbar > *{pointer-events:auto}

.brand{
  position:absolute;
  left:var(--brand-left);
  top:var(--brand-top);
  font-size:var(--brand-size);
  line-height:.8;
  color:var(--rosso);
  text-decoration:none;
  letter-spacing:.005em;
  opacity:0;
  transition:opacity .45s ease;
}
body.home-in .brand{opacity:1}

/* hamburger */
.burger{
  position:absolute;
  right:var(--burger-right);
  top:var(--burger-top);
  width:var(--burger-w);
  aspect-ratio:1 / .78;
  padding:0; margin:0; border:0; background:none;
  cursor:pointer;
  opacity:0;
  transition:opacity .45s ease;
}
body.home-in .burger{opacity:1}

.burger .bars{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:opacity .25s ease;
}
.burger .bars i{
  display:block; width:100%; height:11%;
  min-height:2px;
  background:var(--nero);
  transition:background .25s ease, transform .35s cubic-bezier(.6,0,.2,1);
}
.burger .burger-sq{
  position:absolute;
  left:50%; top:50%;
  width:118%; aspect-ratio:1;
  background:var(--rosso);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .32s cubic-bezier(.5,1.6,.4,1);
}
.burger:hover .burger-sq,
.burger:focus-visible .burger-sq,
.burger[aria-expanded="true"] .burger-sq{transform:translate(-50%,-50%) scale(1)}
.burger:hover .bars,
.burger:focus-visible .bars,
.burger[aria-expanded="true"] .bars{opacity:0}

/* =========================================================
   CLAIM
   ========================================================= */
main{position:fixed; inset:0; z-index:20}

.claim{
  position:absolute;
  right:var(--claim-right);
  bottom:var(--claim-bottom);
  margin:0;
  font-size:var(--claim-size);
  font-weight:400;
  line-height:.885;
  text-align:right;
  text-transform:uppercase;
  white-space:nowrap;
  transform:scaleX(var(--claim-stretch));
  transform-origin:100% 100%;
}
.claim .line{display:block}
.claim .cap{
  color:var(--rosso);
  font-size:calc(1em * var(--claim-cap));
  line-height:0;                 /* le iniziali non alzano la riga */
}
.claim .ch{opacity:0}
.claim .ch.on{opacity:1}
body.no-motion .claim .ch{opacity:1}

/* =========================================================
   MENU
   ========================================================= */
#menu{
  position:fixed; inset:0;
  z-index:55;
  background:var(--bianco);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
#menu.open{opacity:1; visibility:visible}
#menu ul{list-style:none; margin:0; padding:0; text-align:center}
#menu li{margin:.06em 0}
#menu a{
  display:block;
  font-size:clamp(2rem,6.4vw,6rem);
  line-height:1.02;
  text-transform:uppercase;
  color:var(--nero);
  text-decoration:none;
  transition:color .2s ease;
}
#menu a:hover{color:var(--rosso)}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:820px){
  :root{
    --logo-w:56vw;
    --sq-size:34vw;
    --sq-left:54vw;
    --sq-top:24vh;
    --brand-size:9vw;
    --brand-left:6vw;
    --brand-top:4vh;
    --burger-w:7.5vw;
    --burger-right:6vw;
    --burger-top:5vh;
    --claim-size:11.4vw;
    --claim-right:1.5vw;
    --claim-bottom:4vh;
    --claim-stretch:1.1;
  }
}

@media (prefers-reduced-motion:reduce){
  #sq.tremolio{animation:none}
}