.section.showcase {
  --showcase-gap: clamp(1.25rem, 3vw, 2.5rem);
  --showcase-block: var(--sp-9);
  --trio-gap: clamp(0.75rem, 1.8vw, 1.75rem);
  --strip-gap: clamp(0.625rem, 1.2vw, 1.25rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(1.25rem, 2.6vw, 2.75rem) var(--sp-10);
  background-color: var(--c-abyss);
  background-image: var(--g-hero);
}

.section.showcase::before {
  content: none;
}

.showcase__aura {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  overflow: hidden;
  pointer-events: none;
}

.showcase__aura::before,
.showcase__aura::after {
  content: "";
  position: absolute;
  inset: -18%;
}

.showcase__aura::before {
  background-image:
    radial-gradient(34% 40% at 20% 24%, var(--c-tint-brand) 0%, transparent 72%),
    radial-gradient(30% 36% at 84% 28%, var(--c-tint-azure) 0%, transparent 70%);
  background-image:
    radial-gradient(34% 40% at 20% 24%, color-mix(in srgb, var(--c-brand) 32%, transparent) 0%, transparent 72%),
    radial-gradient(30% 36% at 84% 28%, color-mix(in srgb, var(--c-azure) 15%, transparent) 0%, transparent 70%);
  animation: showcase-drift-a 48s var(--ease-in-out) infinite alternate;
}

.showcase__aura::after {
  background-image: radial-gradient(44% 38% at 54% 86%, var(--c-tint-brand) 0%, transparent 72%);
  background-image: radial-gradient(44% 38% at 54% 86%, color-mix(in srgb, var(--c-brand-deep) 36%, transparent) 0%, transparent 72%);
  animation: showcase-drift-b 60s var(--ease-in-out) infinite alternate;
}

.showcase__inner {
  position: relative;
}

.showcase__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-4);
  margin-block-end: var(--showcase-gap);
}

.showcase__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  min-width: 0;
}

