/* ===== ROVI BRAND FLOATING ICONS ===== */
/* Subtle organic floating brand elements strictly in empty whitespace and outer gutters */

.floating-icons-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Ensure all section content, cards, windows and text sit strictly above the icons */
.coworking-section,
.servizi-section,
.eventi-section {
  position: relative;
}

.coworking-section > :not(.floating-icons-container),
.servizi-section > :not(.floating-icons-container),
.eventi-section > :not(.floating-icons-container) {
  position: relative;
  z-index: 2;
}

/* Base floating icon - pure transparent, zero background, zero borders */
.floating-icon {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: 0.32;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transition: opacity var(--transition-smooth);
}

/* Size Variants */
.floating-icon--sm {
  width: 4.0rem;
  height: auto;
}

.floating-icon--md {
  width: 5.0rem;
  height: auto;
}

.floating-icon--lg {
  width: 5.8rem;
  height: auto;
}

/* ===== ANIMATIONS: BOUNDED TO EMPTY SPACE (NO WANDERING INTO TEXT) ===== */

/* 1. Oblique Drift (Diagonale morbida) */
.floating-icon--drift-oblique-1 {
  animation: roviFloatOblique1 16s ease-in-out infinite alternate;
}

/* 2. Vertical Floating (Verticale morbida) */
.floating-icon--drift-vert-1 {
  animation: roviFloatVert1 18s ease-in-out infinite alternate;
}

/* 3. Horizontal Sway (Orizzontale contenuta) */
.floating-icon--drift-horiz-1 {
  animation: roviFloatHoriz1 19s ease-in-out infinite alternate;
}

/* 4. Oblique Drift 2 (Diagonale inversa) */
.floating-icon--drift-oblique-2 {
  animation: roviFloatOblique2 17s ease-in-out infinite alternate;
}

/* 5. Elliptical Drift (Curva organica) */
.floating-icon--drift-elliptical {
  animation: roviFloatElliptical 22s ease-in-out infinite alternate;
}

/* 6. Vertical Breathing (Verticale lenta) */
.floating-icon--drift-vert-2 {
  animation: roviFloatVert2 15s ease-in-out infinite alternate;
}

/* Keyframes con escursione contenuta (8-14px) per rimanere sempre negli spazi vuoti */
@keyframes roviFloatOblique1 {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(10px, -14px) rotate(8deg);
  }
  100% {
    transform: translate(-8px, 10px) rotate(-6deg);
  }
}

@keyframes roviFloatVert1 {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(4px, -16px) rotate(-10deg);
  }
  100% {
    transform: translate(-4px, 12px) rotate(8deg);
  }
}

@keyframes roviFloatHoriz1 {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(12px, -6px) rotate(10deg);
  }
  100% {
    transform: translate(-10px, 8px) rotate(-8deg);
  }
}

@keyframes roviFloatOblique2 {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(-12px, -12px) rotate(-8deg);
  }
  100% {
    transform: translate(8px, 10px) rotate(8deg);
  }
}

@keyframes roviFloatElliptical {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  33% {
    transform: translate(10px, -10px) rotate(6deg);
  }
  66% {
    transform: translate(-8px, -6px) rotate(-5deg);
  }
  100% {
    transform: translate(8px, 8px) rotate(6deg);
  }
}

@keyframes roviFloatVert2 {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(-4px, -14px) rotate(-10deg);
  }
  100% {
    transform: translate(4px, 12px) rotate(8deg);
  }
}

/* Su schermi sotto i 1200px dove non vi sono grondaie laterali vuote sufficienti,
   nascondiamo le icone per garantire al 100% che nessuna icona si sovrapponga ai testi */
@media (max-width: 1200px) {
  .floating-icons-container {
    display: none;
  }
}

/* Accessibility: rispetto della preferenza di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .floating-icon {
    animation: none !important;
  }
}