/* Main CSS File */
:root {
  /* Primary Colors */
  --primary-pink: #FF1694;
  --primary-pink-light: #FF6EC7;
  --primary-pink-dark: #C3007A;
  
  /* Secondary Colors */
  --secondary-teal: #00B3B3;
  --secondary-teal-light: #33FFFF;
  --secondary-teal-dark: #007A7A;
  
  /* Accent Colors */
  --accent-orange: #FF6B00;
  --accent-orange-light: #FF9D4D;
  --accent-orange-dark: #CC5500;
  
  --accent-violet: #9900CC;
  --accent-violet-light: #CC33FF;
  --accent-violet-dark: #660099;
  
  /* Neutral Colors */
  --black: #000000;
  --dark-gray: #121212;
  --mid-gray: #333333;
  --light-gray: #CCCCCC;
  --white: #FFFFFF;
  
  /* Functional Colors */
  --success: #00CC66;
  --warning: #FFCC00;
  --error: #FF3333;
  
  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  
  /* Font Sizes */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-2xl: 32px;
  --font-3xl: 40px;
  --font-4xl: 48px;
  
  /* Line Heights */
  --line-height-heading: 1.2;
  --line-height-body: 1.5;
  
  /* Font Families */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Rajdhani', sans-serif;
  
  /* Animation Speeds */
  --speed-slow: 1s;
  --speed-medium: 0.5s;
  --speed-fast: 0.3s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background-color: var(--dark-gray);
  color: var(--white);
  line-height: var(--line-height-body);
  overflow-x: hidden;
  position: relative;
}

/* Noise overlay for texture */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/png;base64,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');
  opacity: 0.05;
  z-index: 100;
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

h1 {
  font-size: var(--font-4xl);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--font-3xl);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--font-xl);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-3);
}

a {
  color: var(--primary-pink-light);
  text-decoration: none;
  transition: color var(--speed-fast) ease;
}

a:hover {
  color: var(--accent-violet-light);
}

button {
  font-family: var(--font-secondary);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--speed-fast) ease;
}

section {
  padding: var(--space-6) var(--space-4);
  position: relative;
  overflow: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Common button styles */
.play-btn, .play-now-btn, .submit-btn {
  background: linear-gradient(45deg, var(--primary-pink), var(--accent-violet));
  color: var(--white);
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-size: var(--font-md);
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(255, 22, 148, 0.3);
}

.play-btn:before, .play-now-btn:before, .submit-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--accent-violet), var(--primary-pink));
  transition: transform var(--speed-medium) ease;
  z-index: -1;
}

.play-btn:hover:before, .play-now-btn:hover:before, .submit-btn:hover:before {
  transform: translateX(100%);
}

/* Abstract shapes */
.shape {
  position: absolute;
  opacity: 0.7;
  filter: blur(5px);
  z-index: -1;
  transition: all var(--speed-slow) ease;
}

.circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-violet-light), transparent);
  top: -100px;
  right: -100px;
  animation: float 8s infinite alternate ease-in-out;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 260px solid rgba(0, 179, 179, 0.3);
  bottom: -100px;
  left: 10%;
  animation: rotate 20s infinite linear;
}

.rectangle {
  width: 200px;
  height: 400px;
  background: linear-gradient(to right, var(--primary-pink-dark), transparent);
  transform: rotate(45deg);
  top: 30%;
  right: -100px;
  animation: pulse 10s infinite alternate ease-in-out;
}

.waves {
  width: 500px;
  height: 500px;
  background: repeating-radial-gradient(
    circle at center,
    var(--accent-orange-light) 0,
    transparent 40px,
    var(--accent-orange-light) 80px
  );
  opacity: 0.2;
  top: 50%;
  left: -200px;
  border-radius: 40%;
  animation: waveMotion 15s infinite linear;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(30px) rotate(10deg); }
}

@keyframes rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.7; }
  100% { opacity: 0.3; }
}

@keyframes waveMotion {
  0% { transform: rotate(0) scale(1); border-radius: 40%; }
  50% { transform: rotate(180deg) scale(1.1); border-radius: 45%; }
  100% { transform: rotate(360deg) scale(1); border-radius: 40%; }
}