/* Showroom story — compact popup over a blurred, locked showroom. */

.showroom-story {
  --story-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --story-ms: 520ms;
  position: fixed;
  inset: 0;
  /* Above immersive house shell (z-index 1100) and help chrome. */
  z-index: 2400;
  display: grid;
  place-items: center;
  padding:
    max(0.75rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(0.75rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
  color: var(--color-stage-ink, #f4efe6);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.35s var(--story-ease),
    visibility 0.35s linear;
}

.showroom-story.is-done,
.showroom-story[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.showroom-story__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--color-stage-deep, #1a1512) 42%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.showroom-story__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(7.5rem, 28vh) auto;
  width: min(22.5rem, 100%);
  max-height: min(34rem, calc(100dvh - 1.5rem));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-accent, #b8922a) 38%, transparent);
  border-radius: calc(var(--radius-lg, 1rem) + 0.35rem);
  background: color-mix(in srgb, var(--color-stage-deep, #1a1512) 94%, #000);
  box-shadow:
    0 1.25rem 2.75rem color-mix(in srgb, #000 48%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-spot, #e4c27a) 12%, transparent);
}

.showroom-story__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.showroom-story__pan {
  position: absolute;
  inset: 0;
  display: flex;
  /* Keep frame order 1→4 even in RTL; motion direction flips separately. */
  direction: ltr;
  width: 400%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform var(--story-ms) var(--story-ease);
  will-change: transform;
}

/* Step transforms via data-* (CSP: no inline style / setProperty). */
.showroom-story[data-story-index="1"] .showroom-story__pan {
  transform: translate3d(-25%, 0, 0);
}

.showroom-story[data-story-index="2"] .showroom-story__pan {
  transform: translate3d(-50%, 0, 0);
}

.showroom-story[data-story-index="3"] .showroom-story__pan {
  transform: translate3d(-75%, 0, 0);
}

[dir="rtl"] .showroom-story[data-story-index="1"] .showroom-story__pan {
  transform: translate3d(25%, 0, 0);
}

[dir="rtl"] .showroom-story[data-story-index="2"] .showroom-story__pan {
  transform: translate3d(50%, 0, 0);
}

[dir="rtl"] .showroom-story[data-story-index="3"] .showroom-story__pan {
  transform: translate3d(75%, 0, 0);
}

.showroom-story__frame {
  position: relative;
  flex: 0 0 25%;
  width: 25%;
  height: 100%;
  overflow: hidden;
}

.showroom-story__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.05);
  transition: transform 0.9s var(--story-ease);
}

.showroom-story__frame.is-active .showroom-story__image {
  transform: scale(1);
}

.showroom-story__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-stage-deep, #1a1512) 18%, transparent) 0%,
      transparent 40%,
      color-mix(in srgb, var(--color-stage-deep, #1a1512) 55%, transparent) 100%
    );
}

.showroom-story__panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  padding: 0.85rem 1rem 1rem;
  background: color-mix(in srgb, var(--color-stage-deep, #1a1512) 92%, transparent);
  border-block-start: 1px solid color-mix(in srgb, var(--color-accent, #b8922a) 24%, transparent);
}

.showroom-story__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent, #b8922a) 88%, #fff);
}

.showroom-story__title {
  margin: 0;
  max-width: 20rem;
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.05rem, 2.8vw, 1.28rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-spot, #e4c27a);
}

.showroom-story__lead {
  margin: 0;
  max-width: 20rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-stage-ink, #f4efe6) 78%, transparent);
}

.showroom-story__dots {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
}

.showroom-story__dot {
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-spot, #e4c27a) 55%, transparent);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    width 0.3s var(--story-ease),
    background 0.25s ease,
    border-color 0.25s ease;
}

.showroom-story__dot.is-active {
  width: 1.15rem;
  background: var(--color-spot, #e4c27a);
  border-color: var(--color-spot, #e4c27a);
}

.showroom-story__perf {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  margin-block-start: 0.1rem;
}

.showroom-story.is-last .showroom-story__perf {
  display: grid;
}

.showroom-story__perf-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #5a5048) 70%, var(--color-accent, #b8922a));
  border-radius: calc(var(--radius, 0.65rem) + 0.1rem);
  background: color-mix(in srgb, var(--color-surface, #2a221c) 55%, transparent);
  cursor: pointer;
  text-align: start;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.showroom-story__perf-card:has(input:checked) {
  border-color: var(--color-spot, #e4c27a);
  background: color-mix(in srgb, var(--color-accent, #b8922a) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-spot, #e4c27a) 35%, transparent);
}

.showroom-story__perf-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.showroom-story__perf-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--color-stage-ink, #f4efe6);
}

.showroom-story__perf-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-stage-ink, #f4efe6) 62%, transparent);
}

.showroom-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-block-start: 0.15rem;
}

.showroom-story__skip {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-stage-ink, #f4efe6) 58%, transparent);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  padding: 0.3rem 0.45rem;
}

.showroom-story__next,
.showroom-story__enter {
  min-height: 2.4rem;
  min-width: 7.25rem;
  padding-inline: 1.1rem;
  border-radius: calc(var(--radius-lg, 1rem) + 0.1rem);
  font-weight: 700;
  font-size: 0.92rem;
}

.showroom-story__enter {
  display: none;
}

.showroom-story.is-last .showroom-story__next {
  display: none;
}

.showroom-story.is-last .showroom-story__enter {
  display: inline-flex;
}

/* Blur + lock the room/curtains while the popup is open (CSP-safe classes only). */
.showroom-carnival.is-story-open .showroom-carnival__stage,
.showroom-carnival.is-story-open .showroom-theater-overlay,
.showroom-carnival.is-story-open .showroom-immersive {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

.showroom-carnival.is-story-open .showroom-carnival__stage {
  transform: scale(1.01);
}

@media (max-width: 640px) {
  .showroom-story__card {
    width: min(21rem, 100%);
    grid-template-rows: minmax(6.75rem, 26vh) auto;
  }

  .showroom-story__perf {
    grid-template-columns: 1fr;
  }

  .showroom-story__panel {
    padding: 0.75rem 0.85rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-story,
  .showroom-story__pan,
  .showroom-story__image,
  .showroom-story__dot,
  .showroom-carnival.is-story-open .showroom-carnival__stage {
    transition: none !important;
  }

  .showroom-story__image,
  .showroom-carnival.is-story-open .showroom-carnival__stage {
    transform: none !important;
  }
}