/* ============================================================================
   THE PAINTED FACADE (S1b) — accepted plates as the scenery; live type + light
   system stay LIVE on top. Masters live in docs/design (never served); these
   rules drive the assets/plates web derivatives.
   ========================================================================= */

/* ---- carried lamp now rides OVER the paint (screen-blend brightens painted
        flames as it passes); still one transform-repositioned node ---- */
#carried-lamp {
  z-index: 1;
  mix-blend-mode: screen;
}
/* content sits above the carried lamp so type never washes out */
main {
  z-index: 2;
}

/* ==================== THE GATE — plate hero ==================== */
/* On desktop the nav floats over the painted sky; on mobile the nav stays in-flow
   (a bar above the tall plate) so it never collides with the stacked title. */
@media (min-width: 720px) {
  body.gate header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
  }
  /* a whisper of dark at the very top so the nav reads over the painted sky (radial, never a box) */
  body.gate header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 160%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 10, 8, 0.72), transparent);
  }
}

.facade {
  position: relative;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  text-align: center;
}
.facade-plate,
.facade-plate img {
  display: block;
  width: 100%;
  height: auto;
}
/* CSS lamp pools aligned to the plate's PAINTED flames — screen-blend + breathing
   makes the painted fire live. Coords match facade_master braziers. */
.facade-lamps {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(170px 150px at 5% 79%, rgba(255, 201, 107, 0.5), transparent 62%),
    radial-gradient(200px 175px at 20.5% 80%, rgba(255, 201, 107, 0.42), transparent 62%),
    radial-gradient(200px 175px at 79% 80%, rgba(255, 201, 107, 0.42), transparent 62%),
    radial-gradient(170px 150px at 96% 78%, rgba(255, 201, 107, 0.5), transparent 62%);
  animation: lampBreath 5s ease-in-out infinite;
}
/* live hero over the doorway sky — the LOCKUP is the centerpiece (§ owner rulings 1–3) */
.facade-content {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 90%);
  z-index: 3;
  text-align: center;
}
/* pre-authorized radial scrim behind the hero — never a box */
.facade-content::before {
  content: "";
  position: absolute;
  inset: -10% -16%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 58% at 50% 42%, rgba(9, 8, 6, 0.66), rgba(9, 8, 6, 0.28) 60%, transparent 76%);
}
/* THE HERO LOGO — the full lockup (carries wordmark + tagline) */
.facade .hero-logo {
  display: block;
  width: min(560px, 74vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 34px rgba(0, 0, 0, 0.72));
}
.facade .hero-copy {
  font-family: var(--text);
  color: var(--gold-burnished);
  opacity: 0.92;
  max-width: 34ch;
  margin: 1rem auto 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
}
.facade .promise {
  font-family: var(--text);
  color: var(--flame-core);
  font-size: clamp(0.9rem, 1.9vw, 1.1rem);
  margin: 0.9rem 0 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95);
}
/* THE CEREMONIAL PLATE — the connect CTA in the hero rhythm (§ owner ruling B, S1e).
   lockup → war line → PLATE → promise. The plate is the disconnected face only;
   on connect the whole cta hides and the header nameplate carries identity. */
.facade .hero-cta {
  margin: 0.9rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.facade .hero-cta.hidden {
  display: none;
}
.plate-btn {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}
.plate-btn .plate-face {
  display: block;
  width: min(440px, 60vw);
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6));
  transition: filter 150ms ease;
}
/* image-safe golden wake on hover/focus (brightness + flame-halo, 150ms) */
.plate-btn:hover .plate-face,
.plate-btn:focus-visible .plate-face {
  filter: brightness(1.08) drop-shadow(0 0 20px rgba(232, 147, 58, 0.6));
}
.plate-btn:focus {
  outline: none;
}
.plate-btn:focus-visible {
  outline: 2px solid rgba(232, 147, 58, 0.8);
  outline-offset: 6px;
  border-radius: 8px;
}
.facade .plate-sub {
  font-family: var(--text);
  color: var(--gold-burnished);
  opacity: 0.9;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
}
.facade .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
}
/* the seam bridge: the plate's stone floor melts into the below-fold stone ground */
.facade-seam {
  height: 8vh;
  margin-top: -1px;
  background: linear-gradient(180deg, rgba(11, 10, 8, 0) 0%, var(--stone-void) 82%);
  position: relative;
  z-index: 4;
}

/* desktop plate content placement (landscape doorway) — top lifted to seat the plate */
@media (min-width: 720px) {
  .facade-content {
    top: 10%;
  }
  .facade .hero-logo {
    width: min(490px, 64vw);
  }
}
/* mobile plate content placement (portrait: lockup in the upper starfield, cta below) */
@media (max-width: 719px) {
  .facade-content {
    top: 6%;
    width: 92%;
  }
  .facade .hero-logo {
    width: min(300px, 78vw);
  }
  .facade .hero-copy {
    margin-top: 15vw;
  } /* drop the war line + plate + promise onto the doorway of the tall plate, below the lockup */
  .plate-btn .plate-face {
    width: min(320px, 86vw);
  }
  .facade-lamps {
    background:
      radial-gradient(120px 120px at 18% 25%, rgba(255, 201, 107, 0.42), transparent 62%),
      radial-gradient(120px 120px at 80% 25%, rgba(255, 201, 107, 0.42), transparent 62%),
      radial-gradient(150px 130px at 14% 70%, rgba(255, 201, 107, 0.46), transparent 62%),
      radial-gradient(150px 130px at 84% 70%, rgba(255, 201, 107, 0.46), transparent 62%);
  }
}

