/*!
 * ============================================================================
 * OMA App Showcase
 * ============================================================================
 * Developer Memo
 * - 2026-04-28: Initial styles for [app_showcase]. This stylesheet presents
 *   OMA AI Agent and Kepler Planets as a public product introduction block.
 *   It must not contain pricing checkout, subscription, portal, refund,
 *   webhook, or plan-gate behavior.
 * - 2026-04-28: Reworked visual language to align with oma-pricing-block:
 *   darker starfield shell, cyan/purple edge glow, pricing-like cards, stacked
 *   app carousel sections, and media preview placeholders.
 * - 2026-04-28: Removed visible arrow controls and switched carousel UI to
 *   centered slide chips with horizontal translate animation and swipe support.
 * - 2026-04-28: Reworked carousel visuals to full-card slide model: the first
 *   slide is a whole-card app entry link and later slides are full-card media previews.
 * - 2026-04-28: Whole-panel rewrite. The external __app-heading layer is gone;
 *   each slide is now an <a> that owns its own heading area. Entry slide carries
 *   badge / title / summary / body / points / CTA pill. Theme-injected anchor
 *   underlines are explicitly suppressed inside the showcase. Visual theme
 *   (gradients, glow, meteor) intentionally preserved.
 * ============================================================================
 */

@property --oma-showcase-pulse-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.oma-app-showcase {
  --oma-showcase-bg: radial-gradient(circle at 18% 12%, rgba(68, 88, 180, 0.34) 0%, transparent 28%), radial-gradient(circle at 82% 18%, rgba(119, 63, 172, 0.24) 0%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(10, 38, 72, 0.46) 0%, transparent 36%), linear-gradient(180deg, #030712 0%, #060b1d 48%, #02040a 100%);
  --oma-showcase-card-bg: linear-gradient(180deg, rgba(12, 18, 38, 0.82) 0%, rgba(6, 10, 24, 0.9) 100%);
  --oma-showcase-card-bg-ai: linear-gradient(180deg, rgba(20, 32, 68, 0.88) 0%, rgba(9, 13, 31, 0.92) 100%);
  --oma-showcase-card-bg-kepler: linear-gradient(180deg, rgba(35, 24, 70, 0.9) 0%, rgba(10, 12, 32, 0.94) 100%);
  --oma-showcase-border: rgba(144, 164, 255, 0.34);
  --oma-showcase-border-strong: rgba(125, 211, 252, 0.78);
  --oma-showcase-text: #eef4ff;
  --oma-showcase-heading: #f8fbff;
  --oma-showcase-muted: rgba(226, 232, 255, 0.74);
  --oma-showcase-soft: rgba(218, 228, 255, 0.62);
  --oma-showcase-accent: #7dd3fc;
  --oma-showcase-accent-2: #c084fc;
  --oma-showcase-success: #34d399;

  position: relative;
  width: 100%;
  margin: 0 auto 34px;
  padding: 0 18px;
  color: var(--oma-showcase-text);
  box-sizing: border-box;
}

.oma-app-showcase,
.oma-app-showcase *,
.oma-app-showcase *::before,
.oma-app-showcase *::after {
  box-sizing: border-box;
}

/* Suppress theme-injected anchor underlines inside the showcase.
   Slides are <a> elements; we never want underlines bleeding through.
   The double-class chains and explicit text-decoration-line / border-bottom
   resets are intentional — many WordPress themes attack `.entry-content a`
   and its descendants with high specificity and / or !important, so we
   raise our specificity well above (0,3,1) and override every form. */
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a:link,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a:visited,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a:hover,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a:focus,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a:active,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a *,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a *:hover,
.oma-app-showcase__inner .oma-app-showcase__stack .oma-app-showcase__app a *:focus,
.oma-app-showcase__slide.oma-app-showcase__slide,
.oma-app-showcase__slide.oma-app-showcase__slide:hover,
.oma-app-showcase__slide.oma-app-showcase__slide:focus,
.oma-app-showcase__slide.oma-app-showcase__slide:visited,
.oma-app-showcase__slide.oma-app-showcase__slide:active,
.oma-app-showcase__slide.oma-app-showcase__slide *,
.oma-app-showcase__slide.oma-app-showcase__slide *::before,
.oma-app-showcase__slide.oma-app-showcase__slide *::after {
  color: inherit !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-style: solid !important;
  text-decoration-thickness: 0 !important;
  border-bottom: 0 none transparent !important;
  box-shadow: none;
  background-image: none;
}

/* The CTA pill must always look like a pill regardless of theme overrides. */
.oma-app-showcase__slide .oma-app-showcase__cta.oma-app-showcase__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.oma-app-showcase__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 28px 18px;
  background:
    var(--oma-showcase-bg) padding-box,
    conic-gradient(from var(--oma-showcase-pulse-angle), transparent 0deg, transparent 24deg, rgba(125, 211, 252, 0.34) 46deg, rgba(216, 180, 254, 0.98) 64deg, rgba(255, 255, 255, 1) 78deg, rgba(56, 189, 248, 0.58) 98deg, rgba(125, 211, 252, 0.22) 116deg, transparent 142deg, transparent 360deg) border-box;
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.2), 0 0 28px rgba(125, 211, 252, 0.18), 0 0 46px rgba(216, 180, 254, 0.08), 0 28px 90px rgba(0, 0, 0, 0.36);
  animation: omaShowcaseEdgePulse 5.8s cubic-bezier(0.42, 0, 0.18, 1) infinite;
}

