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

:root{
  --cursor-size:120px;
  --cursor-color:#ffd400;
  --title-rotate:8deg;
}

html,body{
  height:100%;
  overflow:hidden; /* blocca lo scroll su mobile */
}
body{
  background:#fff;
  font-family:"Inria Serif",serif;
  display:flex;
  justify-content:right;
  align-items:center;
  cursor:none;
  overflow-x:hidden;
}
.container{
  width:100%;
  height:100%;
  position:relative;
  text-align:center;
}

/* Titolo base */
.main-title{
  position:absolute;
  inset:0;
  height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transform:rotate(var(--title-rotate));
  font-weight:700;
  line-height:1;
  text-align:right;
  font-size:clamp(3.3rem,9.3vw,7.5rem);
  padding-inline:clamp(12px,4vw,48px);
  pointer-events:none;
}

/* Bianco invisibile */
.main-title--white{color:#fff;z-index:1;}

/* Nero solo dentro il pallino */
.main-title--reveal{
  color:transparent;
  z-index:3;
  background:radial-gradient(circle var(--bg-s,120px) at var(--bg-x, -9999px) var(--bg-y, -9999px), #000 98%, transparent 100%);
  -webkit-background-clip:text;
  background-clip:text;
  transition: background 0.3s ease; /* fade del cerchio */
}

/* Contatti */
.contacts{
  position:absolute;
  left:0;right:0;
  bottom:25%; /* abbassati sotto la scritta */
  font-size:clamp(0.9rem,1.8vw,1.2rem); /* più piccoli */
  color:#222;
  line-height:1.6;
  z-index:4;
  text-align:center;
}

.contacts a {
  display:inline-block;
  padding:0.3em 0.8em; /* ridotto padding */
  margin:0.3em;
  border-radius:6px;
  border:1.5px solid #ffd400;
  background-color:transparent;
  color:#222;
  text-decoration:none;
  font-weight:500;
  transition:all 0.25s ease;
}

.contacts a:hover {
  background-color:#ffd400;
  color:#000;
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(0,0,0,0.12);
  font-weight:600;
}

.contacts a:active {
  transform:translateY(0);
  box-shadow:none;
  font-weight:500;
}

/* Pallino giallo */
.cursor{
  position:fixed;
  left:0;top:0;
  width:var(--cursor-size);
  height:var(--cursor-size);
  border-radius:50%;
  background:var(--cursor-color);
  pointer-events:none;
  opacity:0;
  z-index:2;
  transition: opacity 0.3s ease;
}

/* --- Mobile: centratura titolo e alone più piccolo --- */
@media (max-width: 768px) {
  .main-title {
    font-size: clamp(2rem, 8vw, 4rem);
    text-align: right;
    transform: rotate(-5deg);
  }

  :root {
    --cursor-size: 80px; /* pallino e alone più piccoli su smartphone */
  }
}