/*
  ----------------------------------------------------------------------------
  © 2026 Mehdi Dimyadi
  Roozegaar Projects Collection
  All rights reserved.

  Author: Mehdi Dimyadi
  GitHub: https://github.com/MEHDIMYADI

  Description:
  This file is part of the Roozegaar Projects, including web, JSON,
  CSS, and JavaScript files. You may use, modify, and distribute this code
  in accordance with the project license.

  ----------------------------------------------------------------------------

  project-animations.css: loading skeletons and gallery entrance.
*/

/* Skeleton shimmer while a panel waits for its data */
.panel.is-loading { overflow: hidden; min-height: 220px; }
.panel.is-loading > * { opacity: 0; }
.panel.is-loading::before {
  content: "";
  position: absolute;
  inset: 1.4rem;
  border-radius: 14px;
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / 45% 22px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 46px / 100% 14px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 74px / 92% 14px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 102px / 96% 14px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 130px / 70% 14px no-repeat;
}
.panel.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}
[data-theme="dark"] .panel.is-loading::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); }

/* Staggered gallery entrance */
.gallery .shot { animation: riseIn 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* Hero badge gentle float */
.hero-badge { animation: riseIn 0.9s var(--ease) 0.1s forwards, badgeFloat 6s ease-in-out 1s infinite; }
@keyframes badgeFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }