/**
 * animations.css
 * Keyframes, scroll-triggered animations, stagger delays, hero sequences.
 * 3T3 Solution 2026 revamp — smoother easing, refined motion.
 */

/* =====================
   Keyframes
   ===================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* =====================
   Header slide-in on load
   ===================== */
.header {
  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* =====================
   Scroll-triggered — refined motion
   ===================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants */
.animate-on-scroll.from-left          { transform: translateX(-32px); }
.animate-on-scroll.from-left.visible  { transform: translateX(0); }

.animate-on-scroll.from-right          { transform: translateX(32px); }
.animate-on-scroll.from-right.visible  { transform: translateX(0); }

.animate-on-scroll.scale          { transform: scale(0.92); }
.animate-on-scroll.scale.visible  { transform: scale(1); }

/* =====================
   Stagger Delays — slightly longer for elegance
   ===================== */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* =====================
   Hero Text Sequence — staggered reveal
   ===================== */
.hero__eyebrow { animation: fadeInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }
.hero__heading  { animation: fadeInUp  0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.30s both; }
.hero__subtext  { animation: fadeInUp  0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.50s both; }
.hero__actions  { animation: fadeInUp  0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.65s both; }

/* =====================
   Counter Animation
   ===================== */
.counter-number {
  display: inline-block;
  animation: countUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.counter-number.counting {
  animation: none;
  opacity: 1;
  transform: none;
}

/* =====================
   Skill Bar Fill
   ===================== */
.skill-bar__fill,
.skill-bar-fill {
  transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =====================
   Card Hover Transitions
   ===================== */
.team-card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Partner logo hover */
.partner-logo__img {
  transition: opacity var(--transition), transform var(--transition);
}

.partner-logo:hover .partner-logo__img {
  transform: scale(1.03);
}

/* Process card icon pulse */
.process-card:hover .process-card__icon {
  animation: pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button press feedback */
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* =====================
   Hamburger → X morph
   ===================== */
.navbar__hamburger-line {
  transition: transform var(--transition), opacity var(--transition);
}

.navbar__hamburger.open .navbar__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger.open .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar__hamburger.open .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =====================
   Mobile Nav Slide-in
   ===================== */
@keyframes navSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* =====================
   Page enter transition
   ===================== */
.page-enter {
  animation: fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}