:root {
  --dark-blue: #131313;
  --light-blue: #a2cdee;
  --diminish-scale: 0.9; /* Starting scale for inner circles */
    --duets-pink : #ea6194;
     --duets-white : #ffffff;
}



a.duets_preorder { 
    font-size:20px;
    text-decoration: none;
    text-decoration-color: var(--duets-pink);
    text-decoration-thickness: 5px;
    text-underline-offset: 15px;
    color:var(--duets-pink);
    transition:
    text-underline-offset 0.3s ease,
    text-decoration-color 0.3s ease,
    color 0.3s ease;
}

a.duets_preorder:hover { 
    text-decoration-color: var(--duets-white);
    text-underline-offset: 20px;
    color:var(--duets-white);
}



a.continue_button { 
      font-family: "CooperBlackLTPro";
    font-size:15px;
    text-decoration: none;
    color:var(--duets-white);
    transition:
    color 0.3s ease;
}

a.continue_button:hover { 
  
    color:var(--duets-pink);
}

#announcing { opacity:0; margin-bottom:20px; }
#featuring { opacity:0; }
#preorder { opacity:0; margin-bottom:40px; }
#single { opacity:0; }

#continue { position:fixed; opacity:0; right:20px; bottom:20px; z-index:10; }


#duets_cover {
  border:0;
    margin-top:0px;
    opacity:0;
    margin-bottom:20px;
}



.forceUpper{

}

#artist-rotator {
    margin-top:20px;
    
    height:40px;
  position: relative;
  overflow: hidden;
  text-align:center;
    opacity:0;
      margin-bottom:20px;
}

.artist {
      font-family: "CooperBlackLTPro";
    color:var(--duets-pink);
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
    width:100%;
  white-space: nowrap;
    text-align:center;
      font-size:32px;
      line-height:px;
    
}

.duets_cover {
  width: min(50vw, 50vh);
height: min(50vw, 50vh);
    aspect-ratio:1;
}
    
    
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper1 {
  z-index:-1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
}

.circle {
  position: absolute;
  aspect-ratio: 1;
  display: block; /* SVG default is inline */
  width: 100%;
  height: 100%;
}

.circle1 circle { fill: var(--dark-blue); }
.circle2 circle { fill: var(--light-blue); }
.circle3 circle { fill: var(--dark-blue); }
.circle4 circle { fill: var(--light-blue); }
.circle5 circle { fill: var(--dark-blue); }

/* Scaling for inner circles */
.circle2,
.circle3,
.circle4,
.circle5 {
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(var(--diminish-scale));
  transform-origin: top center;
}


.flash {
  box-shadow: 0 0 30px 20px rgba(255,255,255,0.7);
  transition: box-shadow 0.3s ease-out;
}

.center-text-wrapper {
  position: relative; /* So z-index applies */
  z-index: 1;         /* Bring this in front */
  min-height: 100svh;           /* Always at least full viewport height */
  display: flex;               /* Enable flexbox */
  align-items: center;         /* Vertical centring */
  justify-content: center;     /* Horizontal centring */
  text-align: center;          /* Keep text aligned */
  padding: 0px;               /* Give a bit of breathing room */
  box-sizing: border-box;      /* Ensure padding doesn’t cause overflow */
}

.center-text {
  font-family: "CooperBlackLTPro";
  font-style: normal;
  font-stretch: normal;
  font-weight: 900;
  font-size: 20px;
  color: #FFFFFF;
  mix-blend-mode: normal;
}


.center-text .layer-light {
  color: var(--light-blue);
  mix-blend-mode: darken;
  position: absolute;
  top: 0;
  left: 0;
}

.center-text .layer-dark {
  color: var(--dark-blue);
  mix-blend-mode: lighten;
  position: absolute;
  top: 0;
  left: 0;
}


@media (max-width: 767px) {
    #preorder {  margin-bottom:20px; }
    .center-text {
   font-size:14px;
    width:95vw;
    }
    
    .artist { font-size:24px;  line-height:28px;  }
    a.duets_preorder {   font-size:13px; }
       a.continue_button {   font-size:13px; }
    #artist-rotator {
    height:28px;
    }
    
 #duets_cover {
     margin-bottom:5px;
 }
 
}

.bordered-box { display:none; }

.logo { display:none; }


.wrapper1 * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  .wrapper.wrapper1 {
    display: none !important;
  }
}