/* Premium store frames shared by the gallery and wallpaper viewer. */
.frame--neonrounded > .card-frame-skin,
.frame--neongradient > .card-frame-skin {
  display:block;
  isolation:isolate;
  opacity:1;
  /* The neon paint is a frame, not an overlay. Keeping it behind the media
     preserves the wallpaper while the padded outer contour stays visible. */
  z-index:1 !important;
}

/* Frames must retain a physical perimeter in every grid, including profile
   collections where compact cards otherwise leave too little outer space. */
.frame--neonrounded,
.frame--neongradient {
  isolation:isolate;
  overflow:visible !important;
  padding:11px !important;
}
.frame--neonrounded > .collectible-card__media,
.frame--neongradient > .collectible-card__media {
  position:relative;
  z-index:2 !important;
}
#wallpaper-grid,
#profile-wallpaper-grid,
#creator-grid { overflow:visible; }

.frame--neonrounded > .card-frame-skin {
  border:2px solid transparent;
  border-radius:var(--frame-radius,34px);
  background:linear-gradient(transparent,transparent) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--tier) 92%,#fff),color-mix(in srgb,var(--accent) 82%,var(--tier)) 42%,#fff 56%,var(--tier) 72%,color-mix(in srgb,var(--accent) 76%,#fff)) border-box;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tier) 64%,transparent),0 0 13px color-mix(in srgb,var(--tier) 54%,transparent),0 0 28px color-mix(in srgb,var(--accent) 26%,transparent);
}
.frame--neonrounded > .card-frame-skin::before {
  inset:0;
  padding:0;
  border-radius:inherit;
  background:transparent;
  filter:none;
}
.frame--neonrounded > .card-frame-skin::after {
  inset:5px;
  border-color:color-mix(in srgb,#fff 36%,var(--tier));
  opacity:.9;
  box-shadow:inset 0 0 10px color-mix(in srgb,var(--tier) 20%,transparent),0 0 11px color-mix(in srgb,var(--accent) 22%,transparent);
}

.frame--neongradient > .card-frame-skin {
  border:2px solid transparent;
  border-radius:32px;
  background:linear-gradient(transparent,transparent) padding-box,conic-gradient(from var(--frame-angle),#23f4ff 0deg,#267eff 68deg,#7155ff 140deg,#d84bff 214deg,#ff70db 282deg,#23f4ff 360deg) border-box;
  box-shadow:0 0 0 1px rgba(46,200,255,.44),0 0 15px rgba(40,184,255,.4),0 0 31px rgba(151,72,255,.24);
  animation:gradient-frame-orbit 7.2s linear infinite;
}
.frame--neongradient > .card-frame-skin::before {
  inset:0;
  padding:0;
  border-radius:inherit;
  background:transparent;
  filter:none;
}
.frame--neongradient > .card-frame-skin::after {
  inset:5px;
  border-color:rgba(208,239,255,.56);
  opacity:.76;
  box-shadow:inset 0 0 12px rgba(73,119,255,.15),0 0 10px rgba(40,243,255,.17);
}

@media (prefers-reduced-motion:reduce) {
  .frame--neongradient > .card-frame-skin { animation:none; }
}

@media (max-width:760px) {
  .frame--neonrounded,
  .frame--neongradient {
    /* Preserve an obvious neon rim in the two-column mobile layout. */
    padding:10px !important;
  }
  .frame--neonrounded > .card-frame-skin,
  .frame--neongradient > .card-frame-skin {
    inset:0 !important;
    border-width:2px;
  }
}

/* Cyberpunk: light packets follow the chamfered perimeter instead of crossing
   the image and escaping into the details panel. The card retains its halo;
   only the decorative layer clips its own paint. */
.collectible-card.frame--cyberpunk > .card-frame-skin {
  overflow:clip;
  transform:none;
  isolation:isolate;
  will-change:auto;
}
.frame--cyberpunk > .card-frame-skin::before {
  animation:cyber-border-breathe 4.8s ease-in-out infinite;
}
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__tracer {
  inset:0 auto auto 0;
  width:7%;
  max-width:28px;
  height:3px;
  border-radius:999px;
  offset-path:polygon(9% 2%,91% 2%,98% 9%,98% 91%,91% 98%,9% 98%,2% 91%,2% 9%);
  offset-anchor:center;
  offset-rotate:auto;
  transform:none;
  opacity:1;
  background:linear-gradient(90deg,transparent,var(--tier) 38%,var(--accent) 70%,#fff 92%);
  box-shadow:0 0 5px var(--tier),0 0 11px var(--accent);
  animation:cyber-perimeter-orbit 7s linear infinite;
}
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__tracer--2 {
  animation-delay:-3.5s;
  animation-direction:normal;
}
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__rail {
  background:linear-gradient(90deg,var(--tier),#eaffff,var(--accent),var(--tier));
  background-size:240% 100%;
  animation:cyber-rail-flow 3.6s ease-in-out infinite;
}
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__rail--right { animation-delay:-.9s; }
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__rail--bottom { animation-delay:-1.8s; }
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__rail--left { animation-delay:-2.7s; }
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__spark {
  animation:cyber-corner-charge 3.6s ease-in-out infinite;
}
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__spark--2 { animation-delay:-.9s; }
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__spark--3 { animation-delay:-1.8s; }
.frame--cyberpunk > .card-frame-skin > .card-frame-skin__spark--4 { animation-delay:-2.7s; }
.frame--cyberpunk.is-visible .collectible-card__shine {
  background:linear-gradient(90deg,transparent,rgba(50,229,255,.06),rgba(225,255,255,.3),rgba(155,70,255,.08),transparent);
  animation:cyber-polish-sweep 7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cyber-perimeter-orbit { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes cyber-border-breathe { 0%,100% { opacity:.65; } 50% { opacity:1; } }
@keyframes cyber-rail-flow {
  0%,100% { background-position:0% 50%; opacity:.5; }
  50% { background-position:100% 50%; opacity:1; }
}
@keyframes cyber-corner-charge { 0%,100% { opacity:.4; } 45%,60% { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .frame--cyberpunk > .card-frame-skin::before { animation:none; }
}