/* ── Navbar ────────────────────────────────────────────── */
#navbar {
  background: transparent;
  transition: background 0.3s, box-shadow 0.3s;
}
#navbar.scrolled {
  background: rgba(20, 4, 4, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.nav-link {
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-link:hover { color: #fca5a5; }

/* ── Hero ──────────────────────────────────────────────── */
.hero-bg {
  background: radial-gradient(ellipse at 60% 40%, rgba(185,28,28,0.25) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(60,4,4,0.8) 0%, transparent 50%),
              linear-gradient(135deg, #140404 0%, #3b0a0a 50%, #140404 100%);
}

/* ── Animations ────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(12px); opacity: 0; }
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-up { animation: fade-up 0.7s ease both; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }
.scroll-dot { animation: scroll-dot 1.8s ease-in-out infinite; }
.flash-msg  { animation: flash-in 0.3s ease; }

/* ── Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #b91c1c;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #dc2626; transform: translateY(-1px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid rgba(255,255,255,0.35);
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: #fca5a5; background: rgba(220,38,38,0.15); }

.btn-dark {
  display: inline-flex;
  align-items: center;
  background: #1a0505;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: background 0.2s;
}
.btn-dark:hover { background: #3b0a0a; }

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e5e7eb;
  color: #374151;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6rem 1.25rem;
  border-radius: 0.75rem;
  transition: border-color 0.2s;
}
.btn-outline-dark:hover { border-color: #9ca3af; }

/* ── Section Labels ────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b91c1c;
  background: rgba(185,28,28,0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}
.section-label-light {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fca5a5;
  background: rgba(252,165,165,0.12);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

/* ── Cards ─────────────────────────────────────────────── */
.announcement-card { display: block; transition: transform 0.2s; }
.announcement-card:hover { transform: translateY(-4px); }

.dreams-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: background 0.2s, border-color 0.2s;
}
.dreams-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(252,165,165,0.3);
}

/* ── Social icons ──────────────────────────────────────── */
.social-icon {
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: background 0.2s, color 0.2s;
}
.social-icon:hover { background: #b91c1c; color: #fff; }

/* ── Live dot ──────────────────────────────────────────── */
.live-dot {
  width: 0.5rem; height: 0.5rem;
  background: #ef4444; border-radius: 50%;
  display: inline-block;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── Form inputs ────────────────────────────────────────── */
.form-input {
  display: block; width: 100%;
  padding: 0.6rem 0.875rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.625rem;
  font-size: 0.9rem;
  background: white; color: #111827;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.form-input:focus {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185,28,28,0.12);
}
select.form-input { appearance: auto; }

/* ── Admin sidebar ─────────────────────────────────────── */
.admin-nav-link {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.6rem 0.75rem; border-radius: 0.625rem;
  font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.6);
  transition: background 0.15s, color 0.15s;
}
.admin-nav-link:hover { background: rgba(255,255,255,0.08); color: white; }
.admin-nav-link.active { background: rgba(185,28,28,0.25); color: #fca5a5; }

/* ── Scroll-triggered fade-in ──────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Misc ──────────────────────────────────────────────── */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Delete confirm modal ───────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: white; border-radius: 1.25rem;
  padding: 2rem; max-width: 400px; width: 90%;
  transform: scale(0.95); transition: transform 0.2s;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.modal-overlay.open .modal-box { transform: scale(1); }