/* Shared bookmark preview, skeleton and reveal animations. */

.bookmark-card-preview-wrap {
  position: relative;
  grid-column: 1;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: var(--vk-bookmark-preview-radius);
  background: var(--vk-paper-depth-raised-max-bg);
  box-shadow: var(--vk-paper-preview-shadow);
  transform: translateY(-2px);
}

.bookmark-card-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bookmark-card-preview-wrap.is-focus-preview .bookmark-card-preview {
  position: absolute;
  top: var(--bookmark-focus-top, 0);
  left: var(--bookmark-focus-left, 0);
  width: calc(100% * var(--bookmark-focus-scale, 1));
  height: calc(100% * var(--bookmark-focus-scale, 1));
  max-width: none;
  object-fit: fill;
}

.bookmark-card-preview-wrap.is-unviewed {
  background: var(--vk-paper-depth-raised-max-bg);
  box-shadow: var(--vk-paper-preview-shadow);
}

.bookmark-card-preview-wrap.is-unviewed .bookmark-card-preview {
  visibility: hidden;
}

.bookmark-card-preview-question {
  position: absolute;
  inset: -2px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--vk-paper-depth-raised-max-bg);
  box-shadow: none;
  color: color-mix(in srgb, var(--vk-text-primary) 62%, transparent);
  font-size: var(--vk-font-preview-placeholder);
  font-weight: var(--vk-weight-medium);
  line-height: var(--vk-line-tight);
}

.bookmark-card-preview-lock-icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.7;
}

.bookmark-card-preview-wrap.is-view-revealing .bookmark-card-preview-question {
  animation: bookmark-preview-question-flip-out 260ms cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.bookmark-card-preview-wrap.is-view-revealing .bookmark-card-preview {
  animation: bookmark-preview-image-flip-in 260ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

.bookmark-card-preview-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--vk-paper-depth-raised-max-bg);
  box-shadow: none;
  color: var(--vk-text-primary);
}

.bookmark-card-preview-skeleton-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--vk-text-primary) 22%, transparent);
  border-top-color: var(--vk-text-primary);
  border-radius: 50%;
  animation: bookmark-preview-loader-spin 1s linear infinite;
}

.bookmark-card-preview-wrap.is-loaded .bookmark-card-preview-skeleton {
  display: none;
}

@keyframes bookmark-preview-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes bookmark-preview-question-flip-out {
  0% {
    opacity: 1;
    transform: rotateY(0deg);
  }
  100% {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

@keyframes bookmark-preview-image-flip-in {
  0% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}