:root {
  --giallo: #FEBA2D;
  --grigio: #363733;
  --bg: #4A4A45;
  --max: 760px;
}

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

html, body {
  height: 100%;
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--giallo);
  font-family: 'Anton', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 5vw;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.6rem, 2.2vh, 1.8rem);
}

.slogan {
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: 0.02em;
  color: var(--giallo);
  max-width: 100%;
  overflow-wrap: break-word;
}

.slogan--top {
  font-size: clamp(1.5rem, min(8vw, 6.5vh), 3.6rem);
}

.slogan--bottom {
  font-size: clamp(1.2rem, min(7vw, 5vh), 2.8rem);
  margin-top: 0.4rem;
}

.logo-box {
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 0;
}

.logo {
  width: auto;
  height: clamp(120px, 32vh, 320px);
  max-width: 80vw;
  object-fit: contain;
  display: block;
}

.contatti {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contatti__nome {
  color: var(--giallo);
  font-size: clamp(1.1rem, min(5.5vw, 4vh), 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.contatti__link {
  color: var(--giallo);
  text-decoration: none;
  font-size: clamp(0.95rem, min(4.5vw, 3vh), 1.7rem);
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
  word-break: break-word;
}

.contatti__link:hover,
.contatti__link:focus-visible {
  opacity: 0.7;
}

.contatti__link:focus-visible {
  outline: 3px solid var(--giallo);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- Animazione "scatto elettrico" al load --- */
[data-anim] {
  opacity: 0;
}

.is-ready .slogan--top {
  animation: shootDown 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.is-ready .logo-box {
  animation: shootDown 0.55s cubic-bezier(0.33, 1.3, 0.66, 1) 0.85s forwards;
}
.is-ready .slogan--bottom {
  animation: shootUp 0.6s cubic-bezier(0.33, 1.3, 0.66, 1) 1.7s forwards;
}
.is-ready .contatti {
  animation: shootUp 0.6s cubic-bezier(0.33, 1.3, 0.66, 1) 2.3s forwards;
}

/* Il logo: breve scossa + lampo di accensione quando arriva */
.is-ready .logo {
  animation:
    shock 0.35s ease-in-out 1.35s,
    spark 0.5s ease-out 1.35s;
}

@keyframes shootDown {
  0%   { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shootUp {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shock {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes spark {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(2.2); }
  100% { filter: brightness(1); }
}

/* Accessibilità: nessun movimento se l'utente lo preferisce */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; }
  .is-ready [data-anim],
  .is-ready .logo {
    animation: none !important;
  }
}