/* =========================================================
   Shared list enhancements for both list pages (index.html / index2.html).
   - status-colored filter chips & card hard-shadows
   - real cover art without the slogan sticker / ENTRY badge
   - cards leap up from below when the list scrolls into view
   - two-line application / announcement dates
   Loaded after styles.css; scoped to #filters / #grid.
   ========================================================= */

/* --- AI cover art for the first three events --- */
#grid .cover.cv-a {
  background-image: url("img/cover-huayu.jpg");
}

#grid .cover.cv-b {
  background-image: url("img/cover-riyu.jpg");
}

#grid .cover.cv-c {
  background-image: url("img/cover-guaitan.jpg");
}

/* --- drop the slogan sticker band & the ENTRY 01+ corner sticker --- */
#grid .cover .cover-title {
  display: none;
}

#grid .card::before {
  display: none;
}

/* --- status color pairing: chips <-> card shadows ------------- */
/* chips: idle keeps a colored pill dot; active fills with the color */
#filters .chip[data-filter="upcoming"]::before,
#filters .chip[data-filter="ongoing"]::before,
#filters .chip[data-filter="judging"]::before,
#filters .chip[data-filter="announced"]::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  vertical-align: 1px;
}

#filters .chip[data-filter="upcoming"]::before { background: var(--st-upcoming); }
#filters .chip[data-filter="ongoing"]::before { background: var(--st-ongoing); }
#filters .chip[data-filter="judging"]::before { background: var(--st-judging); }
#filters .chip[data-filter="announced"]::before { background: var(--st-announced); }

#filters .chip[data-filter="upcoming"].active {
  background: var(--st-upcoming);
  border-color: var(--ink);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}

#filters .chip[data-filter="ongoing"].active {
  background: var(--st-ongoing);
  border-color: var(--ink);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}

#filters .chip[data-filter="judging"].active {
  background: var(--st-judging);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

#filters .chip[data-filter="announced"].active {
  background: var(--st-announced);
  border-color: var(--ink);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}

#filters .chip[data-filter="upcoming"].active::before,
#filters .chip[data-filter="ongoing"].active::before,
#filters .chip[data-filter="judging"].active::before,
#filters .chip[data-filter="announced"].active::before {
  background: var(--white);
}

/* cards: hard shadow matches the event's status color */
#grid .card[data-status="upcoming"] { box-shadow: 6px 6px 0 var(--st-upcoming) !important; }
#grid .card[data-status="ongoing"] { box-shadow: 6px 6px 0 var(--st-ongoing) !important; }
#grid .card[data-status="judging"] { box-shadow: 6px 6px 0 var(--st-judging) !important; }
#grid .card[data-status="announced"] { box-shadow: 6px 6px 0 var(--st-announced) !important; }

#grid .card[data-status="upcoming"]:hover { box-shadow: 10px 10px 0 var(--st-upcoming) !important; }
#grid .card[data-status="ongoing"]:hover { box-shadow: 10px 10px 0 var(--st-ongoing) !important; }
#grid .card[data-status="judging"]:hover { box-shadow: 10px 10px 0 var(--st-judging) !important; }
#grid .card[data-status="announced"]:hover { box-shadow: 10px 10px 0 var(--st-announced) !important; }

/* --- scroll-triggered entrance: leap up from below ------------- */
/* replaces the render-time panel-in animation from styles.css */
#grid .card {
  opacity: 0;
  animation: none;
}

#grid.is-revealed .card {
  animation: list2-card-leap 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--leap-delay, 0ms);
}

@keyframes list2-card-leap {
  0% {
    opacity: 0;
    transform: translateY(56px) scale(0.97);
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* --- two-line dates -------------------------------------------- */
#grid .card .time {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  #grid .card,
  #grid.is-revealed .card {
    opacity: 1;
    animation: none;
  }
}