/* ==========================================================================
   OLIVIA RODRIGO  (guest 2 of 3)
   her violet scrapbook inside the goth site: a record player, a taped photo,
   a sticky note, one Spotify player and a handwritten setlist.
   Everything here is scoped under #olivia. Markup comes from js/olivia.js.
   ========================================================================== */

/* --sec-bg / --sec-glow feed the shared section painting in style.css */
#olivia {
  --sec-bg: rgba(29, 13, 49, .95);
  --sec-glow: rgba(160, 120, 255, .18);
  --or-glow: rgba(139, 92, 246, .32);
  --or-violet: #7b4bd6;
  --or-purple: #8b5cf6;
  --or-lilac: #c4a6ff;
  --or-paper: #f3ecff;
  --or-ink: #24123b;
  --or-ink-soft: #6a528f;
  --or-rose: #a8205f;
  color: var(--bone);
}

#olivia .or-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* violet light + a few stars. Fades out at the top and bottom so the seams
   with the sections around it stay soft. */
#olivia .or-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 20% at 50% 30%, rgba(123, 75, 214, .34), transparent 70%),
    radial-gradient(ellipse 70% 18% at 8% 70%, rgba(255, 143, 199, .1), transparent 70%),
    radial-gradient(ellipse 60% 20% at 94% 58%, rgba(139, 92, 246, .18), transparent 70%),
    radial-gradient(1.5px 1.5px at 9% 14%, rgba(230, 219, 255, .8), transparent),
    radial-gradient(1px 1px at 27% 8%, rgba(255, 194, 223, .75), transparent),
    radial-gradient(2px 2px at 84% 11%, rgba(196, 166, 255, .75), transparent),
    radial-gradient(1px 1px at 63% 19%, rgba(244, 238, 232, .6), transparent),
    radial-gradient(1.5px 1.5px at 95% 36%, rgba(255, 143, 199, .6), transparent),
    radial-gradient(1px 1px at 4% 47%, rgba(230, 219, 255, .55), transparent),
    radial-gradient(1.5px 1.5px at 96% 78%, rgba(196, 166, 255, .55), transparent),
    radial-gradient(1px 1px at 6% 88%, rgba(255, 194, 223, .5), transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}

#olivia .section-head { position: relative; }
#olivia .or-layout {
  position: relative;
  z-index: 1;
}

#olivia .guest-kicker { color: var(--or-lilac); }
#olivia .section-title {
  color: #f1e9ff;
  text-shadow: 0 0 18px rgba(139, 92, 246, .45);
}
#olivia .or-mark {
  display: inline-block;
  color: var(--pink);
  text-shadow: 0 0 14px rgba(255, 143, 199, .5);
  transform: rotate(-4deg);
}
#olivia .section-lede { color: rgba(236, 226, 255, .82); }

/* ---------- stickers + washi tape ---------- */
#olivia .or-sticker {
  position: absolute;
  z-index: 3;
  display: block;
  width: 36px;
  height: 36px;
  pointer-events: none;
  color: var(--pink);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
}
#olivia .or-sticker > svg { display: block; width: 100%; height: 100%; overflow: visible; }

#olivia .or-tape {
  position: absolute;
  z-index: 4;
  display: block;
  width: 70px;
  height: 22px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 5px, rgba(255, 255, 255, 0) 5px 11px),
    rgba(206, 180, 255, .8);
  -webkit-clip-path: polygon(0 12%, 5% 0, 11% 8%, 17% 0, 83% 0, 89% 6%, 95% 0, 100% 14%, 96% 32%, 100% 50%, 95% 68%, 100% 86%, 94% 100%, 87% 93%, 80% 100%, 20% 100%, 13% 94%, 6% 100%, 0 88%, 4% 70%, 0 50%, 5% 31%);
  clip-path: polygon(0 12%, 5% 0, 11% 8%, 17% 0, 83% 0, 89% 6%, 95% 0, 100% 14%, 96% 32%, 100% 50%, 95% 68%, 100% 86%, 94% 100%, 87% 93%, 80% 100%, 20% 100%, 13% 94%, 6% 100%, 0 88%, 4% 70%, 0 50%, 5% 31%);
}

