/* VARIABLES */
:root {
  --black: #050505;
  --dark: #121212;
  --gray: #888888;
  --white: #ffffff;
  --neon-green: #39ff14; /* Streetwear/Nightclub accent */
  --font-display: 'Teko', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}

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

body {
  font-family: var(--font-body);
  background: var(--black) url('bg.png') repeat center/cover;
  color: var(--white);
  line-height: 1.6;
}

/* UTILITIES */
.text-neon { color: var(--neon-green); text-shadow: 0 0 10px rgba(57, 255, 20, 0.5); }
.text-white { color: var(--white); }
.text-gray { color: var(--gray); }
.text-center { text-align: center; }

.section { padding: 80px 20px; }
.container { max-width: 600px; margin: 0 auto; }
.section-title { 
  font-family: var(--font-display); 
  font-size: 3.5rem; 
  margin-bottom: 30px; 
  font-weight: 700; 
  letter-spacing: 2px; 
  line-height: 1;
}

/* OVERLAY */
.music-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  background: var(--black);
  z-index: 9999;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  transition: opacity 0.5s ease;
  padding: 20px;
}
.music-overlay.hidden { opacity: 0; pointer-events: none; }

.alert-badge {
  background: red;
  color: white;
  font-family: var(--font-display);
  font-size: 1.5rem;
  padding: 5px 20px;
  letter-spacing: 2px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.display-title {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.9;
  color: var(--white);
  margin-bottom: 10px;
}
.overlay-text {
  font-family: var(--font-body);
  color: var(--gray);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* GLITCH EFFECT */
.glitch-text {
  position: relative;
}
.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 red;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 blue;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip: rect(10px, 9999px, 30px, 0); }
  20% { clip: rect(50px, 9999px, 60px, 0); }
  40% { clip: rect(20px, 9999px, 25px, 0); }
  60% { clip: rect(80px, 9999px, 90px, 0); }
  80% { clip: rect(30px, 9999px, 45px, 0); }
  100% { clip: rect(60px, 9999px, 70px, 0); }
}

/* GLOBAL MUSIC TOGGLE */
.music-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--neon-green);
  color: var(--black);
  border: none;
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9000;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.3s ease;
}
.music-toggle.visible { opacity: 1; pointer-events: auto; }
.music-spin { animation: spin 3s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border-radius: 0px; /* Brutalist square corners */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 2px;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  text-transform: uppercase;
}
.btn-primary {
  background: var(--neon-green);
  color: var(--black);
  box-shadow: 4px 4px 0px var(--white);
}
.btn-primary:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px var(--white); }
.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--gray);
}
.btn-secondary:hover { border-color: var(--white); }

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  background: url('hero.png') center/cover;
}
.hero-overlay {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  background: linear-gradient(to bottom, rgba(5,5,5,0.3) 0%, rgba(5,5,5,1) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-name {
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 0.8;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: -20px;
  position: relative;
  z-index: 2;
}
.hero-number {
  font-family: var(--font-display);
  font-size: 12rem;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--gray);
  opacity: 0.3;
  margin-top: -60px;
  z-index: 1;
}
.hero-date {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--neon-green);
  letter-spacing: 4px;
  margin-top: 20px;
}

/* SECTIONS */
.bg-black { background-color: var(--black); }
.bg-dark { background-color: var(--dark); }
.border-neon { border-top: 1px solid rgba(57, 255, 20, 0.2); border-bottom: 1px solid rgba(57, 255, 20, 0.2); }

/* COUNTDOWN */
.countdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.time-box {
  background: var(--black);
  border: 1px solid var(--gray);
  padding: 15px 10px;
  min-width: 75px;
}
.time-box .number { display: block; font-family: var(--font-display); font-size: 3rem; color: var(--white); line-height: 1; }
.time-box .label { display: block; font-size: 0.8rem; text-transform: uppercase; font-weight: 700; color: var(--neon-green); margin-top: 5px; letter-spacing: 1px; }

/* CARDS */
.card {
  background: var(--black);
  padding: 30px 20px;
  margin-bottom: 20px;
  border: 1px solid #333;
  text-align: center;
}
.card-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #111;
  display: flex; justify-content: center; align-items: center;
  margin: 0 auto 15px;
  color: var(--white);
  border: 1px solid #333;
}
.card h3 { font-family: var(--font-display); font-size: 2.5rem; color: var(--white); margin-bottom: 5px; line-height: 1; letter-spacing: 1px; }

.grid-2 { display: grid; gap: 20px; }
@media(min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* TALLES / INFO */
.bank-box {
  background: #111;
  border: 1px dashed var(--gray);
  padding: 15px;
  margin-top: 15px;
  font-family: monospace;
  color: var(--neon-green);
  font-size: 0.9rem;
}

/* FORM */
.rsvp-form { background: transparent; }
.rsvp-form input, .rsvp-form select {
  width: 100%; padding: 15px; margin-bottom: 15px;
  border: 1px solid var(--gray); border-radius: 0;
  font-family: var(--font-body); font-size: 0.9rem;
  background: var(--black); color: var(--white);
  font-weight: bold; text-transform: uppercase;
}
.rsvp-form input:focus, .rsvp-form select:focus { outline: none; border-color: var(--neon-green); }

/* FOOTER */
.footer { padding: 60px 20px; border-top: 1px solid #222; }

/* ANIMATIONS */
.bounce-hover:hover { transform: translateY(-3px); }
.pulse-anim { animation: pulse 1.5s infinite alternate; }
@keyframes pulse { 0% { opacity: 0.5; } 100% { opacity: 1; } }
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }