:root {
  --bg: #0b0a0e;
  --bg-2: #0e0c14;
  --panel: #14101c;
  --panel-2: #1c1726;
  --ink: #e8e0d2;
  --ink-dim: #c2b5a4;
  --gold: #c9a24b;
  --gold-bright: #e6c877;
  --blood: #8a1f2b;
  --blood-bright: #b8333f;
  --line: #342c42;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --font-title: "Cinzel", "Georgia", serif;
  --font-body: "Vollkorn", "Georgia", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 50% -10%, rgba(138, 31, 43, 0.22), transparent 70%),
    radial-gradient(900px 500px at 100% 0%, rgba(201, 162, 75, 0.08), transparent 60%),
    linear-gradient(180deg, #0b0a0e 0%, #0e0c13 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- animated night scene ------------------------------------------------ */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Depth between the painted scene and the readable content. Kept light: the
   cards carry their own solid background, so text stays readable while the
   keep and the horizon remain visible. */
.scene-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(5, 4, 9, 0.5) 0%,
      rgba(6, 5, 10, 0.22) 26%,
      rgba(6, 5, 10, 0.1) 46%,
      rgba(6, 5, 10, 0.3) 78%,
      rgba(5, 4, 9, 0.55) 100%),
    radial-gradient(60% 46% at 50% 22%, rgba(6, 5, 10, 0.42), transparent 72%);
}

/* Slow drifting embers drawn in CSS, so they keep moving even where canvas is
   throttled. The canvas has its own embers for depth. */
.ember-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.75;
}
.ember-field::before,
.ember-field::after {
  content: "";
  position: absolute;
  inset: -10% -10% -10% -10%;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 92%, rgba(230, 200, 119, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 88%, rgba(201, 162, 75, 0.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 41% 95%, rgba(184, 51, 63, 0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 90%, rgba(230, 200, 119, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 94%, rgba(201, 162, 75, 0.65), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 89%, rgba(230, 200, 119, 0.6), transparent 60%);
  background-size: 100% 100%;
  animation: ember-rise 22s linear infinite;
}
.ember-field::after {
  filter: blur(1px);
  opacity: 0.6;
  animation-duration: 34s;
  animation-delay: -9s;
}
@keyframes ember-rise {
  0%   { transform: translate3d(0, 12vh, 0) scale(1); opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { transform: translate3d(-2.5vw, -78vh, 0) scale(1.06); opacity: 0; }
}

/* Everything above the scene. */
header.site, main, footer.site { position: relative; z-index: 2; }

a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-title); letter-spacing: 0.04em; color: var(--gold-bright); }

header.site {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,10,14,0.95), rgba(11,10,14,0.6));
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 6px;
}
.brand .sigil {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gold); display: grid; place-items: center;
  color: var(--gold-bright); font-family: var(--font-title); font-size: 20px;
  box-shadow: 0 0 18px rgba(201,162,75,0.35) inset;
}
.brand h1 { font-size: 22px; margin: 0; }
.brand span { color: var(--ink-dim); font-size: 13px; display: block; }

nav.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 12px; }
nav.tabs button {
  background: transparent; border: 1px solid transparent; color: var(--ink-dim);
  font-family: var(--font-title); font-size: 13px; letter-spacing: 0.05em;
  padding: 7px 12px; cursor: pointer; text-transform: uppercase;
  border-radius: 4px;
}
nav.tabs button:hover { color: var(--ink); }
nav.tabs button.active {
  color: var(--gold-bright); border-color: var(--gold); background: rgba(201,162,75,0.08);
}

.lang { margin-left: auto; }
.lang select {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 8px; font-family: var(--font-body);
}

