/* ============================================================
   Samuel Krompasky — Animations CSS
   ============================================================ */

/* ----------------------------------------------------------
   1. Background Pulse Animations
   ---------------------------------------------------------- */
@keyframes bg-pulse-1 {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  33% {
    transform: scale(1.1) translate(2%, -3%);
    opacity: 0.8;
  }
  66% {
    transform: scale(0.95) translate(-1%, 2%);
    opacity: 0.9;
  }
}

@keyframes bg-pulse-2 {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: scale(1.08) translate(-2%, 3%);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.02) translate(1%, -1%);
    opacity: 0.9;
  }
}

/* ----------------------------------------------------------
   2. Logo / SVG Animations
   ---------------------------------------------------------- */

/* Drawing effect on first load */
@keyframes draw-stroke {
  from {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Outer swoosh pulse */
@keyframes swoosh-outer-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 4px 12px rgba(0, 128, 168, 0.25));
  }
  50% {
    transform: scale(1.015) rotate(0.5deg);
    filter: drop-shadow(0 6px 18px rgba(0, 128, 168, 0.35));
  }
}

/* Inner swoosh pulse (opposite phase) */
@keyframes swoosh-inner-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.85;
  }
  50% {
    transform: scale(0.988) rotate(-0.5deg);
    opacity: 1;
  }
}

/* Subtle float for the entire logo container */
@keyframes logo-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Shimmer effect for logo glow */
@keyframes logo-glow {
  0%, 100% {
    filter: drop-shadow(0 20px 60px rgba(0, 128, 168, 0.15));
  }
  50% {
    filter: drop-shadow(0 20px 80px rgba(0, 128, 168, 0.30));
  }
}

/* ----------------------------------------------------------
   3. UI Element Animations
   ---------------------------------------------------------- */

/* Pulsing dot (availability indicator, hero eyebrow) */
@keyframes dot-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* Green LED pulse for availability dot */
@keyframes led-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 5px 1px rgba(34, 197, 94, 0.6);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 10px 3px rgba(34, 197, 94, 0.2);
  }
}

/* Scroll hint bounce */
@keyframes scroll-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(6px);
    opacity: 0.9;
  }
}

/* Success animation pop */
@keyframes success-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Success checkmark draw */
@keyframes check-draw {
  from {
    stroke-dashoffset: 60;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Spin (loading) */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Counter number roll-up (handled via JS, this is the transition style) */
@keyframes counter-pop {
  0% {
    transform: scale(0.8) translateY(10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ----------------------------------------------------------
   4. Page Transition
   ---------------------------------------------------------- */
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes page-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.page-transition-in {
  animation: page-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ----------------------------------------------------------
   5. Button Ripple
   ---------------------------------------------------------- */
@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.5;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.btn-ripple {
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  pointer-events: none;
  animation: ripple 0.5s linear;
}

/* ----------------------------------------------------------
   6. Card Shimmer (hover enhancement)
   ---------------------------------------------------------- */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ----------------------------------------------------------
   7. Stagger reveal for grids
   ---------------------------------------------------------- */
.skills__grid .skill-card:nth-child(1) { transition-delay: 0ms; }
.skills__grid .skill-card:nth-child(2) { transition-delay: 80ms; }
.skills__grid .skill-card:nth-child(3) { transition-delay: 160ms; }
.skills__grid .skill-card:nth-child(4) { transition-delay: 240ms; }
.skills__grid .skill-card:nth-child(5) { transition-delay: 320ms; }
.skills__grid .skill-card:nth-child(6) { transition-delay: 400ms; }

.services__grid .service-card:nth-child(1) { transition-delay: 0ms; }
.services__grid .service-card:nth-child(2) { transition-delay: 80ms; }
.services__grid .service-card:nth-child(3) { transition-delay: 160ms; }
.services__grid .service-card:nth-child(4) { transition-delay: 240ms; }
.services__grid .service-card:nth-child(5) { transition-delay: 320ms; }
.services__grid .service-card:nth-child(6) { transition-delay: 400ms; }

/* ----------------------------------------------------------
   8. Nav Transition (transparent -> solid)
   ---------------------------------------------------------- */
.nav {
  transition: background-color 0.2s ease,
              box-shadow 0.2s ease,
              transform 0.4s ease-in-out;
}

/* ----------------------------------------------------------
   9. Hero Content Entrance Animations
   ---------------------------------------------------------- */

/* Eyebrow: hidden until JS adds .is-visible (after typewriter) */
.hero__eyebrow {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__eyebrow.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Title: hidden until JS typewriter activates it */
.hero__title {
  opacity: 0;
  transform: none;
}

/* Subtitle & actions: hidden until JS adds .is-visible after typewriter */
.hero__subtitle,
.hero__actions {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__subtitle.is-visible,
.hero__actions.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blinking typewriter cursor */
.typewriter-cursor {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 300;
  margin-left: 2px;
  animation: cursor-blink 0.75s step-end infinite;
}
.typewriter-cursor.is-done {
  display: none;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ----------------------------------------------------------
   10. Timeline Step Animation
   ---------------------------------------------------------- */
.timeline-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-step:nth-child(1) { transition-delay: 0ms; }
.timeline-step:nth-child(2) { transition-delay: 100ms; }
.timeline-step:nth-child(3) { transition-delay: 200ms; }
.timeline-step:nth-child(4) { transition-delay: 300ms; }

/* ----------------------------------------------------------
   11. Stat counter animation
   ---------------------------------------------------------- */
.stat-number {
  transition: opacity 0.3s ease;
}

.stat-item.counting .stat-number {
  animation: counter-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ----------------------------------------------------------
   12. Teal underline link hover
   ---------------------------------------------------------- */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-base);
}

.link-underline:hover::after {
  width: 100%;
}

/* ----------------------------------------------------------
   13. Glow pulse on CTA buttons
   ---------------------------------------------------------- */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 8px 25px rgba(0, 128, 168, 0.25);
  }
  50% {
    box-shadow: 0 8px 35px rgba(0, 128, 168, 0.5);
  }
}

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

.btn--primary:hover {
  animation: none;
}

/* ----------------------------------------------------------
   14. Prefers-reduced-motion
   ---------------------------------------------------------- */
@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;
  }

  .hero__visual,
  .hero__content > * {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}