/* FONT ESTERNO CAL SANS */
@font-face {
  font-family: 'Cal Sans';
  src: url('https://editing.club/fonts/CalSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* FONT ESTERNO INTER solo per baseline */
@font-face {
  font-family: 'Inter';
  src: url('https://editing.club/fonts/Inter.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}

:root{
  --bg-image: url('assets/bg.webp'); /* Cambia qui il percorso dell’immagine */
  --headline: #ffffff;
  --text-dim: rgba(255,255,255,.85);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Cal Sans", sans-serif;
  color:var(--text-dim);
  background:#0b0b0f;
}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:8vh 6vw;
  overflow:hidden;
}

.hero::before,
.hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
.hero::before{
  background:
    radial-gradient(1200px 1200px at 20% 40%, rgba(0,0,0,.15), transparent 45%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65)),
    var(--bg-image);
  background-size:cover;
  background-position:center;
  filter: blur(1px);
  transform: scale(1.02);
}
.hero::after{
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
}

.wrap{
  position:relative;
  max-width:min(1100px, 92vw);
  z-index:1;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}

h1 {
  margin:0 0 2.2rem;
  line-height:1.15;
  font-weight:400;
  font-size:clamp(34px, 6vw, 76px);
  color:var(--headline);
  letter-spacing: 0.04em;
  overflow: visible;
}

/* Colore personalizzato solo per "something awesome" */
.accent{
  display:block;
  color:#00FFCA;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* Qui usiamo il font Inter */
.baseline{
  position:fixed;
  left:6vw; bottom:3.4vh;
  font-family:"Inter", sans-serif;
  font-size:clamp(12px, 1.6vw, 15px);
  opacity:.9;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.baseline img {
  height: 18px;
  vertical-align: middle;
}

.baseline a{ color:#cfe9ff; text-decoration:none; border-bottom:1px dashed rgba(207,233,255,.4); }
.baseline a:hover{ border-bottom-color:rgba(207,233,255,.85); }

a:focus-visible{ outline:2px solid #79d1ff; outline-offset:2px; border-bottom-color:transparent; }

.dots::after{
  content:"...";
  animation: blink 1.8s steps(1,end) infinite;
}
@keyframes blink{
  0%,60%{ opacity:1; }
  61%,100%{ opacity:0; }
}

/* Responsive Mobile */
@media (max-width: 600px) {
  .wrap {
    text-align: center;
  }

  h1 {
    text-align: center;
  }

  .baseline {
    position: static;
    justify-content: center;
    text-align: center;
    margin-top: 2rem;
  }
}