.showcase__title {
  max-width: min(18ch, 100%);
  margin: 0;
  color: var(--c-on-dark);
  font-family: var(--f-head);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.showcase__title-accent {
  color: var(--c-sky);
  text-shadow: 0 0 34px color-mix(in srgb, var(--c-sky) 28%, transparent);
}

.showcase__note {
  display: none;
  min-width: 0;
  max-width: min(46ch, 100%);
  margin: 0;
  color: var(--c-on-dark-2);
  font-size: var(--fs-base);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.badge--link {
  position: relative;
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.badge--link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: max(100%, var(--tap));
  border-radius: inherit;
  transform: translateY(-50%);
}

.badge--link:focus-visible {
  outline: 2px solid var(--c-azure);
  outline-offset: 3px;
}

.badge--link:active {
  background-color: var(--c-tint-azure);
  border-color: var(--c-sky);
}

.badge__arrow {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur-base) var(--ease-out);
}

.showcase .trio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--trio-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase .trio__item {
  display: flex;
  min-width: 0;
  animation: showcase-rise var(--dur-slower) var(--ease-out) backwards;
  animation-delay: var(--trio-delay, 0ms);
}

.showcase .trio__item:nth-child(2) {
  --trio-delay: 80ms;
}

.showcase .trio__item:nth-child(3) {
  --trio-delay: 160ms;
}

.showcase .trio__item > .vcard {
  flex: 1 1 auto;
  width: 100%;
}

.vcard {
  --vcard-pad: var(--sp-1);
  --vcard-inset: var(--sp-1);
  --vcard-title: var(--fs-h3);
  --vcard-meta: max(11px, var(--fs-xs));
  --play-size: clamp(44px, 5vw, 72px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  border-radius: var(--r-xl);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.vcard:focus-visible {
  outline: 2px solid var(--c-azure);
  outline-offset: 3px;
}

.vcard__media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--c-surface-dark-2);
  background-image: linear-gradient(135deg, var(--c-navy-soft) 0%, var(--c-navy) 78%);
}

.vcard__media--empty {
  background-image:
    radial-gradient(60% 80% at 22% 16%, rgba(255, 255, 255, .16) 0%, transparent 62%),
    linear-gradient(135deg, var(--accent, var(--c-brand)) 0%, var(--c-navy) 78%);
}

.vcard__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.vcard__preview,
.vcard__shade,
.vcard__glare {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.vcard__preview {
  overflow: hidden;
  background-color: var(--c-surface-deep);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.vcard__preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vcard.is-previewing .vcard__preview {
  opacity: 1;
}

.vcard__shade {
  background-image: linear-gradient(180deg, transparent 52%, rgba(4, 16, 31, .62) 100%);
  box-shadow: inset 0 0 0 var(--bw-hair) var(--c-line-dark);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.vcard__glare {
  background-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), transparent 55%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity var(--dur-base) var(--ease-out);
}

.vcard.is-tilting .vcard__glare {
  opacity: 1;
}

.vcard__play {
  --play-z: 0px;
  --play-scale: 1;
  --play-comp: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: min(var(--play-size), 46%);
  aspect-ratio: 1;
  border: var(--bw-field) solid rgba(255, 255, 255, .86);
  border-radius: 50%;
  background-color: var(--c-glass-dark);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  color: var(--c-white);
  box-shadow: 0 10px 26px rgba(4, 16, 31, .38);
  pointer-events: none;
  transform: translate(-50%, -50%) translateZ(var(--play-z)) scale(calc(var(--play-scale) * var(--play-comp)));
  transition: top var(--dur-slow) var(--ease-out), left var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.vcard__play svg {
  width: 38%;
  height: 38%;
  margin-inline-start: 6%;
}

.vcard:active .vcard__play {
  --play-scale: .94;
}

.vcard--feature .vcard__play {
  --play-scale: .72;
  top: calc(100% - var(--vcard-inset) - min(var(--play-size), 46%) * .36);
  left: calc(var(--vcard-inset) + min(var(--play-size), 46%) * .36);
}

.vcard--feature:active .vcard__play {
  --play-scale: .68;
}

.vcard.is-previewing .vcard__play {
  --play-scale: .5;
  top: calc(100% - var(--vcard-inset) - min(var(--play-size), 46%) * .25);
  left: calc(var(--vcard-inset) + min(var(--play-size), 46%) * .25);
}

.vcard__duration {
  position: absolute;
  right: var(--vcard-inset);
  bottom: var(--vcard-inset);
  z-index: var(--z-raised);
  display: none;
  max-width: calc(100% - var(--vcard-inset) * 2);
  padding: 0.2em 0.7em;
  border: var(--bw-hair) solid var(--c-line-dark);
  border-radius: var(--r-pill);
  background-color: var(--c-veil-dark);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-on-dark);
  font-family: var(--f-head);
  font-size: var(--vcard-meta);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}

.vcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}

.vcard__cat {
  display: block;
  min-width: 0;
  margin-block-end: var(--sp-2);
  color: var(--c-sky);
  color: color-mix(in srgb, var(--accent, var(--c-sky)) 50%, var(--c-ice));
  font-size: var(--vcard-meta);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.vcard__title {
  display: block;
  min-width: 0;
  color: var(--c-on-dark);
  font-family: var(--f-head);
  font-size: var(--vcard-title);
  font-weight: var(--fw-bold);
  line-height: 1.24;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease-out);
}

.vcard__teaser {
  display: block;
  min-width: 0;
  margin-block-start: var(--sp-2);
  color: var(--c-on-dark-2);
  font-size: max(11px, var(--fs-sm));
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.vcard__cta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 0.6em;
  min-width: 0;
  max-width: 100%;
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
  color: var(--c-sky);
  font-size: max(11px, var(--fs-sm));
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease-out);
}

.vcard__cta svg {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  padding: 0.5em;
  border: var(--bw-hair) solid var(--c-line-dark);
  border-radius: 50%;
  background-color: var(--c-tint-azure);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.vcard--feature {
  padding: var(--vcard-pad);
  border: var(--bw-hair) solid var(--c-line-dark);
  background-color: var(--c-glass-light);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 46%);
  box-shadow: var(--sh-hair-dark), var(--sh-modal), 0 0 60px transparent;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
  animation: showcase-glow 1400ms var(--ease-out) backwards;
  animation-delay: var(--trio-delay, 0ms);
}

.vcard--feature.is-tilting {
  transition-duration: var(--dur-fast), var(--dur-base), var(--dur-base), var(--dur-base);
  will-change: transform;
}

.vcard--feature .vcard__media {
  overflow: visible;
  box-shadow: 0 14px 30px rgba(2, 10, 24, .46);
  transform: translateZ(0) scale(1);
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

.vcard--feature.is-tilting .vcard__media {
  box-shadow: 0 22px 40px rgba(2, 10, 24, .54), var(--sh-brand-sm);
  transform: translateZ(24px) scale(.976);
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .vcard--feature::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--bw-hair));
    padding: var(--bw-hair);
    border-radius: inherit;
    background-image: linear-gradient(150deg, rgba(255, 255, 255, .42) 0%, rgba(124, 196, 255, .24) 18%, rgba(124, 196, 255, 0) 44%, rgba(59, 158, 255, 0) 70%, rgba(59, 158, 255, .34) 100%);
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    pointer-events: none;
  }
}

.vcard--feature.is-tilting .vcard__play {
  --play-z: 24px;
  --play-comp: .976;
}

