/** progressiveImageLoader.css */
/*
 * SENSERA CONFIDENTIAL
 *
 * Copyright 2012 - 2026 Sensera Systems Inc. All Rights Reserved.
 *
 * NOTICE: All information contained herein is, and remains the property of Sensera Systems Inc. and its suppliers. The
 * intellectual and technical concepts contained herein are proprietary to Sensera Systems Inc. and may be covered by
 * U.S. and Foreign Patents, patents in process, and are protected by trade secret or copyright law. Dissemination of
 * this information or reproduction of this material is strictly forbidden unless prior written permission is obtained
 * from Sensera Systems Inc.
 *
 */

/** Core rendering layer and GPU acceleration hooks */
.image-container {
  position: relative;

  transform: translateZ(0);

  contain: layout paint;

  will-change: transform;
}

/** Base Skeleton Screening / Shimmer Effect */
.image-container.loading {
  overflow: hidden;
  position: relative;
  min-height: 100px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(-8deg,
    var(--sensera-gray-200, #E3E8EF) 0%,
    var(--sensera-gray-200, #E3E8EF) 44%,
    rgba(244, 244, 244, 0.8) 50%,
    var(--sensera-gray-200, #E3E8EF) 56%,
    var(--sensera-gray-200, #E3E8EF) 100%);
  background-size: 200% 400%;

  transform: translateZ(0);

  animation: gleam-vertical 2s linear infinite;
  animation-fill-mode: none;
}

/** Hide target images completely while layout blocks shimmer */
.image-container.loading .multi-image {
  opacity: 0;
  visibility: hidden;
}

/** In-flight Network Status Message Overlays */
.image-status-msg {
  position: absolute;
  left: 50%;
  bottom: 6px;
  padding: 2px 4px 4px;
  width: calc(100% - 12px);
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 700;

  transform: translateX(-50%);
}

.image-status-msg.loading {
  filter: invert(1);

  animation: pulse-opacity 1.5s infinite ease-in-out;
}

.image-status-msg.error {
  background: hsla(0 0 100% / 0.6);
  color: var(--sensera-error-700);
}

/** Captions & Meta text elements */
.image-caption-container {
  display: flex;
  gap: 3px;
}

.image-caption {
  margin-bottom: 8px;
  color: var(--sensera-gray-warm-600);
  font-size: 14px;
}

.image-caption-bolded {
  font-weight: 600;
}

/** Mobile responsive alterations (Tier 4) */
@media only screen and (max-width: 666px) {
  .image-container.loading {
    min-height: 60px;
  }
}

/** Animations built specifically for the loader infrastructure */
@keyframes gleam-vertical {
  0% { background-position: 50% 110%; }
  20% { background-position: 50% 110%; }
  60% { background-position: 50% 60%; }
  80% { background-position: 50% 10%; }
  100% { background-position: 50% -30%; }
}

@keyframes pulse-opacity {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}