/* 1. Base Site Setup */
body {
  margin: 0;
  padding: 0;
  /* Clean gradient: original purple fading straight into misty white */
  background: linear-gradient(180deg, #9b72cb 0%, #f4f8ff 100%);
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* Prevents the page from scrolling */
}

/* 2. The Full-Screen Invisible Container */
.dandelion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;        
  pointer-events: none; /* Allows users to click straight through to your site content */
  overflow: hidden;     
  
  /* Prevent blue box selection highlights */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 3. The Wrapper: Handles the macro diagonal movement */
.seed-wrapper {
  position: absolute;
  bottom: -20vh; /* Pushed slightly lower down to start completely out of sight */
}

/* 4. The Image: Handles the micro wavering, spinning, and permanent lean */
.seed-image {
  width: auto;
  pointer-events: none; /* Prevents dragging or highlighting the image file */
}

/* 5. Staggering the Wrappers: Speeds adjusted to be slightly faster overall */
.wrapper-1  { left: -80vw; animation: floatSteep 26s linear infinite;    animation-delay: -2s; }
.wrapper-2  { left: 30vw;  animation: floatShallow 28s linear infinite;  animation-delay: -7s; } 
.wrapper-3  { left: -40vw; animation: floatStandard 22s linear infinite; animation-delay: -14s; }
.wrapper-4  { left: 60vw;  animation: floatSteep 28s linear infinite;    animation-delay: -19s; }
.wrapper-5  { left: -10vw; animation: floatShallow 25s linear infinite;  animation-delay: -23s; } 
.wrapper-6  { left: 80vw;  animation: floatStandard 25s linear infinite; animation-delay: -28s; }
.wrapper-7  { left: -60vw; animation: floatSteep 24s linear infinite;    animation-delay: -32s; }
.wrapper-8  { left: 10vw;  animation: floatShallow 30s linear infinite;  animation-delay: -3s; }  
.wrapper-9  { left: 90vw;  animation: floatStandard 20s linear infinite; animation-delay: -11s; }
.wrapper-10 { left: -30vw; animation: floatSteep 26s linear infinite;    animation-delay: -17s; } 
.wrapper-11 { left: 40vw;  animation: floatShallow 29s linear infinite;  animation-delay: -25s; } 
.wrapper-12 { left: -70vw; animation: floatStandard 27s linear infinite; animation-delay: -35s; }
.wrapper-13 { left: 20vw;  animation: floatSteep 23s linear infinite;    animation-delay: -8s; }
.wrapper-14 { left: -50vw; animation: floatShallow 27s linear infinite;  animation-delay: -13s; } 
.wrapper-15 { left: 70vw;  animation: floatStandard 21s linear infinite; animation-delay: -21s; }
.wrapper-16 { left: -20vw; animation: floatSteep 29s linear infinite;    animation-delay: -27s; }
.wrapper-17 { left: 50vw;  animation: floatShallow 29s linear infinite;  animation-delay: -33s; } 
.wrapper-18 { left: 0vw;   animation: floatStandard 19s linear infinite; animation-delay: -38s; }

/* 6. Staggering the Images: Base Desktop Sizes & Waver Speed */
.image-1  { height: 60px;  animation: waver-1 4.3s ease-in-out infinite alternate; }
.image-2  { height: 25px;  animation: waver-2 6.1s ease-in-out infinite alternate; } 
.image-3  { height: 80px;  animation: waver-3 2.7s ease-in-out infinite alternate; } 
.image-4  { height: 30px;  animation: waver-1 5.2s ease-in-out infinite alternate; }
.image-5  { height: 45px;  animation: waver-2 5.8s ease-in-out infinite alternate; }
.image-6  { height: 70px;  animation: waver-3 3.4s ease-in-out infinite alternate; }
.image-7  { height: 25px;  animation: waver-1 4.7s ease-in-out infinite alternate; }
.image-8  { height: 75px;  animation: waver-2 4.1s ease-in-out infinite alternate; }
.image-9  { height: 35px;  animation: waver-3 3.0s ease-in-out infinite alternate; }
.image-10 { height: 65px;  animation: waver-1 2.5s ease-in-out infinite alternate; }
.image-11 { height: 20px;  animation: waver-2 6.5s ease-in-out infinite alternate; } 
.image-12 { height: 55px;  animation: waver-3 4.9s ease-in-out infinite alternate; }
.image-13 { height: 40px;  animation: waver-1 3.8s ease-in-out infinite alternate; }
.image-14 { height: 25px;  animation: waver-2 5.5s ease-in-out infinite alternate; }
.image-15 { height: 75px;  animation: waver-3 2.9s ease-in-out infinite alternate; }
.image-16 { height: 50px;  animation: waver-1 4.5s ease-in-out infinite alternate; }
.image-17 { height: 35px;  animation: waver-2 5.1s ease-in-out infinite alternate; }
.image-18 { height: 60px;  animation: waver-3 3.6s ease-in-out infinite alternate; }

/* ========================================= */
/* 7. THE KEYFRAMES (The Math & Physics)     */
/* ========================================= */

/* Macro Movement Paths - EXTENDED beyond screen margins to prevent popping */
@keyframes floatSteep {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(115vw, -165vh); } 
}