.vcard--feature .vcard__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.vcard.is-current {
  border-color: color-mix(in srgb, var(--c-sky) 46%, transparent);
}

.vcard--compact {
  --vcard-title: max(11px, var(--fs-sm));
  --play-size: clamp(30px, 3vw, 44px);
  overflow: hidden;
  border: var(--bw-hair) solid var(--c-line-dark);
  border-radius: var(--r-lg);
  background-color: var(--c-glass-light);
  box-shadow: var(--sh-hair-dark);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.vcard--compact .vcard__media {
  border-radius: 0;
}

.vcard--compact .vcard__shade {
  box-shadow: none;
}

.vcard--compact .vcard__img,
.vcard--mini .vcard__img {
  transition: transform var(--dur-slower) var(--ease-out);
}

.vcard--compact .vcard__body {
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
}

.vcard--compact .vcard__title,
.vcard--mini .vcard__title {
  font-weight: var(--fw-semibold);
  line-height: 1.36;
  letter-spacing: 0;
  text-wrap: pretty;
}

.vcard--compact .vcard__cat {
  order: 2;
  margin-block: auto 0;
  padding-block-start: var(--sp-2);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-transform: none;
}

.vcard--compact .vcard__play,
.vcard--mini .vcard__play {
  border-width: var(--bw-hair);
  box-shadow: 0 6px 18px rgba(4, 16, 31, .34);
}

.vcard--mini {
  --vcard-title: max(11px, var(--fs-xs));
  --play-size: clamp(26px, 2.4vw, 36px);
  width: clamp(9.5rem, 15vw, 15rem);
  border-radius: var(--r-md);
}

.vcard--mini .vcard__media {
  border-radius: var(--r-md);
}

.vcard--mini .vcard__body {
  padding: var(--sp-2) var(--sp-1) var(--sp-1);
}

.vcard--mini .vcard__cat {
  display: none;
}

.vcard--mini .vcard__title {
  color: var(--c-on-dark-2);
}

.vcard--mini.is-current .vcard__title {
  color: var(--c-sky);
}

.vcard--compact:focus-visible,
.vcard--mini:focus-visible {
  outline: none;
}

.vcard--compact:focus-visible::after,
.vcard--mini:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  border: var(--bw-thick) solid var(--c-azure);
  border-radius: inherit;
  pointer-events: none;
}

.showcase__more,
.showcase__rest {
  margin-block-start: var(--showcase-block);
}

.showcase__subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  min-width: 0;
  margin-block-end: var(--sp-5);
}

.showcase__subhead::after {
  content: "";
  order: 1;
  flex: 1 1 var(--sp-7);
  min-width: var(--sp-5);
  height: var(--bw-hair);
  border-radius: var(--r-pill);
  background-image: linear-gradient(90deg, var(--c-line-dark), transparent);
}

.showcase__subtitle {
  order: 0;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--c-on-dark);
  font-family: var(--f-head);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
  overflow-wrap: anywhere;
}

.showcase__hint {
  order: 2;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--c-on-dark-3);
  font-size: max(11px, var(--fs-xs));
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.showcase .strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--strip-gap);
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--sp-3);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--c-navy-soft) var(--c-track-dark);
  -webkit-overflow-scrolling: touch;
}

.showcase .strip::-webkit-scrollbar,
.showcase .marquee::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.showcase .strip::-webkit-scrollbar-track,
.showcase .marquee::-webkit-scrollbar-track {
  border-radius: var(--r-pill);
  background-color: var(--c-track-dark);
}

.showcase .strip::-webkit-scrollbar-thumb,
.showcase .marquee::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--c-navy-soft);
}

.showcase .strip__item {
  display: flex;
  flex: 0 0 min(72vw, 17rem);
  min-width: 0;
  scroll-snap-align: start;
}

.showcase .strip__item > .vcard {
  flex: 1 1 auto;
  width: 100%;
}

.marquee {
  --marquee-gap: var(--strip-gap);
  display: flex;
  gap: var(--marquee-gap);
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, transparent 100%);
}

.marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-around;
  gap: var(--marquee-gap);
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: showcase-marquee var(--marquee-dur, 60s) linear infinite;
}

