/* ================================================================
   LEXATEK v2.2 — animations.css (keyframes library)
   ================================================================ */

:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ── Core keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  40%      { transform: translateY(-10px); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-4px); }
  40%,80% { transform: translateX(4px); }
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes dotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}
@keyframes scrollDot {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(18px); opacity: 0; }
}
@keyframes meshPulse {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0.75; transform: scale(1.01); }
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-38px,28px) scale(1.07); }
  66%      { transform: translate(28px,-18px) scale(0.94); }
}
@keyframes blobFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(18px,-26px) scale(1.05); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes stroke {
  100% { stroke-dashoffset: 0; }
}
@keyframes fill {
  100% { box-shadow: inset 0px 0px 0px 30px #22c55e; }
}
@keyframes scale {
  0%,100% { transform: none; }
  50%      { transform: scale3d(1.1,1.1,1); }
}

/* ── Scroll reveal classes ── */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade-blur {
  will-change: opacity, transform;
}
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.72s var(--ease-spring), transform 0.72s var(--ease-spring);
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.72s var(--ease-spring), transform 0.72s var(--ease-spring);
}
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.72s var(--ease-spring), transform 0.72s var(--ease-spring);
}
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale {
  opacity: 0; transform: scale(0.88);
  transition: opacity 0.72s var(--ease-spring), transform 0.72s var(--ease-spring);
}
.reveal-scale.active { opacity: 1; transform: scale(1); }
.reveal-fade-blur {
  opacity: 0; filter: blur(8px); transform: translateY(18px);
  transition: opacity 0.75s var(--ease-spring), filter 0.75s var(--ease-spring), transform 0.75s var(--ease-spring);
}
.reveal-fade-blur.active { opacity: 1; filter: blur(0); transform: translateY(0); }

/* ── Stagger delays ── */
.stagger-1 { transition-delay: 0.06s; }
.stagger-2 { transition-delay: 0.13s; }
.stagger-3 { transition-delay: 0.20s; }
.stagger-4 { transition-delay: 0.27s; }
.stagger-5 { transition-delay: 0.34s; }
.stagger-6 { transition-delay: 0.41s; }

/* ── Utility animation classes ── */
.animate-fadeIn       { animation: fadeIn 0.7s var(--ease-out); }
.animate-fadeInUp     { animation: fadeInUp 0.7s var(--ease-spring); }
.animate-fadeInLeft   { animation: fadeInLeft 0.7s var(--ease-spring); }
.animate-fadeInRight  { animation: fadeInRight 0.7s var(--ease-spring); }
.animate-scaleIn      { animation: scaleIn 0.7s var(--ease-spring); }
.animate-bounce       { animation: bounce 2s ease-in-out infinite; }
.animate-pulse        { animation: pulse 2s ease-in-out infinite; }
.animate-spin         { animation: spin 1s linear infinite; }
.animate-shake        { animation: shake 0.5s var(--ease-out); }
.animate-gradientShift { background-size:200% 200%; animation: gradientShift 4s ease infinite; }

/* ── Duration helpers ── */
.duration-fast  { animation-duration: 0.3s; }
.duration-mid   { animation-duration: 0.6s; }
.duration-slow  { animation-duration: 1s; }

/* ── Hover effects ── */
.hover-float {
  transition: transform 0.32s var(--ease-spring);
}
.hover-float:hover { transform: translateY(-8px); }

.hover-grow {
  transition: transform 0.22s var(--ease-spring);
}
.hover-grow:hover { transform: scale(1.04); }

/* ── Ripple on buttons ── */
.ripple-effect { position: relative; overflow: hidden; }
.ripple-effect::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%,-50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}
.ripple-effect:active::after {
  width: 240px; height: 240px;
  opacity: 0;
}

/* ── Loading spinner ── */
.btn-loading {
  position: relative;
  color: transparent;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Form success/error ── */
.success-checkmark {
  width: 24px; height: 24px;
  border-radius: 50%;
  stroke-width: 2;
  stroke: #22c55e;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}
.success-checkmark__circle {
  stroke-dasharray: 166; stroke-dashoffset: 166;
  stroke-width: 2; stroke: #22c55e; fill: none;
  animation: stroke 0.6s var(--ease-in-out) forwards;
}
.success-checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: stroke 0.3s var(--ease-in-out) 0.8s forwards;
}

/* ── Particle shapes (background decoration) ── */
.floating-shapes {
  position: absolute;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.floating-shapes::before, .floating-shapes::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  background: rgba(26,111,212,0.07);
  border-radius: 50%;
  animation: blobFloat 10s ease-in-out infinite alternate;
}
.floating-shapes::before { top: 15%; left: 8%; animation-delay: 0s; }
.floating-shapes::after  { top: 55%; right: 8%; animation-delay: 4s; }

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade-blur {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .animate-bounce, .animate-pulse, .animate-spin,
  .animate-gradientShift, .hover-float, .hover-grow {
    animation: none;
    transition: none;
  }
}