@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Instrument+Serif:ital@0;1&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-serif: 'Instrument Serif', serif;

  --bg-dark: #070a14;
  --bg-card: #0b1020;
  --bg-card-hover: #121830;
  
  --neon-pink: #ff2e88;
  --neon-purple: #8b5cf6;
  --neon-cyan: #00e5ff;
  --neon-amber: #f59e0b;
  --slate-mist: #94a3b8;
}

* {
  box-sizing: border-box;
  font-family: var(--font-body);
}

body {
  background-color: var(--bg-dark);
  color: #e2e8f0;
  overflow-x: hidden;
  min-height: 100vh;
}

.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

.font-serif-accent {
  font-family: var(--font-serif);
}

/* Glowing text and boxes */
.text-glow-pink {
  text-shadow: 0 0 16px rgba(255, 46, 136, 0.75), 0 0 32px rgba(255, 46, 136, 0.45);
}

.text-glow-cyan {
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.75), 0 0 32px rgba(0, 229, 255, 0.45);
}

.text-glow-purple {
  text-shadow: 0 0 16px rgba(139, 92, 246, 0.75), 0 0 32px rgba(139, 92, 246, 0.45);
}

.text-glow-soft {
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
}

/* Custom angled clip-tag button */
.clip-tag {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.clip-card {
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

/* Glass Panels */
.glass-panel {
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.875rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
  border-color: rgba(255, 46, 136, 0.45);
  box-shadow: 0 8px 32px 0 rgba(255, 46, 136, 0.18);
}

/* Animations */
@keyframes spinSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinSlowReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

.animate-spin-slow {
  animation: spinSlow 16s linear infinite;
}

.animate-spin-slow-reverse {
  animation: spinSlowReverse 22s linear infinite;
}

@keyframes floatHero {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: floatHero 6s ease-in-out infinite;
}

@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 0.99;
    text-shadow: 0 0 18px rgba(255, 46, 136, 0.75), 0 0 36px rgba(255, 46, 136, 0.45);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.6;
    text-shadow: none;
  }
}

.animate-flicker {
  animation: flicker 6s infinite;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee 26s linear infinite;
}

/* ==================== FL STUDIO / DAW SEQUENCER STYLES ==================== */
.seq-pad {
  aspect-ratio: 1;
  border-radius: 0.25rem;
  background: #0d1322;
  border: 1px solid #1a2238;
  cursor: pointer;
  transition: all 0.12s ease;
  min-height: 28px;
}

.seq-pad:hover {
  border-color: #38bdf8;
  transform: scale(1.05);
}

.seq-pad.active-kick {
  background: linear-gradient(135deg, #ff2e88, #be185d);
  border-color: #f472b6;
  box-shadow: 0 0 12px rgba(255, 46, 136, 0.8);
}

.seq-pad.active-snare {
  background: linear-gradient(135deg, #00e5ff, #0284c7);
  border-color: #67e8f9;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
}

.seq-pad.active-hihat {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #fde047;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
}

.seq-pad.active-openhat {
  background: linear-gradient(135deg, #fb923c, #c2410c);
  border-color: #fed7aa;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.8);
}

.seq-pad.active-clap {
  background: linear-gradient(135deg, #ec4899, #9d174d);
  border-color: #fbcfe8;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.8);
}

.seq-pad.active-perc {
  background: linear-gradient(135deg, #10b981, #047857);
  border-color: #6ee7b7;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
}

.seq-pad.active-bass {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.8);
}

.seq-pad.active-synthlead {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  border-color: #93c5fd;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
}

.seq-pad.active-pluck {
  background: linear-gradient(135deg, #a855f7, #7e22ce);
  border-color: #e9d5ff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
}

.seq-pad.active-chords {
  background: linear-gradient(135deg, #f43f5e, #be123c);
  border-color: #fecdd3;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.8);
}

.seq-pad.current-step {
  border: 2px solid #ffffff !important;
  transform: scale(1.12);
  z-index: 10;
}

/* Song Arranger Blocks */
.arranger-block {
  height: 36px;
  border-radius: 0.375rem;
  background: #141b34;
  border: 1px solid #283354;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.arranger-block.active {
  background: linear-gradient(135deg, #8b5cf6, #ff2e88);
  border-color: #f472b6;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.6);
}

.arranger-block.playing {
  border: 2px solid #00e5ff;
  transform: scale(1.04);
}

/* Keyboard Keys */
.synth-key {
  height: 110px;
  background: linear-gradient(to bottom, #141b34, #0b1020);
  border: 1px solid #283354;
  border-radius: 0 0 0.375rem 0.375rem;
  cursor: pointer;
  transition: all 0.1s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 0.35rem;
  user-select: none;
}

.synth-key:hover {
  background: linear-gradient(to bottom, #212c52, #121a33);
  border-color: #ff2e88;
}

.synth-key.active {
  background: linear-gradient(to bottom, #ff2e88, #8b5cf6);
  box-shadow: 0 0 16px rgba(255, 46, 136, 0.85);
  transform: translateY(3px);
}

/* Canvas cursors */
.canvas-draw-cursor {
  cursor: crosshair;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #070a14;
}
::-webkit-scrollbar-thumb {
  background: #1b233a;
  border-radius: 4px;
  border: 1px solid rgba(255, 46, 136, 0.25);
}
::-webkit-scrollbar-thumb:hover {
  background: #ff2e88;
}