.marquee__item {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee:has(:focus-visible) {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.marquee:has(:focus-visible) .marquee__track {
  animation: none;
}

.marquee--static {
  padding-block-end: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--c-navy-soft) var(--c-track-dark);
  -webkit-mask-image: none;
  mask-image: none;
}

.marquee--static .marquee__track {
  justify-content: flex-start;
  min-width: 0;
  animation: none;
}

.marquee--static .marquee__track + .marquee__track {
  display: none;
}

.marquee--static .marquee__item {
  scroll-snap-align: start;
}

.theater {
  --ctx-text: var(--c-on-dark);
  --ctx-muted: var(--c-on-dark-2);
  --ctx-soft: var(--c-on-dark-3);
  --ctx-accent: var(--c-sky);
  --ctx-line: var(--c-line-dark);
  --ctx-surface: var(--c-surface-deep);
  --theater-gap: 2px;
  --theater-pad: var(--sp-1);
  --theater-vh: 100vh;
  --theater-reserve: 19rem;
  --theater-stage-abs: max(9rem, calc((var(--theater-vh) - var(--theater-reserve)) * 16 / 9));
  --theater-stage: min(100%, var(--theater-stage-abs));
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding:
    max(var(--theater-gap), env(safe-area-inset-top, 0px))
    max(var(--theater-gap), env(safe-area-inset-right, 0px))
    max(var(--theater-gap), env(safe-area-inset-bottom, 0px))
    max(var(--theater-gap), env(safe-area-inset-left, 0px));
  color: var(--c-on-dark);
}

@supports (height: 100dvh) {
  .theater {
    --theater-vh: 100dvh;
  }
}

.theater__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--c-scrim);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.theater__frame {
  position: relative;
  isolation: isolate;
  width: min(100%, 108rem);
  max-height: 100%;
  padding: var(--theater-pad);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--bw-hair) solid var(--c-line-dark);
  border-radius: var(--r-xl);
  background-color: var(--c-surface-deep);
  background-image: radial-gradient(90% 60% at 12% 0%, var(--c-tint-brand) 0%, transparent 70%);
  box-shadow: var(--sh-hair-dark), var(--sh-modal);
  scrollbar-width: thin;
  scrollbar-color: var(--c-navy-soft) transparent;
}

.theater__frame::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theater__frame::-webkit-scrollbar-track,
.theater__frame::-webkit-scrollbar-corner {
  background-color: transparent;
}

.theater__frame::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background-color: var(--c-navy-soft);
  background-clip: padding-box;
}

.theater.is-open .theater__scrim {
  animation: showcase-fade 200ms var(--ease-out) both;
}

.theater.is-open .theater__frame {
  animation: showcase-pop var(--dur-base) var(--ease-out) both;
}

.theater.is-open .player__stage {
  view-transition-name: theater-stage;
}

.theater__close {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: min(var(--tap), 100%);
  height: auto;
  aspect-ratio: 1;
  margin-block-end: var(--sp-3);
  margin-inline-start: auto;
  border: var(--bw-hair) solid var(--c-line-dark);
  border-radius: 50%;
  background-color: var(--c-glass-dark);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  color: var(--c-on-dark-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.theater__close svg {
  width: 45%;
  height: 45%;
}

.theater__close:focus-visible {
  outline: 2px solid var(--c-azure);
  outline-offset: 2px;
  color: var(--c-on-dark);
}

.theater__close:active {
  transform: scale(.94);
}

.theater__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

.theater__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.theater__main .player,
.theater__main .theater__meta {
  width: 100%;
  max-width: var(--theater-stage);
  margin-inline: auto;
}

.theater__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.theater__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.theater__title {
  max-width: 100%;
  margin: 0;
  color: var(--c-on-dark);
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-head);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.theater__actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  min-width: 0;
}

.theater__actions .btn {
  width: 100%;
}

.theater__rail {
  position: relative;
  min-width: 0;
  padding-block-start: var(--sp-5);
  border-block-start: var(--bw-hair) solid var(--c-line-dark);
}

.clamp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}

.clamp__body {
  width: 100%;
  min-width: 0;
}

[data-clamp].is-ready:not(.is-expanded) .clamp__body {
  max-height: var(--clamp-h, 7.5em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) calc(100% - 1.75em), transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) calc(100% - 1.75em), transparent 100%);
}

.clamp__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  max-width: 100%;
  min-height: var(--tap);
  border-radius: var(--r-sm);
  color: var(--c-sky);
  font-size: max(11px, var(--fs-sm));
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  text-align: start;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-base) var(--ease-out);
}

.clamp__toggle svg {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--dur-base) var(--ease-out);
}

.clamp__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.clamp__toggle:focus-visible {
  outline: 2px solid var(--c-azure);
  outline-offset: 2px;
}

.theater .clamp {
  --clamp-h: 5.7em;
}

.theater .prose {
  color: var(--c-on-dark-2);
}

.theater .prose :is(h2, h3, h4),
.theater .prose strong {
  color: var(--c-on-dark);
}

.theater .prose a {
  color: var(--c-sky);
}

.theater .prose,
.clamp__body.prose {
  font-size: var(--fs-base);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.theater .prose > * + *,
.clamp__body.prose > * + * {
  margin-block-start: var(--sp-3);
}

.section--dark .prose ul,
.section--gradient .prose ul,
.theater .prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-inline-start: 0;
  list-style: none;
}

