/* =========================================================
   FLOATING LAB ICON SYSTEM
   ---------------------------------------------------------
   Purpose:
   Small decorative images that orbit around a section.

   HTML structure:

   <section class="section">

     <picture class="floating-icon floating-orbit-01">
       <source srcset="images/icons/dna.avif" type="image/avif">
       <source srcset="images/icons/dna.webp" type="image/webp">
       <img src="images/icons/dna.png" alt="" aria-hidden="true">
     </picture>

     <div class="container">
       ...
     </div>

   </section>
========================================================= */


/* =========================================================
   SECTION SETUP
   ---------------------------------------------------------
   The section becomes the positioning environment for
   the floating icons.
========================================================= */

.section {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   BASE FLOATING ICON
========================================================= */

.floating-icon {
  --icon-size: 42px;
  --icon-speed: 28s;
  --icon-opacity: 0.5;

  position: absolute;
  top: 0;
  left: 0;

  display: block;

  width: var(--icon-size);
  height: var(--icon-size);

  min-width: 0;
  min-height: 0;
  max-width: var(--icon-size);
  max-height: var(--icon-size);

  opacity: var(--icon-opacity);

  pointer-events: none;
  user-select: none;

  z-index: 1;

  will-change: offset-distance;

  offset-path: ellipse(
    45% 42%
    at 50% 50%
  );

  offset-distance: 0%;

  animation:
    floating-icon-orbit
    var(--icon-speed)
    linear
    infinite;
}

/* =========================================================
   IMAGE INSIDE <PICTURE>
========================================================= */

.floating-icon img {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  pointer-events: none;
  user-select: none;
}

/* =========================================================
   MASTER ORBIT ANIMATION
========================================================= */

@keyframes floating-icon-orbit {

  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }

}


/* =========================================================
   ORBIT 01
   ---------------------------------------------------------
   Large / balanced elliptical orbit.

   Good for:
   - DNA
   - healthcare symbols
   - technology icons
========================================================= */

.floating-orbit-01 {

  offset-path:
    ellipse(
      45% 42%
      at 50% 50%
    );

  --icon-speed: 28s;
}


/* =========================================================
   ORBIT 02
   ---------------------------------------------------------
   Taller vertical orbit.

   This creates more vertical movement than Orbit 01.

   Good for:
   - pill icons
   - molecules
   - small laboratory symbols
========================================================= */

.floating-orbit-02 {

  offset-path:
    ellipse(
      32% 46%
      at 50% 50%
    );

  --icon-speed: 23s;
}


/* =========================================================
   ORBIT 03
   ---------------------------------------------------------
   Wide horizontal orbit.

   Good for:
   - code symbols
   - database icons
   - subtle decorative elements
========================================================= */

.floating-orbit-03 {

  offset-path:
    ellipse(
      48% 27%
      at 50% 50%
    );

  --icon-speed: 34s;
}


/* =========================================================
   ORBIT 04
   ---------------------------------------------------------
   Smaller inner orbit.

   Optional fourth path if you want more activity.
========================================================= */

.floating-orbit-04 {

  offset-path:
    ellipse(
      27% 25%
      at 50% 50%
    );

  --icon-speed: 20s;
}


/* =========================================================
   ORBIT 05
   ---------------------------------------------------------
   Large outer orbit.

   Useful for one very subtle background icon.
========================================================= */

.floating-orbit-05 {

  offset-path:
    ellipse(
      49% 47%
      at 50% 50%
    );

  --icon-speed: 38s;

  --icon-opacity: 0.28;
}


/* =========================================================
   SIZE VARIATIONS
========================================================= */

.floating-icon-small {

  --icon-size: 26px;

  --icon-opacity: 0.4;
}


.floating-icon-medium {

  --icon-size: 42px;

  --icon-opacity: 0.5;
}


.floating-icon-large {

  --icon-size: 58px;

  --icon-opacity: 0.35;
}


/* =========================================================
   OPACITY VARIATIONS
========================================================= */

.floating-icon-subtle {

  --icon-opacity: 0.25;
}


.floating-icon-soft {

  --icon-opacity: 0.35;
}


.floating-icon-visible {

  --icon-opacity: 0.65;
}


/* =========================================================
   SPEED VARIATIONS
========================================================= */

.floating-icon-slow {

  --icon-speed: 36s;
}


.floating-icon-medium-speed {

  --icon-speed: 26s;
}


.floating-icon-fast {

  --icon-speed: 17s;
}


/* =========================================================
   REVERSE ORBIT
   ---------------------------------------------------------
   Uses the same orbit but travels in the opposite
   direction.

   Note:
   offset-distance itself only goes forward, so we use
   animation-direction.
========================================================= */

.floating-icon-reverse {

  animation-direction: reverse;
}


