/*
 * Application-wide styles (non-Tailwind)
 */

html {
  scroll-behavior: smooth;
}

/* Hide default details marker */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details summary::marker { display: none; content: ""; }

/* ── Hero mockup animations ── */

@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(-1.5deg); }
}

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

@keyframes hero-badge-pop {
  0%   { opacity: 0; transform: scale(0.3) rotate(8deg); }
  60%  { transform: scale(1.15) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}

@keyframes hero-notification-slide {
  0%   { opacity: 0; transform: translateX(30px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes hero-cursor-click {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-4px, 2px) scale(0.92); }
  55%      { transform: translate(-4px, 2px) scale(1.05); }
}

@keyframes hero-pulse-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes hero-typing {
  0%, 100% { width: 0; }
  50%      { width: 70%; }
}

.hero-mockup {
  animation: hero-slide-up 0.8s ease-out both,
             hero-float 6s ease-in-out 1s infinite;
}

.hero-badge {
  animation: hero-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
}

.hero-notification {
  animation: hero-notification-slide 0.6s ease-out 1.8s both;
}

.hero-cursor {
  animation: hero-cursor-click 3s ease-in-out 2.5s infinite;
}

.hero-pulse-ring {
  animation: hero-pulse-ring 2s ease-out 3s infinite;
}

.hero-typing-bar {
  animation: hero-typing 4s ease-in-out 2s infinite;
}

/* ── Icon hover effects ── */

.icon-box {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.benefit-card:hover .icon-box {
  transform: translateY(-4px) rotate(-6deg);
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.12);
}

.benefit-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.benefit-card:hover {
  transform: translateY(-2px);
}

/* ── Pain cards stagger ── */

.pain-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pain-card:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.1);
}

/* ── Pricing card hover ── */

.pricing-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
}