/* ==================== THE RITE — plate scene ==================== */
.rite-scene {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
}
.rite-scene .rite-plate,
.rite-scene .rite-plate img {
  display: block;
  width: 100%;
  height: auto;
}
/* painted braziers (rite_plate: x8%/x92%, y78%) come alive */
.rite-scene .rite-lamps {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(150px 150px at 8% 78%, rgba(255, 201, 107, 0.5), transparent 62%),
    radial-gradient(150px 150px at 92% 78%, rgba(255, 201, 107, 0.5), transparent 62%);
  animation: lampBreath 5.4s ease-in-out infinite;
}
/* the RITE MARK hangs above the door's lintel (top-center of the plate) */
.rite-mark-hang {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 20%, 220px);
  z-index: 3;
}
.rite-mark-hang img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  transition: filter 700ms ease;
}
/* unlit: darkened + desaturated toward aged gold */
.rite-mark-hang.unlit img {
  filter: brightness(0.5) saturate(0.55) sepia(0.15) contrast(0.95);
}
/* burning: full + flame-halo glow */
.rite-mark-hang.burning img {
  filter: brightness(1.04) saturate(1.05) drop-shadow(0 0 26px rgba(232, 147, 58, 0.55));
}
/* the vermilion thread draws across the lintel just under the mark */
.rite-scene .rite-thread {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 46%);
  z-index: 3;
}
/* the threshold: state message + button on the stone at the doorway's foot */
.rite-threshold {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  width: min(520px, 84%);
  text-align: center;
  z-index: 3;
}
.rite-threshold .rite-state-msg {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.95);
  margin: 0 auto 1.2rem;
}
.rite-threshold::before {
  content: "";
  position: absolute;
  inset: -34% -20% -46%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 62% at 50% 55%, rgba(7, 6, 4, 0.82), rgba(7, 6, 4, 0.4) 62%, transparent 80%);
}
@media (max-width: 719px) {
  .rite-mark-hang {
    top: 8%;
    width: clamp(120px, 34%, 180px);
  }
  .rite-threshold {
    bottom: 4%;
  }
}

/* ==================== THE TREASURY — hall behind the plinths ==================== */
body.treasury::after {
  /* the hall plate as a fixed ambient behind everything, receding into dark */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-color: #050403;
  background-image: image-set(
    url("../assets/plates/treasury_hall.webp") type("image/webp"),
    url("../assets/plates/treasury_hall.jpg") type("image/jpeg")
  );
  background-image: -webkit-image-set(
    url("../assets/plates/treasury_hall.webp") type("image/webp"),
    url("../assets/plates/treasury_hall.jpg") type("image/jpeg")
  );
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}
/* a light veil: keeps plinth contrast but lets the painted hall recede visibly */
body.treasury::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(5, 4, 3, 0.12), rgba(5, 4, 3, 0.34) 55%, rgba(5, 4, 3, 0.5));
  transition: background 600ms ease;
}
/* chamber filter tints OVER the paint (warm the hall ambient toward the ground) */
body.treasury[data-chamber="devas"]::before {
  background: linear-gradient(180deg, rgba(58, 42, 16, 0.34), rgba(5, 4, 3, 0.5));
}
body.treasury[data-chamber="asuras"]::before {
  background: linear-gradient(180deg, rgba(58, 19, 12, 0.36), rgba(5, 4, 3, 0.5));
}
body.treasury[data-chamber="vanaras"]::before {
  background: linear-gradient(180deg, rgba(15, 42, 32, 0.36), rgba(5, 4, 3, 0.5));
}
body.treasury[data-chamber="nagas"]::before {
  background: linear-gradient(180deg, rgba(12, 24, 38, 0.4), rgba(5, 4, 3, 0.52));
}

/* ==================== reduced motion: static fully-lit, no breathing ==================== */
@media (prefers-reduced-motion: reduce) {
  .facade-lamps,
  .rite-scene .rite-lamps {
    animation: none;
    opacity: 0.85;
  }
}

/* ============================================================================
   S1h — CARVED IMAGE BUTTONS site-wide (dual-CTA, three cards, explore-factions).
   Reuse the S1e .plate-btn wake (brightness + flame-halo, 150ms) + focus ring;
   these rules only SIZE the plate per context and add the sub-line + states.
   Appended last so the context widths win over the hero .plate-face on source order.
   ========================================================================= */
/* the plate button is display:block; shrink it to the image and center it
   (doorway columns + explore foot are not flex-centered like the cards are) */
.doorway-cta,
.scene-cta,
.explore-cta {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.doorway-cta .plate-face {
  width: min(280px, 74vw);
}
.scene-cta .plate-face {
  width: min(262px, 72vw);
}
.explore-cta .plate-face {
  width: min(300px, 80vw);
}
/* live sub-line beneath an image button (the prior carved buttons carried these) */
.btn-sub {
  display: block;
  font-family: var(--text);
  color: var(--gold-burnished);
  opacity: 0.86;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.92);
  margin-top: 0.5rem;
}
/* explore-factions: centered at the band's foot */
.explore-foot {
  text-align: center;
  margin-top: 3.4vh;
}
/* the three-card buttons sit tight under the copy; uniform plate height keeps the grid aligned */
.scene-card .scene-cta {
  margin-top: 0.2rem;
}
/* connected "Declared" state — image gone, aged-gold sleeping text chip */
.doorway-cta.declared-state {
  line-height: normal;
  border: 1px solid var(--gold-aged);
  border-radius: 2px;
  padding: 0.55rem 1.7rem;
  cursor: default;
}
.doorway-cta.declared-state:hover .plate-face,
.doorway-cta.declared-state:focus-visible .plate-face {
  filter: none;
}
.doorway-cta.declared-state .declared {
  font-family: var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-aged);
  font-size: 0.82rem;
}