/* ==========================================================================
   7LITE MUSIC — OFFICIAL DESIGN SYSTEM STYLES
   Concept: "Sonido que se siente" | Audio Engineering x Street Soul
   ========================================================================== */

/* Modern Color Scheme & Smooth Scrolling */
:root {
  color-scheme: dark;
  --bg-carbon: #171717;
  --surface-1: #1F1F1F;
  --surface-2: #262626;
  --border-subtle: #333333;
  --text-primary: #FFFFFF;
  --text-muted: #888888;
  --text-meta: #A0A0A0;

  /* Exclusive Channel Accents */
  --accent-vibes: #4EFFAE;
  --accent-flow: #00BFFF;
  --accent-waves: #4E00FF;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-carbon);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

section[id] {
  scroll-margin-top: 5rem;
}

/* Custom Scrollbar (Engineered for High Contrast & Sleek Aesthetics) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #121212;
}

::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid #333333;
}

::-webkit-scrollbar-thumb:hover {
  background: #3e3e3e;
  border-color: #00BFFF;
}

/* Accessible focus visible outlines */
:focus-visible {
  outline: 2px solid #00BFFF;
  outline-offset: 3px;
}

/* Technical Audio Grid Texture */
.bg-tech-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.bg-radial-vignette {
  background: radial-gradient(circle at 50% 20%, rgba(0, 191, 255, 0.06) 0%, rgba(23, 23, 23, 0.95) 70%, #171717 100%);
}

/* Channel Ambient Glows */
.glow-vibes {
  box-shadow: 0 0 25px -5px rgba(78, 255, 174, 0.25);
}
.glow-vibes:hover {
  box-shadow: 0 0 35px -2px rgba(78, 255, 174, 0.45);
}

.glow-flow {
  box-shadow: 0 0 25px -5px rgba(0, 191, 255, 0.25);
}
.glow-flow:hover {
  box-shadow: 0 0 35px -2px rgba(0, 191, 255, 0.45);
}

.glow-waves {
  box-shadow: 0 0 25px -5px rgba(78, 0, 255, 0.28);
}
.glow-waves:hover {
  box-shadow: 0 0 35px -2px rgba(78, 0, 255, 0.5);
}

/* Equalizer Bars Live Audio Animation */
@keyframes eq-bounce-1 {
  0%, 100% { height: 18%; }
  50% { height: 85%; }
}
@keyframes eq-bounce-2 {
  0%, 100% { height: 75%; }
  50% { height: 25%; }
}
@keyframes eq-bounce-3 {
  0%, 100% { height: 35%; }
  50% { height: 95%; }
}
@keyframes eq-bounce-4 {
  0%, 100% { height: 90%; }
  50% { height: 40%; }
}
@keyframes eq-bounce-5 {
  0%, 100% { height: 50%; }
  50% { height: 80%; }
}

.animate-eq-1 { animation: eq-bounce-1 1.2s ease-in-out infinite; }
.animate-eq-2 { animation: eq-bounce-2 0.9s ease-in-out infinite 0.2s; }
.animate-eq-3 { animation: eq-bounce-3 1.4s ease-in-out infinite 0.1s; }
.animate-eq-4 { animation: eq-bounce-4 1.1s ease-in-out infinite 0.3s; }
.animate-eq-5 { animation: eq-bounce-5 1.3s ease-in-out infinite 0.15s; }

/* Subtle pulse for zero-latency status */
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.92); }
}