/* ---------- equalizer bars (sticky note + current row) ---------- */
#olivia .or-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  opacity: 0;
  transition: opacity .3s ease;
}
#olivia .or-eq i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  transform-origin: 50% 100%;
  transform: scaleY(.3);
  animation: orEq .8s ease-in-out infinite alternate;
  animation-play-state: paused;
}
#olivia .or-eq i:nth-child(2) { animation-duration: .55s; animation-delay: -.2s; }
#olivia .or-eq i:nth-child(3) { animation-duration: .9s; animation-delay: -.45s; }
#olivia .or-eq i:nth-child(4) { animation-duration: .65s; animation-delay: -.3s; }
#olivia.is-playing .or-note .or-eq,
#olivia .or-row.is-playing .or-eq { opacity: 1; }
#olivia.is-playing .or-note .or-eq i,
#olivia .or-row.is-playing .or-eq i { animation-play-state: running; }
@keyframes orEq {
  from { transform: scaleY(.22); }
  to   { transform: scaleY(1); }
}

/* ==========================================================================
   the deck: sticky note + photo on top, record player under them
   ========================================================================== */
#olivia .or-deck {
  position: relative;
  width: min(100%, 400px);
  margin: 0 auto;
}
/* soft purple light around the player */
#olivia .or-deck::before {
  content: "";
  position: absolute;
  inset: 30% 0 -6% 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--or-glow), transparent);
  opacity: .7;
  transition: opacity 1s ease;
  pointer-events: none;
}
#olivia.is-playing .or-deck::before { opacity: 1; }

#olivia .or-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5%;
  margin-bottom: -18px;
  padding: 0 1%;
}
#olivia .or-top.no-photo { justify-content: center; margin-bottom: 16px; }
#olivia .or-top.no-photo .or-note { flex-basis: 64%; margin-bottom: 0; }

/* sticky note: what's on */
#olivia .or-note {
  position: relative;
  flex: 0 0 40%;
  min-width: 0;
  min-height: 108px;
  margin: 0 0 34px;
  padding: 20px 11px 12px;
  text-align: left;
  color: var(--or-ink);
  background:
    repeating-linear-gradient(180deg, rgba(123, 75, 214, 0) 0 23px, rgba(123, 75, 214, .16) 23px 24px),
    #f5eeff;
  border-radius: 3px 3px 10px 3px;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .45), inset 0 -10px 18px rgba(123, 75, 214, .08);
  transform: rotate(-4deg);
}
#olivia .or-note-tape {
  top: -11px;
  left: 50%;
  width: 64px;
  margin-left: -32px;
  background-color: rgba(255, 194, 223, .82);
  transform: rotate(3deg);
}
#olivia .or-note-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-type);
  font-size: .66rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
}
#olivia .or-note .or-eq { height: 11px; color: var(--or-rose); }
#olivia .or-note-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 7px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  line-height: 1;
  color: var(--or-ink);
  overflow-wrap: anywhere;
}
#olivia .or-note-heart {
  right: -9px;
  bottom: -11px;
  width: 30px;
  height: 30px;
  transform: rotate(12deg);
}

