/* ================================================================
   FLOATING DECORATIVE COMPONENTS
   Geometric accents (dot grid, triangle, rings) that overlay
   section images for depth and visual interest.
================================================================ */

.fi {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 4;
  width: 64px  !important;
  height: 65px !important;
  display: block;
  object-fit: contain;
  opacity: 0.45;
  animation: fi-float 4.2s ease-in-out infinite;
}

/* ── Outside placement — for overflow:visible wrappers ───────── */
.fi--tl { top:    -14px; left:  -14px; }
.fi--tr { top:    -14px; right: -14px; }
.fi--bl { bottom: -80px; left:  -14px; }
.fi--br { bottom: -14px; right: -14px; }

/* ── Inside placement — for overflow:hidden wrappers ─────────── */
.fi--in-tl { top:    10px; left:  10px; }
.fi--in-tr { top:    10px; right: 10px; }
.fi--in-bl { bottom: 10px; left:  10px; }
.fi--in-br { bottom: 10px; right: 10px; }

/* ── Staggered animation delays ──────────────────────────────── */
.fi--d2 { animation-delay: 1.0s;  }
.fi--d3 { animation-delay: 2.0s;  }
.fi--d4 { animation-delay: 3.0s;  }

/* ── Float + gentle rotate keyframe ─────────────────────────── */
@keyframes fi-float {
  0%,  100% { transform: translateY(0px)  rotate(0deg); }
  50%        { transform: translateY(-8px) rotate(5deg); }
}

/* ── Tablet ≤900px ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .fi { width: 48px !important; height: 49px !important; opacity: 0.38; }
  .fi--tl { top:    -12px; left:  -12px; }
  .fi--tr { top:    -12px; right: -12px; }
  .fi--bl { bottom: -12px; left:  -12px; }
  .fi--br { bottom: -12px; right: -12px; }
}

/* ── Small tablet ≤640px ─────────────────────────────────────── */
@media (max-width: 640px) {
  .fi { width: 36px !important; height: 37px !important; opacity: 0.30; }
  .fi--tl { top:    -10px; left:  -10px; }
  .fi--tr { top:    -10px; right: -10px; }
  .fi--bl { bottom: -10px; left:  -10px; }
  .fi--br { bottom: -10px; right: -10px; }
  .fi--in-tl { top:    8px; left:  8px; }
  .fi--in-tr { top:    8px; right: 8px; }
  .fi--in-bl { bottom: 8px; left:  8px; }
  .fi--in-br { bottom: 8px; right: 8px; }
}

/* ── Mobile ≤480px — hide entirely ──────────────────────────── */
@media (max-width: 480px) {
  .fi { display: none !important; }
}