/* ============================================================
   ANIMATIONS.CSS — Emir's Developer Portfolio
   All @keyframes, reveal system, and transition utilities
   ============================================================ */

/* ── Typing Animation ──────────────────────────────────────── */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  0%, 100% {
    border-color: var(--accent-cyan);
  }
  50% {
    border-color: transparent;
  }
}

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

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

@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(1deg);
  }
  66% {
    transform: translateY(-5px) rotate(-1deg);
  }
}

/* ── Glow Animations ──────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
  }
}

@keyframes pulse-glow-gold {
  0%, 100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.6);
  }
}

@keyframes pulse-glow-red {
  0%, 100% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.25);
  }
  50% {
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.5);
  }
}

/* ── Slide-In Animations ──────────────────────────────────── */
@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Fade & Scale ──────────────────────────────────────────── */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* ── Drone Animations ──────────────────────────────────────── */
@keyframes drone-fly-in {
  0% {
    opacity: 0;
    transform: translate(var(--dx, 100px), var(--dy, -80px)) scale(0.3);
  }
  60% {
    opacity: 1;
    transform: translate(calc(var(--dx, 100px) * -0.1), calc(var(--dy, -80px) * -0.1)) scale(1.05);
  }
  80% {
    transform: translate(calc(var(--dx, 100px) * 0.03), calc(var(--dy, -80px) * 0.03)) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes drone-hover {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(-8px);
  }
  75% {
    transform: translateY(-3px);
  }
}

@keyframes drone-fly-out {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--dx, -100px) * 0.15), calc(var(--dy, 80px) * 0.15)) scale(0.95);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, -100px), var(--dy, 80px)) scale(0.3);
  }
}

/* ── Scan Beam ─────────────────────────────────────────────── */
@keyframes scan-beam {
  0%, 100% {
    opacity: 0.3;
    height: 20px;
  }
  50% {
    opacity: 0.8;
    height: 40px;
  }
}

@keyframes scan-sweep {
  0% {
    transform: translateY(-5px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
  100% {
    transform: translateY(-5px);
    opacity: 0.6;
  }
}

/* ── Rope & Character ──────────────────────────────────────── */
@keyframes rope-swing {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

@keyframes character-fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(10px) rotate(5deg);
  }
  60% {
    transform: translateY(30px) rotate(-3deg);
  }
  100% {
    transform: translateY(50px) rotate(0deg);
  }
}

@keyframes character-pull {
  0% {
    transform: scaleY(1);
  }
  30% {
    transform: scaleY(0.92) scaleX(1.04);
  }
  60% {
    transform: scaleY(1.03) scaleX(0.98);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}

/* ── Rocket & Particles ────────────────────────────────────── */
@keyframes rocket-boost {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  10% {
    transform: translateY(15px);
  }
  20% {
    transform: translateY(20px);
  }
  30% {
    transform: translateY(12px);
  }
  100% {
    transform: translateY(-200vh);
    opacity: 1;
  }
}

@keyframes particle-trail {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.6) translateY(15px);
  }
  100% {
    opacity: 0;
    transform: scale(0) translateY(30px);
  }
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px, 20px), var(--py, -20px)) scale(0);
  }
}

/* ── Binary Rain ───────────────────────────────────────────── */
@keyframes binary-rain {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes binary-fade {
  0%, 100% {
    opacity: 0.05;
  }
  50% {
    opacity: 0.15;
  }
}

/* ── Medical Float ─────────────────────────────────────────── */
@keyframes medical-float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -15px) rotate(5deg);
  }
  50% {
    transform: translate(-5px, -25px) rotate(-3deg);
  }
  75% {
    transform: translate(15px, -10px) rotate(7deg);
  }
}

@keyframes medical-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.2;
  }
}

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

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

@keyframes shimmer-border {
  0% {
    border-color: rgba(0, 212, 255, 0.15);
  }
  50% {
    border-color: rgba(0, 212, 255, 0.4);
  }
  100% {
    border-color: rgba(0, 212, 255, 0.15);
  }
}

/* ── Circuit Trace ─────────────────────────────────────────── */
@keyframes circuit-trace {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.3;
  }
}

/* ── Node Pulse (AI theme) ─────────────────────────────────── */
@keyframes node-pulse {
  0%, 100% {
    r: 3;
    opacity: 0.4;
  }
  50% {
    r: 5;
    opacity: 0.9;
  }
}

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

@keyframes rotate-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* ── Hexagon Pulse (General theme) ─────────────────────────── */
@keyframes hex-pulse {
  0%, 100% {
    opacity: 0.05;
    transform: scale(1);
  }
  50% {
    opacity: 0.12;
    transform: scale(1.05);
  }
}

/* ── Wave ──────────────────────────────────────────────────── */
@keyframes wave {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
}

/* ============================================================
   REVEAL SYSTEM — Intersection Observer Integration
   ============================================================ */

/* Base reveal state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Directional reveals */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

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

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

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

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Fade only reveal */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.reveal-fade.active {
  opacity: 1;
}

/* ── Staggered Delay Utilities ─────────────────────────────── */
.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}

.delay-6 {
  transition-delay: 0.6s;
}

.delay-7 {
  transition-delay: 0.7s;
}

.delay-8 {
  transition-delay: 0.8s;
}

.delay-9 {
  transition-delay: 0.9s;
}

.delay-10 {
  transition-delay: 1.0s;
}

/* ── Animation Duration Utilities ──────────────────────────── */
.duration-fast {
  animation-duration: 0.3s;
}

.duration-normal {
  animation-duration: 0.6s;
}

.duration-slow {
  animation-duration: 1s;
}

.duration-very-slow {
  animation-duration: 2s;
}

/* ── Animation Utility Classes ─────────────────────────────── */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

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

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

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

.animate-shimmer {
  animation: shimmer 3s linear infinite;
}

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

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

.animate-slide-in-up {
  animation: slide-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in-left {
  animation: slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fade-in 0.8s ease forwards;
}

.animate-scale-in {
  animation: scale-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Hover Transition Utilities ────────────────────────────── */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-5px);
}

.hover-glow-cyan {
  transition: box-shadow 0.4s ease;
}

.hover-glow-cyan:hover {
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.35);
}

.hover-glow-gold {
  transition: box-shadow 0.4s ease;
}

.hover-glow-gold:hover {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-float,
  .animate-float-reverse,
  .animate-pulse-glow,
  .animate-pulse-glow-gold,
  .animate-shimmer,
  .animate-gradient,
  .animate-rotate-slow {
    animation: none;
  }
}