/* =========================================================
   STAGGERED START POSITIONS
   ---------------------------------------------------------
   Negative animation delays place icons at different
   locations immediately when the page loads.
========================================================= */

.floating-delay-01 {

  animation-delay: -4s;
}


.floating-delay-02 {

  animation-delay: -9s;
}


.floating-delay-03 {

  animation-delay: -15s;
}


.floating-delay-04 {

  animation-delay: -21s;
}


.floating-delay-05 {

  animation-delay: -27s;
}


/* =========================================================
   OPTIONAL FLOATING DEPTH
   ---------------------------------------------------------
   Slight opacity differences help create depth when
   multiple icons are present.
========================================================= */

.floating-depth-back {

  opacity: 0.22;

  z-index: 0;

  filter:
    blur(0.2px)
    drop-shadow(
      0 6px 14px rgba(0, 0, 0, 0.05)
    );
}


.floating-depth-front {

  opacity: 0.6;

  z-index: 2;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .floating-icon {

  /*
    Icons become slightly more visible against dark
    backgrounds without becoming distracting.
  */

  filter:
    drop-shadow(
      0 8px 20px rgba(0, 0, 0, 0.3)
    );
}


html[data-theme="dark"] .floating-icon-subtle {

  --icon-opacity: 0.2;
}


html[data-theme="dark"] .floating-depth-back {

  opacity: 0.16;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .floating-icon {

    /*
      Smaller icons prevent them from competing with
      content on narrow screens.
    */

    --icon-size: 30px;

    --icon-opacity: 0.38;

    /*
      Slightly slower movement on mobile.
    */

    --icon-speed: 23s;


    /*
      Smaller orbital area.
    */

    offset-path:
      ellipse(
        42% 35%
        at 50% 50%
      );
  }


  /* -------------------------------------------------------
     MOBILE ORBIT 01
  ------------------------------------------------------- */

  .floating-orbit-01 {

    offset-path:
      ellipse(
        42% 35%
        at 50% 50%
      );

    --icon-speed: 26s;
  }


  /* -------------------------------------------------------
     MOBILE ORBIT 02
  ------------------------------------------------------- */

  .floating-orbit-02 {

    offset-path:
      ellipse(
        29% 39%
        at 50% 50%
      );

    --icon-speed: 23s;
  }


  /* -------------------------------------------------------
     MOBILE ORBIT 03
  ------------------------------------------------------- */

  .floating-orbit-03 {

    offset-path:
      ellipse(
        44% 23%
        at 50% 50%
      );

    --icon-speed: 30s;
  }


  /* -------------------------------------------------------
     MOBILE ORBIT 04
  ------------------------------------------------------- */

  .floating-orbit-04 {

    offset-path:
      ellipse(
        24% 23%
        at 50% 50%
      );

    --icon-speed: 20s;
  }


  /* -------------------------------------------------------
     MOBILE ORBIT 05
  ------------------------------------------------------- */

  .floating-orbit-05 {

    offset-path:
      ellipse(
        46% 39%
        at 50% 50%
      );

    --icon-speed: 34s;
  }


  /* -------------------------------------------------------
     MOBILE SIZES
  ------------------------------------------------------- */

  .floating-icon-small {

    --icon-size: 19px;
  }


  .floating-icon-medium {

    --icon-size: 28px;
  }


  .floating-icon-large {

    --icon-size: 38px;
  }


  /* -------------------------------------------------------
     MOBILE OPACITY
  ------------------------------------------------------- */

  .floating-icon-visible {

    --icon-opacity: 0.5;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

  .floating-icon {

    --icon-size: 24px;

    --icon-opacity: 0.3;

    --icon-speed: 25s;
  }


  .floating-icon-small {

    --icon-size: 16px;
  }


  .floating-icon-medium {

    --icon-size: 23px;
  }


  .floating-icon-large {

    --icon-size: 30px;
  }


  /*
    Keep the orbit slightly tighter on very small
    screens so icons don't compete with the content.
  */

  .floating-orbit-01 {

    offset-path:
      ellipse(
        40% 32%
        at 50% 50%
      );
  }


  .floating-orbit-02 {

    offset-path:
      ellipse(
        27% 36%
        at 50% 50%
      );
  }


  .floating-orbit-03 {

    offset-path:
      ellipse(
        42% 21%
        at 50% 50%
      );
  }


  .floating-orbit-04 {

    offset-path:
      ellipse(
        22% 21%
        at 50% 50%
      );
  }


  .floating-orbit-05 {

    offset-path:
      ellipse(
        44% 36%
        at 50% 50%
      );
  }
}


/* =========================================================
   ACCESSIBILITY
   ---------------------------------------------------------
   Respect visitors who request reduced motion.
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .floating-icon {

    animation: none;

    offset-distance: 0%;
  }
}