/* ============================================
   SHARED UTILITIES
   Portfolio Case Study Template
   ============================================ */

/* ============================================
   Animations
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   FLOATING BACKGROUND GRAPHICS - BEM
   ============================================ */
.floating-graphics {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.floating-graphics__icon {
  position: absolute;
  color: var(--color-light);
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.floating-graphics__icon--azure {
  width: 300px;
  height: 300px;
  top: 10%;
  right: -5%;
  color: rgba(255, 255, 255, 0.08);
}

.floating-graphics__icon--cloud {
  width: 200px;
  height: 200px;
  top: 60%;
  left: 5%;
  color: rgba(255, 255, 255, 0.06);
}

.floating-graphics__icon--grid {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 10%;
  color: rgba(255, 255, 255, 0.05);
}

.floating-graphics__icon--hexagon {
  width: 180px;
  height: 180px;
  bottom: 15%;
  right: 15%;
  color: rgba(255, 255, 255, 0.06);
}

.floating-graphics__icon--dots {
  width: 120px;
  height: 120px;
  top: 40%;
  right: 25%;
  color: rgba(255, 255, 255, 0.08);
}

.floating-graphics__icon--server {
  width: 100px;
  height: 100px;
  bottom: 30%;
  left: 20%;
  color: rgba(255, 255, 255, 0.06);
}

/* Background Graphics for Sections - BEM */
.bg-graphics {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-graphics--light {
  color: var(--color-dark);
}

.bg-graphics__icon {
  position: absolute;
  will-change: transform;
}

/* Role Section Graphics */
.bg-graphics__icon--fluent {
  width: 250px;
  height: 250px;
  top: 10%;
  right: 5%;
  color: var(--color-blue);
}

.bg-graphics__icon--circle {
  width: 200px;
  height: 200px;
  bottom: 10%;
  left: 5%;
  color: var(--color-purple);
}

/* Problem Section Graphics */
.bg-graphics__icon--warning {
  width: 150px;
  height: 150px;
  top: 15%;
  right: 10%;
  color: var(--color-light);
}

.bg-graphics__icon--x {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 8%;
  color: var(--color-light);
}

.bg-graphics__icon--question {
  width: 120px;
  height: 120px;
  top: 50%;
  left: 15%;
  color: var(--color-light);
}

/* Research Section Graphics */
.bg-graphics__icon--magnify {
  width: 180px;
  height: 180px;
  top: 10%;
  right: 8%;
  color: var(--color-blue);
}

.bg-graphics__icon--chart {
  width: 150px;
  height: 120px;
  bottom: 15%;
  left: 5%;
  color: var(--color-orange);
}

.bg-graphics__icon--users {
  width: 200px;
  height: 120px;
  bottom: 30%;
  right: 3%;
  color: var(--color-green);
}

/* Solution Section Graphics */
.bg-graphics__icon--azure-logo {
  width: 300px;
  height: 300px;
  top: 5%;
  right: -5%;
  color: var(--color-blue);
}

.bg-graphics__icon--code {
  width: 150px;
  height: 120px;
  bottom: 20%;
  left: 5%;
  color: var(--color-green);
}

.bg-graphics__icon--checkmark {
  width: 120px;
  height: 120px;
  top: 40%;
  left: 10%;
  color: var(--color-green);
}

.bg-graphics__icon--dollar {
  width: 100px;
  height: 130px;
  bottom: 30%;
  right: 10%;
  color: var(--color-orange);
}

/* Results Section Graphics */
.bg-graphics__icon--trophy {
  width: 140px;
  height: 180px;
  top: 10%;
  right: 8%;
  color: var(--color-light);
}

.bg-graphics__icon--rocket {
  width: 120px;
  height: 150px;
  bottom: 15%;
  left: 5%;
  color: var(--color-light);
}

.bg-graphics__icon--graph-up {
  width: 180px;
  height: 140px;
  top: 30%;
  left: 8%;
  color: var(--color-light);
}

.bg-graphics__icon--star {
  width: 100px;
  height: 100px;
  bottom: 25%;
  right: 15%;
  color: var(--color-light);
}

/* CTA Section Graphics */
.bg-graphics__icon--connect {
  width: 200px;
  height: 140px;
  top: 20%;
  right: 10%;
  color: var(--color-blue);
}

.bg-graphics__icon--mail {
  width: 150px;
  height: 110px;
  bottom: 20%;
  left: 8%;
  color: var(--color-orange);
}