:root {
  --walnut: #3A2214;
  --walnut-dk: #1E1009;
  --walnut-lt: #5A3620;
  --brass-hi: #F3DFA2;
  --brass: #C9A04E;
  --brass-dk: #7A5A22;
  --gilt: #B88A2E;
  --ink: #2A1B08;
  --cream: #F1E6CC;
  --muted: #CDBB94;
  --velvet: #6B1020;
  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --caps: 'Cinzel', 'Trajan Pro', Garamond, serif;
  /* Wood: fine vertical grain from turbulence over a broad figure from a gradient. */
  --wood:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='640'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.008' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0 0.01 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, var(--walnut-dk), var(--walnut) 18%, var(--walnut-lt) 50%, var(--walnut) 82%, var(--walnut-dk));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100dvh; }
body {
  overflow-x: hidden; color: var(--cream); font-family: var(--serif); font-size: 19px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--wood) fixed, var(--walnut);
}
[hidden] { display: none !important; }
a { color: var(--brass-hi); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }

/* ---------- Brass ---------- */
.plaque, .placard, .brass-btn {
  color: var(--ink);
  background:
    linear-gradient(105deg, transparent 42%, rgba(255,250,225,.55) 50%, transparent 58%) no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px, rgba(0,0,0,.05) 3px 4px),
    linear-gradient(160deg, var(--brass-hi) 0%, var(--brass) 28%, #E6C97E 52%, var(--brass) 70%, var(--brass-dk) 100%);
  background-size: 300% 100%, auto, auto;
  background-position: 150% 0, 0 0, 0 0;
  border: 1px solid var(--brass-dk);
  box-shadow: 0 1px 0 rgba(255,240,200,.6) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 6px 16px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.6);
  /* Engraved: dark cut, with a highlight on the lower lip. */
  text-shadow: 0 1px 0 rgba(255,244,210,.55), 0 -1px 0 rgba(60,40,10,.25);
}
.plaque, .placard { position: relative; border-radius: 3px; text-align: center; }
.plaque::before, .plaque::after, .placard::before, .placard::after {
  content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 8px;
  background: radial-gradient(circle at 35% 35%, #FFF1C4, #A47A30 55%, #4A3410);
  box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.plaque::before, .placard::before { left: 8px; }
.plaque::after, .placard::after { right: 8px; }
.est { font-family: var(--caps); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; margin: 0; }
.plaque h1, .plaque h2 { font-family: var(--caps); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; line-height: 1.12; }
/* One glint across the brass as it comes into the light; it doesn't repeat. */
@keyframes glint { 0%, 70% { background-position: 150% 0, 0 0, 0 0; } 100% { background-position: -50% 0, 0 0, 0 0; } }
.plaque { animation: glint 1.6s 1.6s ease-out 1 both; }

.brass-btn {
  font: 600 14px var(--caps); letter-spacing: .2em; text-transform: uppercase; padding: 16px 24px; border-radius: 3px; cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.brass-btn:hover:not(:disabled) { animation: glint 1.2s ease-out 1; transform: translateY(-1px); }
.brass-btn:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }

/* ---------- Foyer ---------- */
.foyer { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px 40px; gap: 32px; text-align: center; }
.foyer > * { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.foyer > .desk { animation-delay: .45s; }
.foyer > .back { animation-delay: .7s; }
.plaque-grand { padding: 40px clamp(24px, 6vw, 72px) 32px; max-width: 760px; animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both, glint 1.6s 1.4s ease-out 1 both; }
.plaque-grand::before, .plaque-grand::after { top: 16px; }
.plaque-grand h1 { font-size: clamp(20px, 5.4vw, 52px); margin: 16px 0; animation: engrave 1.6s .25s cubic-bezier(.2,.7,.2,1) both; }
.plaque-grand h1 span { font-size: 1.28em; letter-spacing: .08em; }
.plaque-grand .motto { margin: 0; font-size: clamp(18px, 2.4vw, 23px); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes engrave { from { opacity: 0; letter-spacing: .3em; filter: blur(3px); } }

.desk { display: grid; gap: 16px; justify-items: center; width: min(100%, 380px); }
.desk label { display: grid; gap: 4px; width: 100%; text-align: left; font-size: 17px; color: var(--muted); }
.desk select {
  width: 100%; font: 600 20px var(--serif); color: var(--cream); padding: 8px 32px 8px 0; border: 0; border-bottom: 1px solid var(--brass); border-radius: 0;
  appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F3DFA2' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center;
  transition: border-color .2s ease;
}
.desk select:hover:not(:disabled), .desk select:focus-visible { border-bottom-color: var(--brass-hi); }
.desk select option { color: var(--ink); background: var(--cream); }
.desk select:disabled { opacity: .55; cursor: default; }
.desk .brass-btn { margin-top: 8px; }
.status { margin: 0; color: var(--muted); min-height: 1.4em; }

/* ---------- The tour ---------- */
.story { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(10,5,2,.9); }
.frame-story {
  position: relative; width: min(100vw, 460px); height: min(100dvh, 900px); overflow: hidden;
  background: var(--wood), var(--walnut); color: var(--cream);
}
@media (min-width: 520px) {
  .frame-story { border-radius: 4px; box-shadow: 0 0 0 3px #3E2A0A, 0 0 0 6px var(--gilt), 0 0 0 8px #3E2A0A, 0 30px 80px rgba(0,0,0,.7); }
}
.bars { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 4; display: flex; gap: 4px; color: var(--brass-hi); }
.bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(243,223,162,.25); overflow: hidden; }
.bars span i { display: block; height: 100%; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
.bars span.done i { transform: none; }
.bars span.on i { animation: fill var(--dur, 9s) linear forwards; }
.story.paused .bars span.on i { animation-play-state: paused; }
@keyframes fill { to { transform: none; } }
.topbar { position: absolute; top: 20px; left: 16px; right: 8px; z-index: 4; display: flex; align-items: center; gap: 4px; font: 600 16px var(--serif); color: var(--muted); }
.top-name { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-name img { width: 24px; height: 24px; border-radius: 50%; filter: sepia(.5); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--brass-hi); cursor: pointer; border-radius: 50%; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.icon-btn:hover { background: rgba(243,223,162,.12); }
.tap { position: absolute; top: 70px; bottom: 0; z-index: 2; border: 0; background: none; cursor: pointer; }
.tap:focus-visible { outline: 2px solid rgba(243,223,162,.4); outline-offset: -8px; }
.tap-prev { left: 0; width: 30%; }
.tap-next { right: 0; width: 70%; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; padding: 80px 24px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; overflow: hidden; }
.slide > * { position: relative; z-index: 1; }
/* Walking the wall: each slide is its own stretch of panelling, panning in the direction of travel. */
.slide { background: var(--wood), var(--walnut); }
.slide.leave { pointer-events: none; }
.slide.enter.fwd { animation: walkInR .75s cubic-bezier(.3,.7,.2,1) both; }
.slide.enter.back { animation: walkInL .75s cubic-bezier(.3,.7,.2,1) both; }
.slide.leave.fwd { animation: walkOutL .75s cubic-bezier(.3,.7,.2,1) both; }
.slide.leave.back { animation: walkOutR .75s cubic-bezier(.3,.7,.2,1) both; }
@keyframes walkInR { from { transform: translateX(100%); } }
@keyframes walkInL { from { transform: translateX(-100%); } }
@keyframes walkOutL { to { transform: translateX(-100%); } }
@keyframes walkOutR { to { transform: translateX(100%); } }
.fit { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; flex-shrink: 0; transform-origin: center; }
.slide .in { opacity: 0; transform: translateY(24px); animation: show .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes show { to { opacity: 1; transform: none; } }
.detail { margin: 0; font-size: 20px; color: var(--muted); max-width: 340px; }

/* Intro: the gallery doors swing open on the collection. */
.doors { position: absolute !important; inset: 0; z-index: 3 !important; display: flex; perspective: 1400px; pointer-events: none; }
.doors i {
  flex: 1; background: var(--wood), var(--walnut-dk); transform-origin: left center;
  box-shadow: inset 0 0 0 14px rgba(0,0,0,.25), inset 0 0 0 16px rgba(255,214,160,.08), inset 0 0 0 40px rgba(0,0,0,.12), inset 0 0 0 42px rgba(255,214,160,.06);
  animation: doorL 1.6s .3s cubic-bezier(.6,0,.3,1) forwards;
}
.doors i:last-child { transform-origin: right center; animation-name: doorR; }
/* Brass handles. */
.doors i::after { content: ''; position: absolute; top: 50%; right: 16px; width: 8px; height: 46px; border-radius: 4px; background: linear-gradient(90deg, var(--brass-dk), var(--brass-hi), var(--brass)); }
.doors i { position: relative; }
.doors i:last-child::after { right: auto; left: 16px; }
@keyframes doorL { to { transform: rotateY(-100deg); opacity: 0; } }
@keyframes doorR { to { transform: rotateY(100deg); opacity: 0; } }
.plaque-intro { padding: 24px 28px; width: 100%; }
.plaque-intro h2 { font-size: 26px; margin: 12px 0 0; }
.slide .crest { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 3px var(--brass), 0 0 0 5px var(--brass-dk), 0 8px 18px rgba(0,0,0,.5); filter: sepia(.35); }
.tally { display: grid; gap: 4px; }
.tally b { font: 600 80px/1 var(--caps); font-variant-numeric: tabular-nums; color: var(--brass-hi); text-shadow: 0 2px 0 var(--brass-dk), 0 6px 20px rgba(0,0,0,.6); }
.tally span { font-size: 18px; color: var(--muted); }

/* Chapter: velvet curtains draw back on each gallery. */
.curtain { position: absolute !important; inset: 0; z-index: 3 !important; display: flex; pointer-events: none; }
.curtain i {
  flex: 1; background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 20%, transparent 80%, rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, #4A0A16 0 6px, var(--velvet) 14px, #8E1B2E 22px, var(--velvet) 30px, #4A0A16 38px);
  animation: drawL 1.4s .25s cubic-bezier(.65,0,.35,1) forwards;
}
.curtain i:last-child { animation-name: drawR; }
@keyframes drawL { to { transform: translateX(-96%) scaleX(.5); } }
@keyframes drawR { to { transform: translateX(96%) scaleX(.5); } }
.plaque-room { padding: 20px 24px; width: 100%; }
.plaque-room h2 { font-size: clamp(22px, 6.4vw, 30px); margin: 8px 0 0; }
.wall-text { margin: 0; font-size: 21px; line-height: 1.4; color: var(--muted); max-width: 360px; }
/* A velvet rope between two brass stanchions. */
.rope { display: flex; align-items: flex-start; width: 220px; height: 70px; margin-top: 8px; }
.rope i { width: 10px; height: 70px; border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg, var(--brass-dk), var(--brass-hi) 45%, var(--brass)); position: relative; }
.rope i::before { content: ''; position: absolute; top: -8px; left: -4px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--brass-hi), var(--brass-dk)); }
.rope span { flex: 1; height: 26px; margin-top: 4px; border: 5px solid var(--velvet); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* Exhibit: the picture light switches on, the portrait warms up, the placard rises. */
.slide.exhibit .fit { gap: 0; }
.light { width: 120px; height: 8px; border-radius: 4px; margin-bottom: 12px; z-index: 2 !important; background: linear-gradient(var(--brass-hi), var(--brass) 50%, var(--brass-dk)); box-shadow: 0 3px 6px rgba(0,0,0,.6); }
.light::after { content: ''; position: absolute; left: -110px; right: -110px; top: 6px; height: 330px; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,214,140,.26), transparent 70%); animation: lamp 1.6s .3s forwards;
  -webkit-mask-image: linear-gradient(transparent, #000 60px); mask-image: linear-gradient(transparent, #000 60px); }
@keyframes lamp { 0% { opacity: 0; } 12% { opacity: .9; } 18% { opacity: .2; } 30% { opacity: 1; } 36% { opacity: .5; } 100% { opacity: 1; } }
/* Gilt frame: moulded profile from stacked gradients, then a linen mat. */
.frame {
  padding: 16px; width: min(64%, 260px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 40%, rgba(0,0,0,.25)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 5px),
    linear-gradient(var(--gilt), #E8C66E 30%, #8C6420 60%, #D9B25A);
  box-shadow:
    0 0 0 2px #5A3E10, 0 0 0 4px #C99B3E, 0 0 0 6px #3E2A0A,
    inset 0 0 0 3px #6A4A14, inset 0 0 0 5px #E5C574, inset 0 0 0 7px #5C3F0F,
    0 20px 36px rgba(0,0,0,.65);
  animation: hangUp 2.2s .4s ease-out both;
}
/* A diptych needs a wider frame so each portrait stays a decent size. */
.frame:has(.half) { width: min(88%, 350px); }
/* Hung on its wire: the frame drops in, swings and settles, pivoting from the top. */
@keyframes hangUp {
  0% { opacity: 0; transform: translateY(-16px) rotate(-4deg); }
  25% { opacity: 1; transform: translateY(0) rotate(3deg); }
  48% { transform: rotate(-1.6deg); }
  70% { transform: rotate(.7deg); }
  86% { transform: rotate(-.25deg); }
  100% { transform: none; }
}
.frame { transform-origin: 50% -24px; }
.mat { display: flex; gap: 4px; padding: 12px; background: #EDE3CB; box-shadow: inset 0 2px 8px rgba(0,0,0,.45); }
.canvas {
  flex: 1; margin: 0; aspect-ratio: 4 / 5; position: relative; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(80% 70% at 50% 35%, #6B4A2A, #2A1A0E 70%, #120A05);
  box-shadow: inset 0 0 28px rgba(0,0,0,.75);
  animation: warm 1.6s .5s ease both;
}
@keyframes warm { from { filter: brightness(.12) saturate(.4); } }
.canvas img { width: auto; max-width: 94%; max-height: 100%; display: block; min-height: 0; filter: sepia(.45) saturate(.8) contrast(1.06) brightness(.95); }
.canvas.half img { max-width: 100%; }
/* Headroom so the position and club caption sits above the portrait, not across his head. */
.canvas { padding-top: 36px; }
.canvas.half { padding-top: 28px; }
/* Varnish: warm glaze and a faint craquelure over the portrait. */
.canvas::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(90% 80% at 50% 40%, transparent 55%, rgba(30,15,5,.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.06' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.15 0 0 0 -0.7 0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); }
.canvas figcaption { position: absolute; top: 6px; left: 0; right: 0; z-index: 1; font: 500 9px var(--caps); letter-spacing: .22em; color: rgba(241,230,204,.8); }
.canvas .mono { align-self: center; font: 600 64px var(--caps); color: rgba(241,230,204,.4); }
.canvas.half .mono { font-size: 40px; }
/* Given and Received are lettered on the mount below each half, clear of the kit. */
.canvas.half { overflow: visible; }
.mat:has(.half) { padding-bottom: 32px; }
.canvas.half::before { position: absolute; bottom: -24px; z-index: 1; font: 600 14px var(--serif); color: #5C4A2A; }
.canvas.half:first-child::before { content: 'Given'; }
.canvas.half:last-child::before { content: 'Received'; }

.placard { width: 100%; max-width: 360px; margin-top: 24px; padding: 16px 24px; animation: rise .9s 1.3s cubic-bezier(.2,.7,.2,1) both, glint 1.6s 2.3s ease-out 1; }
.placard p { margin: 0; }
.placard .acc { font: 500 10px var(--caps); letter-spacing: .3em; }
.placard h3 { font: 600 17px/1.25 var(--caps); letter-spacing: .04em; margin: 8px 0; }
.placard .artist { font-weight: 600; font-size: 17px; }
.placard .artist img { width: 20px; height: 20px; vertical-align: -4px; border-radius: 50%; margin-right: 2px; filter: sepia(.6) contrast(1.1); box-shadow: 0 0 0 1px rgba(60,40,10,.5); }
.placard .medium { font-style: italic; font-size: 16px; margin-bottom: 12px; }
.placard .note { font-size: 17px; line-height: 1.35; text-align: left; }
.placard .rank { margin-top: 12px; font-size: 15px; color: #4A3712; text-align: left; }
.placard .cost { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font: 500 10px var(--caps); letter-spacing: .18em; text-transform: uppercase; }
.placard .cost b { font-size: 28px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Benefactors: names in gilt on the panelling, as on a donors' board. */
.donor-list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 360px; display: grid; gap: 4px; }
.donor-list li { display: grid; grid-template-columns: 40px 24px 1fr auto; align-items: center; gap: 8px; padding: 4px 8px; text-align: left; color: var(--brass-hi); }
.donor-list .dn-rank { font: 500 11px var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.donor-list img { width: 24px; height: 24px; border-radius: 50%; filter: sepia(.4); }
.donor-list .dn-name { font: 600 19px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donor-list b { font: 600 20px var(--caps); font-variant-numeric: tabular-nums; }
/* The patron's title sits above the name, so the full name gets the width. */
.donor-list .patron { grid-template-columns: 24px 1fr auto; row-gap: 0; padding-block: 8px; }
.donor-list .patron .dn-rank { grid-column: 1 / -1; }
.donor-list .patron .dn-name { font-size: 22px; }
.donor-list .patron b { font-size: 26px; }
.donor-list .patron .dn-rank { color: var(--brass-hi); }
/* In a manager's own wing, their line on the board is lit. */
.donor-list .me { border-radius: 3px; background: rgba(243,223,162,.14); box-shadow: inset 0 0 0 1px rgba(243,223,162,.35); }
.donor-list .gap { display: block; padding: 0; text-align: center; color: var(--muted); line-height: 1; }
.donor-key { margin: 0; font-size: 16px; color: var(--muted); }

/* Gift shop */
.slide.shop .fit { gap: 16px; }
.shop-label { margin: 0; font-size: 18px; color: var(--muted); }
#card { width: auto; height: auto; max-width: 100%; max-height: 520px; aspect-ratio: 1080 / 1350; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.links { display: flex; gap: 8px 16px; flex-wrap: wrap; justify-content: center; }
.links button, .links a { font: 600 18px var(--serif); color: var(--brass-hi); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Music ---------- */
.sound {
  position: fixed; top: 16px; right: 16px; z-index: 10; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: none; color: var(--brass-hi); cursor: pointer;
}
.sound:hover { background: rgba(243,223,162,.12); }
.sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound svg path:first-child { fill: currentColor; }
.sound[aria-pressed="true"] .off, .sound[aria-pressed="false"] .on { display: none; }
.sound[aria-pressed="true"] .on { animation: waves 1.8s ease-in-out infinite; }
@keyframes waves { 50% { opacity: .35; } }
/* On phones the tour fills the screen, so the button tucks under the progress bars beside pause and close. */
@media (max-width: 520px) {
  body:has(.story:not([hidden])) .sound { top: 20px; right: 88px; }
  .top-name { margin-right: 44px; }
}

/* Dust turning in the picture light's beam, and nowhere else. */
.motes { position: absolute; left: -110px; right: -110px; top: 6px; height: 330px; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(45% 95% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(45% 95% at 50% 0%, #000, transparent 75%); }
.motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,226,170,.75); opacity: 0;
  animation: mote var(--t) var(--w) linear infinite; }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -60px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .doors, .curtain { display: none; }
  .slide .in { opacity: 1; transform: none; }
  .light::after { opacity: 1; }
}