/* =============================================
   Triplet Auto Repair - Animations
   ta-animations.css
   ============================================= */

/* ---- Keyframes ---- */
@keyframes ta-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ta-fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ta-fadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ta-fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ta-scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ta-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
@keyframes ta-shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes ta-rotateIn {
  from { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes ta-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes ta-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ta-counter-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes ta-border-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(228,87,46,0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(228,87,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(228,87,46,0); }
}
@keyframes ta-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ta-wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ---- Utility Animation Classes ---- */
.ta-animate-fadeIn      { animation: ta-fadeIn 0.6s ease forwards; }
.ta-animate-fadeInUp    { animation: ta-fadeInUp 0.7s ease forwards; }
.ta-animate-fadeInLeft  { animation: ta-fadeInLeft 0.7s ease forwards; }
.ta-animate-fadeInRight { animation: ta-fadeInRight 0.7s ease forwards; }
.ta-animate-scaleIn     { animation: ta-scaleIn 0.6s ease forwards; }
.ta-animate-float       { animation: ta-float 3s ease-in-out infinite; }
.ta-animate-pulse       { animation: ta-pulse 2s ease-in-out infinite; }

/* Delay helpers */
.ta-delay-100 { animation-delay: 0.1s; }
.ta-delay-200 { animation-delay: 0.2s; }
.ta-delay-300 { animation-delay: 0.3s; }
.ta-delay-400 { animation-delay: 0.4s; }
.ta-delay-500 { animation-delay: 0.5s; }
.ta-delay-600 { animation-delay: 0.6s; }
.ta-delay-700 { animation-delay: 0.7s; }
.ta-delay-800 { animation-delay: 0.8s; }

/* ---- Hero specific ---- */
.ta-hero-main .ta-hero-badge   { animation: ta-fadeInUp 0.7s ease 0.1s both; }
.ta-hero-main .ta-hero-title   { animation: ta-fadeInUp 0.7s ease 0.25s both; }
.ta-hero-main .ta-hero-subtitle { animation: ta-fadeInUp 0.7s ease 0.4s both; }
.ta-hero-main .ta-hero-actions { animation: ta-fadeInUp 0.7s ease 0.55s both; }
.ta-hero-main .ta-hero-stats   { animation: ta-fadeInUp 0.7s ease 0.7s both; }
.ta-hero-main .ta-hero-image-side { animation: ta-fadeInRight 0.9s ease 0.3s both; }

/* ---- Overlay animated elements ---- */
.ta-hero-overlay-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  background: var(--ta-accent);
}
.ta-hero-overlay-shape-1 {
  width: 400px; height: 400px;
  top: -100px; right: -80px;
  animation: ta-float 6s ease-in-out infinite;
}
.ta-hero-overlay-shape-2 {
  width: 200px; height: 200px;
  bottom: 40px; right: 200px;
  animation: ta-float 4s ease-in-out 1s infinite;
}
.ta-hero-overlay-shape-3 {
  width: 120px; height: 120px;
  top: 60%; left: 5%;
  animation: ta-float 5s ease-in-out 0.5s infinite;
  background: rgba(255,255,255,0.1);
}

/* ---- Counter animation ---- */
.ta-counter-active {
  animation: ta-counter-pop 0.3s ease;
}

/* ---- Page transition overlay ---- */
.ta-page-transition {
  position: fixed;
  inset: 0;
  background: var(--ta-primary);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ta-page-transition.leaving { opacity: 1; }

/* ---- Hover lift ---- */
.ta-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ta-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* ---- Underline link hover ---- */
.ta-underline-hover {
  position: relative;
  display: inline-block;
}
.ta-underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--ta-accent);
  transition: width 0.3s ease;
}
.ta-underline-hover:hover::after { width: 100%; }

/* ---- Icon spin on hover ---- */
.ta-icon-hover-spin {
  display: inline-block;
  transition: transform 0.4s ease;
}
.ta-icon-hover-spin:hover { transform: rotate(360deg); }

/* ---- Shimmer loading ---- */
.ta-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: ta-shimmer 2s infinite linear;
}

/* ---- Scroll progress bar ---- */
.ta-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--ta-accent);
  z-index: 10000;
  transition: width 0.1s linear;
}

/* ---- Stagger children ---- */
.ta-stagger-children > * { opacity: 0; animation: ta-fadeInUp 0.6s ease forwards; }
.ta-stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.ta-stagger-children > *:nth-child(2) { animation-delay: 0.15s; }
.ta-stagger-children > *:nth-child(3) { animation-delay: 0.25s; }
.ta-stagger-children > *:nth-child(4) { animation-delay: 0.35s; }
.ta-stagger-children > *:nth-child(5) { animation-delay: 0.45s; }
.ta-stagger-children > *:nth-child(6) { animation-delay: 0.55s; }

/* ---- Glow on CTA ---- */
.ta-btn-primary {
  position: relative;
  overflow: hidden;
}
.ta-btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: rgba(255,255,255,0.15);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.ta-btn-primary:hover::after { left: 125%; }

/* ---- Background animated gradient ---- */
.ta-gradient-animated {
  background: linear-gradient(270deg, #1C3D5A, #2a5a82, #1C3D5A);
  background-size: 300% 300%;
  animation: ta-gradient-shift 8s ease infinite;
}

/* ---- Ticker / marquee ---- */
.ta-ticker-wrap {
  overflow: hidden;
  background: var(--ta-accent);
  color: var(--ta-white);
  padding: 10px 0;
}
.ta-ticker {
  display: flex;
  animation: ta-ticker-scroll 30s linear infinite;
  white-space: nowrap;
}
@keyframes ta-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ta-ticker-item {
  padding: 0 32px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ta-ticker-item i { font-size: 0.75rem; opacity: 0.7; }