/* ==========================================================
   CLAUDE POLISH XTRAS 01
   Optional extras on top of Version 02.
   To remove: delete this file, js/polish-01.js, and the two
   lines marked "Claude Polish Xtras 01" in each page's HTML.
   ========================================================== */

/* 1. Red reading-progress line under the header */
.px-progress {
  position: fixed; left: 0; top: var(--header-h); z-index: 101;
  height: 2px; width: 100%;
  background: var(--red);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* 2. Back-to-top button, in the red-line card style */
.px-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: #141414; color: #fff;
  border: 1px solid #2a2a2a; border-top: 3px solid var(--red); border-radius: 6px;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.px-top.show { opacity: 1; visibility: visible; transform: none; }
.px-top:hover { background: var(--red); border-color: var(--red); }
.px-top svg { width: 20px; height: 20px; }

/* 3. Video cards lift on hover */
.card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(224,33,29,.25);
  }
}

/* 4. Player: previous / next arrows and a counter */
.px-nav {
  position: absolute; top: 50%; z-index: 2;
  width: 54px; height: 54px; margin-top: -27px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,20,.85); color: #fff;
  border: 1px solid #2a2a2a; border-top: 3px solid var(--red); border-radius: 6px;
  cursor: pointer; transition: background .2s;
}
.px-nav:hover { background: var(--red); }
.px-nav svg { width: 22px; height: 22px; }
.px-prev { left: 18px; }
.px-next { right: 18px; }
.px-count {
  font-family: var(--display); font-size: 13px; letter-spacing: .24em;
  color: var(--muted); margin-top: 6px;
}
@media (max-width: 760px) {
  .px-nav { top: auto; bottom: 22px; margin: 0; }
  .px-prev { left: calc(50% - 64px); }
  .px-next { right: calc(50% - 64px); }
}

/* 5. Brand-red text selection and a dark scrollbar */
::selection { background: var(--red); color: #fff; }
html { scrollbar-color: #3a3a3a #000; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border: 3px solid #000; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* 6. Soft fade-in when a page loads */
@keyframes px-fade { from { opacity: 0; } to { opacity: 1; } }
main { animation: px-fade .6s ease both; }

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .card:hover { transform: none; }
}