/* Shared UI enhancements for InfiniteForge tools */
/* Glassmorphism card styles */
.card-glass {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease;
}

/* Card hover effect */
.card-glass:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(2,6,23,0.12);
}

/* Accent buttons */
.btn-accent {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
}

.btn-accent:hover { transform: translateY(-4px); }
.btn-accent:active { transform: translateY(-2px); }

/* Subtle gradient backgrounds */
.bg-soft-gradient {
  background: linear-gradient(135deg, rgba(243,244,246,1) 0%, rgba(230,235,245,1) 100%);
}

/* Focus and accessibility */
.btn:focus, .gen-input:focus, .gen-output:focus, .form-select:focus {
  outline: 3px solid rgba(16,185,129,0.15);
  outline-offset: 2px;
}

/* Animate on scroll entry */
[data-animate] { opacity: 0; transform: translateY(8px); transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .45s ease; }
[data-animate].in-view { opacity: 1; transform: translateY(0); }

/* Buttons ripple (touch) */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple .6s linear; pointer-events: none; background: rgba(255,255,255,0.4); }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Cool gradient text effect */
.gradient-text { background: linear-gradient(90deg, #10b981 0%, #06b6d4 50%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Result card subtle glow */
.result-card { transition: transform .25s ease, box-shadow .25s ease; border-radius: 10px; }
.result-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(2,6,23,0.12); }

/* Header hero punch */
.hero-cta { padding: 36px; border-radius: 16px; background: linear-gradient(90deg, rgba(16,185,129,0.08), rgba(6,182,212,0.06)); border: 1px solid rgba(16,185,129,0.06);} 

/* Utility */
.fade-in { animation: fadeIn .6s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }

/* Event progression chip */
.chips { display:flex; gap:8px; align-items:center; }
.chip { background: rgba(0,0,0,0.06); padding:6px 10px; border-radius:999px; font-weight: 600; }

/* Small improvements for forms */
.gen-input, textarea.gen-input { transition: box-shadow .15s ease, border-color .15s ease; }
.gen-input.focused { box-shadow: 0 8px 18px rgba(2,6,23,0.06); border-color: rgba(16,185,129,0.45); }

/* Utility for card group spacing */
.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; }

/* Motion reduce fallback */
@media (prefers-reduced-motion: reduce) { [data-animate], .btn-accent, .card-glass, .result-card { transition: none; transform: none; } }