/**
 * Skeleton Loading Styles
 * Анимированные заглушки для изображений и видео
 * Темная тема: #010101, #1a1a1a, #2a2a2a
 */

/* ============================================
   БАЗОВЫЕ СТИЛИ SKELETON
   ============================================ */

.skeleton {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Плавное исчезновение skeleton при загрузке */
.skeleton.loaded {
  animation: skeleton-fade-out 0.5s ease-out forwards;
}

@keyframes skeleton-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

.skeleton.loaded::after,
.skeleton.loaded::before {
  animation: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.skeleton.loaded::after {
  display: none;
}

/* ============================================
   SKELETON ДЛЯ ИЗОБРАЖЕНИЙ
   ============================================ */

.skeleton-image {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  /* Легкие полосы для имитации деталей изображения */
  background-image: 
    linear-gradient(90deg, transparent 0%, rgba(42, 42, 42, 0.08) 20%, transparent 40%),
    linear-gradient(180deg, transparent 0%, rgba(42, 42, 42, 0.08) 30%, transparent 60%);
  background-size: 200% 200%, 200% 200%;
  background-position: 0% 0%, 0% 0%;
  animation: skeleton-pattern 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  /* Skeleton должен быть виден - opacity: 1 */
  opacity: 1 !important;
  z-index: 1;
}

/* Когда изображение загружено, skeleton должен быть поверх, но прозрачным */
.skeleton-image.loaded {
  z-index: 2;
  pointer-events: none;
  opacity: 0 !important;
}

.skeleton-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #1a1a1a 0%,
    #222222 20%,
    #252525 30%,
    #222222 40%,
    #1a1a1a 50%,
    #222222 60%,
    #252525 70%,
    #222222 80%,
    #1a1a1a 100%
  );
  background-size: 200% 100%;
  animation: skeleton-gradient 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 1;
}

.skeleton-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 2;
}

@keyframes skeleton-gradient {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes skeleton-pattern {
  0%, 100% {
    background-position: 0% 0%, 0% 0%;
  }
  50% {
    background-position: 100% 100%, 100% 100%;
  }
}

/* Квадратные изображения */
.skeleton-image--square {
  aspect-ratio: 1 / 1;
}

/* Прямоугольные изображения */
.skeleton-image--rect {
  aspect-ratio: 16 / 9;
}

.skeleton-image--rect-4-3 {
  aspect-ratio: 4 / 3;
}

/* Круглые изображения (для аватаров) */
.skeleton-image--circle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

/* ============================================
   SKELETON ДЛЯ ВИДЕО
   ============================================ */

.skeleton-video {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
}

.skeleton-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #1a1a1a 0%,
    #222222 20%,
    #252525 30%,
    #222222 40%,
    #1a1a1a 50%,
    #222222 60%,
    #252525 70%,
    #222222 80%,
    #1a1a1a 100%
  );
  background-size: 200% 100%;
  animation: skeleton-gradient 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Иконка play в центре */
.skeleton-video::before {
  z-index: 1;
}

.skeleton-video::after {
  z-index: 2;
}

.skeleton-video .skeleton-video__play-icon {
  position: relative;
  z-index: 3;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.skeleton-video .skeleton-video__play-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 18px solid rgba(255, 255, 255, 0.6);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

/* Соотношения сторон для видео */
.skeleton-video--16-9 {
  aspect-ratio: 16 / 9;
}

.skeleton-video--4-3 {
  aspect-ratio: 4 / 3;
}

.skeleton-video--1-1 {
  aspect-ratio: 1 / 1;
}

/* ============================================
   SKELETON ДЛЯ ТЕКСТА
   ============================================ */

.skeleton-text {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  height: 1em;
  margin: 0.5em 0;
}

.skeleton-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Разные ширины для текстовых линий */
.skeleton-text--short {
  width: 40%;
}

.skeleton-text--medium {
  width: 60%;
}

.skeleton-text--long {
  width: 80%;
}

.skeleton-text--full {
  width: 100%;
}

/* Разные высоты */
.skeleton-text--small {
  height: 0.8em;
}

.skeleton-text--large {
  height: 1.5em;
}

/* ============================================
   SKELETON ДЛЯ КАРТОЧЕК/БЛОКОВ
   ============================================ */

.skeleton-card {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 20px;
}

.skeleton-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Элементы внутри карточки */
.skeleton-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2a2a2a;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}