@keyframes floatShallow {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(165vw, -120vh); } 
}

@keyframes floatStandard {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(145vw, -145vh); } 
}

/* Micro Wavering Angles */
@keyframes waver-1 {
  0%   { transform: translateX(-20px) rotate(25deg); }
  100% { transform: translateX(20px) rotate(55deg); }
}

@keyframes waver-2 {
  0%   { transform: translateX(-15px) rotate(35deg); } 
  100% { transform: translateX(15px) rotate(65deg); }
}

@keyframes waver-3 {
  0%   { transform: translateX(-25px) rotate(15deg); } 
  100% { transform: translateX(25px) rotate(45deg); }
}

/* ========================================= */
/* 8. MOBILE RESPONSIVENESS                  */
/* ========================================= */

@media (max-width: 768px) {
  /* Extra tiny sizes for mobile */
  .image-1  { height: 16px; }
  .image-2  { height: 10px; } 
  .image-3  { height: 28px; } /* Main foreground seed 1 */
  .image-4  { height: 12px; }
  .image-5  { height: 15px; }
  .image-6  { height: 14px; } 
  .image-7  { height: 9px;  } /* Ultra tiny */
  .image-8  { height: 18px; } 
  .image-9  { height: 10px; }
  .image-10 { height: 16px; } 
  .image-11 { height: 8px;  } /* Ultra tiny */
  .image-12 { height: 15px; }
  .image-13 { height: 12px; }
  .image-14 { height: 9px;  } /* Ultra tiny */
  .image-15 { height: 32px; } /* Main foreground seed 2 */
  .image-16 { height: 14px; } 
  .image-17 { height: 10px; }
  .image-18 { height: 15px; } 

  /* Further slowed down for a very gentle, relaxing drift */
  .wrapper-1  { animation-duration: 23s; }
  .wrapper-2  { animation-duration: 25s; }
  .wrapper-3  { animation-duration: 21s; }
  .wrapper-4  { animation-duration: 26s; }
  .wrapper-5  { animation-duration: 22s; }
  .wrapper-6  { animation-duration: 23s; }
  .wrapper-7  { animation-duration: 22s; }
  .wrapper-8  { animation-duration: 27s; }
  .wrapper-9  { animation-duration: 19s; }
  .wrapper-10 { animation-duration: 24s; }
  .wrapper-11 { animation-duration: 26s; }
  .wrapper-12 { animation-duration: 25s; }
  .wrapper-13 { animation-duration: 21s; }
  .wrapper-14 { animation-duration: 24s; }
  .wrapper-15 { animation-duration: 20s; }
  .wrapper-16 { animation-duration: 27s; }
  .wrapper-17 { animation-duration: 26s; }
  .wrapper-18 { animation-duration: 19s; }
}