/* VOODOO EXPERIENCE — Project page theme */

.project-page--voodoo {
  --accent: #c94a4a;
  --accent-dim: #8f3333;
  --accent-glow: rgba(201, 74, 74, 0.45);
}

.project-page--voodoo .project-hero-overlay {
  background:
    linear-gradient(to top, rgba(8, 4, 4, 0.96) 0%, rgba(12, 6, 6, 0.45) 45%, rgba(8, 4, 4, 0.7) 100%),
    linear-gradient(to right, rgba(8, 4, 4, 0.55) 0%, transparent 50%);
}

.project-page--voodoo .project-hero-img {
  filter: saturate(0.65) brightness(0.5) sepia(0.15);
}

.project-hero-genre {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 74, 74, 0.85);
  margin-bottom: 1rem;
}

.project-access-box {
  max-width: 420px;
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(201, 74, 74, 0.35);
  background: rgba(12, 6, 6, 0.72);
}

.project-access-box__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}

.project-access-box__value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow);
  margin-bottom: 0.65rem;
}

.project-access-box__note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.btn-play--voodoo {
  border-color: rgba(201, 74, 74, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(201, 74, 74, 0.22),
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(201, 74, 74, 0.25);
  animation: btn-play-pulse-voodoo 3s ease-in-out infinite;
}

.btn-play--voodoo .btn-play__glow {
  background: radial-gradient(ellipse at 50% 50%, rgba(201, 74, 74, 0.35) 0%, transparent 70%);
}

.btn-play--voodoo .btn-play__frame {
  border-color: rgba(201, 74, 74, 0.15);
}

.btn-play--voodoo .btn-play__inner {
  background:
    linear-gradient(180deg, rgba(220, 100, 100, 0.95) 0%, rgba(160, 55, 55, 0.98) 45%, rgba(110, 35, 35, 1) 100%);
}

.btn-play--voodoo:hover,
.btn-play--voodoo:focus-visible {
  border-color: rgba(220, 100, 100, 0.75);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(201, 74, 74, 0.45),
    0 18px 48px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(220, 100, 100, 0.4);
}

.btn-play--voodoo:hover .btn-play__inner,
.btn-play--voodoo:focus-visible .btn-play__inner {
  background:
    linear-gradient(180deg, rgba(240, 120, 120, 1) 0%, rgba(180, 65, 65, 1) 45%, rgba(130, 45, 45, 1) 100%);
}

@keyframes btn-play-pulse-voodoo {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 0 40px rgba(201, 74, 74, 0.22),
      0 14px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(201, 74, 74, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 0 56px rgba(201, 74, 74, 0.38),
      0 14px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(201, 74, 74, 0.35);
  }
}

.project-page--voodoo .project-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn-play--voodoo { animation: none; }
}