.skeleton-card__avatar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.4) 40%,
    rgba(42, 42, 42, 0.5) 50%,
    rgba(42, 42, 42, 0.4) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-card__image {
  width: 100%;
  height: 200px;
  background: #2a2a2a;
  border-radius: 8px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}

.skeleton-card__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.4) 40%,
    rgba(42, 42, 42, 0.5) 50%,
    rgba(42, 42, 42, 0.4) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-card__title {
  height: 24px;
  background: #2a2a2a;
  border-radius: 4px;
  margin-bottom: 10px;
  width: 70%;
  position: relative;
  overflow: hidden;
}

.skeleton-card__title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.4) 40%,
    rgba(42, 42, 42, 0.5) 50%,
    rgba(42, 42, 42, 0.4) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-card__text {
  height: 16px;
  background: #2a2a2a;
  border-radius: 4px;
  margin-bottom: 8px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.skeleton-card__text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.4) 40%,
    rgba(42, 42, 42, 0.5) 50%,
    rgba(42, 42, 42, 0.4) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.skeleton-card__text:last-child {
  width: 60%;
  margin-bottom: 0;
}

/* ============================================
   ИНТЕГРАЦИЯ С СУЩЕСТВУЮЩИМИ КЛАССАМИ
   ============================================ */

/* Для изображений на странице кейсов */
.cases-page__card-image.skeleton {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
}

.cases-page__card-image.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.cases-page__card-image.skeleton.loaded {
  background: none;
}

.cases-page__card-image.skeleton.loaded::after {
  display: none;
}

/* Для изображений на страницах кейсов */
.case-detail__hero-image.skeleton,
.case-detail__gallery-image.skeleton,
.case-detail__result-image.skeleton,
.case-detail__other-works-card-image.skeleton {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
}

.case-detail__hero-image.skeleton::after,
.case-detail__gallery-image.skeleton::after,
.case-detail__result-image.skeleton::after,
.case-detail__other-works-card-image.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.case-detail__hero-image.skeleton.loaded::after,
.case-detail__gallery-image.skeleton.loaded::after,
.case-detail__result-image.skeleton.loaded::after,
.case-detail__other-works-card-image.skeleton.loaded::after {
  display: none;
}

/* Для видео */
video.skeleton,
.hero__card-video.skeleton,
.hero__background-video.skeleton {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
}

video.skeleton::before,
.hero__card-video.skeleton::before,
.hero__background-video.skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #1a1a1a 0%,
    #222222 20%,
    #252525 30%,
    #222222 40%,
    #1a1a1a 50%,
    #222222 60%,
    #252525 70%,
    #222222 80%,
    #1a1a1a 100%
  );
  background-size: 200% 100%;
  animation: skeleton-gradient 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 1;
}

video.skeleton::after,
.hero__card-video.skeleton::after,
.hero__background-video.skeleton::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

video.skeleton::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.6)'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  background-position: center;
  background-repeat: no-repeat;
  padding-left: 4px;
}

video.skeleton.loaded::before,
video.skeleton.loaded::after,
.hero__card-video.skeleton.loaded::before,
.hero__card-video.skeleton.loaded::after,
.hero__background-video.skeleton.loaded::before,
.hero__background-video.skeleton.loaded::after {
  display: none;
}

/* Для фоновых изображений */
[data-bg-src].skeleton {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
}

[data-bg-src].skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42, 42, 42, 0.3) 40%,
    rgba(42, 42, 42, 0.4) 50%,
    rgba(42, 42, 42, 0.3) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

[data-bg-src].skeleton.loaded::after {
  display: none;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 768px) {
  .skeleton-video .skeleton-video__play-icon {
    width: 50px;
    height: 50px;
  }
  
  .skeleton-video .skeleton-video__play-icon::before {
    border-left-width: 14px;
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  
  video.skeleton::after {
    width: 50px;
    height: 50px;
    background-size: 20px 20px;
  }
}

/* ============================================
   ОТКЛЮЧЕНИЕ АНИМАЦИИ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ С ПРЕДПОЧТЕНИЕМ
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .skeleton::after,
  .skeleton-image::before,
  .skeleton-image::after,
  .skeleton-video::before,
  .skeleton-video::after,
  .skeleton-text::after,
  .skeleton-card::after,
  .skeleton-card__avatar::after,
  .skeleton-card__image::after,
  .skeleton-card__title::after,
  .skeleton-card__text::after,
  video.skeleton::before,
  video.skeleton::after {
    animation: none;
  }
  
  .skeleton,
  .skeleton-image,
  .skeleton-video {
    background: #1a1a1a;
  }
}