/* ================================================= */
/* === Logo Animation (Keep As Is - From Before) === */
/* ================================================= */

@keyframes fadeInRotateCCW {
  from { opacity: 0; transform: rotate(15deg); }
  to { opacity: 1; transform: rotate(0deg); }
}

#viz-logo-animation #C1,
#viz-logo-animation #C2,
#viz-logo-animation #C3,
#viz-logo-animation #C4 {
  opacity: 0;
  transform-origin: center;
  animation-name: fadeInRotateCCW;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

#viz-logo-animation #C2 { animation-delay: 0.3s; }
#viz-logo-animation #C3 { animation-delay: 0.6s; }
#viz-logo-animation #C4 { animation-delay: 0.9s; }

/* ========================================================= */
/* === Text Claim Animation (New/Updated Rules Below) === */
/* ========================================================= */

/* REMOVE or COMMENT OUT the old #text animation rule if you had it */
/*
#text {
  opacity: 0;
  animation: fadeInText 1.2s ease-out forwards;
  animation-delay: 1.5s;
}
*/

/* Define the simple fade-in animation for letters */
/* (We can reuse the name if you like, or make a new one) */
@keyframes fadeInText {
   from { opacity: 0; }
   to { opacity: 1; }
}

/* --- Staggered Fade-In for Text Letters --- */

/* Base styles for ALL letter paths */
#viz-logo-claim-animation path {
  opacity: 0; /* Start invisible */
  animation-name: fadeInText;
  animation-duration: 0.5s; /* How long each letter takes to fade in */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* Stay visible */
}

/* Apply individual delays using :nth-of-type() */
/* This targets the paths based on their order within the group */
/* Adjust the base delay (2.2s) and increment (0.05s) as needed */

#viz-logo-claim-animation path:nth-of-type(1) { animation-delay: 2.2s; }   /* B */
#viz-logo-claim-animation path:nth-of-type(2) { animation-delay: 2.25s; }  /* A */
#viz-logo-claim-animation path:nth-of-type(3) { animation-delay: 2.3s; }   /* U */
#viz-logo-claim-animation path:nth-of-type(4) { animation-delay: 2.35s; }  /* E */
#viz-logo-claim-animation path:nth-of-type(5) { animation-delay: 2.4s; }   /* N */
#viz-logo-claim-animation path:nth-of-type(6) { animation-delay: 2.45s; }  /* I */
#viz-logo-claim-animation path:nth-of-type(7) { animation-delay: 2.5s; }   /* S */
#viz-logo-claim-animation path:nth-of-type(8) { animation-delay: 2.55s; }  /* T */
#viz-logo-claim-animation path:nth-of-type(9) { animation-delay: 2.6s; }   /* W */
#viz-logo-claim-animation path:nth-of-type(10) { animation-delay: 2.65s; } /* E */
#viz-logo-claim-animation path:nth-of-type(11) { animation-delay: 2.7s; }  /* R */
#viz-logo-claim-animation path:nth-of-type(12) { animation-delay: 2.75s; } /* T */
#viz-logo-claim-animation path:nth-of-type(13) { animation-delay: 2.8s; }  /* R */
#viz-logo-claim-animation path:nth-of-type(14) { animation-delay: 2.85s; } /* A */
#viz-logo-claim-animation path:nth-of-type(15) { animation-delay: 2.9s; }  /* U */
#viz-logo-claim-animation path:nth-of-type(16) { animation-delay: 2.95s; } /* E */
#viz-logo-claim-animation path:nth-of-type(17) { animation-delay: 3.0s; }  /* N */
#viz-logo-claim-animation path:nth-of-type(18) { animation-delay: 3.05s; } /* S */
#viz-logo-claim-animation path:nth-of-type(19) { animation-delay: 3.1s; }  /* W */
#viz-logo-claim-animation path:nth-of-type(20) { animation-delay: 3.15s; } /* E */
#viz-logo-claim-animation path:nth-of-type(21) { animation-delay: 3.2s; }  /* R */
#viz-logo-claim-animation path:nth-of-type(22) { animation-delay: 3.25s; } /* T */
#viz-logo-claim-animation path:nth-of-type(23) { animation-delay: 3.3s; }  /* C */
#viz-logo-claim-animation path:nth-of-type(24) { animation-delay: 3.35s; } /* H */
#viz-logo-claim-animation path:nth-of-type(25) { animation-delay: 3.4s; }  /* E */
#viz-logo-claim-animation path:nth-of-type(26) { animation-delay: 3.45s; } /* N */