/* =========================================================
   PORNGID — VISUAL IMPROVEMENTS
   Подключать ПОСЛЕ custom.css.
   6 улучшений:
     1. :active press-эффект (карточки, кнопки, пиллы, пагинация)
     2. Play-иконка при hover на карточке
     3. Пульсация бейджа NEW
     4. Плавный scroll
     5. Skeleton shimmer для превью карточек
     6. Overlay с именем на category/pornstar карточках
   ========================================================= */


/* =========================================================
   1. :active PRESS-ЭФФЕКТ
   Мгновенный тактильный отклик при клике.
   scale(0.97) + transition 80ms — быстрее чем hover.
   ========================================================= */

/* Видео-карточки */
.video-item:active {
  transform: scale(0.97) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.95) !important;
  transition: transform 80ms ease, box-shadow 80ms ease !important;
}

/* Ссылки внутри карточки (href на весь item) */
.video-item > a:active {
  opacity: .92;
}

/* Кнопки навигации хедера */
.pg-nav-link:active,
.pg-header-btn:active {
  transform: scale(0.95) !important;
  transition: transform 80ms ease !important;
}

/* Sidebar категории */
aside.pg-sidebar .pg-sidebar-topcats-list a:active,
aside.pg-sidebar .pg-sidebar-nav a:active {
  transform: scale(0.96) !important;
  transition: transform 80ms ease !important;
}

/* Пагинация */
.pg-page a:active {
  transform: scale(0.92) !important;
  transition: transform 80ms ease !important;
}

/* Sort links */
.pg-sort-link:active {
  transform: scale(0.95) !important;
  transition: transform 80ms ease !important;
}

/* Footer links */
.site-footer .footer-links a:active {
  transform: scale(0.94) !important;
  transition: transform 80ms ease !important;
}

/* Tax pills (category/tag chips на single-странице) */
.pg-tax-pill:active,
.video-meta-cat:active {
  transform: scale(0.94) !important;
  transition: transform 70ms ease !important;
}

/* Scroll-to-top button */
.pg-scroll-top:active {
  transform: scale(0.90) !important;
  transition: transform 80ms ease !important;
}

/* Category/pornstar cards */
.pg-term-card:active {
  transform: scale(0.97) !important;
  transition: transform 80ms ease !important;
}


/* =========================================================
   2. PLAY-ИКОНКА ПРИ HOVER НА КАРТОЧКЕ
   Полупрозрачный circle с ▶ появляется в центре превью.
   Плавное появление, не мешает тексту.
   ========================================================= */

.video-thumb::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 4;

  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(4px);

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  line-height: 52px;
  text-align: center;
  padding-left: 3px; /* оптическая центровка ▶ */

  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.video-item:hover .video-thumb::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* На мобиле hover не работает — не показываем */
@media (hover: none) {
  .video-thumb::after {
    display: none;
  }
}


/* =========================================================
   3. ПУЛЬСАЦИЯ БЕЙДЖА NEW
   Мягкое свечение границы — ритмичная пульсация 2.4s.
   Не мигает текст, только border-glow.
   ========================================================= */

@keyframes pg-new-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 47, 146, 0.55),
                     0 0 6px rgba(255, 47, 146, 0.30); }
  50%  { box-shadow: 0 0 0 4px rgba(255, 47, 146, 0.0),
                     0 0 12px rgba(255, 47, 146, 0.50); }
  100% { box-shadow: 0 0 0 0 rgba(255, 47, 146, 0.55),
                     0 0 6px rgba(255, 47, 146, 0.30); }
}

.video-meta-new {
  animation: pg-new-pulse 2.4s ease-in-out infinite;
}

/* Стоп при hover на карточке — не отвлекает когда смотришь */
.video-item:hover .video-meta-new {
  animation: none;
  border-color: rgba(255, 47, 146, 0.85);
  box-shadow: 0 0 10px rgba(255, 47, 146, 0.45);
}


/* =========================================================
   4. ПЛАВНЫЙ SCROLL
   html-уровень. Работает для якорей и scroll-to-top кнопки.
   prefers-reduced-motion — уважаем пользователей.
   ========================================================= */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Отключаем все анимации для пользователей с настройкой */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   5. SKELETON SHIMMER
   Пока картинка карточки не загрузилась — плавный shimmer
   вместо пустого серого прямоугольника.
   Работает через :not([src]) и img[loading] до onload.
   ========================================================= */

@keyframes pg-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Сам контейнер превью — skeleton-фон */
.video-thumb {
  background-color: #0c1024;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0)      0%,
    rgba(255,255,255,0.05)  40%,
    rgba(123,92,255,0.12)   50%,
    rgba(255,255,255,0.05)  60%,
    rgba(255,255,255,0)     100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: pg-shimmer 1.8s linear infinite;
}

/* Когда картинка загрузилась — убираем анимацию */
.video-thumb:has(.video-thumb__img[complete]),
.video-thumb.pg-loaded {
  animation: none;
  background-image: none;
}

/* Fallback: JS добавит класс pg-loaded после onload */
/* (если :has не поддерживается браузером — shimmer просто продолжается, это ок) */


/* =========================================================
   6. OVERLAY С ИМЕНЕМ НА CATEGORY / PORNSTAR КАРТАХ
   Название и счётчик поверх превью при hover.
   Плавное появление снизу.
   ========================================================= */

/* Превью карты уже position:relative — добавляем overlay */
.pg-term-thumb {
  overflow: hidden;
}

/* Overlay слой */
.pg-term-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 8, 20, 0.92) 0%,
    rgba(5, 8, 20, 0.55) 40%,
    rgba(5, 8, 20, 0.0)  70%
  );
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 2;
  pointer-events: none;
}

.pg-term-card:hover .pg-term-thumb::after {
  opacity: 1;
}

/* Имя поверх превью */
.pg-term-card .pg-term-body {
  position: relative;
  z-index: 1;
}

/* Плавное "поднятие" текстового блока при hover */
.pg-term-card {
  --term-body-y: 0px;
}

.pg-term-card .pg-term-body {
  transition: transform 200ms ease;
}

.pg-term-card:hover .pg-term-body {
  transform: translateY(-2px);
}

/* Текст имени — ярче при hover */
.pg-term-card .pg-term-title {
  transition: color 200ms ease;
}

.pg-term-card:hover .pg-term-title {
  color: #fff;
}

/* Счётчик видео (badge) — подсветить при hover */
.pg-term-count {
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.pg-term-card:hover .pg-term-count {
  border-color: rgba(255, 47, 146, 0.60);
  background: radial-gradient(
    circle at 0 0,
    rgba(255, 47, 146, 0.28),
    rgba(11, 16, 32, 0.90)
  );
  box-shadow: 0 0 12px rgba(255, 47, 146, 0.30);
}

/* Масштаб картинки при hover (уже был в term-card, усиливаем плавно) */
.pg-term-thumb img {
  transition: transform 320ms ease, filter 320ms ease;
  will-change: transform;
}

.pg-term-card:hover .pg-term-thumb img {
  transform: scale(1.06);
  filter: brightness(0.85);
}