/* =========================================
   DYNAMIC VINYL ROOM DECOR
   ========================================= */

:root {
  --decor-accent: 210, 139, 73;
  --decor-left-tilt: -7deg;
  --decor-right-tilt: 8deg;
  --decor-inner-left: 1deg;
}


/* =========================================
   LAYERING
   ========================================= */

.room {
  position: relative;
  z-index: 3;
}

body::before {
  z-index: 2;
}

/*
 * Give the decorative pieces a document-flow anchor
 * so they scroll away naturally with the listening room
 * instead of staying fixed to the viewport.
 */
body {
  position: relative;
}


/* =========================================
   AMBIENT ALBUM GLOW
   ========================================= */

.decor-ambient {
  position: fixed;
  inset: -80px;

  z-index: 0;

  pointer-events: none;

  opacity: 0;

  background-position: center;
  background-size: cover;

  filter:
    blur(48px)
    saturate(1.25)
    brightness(0.55);

  transform: scale(1.14);

  transition:
    opacity 1.4s ease,
    background-image 0.8s ease,
    filter 1.2s ease;

  will-change:
    opacity,
    background-image;
}


.decor-ambient::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(36, 20, 12, 0.38) 0%,
      rgba(22, 13, 9, 0.68) 55%,
      rgba(12, 8, 6, 0.94) 100%
    );
}


.decor-ambient::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(
        var(--decor-accent),
        0.12
      ) 0%,
      rgba(
        var(--decor-accent),
        0.04
      ) 34%,
      rgba(12, 7, 5, 0.72) 100%
    );
}


body.decor-active .decor-ambient {
  opacity: 0.31;
}


/* =========================================
   COMMON DECOR
   ========================================= */

.decor-piece {
  position: absolute;

  z-index: 1;

  pointer-events: none;

  opacity: 0;

  transform-origin: center top;

  transition:
    opacity 0.9s ease,
    transform 1.1s
      cubic-bezier(
        0.22,
        0.8,
        0.28,
        1
      );

  will-change:
    opacity,
    transform,
    left,
    top;
}


/* =========================================
   LEFT POSTER
   ========================================= */

.decor-left {
  /*
   * These act as fallbacks.
   * decor.js now calculates the exact position from the
   * current speaker locations so the poster feels attached
   * to the stereo cluster and scrolls naturally.
   */
  left: calc(50% - 540px);
  top: 168px;

  width: clamp(
    148px,
    12vw,
    198px
  );

  transform:
    translateY(24px)
    rotate(var(--decor-left-tilt))
    scale(0.94);
}


body.decor-active .decor-left {
  opacity: 0.94;

  transform:
    translateY(0)
    rotate(var(--decor-left-tilt))
    scale(1);
}


.decor-poster {
  position: relative;

  padding:
    12px
    12px
    17px;

  overflow: visible;

  background:
    linear-gradient(
      160deg,
      #ddcba9,
      #bd9e73
    );

  color: #342316;

  border:
    1px solid
    rgba(255, 255, 255, 0.2);

  box-shadow:
    0 26px 48px
      rgba(0, 0, 0, 0.48),
    0 3px 8px
      rgba(0, 0, 0, 0.35);

  transform:
    rotate(
      var(--decor-inner-left)
    );
}


/* faux tape */

.decor-poster::before {
  content: "";

  position: absolute;

  width: 58px;
  height: 18px;

  left: 50%;
  top: -11px;

  transform:
    translateX(-50%)
    rotate(-3deg);

  background:
    rgba(226, 205, 153, 0.78);

  box-shadow:
    0 1px 2px
      rgba(0, 0, 0, 0.2);

  z-index: 4;
}


/* print texture */

.decor-poster::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.11;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(50, 25, 10, 0.15) 0px,
      rgba(50, 25, 10, 0.15) 1px,
      transparent 1px,
      transparent 4px
    );
}


.decor-poster img {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 0.78;

  object-fit: cover;

  filter:
    contrast(1.02)
    saturate(0.83)
    sepia(0.08);

  transform: scale(1.001);
}


.decor-poster-kicker {
  position: relative;

  margin-bottom: 8px;

  z-index: 2;

  font-size: 0.48rem;
  font-weight: 800;

  letter-spacing: 0.23em;

  opacity: 0.66;
}


.decor-poster-artist {
  position: relative;

  margin-top: 12px;

  z-index: 2;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(
    1rem,
    1.45vw,
    1.4rem
  );

  font-weight: 700;

  line-height: 0.98;

  text-transform: uppercase;
}


.decor-poster-title {
  position: relative;

  margin-top: 7px;

  z-index: 2;

  font-size: 0.58rem;

  line-height: 1.25;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  opacity: 0.72;
}


/* =========================================
   POSTER VARIANTS
   ========================================= */

/*
 * Variant 1:
 * classic warm record-shop poster
 */

body.decor-variant-1 .decor-poster {
  background:
    linear-gradient(
      155deg,
      #e1cfae,
      #b99868
    );
}


