.case{
  --h:calc(var(--case-w) * var(--case-ratio));
  --d:var(--case-depth);
  position:relative;
  flex:none;
  width:var(--case-w);
  height:var(--h);
  perspective:1100px;
  perspective-origin:50% 42%;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.case:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:14px;
}

.case__drift,
.case__drift-inner,
.case__turn{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}

.case__drift{
  animation:caseFloat var(--float-dur) ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -0.73s);
}

.case__drift-inner{
  animation:caseSway var(--sway-dur) ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -1.1s);
}

@keyframes caseFloat{
  0%,100%{ transform:translate3d(0, 0, 0); }
  50%    { transform:translate3d(0, var(--float-amp), 0); }
}

@keyframes caseSway{
  0%,100%{ transform:rotateZ(calc(var(--sway-z) * -1)) rotateX(var(--sway-x)); }
  50%    { transform:rotateZ(var(--sway-z)) rotateX(calc(var(--sway-x) * -1)); }
}

.case__turn{
  transform:rotateY(var(--case-tilt)) translateZ(0);
  transition:transform var(--turn-dur) var(--turn-ease);
  will-change:transform;
}

@media (hover:hover){
  .case:hover .case__turn{
    transform:rotateY(0deg) translateZ(var(--turn-z));
  }
  .case:hover .case__drift,
  .case:hover .case__drift-inner,
  .case:hover .case__shadow::before{
    animation-play-state:paused;
  }
  .case:hover .case__shadow{
    transform:translateX(-50%) scaleX(.8);
    opacity:.55;
  }
}

.case:focus-visible .case__turn,
.case.is-front .case__turn{
  transform:rotateY(0deg) translateZ(var(--turn-z));
}

.case:focus-visible .case__drift,
.case:focus-visible .case__drift-inner,
.case:focus-visible .case__shadow::before,
.case.is-front .case__drift,
.case.is-front .case__drift-inner,
.case.is-front .case__shadow::before{
  animation-play-state:paused;
}

.case:focus-visible .case__shadow,
.case.is-front .case__shadow{
  transform:translateX(-50%) scaleX(.8);
  opacity:.55;
}

.case__face{
  position:absolute;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.case__front{
  inset:0;
  transform:translateZ(calc(var(--d) / 2));
  display:flex;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--case-edge);
  overflow:hidden;
}

.case__back{
  inset:0;
  transform:translateZ(calc(var(--d) / -2)) rotateY(180deg);
  background:var(--case-plastic);
}

.case__spine{
  left:0;
  top:0;
  width:var(--d);
  height:100%;
  transform:translateX(calc(var(--d) / -2)) rotateY(-90deg);
  background:var(--case-plastic);
  border:1px solid var(--case-edge);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:calc(9px * var(--k)) 0 calc(6px * var(--k));
  overflow:hidden;
  color:var(--spine-ink);
}

.case__top{
  left:0;
  top:0;
  width:100%;
  height:var(--d);
  transform:translateY(calc(var(--d) / -2)) rotateX(90deg);
  background:var(--case-plastic);
  border:1px solid var(--case-edge);
}

.case__side{
  right:0;
  top:0;
  width:var(--d);
  height:100%;
  transform:translateX(calc(var(--d) / 2)) rotateY(90deg);
  background:var(--case-plastic);
  border:1px solid var(--case-edge);
}

.case__shadow{
  position:absolute;
  left:50%;
  bottom:-14px;
  z-index:-1;
  width:calc(var(--case-w) * .78);
  height:12px;
  transform:translateX(-50%);
  transition:transform var(--turn-dur) var(--turn-ease), opacity var(--turn-dur) var(--turn-ease);
  pointer-events:none;
}

.case__shadow::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background-image:radial-gradient(var(--ink) 1px, transparent 1.1px);
  background-size:3px 3px;
  animation:caseShadow var(--float-dur) ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -0.73s);
}

@keyframes caseShadow{
  0%,100%{ transform:scaleX(1);   opacity:.42; }
  50%    { transform:scaleX(.88); opacity:.24; }
}

.case__hinge{
  position:relative;
  flex:none;
  width:calc(7px * var(--k));
  background:var(--case-plastic);
  border-left:1px solid rgba(255,255,255,.3);
}

.case__hinge::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:38%;
  width:1px;
  background:rgba(255,255,255,.16);
}

.case__sleeve{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.case__band{
  flex:none;
  height:calc(22px * var(--k));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(7px * var(--k));
  background:var(--ink);
  color:var(--paper);
  line-height:1;
}

.case__band-logo{
  font-size:calc(11px * var(--k));
  font-weight:900;
  letter-spacing:-.03em;
}

.case__band-tag{
  font-size:calc(8px * var(--k));
  font-weight:500;
  letter-spacing:.24em;
}

.case__art{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  background:var(--case-plastic);
}

.case__foot{
  flex:none;
  height:calc(28px * var(--k));
  padding:calc(4px * var(--k)) calc(7px * var(--k)) 0;
  border-top:1px solid var(--ink);
  background:var(--paper);
  line-height:1.2;
}

.case__foot-title{
  font-size:calc(10px * var(--k));
  font-weight:700;
  letter-spacing:-.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.case__front::after{
  content:"";
  position:absolute;
  left:-30%;
  top:36%;
  width:160%;
  height:1px;
  background:rgba(255,255,255,.22);
  transform:rotate(-20deg);
  pointer-events:none;
}

.case__spine-title{
  writing-mode:vertical-rl;
  max-height:76%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--f-dot);
  font-size:calc(9px * var(--k));
  letter-spacing:.08em;
  line-height:1;
}

.case__spine-logo{
  writing-mode:vertical-rl;
  font-size:calc(7px * var(--k));
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1;
}

.art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  user-select:none;
}

.minicase{
  position:relative;
  flex:none;
  width:30px;
  height:34px;
  overflow:hidden;
  border:1px solid var(--case-edge);
  background:var(--case-plastic);
}

.minicase::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  z-index:1;
  width:4px;
  background:var(--case-plastic);
}

.minicase .art{
  left:4px;
  width:calc(100% - 4px);
}

@media (prefers-reduced-motion:reduce){
  .case__drift,
  .case__drift-inner,
  .case__shadow::before{
    animation:none;
  }
  .case__shadow::before{
    opacity:.42;
  }
  .case__turn{
    transition-duration:140ms;
  }
  .case:hover .case__turn,
  .case:focus-visible .case__turn,
  .case.is-front .case__turn{
    transform:rotateY(0deg) translateZ(0);
  }
}