/* ==========================================================================
   Liquid Motion, Aurora Atmospheric Drifts & Easing Curves
   ========================================================================== */

:root {
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered Scroll Reveals */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* Filter Card Stagger Transition */
.work-card.filtering-out {
  opacity: 0;
  transform: scale(0.96) translateY(10px);
}

.work-card.filtering-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ==========================================================================
   Aurora Blob Drift Keyframes (10% Atmospheric Accent)
   ========================================================================== */

@keyframes aurora-drift-1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(60px, 40px) scale(1.15);
    opacity: 0.95;
  }
  100% {
    transform: translate(-30px, 70px) scale(0.95);
    opacity: 0.65;
  }
}

@keyframes aurora-drift-2 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-70px, -50px) scale(1.2);
    opacity: 0.9;
  }
  100% {
    transform: translate(40px, -30px) scale(1.05);
    opacity: 0.65;
  }
}

@keyframes aurora-drift-3 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(50px, -60px) scale(1.1);
    opacity: 0.85;
  }
  100% {
    transform: translate(-40px, 30px) scale(1.02);
    opacity: 0.55;
  }
}

/* Horizontal Beam Keyframe */
@keyframes glow-horizontal-beam {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scaleX(0.95);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scaleX(1.06);
  }
}

.hero-light-streak {
  animation: glow-horizontal-beam 9s ease-in-out infinite;
}

/* ==========================================================================
   Continuous 3D Floating Effect for Photo
   ========================================================================== */

@keyframes portrait-float-glow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    box-shadow: 0 35px 85px -10px rgba(0, 0, 0, 0.95), inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 0 50px rgba(225, 29, 72, 0.25);
  }
  50% {
    transform: translateY(-16px) rotate(0.8deg);
    box-shadow: 0 45px 100px -10px rgba(0, 0, 0, 0.98), inset 0 1px 0 0 rgba(255, 255, 255, 0.55), 0 0 75px rgba(244, 63, 94, 0.4);
  }
}

/* Liquid Glass Subtle Shimmer on Hero Card */
@keyframes liquid-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}