/* ============================================================
   Podstars — Custom Styles
   Tailwind utility classes live in index.html.
   This file covers only styles that cannot be expressed
   cleanly with Tailwind utilities alone.
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
html {
  overflow-x: hidden;
}

body {
  background-color: #0a0a0a;
  color: #ffffff;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Glassmorphism Nav ────────────────────────────────────── */
.glass-nav {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* ── Mobile Menu ──────────────────────────────────────────── */
.mobile-menu {
  animation: slideDown 300ms ease-out forwards;
  transform-origin: top;
}

.mobile-menu.hidden {
  animation: slideUp 300ms ease-out forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.mobile-menu-link {
  display: block;
  transition: all 200ms ease;
}

/* ── Gradient Text ────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(to right, #ffffff, #a1a1aa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Ambient Glow Background ──────────────────────────────── */
.bg-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(222, 255, 154, 0.1) 0%,
    rgba(10, 10, 10, 0) 70%
  );
  border-radius: 50%;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .bg-glow {
    width: 400px;
    height: 400px;
    top: -100px;
  }
}

/* ── Custom Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* ── Creators Login Modal ─────────────────────────────────── */
.creators-login-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
  /* Prevent modal from contributing to document scroll width */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.creators-login-modal.is-open,
.creators-login-modal:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.creators-login-panel {
  transform: translateY(10px) scale(0.98);
  transition: transform 200ms ease;
}

.creators-login-modal.is-open .creators-login-panel,
.creators-login-modal:target .creators-login-panel {
  transform: translateY(0) scale(1);
}

.creators-login-field:focus-visible,
.creators-login-checkbox:focus-visible,
.creators-login-close:focus-visible,
.creators-login-submit:focus-visible {
  outline: 2px solid #deff9a;
  outline-offset: 2px;
}

/* ── Mobile Responsive Utilities ──────────────────────────── */
@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  /* Ensure fixed nav has proper spacing on mobile */
  main {
    padding-top: 0;
  }

  /* Optimize touch targets for mobile (min 44x44px) */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Responsive padding for sections */
  section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}