/* Desert Rose Athletics — Add-on Effects (drop-in CSS)
   Usage: <link rel="stylesheet" href="desertrose-effects.css"> after your main styles.css
*/

/* ---------- Icon visibility fixes (cart + close) ---------- */
.icon-btn,
.icon-cart,
#close-cart{
  color: var(--fg);
}
.icon-btn:hover{ border-color:#2a2d33; }
.icon-btn svg,
.icon-btn svg path{
  fill: currentColor;
}

/* ---------- Gallery Hover Effects ---------- */
/* 1) Lift + subtle zoom */
.masonry figure{
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform, box-shadow;
}
.masonry figure img{
  transition: transform .6s ease, filter .6s ease;
  will-change: transform, filter;
}
.masonry figure:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.masonry figure:hover img{
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.05);
}

/* 2) Overlay + zoom cue */
.masonry figure::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.0), rgba(0,0,0,.35));
  opacity:0; transition: opacity .35s ease;
  pointer-events: none;
}
.masonry figure::before{
  content:"↗︎";
  position:absolute; right:10px; bottom:8px;
  font-size:18px; line-height:1;
  color:#fff; opacity:0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.masonry figure:hover::after{ opacity:1; }
.masonry figure:hover::before{ opacity:1; transform: translateY(0); }

/* 3) Gentle tilt for depth */
.masonry{ perspective: 800px; }
.masonry figure{ transform-style: preserve-3d; }
.masonry figure:hover{
  transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
}

/* 4) Optional border glow sweep */
.masonry figure{
  --glow: linear-gradient(90deg, rgba(225,91,100,.0), rgba(225,91,100,.45), rgba(225,91,100,.0));
}
.masonry figure.glow::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:12px;
  background: var(--glow);
  background-size: 200% 100%;
  opacity:0; filter: blur(6px);
  transition: opacity .25s ease;
  pointer-events:none;
}
.masonry figure.glow:hover::after{
  opacity:.9;
  animation: sweep 1.2s linear forwards;
}
@keyframes sweep{
  from { background-position: 200% 0; }
  to   { background-position: 0% 0; }
}

/* 5) Cinematic pan (Ken Burns-style) — optional class */
.masonry figure.pan img{
  transform-origin: 50% 40%;
}
.masonry figure.pan:hover img{
  animation: panZoom 3s ease forwards;
}
@keyframes panZoom{
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.08) translate(2%, -2%); }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .masonry figure,
  .masonry figure img,
  .masonry figure::after,
  .masonry figure::before{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}