/* taped photo sticker: tiara GIF, guitar GIF while a song plays */
#olivia .or-photo {
  position: relative;
  flex: 0 0 55%;
  min-width: 0;
  margin: 0;
  padding: 7px;
  border-radius: 14px;
  background: linear-gradient(150deg, #fff7fc, #f0e6ff 60%, #ffe0f0);
  box-shadow:
    0 0 0 2px #a77bf3,
    0 18px 34px rgba(0, 0, 0, .5),
    0 0 34px rgba(139, 92, 246, .3);
  transform: rotate(3deg);
  transition: opacity .6s ease, box-shadow .6s ease;
}
#olivia.is-playing .or-photo {
  box-shadow:
    0 0 0 2px var(--pink),
    0 18px 34px rgba(0, 0, 0, .5),
    0 0 40px rgba(255, 143, 199, .35);
}
#olivia .or-photo.is-gone { opacity: 0; }
#olivia .or-photo-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 45%, rgba(196, 166, 255, .25), transparent 62%),
    #1b0d2c;
}
@supports not (aspect-ratio: 1 / 1) {
  #olivia .or-photo-box { height: 0; padding-bottom: 100%; }
}
#olivia .or-gif {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#olivia .or-gif.is-on.is-loaded { opacity: 1; }
#olivia .or-photo-tape {
  top: -12px;
  left: 50%;
  margin-left: -35px;
  transform: rotate(-5deg);
}
#olivia .or-photo-star {
  left: -15px;
  top: 18%;
  width: 34px;
  height: 34px;
  transform: rotate(-14deg);
}

/* ---------- the record player ---------- */
#olivia .or-tt {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 25% 8%, rgba(255, 255, 255, .12), transparent 55%),
    linear-gradient(165deg, #4b2579 0%, #36195c 48%, #230f41 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -7px 0 rgba(0, 0, 0, .28),
    0 0 0 1px rgba(196, 166, 255, .28),
    0 26px 48px rgba(0, 0, 0, .55);
}
@supports not (aspect-ratio: 4 / 3) {
  #olivia .or-tt { height: 0; padding-bottom: 75%; }
}
#olivia .or-tt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--paper-noise);
  opacity: .4;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
#olivia .or-tt::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  border: 1px solid rgba(230, 219, 255, .12);
  pointer-events: none;
}
#olivia .or-tt-light {
  position: absolute;
  left: -2%;
  top: 2%;
  width: 74%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 166, 255, .55), rgba(139, 92, 246, .2) 55%, transparent);
  opacity: .45;
  transition: opacity 1s ease;
  pointer-events: none;
}
#olivia.is-playing .or-tt-light { opacity: 1; animation: orGlow 2.6s ease-in-out infinite; }
@keyframes orGlow {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}

#olivia .or-platter {
  position: absolute;
  left: 5%;
  top: 11%;
  width: 64%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, #19121f 0 66%, #4a4056 67.5% 69%, #19121f 70.5%);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .55),
    0 0 0 2px rgba(15, 8, 24, .8),
    0 0 0 4px rgba(196, 166, 255, .14);
  container-type: inline-size;
}
@supports not (aspect-ratio: 1 / 1) {
  #olivia .or-platter { height: 0; padding-bottom: 64%; }
}

#olivia .or-vinyl {
  position: absolute;
  inset: 3.5%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}
/* grooves + label turn; the light on them and the OR text stay still */
#olivia .or-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 10deg,
      rgba(255, 255, 255, 0) 0deg, rgba(210, 190, 255, .2) 20deg, rgba(255, 255, 255, 0) 44deg,
      rgba(255, 255, 255, 0) 196deg, rgba(255, 160, 210, .15) 220deg, rgba(255, 255, 255, 0) 246deg),
    radial-gradient(circle, transparent 0 47%, rgba(196, 166, 255, .1) 47.5% 48.2%, transparent 48.8% 66%, rgba(255, 143, 199, .08) 66.5% 67.2%, transparent 67.8% 84%, rgba(196, 166, 255, .09) 84.5% 85%, transparent 85.6%),
    repeating-radial-gradient(circle, #121016 0 1.3px, #211c28 1.3px 2.6px);
  animation: orSpin 1.8s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
#olivia.is-playing .or-disc { animation-play-state: running; }
@keyframes orSpin { to { transform: rotate(360deg); } }

#olivia .or-disc-label {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .32), transparent 44%),
    radial-gradient(circle, #b58cff 0%, #7b4bd6 60%, #4d2393 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 194, 223, .6), inset 0 0 0 5px rgba(75, 35, 147, .45);
}
/* a little pink star printed on the label, so you can see it turn */
#olivia .or-disc-label i {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 20%;
  height: 20%;
  transform: translateX(-50%);
  background: var(--pink);
  -webkit-clip-path: polygon(50% 0, 61% 36%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0 38%, 39% 36%);
  clip-path: polygon(50% 0, 61% 36%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0 38%, 39% 36%);
}
#olivia .or-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 300deg,
    rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .1) 30deg, rgba(255, 255, 255, 0) 62deg,
    rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .06) 212deg, rgba(255, 255, 255, 0) 240deg);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35%);
  mask: radial-gradient(circle, transparent 0 34%, #000 35%);
}
#olivia .or-label-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 53%;
  font-family: var(--font-goth);
  font-weight: 400;
  font-size: clamp(1rem, 5.6vw, 1.7rem);
  font-size: 11.5cqi;
  line-height: 1;
  text-align: center;
  color: #fff0f8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 0 10px rgba(255, 143, 199, .65);
  pointer-events: none;
}
#olivia .or-spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5%;
  height: 5%;
  margin: -2.5% 0 0 -2.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #9a93a6 60%, #4a4452);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* tonearm: rests beside the record, drops on while a song plays */
