@keyframes fadeOutIntro {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes bloom {
  0% { transform: translate3d(0, 0, 0) scale(0); }
  72% { transform: translate3d(0, 0, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes floatA {
  from { transform: translate3d(-10px, 8px, 0) scale(1); }
  to { transform: translate3d(16px, -14px, 0) scale(1); }
}
@keyframes floatB {
  from { transform: translate3d(14px, -10px, 0) scale(1); }
  to { transform: translate3d(-18px, 14px, 0) scale(1); }
}
@keyframes floatC {
  from { transform: translate3d(6px, 14px, 0) scale(1); }
  to { transform: translate3d(-12px, -18px, 0) scale(1); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes revealContent {
  to { opacity: 1; }
}

@keyframes bounceIcon {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-3px) rotate(5deg); }
}

@keyframes fadeNews {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(40px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Business Page Animations --- */

/* 1. Top Image: Zoom-out and Focus effect */
.bp-bg {
  transform: scale(1.15); /* Starts large */
  filter: blur(10px);     /* Starts blurred */
  animation: heroFocus 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.2s;  /* Waits for curtain */
}

@keyframes heroFocus {
  to {
    transform: scale(1);
    filter: blur(0);
  }
}

/* 2. Floating Card: Rises from bottom with slight bounce */
.bp-card {
  opacity: 0;
  transform: translateY(60px); /* Starts low */
  animation: floatCardUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Very bouncy */
  animation-delay: 0.4s; /* Appears after image */
}

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

/* 3. Text content inside card: Staggered fade up */
.bp-title, .bp-category, .bp-desc, .bp-extra-info, .bp-actions, .bp-contact, .bp-map-section {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeContentUp 0.8s ease-out forwards;
}

/* Staggered timing for each element */
.bp-category { animation-delay: 0.6s; }
.bp-title    { animation-delay: 0.7s; }
.bp-desc     { animation-delay: 0.8s; }
.bp-extra-info { animation-delay: 0.9s; }
.bp-actions  { animation-delay: 1.0s; }
.bp-map-section { animation-delay: 1.1s; }
.bp-contact  { animation-delay: 1.2s; }

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

/* --- Jobs Page Animations --- */

/* Main Container */
.jobs-container {
  opacity: 1; /* Container exists, children animated */
}

/* Job Card */
.job-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95); /* Starts low and small */
  animation: jobSlideIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Default staggered delays (if not set inline) */
.job-card:nth-child(1) { animation-delay: 0.3s; }
.job-card:nth-child(2) { animation-delay: 0.4s; }
.job-card:nth-child(3) { animation-delay: 0.5s; }
.job-card:nth-child(4) { animation-delay: 0.6s; }
.job-card:nth-child(5) { animation-delay: 0.7s; }
.job-card:nth-child(6) { animation-delay: 0.8s; }

@keyframes jobSlideIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Glass shine effect on entry */
.job-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: shineGlass 1.5s ease-out;
  animation-delay: inherit; /* Inherits card delay */
}

@keyframes shineGlass {
  0% { left: -100%; }
  100% { left: 200%; }
}