/*
 * Variant 2:
 * darker concert flyer
 */

body.decor-variant-2 .decor-poster {
  background:
    linear-gradient(
      150deg,
      #30251f,
      #17110e
    );

  color:
    #ead6b6;

  border:
    1px solid
    rgba(
      var(--decor-accent),
      0.42
    );
}


body.decor-variant-2
.decor-poster img {
  filter:
    saturate(0.62)
    contrast(1.18)
    brightness(0.82);
}


body.decor-variant-2
.decor-poster::after {
  opacity: 0.17;
}


/*
 * Variant 3:
 * brighter vintage promo card
 */

body.decor-variant-3 .decor-poster {
  background:
    linear-gradient(
      155deg,
      rgb(
        var(--decor-accent)
      ),
      #c49c68
    );

  color:
    #24140c;
}


body.decor-variant-3
.decor-poster img {
  filter:
    saturate(1.06)
    contrast(1.05);
}


/* =========================================
   GENERATED RECORD-STORE STICKER
   ========================================= */

.decor-sticker {
  display: none !important;
}


/* =========================================
   RIGHT ALBUM SLEEVE
   ========================================= */

.decor-right {
  /*
   * Fallback position only.
   * decor.js now anchors this sleeve to the right speaker.
   */
  left: calc(50% + 305px);
  right: auto;
  top: 170px;

  width: clamp(
    152px,
    12vw,
    205px
  );

  transform:
    translateY(26px)
    rotate(var(--decor-right-tilt))
    scale(0.94);
}


body.decor-active .decor-right {
  opacity: 0.95;

  transform:
    translateY(0)
    rotate(var(--decor-right-tilt))
    scale(1);
}


.decor-sleeve {
  position: relative;

  padding: 8px;

  background:
    linear-gradient(
      145deg,
      #654932,
      #2d1d13
    );

  border:
    2px solid
    rgba(20, 11, 6, 0.78);

  box-shadow:
    0 27px 52px
      rgba(0, 0, 0, 0.55),
    0 3px 8px
      rgba(0, 0, 0, 0.35);
}


.decor-sleeve::before {
  content: "";

  position: absolute;

  inset: -4px;

  z-index: -2;

  border:
    2px solid
    rgba(
      var(--decor-accent),
      0.18
    );

  box-shadow:
    0 0 24px
      rgba(
        var(--decor-accent),
        0.12
      );
}


.decor-sleeve::after {
  content: "";

  position: absolute;

  inset: 8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  pointer-events: none;
}


.decor-sleeve img {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;
}


.decor-sleeve-tab {
  position: absolute;

  right: -10px;
  bottom: -19px;

  padding:
    6px
    10px;

  background:
    rgb(
      var(--decor-accent)
    );

  color:
    #21140c;

  font-size:
    0.47rem;

  font-weight:
    800;

  letter-spacing:
    0.15em;

  box-shadow:
    0 5px 12px
      rgba(0, 0, 0, 0.35);

  transform:
    rotate(-3deg);
}


/* =========================================
   VINYL PEEKING FROM SLEEVE
   ========================================= */

.decor-right::before {
  content: "";

  position: absolute;

  width: 84%;

  aspect-ratio:
    1 / 1;

  right: -18%;
  top: 11%;

  border-radius:
    50%;

  z-index: -1;

  opacity:
    0.74;

  background:
    repeating-radial-gradient(
      circle,
      #141414 0px,
      #141414 3px,
      #222 4px,
      #222 5px
    );

  box-shadow:
    5px 15px 25px
      rgba(0, 0, 0, 0.42);
}


/*
 * Remove the faux center label.
 * With the current sleeve angle/peek amount it reads like
 * a random floating circle artifact.
 */

.decor-right::after {
  content: none;
}


/* =========================================
   DESKTOP RESPONSIVENESS
   ========================================= */

@media (max-width: 1320px) {

  .decor-left {
    left: calc(50% - 486px);
    top: 176px;
    width: 142px;
  }

  .decor-right {
    left: calc(50% + 285px);
    right: auto;
    top: 176px;
    width: 148px;
  }

  .decor-sticker {
    right: -12px;
    max-width: 100px;
  }

}


@media (max-width: 1160px) {

  .decor-left,
  .decor-right {
    display: none;
  }

  body.decor-active
  .decor-ambient {
    opacity: 0.24;
  }

}


/* =========================================
   TABLET / PHONE
   ========================================= */

@media (max-width: 820px) {

  body.decor-active
  .decor-ambient {
    opacity: 0.20;
  }

}


@media (max-width: 540px) {

  .decor-ambient {
    filter:
      blur(32px)
      saturate(1.08)
      brightness(0.58);
  }

  body.decor-active
  .decor-ambient {
    opacity: 0.16;
  }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (
  prefers-reduced-motion: reduce
) {

  .decor-piece,
  .decor-ambient {
    transition: none;
  }

}