/* ==========================================================================
   ADVANCED ANIMATIONS & MICRO-INTERACTIONS ENGINE
   AVY Digital - Modern Light Marketing Agency Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAME DEFINITIONS
   -------------------------------------------------------------------------- */

/* Standard Transitions */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(36px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleUpSpring {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Radiant Ambient Mesh Float */
@keyframes ambientBlob1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

@keyframes ambientBlob2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-40px, 30px) scale(1.15);
  }
  66% {
    transform: translate(25px, -30px) scale(0.9);
  }
}

/* Pulsing Glowing Indicators */
@keyframes pulseGlowTeal {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 191, 160, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(15, 191, 160, 0);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 191, 160, 0);
    transform: scale(1);
  }
}

@keyframes pulseGlowNavy {
  0% {
    box-shadow: 0 0 0 0 rgba(10, 42, 78, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(10, 42, 78, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 42, 78, 0);
  }
}

/* Floating Slow Float */
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(1deg);
  }
}

/* Shimmer Light Sweep */
@keyframes shimmerSweep {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  100% {
    transform: translateX(250%) skewX(-20deg);
  }
}

/* Gradient Stroke Flow */
@keyframes gradientLineFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Rotate Slow */
@keyframes rotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   2. SCROLL REVEAL UTILITIES (INTERSECTION OBSERVER)
   -------------------------------------------------------------------------- */
.reveal,
.reveal-up {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

/* Revealed Active State */
.reveal.revealed,
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

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

/* Stagger Delays */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }
.reveal-delay-7 { transition-delay: 0.56s; }
.reveal-delay-8 { transition-delay: 0.64s; }

/* --------------------------------------------------------------------------
   3. CARD & BUTTON MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

/* Luminous Sheen on Buttons */
.btn {
  overflow: hidden;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%) rotate(25deg);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(120%) rotate(25deg);
}

.btn:active {
  transform: scale(0.96) !important;
}

/* Glowing Pulsing Indicators */
.badge-dot {
  animation: pulseGlowTeal 2.2s infinite;
}

.step-glowing-dot {
  animation: pulseGlowTeal 2.4s infinite;
}

/* Floating Elements */
.floating-element {
  animation: floatY 4.5s ease-in-out infinite;
}

/* Interactive Card Tilt & Ambient Hover Elevation */
.service-card,
.case-study-card,
.portfolio-item-card,
.team-card,
.value-card,
.timeline-step-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  will-change: transform, box-shadow;
}

.service-card:hover,
.portfolio-item-card:hover,
.case-study-card:hover,
.team-card:hover,
.value-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 48px -12px rgba(10, 42, 78, 0.12),
              0 8px 16px -4px rgba(15, 191, 160, 0.08);
}

/* Subtle Shimmer for High-Priority Badges */
.shimmer-badge {
  position: relative;
  overflow: hidden;
}

.shimmer-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  animation: shimmerSweep 3.5s infinite;
  pointer-events: none;
}

/* Dynamic Ambient Glow Behind Hero */
.hero-ambient-blob-1 {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 191, 160, 0.12) 0%, rgba(15, 191, 160, 0) 70%);
  top: -100px;
  right: -50px;
  pointer-events: none;
  animation: ambientBlob1 12s ease-in-out infinite;
  z-index: 0;
}

.hero-ambient-blob-2 {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 42, 78, 0.06) 0%, rgba(10, 42, 78, 0) 70%);
  bottom: -50px;
  left: -50px;
  pointer-events: none;
  animation: ambientBlob2 15s ease-in-out infinite;
  z-index: 0;
}

/* Staggered Navigation Items Entrance */
.nav-panel.is-open .nav-menu-item:nth-child(1) {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.nav-panel.is-open .nav-menu-item:nth-child(2) {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.nav-panel.is-open .nav-menu-item:nth-child(3) {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.nav-panel.is-open .nav-menu-item:nth-child(4) {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.nav-panel.is-open .nav-menu-item:nth-child(5) {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

/* Interactive Cursor Glow Follower */
#cursorGlow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 191, 160, 0.07) 0%, rgba(15, 191, 160, 0) 65%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 800;
  transition: opacity 0.3s ease;
  mix-blend-mode: multiply;
}

/* Brand Logo Momentum Hover */
.brand-logo:hover .logo-icon-svg {
  transform: rotate(-8deg) scale(1.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Responsive Overrides for Mobile & Tablet */
@media (hover: none), (pointer: coarse) {
  #cursorGlow {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hero-ambient-blob-1 {
    width: 340px;
    height: 340px;
    top: -60px;
    right: -30px;
  }

  .hero-ambient-blob-2 {
    width: 300px;
    height: 300px;
    bottom: -30px;
    left: -30px;
  }
}

@media (max-width: 640px) {
  .hero-ambient-blob-1 {
    width: 240px;
    height: 240px;
    opacity: 0.7;
  }

  .hero-ambient-blob-2 {
    width: 200px;
    height: 200px;
    opacity: 0.7;
  }
}