/* Exercise-specific photography and the locker character collection. */
.hero {
  background: #081619;
  isolation: isolate;
}
.workout-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.hero .workout-photo {
  object-fit: contain;
  object-position: right center;
}
.hero:before {
  z-index: -1;
  background: linear-gradient(90deg, #061216f0, #0612169c 30%, transparent 72%),
              linear-gradient(0deg, #06121650, transparent 55%);
}
.routine-cover {
  height: auto;
  min-height: 220px;
  aspect-ratio: 16 / 10;
  background: #081619;
  isolation: isolate;
  padding: 22px;
  justify-content: flex-end;
}
.routine-cover:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #041416a6, transparent 65%),
              linear-gradient(0deg, #031015ed, #03101518 62%, transparent);
}
.routine-cover h2 {
  font-size: clamp(30px, 2.4vw, 38px);
  max-width: 190px;
  text-shadow: 0 2px 15px #0009;
}
.routine-cover .eyebrow {
  margin-bottom: 10px;
  text-shadow: 0 1px 6px #000;
}
.avatar-stage {
  height: 660px;
  min-height: 0;
  align-self: start;
  background: radial-gradient(ellipse at 50% 50%, #153c38, transparent 65%),
              linear-gradient(135deg, #0b1b20, #071216);
  isolation: isolate;
}
.avatar-stage img.character {
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 350px);
  height: calc(100% - 180px);
  object-fit: contain;
  object-position: center bottom;
  z-index: 1;
  filter: drop-shadow(0 10px 14px #0007);
}
.avatar-stage:after {
  bottom: 76px;
  height: 39px;
  width: 225px;
  border-color: var(--avatar-accent, var(--teal));
  background: radial-gradient(ellipse, #04dfb819, transparent 70%);
  box-shadow: 0 0 28px #03dfb822, inset 0 0 25px #03dfb81c;
  z-index: 0;
}
.avatar-stage .stage-label { z-index: 2; }
.avatar-stage .rank { bottom: 29px; }
.outfit { padding: 13px 7px 16px; overflow: hidden; }
.outfit-preview {
  display: block;
  height: 138px;
  overflow: hidden;
  margin-bottom: 13px;
  border-radius: 5px;
  background: radial-gradient(ellipse, #243c3f, transparent 70%);
}
.outfit-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}
.outfit:disabled { opacity: .58; }
@media (max-width: 1000px) {
  .routine-cover h2 { font-size: 34px; }
  .outfit-preview { height: 118px; }
}
@media (max-width: 800px) {
  .avatar-stage { height: 560px; }
  .outfit-preview { height: 150px; }
}
@media (max-width: 580px) {
  .hero .workout-photo { object-fit: cover; object-position: 65% center; }
  .hero:before { background: linear-gradient(90deg, #061216d9, #0612167d 48%, #06121600 95%); }
  .routine-cover { aspect-ratio: 16 / 10; min-height: 215px; padding: 22px; }
  .routine-cover h2 { font-size: 34px; max-width: 190px; }
  .avatar-stage { height: 545px; }
  .avatar-stage img.character { height: 365px; width: 85%; }
  .outfit-preview { height: 128px; }
}