/* Premium card presentation — holographic trading card finish */

/* Loading shimmer */
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.gallery-item:not(.loaded){background:linear-gradient(90deg,#161625 25%,#1e1e30 50%,#161625 75%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite}

/* Card frame */
.gallery-item{
  --card-border:rgba(255,255,255,0.06);
  --card-glow:rgba(219,97,162,0.0);
  background:linear-gradient(145deg,#161625 0%,#111120 100%);
  padding:5px;
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:transform 0.5s cubic-bezier(.03,.98,.52,.99),box-shadow 0.5s cubic-bezier(.03,.98,.52,.99);
  transform-style:preserve-3d;
  will-change:transform;
}
.gallery-item img{
  border-radius:12px;
  position:relative;z-index:1;
}
.gallery-item:hover{
  --card-border:rgba(255,255,255,0.12);
  --card-glow:rgba(219,97,162,0.18);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.6),
    0 20px 60px rgba(0,0,0,0.45),
    0 0 40px var(--card-glow),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Holographic shimmer overlay */
.gallery-item::after{
  content:'';position:absolute;inset:5px;z-index:2;
  border-radius:12px;pointer-events:none;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(219,97,162,0.07) 35%,
    rgba(120,200,255,0.06) 41%,
    rgba(255,220,120,0.05) 47%,
    rgba(200,120,255,0.06) 53%,
    rgba(219,97,162,0.07) 59%,
    transparent 74%
  );
  background-size:250% 250%;
  opacity:0;
  transition:opacity 0.5s ease;
  animation:holo-shift 6s ease-in-out infinite;
  mix-blend-mode:screen;
}
.gallery-item:hover::after{opacity:1}
@keyframes holo-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Diagonal light sweep */
.gallery-item::before{
  content:'';position:absolute;inset:5px;z-index:3;
  border-radius:12px;pointer-events:none;overflow:hidden;
  background:linear-gradient(
    105deg,
    transparent 38%,
    rgba(255,255,255,0.06) 46%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.06) 54%,
    transparent 62%
  );
  background-size:300% 100%;
  background-position:100% 0;
  opacity:0;
  transition:opacity 0.3s ease;
}
.gallery-item:hover::before{
  opacity:1;
  animation:light-sweep 1.2s ease-out forwards;
}
@keyframes light-sweep{
  from{background-position:100% 0}
  to{background-position:-100% 0}
}

/* Premium caption */
.gallery-item figcaption{
  z-index:4;
  font-weight:600;letter-spacing:0.08em;
  text-shadow:0 1px 6px rgba(0,0,0,0.9),0 0 20px rgba(0,0,0,0.5);
  background:linear-gradient(to top,rgba(10,10,15,0.92) 0%,rgba(10,10,15,0.6) 60%,transparent 100%);
  border-radius:0 0 12px 12px;
  padding:32px 14px 12px;
}

/* Detail view — premium image frame */
.detail-frame{
  position:relative;
  padding:6px;
  background:linear-gradient(145deg,#161625 0%,#111120 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.5),
    0 16px 64px rgba(0,0,0,0.4),
    0 0 60px rgba(219,97,162,0.06);
  margin-bottom:32px;
  overflow:hidden;
}
.detail-frame img{
  width:100%;max-height:70vh;object-fit:contain;
  display:block;border-radius:12px;
}
.detail-frame::after{
  content:'';position:absolute;inset:6px;z-index:1;
  border-radius:12px;pointer-events:none;
  background:linear-gradient(
    115deg,transparent 25%,
    rgba(219,97,162,0.04) 40%,rgba(120,200,255,0.03) 50%,
    rgba(219,97,162,0.04) 60%,transparent 75%
  );
  background-size:250% 250%;
  animation:holo-shift 8s ease-in-out infinite;
  mix-blend-mode:screen;
}

/* Timeline thumb — mini card treatment */
.timeline-thumb{
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
  transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.timeline-thumb:hover{
  box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 20px rgba(219,97,162,0.1);
}

/* Mobile — auto-animate holographic, no tilt, lighter shadows */
@media(max-width:768px){
  .gallery-item{padding:4px;border-radius:12px}
  .gallery-item img{border-radius:9px}
  .gallery-item::after{opacity:0.5;inset:4px;border-radius:9px}
  .gallery-item::before{display:none}
  .gallery-item figcaption{border-radius:0 0 9px 9px}
  .detail-frame{padding:4px;border-radius:12px}
  .detail-frame img{border-radius:9px}
  .detail-frame::after{inset:4px;border-radius:9px}
}
@media(max-width:480px){
  .gallery-item{padding:3px;border-radius:10px}
  .gallery-item img{border-radius:8px}
  .gallery-item::after{inset:3px;border-radius:8px}
  .gallery-item figcaption{border-radius:0 0 8px 8px;padding:24px 10px 8px;font-size:12px;transform:translateY(0)}
  .detail-frame{padding:3px;border-radius:10px}
  .detail-frame img{border-radius:8px}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .gallery-item,.gallery-item::before,.gallery-item::after{animation:none!important;transition:none}
  .gallery-item:hover{transform:none!important}
  .gallery-item:not(.loaded){animation:none!important;background:var(--surface)}
  .detail-frame::after{animation:none}
}