/* ========================= */
/* OPENING ANIMATION STYLES */
/* ========================= */

#intro-animation {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #000 60%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: introFadeOut 2.5s ease forwards;
  animation-delay: 2.8s;
  overflow: hidden;
}

.intro-logo {
  width: 300px;
  opacity: 0;
  transform: scale(0.8);
  animation: logoAppear 2.2s ease forwards;
}

/* Logo appear and fade out */
@keyframes logoAppear {
  0% { opacity: 0; transform: scale(0.8); filter: blur(5px); }
  30% { opacity: 1; transform: scale(1.05); filter: blur(0); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Screen fade out */
@keyframes introFadeOut {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}



/*pararallax*/

.parallax-video {
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}



/*reveal*/


.reveal {
  opacity: 0;
  transform: translateY(90px);
  transition: all 2.5s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}




/* ===== Scroll Reveal: Right Side ===== */
.reveal-right {
  opacity: 0;
  transform: translateX(150px);
  transition: all 2.5s ease-out;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}


.reveal-left {
  opacity: 0;
  transform: translateX(-150px); /* start from left */
  transition: all 1.5s ease; /* slower animation */
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}


.pf-card {
  opacity: 0;
  transform: translateY(150px);
  transition: all 2.5s ease;
}

.pf-card.active {
  opacity: 1;
  transform: translateY(0);
}




/* Reveal from bottom */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.5s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1.5s ease;
}
.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 1.5s ease;
}
.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Cards */
.pf-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.5s ease;
}
.pf-card.active {
  opacity: 1;
  transform: translateY(0);
}