/* ============================================
   DESERVATION — Da Vinci SVG Motifs
   Hand-drawn style decorative elements
   ============================================ */

/* --- Motif Containers --- */
.motif {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  transition: opacity 0.6s ease;
}

.motif.medium {
  opacity: 0.1;
}

.motif.bold {
  opacity: 0.15;
}

.motif.visible-motif {
  opacity: 0.25;
}

/* Section-relative positioning */
.section-relative {
  position: relative;
  overflow: hidden;
}

/* --- SVG Inline Motifs --- */

/* 1. VITRUVIAN MAN — Hero background */
.motif-vitruvian {
  width: min(700px, 90vw);
  height: min(700px, 90vw);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.motif-vitruvian svg {
  width: 100%;
  height: 100%;
}

/* 2. GOLDEN SPIRAL — Various sections */
.motif-spiral {
  width: min(500px, 60vw);
  height: min(500px, 60vw);
}

.motif-spiral svg {
  width: 100%;
  height: 100%;
}

/* 3. ANATOMICAL HAND — Problem section */
.motif-hand {
  width: min(350px, 45vw);
  height: min(450px, 55vw);
}

.motif-hand svg {
  width: 100%;
  height: 100%;
}

/* 4. EYE STUDY — Vision section */
.motif-eye {
  width: min(400px, 50vw);
  height: min(250px, 30vw);
}

.motif-eye svg {
  width: 100%;
  height: 100%;
}

/* 5. GEAR MECHANISM — Protocol section */
.motif-gear {
  width: min(300px, 40vw);
  height: min(300px, 40vw);
}

.motif-gear svg {
  width: 100%;
  height: 100%;
}

/* 6. POLYHEDRA — Graph section */
.motif-polyhedra {
  width: min(350px, 45vw);
  height: min(350px, 45vw);
}

.motif-polyhedra svg {
  width: 100%;
  height: 100%;
}

/* 7. BOTANICAL — CTA/Footer area */
.motif-botanical {
  width: min(300px, 40vw);
  height: min(450px, 55vw);
}

.motif-botanical svg {
  width: 100%;
  height: 100%;
}

/* 8. WING STUDY — Community page */
.motif-wing {
  width: min(450px, 55vw);
  height: min(350px, 45vw);
}

.motif-wing svg {
  width: 100%;
  height: 100%;
}

/* 9. SKULL STUDY */
.motif-skull {
  width: min(280px, 35vw);
  height: min(320px, 40vw);
}

.motif-skull svg {
  width: 100%;
  height: 100%;
}

/* 10. PERSPECTIVE GRID */
.motif-perspective {
  width: min(600px, 70vw);
  height: min(400px, 50vw);
}

.motif-perspective svg {
  width: 100%;
  height: 100%;
}

/* --- Responsive: hide some motifs on mobile --- */
@media (max-width: 768px) {
  .motif {
    opacity: 0.04 !important;
  }
  .motif.bold {
    opacity: 0.08 !important;
  }
  .motif.visible-motif {
    opacity: 0.12 !important;
  }
  .motif.hide-mobile {
    display: none;
  }
}