.new_releases_bkg1{
  background: #060102;
  background: linear-gradient(128deg,rgba(0, 0, 0, 1) 0%, rgba(18, 1, 1, 1) 66%);
}

.new_releases_bkg{
  background: url('/themes/unde/assets/images/nr_bkg.png') no-repeat scroll center center/contain ;
}











/* CSS */
:root{
  /* One full cycle length */
  --cycle: 1.5s;
  /* Base size for the stack – tweak as needed */
  --base-size: min(80vmin, 720px);
}

/* Page framing (optional) */

.nr_wrapper {
  display: grid;
  place-items: center; /* centers the whole stack */
}

/* Centered stacking context */
.bg-stack{
  position: relative;
  width: var(--base-size);
  height: var(--base-size);
}

/* All layers share the same centering + size behavior */
.bg-stack .layer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transform-origin: center center;
  max-width: 100%;
  max-height: 100%;
  width: auto;   /* keep natural aspect ratio */
  height: auto;  /* keep natural aspect ratio */
  image-rendering: auto;
}

/* Stacking order (0 at the bottom, 3 on top) */
.layer-0 { z-index: 0; 
filter: sepia(1) saturate(8) hue-rotate(311deg) brightness(0.6) contrast(1.1);}
.layer-1 { z-index: 1; }
.layer-2 { z-index: 2; }
.layer-3 { z-index: 3; }

/* --- Animations --- */

/* L1: oscillate HEIGHT only (0 ↔ 100%) every 1.5s */
.layer-1{
  /* keep X at 1, animate Y only */
  animation: pulseY var(--cycle) linear infinite;
  transform-origin: center center;
}
@keyframes pulseY{
  0%   { transform: translate(-50%,-50%) scaleY(0); }
  50%  { transform: translate(-50%,-50%) scaleY(1); }
  100% { transform: translate(-50%,-50%) scaleY(0); }
}

/* L2: oscillate WIDTH+HEIGHT (0 ↔ 100%) + clockwise rotation */
.layer-2{
  /* run two animations in parallel: spin + scale pulse */
  animation:
    spin var(--cycle) linear infinite,
    pulse var(--cycle) linear infinite;
}
@keyframes pulse{
  0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg); }
  50%  { transform: translate(-50%,-50%) scale(1) rotate(180deg); }
  100% { transform: translate(-50%,-50%) scale(0) rotate(360deg); }
}
/* (Optional alternative: separate spin/pulse keyframes)
@keyframes spin{
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes pulseOnly{
  0%,100% { transform: translate(-50%,-50%) scale(0); }
  50%     { transform: translate(-50%,-50%) scale(1); }
}
*/

/* L3: clockwise rotation at same rate as L2 */
.layer-3{
  animation: spin var(--cycle) linear infinite;
}
@keyframes spin{
  0%   { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .layer-1, .layer-2, .layer-3{
    animation: none !important;
  }
}




/*
.layer-0{
  animation: glowPulse var(--cycle) linear infinite;
  will-change: filter;
}

@keyframes glowPulse{
  0%, 49%, 51%, 100% {
    filter: none;
  }
  50% {
    filter:
      drop-shadow(0 0 18px rgba(255, 0, 0, 0.9))
      drop-shadow(0 0 36px rgba(255, 0, 0, 0.6));
  }
}

@media (prefers-reduced-motion: reduce){
  .layer-0{
    animation: none !important;
    filter: none !important;
  }
}

*/