/* ============================================
   NOTES+ WEBSITE — ANIMATIONS
   ============================================ */

/* ---------- Keyframes ---------- */

/* Pulsing dot on hero badge */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/* Phone float */
@keyframes phone-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Expanding rings behind phone */
@keyframes ring-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.08;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Soft shimmer on glow elements */
@keyframes glow-breathe {
  0%, 100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.2;
  }
}

/* Hero text entrance */
@keyframes hero-text-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero visual entrance */
@keyframes hero-visual-up {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fade in from bottom */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in */
@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Gradient text shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Button glow pulse */
@keyframes btn-glow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(255, 204, 0, 0.15),
      0 4px 15px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 35px rgba(255, 204, 0, 0.25),
      0 4px 15px rgba(0, 0, 0, 0.3);
  }
}

/* Particle drift (for decorative elements) */
@keyframes drift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -15px) rotate(2deg);
  }
  50% {
    transform: translate(-5px, -25px) rotate(-1deg);
  }
  75% {
    transform: translate(-15px, -10px) rotate(1deg);
  }
}

/* Spin (for loading or icons) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Animation Classes ---------- */

/* Phone floating animation */
.anim-float {
  animation: phone-float 5s ease-in-out infinite;
}

/* Hero entrance animations */
.anim-hero-text {
  animation: hero-text-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-hero-text-delay-1 {
  opacity: 0;
  animation: hero-text-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.anim-hero-text-delay-2 {
  opacity: 0;
  animation: hero-text-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.anim-hero-text-delay-3 {
  opacity: 0;
  animation: hero-text-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.anim-hero-text-delay-4 {
  opacity: 0;
  animation: hero-text-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.anim-hero-visual {
  animation: hero-visual-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  opacity: 0;
}

/* Glow breathing */
.anim-glow {
  animation: glow-breathe 4s ease-in-out infinite;
}

/* Button glow */
.anim-btn-glow {
  animation: btn-glow 3s ease-in-out infinite;
}

/* Shimmer text effect */
.anim-shimmer {
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ---------- Hover micro-interactions ---------- */

/* Card tilt on hover (subtle) */
.glass-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover .card-icon {
  transform: scale(1.1) rotate(-3deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-icon {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Link underline slide */
.link-slide {
  position: relative;
  display: inline-block;
}

.link-slide::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-yellow);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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