/* Motif: Road Lines — curved roads, lane markings, steering wheel icons */

/* ---------- Hero accent: flowing road curve behind text ---------- */
.motif-hero-accent {
  position: relative;
  overflow: hidden;
}

.motif-hero-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Cpath d='M-50 350 C200 350 300 50 600 200 S1000 50 1250 200' fill='none' stroke='%23ffffff' stroke-width='80' stroke-linecap='round'/%3E%3Cpath d='M-50 350 C200 350 300 50 600 200 S1000 50 1250 200' fill='none' stroke='%23ffffff' stroke-width='4' stroke-dasharray='24 18' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ---------- Section divider: curved road shape ---------- */
.motif-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
  background: transparent;
}

.motif-divider::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C240 80 480 0 720 40 S1200 80 1440 40 L1440 80 L0 80 Z' fill='%23f5f5f5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Dashed lane marking accent across the divider */
.motif-divider::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 0;
  width: 100%;
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 4'%3E%3Cpath d='M0 2 C240 -10 480 14 720 2 S1200 -10 1440 2' fill='none' stroke='%23d97706' stroke-width='3' stroke-dasharray='20 14' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* ---------- Dashed lane marking as a thin inline divider ---------- */
.motif-lane-divider {
  border: none;
  height: 3px;
  margin: 2rem auto;
  max-width: 320px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0,
    var(--accent) 20px,
    transparent 20px,
    transparent 34px
  );
  opacity: 0.45;
  border-radius: 2px;
}

/* ---------- Icon: steering wheel (inline SVG) ---------- */
.motif-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.motif-icon--steering {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='12' y1='3' x2='12' y2='9'/%3E%3Cline x1='4.2' y1='16.5' x2='9.4' y2='13.5'/%3E%3Cline x1='19.8' y1='16.5' x2='14.6' y2='13.5'/%3E%3C/svg%3E");
}

.motif-icon--road {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22 L8 2'/%3E%3Cpath d='M20 22 L16 2'/%3E%3Cline x1='12' y1='4' x2='12' y2='7' stroke-dasharray='3 3'/%3E%3Cline x1='12' y1='10' x2='12' y2='13' stroke-dasharray='3 3'/%3E%3Cline x1='12' y1='16' x2='12' y2='19' stroke-dasharray='3 3'/%3E%3C/svg%3E");
}

/* ---------- Road curve background decoration for any section ---------- */
.motif-bg-road {
  position: relative;
}

.motif-bg-road::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 10%;
  width: 300px;
  height: 80%;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 600'%3E%3Cpath d='M100 0 C150 100 50 200 100 300 S150 500 100 600' fill='none' stroke='%23000' stroke-width='60' stroke-linecap='round'/%3E%3Cpath d='M100 0 C150 100 50 200 100 300 S150 500 100 600' fill='none' stroke='%23fff' stroke-width='3' stroke-dasharray='18 14' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}