/* ============================================================
   MyCollection — features.css
   Magazine bento grid — varied sizes · neon accents · mini UI
   ============================================================ */

/* ── Full-width background wrapper (canvas lives here) ── */
.features-bg-wrap {
  position: relative;
  background: #050508;
}

/* ── Particle canvas — fills the full-width wrapper ── */
#features-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

.features {
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 1200px; margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* ── Neon radial spotlight ── */
.features::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%,  rgba(160, 60, 255, .22)  0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 20% 85%,  rgba(255, 30, 120,  .13)  0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 80% 15%,  rgba(60, 160, 255,  .10)  0%, transparent 55%),
    radial-gradient(ellipse 100% 25% at 50% 100%, rgba(0, 0, 0, .6)        0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* ── CRT scanlines ── */
.features::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, .13) 3px,
    rgba(0, 0, 0, .13) 4px
  );
  pointer-events: none; z-index: 2;
}

/* ── Particle canvas ── */
#ft-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* ── Content above effects ── */
.features-header,
.bento-grid { position: relative; z-index: 3; }

/* ── Section header ── */
.features-header {
  text-align: center; margin-bottom: 3.5rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.features-header.visible { opacity: 1; transform: translateY(0); }

.features-header h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -.04em; margin-bottom: .75rem;
  background: linear-gradient(135deg, #f0f0ff 0%, #c4b5fd 50%, #818cf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.features-header p {
  color: var(--text-secondary); font-size: 1.05rem;
  max-width: 480px; margin: 0 auto;
}

/* ══════════════════════════════════════
   BENTO GRID — magazine layout
   ══════════════════════════════════════ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}

/* ── Explicit placement ── */
/* 1. Track — 2×2 hero */
.bento-card:nth-child(1)  { grid-column: 1 / 3; grid-row: 1 / 3; }
/* 2. Calendar — col 3 row 1 */
.bento-card:nth-child(2)  { grid-column: 3; grid-row: 1; }
/* 3. Wishlist — col 3 row 2 */
.bento-card:nth-child(3)  { grid-column: 3; grid-row: 2; }
/* 4. Real-time — col 1 row 3 */
.bento-card:nth-child(4)  { grid-column: 1; grid-row: 3; }
/* 5. Status — col 2 row 3 */
.bento-card:nth-child(5)  { grid-column: 2; grid-row: 3; }
/* 6. Notifications — col 3, rows 3-4 (tall) */
.bento-card:nth-child(6)  { grid-column: 3; grid-row: 3 / 5; }
/* 7. Search — col 1 row 4 */
.bento-card:nth-child(7)  { grid-column: 1; grid-row: 4; }
/* 8. Discover — col 2 row 4 */
.bento-card:nth-child(8)  { grid-column: 2; grid-row: 4; }
/* 9. Stats — col 1 row 5 */
.bento-card:nth-child(9)  { grid-column: 1; grid-row: 5; }
/* 10. Profile — 2×1 wide, col 2-3 row 5 */
.bento-card:nth-child(10) { grid-column: 2 / 4; grid-row: 5; }
/* 11. Spotify — 2×1 wide, col 1-2 row 6 */
.bento-card:nth-child(11) { grid-column: 1 / 3; grid-row: 6; }
/* 12. Collections — col 3 row 6 */
.bento-card:nth-child(12) { grid-column: 3; grid-row: 6; }

/* ══════════════════════════════════════
   CARD BASE
   ══════════════════════════════════════ */
.bento-card {
  background: linear-gradient(
    135deg,
    var(--bg-card) 0%,
    rgba(var(--card-accent, 121, 74, 255), .05) 100%
  );
  border: 1px solid rgba(var(--card-accent, 121, 74, 255), .12);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease,
              border-color .3s ease, box-shadow .3s ease;
}
.bento-card.visible  { opacity: 1; transform: translateY(0); }

/* Top gradient line */
.bento-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--card-accent, 121, 74, 255), .6) 50%,
    transparent
  );
  opacity: 0; transition: opacity .3s;
}

/* Feature counter */
.bento-card::after {
  content: counter(feature, decimal-leading-zero);
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(var(--card-accent, 121, 74, 255), .45);
  font-variant-numeric: tabular-nums;
  counter-increment: feature;
}

.bento-grid { counter-reset: feature; }

.bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--card-accent, 121, 74, 255), .35);
  box-shadow: var(--shadow-card), 0 0 30px rgba(var(--card-accent, 121, 74, 255), .12);
}
.bento-card:hover::before { opacity: 1; }