#olivia .or-arm-base {
  position: absolute;
  z-index: 3;
  left: 86%;
  top: 17%;
  width: 12%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #f4eff9, #948ca0 55%, #3d3548 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), 0 0 0 3px rgba(20, 10, 32, .35);
}
#olivia .or-arm {
  position: absolute;
  z-index: 4;
  left: 86%;
  top: 17%;
  width: 0;
  height: 62%;
  transform-origin: 0 0;
  transform: rotate(5deg);
  transition: transform 1.1s var(--ease-spring);
  pointer-events: none;
}
#olivia .or-arm::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -15px;
  width: 14px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(90deg, #5b5366, #c9c2d2, #5b5366);
}
#olivia .or-arm-rod {
  position: absolute;
  left: -2px;
  top: 0;
  width: 4px;
  height: 88%;
  border-radius: 2px;
  background: linear-gradient(90deg, #8c8596, #f4eff8, #8c8596);
  box-shadow: 2px 3px 4px rgba(0, 0, 0, .4);
}
#olivia .or-arm-head {
  position: absolute;
  left: -7px;
  bottom: 0;
  width: 14px;
  height: 15%;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, #ffc2df, #ff8fc7);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
  transform: rotate(14deg);
  transform-origin: 50% 0;
}
#olivia.is-playing .or-arm { transform: rotate(29deg); }

#olivia .or-led {
  position: absolute;
  left: 79%;
  top: 86%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #4b2a63;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  transition: background-color .4s ease, box-shadow .4s ease;
}
#olivia.is-playing .or-led {
  background: var(--pink);
  box-shadow: 0 0 6px var(--pink), 0 0 14px rgba(255, 143, 199, .6);
}
#olivia .or-rpm {
  position: absolute;
  left: 83%;
  top: 86%;
  transform: translateY(-50%);
  font-family: var(--font-type);
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(230, 219, 255, .62);
}
#olivia .or-tt-fly {
  left: -2px;
  bottom: -12px;
  width: 46px;
  height: 36px;
  color: var(--or-purple);
  transform: rotate(-12deg);
}
#olivia .or-tt-fly > svg { transform-origin: 50% 50%; animation: orFlap 2.2s ease-in-out infinite; }
@keyframes orFlap {
  0%, 38%, 100% { transform: scaleX(1); }
  52%           { transform: scaleX(.58); }
  66%           { transform: scaleX(1); }
  76%           { transform: scaleX(.7); }
  86%           { transform: scaleX(1); }
}

/* ==========================================================================
   the music: one player + the setlist
   ========================================================================== */
#olivia .or-music {
  width: min(100%, 440px);
  margin: 30px auto 0;
}