.section--dark .prose ul > li,
.section--gradient .prose ul > li,
.theater .prose ul > li {
  position: relative;
  margin-block-start: 0;
  padding-inline-start: 1.6em;
}

.section--dark .prose ul > li::before,
.section--gradient .prose ul > li::before,
.theater .prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0.3em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background-color: var(--c-azure);
  background-image: var(--g-brand);
  box-shadow: 0 0 0 0.24em var(--c-tint-azure);
}

.section--dark .prose ol > li::marker,
.section--gradient .prose ol > li::marker,
.theater .prose ol > li::marker {
  color: var(--c-sky);
  font-weight: var(--fw-semibold);
}

body.is-theater-open {
  overflow: hidden;
}

body.is-theater-open .floating-actions {
  opacity: 0;
  visibility: hidden;
}

::view-transition-group(theater-stage) {
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-in-out);
}

::view-transition-old(theater-stage),
::view-transition-new(theater-stage) {
  height: 100%;
  object-fit: cover;
}

.product-card__media--art {
  --art-angle: 135deg;
  --spot-x: 22%;
  --spot-y: 18%;
  isolation: isolate;
  background-image: linear-gradient(var(--art-angle), var(--accent) 0%, var(--c-navy) 84%);
  background-image: linear-gradient(var(--art-angle), color-mix(in srgb, var(--accent) 84%, var(--c-white)) 0%, var(--accent) 26%, var(--c-navy) 86%);
}

.product-card__media--art::after {
  opacity: .45;
}

.product-card:hover .product-card__media--art::after {
  opacity: .45;
}

.product-card__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: inline-size;
}

.product-card__art::before,
.product-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.product-card__art::before {
  background-image:
    repeating-linear-gradient(30deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .1) 1px, transparent 1.5px, transparent clamp(14px, 2.4vw, 26px)),
    repeating-linear-gradient(-30deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .1) 1px, transparent 1.5px, transparent clamp(14px, 2.4vw, 26px));
  -webkit-mask-image: radial-gradient(ellipse 78% 88% at var(--spot-x) var(--spot-y), rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 88% at var(--spot-x) var(--spot-y), rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
}

.product-card__art::after {
  background-image: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .08) 26%, transparent 52%);
  opacity: .85;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.product-card__mono {
  position: relative;
  z-index: var(--z-raised);
  max-width: 90%;
  color: var(--c-white);
  color: color-mix(in srgb, var(--c-white) 92%, transparent);
  font-family: var(--f-head);
  font-size: min(clamp(1.75rem, 4vw, 3rem), 28vw);
  font-size: min(clamp(1.75rem, 15cqi, 3rem), 28cqi);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  text-shadow: 0 2px 18px rgba(4, 16, 31, .35);
  white-space: nowrap;
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:nth-child(5n + 2) .product-card__media--art {
  --art-angle: 205deg;
  --spot-x: 80%;
  --spot-y: 22%;
}

.product-card:nth-child(5n + 3) .product-card__media--art {
  --art-angle: 160deg;
  --spot-x: 50%;
  --spot-y: 6%;
}

.product-card:nth-child(5n + 4) .product-card__media--art {
  --art-angle: 45deg;
  --spot-x: 16%;
  --spot-y: 76%;
}

.product-card:nth-child(5n + 5) .product-card__media--art {
  --art-angle: 315deg;
  --spot-x: 84%;
  --spot-y: 80%;
}

@supports not (aspect-ratio: 1) {
  .vcard__media--empty::before {
    content: "";
    display: block;
    padding-block-start: 56.25%;
  }

  .vcard__play {
    height: min(var(--play-size), 46%);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vcard__duration {
    background-color: var(--c-surface-deep);
  }

  .theater__close {
    background-color: var(--c-surface-dark-2);
  }

  .theater__scrim {
    background-color: var(--c-surface-deep);
  }
}

@media (min-width: 300px) {
  .showcase__note {
    display: block;
  }

  .vcard {
    --vcard-pad: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem);
    --vcard-inset: clamp(0.375rem, 0.25rem + 0.4vw, 0.75rem);
  }

  .vcard__duration {
    display: block;
  }

  .vcard--feature .vcard__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .vcard__teaser,
  .vcard--compact .vcard__title,
  .vcard--mini .vcard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  .vcard--mini .vcard__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .theater {
    --theater-gap: clamp(0.5rem, 2vw, 1.5rem);
    --theater-pad: clamp(0.75rem, 1.6vw, 1.75rem);
  }

  .theater__rail .playlist .playlist__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--sp-3);
    max-height: none;
    padding: 0 0 var(--sp-2);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .theater__rail .playlist .playlist__list > li {
    flex: 0 0 auto;
    width: min(76vw, 280px);
    scroll-snap-align: start;
  }

  .theater__rail .playlist .playlist-item {
    height: 100%;
  }
}

