/* reset margin/padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* we’ll set the background in JS */
body {
  min-height: 100svh;
  background: rgb(10, 10, 25);
  font-family: 'Bellefair', serif;
  font-weight: 400; 
  overflow: hidden; 
}
/* bg layer sits behind everything else */
#bg {
  position: fixed;   top: 0; left: 0;
  width: 100%;       height: 100%;
  background-color: #111;
  background-repeat: no-repeat;
  background-size: cover;
  /* start totally transparent: */
  opacity: 0;
  /* only the opacity is animatable: */
  transition: opacity 1.5s ease-in-out;
  z-index: -1;
  background-position: center top;
}

/* once .loaded is added, fade opacity 0→1 */
#bg.loaded {
  opacity: 1;
}


/* overlay to position content above the BG */
.overlay {
  position: relative;
  width: 100%;
  height: 100svh;
  color: white;
}

#title {
  position: absolute;
  top: 1rem;
  left: 3rem;
  font-size: clamp(3rem, 17vw, 8rem);
  font-weight: lighter;
  /* start hidden + offset via CSS vars */
  opacity: 0;
  transform: translate(var(--dx, 0), var(--dy, 0));
  --dx: -20px; --dy: -20px;
  user-select: none;
}

.links {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* start hidden + offset */
  opacity: 0;
  transform: translate(var(--dx, 0), var(--dy, 0));
  --dx: 20px; --dy: 20px;
  user-select: none;
}
.overlay.animate #title {
  animation: fadeMoveIn 1s ease-out forwards;
  animation-delay: 0.3s;
}
.overlay.animate .links {
  animation: fadeMoveIn 1s ease-out forwards;
  animation-delay: 0.6s;
}
.links a {
  color: white;
  text-decoration: none;
  font-size: clamp(1rem, 5vw, 2rem);;
}

.links a:hover {
  text-decoration: underline;
  color: burlywood;
}
.blur-box {
  margin-top: 1em; /* space below the h1 */
  padding: 1em;
  /*background: rgba(0, 0, 0, 0.3); /* semi-transparent white */
  backdrop-filter: blur(2px); /* blur what's behind the div */
  -webkit-backdrop-filter: blur(2px); /* Safari support */
  
}

/* Animation */
@keyframes fadeMoveIn {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
#bg.pan {
  /* start at top center */
  background-position: center top;
  /* animate over 60s, ease-in-out so it slows at the ends */
  animation: panBg 30s ease-in-out infinite;
}
/* vertical pan (too tall) */
#bg.pan-vertical {
  background-position: center top;
  animation: panVertical 60s ease-in-out infinite;
}

@keyframes panVertical {
  0%,   8.33%  { background-position: center top; }
  25%        { background-position: center center; }
  33.33%   { background-position: center center; }
  50%        { background-position: center bottom; }
  58.33%   { background-position: center bottom; }
  75%        { background-position: center center; }
  83.33%   { background-position: center center; }
  100%       { background-position: center top; }
}

/* horizontal pan (too wide) */
#bg.pan-horizontal {
  background-position: left center;
  animation: panHorizontal 60s ease-in-out infinite;
}

@keyframes panHorizontal {
  0%,   8.33%  { background-position: left center; }
  25%        { background-position: center center; }
  33.33%   { background-position: center center; }
  50%        { background-position: right center; }
  58.33%   { background-position: right center; }
  75%        { background-position: center center; }
  83.33%   { background-position: center center; }
  100%       { background-position: left center; }
}

/* shared styles for both the pause/play toggle and the shuffle button */
.icon-btn {
  position: fixed;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, background 0.2s;
  z-index: 999;
}
.icon-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.3);
}

/* center the icon inside */
.icon-btn::before {
  content: "";
  display: block;
  margin: auto;
}

/* position each one */
#anim-toggle { left: 1rem; }
#shuffle-img { left: calc(1rem + 3rem + 1rem); } /* 1rem (gap) to the right of the first */

/* pause/play-specific icons */
#anim-toggle.pause::before {
  width: 1rem;
  height: 1rem;
  background: white;
}
#anim-toggle.play::before {
  width: 0;
  height: 0;
  border-top:    0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left:   1rem solid white;
}

/* shuffle-specific icon — swap in your own SVG or PNG path */
#shuffle-img::before {
  content: url('shuffle.svg');
  width: 1.5rem;
  height: 1.5rem;
  filter: invert(1);
}