/* ── Neon accent per card ── */
.bento-card:nth-child(1)  { --card-accent: 121, 74,  255; } /* purple  */
.bento-card:nth-child(2)  { --card-accent:  74, 121, 255; } /* blue    */
.bento-card:nth-child(3)  { --card-accent: 255,  74, 121; } /* rose    */
.bento-card:nth-child(4)  { --card-accent:  74, 180, 255; } /* cyan    */
.bento-card:nth-child(5)  { --card-accent:  74, 220, 120; } /* emerald */
.bento-card:nth-child(6)  { --card-accent: 255, 170,  74; } /* amber   */
.bento-card:nth-child(7)  { --card-accent: 155,  74, 255; } /* violet  */
.bento-card:nth-child(8)  { --card-accent:  74, 220, 200; } /* teal    */
.bento-card:nth-child(9)  { --card-accent: 106,  74, 255; } /* indigo  */
.bento-card:nth-child(10) { --card-accent: 200,  74, 255; } /* magenta */
.bento-card:nth-child(11) { --card-accent:  30, 215,  96; } /* spotify */
.bento-card:nth-child(12) { --card-accent: 255, 200,  74; } /* gold    */

/* ── Icon ── */
.bento-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(var(--card-accent, 121, 74, 255), .28) 0%,
    rgba(var(--card-accent, 121, 74, 255), .10) 100%
  );
  border: 1px solid rgba(var(--card-accent, 121, 74, 255), .30);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; flex-shrink: 0;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 16px rgba(var(--card-accent, 121, 74, 255), .15);
}
.bento-card:hover .bento-icon {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 6px 24px rgba(var(--card-accent, 121, 74, 255), .35);
}
.bento-icon svg { width: 22px; height: 22px; color: rgb(var(--card-accent, 121, 74, 255)); }

/* ── Text ── */
.bento-card h3 {
  font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-primary); margin-bottom: .5rem;
}
.bento-card p {
  color: var(--text-secondary); font-size: .82rem; line-height: 1.6;
  opacity: .85; transition: opacity .3s;
}
.bento-card:hover p { opacity: 1; }

/* ══════════════════════════════════════
   MINI UI — bento-visual elements
   ══════════════════════════════════════ */
.bento-visual {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--card-accent, 121, 74, 255), .12);
}

/* ── Progress list (Track card) ── */
.bv-progress-list { display: flex; flex-direction: column; gap: .8rem; }

.bv-item {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: .3rem;
  column-gap: .5rem;
  align-items: center;
}
.bv-label {
  font-size: .75rem; font-weight: 600;
  color: var(--text-primary);
}
.bv-sub {
  font-size: .68rem;
  color: var(--text-muted);
  text-align: right;
}
.bv-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
}
.bv-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    rgb(var(--card-accent, 121, 74, 255)),
    rgba(var(--card-accent, 121, 74, 255), .6)
  );
  border-radius: 2px;
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.bento-card.visible .bv-fill { width: var(--fill, 0%); }

/* ── Notification list (Notifications card) ── */
.bv-notif-list { display: flex; flex-direction: column; gap: .55rem; }

.bv-notif {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(var(--card-accent, 121, 74, 255), .06);
  border: 1px solid rgba(var(--card-accent, 121, 74, 255), .14);
  border-radius: 10px;
  padding: .55rem .8rem;
}
.bv-notif-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: rgb(var(--card-accent, 121, 74, 255));
  box-shadow: 0 0 6px rgba(var(--card-accent, 121, 74, 255), .7);
  animation: notif-pulse 2.5s ease-in-out infinite;
}
.bv-notif-content { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.bv-notif-title { font-size: .73rem; font-weight: 600; color: var(--text-primary); }
.bv-notif-sub   { font-size: .67rem; color: var(--text-secondary); }
.bv-time { font-size: .63rem; color: var(--text-muted); white-space: nowrap; }

.bv-notif:nth-child(2) .bv-notif-dot { animation-delay: .8s; }
.bv-notif:nth-child(3) .bv-notif-dot { animation-delay: 1.6s; }

/* ── Stats list (Profile card) ── */
.bv-stats-list { display: flex; flex-direction: column; gap: .65rem; }

.bv-stat-row {
  display: grid;
  grid-template-columns: 52px 1fr 32px;
  gap: .5rem;
  align-items: center;
}
.bv-stat-row > span:first-child {
  font-size: .72rem; color: var(--text-secondary);
}
.bv-stat-row > span:last-child {
  font-size: .7rem; font-weight: 600;
  color: var(--text-muted); text-align: right;
}
.bv-fill--rose { background: linear-gradient(90deg, #ec4899, #f9a8d4); }
.bv-fill--cyan { background: linear-gradient(90deg, #22d3ee, #67e8f9); }

/* ── SEO descriptive text section ─────────────────────────────── */
.seo-section {
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 4.5rem;
  background: #080810;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.seo-section-inner {
  max-width: 820px;
  margin: 0 auto;
}
.seo-section h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #c8c8e8;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.seo-section p {
  font-size: 0.875rem;
  line-height: 1.85;
  color: #6060a0;
  margin-bottom: 0.875rem;
}
.seo-section p:last-child { margin-bottom: 0; }