main { padding: 30px 0 80px; }
.page { display: none; animation: fade 0.35s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.hero { text-align: center; padding: 46px 24px; }
.hero h2 { font-size: 40px; margin: 0 0 10px; text-shadow: 0 0 26px rgba(201,162,75,0.25); }
.hero p.lead { color: var(--ink-dim); font-size: 19px; max-width: 640px; margin: 0 auto 22px; }

.btn {
  display: inline-block; cursor: pointer; font-family: var(--font-title);
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px;
  padding: 11px 20px; border-radius: 5px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #2a2233, #1a1622); color: var(--gold-bright);
  transition: 0.2s;
}
.btn:hover { background: linear-gradient(180deg, #3a2f47, #241d2f); box-shadow: 0 0 18px rgba(201,162,75,0.25); }
.btn.primary { border-color: var(--blood-bright); color: #f3d9d9; background: linear-gradient(180deg, #4a1620, #2a0e14); }
.btn.primary:hover { box-shadow: 0 0 20px rgba(184,51,63,0.35); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.tag { display: inline-block; font-size: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; color: var(--ink-dim); margin: 0 6px 6px 0; }

.rule-section { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.rule-section > summary {
  cursor: pointer; padding: 12px 16px; font-family: var(--font-title);
  color: var(--gold-bright); background: rgba(201,162,75,0.05); list-style: none;
}
.rule-section > summary::-webkit-details-marker { display: none; }
.rule-section ul { margin: 0; padding: 12px 18px 16px 34px; color: var(--ink); }
.rule-section li { margin-bottom: 8px; }

.chat { display: flex; flex-direction: column; height: 62vh; min-height: 420px; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 12px 15px; border-radius: 10px; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: linear-gradient(180deg, #3a2a1a, #2a1e12); border: 1px solid #5a4526; }
.msg.assistant { align-self: flex-start; background: linear-gradient(180deg, #241d2f, #1a1622); border: 1px solid var(--line); }
.msg.system { align-self: center; color: var(--ink-dim); font-size: 14px; text-align: center; }
.msg.offline { border-color: var(--blood); }

.msg-actions { display: flex; gap: 6px; margin-top: 8px; opacity: 0.35; transition: opacity 0.15s; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
.msg-action {
  border: 1px solid var(--line); background: rgba(0,0,0,0.25); color: var(--ink-dim);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 13px; line-height: 1.3;
  font-family: var(--font-body);
}
.msg-action:hover:not(:disabled) { color: var(--gold-bright); border-color: var(--gold); }
.msg-action:disabled { opacity: 0.35; cursor: not-allowed; }
.msg-action.wide { padding: 5px 12px; }

.msg-editor { display: flex; flex-direction: column; gap: 8px; }
.msg-editor textarea {
  width: 100%; box-sizing: border-box; resize: vertical; background: var(--bg); color: var(--ink);
  border: 1px solid var(--gold); border-radius: 6px; padding: 9px 11px;
  font-family: var(--font-body); font-size: 15px;
}
.msg-editor-bar { display: flex; gap: 8px; }

.chat-toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.convo-select {
  flex: 1; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 9px; font-family: var(--font-body); font-size: 14px;
}

.chat-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.2); }
.chat-form textarea {
  flex: 1; resize: none; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  font-family: var(--font-body); font-size: 16px; min-height: 46px; max-height: 130px;
}
.chat-form button { align-self: stretch; }

.hint { color: var(--ink-dim); font-size: 14px; }

.ai-notice {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(201, 162, 75, 0.12);
  color: var(--ink);
  font-size: 15px;
}
.story-template pre {
  white-space: pre-wrap; font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--ink); background: rgba(0,0,0,0.2); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; margin: 10px 0 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips button {
  background: rgba(201,162,75,0.06); border: 1px solid var(--line); color: var(--ink-dim);
  border-radius: 20px; padding: 5px 12px; cursor: pointer; font-size: 13px; font-family: var(--font-body);
}
.chips button:hover { color: var(--gold-bright); border-color: var(--gold); }

input[type="text"] {
  width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 5px; padding: 8px 10px; font-family: var(--font-body); font-size: 15px;
}

footer.site { border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 14px; padding: 22px 0; text-align: center; }

.flourish { text-align: center; color: var(--gold); opacity: 0.5; letter-spacing: 0.6em; margin: 6px 0 0; }

/* --- extra atmosphere ---------------------------------------------------- */

/* The sigil breathes, and a rune ring turns slowly behind it. */
.brand .sigil {
  position: relative;
  animation: sigil-pulse 4.5s ease-in-out infinite;
}
.brand .sigil::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(201, 162, 75, 0.42);
  animation: sigil-spin 26s linear infinite;
}
@keyframes sigil-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(201, 162, 75, 0.35) inset, 0 0 10px rgba(201, 162, 75, 0.18); }
  50%      { box-shadow: 0 0 26px rgba(230, 200, 119, 0.55) inset, 0 0 22px rgba(201, 162, 75, 0.4); }
}
@keyframes sigil-spin { to { transform: rotate(360deg); } }

/* Headline glows like torchlight, brightest where the light falls. */
.hero h2 {
  font-size: 40px;
  margin: 0 0 10px;
  background: linear-gradient(100deg, var(--gold) 12%, #fff3d2 38%, var(--gold-bright) 52%, var(--gold) 74%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 24px rgba(201, 162, 75, 0.3));
  animation: title-shimmer 9s ease-in-out infinite;
}
@keyframes title-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Cards catch a thin gold edge, as if lit from above. */
.card { position: relative; overflow: hidden; }
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.5), transparent);
}

.rule-section { transition: border-color 0.25s, transform 0.25s; }
.rule-section:hover { border-color: rgba(201, 162, 75, 0.45); }
.rule-section[open] > summary { background: rgba(201, 162, 75, 0.1); }

.btn { transition: 0.22s transform, 0.22s box-shadow, 0.22s background; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .brand .sigil,
  .brand .sigil::before,
  .hero h2,
  .ember-field::before,
  .ember-field::after { animation: none; }
  .ember-field { opacity: 0.4; }
  .page { animation: none; }
}

/* Player-made races and classes, read from the blog: a folded card per entry so
   the list stays short until a reader opens one. */
.player-entry { margin: 0 0 8px; }
.player-entry summary { cursor: pointer; }
.player-entry summary:hover { color: var(--gold-bright); }
.player-entry .article-body {
  margin-top: 10px;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 8px;
}
.player-entry .article-body p {
  margin: 0 0 6px;
  font-family: 'Vollkorn', Georgia, serif;
  white-space: pre-wrap;
  word-break: break-word;
}
.player-entry .article-body p.gap { height: 8px; margin: 0; }

/* --- dark-fantasy additions ---------------------------------------------- */
/* Everything below only adds layering and ornament. Colours, fonts, sizes and
   the page structure are untouched, so the existing look stays. Each block is
   decorative: removing it leaves the site as it was. */

/* Drifting fog between the painted scene and the content. It sits on z-index 1,
   where .scene-veil already lives, and never covers a card. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(48% 32% at 22% 78%, rgba(120, 112, 150, 0.08), transparent 70%),
    radial-gradient(42% 28% at 72% 86%, rgba(138, 31, 43, 0.07), transparent 72%),
    radial-gradient(60% 36% at 48% 96%, rgba(90, 84, 120, 0.07), transparent 74%);
  filter: blur(6px);
  animation: fog-drift 46s ease-in-out infinite alternate;
}
@keyframes fog-drift {
  0%   { transform: translate3d(-2.5%, 0, 0) scale(1); }
  50%  { transform: translate3d(1.5%, -1.5%, 0) scale(1.04); }
  100% { transform: translate3d(2.5%, 0, 0) scale(1); }
}

/* A very light film grain, so the flat panels read as painted canvas. Kept at
   low opacity; it is static, so it costs nothing per frame. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");
}

::selection { background: rgba(138, 31, 43, 0.55); color: #f6efe2; }

/* Thin ember-lit scrollbar, so the chat panes match the night. */
* { scrollbar-width: thin; scrollbar-color: rgba(201, 162, 75, 0.35) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.5), rgba(138, 31, 43, 0.45));
  border-radius: 6px;
}

/* A rune ornament under each page heading, like a ruled line in a grimoire. */
.page > h2 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.page > h2::after {
  content: "✦";
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 11px;
  color: var(--gold);
  opacity: 0.75;
  letter-spacing: 0.5em;
  text-shadow: -14px 0 0 rgba(201, 162, 75, 0.45), 14px 0 0 rgba(201, 162, 75, 0.45);
}
.page > h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: min(420px, 62%);
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.5), rgba(138, 31, 43, 0.28) 55%, transparent);
}

