/* ============================================================
   ReadIt Stories — GSAP Animations & Micro-interactions CSS
   Page reveals, skeleton loading, section transitions
   ============================================================ */

/* ── GSAP INITIAL STATES ── */

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(32px);
}

[data-animate="fade-in"] {
  opacity: 0;
}

[data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.92);
}

[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-32px);
}

[data-animate="slide-right"] {
  opacity: 0;
  transform: translateX(32px);
}

.rs-animated { opacity: 1 !important; transform: none !important; }

/* ── SECTION HEADERS ── */

.rs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--rs-space-7);
}

.rs-section-title {
  font-family: var(--rs-font-display);
  font-size: var(--rs-text-2xl);
  font-weight: var(--rs-weight-bold);
  color: var(--rs-text);
  letter-spacing: -0.02em;
  margin: 0;
  position: relative;
}

.rs-section-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--rs-gradient);
  border-radius: var(--rs-radius-full);
}

.rs-view-all {
  display: flex;
  align-items: center;
  gap: var(--rs-space-1);
  font-size: var(--rs-text-sm);
  font-weight: var(--rs-weight-semibold);
  color: var(--rs-primary);
  text-decoration: none;
  transition: var(--rs-ease-fast);
  flex-shrink: 0;
}
.rs-view-all:hover { color: var(--rs-secondary); gap: var(--rs-space-2); }
.rs-view-all svg { transition: transform 0.2s ease; }
.rs-view-all:hover svg { transform: translateX(3px); }

/* ── SECTIONS ── */

.rs-section { padding: var(--rs-space-12) 0; position: relative; }
.rs-section-sm { padding: var(--rs-space-9) 0; }

/* ── SKELETON LOADING ── */

.rs-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 400% 100%;
  animation: rs-skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--rs-radius-sm);
}

@keyframes rs-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.rs-search-skeleton { animation-delay: calc(var(--i, 0) * 0.1s); }
.rs-search-skeleton:nth-child(2) { --i: 1; }
.rs-search-skeleton:nth-child(3) { --i: 2; }

/* Card skeleton */
.rs-card-skeleton {
  background: var(--rs-card);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  overflow: hidden;
}

.rs-card-skeleton .rs-skeleton-thumb {
  aspect-ratio: 4/3;
  width: 100%;
}

.rs-card-skeleton .rs-skeleton-body {
  padding: var(--rs-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-3);
}

.rs-skeleton-line {
  height: 12px;
  border-radius: var(--rs-radius-sm);
}
.rs-skeleton-line-sm { height: 10px; width: 60%; }
.rs-skeleton-line-lg { height: 16px; }

/* ── PAGE TRANSITIONS ── */

.rs-page-enter { animation: rs-page-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes rs-page-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── STAGGER CHILDREN ── */

.rs-stagger > * {
  opacity: 0;
  transform: translateY(20px);
}

.rs-stagger.rs-stagger-visible > * {
  animation: rs-stagger-item 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
}

.rs-stagger.rs-stagger-visible > *:nth-child(1)  { animation-delay: 0ms; }
.rs-stagger.rs-stagger-visible > *:nth-child(2)  { animation-delay: 60ms; }
.rs-stagger.rs-stagger-visible > *:nth-child(3)  { animation-delay: 120ms; }
.rs-stagger.rs-stagger-visible > *:nth-child(4)  { animation-delay: 180ms; }
.rs-stagger.rs-stagger-visible > *:nth-child(5)  { animation-delay: 240ms; }
.rs-stagger.rs-stagger-visible > *:nth-child(6)  { animation-delay: 300ms; }
.rs-stagger.rs-stagger-visible > *:nth-child(7)  { animation-delay: 360ms; }
.rs-stagger.rs-stagger-visible > *:nth-child(8)  { animation-delay: 420ms; }

@keyframes rs-stagger-item {
  to { opacity: 1; transform: translateY(0); }
}

/* ── RIPPLE EFFECT ON BUTTONS ── */

.rs-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: rs-ripple 0.6s linear;
  pointer-events: none;
}

@keyframes rs-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ── NUMBER COUNTER ANIMATION ── */

.rs-counter { display: inline-block; }

/* ── HOVER GLOW EFFECT ── */

.rs-hover-glow {
  position: relative;
}

.rs-hover-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--rs-gradient);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(8px);
}

.rs-hover-glow:hover::before { opacity: 0.4; }

/* ── TRUNCATION ── */

.truncate-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.truncate-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.truncate-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* ── FOCUS VISIBLE ── */

:focus-visible {
  outline: 2px solid var(--rs-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) { outline: none; }

/* ── SCROLL REVEAL ── */

.rs-reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
.rs-reveal:not(.rs-visible) { opacity: 0; transform: translateY(24px); }

/* ── SPIN ── */

.rs-spin { animation: rs-spin 1s linear infinite; }

/* ── EMPTY STATES ── */

.rs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--rs-space-14) var(--rs-space-6);
  text-align: center;
  gap: var(--rs-space-4);
}

.rs-empty-icon { font-size: 56px; opacity: 0.5; }
.rs-empty-title { font-size: var(--rs-text-xl); font-weight: var(--rs-weight-bold); color: var(--rs-text); }
.rs-empty-desc { font-size: var(--rs-text-sm); color: var(--rs-text-faint); max-width: 360px; }

/* ── LOGIN GATE ── */

.rs-login-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

.rs-login-gate a { color: var(--rs-primary); }

/* ── WIDGET STYLES ── */

.rs-widget {
  background: var(--rs-card);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-space-5);
  margin-bottom: var(--rs-space-5);
}

.rs-widget-title {
  font-size: var(--rs-text-sm);
  font-weight: var(--rs-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rs-text-muted);
  margin-bottom: var(--rs-space-4);
  padding-bottom: var(--rs-space-3);
  border-bottom: 1px solid var(--rs-border);
}

/* ── SKIP LINK ── */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--rs-space-4);
  z-index: 10000;
  padding: var(--rs-space-3) var(--rs-space-6);
  background: var(--rs-primary);
  color: white;
  border-radius: var(--rs-radius-sm);
  text-decoration: none;
  font-weight: var(--rs-weight-bold);
  transition: top 0.1s ease;
}
.skip-link:focus { top: var(--rs-space-4); }

/* ── PRINT ── */

@media print {
  .rs-nav,
  .rs-player,
  .rs-footer-social,
  .rs-newsletter-bar { display: none !important; }
}