/* 光的房间: the hall the five rooms open from. A dark gallery with a polished floor and five arched doorways in a row,
   each open onto its room and letting that room's light out: a glow round the arch and a pool of it on the floor.
   Through each door the room moves through a few of its moments (hall.mjs fades between the pictures). A little dust
   drifts in the light behind (hall.mjs). On a phone the doors stand one under another, each with its words beside it. */
:root {
  color-scheme: dark;
  --bg: #070609;
  --text: #f1ebe1;
  --muted: #a7a098;
  --hair: rgb(255 240 220 / 12%);
  --accent: #e8cf9e;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* The wall darkens upwards into the room's ceiling, and the floor in front of the doors catches a little light. */
body {
  min-width: 300px;
  min-height: 100vh;
  background:
    radial-gradient(70% 40% at 50% 78%, rgb(60 46 36 / 34%) 0%, transparent 70%),
    linear-gradient(180deg, #050407 0%, #0a090c 52%, #0d0b0c 76%, #060507 100%);
  background-attachment: fixed;
}
.motes { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hall, tipo-bar { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

tipo-bar {
  --tipo-fg: var(--text);
  --tipo-muted: #8d877f;
  --tipo-line: var(--hair);
  --tipo-hover: rgb(255 255 255 / 7%);
  --tipo-accent: var(--accent);
  --tipo-accent-bg: rgb(232 207 158 / 14%);
  --tipo-lab: linear-gradient(100deg, #fff1d8 10%, #e8cf9e 60%, #c9b28a);
}

.hall { width: min(1180px, 100%); margin: 0 auto; padding: 32px 28px 80px; }
.hall-head { max-width: 640px; margin: 36px auto 56px; text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.8; }
html[data-lang='en'] .eyebrow { letter-spacing: 0.18em; }
.hall-head h1 {
  margin: 0 0 18px;
  font: 500 clamp(40px, 7vw, 64px) / 1.1 var(--serif);
  letter-spacing: 0.12em;
  color: #f6eee0;
  text-shadow: 0 0 36px rgb(232 207 158 / 28%);
}
html[data-lang='en'] .hall-head h1 { letter-spacing: 0.02em; }
.lede { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; text-wrap: pretty; }

.rooms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin: 0; padding: 0; list-style: none; }
.room {
  --glow: 232 207 158;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  border-radius: 12px;
}
.room-seasons { --glow: 255 196 170; }
.room-stars { --glow: 236 206 140; }
.room-rain { --glow: 130 190 255; }
.room-ink { --glow: 236 226 206; }
.room-aurora { --glow: 120 240 190; }

/* The doorway: an arch open onto the room, a thin stone edge, the room's light round it and out over the floor. */
.door { position: relative; display: block; width: 100%; }
.door::after {
  content: '';
  position: absolute;
  left: -30%;
  right: -30%;
  top: 100%;
  height: 110px;
  background: radial-gradient(50% 100% at 50% 0%, rgb(var(--glow) / 26%) 0%, rgb(var(--glow) / 8%) 45%, transparent 100%);
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.8s var(--ease);
}
.room-art {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 50% 50% 3px 3px / 28.125% 28.125% 3px 3px;
  box-shadow: 0 0 0 1px rgb(255 240 220 / 16%), 0 0 36px -8px rgb(var(--glow) / 50%), 0 0 110px -24px rgb(var(--glow) / 45%);
  -webkit-box-reflect: below 4px linear-gradient(transparent 80%, rgb(0 0 0 / 16%));
  transition: box-shadow 0.8s var(--ease);
}
/* The door's depth: its reveal darkens just inside the edge. */
.room-art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%), inset 0 0 28px rgb(0 0 0 / 55%); pointer-events: none; }
.room-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: opacity 2.6s ease-in-out, filter 0.8s;
  animation: breathe 32s ease-in-out infinite alternate;
}
.room-art img.off { opacity: 0; }
@keyframes breathe { to { transform: scale(1.1); } }
.room:hover .room-art, .room:focus-visible .room-art { box-shadow: 0 0 0 1px rgb(var(--glow) / 45%), 0 0 44px -6px rgb(var(--glow) / 70%), 0 0 150px -20px rgb(var(--glow) / 60%); }
.room:hover .room-art img, .room:focus-visible .room-art img { filter: brightness(1.12); }
.room:hover .door::after, .room:focus-visible .door::after { opacity: 1; }
.room-seasons .room-art { background: #1a0f12; }
.room-stars .room-art { background: #05070f; }
.room-rain .room-art { background: #0a0d16; }
.room-ink .room-art { background: #ece6da; }
/* Ink is white paper; through a door in a dark hall it is seen in the room's own dimmer light. */
.room-ink .room-art img { filter: brightness(0.8) sepia(0.1); }
.room-ink:hover .room-art img, .room-ink:focus-visible .room-art img { filter: brightness(0.92) sepia(0.06); }
.room-aurora .room-art { background: #02060a; }

.room-text { position: relative; display: grid; gap: 8px; padding: 34px 2px 0; text-align: center; }
.room-text strong { font: 500 20px/1.3 var(--serif); letter-spacing: 0.08em; color: #f6eee0; }
html[data-lang='en'] .room-text strong { letter-spacing: 0.01em; }
.room-line { color: var(--muted); font-size: 13px; line-height: 1.65; text-wrap: pretty; }

/* Narrower: the doors stand one under another, each with its words beside it. */
@media (max-width: 899px) {
  .hall { padding: 20px 18px 56px; }
  .hall-head { margin: 16px auto 36px; }
  .rooms { grid-template-columns: 1fr; gap: 34px; max-width: 640px; margin: 0 auto; }
  .room { flex-direction: row; align-items: center; gap: 22px; }
  .door { flex: none; width: min(38%, 190px); }
  .door::after { height: 40px; left: -12%; right: -12%; }
  .room-art { -webkit-box-reflect: none; }
  .room-text { padding: 0; text-align: left; align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .room-art, .door::after, .room-art img { transition-duration: 0.01s; }
  .room-art img { animation: none; }
}