/* =============================
   🎨 GLOBAL BASE
   ============================= */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}

/* =============================
   🖤 INTRO OVERLAY (HOME)
   ============================= */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1.5s ease;
}
#intro-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
#intro-logo {
  width: 180px;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#intro-logo.show { opacity: 1; }
#intro-logo.glitchy { animation: logo-glitch-loop 2s infinite; }

/* =============================
   🔐 PASSWORD SCREEN (HOME)
   ============================= */
#password-screen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .8s ease;
}
.gate-inner {
  text-align: center;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#gate-logo {
  width: 160px;
  margin-bottom: 30px;
  animation: logo-glitch-loop 2s infinite;
}
@keyframes logo-glitch-loop {
  0%, 100% { transform: none; }
  5%       { transform: translate(2px, -1px) skewX(1deg); }
  6%       { transform: translate(-1px, 2px) skewX(-2deg); }
  7%       { transform: none; }
}
.boot-sequence {
  font-family: 'Courier New', monospace;
  color: #e22928;
  font-size: 1rem;
  text-align: center;
  white-space: pre-wrap;
  margin-bottom: 20px;
}
.gate-title {
  color: #e22928;
  font-family: 'Courier New', monospace;
  margin-top: 10px;
  display: none;
}
.gate-input-wrapper {
  display: none;
  position: relative;
  margin-top: 15px;
  font-family: 'Courier New', monospace;
  color: #e22928;
  width: min(90vw, 320px);
  min-height: 1.8em;
  text-align: center;
  justify-content: center;
  align-items: center;
}
#gate-mask { letter-spacing: 2px; }
#gate-cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
#gate-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; background: transparent;
  border: 0; outline: 0;
  color: transparent; caret-color: transparent;
  -webkit-appearance: none;
}
#gate-error {
  margin-top: 10px;
  font-size: .9rem;
  color: #e22928;
  min-height: 1rem;
}
.intro-terminal {
  font-family: 'Courier New', monospace;
  color: #e22928;
  font-size: 1rem;
  letter-spacing: 1px;
  margin-top: 20px;
}

/* =============================
   💀 LOGO + GLITCH
   ============================= */
.logo-glitch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 32px;
  max-width: 200px;
}
.logo-glitch {
  position: relative;
  width: 160px;
  aspect-ratio: 1 / 1;
}
.logo-glitch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-base { z-index: 1; }
.logo-glitch-img {
  z-index: 2;
  opacity: 0;
  transition: opacity .1s ease, transform .1s ease;
}
.logo-glitch-img.show {
  opacity: 1;
  transform: translate(2px, -2px) skewX(-3deg);
}

/* =============================
   ⚡ GLITCH TITLE
   ============================= */
.glitch-title {
  position: relative;
  font-size: 3rem;
  font-weight: 900;
  color: #e22928;
  text-transform: uppercase;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.glitch-title::before {
  left: 2px;
  text-shadow: -2px 0 #fff;
  animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch-title::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9;
  animation: glitch-anim2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip-path: inset(80% 0 0 0); transform: translate(-2px, -2px); }
  20% { clip-path: inset(10% 0 85% 0); transform: translate(2px, 2px); }
  40% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
  60% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -2px); }
  80% { clip-path: inset(70% 0 15% 0); transform: translate(-2px, 2px); }
  100% { clip-path: inset(0 0 80% 0); transform: translate(2px, -2px); }
}
@keyframes glitch-anim2 {
  0% { clip-path: inset(0 0 80% 0); transform: translate(2px, 2px); }
  20% { clip-path: inset(70% 0 15% 0); transform: translate(-2px, -2px); }
  40% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -2px); }
  60% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
  80% { clip-path: inset(10% 0 85% 0); transform: translate(2px, -2px); }
  100% { clip-path: inset(80% 0 0 0); transform: translate(-2px, 2px); }
}
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(2deg); }
  40% { transform: skew(-2deg); }
  60% { transform: skew(4deg); }
  80% { transform: skew(-3deg); }
  100% { transform: skew(0deg); }
}

/* =============================
   🕶 HERO CONTENT (EVENT)
   ============================= */
.hero {
  padding: 100px 20px 60px;
  text-align: center;
}
.countdown {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 20px 0;
  color: #e22928;
}
.event-info {
  font-size: 1.1rem;
  color: #ccc;
  margin-bottom: 45px; /* ✅ spaziatura migliorata tra data e bottone */
}
.btn {
  background: #e22928;
  color: #fff;
  text-decoration: none;
  padding: 12px 25px;
  font-size: 1.1rem;
  border-radius: 5px;
  transition: background .3s;
  display: inline-block;
}
.btn:hover { background: #a00; }

/* =============================
   📋 INFO SECTION
   ============================= */
.info {
  background: #000;
  padding: 60px 20px;
  text-align: center;
}
.info ul {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}
.info li {
  padding: 10px 0;
  border-bottom: 1px solid #333;
  color: #ccc;
}

/* =============================
   ⚙️ FOOTER
   ============================= */
footer {
  text-align: center;
  padding: 40px 20px;
  font-size: .9rem;
  color: #666;
}
footer a {
  color: #e22928;
  text-decoration: none;
}

/* =============================
   📱 RESPONSIVE
   ============================= */
@media (max-width: 600px) {
  .glitch-title { font-size: 2.2rem; }
  .countdown    { font-size: 1.2rem; }
  .btn          { padding: 10px 20px; font-size: 1rem; }
  .event-info   { margin-bottom: 35px; } /* 📱 leggermente più compatta su mobile */
}