/* Cards catch a faint inner glow on hover; the layout does not move. */
.card { transition: border-color 0.3s, box-shadow 0.3s; }
.card:hover {
  border-color: rgba(201, 162, 75, 0.42);
  box-shadow: var(--shadow), 0 0 24px rgba(201, 162, 75, 0.12) inset;
}

/* Small corner marks, as if each card were a framed plate. */
.card::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-top: 1px solid rgba(201, 162, 75, 0.4);
  border-right: 1px solid rgba(201, 162, 75, 0.4);
  border-top-right-radius: 4px;
  pointer-events: none;
}

/* Lists get a small arcane marker instead of a plain dot. */
.rule-section li::marker,
.card li::marker { color: var(--gold); }

/* A slow halo behind the header, so it feels lit rather than flat. */
header.site::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.55) 50%, transparent);
  pointer-events: none;
}

/* The active tab gains a slow-burning underline. */
nav.tabs button { position: relative; transition: color 0.2s, border-color 0.2s, background 0.2s; }
nav.tabs button.active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  animation: tab-ember 3.4s ease-in-out infinite;
}
@keyframes tab-ember {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* Section headings inside cards get the same thin rule as pages, quieter. */
.card > h3 {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.card > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.45), transparent);
}

/* Chat bubbles pick up a faint rim, so they sit on the scene like lit stone. */
.msg.assistant { box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.06) inset; }
.msg.user { box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.08) inset; }

