/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  visibility:hidden;
}

.fade-in.activate {
  visibility:visible;
  animation: fadeIn 1s ease-in;
}

/* Fly In */
@keyframes flyIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fly-in {
  visibility:hidden;
}
.fly-in.activate {
  visibility:visible;
  animation: flyIn 2s ease-out;
}

/* Zoom In */
@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.zoom-in {
  visibility:hidden;
}
.zoom-in.activate {
  visibility: visible;
  animation: zoomIn 0.8s ease-out;
}

/* Typing*/
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
.typewriter {
  visibility:hidden;
}

.typewriter.activate {
  visibility:visible;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  width: 100%;
  animation: typing 3s steps(30, end), blink 0.5s step-end infinite;
}
/* Typing */
/* Style for the text element */
.typewriter-formated {
  visibility:hidden;
}
.typewriter-formated.activate {
  visibility:visible;
  display: inline-block;
  font-size: 1.5em;
  overflow: hidden; /* Ensures text doesn’t spill out */
  border-right: 0.15em solid black; /* Cursor effect */
  white-space: nowrap;
  animation: typing 3s steps(30, end), blink-caret 0.5s step-end infinite;
}

/* Typing Effect */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Blinking Cursor */
@keyframes blink-caret {
  50% { border-color: transparent; }
}


/* Bounce In */
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% { transform: translateY(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-10px); }
}
.bounce-in {
  visibility: hidden;
}
.bounce-in.activate {
  visibility: visible;
  animation: bounceIn 1s ease;
}

/* Spin In */
@keyframes spinIn {
  from { transform: rotate(-360deg); opacity: 0; }
  to { transform: rotate(0); opacity: 1; }
}

.spin-in {
  visibility: hidden;
}
.spin-in {
  visibility: visible;
  animation: spinIn 1s ease-out;
}

/* Wave */
/* Add more spans and delays for each letter */
@keyframes wave {
  0%, 40%, 100% { transform: translateY(0); }
  20% { transform: translateY(-10px); }
}
.wave span {
  visibility: hidden;
}
.wave.activate span {
  visibility: visible;
  display: inline-block;
  animation: wave 1s ease-in-out;
}

.wave span:nth-child(1) { animation-delay: 0s; }
.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }


/* Fade & Scale */
@keyframes fadeScale {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.fade-scale {
  visibility: hidden;
}

.fade-scale.activate {
  visibility:visible;
  animation: fadeScale 0.8s ease-out;
}

/* Swing */
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}
.swing{
  visibility: hidden;
}
.swing.activate {
  visibility: visible;
  display: inline-block;
  transform-origin: top center;
  animation: swing 1s ease-in-out;
}

/* Slide In Left */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.slide-in-left {
  visibility: hidden;
}
.slide-in-left.activate {
  visibility: visible;
  animation: slideInLeft 1.5s ease-out;
}

/* Slide In Right */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.slide-in-right {
  visibility: hidden;
}
.slide-in-right.activate {
  visibility: visible;
  animation: slideInRight 1.5s ease-out;
}

/* Color Change */
@keyframes colorChange {
  0% { color: #3498db; }
  50% { color: #e74c3c; }
  100% { color: #3498db; }
}

.color-change {
  visibility: hidden;
}
.color-change.activate {
  visibility: visible;
  animation: colorChange 3s infinite;
}

/* Text Glow */
@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 5px #ff9d00, 0 0 10px #ff9d00, 0 0 20px #ff9d00; }
  50% { text-shadow: 0 0 15px #ff9d00, 0 0 30px #ff9d00, 0 0 45px #ff9d00; }
}

.glow {
  visibility: hidden;
}
.glow.activate {
  visibility: visible;
  animation: textGlow 1.5s ease-in-out infinite;
}

/* Rotate */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate {
  visibility: hidden;
}

.rotate.activate {
  visibility: visible;
  display: inline-block;
  animation: rotate 2s linear infinite;
}

/* blinds */
@keyframes blinds {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

.blinds {
  visibility: hidden;
}
.blinds.activate {
  visibility: visible;
  animation: blinds 1s ease forwards;
}


/* Dissolve In */
@keyframes dissolve {
  from { opacity: 0; }
  50% { opacity: 0.5; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}
.dissolve{
  visibility: hidden;
}
.dissolve.activate  {
  visibility: visible;
  animation: dissolve 1.5s ease-in;
}

/* Random Bars */
/* Add more spans and delays for each letter */
@keyframes barReveal {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.random-bars{
  visibility: hidden;
}
.random-bars.activate span {
  visibility: visible;
  display: inline-block;
  background: #3498db;
  height: 100%;
  width: 2px;
  animation: barReveal 1s ease forwards infinite;
}

.random-bars span:nth-child(odd) { animation-delay: 0.1s; }
.random-bars span:nth-child(even) { animation-delay: 0.2s; }

/* Circle Reveal */
@keyframes shapeReveal {
  from { clip-path: circle(0% at center); }
  to { clip-path: circle(75% at center); }
}

.shape-reveal.activate  {
  visibility: visible;
  animation: shapeReveal 1s ease forwards;
}
/* Split (Text Splits from Center) */
@keyframes split {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.split{
  visibility: visible;
}
.split.activate  {
  visibility: visible;
  transform-origin: center;
  animation: split 1s ease forwards;
}

/* Wedge */
@keyframes wedge {
  from { clip-path: polygon(50% 0, 50% 100%, 50% 100%, 50% 0); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.wedge{
  visibility: visible;
}
.wedge.activate  {
  visibility: visible;
  animation: wedge 1s ease forwards;
}

/* Wheel */
@keyframes wheel {
  from { transform: rotate(360deg); opacity: 0; }
  to { transform: rotate(0); opacity: 1; }
}

.wheel{
  visibility: visible;
}
.wheel.activate  {
  visibility: visible;
  animation: wheel 1s ease forwards;
}

/* Wipe (Slide in from Bottom) */
@keyframes wipe {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
  
}

.wipe{
  visibility: visible;
}
.wipe.activate  {
  visibility: visible;
  animation: wipe 3s ease forwards;
}
/* Expand (Scale Up) */
@keyframes expand {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.expand{
  visibility: visible;
}
.expand.activate  {
  visibility: visible;
  animation: expand 1s ease forwards;
}


/* Turn & Grow */
@keyframes growTurn {
  from { transform: scale(0.5) rotate(90deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.grow-turn{
  visibility: visible;
}
.grow-turn.activate  {
  visibility: visible;
  animation: growTurn 1s ease forwards;
}
/* Stretch */
@keyframes stretch {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.stretch{
  visibility: visible;
}
.stretch.activate {
  visibility: visible;
  animation: stretch 1s ease forwards;
}