/* =========================================================
   Animation CSS
   ========================================================= */

/* For text animation */
.hero-title,
.hero-title-2,
.hero-description {
  opacity: 1;
  translate: 0 0;
  animation: none;
}

.hero-email {
  opacity: 0;
  translate: -48px 0;
  animation: heroImageReveal 1.45s ease-out 1.2s forwards;
}

.hero-button {
  opacity: 0;
  translate: -48px 0;
  animation: heroImageReveal 1.45s ease-out 1.45s forwards;
}

#orbitPath1,
#orbitPath2 {
  opacity: 0;
  animation: heroOrbitPathReveal 0.8s ease-out 2.2s forwards;
}

#ball1,
#ball2 {
  transition: opacity 0.38s ease-out;
}

.hero-image {
  opacity: 0;
  translate: 0 48px;
  animation: heroImageReveal 1.7s ease-out 2.8s forwards;
}

@keyframes heroOrbitPathReveal {
  from {
    opacity: 0;
    filter: blur(16px);
  }

  to {
    opacity: 0.2;
    filter: blur(0);
  }
}

@keyframes heroImageReveal {
  from {
    opacity: 0;
    filter: blur(18px);
    translate: 0 48px;
  }

  to {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }
}

@keyframes heroTextRevealLeft {
  from {
    opacity: 0;
    translate: -48px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* For text animation */
/* Random Reveal Text Animation */
/* Smooth Fast Reveal */
@keyframes randomReveal {
  0% {
    opacity: 0;
    visibility: hidden;
    filter: blur(10px);
    transform: translate3d(0, var(--y), 0) rotate(var(--r)) scale(0.92);
  }

  1% {
    visibility: visible;
  }

  60% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

.char-animate {
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: randomReveal 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;

  /* start after 920ms */
  animation-delay: calc(var(--d) + 1500ms);
}

@media (prefers-reduced-motion: reduce) {
  #ball1,
  #ball2,
  .hero-image,
  .hero-title,
  .hero-title-2,
  .hero-description,
  .hero-email,
  .hero-button {
    opacity: 1;
    animation: none;
    filter: none;
    translate: 0 0;
  }

  #orbitPath1,
  #orbitPath2 {
    opacity: 0.2;
    animation: none;
    filter: none;
  }
}

.middle-header-1,
.middle-header-2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.middle-header-1.in-view,
.middle-header-2.in-view {
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 0.4;
    transform: translateY(0);
  }
}

/* Custom scroll animation */
@keyframes scrollFadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.in-view {
  animation: scrollFadeInUp 0.8s ease-out forwards;
}

.curve-text-container.scroll-animate {
  transform: translateY(0);
  transition: opacity 0.8s ease-out;
}

.curve-text-container.scroll-animate.in-view {
  animation: none;
  opacity: 1;
}

/* Show curve-media at the same time as curve-text-container */
.curve-media {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.curve-text-container.scroll-animate.in-view ~ .curve-media {
  opacity: 1;
}

.middle-header-1.scroll-animate.in-view,
.middle-header-2.scroll-animate.in-view {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Language switch transition */
.i18n-transition {
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, filter;
}

.i18n-transition.i18n-hidden {
  opacity: 0 !important;
  filter: blur(5px);
}

/* Header transitions */
.header {
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Hover transitions */
.linkedin-badge {
  transition: background 0.2s ease, transform 0.3s ease;
}