/* ===== RASHA. Watercolour Aesthetic ===== */

/* Paper texture background */
body {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(244, 194, 194, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(212, 197, 226, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(197, 224, 216, 0.08) 0%, transparent 50%);
  background-color: var(--cream);
}

/* Watercolour wash section backgrounds */
.wash-blush {
  position: relative;
}

.wash-blush::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -10%;
  width: 120%;
  height: calc(100% + 80px);
  background:
    radial-gradient(ellipse at 30% 50%, rgba(244, 194, 194, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(232, 213, 163, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.wash-lavender {
  position: relative;
}

.wash-lavender::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -10%;
  width: 120%;
  height: calc(100% + 80px);
  background:
    radial-gradient(ellipse at 60% 40%, rgba(212, 197, 226, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 70%, rgba(189, 215, 238, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.wash-mint {
  position: relative;
}

.wash-mint::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -10%;
  width: 120%;
  height: calc(100% + 80px);
  background:
    radial-gradient(ellipse at 40% 60%, rgba(197, 224, 216, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(255, 245, 204, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Watercolour blob decorations */
.watercolour-blob {
  position: absolute;
  border-radius: 50% 40% 60% 45% / 55% 50% 45% 50%;
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
}

.blob-blush {
  background: radial-gradient(ellipse, var(--blush) 0%, transparent 70%);
}

.blob-lavender {
  background: radial-gradient(ellipse, var(--lavender) 0%, transparent 70%);
}

.blob-mint {
  background: radial-gradient(ellipse, var(--mint) 0%, transparent 70%);
}

.blob-gold {
  background: radial-gradient(ellipse, var(--soft-gold) 0%, transparent 70%);
}

/* Watercolour edge for images */
.watercolour-frame {
  position: relative;
  border-radius: 8px;
  overflow: visible;
}

.watercolour-frame::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: linear-gradient(
    135deg,
    var(--blush) 0%,
    var(--lavender) 25%,
    var(--mint) 50%,
    var(--pale-yellow) 75%,
    var(--soft-blue) 100%
  );
  border-radius: 14px;
  opacity: 0.5;
  z-index: -1;
  filter: blur(4px);
}

/* Paint stroke divider */
.paint-divider {
  width: 120px;
  height: 4px;
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--blush) 15%,
    var(--dusty-rose) 50%,
    var(--lavender) 85%,
    transparent 100%
  );
  border-radius: 2px;
  opacity: 0.6;
}

/* Organic shape card style */
.organic-card {
  background: var(--white);
  border-radius: 20px 24px 20px 28px;
  box-shadow:
    0 4px 20px var(--shadow-soft),
    0 0 0 1px rgba(212, 132, 154, 0.06);
  overflow: hidden;
}

/* Soft pastel highlight box */
.highlight-box {
  background: linear-gradient(135deg, rgba(244, 194, 194, 0.15), rgba(212, 197, 226, 0.1));
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(212, 132, 154, 0.1);
  padding: var(--space-lg);
}

/* Watercolour section separator */
.section-separator {
  height: 80px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(244, 194, 194, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(197, 224, 216, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 50%, rgba(212, 197, 226, 0.12) 0%, transparent 50%);
}

/* Hand-drawn border effect */
.hand-drawn-border {
  border: 2px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent 0%,
    var(--blush) 10%,
    var(--dusty-rose) 30%,
    var(--lavender) 50%,
    var(--mint) 70%,
    var(--blush) 90%,
    transparent 100%
  ) 1;
}

/* Brush stroke button background */
.btn-brush {
  position: relative;
  background: none;
  border: none;
  padding: 14px 44px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  z-index: 1;
}

.btn-brush::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dusty-rose);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 55%;
  z-index: -1;
  transition: all var(--duration) var(--ease);
}

.btn-brush:hover::before {
  background: var(--dusty-rose-dark);
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  transform: scale(1.05);
}