/* Premium interaction layer for Aetheria AI */
body {
  background-color: #f8fafc;
  background-image: radial-gradient(circle, rgba(203, 213, 225, 0.62) 0.8px, transparent 0.8px);
  background-size: 32px 32px;
}

.hero {
  background: radial-gradient(ellipse at 80% 20%, #eef2ff 0%, #f8fafc 62%, #ffffff 100%) !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px -26px rgba(15, 23, 42, 0.45);
}

.card:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.1); }

.btn-primary,
.btn-view {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.btn-view::after {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-view:hover::after { left: 100%; }

.btn-view i {
  margin-left: 0.45rem;
  font-size: 0.86em;
  transition: transform 0.22s ease;
}

.btn-view:hover i {
  transform: translateX(3px);
}

.search-field i { transition: transform 0.2s ease, color 0.2s ease; }
.search-field:focus-within i { transform: translateY(-50%) translateX(4px); color: #0066ff; }
.search-field input:focus { border-color: #0066ff; box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15); }

.filter-chip { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(0, 102, 255, 0.2);
  transform: scale(0);
  animation: rippleAnim 0.4s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); color: #0066ff; } 100% { transform: scale(1); } }
.pulse-animation { animation: pulse 0.3s ease; }

.rating i { transition: transform 0.1s ease, color 0.1s ease; }
.rating i:hover { transform: scale(1.15); color: #f59e0b; }

.card-img { position: relative; overflow: hidden; }
.card-img::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card:hover .card-img::after { opacity: 1; }
.card:hover .card-img img { transform: scale(1.05); }

.footer {
  margin-top: 3rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, #0066ff, #00aa7f, transparent) 1;
}
.socials a { transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.socials a:hover { transform: translateY(-3px); border-color: #0066ff; color: #0066ff; }

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}
.skeleton-card { height: 380px; border-radius: 20px; background: #e2e8f0; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }
.card-grid.is-loading { display: none; }