/* css/reviews.css */

#reviews { background: linear-gradient(180deg, var(--color-bg), #1a1508 15%, #1a1508 85%, var(--color-bg)); }
.carousel { overflow: hidden; max-width: 700px; margin: 0 auto; position: relative; }
.c-track { display: flex; transition: transform 0.45s ease; }
.c-slide { min-width: 100%; padding: 0 12px; }
.rev-card { padding: clamp(24px,4vw,36px); text-align: center; }
.rev-avatar {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; border: 2px solid var(--color-primary);
  background: linear-gradient(135deg, #1a1a2e, #0e1a2b); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-primary);
}
.rev-stars { color: var(--color-warning); font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; }
.rev-text { color: #aaa; font-size: var(--text-base); line-height: 1.8; margin-bottom: 14px; font-style: italic; }
.rev-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); }
.rev-role { font-size: 0.78rem; color: #888; }
.c-ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; }
.c-arrow {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1); color: var(--color-text); font-size: 1rem;
  transition: var(--transition-base); display: flex; align-items: center; justify-content: center;
}
.c-arrow:hover { background: var(--color-primary); color: #000; }
.c-dots { display: flex; gap: 7px; }
.c-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; transition: var(--transition-base); }
.c-dot.on { background: var(--color-primary); box-shadow: 0 0 8px rgba(0,218,152,0.5); }

/* Moments */
#moments { background: linear-gradient(180deg, var(--color-bg), #140a18 15%, #140a18 85%, var(--color-bg)); overflow: hidden; }
.mom-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.mom-track { display: flex; gap: 12px; width: max-content; animation: scrollX 40s linear infinite; }
@keyframes scrollX { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.mom-item {
  flex-shrink: 0; width: clamp(140px,18vw,200px); height: clamp(170px,22vw,260px);
  border-radius: 10px; overflow: hidden; position: relative; cursor: pointer;
  transition: transform var(--transition-base); background: linear-gradient(135deg, #1a1a2e, #0e1a2b);
  display: flex; align-items: center; justify-content: center;
}
.mom-item:hover { transform: scale(1.04); }
.mom-over {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  opacity: 0; transition: opacity var(--transition-base); border-radius: 0 0 10px 10px;
}
.mom-item:hover .mom-over { opacity: 1; }
.mom-over span { font-size: 0.78rem; color: var(--color-text); }