/* Buttons keep a soft ember at rest, brighter on hover. */
.btn:hover { box-shadow: 0 0 22px rgba(201, 162, 75, 0.22); }
.btn.primary:hover { box-shadow: 0 0 24px rgba(184, 51, 63, 0.4); }

/* --- the doorway between rooms ------------------------------------------- */
/* Walking from one section to another passes through a dark arched doorway:
   two stone leaves close over the page, the room changes underneath, and they
   part again. It covers the swap instead of sliding the whole page, which is
   cheap and reads instantly. Nothing here shows until .open is added. */

.doorway {
  position: fixed;
  inset: 0;
  z-index: 15;          /* under header (20), over the scene and content */
  pointer-events: none;
  visibility: hidden;
}
.doorway-leaves {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
}
/* The two leaves are the two pseudo-elements, so no extra nodes are needed. */
.doorway-leaves::before,
.doorway-leaves::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background:
    /* iron bands across the leaves */
    linear-gradient(180deg,
      transparent 0 12%, rgba(201, 162, 75, 0.14) 12% 13%,
      transparent 13% 50%, rgba(201, 162, 75, 0.14) 50% 51%,
      transparent 51% 88%, rgba(201, 162, 75, 0.14) 88% 89%, transparent 89%),
    /* vertical plank seams */
    repeating-linear-gradient(90deg, #0a0710 0 26px, #120d18 26px 28px),
    linear-gradient(180deg, #0a0710 0%, #120d18 40%, #0a0710 100%);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.95) inset;
  transform: scaleX(0);
}
.doorway-leaves::before {
  left: 0;
  transform-origin: left center;
  border-right: 1px solid rgba(201, 162, 75, 0.28);
}
.doorway-leaves::after {
  right: 0;
  transform-origin: right center;
  border-left: 1px solid rgba(201, 162, 75, 0.28);
}

/* A lit arch between the leaves, so the doorway reads as an opening even while
   the stone is shut. */
.doorway-arch {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(230, 200, 119, 0.7) 30%, rgba(230, 200, 119, 0.7) 70%, transparent);
  opacity: 0;
  box-shadow: 0 0 26px rgba(230, 200, 119, 0.45);
}
.doorway-runes {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: 22px;
  letter-spacing: 0.5em;
  color: var(--gold-bright);
  opacity: 0;
  text-shadow: 0 0 22px rgba(201, 162, 75, 0.5);
}

/* One easing for the whole walk: slow at both ends, unhurried through the
   middle, so the stone glides instead of snapping. The leaves also brighten as
   they come across, which hides the hard edge of the scale. */
.doorway-leaves::before,
.doorway-leaves::after { will-change: transform; }

.doorway.open { visibility: visible; }
.doorway.open .doorway-leaves { opacity: 1; transition: opacity 0.8s ease-out; }
.doorway.open .doorway-leaves::before,
.doorway.open .doorway-leaves::after {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.33, 0, 0.2, 1);
}
.doorway.open .doorway-arch { opacity: 0.9; transition: opacity 0.7s ease-in 0.2s; }
.doorway.open .doorway-runes { opacity: 0.9; transition: opacity 0.8s ease-in 0.32s; }

/* Opening: the leaves draw back, the arch lingers a moment then fades, like a
   door left ajar. Slower than the close so the room is revealed gently. */
.doorway.parting .doorway-leaves::before,
.doorway.parting .doorway-leaves::after {
  transform: scaleX(0);
  transition: transform 1.05s cubic-bezier(0.33, 0, 0.2, 1);
}
.doorway.parting .doorway-leaves { opacity: 0; transition: opacity 1.05s ease-in 0.1s; }
.doorway.parting .doorway-arch { opacity: 0; transition: opacity 0.6s ease-out 0.18s; }
.doorway.parting .doorway-runes { opacity: 0; transition: opacity 0.45s ease-out; }
.doorway.parting { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .doorway { display: none; }
}