@media (min-width: 515px) {
  .theater__actions {
    flex-direction: row;
  }

  .theater__actions .btn {
    flex: 1 1 0;
    width: auto;
  }

  .page .cat-group .grid--cards {
    --cards-gap: clamp(12px, 2.4vw, 18px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cards-gap);
  }

  .page .cat-group .grid--cards > * {
    flex: 0 1 calc((100% - var(--cards-gap)) / 2);
    align-self: stretch;
    min-width: 0;
    height: auto;
  }
}

@media (min-width: 600px) {
  .showcase .trio--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase .trio--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .showcase .trio::after {
    content: "";
    position: absolute;
    right: -14%;
    bottom: calc(-1 * var(--showcase-gap));
    left: -14%;
    z-index: var(--z-below);
    height: clamp(12rem, 30vw, 28rem);
    background-image:
      linear-gradient(to right, var(--c-line-dark) 0, var(--c-line-dark) 1px, transparent 1px),
      linear-gradient(to bottom, var(--c-line-dark) 0, var(--c-line-dark) 1px, transparent 1px);
    background-position: 50% 100%;
    background-size: clamp(2.5rem, 4.6vw, 4.75rem) clamp(2.5rem, 4.6vw, 4.75rem);
    opacity: .7;
    pointer-events: none;
    transform: perspective(56rem) rotateX(66deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: radial-gradient(ellipse 58% 96% at 50% 100%, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 45%, transparent 74%);
    mask-image: radial-gradient(ellipse 58% 96% at 50% 100%, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 45%, transparent 74%);
  }

  .showcase .trio__item {
    position: relative;
  }

  .showcase .trio__item::after {
    content: "";
    position: absolute;
    right: 9%;
    bottom: calc(var(--showcase-gap) * -.5);
    left: 9%;
    z-index: var(--z-below);
    height: var(--showcase-gap);
    border-radius: 50%;
    background-image: radial-gradient(50% 50% at 50% 50%, var(--c-azure) 0%, transparent 100%);
    filter: blur(18px);
    opacity: .3;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-out);
  }

  .vcard--feature {
    --vcard-title: var(--fs-base);
    --play-size: clamp(34px, 5vw, 44px);
  }

  .vcard--feature .vcard__title {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .vcard--feature .vcard__teaser {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }

  .showcase .trio--1 .vcard--feature {
    --vcard-title: var(--fs-h3);
    flex-direction: row;
    align-items: stretch;
  }

  .showcase .trio--1 .vcard__media {
    flex: 0 0 55%;
    width: 55%;
    align-self: flex-start;
  }

  .showcase .trio--1 .vcard__body {
    justify-content: center;
    padding: var(--sp-3) var(--sp-5);
  }

  .showcase .trio--1 .vcard__cta {
    margin-block-start: 0;
  }

  .showcase .strip__item {
    flex-basis: clamp(9.5rem, 24vw, 13rem);
  }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 600px) {
    .showcase .trio--2,
    .showcase .trio--3 {
      row-gap: 0;
    }

    .showcase .trio--2 > .trio__item,
    .showcase .trio--3 > .trio__item {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: span 5;
      row-gap: 0;
    }

    .showcase .trio--2 .vcard--feature,
    .showcase .trio--3 .vcard--feature {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
      row-gap: 0;
    }

    .showcase .trio--2 .vcard__media,
    .showcase .trio--3 .vcard__media {
      grid-row: 1;
    }

    .showcase .trio--2 .vcard__body,
    .showcase .trio--3 .vcard__body {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 2 / span 4;
      row-gap: 0;
    }

    .showcase .trio--2 .vcard__cat,
    .showcase .trio--3 .vcard__cat {
      grid-row: 1;
    }

    .showcase .trio--2 .vcard__title,
    .showcase .trio--3 .vcard__title {
      grid-row: 2;
    }

    .showcase .trio--2 .vcard__teaser,
    .showcase .trio--3 .vcard__teaser {
      grid-row: 3;
    }

    .showcase .trio--2 .vcard__cta,
    .showcase .trio--3 .vcard__cta {
      grid-row: 4;
      align-self: end;
      justify-self: start;
    }
  }
}

