/* Shared CTA Orbit — used on index.html + artist.html */
.cta-orbit {
  position: relative;
  height: 70vh;
  background: #f4f3f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.cta-orbit.visible { opacity: 1; }
.cta-orbit .orbit-image {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.cta-orbit.visible .orbit-image { opacity: 1; }
.cta-orbit .cta-center {
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 1s var(--ease-out) 0.15s, transform 1s var(--ease-out) 0.15s;
}
.cta-orbit.visible .cta-center {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Fade at bottom edge only */
.cta-orbit::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 220px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to top, #fff 0%, #f4f3f0 40%, transparent 100%);
}
.orbit-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.orbit-image {
  position: absolute;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  will-change: transform;
}
.orbit-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.cta-center {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
/* Radial glow behind button — fades nearby images */
.cta-center::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #f4f3f0 0%, #f4f3f0 25%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.cta-tagline {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: 0.02em;
}
/* Past-festivals link (om-oss style — underline + arrow) */
.cta-past-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--charcoal);
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  text-decoration: none;
  margin-top: 6px;
}
.cta-past-link:hover { gap: 14px; }
.cta-center-btn {
  position: relative;
  padding: 3px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(180,160,255,0.5) 0%,
    rgba(140,200,255,0.4) 20%,
    rgba(180,255,200,0.3) 40%,
    rgba(255,220,140,0.4) 60%,
    rgba(255,160,200,0.5) 80%,
    rgba(180,160,255,0.5) 100%
  );
  background-size: 300% 300%;
  animation: borderHolo 4s linear infinite;
}
@keyframes borderHolo {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
.cta-center-btn a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 28px 72px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2a2a3a;
  border-radius: 999px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      #e0dff8 0%,
      #d4bef0 10%,
      #b8d0f8 20%,
      #a8f0e8 30%,
      #c8f0b8 40%,
      #f0e8a8 50%,
      #f0c0c8 60%,
      #d8b0f0 70%,
      #b0d0f8 80%,
      #b8f0d8 90%,
      #e0dff8 100%
    );
  background-size: 400% 400%;
  animation: holoShift 5s linear infinite;
  box-shadow:
    0 0 40px rgba(180,160,240,0.4),
    0 0 80px rgba(160,180,255,0.2),
    0 8px 24px rgba(100,80,160,0.2),
    inset 0 2px 1px rgba(255,255,255,0.8),
    inset 0 -2px 2px rgba(140,120,180,0.3);
  border: none;
  text-shadow: 0 1px 2px rgba(140,120,180,0.3);
  transition: transform 160ms var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.cta-center-btn a::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.3) 40%,
    rgba(255,255,255,0.7) 49%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.7) 51%,
    rgba(255,255,255,0.3) 60%,
    transparent 80%
  );
  animation: glossySweep 3s ease-in-out infinite;
  pointer-events: none;
}
.cta-center-btn a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,100,100,0.12) 0%,
    rgba(255,220,100,0.1) 14%,
    rgba(100,255,150,0.1) 28%,
    rgba(100,220,255,0.14) 42%,
    rgba(140,100,255,0.12) 57%,
    rgba(255,100,200,0.12) 71%,
    rgba(255,180,100,0.1) 85%,
    rgba(255,100,100,0.12) 100%
  );
  background-size: 200% 100%;
  animation: rainbowSlide 2.5s linear infinite;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cta-center-btn a:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow:
    0 0 60px rgba(180,160,240,0.5),
    0 0 100px rgba(160,180,255,0.3),
    0 12px 32px rgba(100,80,160,0.25),
    inset 0 2px 1px rgba(255,255,255,0.9),
    inset 0 -2px 2px rgba(140,120,180,0.3);
}
.cta-center-btn a:active { transform: scale(0.97) translateY(1px); }

@keyframes holoShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes glossySweep {
  0%, 100% { left: -120%; }
  50% { left: 140%; }
}
@keyframes rainbowSlide {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}