/* Video clips (VIDEO.md section 3.3, BACKLOG B6): the "Make a video"
   panel in a design's toolbar and the clip's own card in the history. */

/* The panel is a toolbar panel (generations.css) with the move tiles. */
.video-panel {
  gap: var(--space-2);
  padding: var(--space-3);
}

.video-panel > turbo-frame {
  display: grid;
  gap: var(--space-2);
}

.video-panel-form {
  display: grid;
  gap: var(--space-3);
}

.video-panel .toolbar-panel-title {
  padding: 0;
}

.video-panel-copy {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.video-panel-cta {
  justify-self: start;
  margin-top: var(--space-3);
}

/* Each move is a tile of the design itself; the chosen one (or the one
   under a pointer) plays its move, so the picker shows what the camera
   will do instead of describing it. */
.video-moves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.video-move {
  display: grid;
  gap: var(--space-1);
  cursor: pointer;
}

.video-move-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.video-move-picture {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--tint);
}

.video-move-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
}

.video-move-arrow {
  position: absolute;
  left: var(--space-1);
  bottom: var(--space-1);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--paper-card);
  color: var(--ink);
  font-size: var(--text-xs);
  line-height: 1;
}

.video-move-label {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.video-move:has(.video-move-input:checked) .video-move-picture {
  border-color: var(--accent);
}

.video-move:has(.video-move-input:checked) .video-move-label {
  color: var(--ink);
}

.video-move:has(.video-move-input:focus-visible) .video-move-picture {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@keyframes video-move-push-in { from { transform: scale(1); } to { transform: scale(1.3); } }
@keyframes video-move-pull-back { from { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes video-move-pan-left { from { transform: scale(1.18) translateX(-7%); } to { transform: scale(1.18) translateX(7%); } }
@keyframes video-move-pan-right { from { transform: scale(1.18) translateX(7%); } to { transform: scale(1.18) translateX(-7%); } }
@keyframes video-move-orbit {
  from { transform: perspective(24rem) scale(1.25) translateX(6%) rotateY(-10deg); }
  to { transform: perspective(24rem) scale(1.25) translateX(-6%) rotateY(10deg); }
}
@keyframes video-move-tilt-up { from { transform: scale(1.18) translateY(-7%); } to { transform: scale(1.18) translateY(7%); } }

/* Each tile carries its move's keyframes at zero duration, which draws
   nothing; choosing it (or hovering it) gives the move its time.
   Longhands on purpose: the shorthand would reset the name the tile
   carries. */
@media (prefers-reduced-motion: no-preference) {
  .video-move:has(.video-move-input:checked) img {
    animation-duration: 2.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @media (hover: hover) {
    .video-move:hover img {
      animation-duration: 2.4s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
  }

  .video-move[data-move="push_in"] img { animation-name: video-move-push-in; }
  .video-move[data-move="pull_back"] img { animation-name: video-move-pull-back; }
  .video-move[data-move="pan_left"] img { animation-name: video-move-pan-left; }
  .video-move[data-move="pan_right"] img { animation-name: video-move-pan-right; }
  .video-move[data-move="orbit"] img { animation-name: video-move-orbit; }
  .video-move[data-move="tilt_up"] img { animation-name: video-move-tilt-up; }
}

.video-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.video-panel-meta {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

/* A clip in the history: a design card (generations.css) whose stage
   holds the video, marked with a small Video badge so it reads apart
   from the designs around it. */
.video-card-video {
  background: var(--tint);
}

.video-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink);
  font-size: var(--text-xs);
  line-height: 1;
  pointer-events: none;
}

.video-card-badge .toolbar-icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* On its way: the design under a slow scan line. */
.video-card[data-status="pending"] .generation-photo,
.video-card[data-status="processing"] .generation-photo {
  filter: saturate(0.7);
}

.video-card[data-status="failed"] .generation-photo {
  opacity: 0.45;
  filter: grayscale(1);
}

.video-card-scan {
  position: absolute;
  inset: 0 0 auto;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: no-preference) {
  .video-card-scan {
    animation: video-card-scan 2.2s linear infinite;
  }
}

@keyframes video-card-scan {
  to { transform: translateY(340%); }
}

/* The packs in the panel: two buttons when the month is spent, a quiet
   line of two links otherwise. */
.video-packs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.video-packs.is-primary {
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.video-packs-form {
  display: inline;
  margin: 0;
}

.video-packs-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}