/* ==========================================================================
   "There's room for you here" (index.html). Two plum panels, closed but for
   a seam of light, part from the center to reveal the real photograph of the
   building where the church meets; the welcome arrives line by line on a
   soft plum shade along the right, clear of the entrances. Motion lives in
   assets/js/room.js. Without it (or with reduced motion) the panels stand
   open and every line is visible.
   ========================================================================== */

.rm { position: relative; overflow: hidden; color: var(--ivory); background: var(--midnight); }

.rm__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 40rem;
  perspective: 1600px;
}

/* The photograph: real colors, only framed */
.rm__photo { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #2b0d38; }
.rm__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* Shade for legible words: a band at the top for the headline, a soft wash
   on the right for the welcome (the entrances sit left of center), and a
   fall into plum at the bottom that leads into the globe */
.rm__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(36, 10, 48, 0.88) 0%, rgba(36, 10, 48, 0.45) 18%, rgba(36, 10, 48, 0) 34%),
    linear-gradient(270deg, rgba(36, 10, 48, 0.95) 0%, rgba(36, 10, 48, 0.88) 32%, rgba(36, 10, 48, 0.5) 46%, rgba(36, 10, 48, 0) 58%),
    linear-gradient(0deg, var(--midnight) 0%, rgba(36, 10, 48, 0.6) 9%, rgba(36, 10, 48, 0) 22%);
}

/* The panels: architectural planes with fine vertical fluting */
.rm__wall {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 1px);
  background:
    repeating-linear-gradient(90deg, rgba(255, 247, 235, 0.028) 0 1px, transparent 1px 5.5rem),
    linear-gradient(180deg, #2c0e39 0%, #36123f 55%, #2a0c35 100%);
  backface-visibility: hidden;
  will-change: transform;
}
.rm__wall--l { left: 0; transform-origin: 0% 50%; box-shadow: inset -2.5rem 0 3rem -2rem rgba(0, 0, 0, 0.35); }
.rm__wall--r { right: 0; transform-origin: 100% 50%; box-shadow: inset 2.5rem 0 3rem -2rem rgba(0, 0, 0, 0.35); }
.rm__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(230, 166, 79, 0.15), rgba(230, 166, 79, 0.75) 60%, rgba(230, 166, 79, 0.9));
}
.rm__wall--l .rm__edge { right: 0; }
.rm__wall--r .rm__edge { left: 0; }

/* The seam of light between the closed panels */
.rm__seam {
  position: absolute;
  left: 50%;
  top: 18%;
  bottom: 0;
  width: 2px;
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(255, 236, 200, 0), rgba(255, 236, 200, 0.9) 35%, #fff1d8);
  box-shadow: 0 0 1.5rem 0.25rem rgba(243, 217, 177, 0.45);
  opacity: 0;
}

/* Still version (reduced motion, no script): the panels stand fully open */
.rm__wall--l { transform: translateX(-102%); }
.rm__wall--r { transform: translateX(102%); }

/* Words */
.rm__words { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rm__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + clamp(0.75rem, 3svh, 2rem));
  margin: 0 auto;
  padding-inline: var(--gutter);
  max-width: 22ch;
  font: 400 clamp(2.6rem, 1rem + 3.6vw, 5rem)/1 var(--serif);
  letter-spacing: -0.035em;
  text-align: center;
  color: var(--ivory);
  text-shadow: 0 0.05em 0.6em rgba(36, 10, 48, 0.6);
  text-wrap: balance;
}
.rm-w { display: inline-block; overflow: hidden; padding-block: 0.04em 0.12em; margin-block: -0.04em -0.12em; vertical-align: top; }
.rm-w > span { display: inline-block; }

.rm__lines {
  position: absolute;
  right: max(var(--gutter), calc((100vw - 88rem) / 2 + var(--gutter)));
  top: 50%;
  width: min(32rem, 36vw);
  translate: 0 -36%;
}
.rm__l {
  margin: 0 0 clamp(1rem, 2.2svh, 1.5rem);
  font: italic 400 clamp(1.35rem, 0.95rem + 0.95vw, 1.95rem)/1.36 var(--serif);
  color: var(--ivory);
  text-shadow: 0 0.05em 0.5em rgba(36, 10, 48, 0.7);
  text-wrap: balance;
}
.rm__l.rm__you {
  margin: clamp(1.5rem, 3.5svh, 2.5rem) 0 0;
  padding-top: clamp(1.25rem, 3svh, 2rem);
  border-top: 1px solid rgba(230, 166, 79, 0.55);
  font: italic 400 clamp(2rem, 1rem + 2.2vw, 3.4rem)/1.08 var(--serif);
  letter-spacing: -0.015em;
  color: #f6dfb8;
}

/* ---------- Phones and tablets: headline, the photograph, then the words ---------- */

@media (max-width: 960px) {
  /* headline, then the photograph, then the welcome */
  .rm__stage { display: flex; flex-direction: column; height: auto; min-height: 0; perspective: none; padding: clamp(4.5rem, 16vw, 6rem) 0 clamp(4rem, 12vw, 5.5rem); }
  .rm__words { display: contents; }
  .rm__title { position: static; order: 1; max-width: 12ch; }
  .rm__photo { order: 2; }
  .rm__lines { order: 3; }
  .rm__photo {
    position: relative;
    inset: auto;
    margin: clamp(2rem, 7vw, 3rem) var(--gutter) 0;
    aspect-ratio: 4 / 3.4;
    border-radius: 1rem;
    box-shadow: 0 0 0 1px var(--hairline-gold);
  }
  .rm__photo img { object-position: 30% 60%; }
  .rm__shade, .rm__wall, .rm__seam { display: none; }
  .rm__lines { position: static; width: auto; translate: none; margin: clamp(2rem, 7vw, 3rem) var(--gutter) 0; }
  .rm__l { text-shadow: none; color: var(--ivory-soft); }
  .rm__l.rm__you { color: var(--gold); }
}