/* Ensure HTML and body allow scrolling */
html, body {
  height: auto !important;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto !important;
  margin: 0;
  padding: 0;
}

/* Universal box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Spotlight Card Container - Root element with scrolling */
.spotlight-card-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color, #000000);
}

/* Fixed Background Layer - stays in place behind everything */
.spotlight-card-background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Background Media - fixed in the background layer */
.spotlight-card-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.spotlight-card-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.spotlight-card-bg-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Dark Overlay - part of the background layer */
.spotlight-card-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* Scrollable Content Layer - scrolls over the fixed background */
.spotlight-card-scroll-layer {
  position: relative;
  width: 100%;
  z-index: 2;
  min-height: 100vh;
}

/* Content Container */
.spotlight-card-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem 4rem 1rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* Remove justify-content: center to allow natural flow */
}

/* Profile Section */
.spotlight-card-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 0.75rem;
}

.spotlight-card-avatar {
  width: min(100px, 25vw);
  height: min(100px, 25vw);
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 0.5rem;
  object-fit: cover;
}

.spotlight-card-name {
  font-size: 32px;
  font-weight: bold;
  color: var(--text-color, #ffffff);
  margin: 0.25rem 0 0.15rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.spotlight-card-username {
  font-size: 20px;
  color: var(--text-color, #ffffff);
  opacity: 0.9;
  margin: 0.1rem 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.spotlight-card-location {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 14px;
  color: var(--text-color, #ffffff);
  opacity: 0.85;
  margin: 0.25rem 0 0 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.spotlight-card-location-icon {
  width: 16px;
  height: 16px;
}

.spotlight-card-bio {
  font-size: 16px;
  color: var(--text-color, #ffffff);
  opacity: 0.85;
  margin: 0.5rem 0 0 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  max-width: 500px;
}

/* Social Icons Grid */
.spotlight-card-social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0 1rem;
}

.spotlight-card-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.spotlight-card-social-link:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.spotlight-card-social-icon {
  width: 20px;
  height: 20px;
  color: var(--text-color, #ffffff);
}

/* Links Section */
.spotlight-card-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 518px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.spotlight-card-link {
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

/* Button Style: Solid */
.spotlight-card-link.solid {
  background-color: var(--button-color, #ff69b4);
  color: white;
  border: none;
}

.spotlight-card-link.solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

/* Button Style: Outline */
.spotlight-card-link.outline {
  background-color: transparent;
  color: var(--button-color, #ff69b4);
  border: 2px solid var(--button-color, #ff69b4);
}

.spotlight-card-link.outline:hover {
  background-color: var(--button-color, #ff69b4);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Button Style: Gradient */
.spotlight-card-link.gradient {
  background: linear-gradient(135deg, var(--button-color, #ff69b4), var(--button-color-end, #ff1493));
  color: white;
  border: none;
}

.spotlight-card-link.gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

/* Button Style: Glow */
.spotlight-card-link.glow {
  background-color: var(--button-color, #ff69b4);
  color: white;
  border: none;
  animation: glow 2s infinite ease-in-out;
}

.spotlight-card-link.glow:hover {
  transform: scale(1.05);
}

/* Button Style: Glass (default) */
.spotlight-card-link.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.spotlight-card-link.glass:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Glow Animation for Primary Button */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--primary-color),
                0 0 10px var(--primary-color),
                0 0 15px var(--primary-color),
                0 0 20px var(--primary-color);
  }
  50% {
    box-shadow: 0 0 15px var(--primary-color),
                0 0 25px var(--primary-color),
                0 0 35px var(--primary-color),
                0 0 45px var(--primary-color);
  }
}

/* Footer */
.spotlight-card-footer {
  margin-top: auto;
  padding: 2rem 0 3rem 0;
}

.spotlight-card-footer-brand {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.spotlight-card-footer-brand:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile Responsive */
@media only screen and (max-width: 768px) {
  .spotlight-card-content {
    padding: 1rem 0.75rem 2rem 0.75rem;
    max-width: 100%;
  }

  .spotlight-card-name {
    font-size: 28px;
  }

  .spotlight-card-username {
    font-size: 18px;
  }

  .spotlight-card-bio {
    font-size: 14px;
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .spotlight-card-links {
    width: 100%;
    max-width: 100%;
    padding: 0;
    gap: 1rem;
  }

  .spotlight-card-social-grid {
    padding: 0;
    gap: 0.5rem;
  }
}

/* Border Styles for Cards */
.spotlight-card-border-none {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.75rem;
}

.spotlight-card-border-solid {
  border: 4px solid var(--border-color, #ffffff) !important;
  border-radius: 0.75rem;
}

.spotlight-card-border-gradient {
  border: 4px solid transparent !important;
  border-radius: 0.75rem;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
    linear-gradient(135deg, var(--border-color, #ffffff), var(--border-color-end, #ffffff));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.spotlight-card-border-glow {
  border: 4px solid var(--border-color, #ffffff) !important;
  border-radius: 0.75rem;
  box-shadow:
    0 0 20px var(--border-color, #ffffff),
    0 0 40px var(--border-color, #ffffff),
    0 0 60px var(--border-color, #ffffff),
    0 0 80px var(--border-color, #ffffff);
  animation: border-glow 2s infinite ease-in-out;
}

@keyframes border-glow {
  0%, 100% {
    box-shadow:
      0 0 20px var(--border-color, #ffffff),
      0 0 40px var(--border-color, #ffffff),
      0 0 60px var(--border-color, #ffffff),
      0 0 80px var(--border-color, #ffffff);
  }
  50% {
    box-shadow:
      0 0 30px var(--border-color, #ffffff),
      0 0 60px var(--border-color, #ffffff),
      0 0 90px var(--border-color, #ffffff),
      0 0 120px var(--border-color, #ffffff);
  }
}

.spotlight-card-border-neon {
  border: 4px solid var(--border-color, #ffffff) !important;
  border-radius: 0.75rem;
  box-shadow:
    0 0 15px var(--border-color, #ffffff),
    0 0 30px var(--border-color, #ffffff),
    0 0 45px var(--border-color, #ffffff),
    0 0 60px var(--border-color, #ffffff),
    0 0 90px var(--border-color, #ffffff),
    0 0 120px var(--border-color, #ffffff),
    inset 0 0 15px var(--border-color, #ffffff);
  animation: neon-flicker 1.5s infinite alternate;
  filter: brightness(1.2);
}

@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    box-shadow:
      0 0 15px var(--border-color, #ffffff),
      0 0 30px var(--border-color, #ffffff),
      0 0 45px var(--border-color, #ffffff),
      0 0 60px var(--border-color, #ffffff),
      0 0 90px var(--border-color, #ffffff),
      0 0 120px var(--border-color, #ffffff),
      inset 0 0 15px var(--border-color, #ffffff);
    filter: brightness(1.2);
  }
  20%, 24%, 55% {
    box-shadow:
      0 0 8px var(--border-color, #ffffff),
      0 0 15px var(--border-color, #ffffff),
      0 0 25px var(--border-color, #ffffff);
    filter: brightness(0.8);
  }
}