.oma-app-showcase__inner::before,
.oma-app-showcase__inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.oma-app-showcase__inner::before {
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(125, 211, 252, 0.48) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(216, 180, 254, 0.42) 0 1px, transparent 1.7px);
  background-size: 86px 86px, 132px 132px, 190px 190px;
  background-position: 8px 10px, 34px 58px, 72px 24px;
  opacity: 0.48;
}

.oma-app-showcase__inner::after {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(138deg, transparent 0 48.8%, rgba(255, 255, 255, 0.98) 49%, rgba(125, 211, 252, 0.58) 49.16%, rgba(125, 211, 252, 0.22) 49.48%, transparent 51.2% 100%),
    linear-gradient(138deg, transparent 0 56.8%, rgba(216, 180, 254, 0.92) 57%, rgba(125, 211, 252, 0.46) 57.16%, rgba(125, 211, 252, 0.18) 57.46%, transparent 59% 100%),
    linear-gradient(138deg, transparent 0 66.8%, rgba(255, 255, 255, 0.82) 67%, rgba(125, 211, 252, 0.4) 67.16%, rgba(125, 211, 252, 0.16) 67.42%, transparent 68.8% 100%);
  background-size: 30% 12%, 24% 10%, 28% 11%;
  background-position: 112% 24%, 124% 48%, 102% 72%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(125, 211, 252, 0.36));
  opacity: 0.76;
  animation: omaShowcaseMeteorFall 6.4s linear infinite;
}

.oma-app-showcase__header,
.oma-app-showcase__stack,
.oma-app-showcase__footnote {
  position: relative;
  z-index: 1;
}

.oma-app-showcase__header {
  max-width: 860px;
  margin: 0 auto 26px;
  text-align: center;
}

.oma-app-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  padding: 7px 12px;
  border: 1px solid rgba(125, 211, 252, 0.36);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.1);
  color: #bae6fd;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.oma-app-showcase__title {
  margin: 0;
  color: var(--oma-showcase-heading);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-shadow: 0 0 24px rgba(125, 211, 252, 0.22);
}

.oma-app-showcase__subtitle {
  margin: 12px auto 0;
  max-width: 760px;
  color: var(--oma-showcase-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.oma-app-showcase__stack {
  display: grid;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.oma-app-showcase__app {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--oma-showcase-border);
  border-radius: 20px;
  background: var(--oma-showcase-card-bg);
  color: var(--oma-showcase-text);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.oma-app-showcase__app--ai-agent {
  background: var(--oma-showcase-card-bg-ai);
  box-shadow: 0 20px 52px rgba(4, 10, 32, 0.46), inset 0 1px 0 rgba(125, 211, 252, 0.1);
}

.oma-app-showcase__app--kepler {
  background: var(--oma-showcase-card-bg-kepler);
  box-shadow: 0 20px 56px rgba(8, 8, 34, 0.48), inset 0 1px 0 rgba(216, 180, 254, 0.12);
}

.oma-app-showcase__app.is-visible,
.oma-app-showcase.is-visible .oma-app-showcase__app {
  opacity: 1;
  transform: translateY(0);
}

.oma-app-showcase__app:hover,
.oma-app-showcase__app:focus-within,
.oma-app-showcase__app.is-card-active {
  border-color: var(--oma-showcase-border-strong);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.54), 0 0 34px rgba(125, 211, 252, 0.22), 0 0 12px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}

.oma-app-showcase__app--kepler:hover,
.oma-app-showcase__app--kepler:focus-within,
.oma-app-showcase__app--kepler.is-card-active {
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.58), 0 0 42px rgba(192, 132, 252, 0.26), 0 0 16px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Carousel viewport: clips slides, owns pointer/swipe surface, sets cursor. */
.oma-app-showcase__carousel {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  /* Allow vertical scroll, horizontal pan handled by JS Pointer Events. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.oma-app-showcase__carousel:active,
.oma-app-showcase__carousel.is-dragging {
  cursor: grabbing;
}

.oma-app-showcase__track {
  position: relative;
  display: flex;
  transform: translateX(calc(var(--oma-showcase-active-slide, 0) * -100%));
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each slide is an anchor; full-width and clickable. */
.oma-app-showcase__slide {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  min-height: 460px;
  padding: 28px;
  color: inherit;
  background: transparent;
  opacity: 0.42;
  transition: opacity 260ms ease;
  cursor: pointer;
  -webkit-user-drag: none;
}

.oma-app-showcase__slide.is-active {
  opacity: 1;
}

.oma-app-showcase__slide:focus-visible {
  outline: 2px solid rgba(186, 230, 253, 0.92);
  outline-offset: -10px;
  border-radius: 16px;
}

.oma-app-showcase__slide-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-height: 100%;
}

/* ---------- Entry slide ---------- */

.oma-app-showcase__entry-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.oma-app-showcase__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.12);
  color: #dceeff;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.oma-app-showcase__app--kepler .oma-app-showcase__badge {
  color: #f3e8ff;
  border-color: rgba(192, 132, 252, 0.34);
  background: rgba(192, 132, 252, 0.14);
}

