/**
 * Animations CSS
 * Inter Broad Template
 * Advanced animations and effects
 */

/* ============================================
   CSS Variables for Animations
   ============================================ */
:root {
  --animation-duration: 0.6s;
  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-timing-smooth: cubic-bezier(0.4, 0, 0, 1);
  --parallax-perspective: 1000px;
}

/* ============================================
   Base Animation Utilities
   ============================================ */

/* Will-change for performance */
.will-animate {
  will-change: transform, opacity;
}

/* GPU acceleration */
.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ============================================
   Scroll Reveal Classes
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--animation-timing),
              transform 0.8s var(--animation-timing);
}

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

.scroll-reveal[data-delay="100"] { transition-delay: 0.1s; }
.scroll-reveal[data-delay="200"] { transition-delay: 0.2s; }
.scroll-reveal[data-delay="300"] { transition-delay: 0.3s; }
.scroll-reveal[data-delay="400"] { transition-delay: 0.4s; }
.scroll-reveal[data-delay="500"] { transition-delay: 0.5s; }

/* ============================================
   Text Animation Styles
   ============================================ */

/* Split text character styles */
.char {
  display: inline-block;
  transform-origin: bottom;
}

.word {
  display: inline-block;
  overflow: hidden;
}

.line {
  display: block;
  overflow: hidden;
}

/* Text reveal wrapper */
.text-reveal-wrapper {
  overflow: hidden;
  display: inline-block;
}

/* Gradient text animation */
.gradient-text-animate {
  background: linear-gradient(
    90deg,
    var(--primary-color, #0099FF) 0%,
    var(--secondary-color, #FF6600) 50%,
    var(--primary-color, #0099FF) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 3s linear infinite;
}

@keyframes gradientFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Typewriter cursor */
.typewriter {
  border-right: 2px solid var(--primary-color, #0099FF);
  animation: cursorBlink 0.8s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--primary-color, #0099FF); }
}

/* Text highlight underline */
.highlight-animate {
  position: relative;
  display: inline-block;
}

.highlight-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--primary-color, #0099FF);
  opacity: 0.2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--animation-timing);
  z-index: -1;
}

.highlight-animate:hover .highlight-underline,
.highlight-animate.active .highlight-underline {
  transform: scaleX(1);
}

/* ============================================
   Image Reveal Styles
   ============================================ */

/* Clip path reveal container */
.clip-reveal,
.slide-reveal,
.zoom-reveal,
.rotate-reveal,
.mask-reveal {
  overflow: hidden;
}

/* Slide reveal overlay */
.slide-reveal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color, #0099FF);
  z-index: 2;
}

/* Image parallax container */
.img-parallax {
  overflow: hidden;
  position: relative;
}

.img-parallax img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

/* Image hover effects */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform 0.5s var(--animation-timing);
}

.img-hover-zoom:hover img {
  transform: scale(1.1);
}

/* Grayscale to color */
.img-hover-color img {
  filter: grayscale(100%);
  transition: filter 0.5s var(--animation-timing);
}

.img-hover-color:hover img {
  filter: grayscale(0%);
}

/* Caption reveal */
.caption-reveal {
  position: relative;
  overflow: hidden;
}

.caption-reveal .caption,
.caption-reveal figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  transform: translateY(100%);
  transition: transform 0.4s var(--animation-timing);
}

.caption-reveal:hover .caption,
.caption-reveal:hover figcaption {
  transform: translateY(0);
}

/* ============================================
   Parallax Styles
   ============================================ */

/* Parallax section */
.parallax-section {
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Parallax layers */
[data-parallax] {
  will-change: transform;
}

/* Floating elements */
.floating {
  animation: float 3s ease-in-out infinite;
}

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

.floating-slow {
  animation: float 5s ease-in-out infinite;
}

.floating-fast {
  animation: float 2s ease-in-out infinite;
}

/* ============================================
   Tilt & 3D Effect Styles
   ============================================ */

/* Tilt container */
[data-tilt],
[data-tilt-card],
[data-tilt-image] {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--animation-timing);
}

