/* Каталог: скролл как на «Звёздах» — без blur, без hover-transform, без skip-in. */

.gift-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #140a0a !important;
  box-shadow: none !important;
}
.gift-card:hover,
.gift-card:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Лишние градиенты на каждой карточке — лишний слой на скролле */
#root .grid.grid-cols-2 > .gift-card > .aspect-square > .absolute.inset-0 {
  display: none !important;
}

/* Как в Куполе: шторка в потоке (sticky), а не fixed над скроллом */
#root .fixed.glass-light.backdrop-blur-xl,
#root .fixed.glass-light.backdrop-blur-xl.z-40,
#root .fixed.top-\[60px\] {
  position: sticky !important;
  top: var(--astro-catalog-filter-top, 5.5rem) !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
  background: #140a0a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.28s ease-out, opacity 0.28s ease-out;
  will-change: transform, opacity;
}
#root .fixed.glass-light.backdrop-blur-xl.astro-catalog-filters--hidden {
  transform: translateY(calc(-100% - 0.75rem));
  opacity: 0;
  pointer-events: none;
}

#root .h-\[140px\],
#root .astro-catalog-spacer,
#root .fixed.glass-light.backdrop-blur-xl + .h-\[140px\] {
  height: 8px !important;
  min-height: 8px !important;
}

/* ----- скелетон ----- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #1c0e0e !important;
}
.skeleton:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(28, 14, 14, 0.15) 20%,
    rgba(239, 68, 68, 0.22) 50%,
    rgba(28, 14, 14, 0.15) 80%
  );
  background-size: 200% 100%;
  animation: astro-shimmer 1.25s ease-in-out infinite;
  pointer-events: none;
}

#root .grid.grid-cols-2 > .gift-card:has(> .aspect-square.skeleton) .p-3 {
  padding: 0.5rem 0.55rem 0.65rem !important;
}
#root .grid.grid-cols-2 > .gift-card:has(> .aspect-square.skeleton) .space-y-2 > * + * {
  margin-top: 0.35rem !important;
}
#root .grid.grid-cols-2 > .gift-card:has(> .aspect-square.skeleton) .h-4 {
  height: 0.65rem !important;
  border-radius: 0.4rem !important;
}
#root .grid.grid-cols-2 > .gift-card:has(> .aspect-square.skeleton) .h-3 {
  height: 0.5rem !important;
  border-radius: 0.4rem !important;
}
#root .grid.grid-cols-2 > .gift-card:has(> .aspect-square.skeleton) .h-5 {
  height: 0.85rem !important;
  margin-top: 0.4rem !important;
  border-radius: 0.45rem !important;
}

/* Каскад только у первой порции, потом слой снимаем */
@keyframes astro-cascade-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
#root .grid.grid-cols-2 > .gift-card[data-cascade]:not([data-cascade="0"]):not([data-cascade-done]) {
  animation: astro-cascade-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#root .grid.grid-cols-2 > .gift-card[data-cascade="1"] { animation-delay: 30ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="2"] { animation-delay: 85ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="3"] { animation-delay: 140ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="4"] { animation-delay: 195ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="5"] { animation-delay: 250ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="6"] { animation-delay: 305ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="7"] { animation-delay: 360ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="8"] { animation-delay: 415ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="9"] { animation-delay: 470ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="10"] { animation-delay: 525ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="11"] { animation-delay: 580ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade="12"] { animation-delay: 635ms; }
#root .grid.grid-cols-2 > .gift-card[data-cascade-done],
#root .grid.grid-cols-2 > .gift-card[data-cascade="0"] {
  animation: none !important;
  opacity: 1;
  transform: none;
}

#root .grid.grid-cols-2 > .gift-card > .aspect-square {
  background: #120909;
}
#root .grid.grid-cols-2 > .gift-card > .aspect-square:not(:has(.skeleton)):not([data-ready="1"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(20, 10, 10, 0.45) 20%,
    rgba(239, 68, 68, 0.16) 50%,
    rgba(20, 10, 10, 0.45) 80%
  );
  background-size: 200% 100%;
  animation: astro-shimmer 1.25s ease-in-out infinite;
}
#root .grid.grid-cols-2 > .gift-card > .aspect-square img {
  opacity: 0;
}
#root .grid.grid-cols-2 > .gift-card > .aspect-square[data-ready="1"] img {
  opacity: 1;
}

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