/* Palm & Salt — shared motion (landing-page feel across inner pages) */

/* ── Scroll reveal ── */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}
.reveal-d4{transition-delay:.4s}
.reveal-d5{transition-delay:.5s}
.reveal-d6{transition-delay:.6s}

.reveal-scale{
  opacity:0;
  transform:scale(.95);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.visible{opacity:1;transform:scale(1)}

.reveal-left{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-left.visible{opacity:1;transform:translateX(0)}

.reveal-right{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* ── Hero / page hero entrance ── */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroLine{to{opacity:1}}
@keyframes pulse{
  0%,100%{opacity:.25;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.4)}
}

.page-hero-inner > .page-eyebrow,
.page-hero-inner > .page-title,
.page-hero-inner > .page-sub{
  opacity:0;
  animation:heroFadeUp .85s cubic-bezier(.16,1,.3,1) forwards;
}
.page-hero-inner > .page-eyebrow{animation-delay:.18s}
.page-hero-inner > .page-title{animation-delay:.34s}
.page-hero-inner > .page-sub{animation-delay:.5s}

/* ── Catalog skeleton loading ── */
.catalog-grid-loading{min-height:280px}

.catalog-skeleton{
  pointer-events:none;
  overflow:hidden;
}
.catalog-skeleton .catalog-skeleton-img{
  height:180px;
  width:100%;
  border-radius:0;
}
.catalog-skeleton-body{padding:18px;display:flex;flex-direction:column;gap:10px}
.catalog-skeleton-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:0 18px 18px;
}

.sk-line{
  height:12px;
  border-radius:8px;
  background:linear-gradient(90deg,var(--sf) 0%,var(--el) 45%,var(--sf) 90%);
  background-size:220% 100%;
  animation:skShimmer 1.35s ease-in-out infinite;
}
.sk-title{height:18px;width:72%;border-radius:9px}
.sk-desc{width:100%}
.sk-desc.short{width:58%}
.sk-price{height:20px;width:64px;border-radius:10px}
.sk-btn{height:34px;width:96px;border-radius:10px}

@keyframes skShimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

/* ── Catalog card entrance (after skeleton) ── */
@keyframes catalogEnter{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
.catalog-card.catalog-enter{
  opacity:0;
  animation:catalogEnter .72s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--enter-i, 0) * 65ms);
}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale,.reveal-left,.reveal-right,
  .catalog-card.catalog-enter{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
  .page-hero-inner > *{
    opacity:1!important;
    animation:none!important;
  }
  .sk-line{animation:none;background:var(--sf)}
}