/* Spotlight effect overlay */
.spotlight-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

.spotlight:hover .spotlight-effect {
  opacity: 1;
}

/* Glow effect */
.glow-on-hover {
  transition: box-shadow 0.3s var(--animation-timing);
}

.glow-on-hover:hover {
  box-shadow: 0 0 20px var(--primary-color, #0099FF),
              0 0 40px rgba(0, 153, 255, 0.4),
              0 0 60px rgba(0, 153, 255, 0.2);
}

/* 3D Card flip */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Layered 3D effect */
.layered-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.layered-3d [data-layer] {
  transition: transform 0.3s var(--animation-timing);
}

/* ============================================
   Magnetic Effect Styles
   ============================================ */

/* Magnetic buttons */
.magnetic,
.btn-magnetic,
[data-magnetic] {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.1s var(--animation-timing);
}

/* Magnetic link underline */
.magnetic-link {
  position: relative;
  display: inline-block;
}

.magnetic-underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-color, #0099FF);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--animation-timing);
}

.magnetic-link:hover .magnetic-underline {
  transform: scaleX(1);
  transform-origin: left;
}

/* Custom cursor styles */
.magnetic-cursor,
.magnetic-cursor-inner {
  pointer-events: none;
  mix-blend-mode: difference;
}

/* ============================================
   Scroll Progress Indicator
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-color, #0099FF);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 9999;
}

/* ============================================
   Button Hover Animations
   ============================================ */

/* Ripple effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-ripple:hover::after {
  width: 300px;
  height: 300px;
}

/* Shine effect */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.btn-shine:hover::before {
  left: 100%;
}

/* Border animation */
.btn-border-animate {
  position: relative;
  background: transparent;
  border: 2px solid var(--primary-color, #0099FF);
  overflow: hidden;
}

.btn-border-animate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color, #0099FF);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--animation-timing);
  z-index: -1;
}

.btn-border-animate:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============================================
   Card Hover Animations
   ============================================ */

/* Card lift effect */
.card-lift {
  transition: transform 0.3s var(--animation-timing),
              box-shadow 0.3s var(--animation-timing);
}

.card-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Card border glow */
.card-glow {
  position: relative;
}

.card-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    45deg,
    var(--primary-color, #0099FF),
    var(--secondary-color, #FF6600),
    var(--primary-color, #0099FF)
  );
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s;
  animation: borderRotate 3s linear infinite;
}

.card-glow:hover::before {
  opacity: 1;
}

@keyframes borderRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   Loading & Skeleton Animations
   ============================================ */

/* Pulse animation */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   Icon Animations
   ============================================ */

/* Rotate icon */
.icon-rotate {
  transition: transform 0.3s var(--animation-timing);
}

.icon-rotate:hover {
  transform: rotate(360deg);
}

/* Bounce icon */
.icon-bounce:hover {
  animation: iconBounce 0.5s var(--animation-timing-bounce);
}

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

/* Shake icon */
.icon-shake:hover {
  animation: iconShake 0.5s ease-in-out;
}

@keyframes iconShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ============================================
   Section Transitions
   ============================================ */

/* Fade section */
.section-fade {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--animation-timing),
              transform 0.8s var(--animation-timing);
}

.section-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale section */
.section-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s var(--animation-timing),
              transform 0.8s var(--animation-timing);
}

.section-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   Counter Animation Styles
   ============================================ */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   Stagger Animation Delays
   ============================================ */
.stagger-item:nth-child(1) { animation-delay: 0s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.2s; }
.stagger-item:nth-child(4) { animation-delay: 0.3s; }
.stagger-item:nth-child(5) { animation-delay: 0.4s; }
.stagger-item:nth-child(6) { animation-delay: 0.5s; }
.stagger-item:nth-child(7) { animation-delay: 0.6s; }
.stagger-item:nth-child(8) { animation-delay: 0.7s; }
.stagger-item:nth-child(9) { animation-delay: 0.8s; }
.stagger-item:nth-child(10) { animation-delay: 0.9s; }

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .floating,
  .floating-slow,
  .floating-fast {
    animation: none;
  }
}