.animatedBg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	
	.mask {
		background-color: #0b1215;
		opacity: 0.6;
		z-index: 9;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;
	}

	.facts {
		position: relative;
    left: 10px;
    display: none;
	}
	
	div.image {
		position: absolute;
    display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		animation-name: imageFade;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-duration: 56s;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
    border-radius: 12px;
    opacity: 0;
	}
}

@keyframes imageFade {
	0% {
		opacity:0;
	}
	2% {
		opacity:1;
	}
	12% {
		opacity:1;
	}
	14% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
 
 .animatedBg div.image1 {
   animation-delay: 0s;
 }
 .animatedBg div.image2 {
   animation-delay: 8s;
 }
 .animatedBg div.image3 {
   animation-delay: 16s;
 }
 .animatedBg div.image4 {
   animation-delay: 24s;
 }
 .animatedBg div.image5 {
	animation-delay: 32s;
 }
 .animatedBg div.image6 {
	animation-delay: 40s;
 }
  .animatedBg div.image7 {
	animation-delay: 48s;
}



/*************************
   END ANIMATED BG IMAGES
**************************/


.animatedBg {
  .image1 {
    background-image: url("/imgs/features/features_winelists.jpg");
    z-index: 8;
  }
  
  .image2 {
    background-image: url("/imgs/features/features_design-studio.jpg");
    z-index: 7;
  }
  
  .image3 {
    background-image: url("/imgs/features/features_reports.jpg");
    z-index: 6;
  }
  
  .image4 {
    background-image: url("/imgs/features/features_winelist.jpg");
    z-index: 5;
  }
  
  .image5 {
    background-image: url("/imgs/features/features_packages_settings.jpg");
    z-index: 4;
  }
  
  .image6 {
    background-image: url("/imgs/features/features_category_settings.jpg");
    z-index: 3;
  }
  
  .image7 {
    background-image: url("/imgs/features/features_import.jpg");
    z-index: 2;
  }

}


body.site  {

    height: 92vh;
    padding: 4vh;
    line-height: 1.5;
    color: white;
    /* background-color: var(--blue); */
    background-color: var(--dark-bg);
    justify-content: space-between;

    /* IMAGE
    background-image: url("/imgs/DSC00890.jpg");
    background-size: 100%;
    background-position: 89% 110px;
    background-repeat: no-repeat;
    */

    /* ILLUSTRATION */
    /* background-image: url("/imgs/intro_bottles.jpg"); */
    background-position: 52% 75%;
    background-size: 190px; 
    background-repeat: no-repeat;

    &.about {
      background-image: none;
    }

    &.features {
      background-image: none;
    }

    &.login {
      button[type="submit"] {
        margin: 20px 0 0 0;
      }
    }


    
    h1 {
      font-size: 50px;
      color: white;
      line-height: 85%;
      font-weight: 700;
      margin-bottom: 30px;
    }
    
    h2 {
      font-size: 30px;
      font-family: Safiro-bold-italic;
      /* font-style: italic; */
      color: var(--blue);
      line-height: 1.25 ;
      margin-bottom: 1rem;
    }

    h3 {
      line-height: 1;
    }

    p {
      line-height: 1.8;

      &.preamble {
        font-size: 140%;
        line-height: 1.4;
      }
    }

    button {

      /* margin: 0 auto; */

      &.primary {
        background-color: var(--dark-blue);
        border: 1px solid var(--dark-blue);

        &:hover {
          background-color: var(--mid-blue);
          border: 1px solid var(--mid-blue);
        }
      }

      &.secondary {
        color: var(--mid-blue);
        background: rgba(26,26,26,0.7);

        &:hover {
          background-color: var(--mid-blue);
          border: 1px solid var(--mid-blue);
          color: white;
        }

      }
    }
    
    .pullDown {
      display: block;
      margin-top: 10px;
      color: white;
    }
    
    ul {
      padding: 0;
      margin: 0;
      
      li {
        
        &.disabled {
          color: #888;
          font-style: italic;
        }
        
      }
    }

    label {
        display: block;
        margin-bottom: 5px;
        color: var(--text-color);

        a {
          color: inherit;
        }
      }

    main {
        padding: 0 6%;

        .hero-section {
          gap: 5%;
          padding: 7.5% 0 10% 0;
        }

        .left-column {

          display: flex;
          justify-content: space-between;

          .top {
            margin-bottom: 20%;
          }

          .pullDown {
            width: 80%;
          }

          h1, h2 {
            margin-bottom: 1.5rem;
          }

          ul {
            font-size: 1.1rem;
            font-weight: 300;;

            li {
              margin-right: 0;
              padding: 5px 0;
              margin-bottom: 5px;;
              min-width: 100%;
              max-width: 100%;
              text-transform: none;
            }
          }

        }

        .right-column {
          padding: 0;
          justify-content: end;
        }
        
    }

    .animatedFeatures {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 11;
      margin: 20px 0;
    }

   .contact-form {
      margin-top: 0;
      max-width: 500px;
      padding-left: 10%;

      h3 {
        margin-bottom: 20px;
      }

      .form-group {
        margin-bottom: 15px;
      }

      button {
        margin: 30px 0 0 0;
        display: block;
      }

      input, textarea {
        width: 100%;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
      }

      textarea {
        min-height: 100px;
      }

      .form-message {
        padding: 20px 0;

        &.success {
          background-color: transparent;
          border: none;
          color: inherit;
        }
      }

    }


    .contact-success {
      color: white;
      margin-bottom: 15px;
      padding: 10px;
      border-radius: 4px;
      background-color: rgba(76, 175, 80, 0.7);
    }
    .contact-error {
      color: var(--critical);
      margin-bottom: 15px;
      padding: 10px;
      border-radius: 4px;
      background-color: rgba(244, 67, 54, 0.1);
    }
    .form-message {
      font-size: 14px;
      line-height: 1.4;
    }

    /*********** HOME **********/

    &.index {
      main {
        display: flex;
        flex-direction: column;
        gap: 20%;
        flex: 1;
      }
    }

    .step-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 30px;
        margin-top: 10px;
        max-width: 1400px;

        @media (max-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
        }

        .step-card {
          img.illu {
              width: 52%;
              margin: 20px auto 30px auto;
              display: block;
          }
        }
    }

    .logo-grid {
        display: grid;
        gap: 10px 30px;
        margin: 2% auto 5% auto;
        justify-items: center;
        align-items: center;

        grid-template-columns: repeat(4, 1fr);

        img {
          height: auto;
          max-width: 110px;

          &.small {
            max-width: 70px;
          }
        }
    }

    .social-proof-section {
      text-align: center;
      margin: 0 auto;
    }
    
    .cost-section {
      margin: 10% auto;
    }

    .solution-section,
    .problem-section,
    .four-step-section,
    .social-proof-section {
      margin-top: 10%;
    }

    .solution-section,
    .problem-section {
      p {
        font-size: 1rem;
      }
    }

    /*********** LOGIN **********/

    
    /*********** FEATURES PAGE **********/
    
    .features-grid {
      margin-top: 10%;
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 100px 30px;
        margin-top: 10px;
        max-width: 1400px;

        &.primary {
          margin-top: 10%;
        }

        &.secondary {
          margin-top: 10%;
          grid-template-columns: repeat(5, 1fr);
          gap: 100px 0;
        }
    


        /* Odd rows: card (30%) then image (70%) */
        .card-grid-box {
          grid-column: span 3;
          background-color: black;
          z-index: 1000;
          height: fit-content;
          padding: 15%;
          border-radius: 10px;
        
          &:nth-child(4n+1) {
            margin: 12% -15% 0 0;    
          }

          &:nth-child(4n+4) {
            margin: 12% 0 0 -15%;
          }

          h3 {
            margin-top: 0;
            color: var(--primary-color);
          }

          p {
            line-height: 1.6;
            font-size: 14px;
            color: var(--text-color);
          }

        }

        .card-grid-image {

          /* background: rgba(255,255,255,0.05); */
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 200px;
        
          &:nth-child(4n+2) {
              grid-column: span 7;
          }

          /* Even rows: image (70%) then card (30%) */
          &:nth-child(4n+3) {
              grid-column: span 7;
          }

            img {
              border-radius: 10px;
            }
        
        }

        &.half-half {
          .card-grid-box {
            grid-column: span 4;
          }

          .card-grid-image {
            &:nth-child(4n+2) {
                grid-column: span 6;
            }
            &:nth-child(4n+3) {
                grid-column: span 6;
            }
          }

        }

    } /* END CARD-GRID */



    

    /*********** ABOUT PAGE **********/


    .about-content {
        margin-bottom: 20px;
        gap: 10%;
        font-size: 14px;

        &.secondary {
          margin: 10% auto 0 auto;
        }

        h3 {
          margin-top: 2rem;
        }

        .left-column {
          justify-content: unset;
        }

        .right-column {
          justify-content: unset;
          padding: 0;
        }
    }

    .cta-section {
        margin-top: 10%;
        text-align: center;

        h2 {
          margin-bottom: 30px;
        }
    }

    .cta-buttons {
      gap: 30px;
      margin-top: 5%;
    }

    footer {
      padding: 50px 8% 30px 8%;
      border-top-color: var(--dark-gray);
      background-color: var(--dark-bg);
    }


    /* Responsive: Stack on mobile */
    @media (max-width: 768px) {

      &.index main {
        flex-direction: column;
        gap: 2%;
        flex: auto;
      }

      main {
        padding: 0;
      }

      .cta-section, .social-proof-section {
        margin-top: 30%;
      }

      .cta-section {
        margin-bottom: 20%;
      }

      .left-column {
        margin-bottom: 50px;;
      }

      .card-grid {
          display: flex;
          flex-direction: column;
          gap: 20px;
      }

      .card-grid-box {
        padding: 10%;
        margin: 0 !important;
      }

      .card-grid-image {
        margin: 0 0 50px 0 !important;
      }

      /* Assign explicit orders to keep pairs together but swap the swapped ones */
      /* Pair 1: positions 1-2 stay as is */
      .card-grid-box:nth-child(1) { order: 1; }
      .card-grid-image:nth-child(2) { order: 2; }

      /* Pair 2: positions 3-4 get swapped (card first, then image) */
      .card-grid-image:nth-child(3) { order: 4; }
      .card-grid-box:nth-child(4) { order: 3; }

      /* Pair 3: positions 5-6 stay as is */
      .card-grid-box:nth-child(5) { order: 5; }
      .card-grid-image:nth-child(6) { order: 6; }

      /* Pair 4: positions 7-8 get swapped (card first, then image) */
      .card-grid-image:nth-child(7) { order: 8; }
      .card-grid-box:nth-child(8) { order: 7; }

      /* Pair 5: positions 9-10 stay as is */
      .card-grid-box:nth-child(9) { order: 9; }
      .feacard-gridture-image:nth-child(10) { order: 10; }

      /* Pair 6: positions 11-12 get swapped (card first, then image) */
      .card-grid-image:nth-child(11) { order: 12; }
      .card-grid-box:nth-child(12) { order: 11; }

      .contact-form {
        padding-left: 0;
      }

      footer {
        margin-top: 50px;
        padding-top: 30px;
        gap: 20px;
      }
    }

}


/*************************
   SCROLL FADE-IN ANIMATIONS
**************************/

/* Keyframe animation for fade-in effect */
@keyframes scrollFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Container for elements that should fade in on scroll */
.fade-in-container {
  /* Container doesn't need styles, just a marker class */
}

/* Individual items that will fade in */
.fade-in-item {
  opacity: 0;
  transition: none; /* Prevent any default transitions from interfering */
}

/* Active state - applied by JavaScript when element enters viewport */
.fade-in-item.is-visible {
  animation: scrollFadeIn 0.6s ease-out forwards;
}

/* Staggered delay classes - applied dynamically by JavaScript */
.fade-in-item[style*="animation-delay"] {
  /* Style attribute will contain the delay */
}

/*************************
   END SCROLL FADE-IN ANIMATIONS
**************************/