/* ============================================
   SUBTLE ILLUSTRATED BACKGROUNDS
   Clever.com-inspired decorative backgrounds
   Used on headers, empty states, sidebars

   This file is in /public to avoid webpack processing
   ============================================ */

/* Base subtle background container */
.subtle-bg {
  position: relative;
  overflow: hidden;
}

.subtle-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.subtle-bg > * {
  position: relative;
  z-index: 1;
}

/* Empowerment/Hero theme - for welcome headers */
.subtle-bg--empowerment::before {
  background-image: url('/images/philosophy/hero-empowerment.png');
}

/* Transformation theme - for feature sections */
.subtle-bg--transformation::before {
  background-image: url('/images/philosophy/transformation-new-era.png');
}

/* Core beliefs theme - for stats/overview */
.subtle-bg--beliefs::before {
  background-image: url('/images/philosophy/core-beliefs.png');
}

/* Workflow theme - for process/wizard sections */
.subtle-bg--workflow::before {
  background-image: url('/images/philosophy/five-cs-workflow.png');
}

/* Get started theme - for CTAs and empty states */
.subtle-bg--cta::before {
  background-image: url('/images/philosophy/get-started.png');
}

/* Accommodator theme - for AI tools sections */
.subtle-bg--accommodator::before {
  background-image: url('/images/philosophy/great-accommodator.png');
}

/* Opacity variants */
.subtle-bg--light::before {
  opacity: 0.08;
}

.subtle-bg--medium::before {
  opacity: 0.15;
}

.subtle-bg--strong::before {
  opacity: 0.20;
}

/* Position variants */
.subtle-bg--top::before {
  background-position: top center;
}

.subtle-bg--bottom::before {
  background-position: bottom center;
}

.subtle-bg--left::before {
  background-position: left center;
}

.subtle-bg--right::before {
  background-position: right center;
}

/* Gradient overlay variants for more control */
.subtle-bg--fade-down::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, white 100%);
  pointer-events: none;
  z-index: 0;
}

.subtle-bg--fade-up::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, transparent 0%, white 100%);
  pointer-events: none;
  z-index: 0;
}

/* Dashboard header with subtle background */
.dashboard-header-bg {
  position: relative;
  overflow: hidden;
}

.dashboard-header-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/philosophy/hero-empowerment.png');
  background-size: cover;
  background-position: center top;
  opacity: 0.15;
  pointer-events: none;
}

/* Stats section subtle background */
.stats-section-bg {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.stats-section-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/philosophy/core-beliefs.png');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  border-radius: inherit;
}

/* Empty state with illustrated background */
.empty-state-illustrated {
  position: relative;
  overflow: hidden;
  background: white;
  border-radius: 16px;
}

.empty-state-illustrated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/philosophy/get-started.png');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}

.empty-state-illustrated::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.8) 100%);
  pointer-events: none;
}

.empty-state-illustrated > * {
  position: relative;
  z-index: 1;
}

/* Featured card background decoration */
.featured-card-bg {
  position: relative;
  overflow: hidden;
}

.featured-card-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background-image: url('/images/philosophy/five-cs-workflow.png');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  transform: rotate(-15deg);
}

/* Navigation bar subtle decoration */
.nav-subtle-bg {
  position: relative;
}

.nav-subtle-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/philosophy/transformation-new-era.png');
  background-size: 200% auto;
  background-position: center bottom;
  opacity: 0.08;
  pointer-events: none;
}