/* ============================================================
   SwiftHost — Animations & Scroll Effects
   animations.css
   ============================================================ */

/* ── 1. BASE ANIMATION STATES ── */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos].aos-animate {
  opacity: 1;
  transform: none !important;
}

/* ── 2. FADE UP ── */
[data-aos="fade-up"] {
  transform: translateY(40px);
}

/* ── 3. FADE DOWN ── */
[data-aos="fade-down"] {
  transform: translateY(-40px);
}

/* ── 4. FADE LEFT ── */
[data-aos="fade-left"] {
  transform: translateX(40px);
}

/* ── 5. FADE RIGHT ── */
[data-aos="fade-right"] {
  transform: translateX(-40px);
}

/* ── 6. ZOOM IN ── */
[data-aos="zoom-in"] {
  transform: scale(0.85);
}

/* ── 7. ZOOM UP ── */
[data-aos="zoom-up"] {
  transform: scale(0.85) translateY(30px);
}

/* ── 8. FLIP LEFT ── */
[data-aos="flip-left"] {
  transform: perspective(400px) rotateY(-30deg);
}

/* ── 9. FLIP RIGHT ── */
[data-aos="flip-right"] {
  transform: perspective(400px) rotateY(30deg);
}

/* ── 10. DELAY UTILITIES ── */
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos-delay="500"] { transition-delay: 500ms; }
[data-aos-delay="600"] { transition-delay: 600ms; }
[data-aos-delay="700"] { transition-delay: 700ms; }
[data-aos-delay="800"] { transition-delay: 800ms; }

/* ── 11. KEYFRAME ANIMATIONS ── */

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

/* Gentle float */
@keyframes float-sm {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
  50%       { box-shadow: 0 0 0 18px rgba(13,110,253,0.12); }
}

/* Pulse ring */
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Shimmer */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Gradient shift */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Bounce in */
@keyframes bounceIn {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* Slide in up */
@keyframes slideInUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Rotate loop */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Typing cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 12. ANIMATION UTILITY CLASSES ── */

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-sm {
  animation: float-sm 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

.animate-bounce-in {
  animation: bounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-slide-up {
  animation: slideInUp 0.6s ease both;
}

.animate-rotate {
  animation: rotate-slow 12s linear infinite;
}

/* ── 13. HOVER EFFECTS ── */

/* Lift on hover */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(13,110,253,0.15);
}

/* Scale on hover */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-scale:hover {
  transform: scale(1.04);
}

/* Glow on hover */
.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 0 4px rgba(13,110,253,0.2), 0 8px 24px rgba(13,110,253,0.2);
}

/* Shine overlay */
.hover-shine {
  position: relative;
  overflow: hidden;
}

.hover-shine::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 30%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: all 0.6s ease;
}

.hover-shine:hover::after {
  opacity: 1;
  left: 130%;
}

/* Border glow */
.hover-border-glow {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hover-border-glow:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

/* ── 14. STAGGER CHILDREN ── */
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 100ms; }
.stagger-children > *:nth-child(3) { animation-delay: 200ms; }
.stagger-children > *:nth-child(4) { animation-delay: 300ms; }
.stagger-children > *:nth-child(5) { animation-delay: 400ms; }
.stagger-children > *:nth-child(6) { animation-delay: 500ms; }

/* ── 15. SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(90deg, #f0f2f5 25%, #e4e7eb 50%, #f0f2f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── 16. TYPEWRITER CURSOR ── */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #fff;
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 0.8s step-end infinite;
}

/* ── 17. SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0D6EFD, #FF3E41);
  z-index: 99998;
  width: 0%;
  transition: width 0.1s linear;
}

/* ── 18. PARTICLE / GEOMETRIC SHAPES ── */
.shape-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  pointer-events: none;
}

.shape-blob-1 {
  width: 400px;
  height: 400px;
  background: var(--color-primary);
  animation: float 8s ease-in-out infinite;
}

.shape-blob-2 {
  width: 300px;
  height: 300px;
  background: var(--color-accent);
  animation: float 10s ease-in-out infinite reverse;
}

/* ── 19. ANIMATED GRADIENT BORDER ── */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #0D6EFD, #FF3E41, #0D6EFD);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  z-index: -1;
}

/* ── 20. ANIMATED NUMBER COUNTER ── */
.counter-value {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.counter-value.counting {
  opacity: 0.8;
}

/* ── 21. ATTENTION SEEKERS ── */
@keyframes headShake {
  0%    { transform: translateX(0); }
  6.5%  { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50%   { transform: translateX(0); }
}

@keyframes rubberBand {
  0%   { transform: scale3d(1,1,1); }
  30%  { transform: scale3d(1.25, 0.75, 1); }
  40%  { transform: scale3d(0.75, 1.25, 1); }
  50%  { transform: scale3d(1.15, 0.85, 1); }
  65%  { transform: scale3d(0.95, 1.05, 1); }
  75%  { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1,1,1); }
}

.animate-headshake {
  animation: headShake 0.8s ease both;
}

.animate-rubber {
  animation: rubberBand 0.9s ease both;
}

/* ── 22. ENTRANCE ANIMATION ON VISIBILITY ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}