/* Skeleton placeholders: images and embeds shimmer until they have loaded (assets/skeleton.js adds .skel-done). */

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

img:not(.skel-done):not(.no-skel),
iframe:not(.skel-done):not(.no-skel) {
  background-color: #ececec;
  background-image: linear-gradient(90deg, #ececec 25%, #f7f7f7 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

/* Logo and icons are tiny and already cached: never shimmer them. */
header img,
footer img,
nav img {
  background: none !important;
  animation: none !important;
}

/* Dark banner photo */
.rivora-rooms-hero img.rivora-hero-bg:not(.skel-done) {
  background-color: #2a2a2a;
  background-image: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* Top progress bar while moving between pages */
#site-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #c5a059;
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.6);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: width 8s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.2s;
}

#site-progress.is-active {
  width: 85%;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  img:not(.skel-done),
  iframe:not(.skel-done) {
    animation: none;
  }

  #site-progress {
    transition: none;
  }
}