@media (min-width: 920px) {
  .page .cat-group .grid--cards > * {
    flex-basis: calc((100% - var(--cards-gap) * 2) / 3);
  }

  .showcase__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
  }

  .showcase__note {
    justify-self: end;
    padding-block-end: 0.3em;
    font-size: var(--fs-lead);
  }

  .vcard--feature {
    --vcard-title: calc((var(--fs-lead) + var(--fs-h3)) / 2);
    --play-size: clamp(44px, 4.4vw, 72px);
  }

  .vcard--feature .vcard__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .vcard--feature .vcard__teaser {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .showcase .trio--1 {
    max-width: 68rem;
    margin-inline: auto;
  }

  .showcase .trio--1 .vcard__media {
    flex-basis: 60%;
    width: 60%;
  }

  .showcase .trio--1 .vcard__body {
    padding-inline: var(--sp-6);
  }

  .showcase .strip {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 22rem));
    justify-content: start;
    padding-block-end: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .theater__frame {
    border-radius: var(--r-2xl);
  }

  .theater__meta {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-7);
  }

  .theater__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 50%;
  }

  .theater__actions .btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 1200px) {
  .vcard--feature .vcard__teaser,
  .vcard--compact .vcard__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .page .cat-group .grid--cards {
    --cards-gap: 18px;
  }

  .page .cat-group .grid--cards > * {
    flex-basis: calc((100% - var(--cards-gap) * 3) / 4);
  }

  .theater {
    --theater-reserve: 21rem;
    --theater-rail: clamp(var(--playlist-w-lg), 26vw, var(--playlist-w));
    --theater-col-gap: clamp(1rem, 2vw, 1.75rem);
  }

  .theater__frame {
    width: min(100%, 108rem, calc(var(--theater-stage-abs) + var(--theater-rail) + var(--theater-col-gap) + var(--theater-pad) * 2 + var(--bw-hair) * 2));
  }

  .theater__close {
    margin-block-end: calc(-1 * var(--tap));
  }

  .theater__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--theater-rail);
    align-items: stretch;
    gap: var(--theater-col-gap);
  }

  .theater__rail {
    min-height: 18rem;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .theater__rail .playlist {
    position: absolute;
    inset: calc(var(--tap) + var(--sp-3)) 0 0 0;
  }

  .theater__rail .playlist .playlist__list {
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sp-2);
    min-height: 0;
    max-height: none;
    padding: 0 var(--sp-1) 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
  }

  .theater__rail .playlist .playlist__list > li {
    flex: 0 0 auto;
    width: auto;
  }

  .theater__rail .playlist .playlist-item {
    height: auto;
  }
}

@media (min-width: 2000px) {
  .vcard {
    --vcard-pad: 1.125rem;
    --vcard-inset: 1rem;
    --play-size: 4.75rem;
  }

  .page .cat-group .grid--cards {
    --cards-gap: 22px;
  }

  .vcard--compact {
    --play-size: 3.25rem;
  }

  .vcard--feature .vcard__teaser,
  .vcard--compact .vcard__title {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .vcard--mini {
    --play-size: 2.75rem;
    width: clamp(15rem, 10vw, 17rem);
  }

  .showcase .strip {
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 26rem));
  }

  .theater {
    --theater-reserve: 23.5rem;
    --theater-rail: clamp(var(--playlist-w), 22vw, 520px);
  }

  .theater__frame {
    width: min(100%, 140rem, calc(var(--theater-stage-abs) + var(--theater-rail) + var(--theater-col-gap) + var(--theater-pad) * 2 + var(--bw-hair) * 2));
  }
}

@media (min-width: 1200px) and (max-height: 760px) {
  .theater {
    --theater-gap: 0.75rem;
    --theater-reserve: 17rem;
  }

  .theater .clamp {
    --clamp-h: 3.3em;
  }
}

