/* Photographic cassette textures, with a code-driven 3D hinge. */
.mixtape-section {
  --tape-ease: cubic-bezier(.22, .75, .18, 1);
  --tape-speed: 620ms;
  padding: 4rem 0;
  border-block: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}

.mixtape-deck { width: 100%; max-width: 35rem; min-width: 0; margin-inline: auto; padding: 0 .75rem; }
.mixtape-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.mixtape-deck-prompt { color: var(--ink-faint); font-size: .6875rem; white-space: nowrap; }
.mixtape-stack { position: relative; padding-bottom: .5rem; isolation: isolate; }
.mixtape-stack::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -.6rem;
  left: 5%;
  width: 90%;
  height: 1.5rem;
  border-radius: 50%;
  background: #4b443c;
  opacity: .11;
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
.mixtape {
  position: relative;
  margin-inline-start: var(--shift, 0px);
  width: calc(100% - 8px);
  perspective: 1200px;
  container-type: inline-size;
}
.mixtape-heading { margin: 0; line-height: 1; }
.mixtape-trigger {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 7.1;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mixtape-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; z-index: 2; }
.mixtape-trigger:hover { text-decoration: none; }
.mixtape-spine {
  display: block;
  position: absolute;
  inset: 0;
  background-image: url('../images/mixtape-stack.jpg');
  background-size: var(--crop-size);
  background-position: var(--crop-position);
  border-radius: 2px;
  transform-origin: center bottom;
  backface-visibility: hidden;
  transition: transform var(--tape-speed) var(--tape-ease), filter 240ms ease;
  filter: saturate(.8);
}
.mixtape-trigger:hover .mixtape-spine { filter: saturate(1) brightness(1.05); }
.mixtape-spine-label {
  position: absolute;
  inset: 12% 9%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .2em;
  color: #fffdf3;
  font-family: "Marker Felt", "Chalkboard SE", "Bradley Hand", cursive;
  font-size: clamp(1rem, 6.3cqw, 2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: .025em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #18211e, 0 0 6px rgb(0 0 0 / .65);
  text-wrap: balance;
}
.mixtape-spine-label-medium { font-size: clamp(.75rem, 4.4cqw, 1.4rem); }
.mixtape-spine-label-long { font-size: clamp(.6875rem, 3.65cqw, 1.125rem); }
.mixtape:nth-child(8) .mixtape-spine-label {
  inset: 16% 8%;
  color: #242722;
  background: repeating-linear-gradient(transparent 0 45%, rgb(86 72 50 / .15) 46% 47%, transparent 48% 100%), #e9dfc9;
  border: 1px solid #cfc2a9;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
  text-shadow: none;
}
.mixtape-number {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font: .5625rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity 200ms ease;
}
.mixtape-trigger:hover .mixtape-number,
.mixtape-trigger:focus-visible .mixtape-number,
.mixtape[data-open="true"] .mixtape-number { opacity: 1; }
.mixtape[data-open="true"] .mixtape-spine { transform: rotateX(70deg); filter: brightness(.85); }

.mixtape-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--tape-speed) var(--tape-ease), visibility 0s var(--tape-speed);
  perspective: 1200px;
}
.mixtape-panel-inner { min-height: 0; overflow: hidden; }
.mixtape-front {
  transform: rotateX(-88deg);
  transform-origin: center top;
  backface-visibility: hidden;
  opacity: .35;
  padding: .35rem .3rem 1.5rem;
  transition: transform var(--tape-speed) var(--tape-ease), opacity 350ms ease;
}
.mixtape[data-open="true"] .mixtape-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--tape-speed) var(--tape-ease), visibility 0s;
}
.mixtape[data-open="true"] .mixtape-front { transform: rotateX(0); opacity: 1; }
.mixtape[data-input="keyboard"] .mixtape-panel,
.mixtape[data-input="keyboard"] .mixtape-front,
.mixtape[data-input="keyboard"] .mixtape-spine { transition: none; }
.cassette-art {
  display: block;
  position: relative;
  aspect-ratio: 1.625;
  overflow: hidden;
  border-radius: 10px;
  background: #282623;
  box-shadow: 0 2px 4px rgb(33 28 21 / .18), 0 9px 14px rgb(33 28 21 / .12);
  filter: hue-rotate(var(--tape-hue, 0deg));
}
.cassette-art:hover { text-decoration: none; }
.cassette-art:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.cassette-art > img {
  position: absolute;
  width: 122.16%;
  max-width: none;
  height: auto;
  left: -10.81%;
  top: -14.66%;
  user-select: none;
  pointer-events: none;
}
/* Sample the blank paper beside the original lettering, then typeset the
   destination over it so the photographed shell and stripe stay intact. */
.cassette-front-title {
  position: absolute;
  top: 10.5%;
  left: 21%;
  width: 54%;
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .3em;
  background: #e8dec9 url('../images/mixtape-front.jpeg') 17.5159% 22.2772% / 1356% 941.6667% no-repeat;
  color: #27261f;
  font-family: "Marker Felt", "Chalkboard SE", "Bradley Hand", cursive;
  font-size: clamp(.875rem, 6.3cqw, 2rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}
.cassette-front-title-medium { font-size: clamp(.6875rem, 4.1cqw, 1.25rem); }
.cassette-front-title-long { font-size: clamp(.59375rem, 3.7cqw, 1.125rem); }
.cassette-reel {
  position: absolute;
  top: 46.3%;
  left: 29.7%;
  width: 10%;
  aspect-ratio: 1;
  border: 4px dashed rgb(239 231 209 / .45);
  border-radius: 50%;
  animation: cassette-turn 12s linear infinite;
  animation-play-state: paused;
}
.cassette-reel + .cassette-reel { left: 72.1%; }
.mixtape[data-open="true"] .cassette-reel { animation-play-state: running; }
@keyframes cassette-turn { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.mixtape-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem .35rem .5rem;
}
.mixtape-track-label { display: block; font-size: .625rem; color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }
.mixtape-track a { font-size: 1rem; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.mixtape-track a:hover { color: var(--accent); }
.mixtape-track-arrow { font-size: 1.5rem; color: var(--accent); }
.mixtape-deck-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  color: var(--ink-faint);
  font-size: .6875rem;
}
.mixtape-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

:is(.mixtape-study, .mixtape-home) main { padding-block: 3rem; }
:is(.mixtape-study, .mixtape-home) .mixtape-section { border: 0; padding-block: 2.5rem 4rem; margin: 0; }

@media (max-width: 760px) {
  .mixtape-section { padding-block: 3.5rem; }
  .mixtape-deck { padding-inline: .75rem; }
  .mixtape-number { left: -1.25rem; }
  :is(.mixtape-study, .mixtape-home) main { padding-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mixtape-panel, .mixtape-front, .mixtape-spine { transition: none; }
  .mixtape-front { transform: none; }
  .cassette-reel { animation: none; transform: translate(-50%, -50%); }
}