.oma-app-showcase__entry-titlewrap {
  min-width: 0;
}

.oma-app-showcase__entry-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--oma-showcase-heading);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-shadow: 0 0 18px rgba(125, 211, 252, 0.22);
}

.oma-app-showcase__app--kepler .oma-app-showcase__entry-title {
  color: #fff7ed;
  text-shadow: 0 0 20px rgba(216, 180, 254, 0.32), 0 0 10px rgba(251, 191, 36, 0.12);
}

.oma-app-showcase__entry-arrow {
  font-size: 0.62em;
  font-weight: 900;
  color: rgba(186, 230, 253, 0.86);
  transform: translateY(-0.18em);
  transition: transform 200ms ease, color 200ms ease;
}

.oma-app-showcase__slide:hover .oma-app-showcase__entry-arrow,
.oma-app-showcase__slide:focus-visible .oma-app-showcase__entry-arrow {
  transform: translate(2px, -0.32em);
  color: #ffffff;
}

.oma-app-showcase__entry-summary {
  margin: 8px 0 0;
  max-width: 720px;
  color: var(--oma-showcase-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.oma-app-showcase__entry-body {
  margin-top: 8px;
}

/* ---------- Common slide copy ---------- */

.oma-app-showcase__slide-label {
  margin: 0 0 8px;
  color: #bae6fd;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.oma-app-showcase__slide-title {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.oma-app-showcase__slide-body {
  margin: 12px 0 0;
  color: rgba(226, 232, 255, 0.76);
  font-size: 0.98rem;
  line-height: 1.65;
}

.oma-app-showcase__points {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.oma-app-showcase__point {
  position: relative;
  margin: 0;
  padding-left: 24px;
  color: rgba(238, 244, 255, 0.84);
  font-size: 0.96rem;
  line-height: 1.55;
}

.oma-app-showcase__point::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--oma-showcase-success);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

/* ---------- CTA pill ---------- */

.oma-app-showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 16px;
  border: 1px solid rgba(125, 211, 252, 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22) 0%, rgba(99, 102, 241, 0.18) 55%, rgba(192, 132, 252, 0.16) 100%);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(125, 211, 252, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.oma-app-showcase__app--kepler .oma-app-showcase__cta {
  border-color: rgba(192, 132, 252, 0.46);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22) 0%, rgba(192, 132, 252, 0.22) 60%, rgba(217, 70, 239, 0.18) 100%);
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.oma-app-showcase__cta--ghost {
  background: rgba(2, 6, 23, 0.34);
  border-color: rgba(186, 230, 253, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.oma-app-showcase__slide:hover .oma-app-showcase__cta,
.oma-app-showcase__slide:focus-visible .oma-app-showcase__cta {
  transform: translateY(-1px);
  border-color: rgba(186, 230, 253, 0.7);
  box-shadow: 0 0 22px rgba(125, 211, 252, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.oma-app-showcase__cta-arrow {
  font-size: 0.92em;
  transform: translateY(-0.04em);
  transition: transform 200ms ease;
}

.oma-app-showcase__slide:hover .oma-app-showcase__cta-arrow,
.oma-app-showcase__slide:focus-visible .oma-app-showcase__cta-arrow {
  transform: translate(2px, -0.16em);
}

/* ---------- Media placeholder slide ---------- */

.oma-app-showcase__slide--placeholder .oma-app-showcase__slide-inner {
  align-items: center;
  text-align: center;
}

.oma-app-showcase__media-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 6px 0 4px;
  border: 1px dashed rgba(186, 230, 253, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(125, 211, 252, 0.18), transparent 34%),
    radial-gradient(circle at 50% 76%, rgba(192, 132, 252, 0.16), transparent 36%),
    rgba(2, 6, 23, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.oma-app-showcase__media-icon {
  font-size: 2.4rem;
  color: rgba(186, 230, 253, 0.62);
  filter: drop-shadow(0 0 12px rgba(125, 211, 252, 0.32));
}

.oma-app-showcase__media-copy {
  max-width: 620px;
}

.oma-app-showcase__media-copy .oma-app-showcase__slide-label::before {
  content: "▣ ";
}

/* ---------- Dot controls ---------- */

.oma-app-showcase__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px 24px;
  margin-top: -4px;
}

.oma-app-showcase__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.oma-app-showcase__dot {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.oma-app-showcase__dot-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(186, 230, 253, 0.42);
  transition: background 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
}

.oma-app-showcase__dot:hover .oma-app-showcase__dot-bullet {
  background: rgba(186, 230, 253, 0.78);
}

.oma-app-showcase__dot.is-active .oma-app-showcase__dot-bullet,
.oma-app-showcase__dot[aria-current="true"] .oma-app-showcase__dot-bullet {
  width: 22px;
  background: linear-gradient(135deg, #7dd3fc 0%, #c084fc 100%);
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.6);
}

.oma-app-showcase__dot:focus-visible {
  outline: 2px solid rgba(186, 230, 253, 0.82);
  outline-offset: 4px;
}

/* ---------- Footnote & reduced motion ---------- */

.oma-app-showcase__footnote {
  max-width: 980px;
  margin: 18px auto 0;
  color: var(--oma-showcase-soft);
  font-size: 0.86rem;
  line-height: 1.58;
}

.oma-app-showcase:not(.is-app-showcase-ready) .oma-app-showcase__app {
  opacity: 1;
  transform: none;
}

@keyframes omaShowcaseMeteorFall {
  0% {
    background-position: 112% 24%, 124% 48%, 102% 72%;
    opacity: 0;
  }
  7% {
    opacity: 0.78;
  }
  56% {
    opacity: 0.72;
  }
  100% {
    background-position: -16% 72%, -8% 104%, -22% 132%;
    opacity: 0;
  }
}

@keyframes omaShowcaseEdgePulse {
  0% {
    --oma-showcase-pulse-angle: 0deg;
  }
  18% {
    --oma-showcase-pulse-angle: 72deg;
  }
  42% {
    --oma-showcase-pulse-angle: 150deg;
  }
  58% {
    --oma-showcase-pulse-angle: 236deg;
  }
  82% {
    --oma-showcase-pulse-angle: 312deg;
  }
  100% {
    --oma-showcase-pulse-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oma-app-showcase__inner,
  .oma-app-showcase__inner::after,
  .oma-app-showcase__app,
  .oma-app-showcase__track,
  .oma-app-showcase__slide,
  .oma-app-showcase__cta,
  .oma-app-showcase__entry-arrow,
  .oma-app-showcase__cta-arrow {
    animation: none;
    transition: none;
  }

  .oma-app-showcase__app,
  .oma-app-showcase__app:hover,
  .oma-app-showcase__app:focus-within,
  .oma-app-showcase__app.is-card-active {
    transform: none;
    opacity: 1;
  }

  .oma-app-showcase__slide {
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .oma-app-showcase {
    margin-bottom: 26px;
    padding: 0 14px;
  }

  .oma-app-showcase__inner {
    padding: 24px 14px;
    border-radius: 24px;
  }

  .oma-app-showcase__header {
    margin-bottom: 22px;
  }

  .oma-app-showcase__stack {
    gap: 16px;
  }

  .oma-app-showcase__app {
    border-radius: 18px;
  }

  .oma-app-showcase__slide {
    min-height: 420px;
  }

  .oma-app-showcase__controls {
    padding: 0 22px 22px;
  }
}

@media (max-width: 540px) {
  .oma-app-showcase {
    padding: 0 10px;
  }

  .oma-app-showcase__inner {
    padding: 22px 12px;
    border-radius: 22px;
  }

  .oma-app-showcase__title {
    font-size: 1.82rem;
  }

  .oma-app-showcase__subtitle {
    font-size: 0.94rem;
    line-height: 1.6;
  }

  .oma-app-showcase__entry-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .oma-app-showcase__slide {
    min-height: 400px;
    padding: 22px 18px;
  }

  .oma-app-showcase__slide-inner {
    gap: 14px;
  }

  .oma-app-showcase__entry-summary,
  .oma-app-showcase__slide-body,
  .oma-app-showcase__point {
    font-size: 0.92rem;
  }

  .oma-app-showcase__cta {
    padding: 9px 14px;
    font-size: 0.74rem;
  }

  .oma-app-showcase__footnote {
    font-size: 0.82rem;
  }

  .oma-app-showcase__controls {
    padding: 0 16px 18px;
  }

  .oma-app-showcase__media-frame {
    aspect-ratio: 4 / 3;
  }
}