.animate-status-dot {
  animation: status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glassmorphism Surface Utilities */
.glass-panel {
  background: rgba(31, 31, 31, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 51, 51, 0.85);
}

.glass-nav {
  background: rgba(23, 23, 23, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(51, 51, 51, 0.7);
}

/* ==========================================================================
   MODERN FAQ ACCORDION DROPDOWNS
   ========================================================================== */
.faq-accordion {
  background: #1c1c1c;
  border: 1px solid #2e2e2e;
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease;
}

.faq-accordion:hover {
  border-color: #444444;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4);
}

.faq-accordion[open] {
  background: linear-gradient(180deg, #222222 0%, #191919 100%);
  border-color: rgba(0, 191, 255, 0.45);
  box-shadow: 0 12px 30px -8px rgba(0, 191, 255, 0.15);
}

.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-icon-pill {
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  background: #262626;
  border: 1px solid #383838;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion:hover .faq-icon-pill {
  border-color: #555555;
  background: #2e2e2e;
}

.faq-accordion[open] .faq-icon-pill {
  background: #00BFFF;
  border-color: #00BFFF;
  transform: rotate(180deg);
}

.faq-accordion[open] .faq-icon-pill svg {
  color: #000000;
}

.faq-content {
  padding: 0 1.25rem 1.25rem 1.25rem;
  animation: faq-reveal 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   CUSTOM CYBER-DARK SELECT DROPDOWN
   ========================================================================== */
.custom-select-trigger {
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.custom-select-trigger.is-open {
  border-color: #a074ff !important;
  box-shadow: 0 0 15px rgba(160, 116, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  background-color: #242424 !important;
}

.custom-select-trigger.is-open .custom-select-chevron {
  transform: rotate(180deg);
  color: #a074ff;
}

.custom-select-menu {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-select-menu.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.custom-option {
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.custom-option:hover {
  background-color: #2a2a2a;
  transform: translateX(2px);
}

.custom-option.is-selected {
  background-color: #2e2e2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Audio Player Container Frame */
.player-container-glow {
  position: relative;
}
.player-container-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(78, 255, 174, 0.2), rgba(0, 191, 255, 0.2), rgba(78, 0, 255, 0.2));
  border-radius: 1.1rem;
  z-index: -1;
  opacity: 0.6;
  filter: blur(6px);
  transition: opacity 0.3s ease;
}
.player-container-glow:hover::before {
  opacity: 1;
}

/* ==========================================================================
   INTERACTIVE WOW SUITE: MARQUEE, 3D TILT & AUDIO VISUALS
   ========================================================================== */

/* Infinite Marquee Ticker Tape */
.marquee-wrapper {
  overflow: hidden;
  user-select: none;
  display: flex;
  gap: 2rem;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: 2rem;
  animation: marquee-scroll 28s linear infinite;
}

.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 2rem)); }
}

/* 3D Tilt & Holographic Edge Glow */
.card-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
}

.card-tilt-content {
  transform: translateZ(24px);
  transform-style: preserve-3d;
}

.spotlight-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(
    circle 320px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.08),
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-tilt:hover .spotlight-overlay {
  opacity: 1;
}

/* Audio Canvas Background Styling */
#audio-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* Kinetic Shimmer Button Effect */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-shimmer:hover::after {
  left: 140%;
}

/* ==========================================================================
   CYBERNETIC AUDIO LASER HUD CURSOR
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input,
  body.has-custom-cursor select,
  body.has-custom-cursor textarea {
    cursor: none !important;
  }

  .hud-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .hud-cursor.visible {
    opacity: 1;
  }

  .hud-cursor-dot {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    background-color: #00BFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px #00BFFF, 0 0 20px #00BFFF;
    transition: transform 0.15s ease, background-color 0.2s ease;
  }

  .hud-cursor-ring {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 36px;
    height: 36px;
    border: 1px dashed rgba(0, 191, 255, 0.45);
    border-radius: 50%;
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease,
                transform 0.2s ease;
    animation: hud-ring-rotate 16s linear infinite;
  }

  @keyframes hud-ring-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .hud-cursor.hovering .hud-cursor-ring {
    width: 52px;
    height: 52px;
    top: -26px;
    left: -26px;
    border-style: solid;
    border-color: #4EFFAE;
    box-shadow: 0 0 15px rgba(78, 255, 174, 0.3);
  }

  .hud-cursor.hovering .hud-cursor-dot {
    background-color: #4EFFAE;
    box-shadow: 0 0 12px #4EFFAE;
    transform: scale(1.4);
  }

  .hud-cursor.clicking .hud-cursor-ring {
    transform: scale(0.75);
    border-color: #ffffff;
  }

  /* Sonic Ripple Pulse when clicking */
  .hud-sonic-ripple {
    position: fixed;
    border-radius: 50%;
    border: 1.5px solid #00BFFF;
    pointer-events: none;
    z-index: 9998;
    animation: sonic-ripple-anim 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  }

  @keyframes sonic-ripple-anim {
    0% {
      width: 10px;
      height: 10px;
      opacity: 0.9;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      width: 100px;
      height: 100px;
      opacity: 0;
      transform: translate(-50%, -50%) scale(2.2);
    }
  }
}