#olivia .or-embed {
  position: relative;
  height: 80px;
  overflow: hidden;
  border-radius: 14px;
  background: #160a26;
  box-shadow: 0 0 0 1px rgba(196, 166, 255, .28), 0 14px 30px rgba(0, 0, 0, .45);
  transition: height .45s var(--ease-out), box-shadow .4s ease;
  isolation: isolate;
}
#olivia .or-embed.is-album { height: 152px; }
#olivia.is-playing .or-embed {
  box-shadow: 0 0 0 1px rgba(255, 143, 199, .65), 0 0 28px rgba(255, 143, 199, .22), 0 14px 30px rgba(0, 0, 0, .45);
}
#olivia .or-players.is-hint .or-embed { animation: orRing 1.5s ease-out infinite; }
@keyframes orRing {
  0%   { box-shadow: 0 0 0 1px rgba(255, 143, 199, .8), 0 0 0 0 rgba(255, 143, 199, .5), 0 14px 30px rgba(0, 0, 0, .45); }
  100% { box-shadow: 0 0 0 1px rgba(255, 143, 199, .8), 0 0 0 12px rgba(255, 143, 199, 0), 0 14px 30px rgba(0, 0, 0, .45); }
}
#olivia .or-embed-host { position: relative; z-index: 1; height: 100%; }
#olivia .or-embed-ph { height: 100%; }
#olivia .or-embed-host iframe {
  display: block;
  width: 100%;
  height: 100% !important;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color-scheme: light;
}

#olivia .or-skel {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(123, 75, 214, .32), rgba(40, 20, 64, .7));
  transition: opacity .5s ease, visibility 0s linear 0s;
}
#olivia .or-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .08) 50%, transparent 75%);
  transform: translate3d(-100%, 0, 0);
  animation: orShimmer 1.7s ease-in-out infinite;
}
@keyframes orShimmer { to { transform: translate3d(100%, 0, 0); } }
#olivia .or-skel-art { flex: none; width: 64px; height: 64px; border-radius: 8px; background: rgba(255, 255, 255, .09); }
#olivia .or-skel-lines { flex: 1; min-width: 0; display: grid; gap: 8px; }
#olivia .or-skel-lines i { display: block; width: 70%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .11); }
#olivia .or-skel-lines i + i { width: 42%; }
#olivia .or-skel-play { flex: none; width: 32px; height: 32px; margin-right: 6px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
#olivia .or-embed.is-loaded .or-skel { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
#olivia .or-embed.is-loaded .or-skel::after { animation: none; }

/* the login note and the "tap play" hint share one line, so nothing jumps */
#olivia .or-sub {
  display: grid;
  min-height: 1.45em;
  margin: 10px 0 0;
  text-align: center;
}
#olivia .or-sub > span { grid-area: 1 / 1; transition: opacity .35s ease; }
#olivia .or-login {
  font-family: var(--font-type);
  font-size: .8rem;
  letter-spacing: .04em;
  color: rgba(214, 196, 255, .74);
}
#olivia .or-hint {
  font-family: var(--font-type);
  font-size: .86rem;
  letter-spacing: .04em;
  color: var(--blush);
  opacity: 0;
}
#olivia .or-sub.is-hint .or-hint { opacity: 1; }
#olivia .or-sub.is-hint .or-login { opacity: 0; }

#olivia .or-offline {
  margin: 4px auto 18px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--blush);
}
#olivia .or-offline.is-nudge { animation: orNudge .5s ease; }
@keyframes orNudge {
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(1deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* handwritten setlist on lavender paper */
#olivia .or-setlist {
  position: relative;
  margin-top: 26px;
  padding: 20px 8px 8px;
  text-align: left;
  color: var(--or-ink);
  background-color: var(--or-paper);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 40%),
    var(--paper-noise);
  border-radius: 6px 6px 12px 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(123, 75, 214, .12);
  transform: rotate(-.6deg);
}
#olivia .or-list-tape {
  top: -12px;
  left: 50%;
  width: 80px;
  margin-left: -40px;
  transform: rotate(-3deg);
}
#olivia .or-rows { margin: 0; padding: 0; list-style: none; }
#olivia .or-row + .or-row { border-top: 1px dashed rgba(91, 60, 140, .3); }
#olivia .or-row.is-album { margin-top: 4px; border-top: 2px dashed rgba(91, 60, 140, .36); }

