/* Eight files orbit the smaller dossier. Translation stays proportional to the scene. */
.dossie-mode .dossier-hero {
  min-height:650px;
  gap:38px;
  padding-block:18px 60px;
}
.dossier-hero .case-scene {
  width:100%;
  height:auto;
  aspect-ratio:1;
  margin:0;
  container-type:inline-size;
}
.case-scene .case-portrait {
  top:19%;
  left:23%;
  width:54%;
  height:58%;
  object-position:50% 27%;
  mask-image:radial-gradient(ellipse at 50% 41%,#000 24%,#000d 45%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 41%,#000 24%,#000d 45%,transparent 72%);
  z-index:2;
  pointer-events:none;
}
.case-scene .case-beam {
  inset:-15% -5% 0;
  z-index:-1;
  pointer-events:none;
}
.case-scene .case-orbit {
  inset:18% 12%;
  transform:none;
  border-color:#9bb68a26;
  box-shadow:0 0 70px #69895509,inset 0 0 60px #69895509;
  pointer-events:none;
}
.case-scene .case-orbit::after {
  inset:-9% -8%;
  border-color:#9bb68a13;
}
.case-scene .case-orbit::before {
  content:'';
  position:absolute;
  inset:13%;
  border:1px solid #9bb68a0c;
  border-radius:50%;
}
.case-scene .case-coordinates {
  top:5%;
  right:3%;
  font:7px/1.8 var(--mono);
  letter-spacing:1.7px;
  color:#718270;
}
.orbit-courses {display:contents}
.orbit-slot {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  transform:translate(var(--x),var(--y)) scale(var(--size)) rotate(var(--tilt));
  z-index:var(--layer);
  animation:course-orbit 56s linear infinite;
  animation-delay:calc(var(--phase) * -7s);
}
.orbit-link {
  position:relative;
  display:block;
  width:18cqw;
  max-width:112px;
  border:1px solid #a5bb8970;
  border-radius:5px;
  background:#111a12;
  box-shadow:3px 4px 0 #394331,5px 6px 0 #10170f,0 18px 28px #000a;
  pointer-events:auto;
  transition:filter .25s,box-shadow .25s;
}
.orbit-cover {
  display:block;
  width:100%;
  aspect-ratio:2/3;
  border-radius:4px;
}
.orbit-label {
  position:absolute;
  left:50%;
  bottom:-28px;
  transform:translateX(-50%);
  padding:5px 8px;
  border:1px solid #8ba47775;
  border-radius:3px;
  background:#111c12f5;
  color:#d3dfc5;
  font:8px var(--mono);
  white-space:nowrap;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.orbit-link:is(:hover,:focus-visible) {
  filter:brightness(1.18);
  box-shadow:3px 4px 0 #6e8156,5px 6px 0 #10170f,0 0 28px #a4c77830,0 18px 28px #000a;
}
.orbit-link:is(:hover,:focus-visible) .orbit-label {opacity:1}
.case-scene.is-paused .orbit-slot,
.case-scene:has(.orbit-link:focus-visible) .orbit-slot {animation-play-state:paused}
@media(hover:hover) {
  .case-scene:has(.orbit-link:hover) .orbit-slot {animation-play-state:paused}
}
.case-scene .case-folder {
  left:50%;
  right:auto;
  bottom:30%;
  width:37%;
  max-width:206px;
  height:auto;
  aspect-ratio:1.82;
  transform:translateX(-50%) rotate(-6deg);
  padding:3.2% 3.5%;
  border-radius:4px 4px 7px 7px;
  background:linear-gradient(145deg,#455037,#24301e);
  box-shadow:0 14px 26px #0009,inset 0 1px 0 #cfdbaf25;
  z-index:3;
  pointer-events:none;
}
.case-scene .case-folder::before {top:-12px;height:13px;border-radius:4px 7px 0 0;background:#455037}
.case-scene .case-folder>span {font-size:clamp(5px,1.15cqw,7px);letter-spacing:1px;color:#a9b799}
.case-scene .case-folder>strong {font-size:clamp(12px,3.1cqw,18px);letter-spacing:-.6px;margin-top:7px;color:#d1dbbd}
.case-scene .case-folder>p {font-size:clamp(5px,1cqw,6px);letter-spacing:1.3px;margin-top:5px;color:#a1b18d}
.case-scene .case-folder>b {right:10%;bottom:10%;font:300 clamp(17px,4.6cqw,27px)/1 Inter;color:#9aaf80}
.orbit-controls {
  position:absolute;
  left:8%;
  right:8%;
  bottom:-26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:8;
}
.orbit-controls>span {font:7px/1.5 var(--mono);letter-spacing:1.3px;color:#7c9078}
.orbit-controls>button {
  min-height:36px;
  padding:6px 9px;
  border:1px solid #80976b30;
  border-radius:4px;
  background:#13201660;
  color:#a4b796;
  font:9px var(--mono);
  white-space:nowrap;
}
.orbit-controls>button i {font-style:normal;margin-left:5px}
.orbit-controls>button:hover {border-color:#9fb68680;background:#20331c}
@keyframes course-orbit {
  0%,100% {transform:translate(0,-32%) scale(.82) rotate(-5deg);z-index:1}
  12.5% {transform:translate(27%,-23%) scale(.87) rotate(5deg);z-index:2}
  25% {transform:translate(38%,0) scale(.96) rotate(7deg);z-index:3}
  37.5% {transform:translate(27%,23%) scale(1.03) rotate(5deg);z-index:5}
  50% {transform:translate(0,32%) scale(1.06) rotate(-3deg);z-index:6}
  62.5% {transform:translate(-27%,23%) scale(1.03) rotate(-7deg);z-index:5}
  75% {transform:translate(-38%,0) scale(.96) rotate(-7deg);z-index:3}
  87.5% {transform:translate(-27%,-23%) scale(.87) rotate(-5deg);z-index:2}
}
@media(max-width:760px) {
  .reference-look .header {height:50px}
  .dossie-mode .dossier-hero {gap:0;padding:20px 0 52px;min-height:0}
  .dossier-hero .case-scene {width:100%;height:auto;max-width:510px;margin-top:25px}
  .case-scene .case-coordinates {top:4%;right:1%;font-size:6px;letter-spacing:1px}
  .case-scene .case-folder {padding:2.7% 3%;width:39%;bottom:31%}
  .case-scene .case-folder>strong {margin-top:5px}
  .case-scene .case-folder>span {letter-spacing:.7px}
  .case-scene .case-folder>p {letter-spacing:.8px;margin-top:4px}
  .case-scene .case-folder::before {top:-9px;height:10px}
  .orbit-controls {left:3%;right:3%;bottom:-28px}
  .orbit-controls>span {font-size:6px;letter-spacing:.7px}
  .orbit-controls>button {min-height:40px;font-size:8px}
}
@media(prefers-reduced-motion:reduce) {
  .orbit-slot {animation:none}
  .orbit-controls>button {display:none}
  .orbit-controls {justify-content:center}
  .orbit-link,.orbit-label {transition:none}
}