/* Rose District conference-room board.
   Designed for a 16:9 TV viewed from ~3 m. Everything is sized in vh/vw so it
   scales from 1080p to 4K without changes. Black, white, tints of black only. */

@font-face { font-family: Poppins; font-weight: 300; src: url(/assets/fonts/Poppins-Light.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 400; src: url(/assets/fonts/Poppins-Regular.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 500; src: url(/assets/fonts/Poppins-Medium.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 600; src: url(/assets/fonts/Poppins-SemiBold.ttf) format("truetype"); }

:root {
  --bg: #000;
  --fg: #fff;
  --g1: rgba(255,255,255,.88);
  --g2: rgba(255,255,255,.62);
  --g3: rgba(255,255,255,.38);
  --g4: rgba(255,255,255,.14);
  --g5: rgba(255,255,255,.07);
  --pad: 3.4vw;
  --radius: 1.6vh;
  --fade: 1400ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; background: var(--bg); color: var(--fg); overflow: hidden; }
body {
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
::-webkit-scrollbar { display: none; }
img { display: block; }

/* ---------- layout ---------- */
.board {
  display: grid;
  grid-template-rows: 11vh 47vh 20vh 16vh 6vh;
  grid-template-areas: "top" "stage" "market" "reviews" "bottom";
}
.top {
  grid-area: top;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
}
.logo { height: 4.2vh; width: auto; }
.clock { text-align: right; }
.time { font-weight: 300; font-size: 5.2vh; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.date { font-size: 1.9vh; color: var(--g2); margin-top: .6vh; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- listing slideshow ---------- */
.stage { grid-area: stage; position: relative; padding: 0 var(--pad); }
.slide {
  position: absolute; inset: 0 var(--pad);
  display: grid; grid-template-columns: 58fr 42fr; gap: 2.6vw;
  opacity: 0; transition: opacity var(--fade) ease;
}
.slide.on { opacity: 1; }
.photo {
  position: relative; overflow: hidden; border-radius: var(--radius); background: #111;
}
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
}
.slide.on .photo img { animation: kenburns 14s linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.photo .missing {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--g3); font-size: 2.2vh; letter-spacing: .1em; text-transform: uppercase;
}

.info { display: flex; flex-direction: column; justify-content: center; gap: 2.2vh; padding-right: 1vw; }
.badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 1vh;
  font-weight: 600; font-size: 1.9vh; letter-spacing: .22em; text-transform: uppercase;
  padding: 1vh 1.8vh; border-radius: 999px;
  border: .22vh solid var(--fg); color: var(--fg);
}
.badge.active { background: var(--fg); color: var(--bg); }
.badge.sold { background: var(--g4); border-color: transparent; color: var(--g1); }
.badge.pending, .badge.coming-soon { background: transparent; }
.price { font-weight: 500; font-size: 7.6vh; line-height: 1; letter-spacing: -.01em; }
.price.sold-price { color: var(--g1); }
.address { font-weight: 400; font-size: 3.6vh; line-height: 1.15; }
.city { font-weight: 300; font-size: 2.4vh; color: var(--g2); margin-top: .4vh; }
.facts { display: flex; gap: 3.2vw; margin-top: .4vh; }
.fact .n { font-weight: 500; font-size: 3.4vh; line-height: 1; }
.fact .l { font-size: 1.6vh; color: var(--g2); letter-spacing: .14em; text-transform: uppercase; margin-top: .7vh; }
.note { font-size: 2vh; color: var(--g2); }

/* progress dots */
.dots { position: absolute; left: var(--pad); bottom: -1.2vh; display: flex; gap: .9vh; }
.dots i { width: .9vh; height: .9vh; border-radius: 50%; background: var(--g4); }
.dots i.on { background: var(--fg); }

/* ---------- market strip ---------- */
.market {
  grid-area: market;
  margin: 2.4vh var(--pad) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1vw;
}
.area {
  border-top: .18vh solid var(--g4);
  padding-top: 1.8vh;
  /* fixed name column + four equal cells, so long labels wrap inside their cell instead of
     squeezing the neighbours (1fr alone shrinks to content when the row is tight) */
  display: grid; grid-template-columns: 11.2vw repeat(4, minmax(0, 1fr)); gap: .9vw; align-items: start;
}
.area h2 { font-weight: 500; font-size: 2.4vh; line-height: 1.15; letter-spacing: .02em; padding-right: .6vw; align-self: center; }
.area h2 small { display: block; font-weight: 300; font-size: 1.5vh; color: var(--g3); letter-spacing: .12em; text-transform: uppercase; margin-top: .6vh; }
.stat .v { font-weight: 500; font-size: 4.2vh; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 1.55vh; color: var(--g2); letter-spacing: .12em; text-transform: uppercase; margin-top: .9vh; }
.stat .d { font-size: 1.6vh; color: var(--g3); margin-top: .4vh; min-height: 1.9vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- reviews ---------- */
.reviews { grid-area: reviews; position: relative; margin: 0 var(--pad); }
.review {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr auto; gap: 3vw; align-items: center;
  border-top: .18vh solid var(--g4); padding-top: 2vh;
  opacity: 0; transition: opacity var(--fade) ease;
}
.review.on { opacity: 1; }
.quote { font-weight: 300; font-size: 2.75vh; line-height: 1.38; color: var(--g1); max-width: 112vh; }
.quote::before { content: "\201C"; color: var(--g3); margin-right: .2em; }
.quote::after { content: "\201D"; color: var(--g3); margin-left: .2em; }
.who { text-align: right; white-space: nowrap; }
.stars { font-size: 2.1vh; letter-spacing: .25em; color: var(--fg); }
.who .n { font-weight: 500; font-size: 2.1vh; margin-top: .8vh; }
.who .d { font-size: 1.6vh; color: var(--g2); margin-top: .3vh; }
.src {
  display: inline-block; margin-top: 1vh; font-size: 1.35vh; letter-spacing: .2em; text-transform: uppercase;
  color: var(--g2); border: .15vh solid var(--g4); padding: .5vh 1.1vh; border-radius: 999px;
}

/* ---------- footer ---------- */
.bottom {
  grid-area: bottom; display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--pad); font-size: 1.5vh; color: var(--g3); letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- welcome mode ---------- */
.welcome {
  position: fixed; inset: 0; background: var(--bg); z-index: 10;
  display: grid; place-items: center; text-align: center;
  opacity: 0; transition: opacity 900ms ease;
}
.welcome.on { opacity: 1; }
.welcome[hidden] { display: none; }
.welcome-photo {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .32; filter: saturate(.85);
}
.welcome-photo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 75%);
}
.welcome-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.2vh; padding: 0 8vw; }
.welcome-logo { height: 5vh; margin-bottom: 4vh; }
.welcome-kicker { font-weight: 600; font-size: 2.6vh; letter-spacing: .42em; text-transform: uppercase; color: var(--g2); }
.welcome-name { font-weight: 500; font-size: 13vh; line-height: 1.02; letter-spacing: -.01em; }
.welcome-name.long { font-size: 9vh; }
.welcome-meta { font-size: 3vh; color: var(--g1); }
.welcome-line { font-size: 2.6vh; color: var(--g2); margin-top: 2vh; }

/* ---------- status / debug ---------- */
.toast {
  position: fixed; left: var(--pad); bottom: 1.2vh; font-size: 1.4vh; color: var(--g3); letter-spacing: .1em;
}