@media (max-height: 540px) {
  .theater {
    --theater-reserve: 7.5rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .badge--link:hover {
    border-color: var(--c-sky);
    background-color: color-mix(in srgb, var(--c-azure) 22%, transparent);
    color: var(--c-white);
    box-shadow: var(--glow-sky-sm);
  }

  .badge--link:hover .badge__arrow {
    transform: translateX(2px);
  }

  .vcard--feature:hover {
    border-color: var(--c-azure);
    background-color: rgba(255, 255, 255, .07);
    box-shadow: var(--sh-hair-dark), var(--sh-modal), var(--glow-brand);
  }

  .showcase .trio__item:hover::after {
    opacity: .58;
  }

  .vcard--feature:hover .vcard__play {
    --play-scale: .8;
    border-color: var(--c-white);
    background-color: var(--c-white);
    color: var(--c-navy);
    box-shadow: 0 10px 26px rgba(4, 16, 31, .38), var(--glow-azure);
  }

  .vcard--feature:hover .vcard__cta {
    color: var(--c-white);
  }

  .vcard--feature:hover .vcard__cta svg {
    border-color: var(--c-azure);
    background-color: color-mix(in srgb, var(--c-azure) 26%, transparent);
    transform: translateX(4px);
  }

  .vcard--compact:hover {
    border-color: var(--c-azure);
    background-color: rgba(255, 255, 255, .08);
  }

  .vcard--compact:hover .vcard__img,
  .vcard--mini:hover .vcard__img {
    transform: scale(1.05);
  }

  .vcard--compact:hover .vcard__play,
  .vcard--mini:hover .vcard__play {
    --play-scale: 1.1;
    border-color: var(--c-white);
    background-color: var(--c-white);
    color: var(--c-navy);
  }

  .vcard.is-previewing:hover .vcard__play {
    --play-scale: .5;
    border-color: rgba(255, 255, 255, .86);
    background-color: var(--c-glass-dark);
    color: var(--c-white);
    box-shadow: 0 6px 18px rgba(4, 16, 31, .34);
  }

  .vcard--mini:hover .vcard__shade {
    box-shadow: inset 0 0 0 var(--bw-hair) var(--c-azure);
  }

  .vcard--mini:hover .vcard__title {
    color: var(--c-on-dark);
  }

  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }

  .theater__close:hover {
    border-color: var(--c-sky);
    background-color: var(--c-surface-dark-2);
    color: var(--c-white);
    box-shadow: var(--glow-sky-sm);
    transform: rotate(90deg);
  }

  .clamp__toggle:hover {
    color: var(--c-white);
  }

  .product-card:hover .product-card__art::after {
    opacity: 1;
  }

  .product-card:hover .product-card__mono {
    transform: translateY(-2px) scale(1.04);
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 920px) {
  .vcard--compact:hover {
    box-shadow: var(--sh-hair-dark), var(--glow-sky-sm);
    transform: translateY(-3px);
  }
}

@keyframes showcase-drift-a {
  from {
    transform: translate3d(-2.5%, -1.5%, 0) scale(1);
  }

  to {
    transform: translate3d(2.5%, 2%, 0) scale(1.08);
  }
}

@keyframes showcase-drift-b {
  from {
    transform: translate3d(3%, 1.5%, 0) scale(1.06);
  }

  to {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
}

@keyframes showcase-rise {
  from {
    transform: translateY(14px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes showcase-glow {
  0% {
    border-color: var(--c-line-dark);
    box-shadow: var(--sh-hair-dark), var(--sh-modal), 0 0 60px transparent;
  }

  38% {
    border-color: color-mix(in srgb, var(--c-azure) 60%, transparent);
    box-shadow: var(--sh-hair-dark), var(--sh-modal), var(--glow-brand);
  }

  100% {
    border-color: var(--c-line-dark);
    box-shadow: var(--sh-hair-dark), var(--sh-modal), 0 0 60px transparent;
  }
}

@keyframes showcase-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% - var(--marquee-gap)), 0, 0);
  }
}

@keyframes showcase-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes showcase-pop {
  from {
    opacity: 0;
    transform: scale(.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__aura::before,
  .showcase__aura::after,
  .showcase .trio__item,
  .vcard--feature,
  .marquee__track,
  .theater.is-open .theater__scrim,
  .theater.is-open .theater__frame {
    animation: none;
  }

  .badge--link,
  .badge__arrow,
  .showcase .trio__item::after,
  .vcard,
  .vcard__media,
  .vcard__img,
  .vcard__preview,
  .vcard__shade,
  .vcard__glare,
  .vcard__play,
  .vcard__title,
  .vcard__cta,
  .vcard__cta svg,
  .theater__close,
  .clamp__toggle,
  .clamp__toggle svg,
  .product-card__art::after,
  .product-card__mono {
    transition: none;
  }

  .vcard--feature,
  .vcard--feature.is-tilting {
    transform: none;
    will-change: auto;
  }

  .vcard--feature .vcard__media,
  .vcard--feature.is-tilting .vcard__media {
    box-shadow: none;
    transform: none;
  }

  .vcard--feature.is-tilting .vcard__play {
    --play-z: 0px;
    --play-comp: 1;
  }

  .vcard__glare,
  .vcard__preview {
    display: none;
  }

  .vcard:hover .vcard__play,
  .vcard:active .vcard__play {
    --play-scale: 1;
  }

  .vcard--feature:hover .vcard__play,
  .vcard--feature:active .vcard__play {
    --play-scale: .72;
  }

  .vcard--compact:hover,
  .vcard--compact:hover .vcard__img,
  .vcard--mini:hover .vcard__img,
  .vcard--feature:hover .vcard__cta svg,
  .badge--link:hover .badge__arrow,
  .theater__close:hover,
  .theater__close:active,
  .product-card:hover .product-card__mono {
    transform: none;
  }

  .marquee {
    padding-block-end: var(--sp-3);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--c-navy-soft) var(--c-track-dark);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    justify-content: flex-start;
    min-width: 0;
  }

  .marquee__track + .marquee__track {
    display: none;
  }

  .theater.is-open .player__stage {
    view-transition-name: none;
  }
}