/* طبقة العرض السينمائي لبيت الباترون: خلفيات من مجموعات العميل ومانيكان تفاعلي */
.hero {
  background: #111a17;
  color: #f7f2e7;
}
.hero-copy {
  background: linear-gradient(112deg, #111a17 72%, #18241f);
  color: #f7f2e7;
}
.hero h1 {
  color: #f6f0e4;
}
.hero h1 em {
  color: #d5af80;
}
.hero-lead {
  color: #c5c8be;
}
.hero-note {
  color: #aab2a8;
}
.hero .text-link {
  color: #f4f0e5;
  border-color: #d5af80;
}
.hero .text-link span {
  color: #d5af80;
}
.hero-stage {
  background: #18231f;
  color: #f6f0e4;
}
.hero-look {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #17211e;
}
.hero-look img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.6;
  filter: grayscale(0.1) saturate(0.72) contrast(1.08);
  transition:
    opacity 0.9s ease,
    transform 6s ease;
  transform: scale(1.02);
}
.hero-look.is-changing img {
  opacity: 0.25;
  transform: scale(1.055);
}
.look-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      #111a1755 0%,
      #111a1710 42%,
      #111a1790 100%
    ),
    linear-gradient(0deg, #111a17cc 0%, transparent 48%, #111a1744 100%);
}
.stage-grid {
  z-index: 1;
  opacity: 0.46;
  background-image: linear-gradient(#eadcc018 1px, transparent 1px),
    linear-gradient(90deg, #eadcc018 1px, transparent 1px);
}
.stage-orbit {
  z-index: 1;
  border-color: #f4e9d05c;
  mix-blend-mode: screen;
}
.orbit-two {
  border-color: #d5af806b;
}
.hero-stage model-viewer {
  z-index: 2;
  filter: drop-shadow(0 26px 24px #0006);
}
.stage-index,
.stage-label,
.stage-foot {
  z-index: 4;
  color: #f2eee1;
  text-shadow: 0 1px 14px #0008;
}
.stage-index b {
  color: #e3c69e;
}
.stage-label {
  display: none;
}
.stage-label span {
  color: #dfbd90;
}
.stage-label b {
  color: #f6f1e7;
}
.look-caption {
  position: absolute;
  z-index: 4;
  right: 34px;
  bottom: 105px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #f7f2e7;
  text-shadow: 0 2px 16px #000b;
  pointer-events: none;
}
.look-caption span {
  font:
    10px "DM Mono",
    "IBM Plex Sans Arabic",
    sans-serif;
  letter-spacing: 0.1em;
  color: #e2c29b;
}
.look-caption b {
  font-size: 15px;
  font-weight: 500;
}
.look-controls {
  position: absolute;
  z-index: 6;
  left: 30px;
  bottom: 55px;
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
.look-controls button {
  width: 32px;
  height: 32px;
  border: 1px solid #f7f2e77a;
  border-radius: 50%;
  background: #111a1760;
  color: #fff;
  font:
    20px/1 Arial,
    sans-serif;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.look-controls button:hover {
  background: #b58d63;
  border-color: #b58d63;
}
.look-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}
.look-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  background: #f2e9d977;
}
.look-dots button[aria-current="true"] {
  width: 18px;
  border-radius: 8px;
  background: #e3bd8f;
}
.stage-foot {
  bottom: 22px;
}
.model-fallback .model-poster {
  opacity: 1;
  background: linear-gradient(180deg, transparent, #111a1720);
}
.model-poster small {
  color: #f1e5d1;
  text-shadow: 0 1px 7px #000;
}
.model-progress {
  z-index: 3;
  background: #ffffff25;
}
.model-progress span {
  background: #e3bd8f;
}
.noscript-note {
  margin: 0;
  padding: 20px;
  text-align: center;
  color: #fff;
  background: #17211e;
}
.look-controls .look-toggle {
  width: auto;
  min-width: 112px;
  height: 30px;
  padding: 0 11px;
  border-radius: 18px;
  font:
    10px "IBM Plex Sans Arabic",
    sans-serif;
  white-space: nowrap;
}
.look-controls .look-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}
.look-controls button:focus-visible {
  outline: 2px solid #e3bd8f;
  outline-offset: 3px;
}
.collection-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(
    circle at 50% 42%,
    #52635a 0,
    #26342e 48%,
    #18231f 100%
  );
  color: #e8ddca;
}
.collection-placeholder span {
  font:
    500 28px Manrope,
    serif;
  color: #d5af80;
  letter-spacing: -0.08em;
}
.collection-placeholder small {
  font:
    10px "IBM Plex Sans Arabic",
    sans-serif;
}
.collection-card .collection-image {
  position: relative;
}
.collection-card .collection-open {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f5f2ebdd;
  color: #24312b;
  opacity: 0;
  transition: opacity 0.2s;
}
.collection-card:hover .collection-open,
.collection-card:focus-visible .collection-open {
  opacity: 1;
}
.studio-film {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.5fr);
  align-items: center;
  gap: clamp(35px, 8vw, 110px);
  background: #ebe8df;
  padding-top: clamp(65px, 9vw, 120px);
  padding-bottom: clamp(65px, 9vw, 120px);
}
.film-copy h2 {
  margin: 18px 0 19px;
  font-size: clamp(41px, 6vw, 76px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.055em;
  color: #202c26;
}
.film-copy h2 em {
  font-style: normal;
  color: #927451;
}
.film-copy > p {
  max-width: 550px;
  color: #68736b;
  font-size: 14px;
  line-height: 2;
}
.film-copy ol {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: grid;
  gap: 12px;
}
.film-copy li {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #344139;
  font-size: 12px;
}
.film-copy li b {
  font:
    11px "DM Mono",
    monospace;
  color: #9b7d58;
}
.film-frame {
  width: min(100%, 310px);
  margin: 0 auto;
  position: relative;
  padding: 9px;
  background: #202c26;
  box-shadow: 0 24px 55px #23332a24;
}
.film-frame video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  aspect-ratio: 9/16;
  object-fit: cover;
  background: #101511;
}
.film-frame figcaption {
  padding: 11px 7px 3px;
  text-align: center;
  color: #e8e0d3;
  font-size: 10px;
}
.studio-film .text-link {
  display: inline-flex;
  color: #29372f;
  border-color: #aa9574;
}
.studio-film .text-link span {
  color: #917148;
}
.collection-disclaimer {
  margin-top: 22px;
  color: #899188;
  font-size: 10px;
  line-height: 1.8;
}
.filter-chip:focus-visible,
.topbar a:focus-visible,
.button:focus-visible,
.text-link:focus-visible {
  outline: 2px solid #ba956c;
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .hero-copy {
    background: #111a17;
  }
  .hero-stage {
    min-height: 510px;
  }
  .look-caption {
    right: 20px;
    bottom: 98px;
  }
  .look-controls {
    left: 18px;
    bottom: 52px;
  }
  .look-controls .look-toggle {
    min-width: 102px;
    padding: 0 8px;
    font-size: 9px;
  }
  .stage-index {
    color: #f5f0e5;
  }
  .studio-film {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .film-copy h2 {
    font-size: clamp(40px, 12vw, 60px);
  }
  .film-frame {
    width: min(100%, 280px);
  }
  .collection-placeholder {
    min-height: 180px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-look img {
    transition: none;
    transform: none;
  }
  .collection-card .collection-open {
    transition: none;
  }
}