/*        SIENNA AI LOGO ANIMATION */
/*        SIENNA AI LOGO ANIMATION */
/*        SIENNA AI LOGO ANIMATION */
/* ---------------------------------------
   SIENNA AI LOGO ANIMATION
---------------------------------------- */



.sienna-container,
.animated-heading {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

    /* Reset container margins/padding */
    .sienna-container {
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: 60px;
      margin: 0;
      padding: 0;
      /* For fading transitions */
      transition: opacity 0.8s ease;
    }

    /* Letter-by-letter animation for initial "Sienna AI" */
    .sienna-letter {
      display: inline-block;
      animation: scaleAppear 0.1s ease-in forwards;
      opacity: 0; /* start invisible */
    }
    /* Keyframes: scale from 4× to 1× */
    @keyframes scaleAppear {
      0% {
        transform: scale(4);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
    /* Delays for each letter in “Sienna AI” (9 letters) */
    .sienna-letter:nth-child(1) { animation-delay: 0.4s; }
    .sienna-letter:nth-child(2) { animation-delay: 0.5s; }
    .sienna-letter:nth-child(3) { animation-delay: 0.6s; }
    .sienna-letter:nth-child(4) { animation-delay: 0.7s; }
    .sienna-letter:nth-child(5) { animation-delay: 0.8s; }
    .sienna-letter:nth-child(6) { animation-delay: 0.9s; }
    .sienna-letter:nth-child(7) { animation-delay: 1.0s; }
    .sienna-letter:nth-child(8) { animation-delay: 1.1s; }
    .sienna-letter:nth-child(9) { animation-delay: 1.2s; }

    /* Fade-out and fade-in helpers */
    .fade-out {
      opacity: 0;
    }
    .fade-in {
      opacity: 1; /* combined with .sienna-container { transition: opacity 0.8s } */
    }

/* ---------------------------------------
   "Designing Economic AI Since 2011" Animation
---------------------------------------- */

/* Container to center the text and apply font styling */
.animated-heading {
  text-align: center;
  font-size: 28px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300; /* Light */
  margin-top: 50px; /* Some spacing at the top */
  line-height: 1.2; /* Adjust if needed */
}

/* Letter animation base */
.letter {
  display: inline-block;
  opacity: 0;                /* Start invisible */
  animation: scaleAppear 0.1s ease-in forwards;
}

/* Reuse the same @keyframes scaleAppear (already defined above) */

/* Staggered delays for “Designing Economic AI Since 2011” */
.letter:nth-child(1)  { animation-delay: 1.5s; }
.letter:nth-child(2)  { animation-delay: 1.6s; }
.letter:nth-child(3)  { animation-delay: 1.7s; }
.letter:nth-child(4)  { animation-delay: 1.8s; }
.letter:nth-child(5)  { animation-delay: 1.9s; }
.letter:nth-child(6)  { animation-delay: 2.0s; }
.letter:nth-child(7)  { animation-delay: 2.1s; }
.letter:nth-child(8)  { animation-delay: 2.2s; }
.letter:nth-child(9)  { animation-delay: 2.3s; }
.letter:nth-child(10) { animation-delay: 2.4s; }

.letter:nth-child(11) { animation-delay: 2.5s; }
.letter:nth-child(12) { animation-delay: 2.6s; }
.letter:nth-child(13) { animation-delay: 2.7s; }
.letter:nth-child(14) { animation-delay: 2.8s; }
.letter:nth-child(15) { animation-delay: 2.9s; }
.letter:nth-child(16) { animation-delay: 3.0s; }
.letter:nth-child(17) { animation-delay: 3.1s; }
.letter:nth-child(18) { animation-delay: 3.2s; }
.letter:nth-child(19) { animation-delay: 3.3s; }

.letter:nth-child(20) { animation-delay: 3.4s; }
.letter:nth-child(21) { animation-delay: 3.5s; }
.letter:nth-child(22) { animation-delay: 3.6s; }
.letter:nth-child(23) { animation-delay: 3.7s; }
.letter:nth-child(24) { animation-delay: 3.8s; }
.letter:nth-child(25) { animation-delay: 3.9s; }
.letter:nth-child(26) { animation-delay: 4.0s; }
.letter:nth-child(27) { animation-delay: 4.1s; }
.letter:nth-child(28) { animation-delay: 4.2s; }
.letter:nth-child(29) { animation-delay: 4.3s; }

.letter:nth-child(30) { animation-delay: 4.4s; }
.letter:nth-child(31) { animation-delay: 4.5s; }
.letter:nth-child(32) { animation-delay: 4.6s; }

/* ---------------------------------------
   ADDED: Fade Out / Fade In Classes
---------------------------------------- */

/* For elements we want to fade out and back in (i.e., "Sienna AI") */
.sienna-fade-text {
  transition: opacity 0.8s ease; /* you can tweak duration */
}

/* Make element vanish */
.fade-out {
  opacity: 0;
}

/* Make element appear */
.fade-in {
  opacity: 1;
}