#olivia .or-row-btn {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 8px 8px 6px;
  border-radius: 10px;
  text-align: left;
  color: inherit;
  transition: background-color .3s ease;
}
#olivia .or-row-btn:active { background-color: rgba(123, 75, 214, .1); }
#olivia .or-row.is-current .or-row-btn { background-color: rgba(255, 143, 199, .22); }

#olivia .or-row-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #3a1c62;
  color: #fff;
  box-shadow: 0 4px 10px rgba(58, 28, 98, .35);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s var(--ease-spring);
}
#olivia .or-row-btn:active .or-row-play { transform: scale(.92); }
#olivia .or-row-play svg { grid-area: 1 / 1; display: block; width: 17px; height: 17px; fill: currentColor; }
#olivia .or-row-play .or-i-pause { display: none; }
#olivia .or-row.is-playing .or-row-play .or-i-play { display: none; }
#olivia .or-row.is-playing .or-row-play .or-i-pause { display: block; }
#olivia .or-row.is-playing .or-row-play {
  background: var(--pink);
  color: var(--or-ink);
  box-shadow: 0 0 0 4px rgba(255, 143, 199, .3), 0 4px 10px rgba(58, 28, 98, .3);
}

#olivia .or-row-main { min-width: 0; }
#olivia .or-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}
#olivia .or-row-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.1;
  color: var(--or-ink);
}
#olivia .or-row-year {
  font-family: var(--font-type);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--or-ink-soft);
}
#olivia .or-row-note {
  display: block;
  margin-top: 2px;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.05;
  color: var(--or-rose);
}
#olivia .or-row-side {
  display: grid;
  place-items: center end;
  color: var(--or-rose);
}
#olivia .or-row-side > * { grid-area: 1 / 1; }
#olivia .or-row-num {
  font-family: var(--font-type);
  font-size: .72rem;
  letter-spacing: .06em;
  color: #7f6aa3;
  transition: opacity .3s ease;
}
#olivia .or-row.is-playing .or-row-num { opacity: 0; }

/* the album row: a little record instead of a plain circle */
#olivia .or-row.is-album .or-row-play {
  background: radial-gradient(circle, #ff8fc7 0 15%, #120e17 16% 29%, #2c2536 30% 32%, #120e17 33% 60%, #2c2536 61% 63%, #120e17 64%);
}
#olivia .or-row.is-album.is-playing .or-row-play { color: #fff; }
#olivia .or-row.is-album .or-row-title {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}
#olivia .or-row-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font-type);
  font-size: .68rem;
  line-height: 1.35;
  letter-spacing: .03em;
  color: var(--or-ink-soft);
}

/* ---------- small phones ---------- */
@media (max-width: 359px) {
  #olivia .or-row-btn { grid-template-columns: 40px minmax(0, 1fr) 24px; column-gap: 10px; }
  #olivia .or-row-play { width: 40px; height: 40px; }
  #olivia .or-row-title { font-size: 1.12rem; }
  #olivia .or-row-note { font-size: 1.15rem; }
}

/* ---------- bigger screens: deck beside the setlist ---------- */
@media (min-width: 880px) {
  #olivia .or-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
  }
  #olivia .or-deck { width: min(100%, 440px); }
  #olivia .or-music { margin-top: 0; }
}
@media (hover: hover) and (pointer: fine) {
  #olivia .or-row-btn:hover { background-color: rgba(123, 75, 214, .09); }
  #olivia .or-row.is-current .or-row-btn:hover { background-color: rgba(255, 143, 199, .28); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #olivia .or-disc,
  #olivia .or-eq i,
  #olivia .or-tt-fly > svg,
  #olivia .or-skel::after,
  #olivia.is-playing .or-tt-light,
  #olivia .or-players.is-hint .or-embed,
  #olivia .or-offline.is-nudge { animation: none !important; }
  #olivia .or-eq i { transform: scaleY(.7); }
  #olivia .or-arm,
  #olivia .or-embed,
  #olivia .or-gif,
  #olivia .or-photo { transition: none; }
}