/* =============================================
   MakeRepeater LP - Animations & Effects
   ============================================= */

/* --- Particle Background --- */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10vh) scale(1);
  }
}

/* --- Floating Animation for Cards --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- Shimmer Effect --- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-effect {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245,166,35,0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* --- Typing Cursor --- */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  color: var(--mr-yellow);
  animation: blink-cursor 0.8s infinite;
}

/* --- Counter Animation --- */
.counter-animate {
  display: inline-block;
  transition: all 0.5s ease;
}

/* --- Glow Pulse for Highlight Cards --- */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(245, 166, 35, 0.4);
  }
}

.ai-card--highlight {
  animation: glow-pulse 3s infinite;
}

/* --- Slide In Animations --- */
@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);
  }
}

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

/* --- Scale Bounce --- */
@keyframes scale-bounce {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Ripple Effect on Buttons --- */
.ee-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.ee-btn:active::after {
  transform: scale(2);
  opacity: 1;
  transition: 0s;
}

/* --- Hover Lift Effect --- */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* --- Smooth Reveal on Scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* --- Line Draw Animation for Connectors --- */
.step__connector i {
  animation: arrow-bounce 1.5s ease-in-out infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

/* --- Comparison table row highlight --- */
.comparison__table tbody tr {
  transition: var(--transition);
}

.comparison__table tbody tr:hover {
  background: var(--mr-yellow-light);
}

.comparison__table tbody tr.comparison__table-row--visible {
  animation: slide-in-up 0.5s ease forwards;
}

/* --- Pricing card hover glow --- */
.pricing-card--popular::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--mr-gradient);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.3;
  transition: var(--transition);
}

.pricing-card--popular:hover::before {
  opacity: 0.5;
}

/* --- FAQ open animation --- */
.faq__answer {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  opacity: 0;
}

.faq__item.active .faq__answer {
  opacity: 1;
}

/* --- Interactive iframe preview pulse --- */
.feature-block__iframe-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 0;
  z-index: 5;
  transition: var(--transition);
}

.feature-block__iframe-container:hover::before {
  border-color: var(--mr-yellow);
}

/* --- Number Count Up Glow --- */
.pricing-card__amount {
  transition: var(--transition);
}

.pricing-card:hover .pricing-card__amount {
  text-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
}

/* --- Hero Title Entrance --- */
.hero__title {
  animation: hero-title-enter 1s ease-out;
}

@keyframes hero-title-enter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 12px 28px rgba(232, 77, 66, 0.28);
  }
  50% {
    box-shadow: 0 18px 40px rgba(232, 77, 66, 0.42);
  }
}

.comparison__table tbody tr:hover {
  background: var(--mr-yellow-light);
}

/* --- Gradient text shimmer for hero --- */
.hero__title-line2 em {
  background-size: 300% 100%;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Tooltip on hover --- */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--mr-black);
  color: var(--mr-white);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* --- Magnetic Button Effect Placeholder --- */
.ee-btn--magnetic {
  will-change: transform;
}

/* --- Smooth Section Transitions --- */
section {
  position: relative;
}

/* --- Loading skeleton for iframes --- */
.feature-block__iframe-container {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e8e8e8 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.feature-block__iframe-container:has(iframe:not([src=""])) {
  animation: none;
  background: #fff;
}