/* app/assets/stylesheets/neumorphism.css */
/* Neumorphism (Soft UI) Design System for Landing Pages */

/* ===== COLOR TOKENS ===== */
:root {
  --neu-bg: #E0E5EC;
  --neu-text: #3D4852;
  --neu-muted: #6B7280;
  --neu-accent: #6C63FF;
  --neu-accent-light: #8B84FF;
  --neu-accent-secondary: #38B2AC;

  /* Shadow colors (RGBA for smooth blending) */
  --neu-shadow-dark: rgb(163, 177, 198, 0.6);
  --neu-shadow-dark-strong: rgb(163, 177, 198, 0.7);
  --neu-shadow-light: rgba(255, 255, 255, 0.5);
  --neu-shadow-light-strong: rgba(255, 255, 255, 0.6);
}

/* ===== SHADOW UTILITIES ===== */
.neu-extruded {
  box-shadow: 9px 9px 16px var(--neu-shadow-dark),
              -9px -9px 16px var(--neu-shadow-light);
}

.neu-extruded-hover {
  box-shadow: 12px 12px 20px var(--neu-shadow-dark-strong),
              -12px -12px 20px var(--neu-shadow-light-strong);
}

.neu-extruded-sm {
  box-shadow: 5px 5px 10px var(--neu-shadow-dark),
              -5px -5px 10px var(--neu-shadow-light);
}

.neu-inset {
  box-shadow: inset 6px 6px 10px var(--neu-shadow-dark),
              inset -6px -6px 10px var(--neu-shadow-light);
}

.neu-inset-deep {
  box-shadow: inset 10px 10px 20px var(--neu-shadow-dark-strong),
              inset -10px -10px 20px var(--neu-shadow-light-strong);
}

.neu-inset-sm {
  box-shadow: inset 3px 3px 6px var(--neu-shadow-dark),
              inset -3px -3px 6px var(--neu-shadow-light);
}

/* ===== TYPOGRAPHY ===== */
.neu-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: var(--neu-text);
  letter-spacing: -0.02em;
}

.neu-heading-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--neu-text);
  letter-spacing: -0.02em;
}

.neu-body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--neu-text);
}

.neu-muted {
  color: var(--neu-muted);
}

/* ===== TRANSITIONS ===== */
.neu-transition {
  transition: all 300ms ease-out;
}

/* ===== FOCUS STATES ===== */
.neu-focus {
  outline: none;
  ring: 2px solid var(--neu-accent);
  ring-offset: 2px;
  ring-offset-color: var(--neu-bg);
}

/* ===== SCROLL ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utility classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Scroll-triggered animations (initially hidden) */
[data-animate] {
  opacity: 0;
}

[data-animate].is-visible {
  animation-fill-mode: forwards;
}

[data-animate="fade-up"].is-visible {
  animation: fadeInUp 0.6s ease-out forwards;
}

[data-animate="fade-left"].is-visible {
  animation: fadeInLeft 0.6s ease-out forwards;
}

[data-animate="fade-right"].is-visible {
  animation: fadeInRight 0.6s ease-out forwards;
}

[data-animate="scale"].is-visible {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Stagger delays */
[data-delay="100"] { animation-delay: 100ms; }
[data-delay="200"] { animation-delay: 200ms; }
[data-delay="300"] { animation-delay: 300ms; }
[data-delay="400"] { animation-delay: 400ms; }
[data-delay="500"] { animation-delay: 500ms; }
[data-delay="600"] { animation-delay: 600ms; }

/* ===== GRADIENT TEXT ===== */
.neu-gradient-text {
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== GLOW EFFECTS ===== */
.neu-glow {
  box-shadow: 0 0 40px rgba(108, 99, 255, 0.3),
              9px 9px 16px var(--neu-shadow-dark),
              -9px -9px 16px var(--neu-shadow-light);
}

.neu-glow-accent {
  box-shadow: 0 0 30px rgba(108, 99, 255, 0.4);
}

/* ===== FEATURE ICON STYLE ===== */
.neu-icon-box {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: var(--neu-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
              inset -6px -6px 12px var(--neu-shadow-light);
}

.neu-icon-box-lg {
  width: 5rem;
  height: 5rem;
  border-radius: 1.25rem;
}

/* ===== STATS PILL ===== */
.neu-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--neu-bg);
  font-weight: 600;
  box-shadow: 5px 5px 10px var(--neu-shadow-dark),
              -5px -5px 10px var(--neu-shadow-light);
}

/* ===== BADGE STYLES ===== */
.neu-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.neu-badge-accent {
  background: var(--neu-accent);
  color: white;
}

.neu-badge-success {
  background: #10B981;
  color: white;
}

.neu-badge-muted {
  background: var(--neu-bg);
  color: var(--neu-muted);
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
}

/* ===== DIVIDER ===== */
.neu-divider {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--neu-shadow-dark) 20%,
    var(--neu-shadow-dark) 80%,
    transparent 100%);
  border: none;
  margin: 3rem 0;
}

/* ===== QUOTE STYLE ===== */
.neu-quote {
  position: relative;
  padding-left: 1.5rem;
  border-left: 4px solid var(--neu-accent);
  font-style: italic;
}

.neu-quote::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  font-size: 3rem;
  color: var(--neu-accent);
  opacity: 0.3;
  font-family: Georgia, serif;
}