/* ============================================
   POLISH.CSS — 21st.dev-inspired visual effects
   Drop this into any StayFasted landing page
   ============================================ */

/* ── Grain texture overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ── Animated gradient borders on cards ── */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-gradient {
  to { --angle: 360deg; }
}

/* Apply to any card on hover: animated purple gradient border */
.feature-card:hover,
.pricing-card:hover,
.ai-card:hover,
.unique-card:hover,
.trust-card:hover,
.faq-item:hover,
.feedback-card:hover {
  border-color: transparent;
  background-image: linear-gradient(var(--bg-card, #1A1A1A), var(--bg-card, #1A1A1A)),
    conic-gradient(from var(--angle, 0deg), transparent 40%, rgba(124,58,237,0.5) 50%, rgba(159,103,255,0.5) 55%, transparent 65%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: rotate-gradient 4s linear infinite;
}

/* ── Glass morphism enhancement for nav ── */
.nav.scrolled,
.nav {
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

/* ── Card hover lift ── */
.feature-card,
.pricing-card,
.ai-card,
.unique-card,
.trust-card,
.feedback-card,
.phone-wrap {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover,
.ai-card:hover,
.unique-card:hover,
.trust-card:hover,
.feedback-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(124, 58, 237, 0.06);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(124, 58, 237, 0.1);
}

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

/* ── Animated gradient on hero headline ── */
@keyframes shimmer-text {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(
    135deg,
    #F5F5F5 0%,
    #9F67FF 25%,
    #7C3AED 50%,
    #9F67FF 75%,
    #F5F5F5 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 6s ease-in-out infinite;
}

/* ── Button glow pulse ── */
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }
  50% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.5), 0 0 60px rgba(124, 58, 237, 0.2); }
}

.nav-cta,
.btn-primary,
.cta-btn,
.pricing-btn-primary,
.form-btn,
[type="submit"].btn-primary {
  animation: btn-glow 3s ease-in-out infinite;
}

.nav-cta:hover,
.btn-primary:hover,
.cta-btn:hover,
.pricing-btn-primary:hover,
.form-btn:hover {
  animation: none;
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.6), 0 0 80px rgba(124, 58, 237, 0.2);
}

/* ── Section label shimmer ── */
.section-label,
.feature-tag {
  position: relative;
  overflow: hidden;
}

.section-label::after,
.feature-tag::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: label-shimmer 4s ease-in-out infinite;
}

@keyframes label-shimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* ── Phone mockup glow pulse ── */
.phone-wrap,
.phone-frame {
  position: relative;
}

.phone-glow {
  animation: phone-pulse 4s ease-in-out infinite;
}

@keyframes phone-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* ── Smooth scroll reveal with stagger ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stagger children */
.reveal.visible .feature-card:nth-child(1),
.reveal.visible .ai-card:nth-child(1),
.reveal.visible .unique-card:nth-child(1) { transition-delay: 0.05s; }
.reveal.visible .feature-card:nth-child(2),
.reveal.visible .ai-card:nth-child(2),
.reveal.visible .unique-card:nth-child(2) { transition-delay: 0.1s; }
.reveal.visible .feature-card:nth-child(3),
.reveal.visible .ai-card:nth-child(3),
.reveal.visible .unique-card:nth-child(3) { transition-delay: 0.15s; }
.reveal.visible .feature-card:nth-child(4) { transition-delay: 0.2s; }

/* ── Timeline dot pulse (roadmap) ── */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
}

.quarter-dot {
  animation: dot-pulse 2.5s ease-in-out infinite;
}

/* ── Pricing popular card border glow ── */
.pricing-card.popular {
  border-color: transparent;
  background-image: linear-gradient(var(--bg-card, #1A1A1A), var(--bg-card, #1A1A1A)),
    linear-gradient(135deg, rgba(124,58,237,0.6), rgba(159,103,255,0.3), rgba(124,58,237,0.6));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ── Quick btn hover (roadmap feedback) ── */
.quick-btn:hover {
  transform: translateX(4px);
  border-color: rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.04);
}

/* ── Focus-visible for accessibility ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Smooth image loading ── */
img {
  transition: opacity 0.4s ease;
}

img[loading="lazy"] {
  opacity: 0;
}

img.loaded,
img[loading="lazy"]:not([data-src]) {
  opacity: 1;
}

/* ── Selection color ── */
::selection {
  background: rgba(124, 58, 237, 0.3);
  color: #F5F5F5;
}

/* ── Scrollbar styling (webkit) ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0F0F0F;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.4);
}

/* ── Reduce motion for accessibility ── */
@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; }
}