/* ===== Section title letter animation ===== */
.section_title span:not(.fadeIn),
.content_title span:not(.fadeIn) {
  opacity: 0;
}

.fadeIn.firstText {
  color: var(--accent);
}
.fadeIn {
  display: inline-block;
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Scroll reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Blob float animation (for fluid shapes) ===== */
.fluid_circle {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  animation: fluidrotate 30s ease infinite;
}

@keyframes fluidrotate {
  0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
  14%       { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
  28%       { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
  42%       { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
  56%       { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; transform: translate(-24px, 48px); }
  70%       { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
  84%       { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}

/* ===== Footer catch image fade ===== */
.fadeIn img {
  animation: fadeInUp 1s ease forwards;
}