:root {
  --goddess-art-one: url("https://res.cloudinary.com/o8o3sy5w/image/upload/f_auto,q_auto/IMG_8325");
  --goddess-art-two: url("https://res.cloudinary.com/o8o3sy5w/image/upload/f_auto,q_auto/IMG_8322");
  --art-ink: rgba(18, 11, 24, 0.9);
  --art-ink-soft: rgba(18, 11, 24, 0.58);
}

/* The new artwork is layered behind the existing readable cards and controls. */
.view-container[data-view="home"],
.view-container[data-view="queens"],
.view-container[data-view="chat"] {
  isolation: isolate;
  overflow: hidden;
}

.view-container[data-view="home"] > *,
.view-container[data-view="queens"] > *,
.view-container[data-view="chat"] > * {
  position: relative;
  z-index: 1;
}

/* Goddess Corner: a quiet editorial altar behind the daily logbook. */
.view-container[data-view="home"]::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  right: 0;
  height: 440px;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(18, 11, 24, 0.16) 0%, rgba(18, 11, 24, 0.44) 52%, var(--bg-deep) 100%),
    var(--goddess-art-one);
  background-position: center, center 32%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.96;
}

.view-container[data-view="home"]::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 70px;
  right: -12%;
  width: 58%;
  height: 470px;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(18, 11, 24, 0.22), rgba(18, 11, 24, 0.82)),
    var(--goddess-art-two);
  background-position: center, center;
  background-size: cover;
  border-radius: 48% 0 0 48%;
  opacity: 0.2;
  mix-blend-mode: screen;
  transform: rotate(-4deg);
}

.view-container[data-view="home"] .home-header {
  padding: 24px 18px 26px;
  border: 1px solid rgba(229, 185, 111, 0.2);
  border-top-color: rgba(229, 185, 111, 0.34);
  border-radius: 0 0 24px 24px;
  background: linear-gradient(135deg, rgba(24, 13, 31, 0.54), rgba(24, 13, 31, 0.18));
  box-shadow: 0 18px 40px rgba(11, 5, 15, 0.18);
  backdrop-filter: blur(4px);
}

/* The Goddesses: the second image becomes a soft portrait-gallery prologue. */
.view-container[data-view="queens"]::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  right: 0;
  height: 390px;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(18, 11, 24, 0.18) 0%, rgba(18, 11, 24, 0.5) 54%, var(--bg-deep) 100%),
    var(--goddess-art-two);
  background-position: center, center 28%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
}

.view-container[data-view="queens"]::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 190px;
  right: -18%;
  width: 64%;
  height: 460px;
  pointer-events: none;
  background-image: linear-gradient(120deg, rgba(18, 11, 24, 0.86), rgba(18, 11, 24, 0.3)), var(--goddess-art-one);
  background-position: center, right center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.15;
  mix-blend-mode: screen;
  transform: rotate(5deg);
}

.view-container[data-view="queens"] .home-header {
  padding: 24px 18px 28px;
  border: 1px solid rgba(229, 185, 111, 0.2);
  border-radius: 0 0 24px 24px;
  background: linear-gradient(135deg, rgba(24, 13, 31, 0.48), rgba(24, 13, 31, 0.16));
  backdrop-filter: blur(4px);
}

.view-container[data-view="queens"] .queen-card {
  isolation: isolate;
  overflow: hidden;
}

.view-container[data-view="queens"] .queen-card::before {
  z-index: 2;
}

.view-container[data-view="queens"] .queen-card::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(100deg, rgba(36, 21, 45, 0.96) 18%, rgba(36, 21, 45, 0.78) 58%, rgba(36, 21, 45, 0.3) 100%),
    var(--goddess-art-one);
  background-position: center, right center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.34;
}

.view-container[data-view="queens"] .queen-card > * {
  position: relative;
  z-index: 1;
}

/* Goddess Salon: one image anchors the welcome panel and the other rests in the feed. */
.view-container[data-view="chat"] .chat-header-section {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  padding: 24px 18px;
  background-image:
    linear-gradient(105deg, rgba(18, 11, 24, 0.9) 8%, rgba(18, 11, 24, 0.6) 60%, rgba(18, 11, 24, 0.78) 100%),
    var(--goddess-art-two);
  background-position: center, center 38%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: rgba(229, 185, 111, 0.24);
  box-shadow: var(--shadow-md);
}

.view-container[data-view="chat"] .chat-header-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(18, 11, 24, 0.9), rgba(18, 11, 24, 0.18)), var(--goddess-art-one);
  background-position: center, right center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.24;
  mix-blend-mode: screen;
}

.view-container[data-view="chat"] .chat-header-section > * {
  position: relative;
  z-index: 1;
}

.view-container[data-view="chat"] .chat-meta__item {
  padding: 5px 9px;
  border: 1px solid rgba(229, 185, 111, 0.18);
  border-radius: 999px;
  background: rgba(18, 11, 24, 0.44);
}

.view-container[data-view="chat"] .chat-feed {
  background-image:
    linear-gradient(rgba(17, 9, 23, 0.9), rgba(17, 9, 23, 0.94)),
    var(--goddess-art-one);
  background-position: center, center 40%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 32px rgba(11, 5, 15, 0.18);
}

@media (max-width: 480px) {
  .view-container[data-view="home"]::before,
  .view-container[data-view="queens"]::before {
    height: 360px;
  }

  .view-container[data-view="home"]::after,
  .view-container[data-view="queens"]::after {
    right: -32%;
    width: 82%;
  }

  .view-container[data-view="chat"] .chat-header-section {
    min-height: 166px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-container[data-view="home"]::after,
  .view-container[data-view="queens"]::after {
    transform: none;
  }
}