/* The Hallway: a portal-select screen, not a web page. Near-black corridor,
   ten doors each glowing with the light of the world behind it. Approach one
   and it opens. Every motion is transform/opacity; reduced-motion collapses
   to a simple brighten. */

@property --hall-r { syntax: '<number>'; inherits: true; initial-value: 212; }
@property --hall-g { syntax: '<number>'; inherits: true; initial-value: 168; }
@property --hall-b { syntax: '<number>'; inherits: true; initial-value: 76; }

.hall {
  --void: #06060a;
  --void-2: #0b0b12;
  --gold: #d4a84c;
  --ink: #ece7db;
  --ink-dim: #9a9482;
  /* the live hall accent; JS shifts r/g/b to the hovered room, these lerp */
  --hall-r: 212; --hall-g: 168; --hall-b: 76;
  --hall-accent: rgb(var(--hall-r) var(--hall-g) var(--hall-b));
  transition: --hall-r .6s ease, --hall-g .6s ease, --hall-b .6s ease;
  position: relative;
  min-height: 100vh;
  background: var(--void);
  overflow: hidden;
}
.hall-atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.hall-atmos canvas { width: 100%; height: 100%; display: block; }
.hall-atmos::after {
  content: ""; position: absolute; inset: 0; transition: background .6s ease;
  background:
    radial-gradient(120% 80% at 50% -12%, rgb(var(--hall-r) var(--hall-g) var(--hall-b) / .12), transparent 62%),
    radial-gradient(90% 60% at 50% 118%, rgb(var(--hall-r) var(--hall-g) var(--hall-b) / .08), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.66), transparent 55%);
}

.hall-inner { position: relative; z-index: 2; max-width: 1680px; margin: 0 auto;
  padding: clamp(48px,7vh,120px) clamp(24px,4vw,72px) 100px; }

.hall-eyebrow { font-family: var(--font-ui); font-size: 12px; letter-spacing: .5em;
  text-transform: uppercase; color: var(--hall-accent); transition: color .6s ease; opacity: 0;
  animation: hall-fade .9s ease .1s forwards; }
.hall-title {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(44px, 7vw, 104px); line-height: .96; letter-spacing: -.02em;
  color: var(--ink); margin: 16px 0 14px; max-width: 16ch; text-wrap: balance;
}
.hall-title .glint { color: var(--hall-accent); transition: color .6s ease; }
.hall-title span { display: inline-block; opacity: 0; transform: translateY(18px);
  animation: hall-rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.hall-deck { font-family: var(--font-body); font-style: italic;
  font-size: clamp(16px,1.4vw,21px); color: var(--ink-dim); max-width: 46ch;
  line-height: 1.6; opacity: 0; animation: hall-fade 1s ease .5s forwards; }
.hall-cta-row { display: flex; gap: 18px; align-items: center; margin-top: 28px;
  flex-wrap: wrap; opacity: 0; animation: hall-fade 1s ease .7s forwards; }
.hall-paintnow { font-family: var(--font-ui); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--void); background: var(--hall-accent); transition: background .6s ease, transform .2s, box-shadow .2s;
  border: none; padding: 15px 26px; cursor: pointer; text-decoration: none;
  transition: transform .2s, box-shadow .2s; }
.hall-paintnow:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(212,168,76,.5); }
.hall-count { font-family: var(--font-ui); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-dim); }

/* the hero is a row: the pitch at left, tonight's placard at right */
.hall-hero { display: flex; align-items: center; justify-content: space-between;
  gap: clamp(32px, 4vw, 80px); }
.hall-copy { min-width: 0; }
.hall-tonight { display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  gap: 10px; text-decoration: none; flex-shrink: 0;
  padding: clamp(26px, 2.4vw, 44px) clamp(28px, 2.6vw, 52px);
  border: 1px solid rgb(var(--hall-r) var(--hall-g) var(--hall-b) / .28);
  background: rgb(var(--hall-r) var(--hall-g) var(--hall-b) / .05);
  box-shadow: 0 30px 80px -40px rgb(var(--hall-r) var(--hall-g) var(--hall-b) / .35),
    inset 0 0 60px rgb(var(--hall-r) var(--hall-g) var(--hall-b) / .06);
  opacity: 0; transform: translateY(18px);
  animation: hall-rise 1s cubic-bezier(.2,.7,.2,1) 1.5s forwards;
  transition: border-color .6s ease, background .6s ease, box-shadow .6s ease, transform .25s ease; }
.hall-tonight[hidden] { display: none; }
.hall-tonight:hover { transform: translateY(-3px); }
.ht-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: .4em;
  text-transform: uppercase; color: var(--ink-dim); }
.ht-name { font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 3.4vw, 62px); line-height: 1; color: var(--hall-accent);
  transition: color .6s ease; }
.ht-whisper { font-family: var(--font-body); font-style: italic;
  font-size: clamp(14px, 1.05vw, 17px); color: var(--ink-dim); }
.ht-go { font-family: var(--font-ui); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink); opacity: .8; margin-top: 8px;
  display: inline-flex; gap: 8px; align-items: center; transition: opacity .2s; }
.ht-arrow { transition: transform .25s ease; }
.hall-tonight:hover .ht-go { opacity: 1; }
.hall-tonight:hover .ht-arrow { transform: translateX(5px); }
@media (max-width: 1180px) { .hall-tonight { display: none; } }

/* the doors */
.doors {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px,1.4vw,22px);
  margin-top: clamp(40px,6vh,80px); perspective: 1600px;
}
@media (max-width: 1180px) { .doors { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .doors { grid-template-columns: repeat(2, 1fr); } }

.portal {
  --accent: #d4a84c; --accent-rgb: 212,168,76;
  position: relative; display: block; text-decoration: none; aspect-ratio: 3 / 4.4;
  border-radius: 3px; transform-style: preserve-3d;
  opacity: 0; transform: translateY(26px);
  animation: hall-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.portal:hover, .portal:focus-visible { transform: translateY(-8px); outline: none; }
.doors:hover .portal { filter: brightness(.5) saturate(.82); transition: filter .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.doors:hover .portal:hover, .doors:hover .portal:focus-visible { filter: brightness(1.06) saturate(1.05); }

.portal-glow {
  position: absolute; inset: -14%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.5), transparent 72%);
  filter: blur(26px); opacity: .35; transition: opacity .5s, transform .5s;
}
.portal:hover .portal-glow, .portal:focus-visible .portal-glow { opacity: .85; transform: scale(1.12); }

.portal-scene {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 3px;
  border: 1px solid rgba(var(--accent-rgb),.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.9);
  background: var(--void-2);
}
.portal-wall {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.14); transition: opacity .6s ease, transform 4s ease;
}
.portal:hover .portal-wall, .portal:focus-visible .portal-wall { opacity: .55; transform: scale(1.02); }
.portal-door {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: filter .5s, transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
.portal:hover .portal-door, .portal:focus-visible .portal-door {
  filter: brightness(1.25) saturate(1.1); transform: scale(1.05) translateY(-1%);
}
/* light pouring out when the door opens */
.portal-bloom {
  position: absolute; left: 50%; top: 52%; width: 60%; height: 60%; z-index: 2;
  transform: translate(-50%,-50%) scale(.4); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.9), rgba(var(--accent-rgb),.2) 55%, transparent 75%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .55s, transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.portal:hover .portal-bloom, .portal:focus-visible .portal-bloom { opacity: .8; transform: translate(-50%,-50%) scale(1); }
/* a slow light sweep across the surface */
.portal-shaft {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .9s ease;
}
.portal:hover .portal-shaft, .portal:focus-visible .portal-shaft { transform: translateX(120%); }
.portal-scene::after {  /* base light-spill pool + top vignette for depth */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,6,10,.55) 0%, transparent 22%, transparent 62%, rgba(6,6,10,.35) 100%),
    radial-gradient(90% 40% at 50% 108%, rgba(var(--accent-rgb),.35), transparent 70%);
}

/* the no-art door: a painted arch in the room's own light, never "broken" */
.portal-door.unpainted {
  background:
    radial-gradient(70% 50% at 50% 22%, rgba(var(--accent-rgb),.34), transparent 62%),
    linear-gradient(180deg, var(--room-bg2), var(--room-bg));
}
.portal-door.unpainted::before {
  content: ""; position: absolute; left: 22%; right: 22%; top: 16%; bottom: 8%;
  border: 1px solid rgba(var(--accent-rgb),.4);
  border-radius: 46% 46% 6% 6% / 30% 30% 4% 4%;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.12), transparent 60%);
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb),.18);
}
.portal-door.unpainted::after {  /* keyhole porthole hint */
  content: ""; position: absolute; left: 50%; top: 40%; width: 16%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.55), transparent 75%);
}

.portal-plate {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.portal-no { font-family: var(--font-ui); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(var(--accent-rgb),.9); }
.portal-name { font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(18px,1.5vw,26px); color: #f5efe2; line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.portal-enter { font-family: var(--font-ui); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: #f5efe2; opacity: 0; transform: translateX(-6px);
  transition: opacity .4s, transform .4s; margin-top: 3px; }
.portal:hover .portal-enter, .portal:focus-visible .portal-enter { opacity: 1; transform: translateX(0); }

@keyframes hall-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes hall-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hall { transition: none; }
  .doors:hover .portal { filter: none; }
  .portal, .hall-title span, .hall-eyebrow, .hall-deck, .hall-cta-row, .hall-tonight { animation: none; opacity: 1; transform: none; }
  .portal-wall, .portal-door, .portal-glow, .portal-bloom, .portal-shaft { transition: opacity .2s; }
  .portal:hover .portal-shaft, .portal:focus-visible .portal-shaft { transform: translateX(-120%); }
}

/* ---------- hallway worlds: finished rooms wash the corridor ---------- */
/* base: invisible. body[data-hall-world=deep]: tonight's wash, light only.
   body[data-hall-hover=deep]: the door is open, the world and its creatures
   flood in. Creatures and spawned particles are hover-only on purpose:
   nothing wanders the idle hallway. */
.hall-world { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease; }
body[data-hall-world="deep"] .world-deep { opacity: .5; }
body[data-hall-hover="deep"] .world-deep { opacity: 1; }

.hw-bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .22; transition: opacity 1s ease; }
body[data-hall-hover="deep"] .hw-bg { opacity: .44; }
.hw-caustics { position: absolute; inset: -60px; mix-blend-mode: soft-light; opacity: .3;
  background:
    repeating-radial-gradient(ellipse 1100px 340px at 24% 8%, rgba(169,246,201,.3) 0 2px, transparent 2px 110px),
    repeating-radial-gradient(ellipse 800px 300px at 78% 30%, rgba(127,212,193,.24) 0 2px, transparent 2px 85px);
  animation: hall-caustic 21s ease-in-out infinite alternate; transition: opacity 1s ease; }
body[data-hall-hover="deep"] .hw-caustics { opacity: .65; }
@keyframes hall-caustic { from { transform: translate3d(-30px,-10px,0); } to { transform: translate3d(30px,12px,0) scale(1.04); } }

.hw-creature { position: absolute; opacity: 0; transition: opacity 1.2s ease; }
body[data-hall-hover="deep"] .hw-whale { opacity: .55; }
body[data-hall-hover="deep"] .hw-jelly { opacity: .75; }
body[data-hall-hover="deep"] .hw-school { opacity: .7; }
.hw-whale { top: 16%; width: clamp(360px, 34vw, 640px); filter: blur(1.5px);
  animation: hw-cross 74s linear infinite; }
.hw-jelly { right: 4%; bottom: -30%; width: clamp(140px, 13vw, 230px); filter: blur(.5px);
  animation: hw-rise 48s linear infinite; }
.hw-school { left: -20%; top: 62%; width: clamp(200px, 19vw, 330px);
  animation: hw-cross 52s linear 12s infinite; }
@keyframes hw-cross { 0% { transform: translateX(-30vw); } 100% { transform: translateX(130vw); } }
@keyframes hw-rise { 0% { transform: translateY(0) rotate(-2deg); } 100% { transform: translateY(-160vh) rotate(3deg); } }

.hw-bubbles { position: absolute; inset: 0; }
.hwb { position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(233,244,240,.9), rgba(169,246,201,.25) 55%, transparent 70%);
  animation: hwb-rise linear forwards; }
@keyframes hwb-rise { to { transform: translateY(-105vh) translateX(var(--hbx, 0px)); opacity: 0; } }

/* ---- the wild: sun through leaves, something crossing the trail ---- */
body[data-hall-world="wild"] .world-wild { opacity: .5; }
body[data-hall-hover="wild"] .world-wild { opacity: 1; }
body[data-hall-hover="wild"] .world-wild .hw-bg { opacity: .46; }
.hw-sunshafts { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    linear-gradient(108deg, transparent 24%, rgba(255, 240, 200, .09) 31%, transparent 38%),
    linear-gradient(102deg, transparent 52%, rgba(224, 235, 170, .07) 60%, transparent 67%),
    linear-gradient(112deg, transparent 74%, rgba(255, 240, 200, .06) 80%, transparent 86%);
  animation: hall-caustic 16s ease-in-out infinite alternate; }
body[data-hall-world="wild"] .hw-sunshafts { opacity: .5; }
body[data-hall-hover="wild"] .hw-sunshafts { opacity: .9; }
body[data-hall-hover="wild"] .hw-fox { opacity: .7; }
body[data-hall-hover="wild"] .hw-deer { opacity: .6; }
body[data-hall-hover="wild"] .hw-btf { opacity: .75; }
.hw-fox { bottom: 6%; width: clamp(160px, 15vw, 270px);
  animation: hw-cross-flip 58s linear 6s infinite; }
@keyframes hw-cross-flip { 0% { transform: translateX(-30vw) scaleX(-1); }
  100% { transform: translateX(130vw) scaleX(-1); } }
.hw-deer { right: 3%; bottom: 4%; width: clamp(150px, 13vw, 240px); filter: blur(.4px); }
.hw-btf { left: -14%; top: 24%; width: clamp(170px, 16vw, 280px); filter: blur(.6px);
  animation: hw-flight 44s linear infinite; }
.hw-btf img { width: 100%; height: auto; display: block;
  animation: hw-flutter 2.6s ease-in-out infinite; }
@keyframes hw-flight {
  0% { transform: translate(-20vw, 0); }
  16% { transform: translate(4vw, -7vh); }
  34% { transform: translate(28vw, 3vh); }
  52% { transform: translate(55vw, -9vh); }
  70% { transform: translate(82vw, -1vh); }
  86% { transform: translate(104vw, -12vh); }
  100% { transform: translate(124vw, -4vh); } }
@keyframes hw-flutter {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  30% { transform: translateY(-13px) rotate(5deg); }
  55% { transform: translateY(4px) rotate(-2deg); }
  78% { transform: translateY(-8px) rotate(6deg); } }
.hw-leaves { position: absolute; inset: 0; }
.hwl { position: absolute; top: -4vh; width: 12px; height: 8px;
  border-radius: 80% 10% 70% 20%;
  background: linear-gradient(120deg, #86a86b, #5d7a4a 70%);
  opacity: .8; animation: hwl-fall linear forwards; }
@keyframes hwl-fall { 25% { transform: translateY(28vh) translateX(calc(var(--hlx, 0px) * .4)) rotate(140deg); }
  60% { transform: translateY(64vh) translateX(calc(var(--hlx, 0px) * .75)) rotate(300deg); }
  100% { transform: translateY(108vh) translateX(var(--hlx, 0px)) rotate(480deg); opacity: 0; } }

/* ---- far out: the hangar door onto violet space ---- */
body[data-hall-world="far_out"] .world-far_out { opacity: .5; }
body[data-hall-hover="far_out"] .world-far_out { opacity: 1; }
body[data-hall-hover="far_out"] .world-far_out .hw-bg { opacity: .46; }
.hw-nebulawash { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(50% 42% at 68% 30%, rgba(201, 166, 255, .12), transparent 72%),
    radial-gradient(44% 40% at 24% 66%, rgba(255, 154, 213, .09), transparent 70%);
  animation: hall-caustic 18s ease-in-out infinite alternate; }
body[data-hall-world="far_out"] .hw-nebulawash { opacity: .55; }
body[data-hall-hover="far_out"] .hw-nebulawash { opacity: .95; }
body[data-hall-hover="far_out"] .hw-comet { opacity: .85; }
body[data-hall-hover="far_out"] .hw-astrocat { opacity: .75; }
body[data-hall-hover="far_out"] .hw-sat { opacity: .6; }
.hw-comet { top: 12%; width: clamp(190px, 17vw, 300px);
  animation: hw-comet-flight 39s linear 4s infinite; }
.hw-comet img { width: 100%; height: auto; animation: hw-comet-bob 3.8s ease-in-out infinite; }
@keyframes hw-comet-flight {
  0% { transform: translate(130vw, 0); }
  30% { transform: translate(84vw, 7vh); }
  62% { transform: translate(38vw, 1vh); }
  100% { transform: translate(-30vw, 10vh); } }
@keyframes hw-comet-bob { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-9px) rotate(-2deg); } }
.hw-astrocat { right: 6%; bottom: -26%; width: clamp(130px, 12vw, 210px);
  animation: hw-rise 56s linear 9s infinite; }
.hw-astrocat img { width: 100%; height: auto; animation: hw-comet-bob 5.2s ease-in-out infinite reverse; }
.hw-sat { left: -16%; top: 40%; width: clamp(150px, 14vw, 250px); filter: blur(.5px);
  animation: hw-cross 66s linear 14s infinite; }
.hw-stardust { position: absolute; inset: 0; }
.hwsd { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #c9a6ff 55%, transparent 78%);
  box-shadow: 0 0 10px rgba(201, 166, 255, .8);
  animation: hwsd-float linear forwards; }
@keyframes hwsd-float { 30% { opacity: 1; }
  100% { transform: translateY(-70vh) translateX(var(--sdx, 0px)) scale(.4); opacity: 0; } }

/* ---- the realm: candlelight from the map room ---- */
body[data-hall-world="realm"] .world-realm { opacity: .5; }
body[data-hall-hover="realm"] .world-realm { opacity: 1; }
body[data-hall-hover="realm"] .world-realm .hw-bg { opacity: .46; }
.hw-candlewash { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(46% 40% at 50% 58%, rgba(255, 214, 130, .13), transparent 72%),
    radial-gradient(30% 26% at 22% 40%, rgba(212, 168, 76, .09), transparent 70%);
  animation: candle-hall 5.5s ease-in-out infinite; }
@keyframes candle-hall { 0%, 100% { opacity: .8; } 45% { opacity: 1; } 70% { opacity: .65; } }
body[data-hall-world="realm"] .hw-candlewash { opacity: .6; }
body[data-hall-hover="realm"] .hw-candlewash { opacity: .95; }
body[data-hall-hover="realm"] .hw-wyvern { opacity: .8; }
body[data-hall-hover="realm"] .hw-hallcrow { opacity: .75; }
body[data-hall-hover="realm"] .hw-hallwisp { opacity: .7; }
.hw-wyvern { top: 14%; width: clamp(180px, 16vw, 290px);
  animation: hw-cross-rtl 46s linear 5s infinite; }
.hw-wyvern img { width: 100%; height: auto; animation: hw-comet-bob 4.6s ease-in-out infinite; }
@keyframes hw-cross-rtl { 0% { transform: translateX(130vw); } 100% { transform: translateX(-30vw); } }
.hw-hallcrow { top: 30%; width: clamp(130px, 12vw, 210px);
  animation: hw-cross 38s linear 12s infinite; }
.hw-hallcrow img { width: 100%; height: auto; animation: hw-comet-bob 3.2s ease-in-out infinite reverse; }
.hw-hallwisp { right: 8%; bottom: -24%; width: clamp(100px, 9vw, 160px); filter: blur(.4px);
  animation: hw-rise 44s linear 7s infinite; }
.hw-embers { position: absolute; inset: 0; }
.hwe { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9b8, #d4a84c 60%, transparent 80%);
  box-shadow: 0 0 9px rgba(212, 168, 76, .85);
  animation: hwe-rise linear forwards; }
@keyframes hwe-rise { 25% { opacity: 1; }
  100% { transform: translateY(-75vh) translateX(var(--hex, 0px)) scale(.5); opacity: 0; } }

/* ---- dreamscape: the ceiling is open ---- */
body[data-hall-world="dreamscape"] .world-dreamscape { opacity: .5; }
body[data-hall-hover="dreamscape"] .world-dreamscape { opacity: 1; }
body[data-hall-hover="dreamscape"] .world-dreamscape .hw-bg { opacity: .44; }
.hw-dreamwash { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(52% 44% at 62% 26%, rgba(205, 180, 240, .14), transparent 70%),
    radial-gradient(40% 36% at 24% 60%, rgba(168, 216, 200, .08), transparent 70%);
  animation: hall-caustic 19s ease-in-out infinite alternate; }
body[data-hall-world="dreamscape"] .hw-dreamwash { opacity: .55; }
body[data-hall-hover="dreamscape"] .hw-dreamwash { opacity: .95; }
body[data-hall-hover="dreamscape"] .hw-hallwhale { opacity: .6; }
body[data-hall-hover="dreamscape"] .hw-hallsheep { opacity: .8; }
body[data-hall-hover="dreamscape"] .hw-hallplane { opacity: .75; }
.hw-hallwhale { top: 8%; width: clamp(260px, 24vw, 460px); filter: blur(.6px);
  animation: hw-cross-rtl 70s linear infinite; }
.hw-hallwhale img { width: 100%; height: auto; animation: hw-comet-bob 6s ease-in-out infinite reverse; }
.hw-hallsheep { top: 26%; width: clamp(110px, 10vw, 180px);
  animation: hw-cross 40s linear 3s infinite; }
.hw-hallsheep img { width: 100%; height: auto; animation: hw-comet-bob 3.4s ease-in-out infinite; }
.hw-hallplane { top: 44%; width: clamp(90px, 8vw, 150px);
  animation: hw-cross-rtl 34s linear 10s infinite; }
.hw-hallplane img { width: 100%; height: auto; animation: hw-comet-bob 4.4s ease-in-out infinite; }
.hw-dreamstars { position: absolute; inset: 0; }
.hwds { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #cdb4f0 55%, transparent 78%);
  box-shadow: 0 0 10px rgba(205, 180, 240, .8);
  animation: hwds-fall linear forwards; }
@keyframes hwds-fall { 20% { opacity: 1; }
  100% { transform: translateY(85vh) translateX(var(--dsx, 0px)) scale(.5); opacity: 0; } }

/* content rides above the world wash */
.hall-inner { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .hw-caustics, .hw-creature, .hw-sunshafts { animation: none; }
  .hw-creature { display: none; }
  .hwb, .hwl, .hwsd, .hwe, .hwds { display: none; }
}

/* night city world: neon wash + rain over the corridor */
body[data-hall-world="night_city"] .world-night_city { opacity: .55; }
body[data-hall-hover="night_city"] .world-night_city { opacity: 1; }
.hw-neonwash { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .5; transition: opacity 1s ease;
  background:
    radial-gradient(60% 40% at 12% 20%, rgba(242,95,176,.16), transparent 70%),
    radial-gradient(50% 36% at 85% 30%, rgba(98,230,246,.13), transparent 70%),
    radial-gradient(70% 40% at 50% 100%, rgba(242,95,176,.1), transparent 70%);
  animation: neonwash-hum 9s ease-in-out infinite alternate; }
body[data-hall-hover="night_city"] .hw-neonwash { opacity: .95; }
@keyframes neonwash-hum { from { filter: brightness(.9); } to { filter: brightness(1.15); } }
.hw-cityrain { position: absolute; inset: 0; }
.hw-cityrain i { position: absolute; top: -12vh; width: 1.5px; border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(216,226,240,.5) 30%, rgba(150,180,220,.2));
  animation: nfr-fall linear infinite; }
@keyframes nfr-fall { to { transform: translateY(120vh); } }
.hw-umbrella { left: -14%; bottom: 12%; width: clamp(130px, 12vw, 210px); filter: blur(.4px);
  animation: hw-cross-rtl 64s linear 8s infinite; }
body[data-hall-hover="night_city"] .hw-umbrella { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .hw-cityrain, .hw-neonwash { animation: none; display: none; } }

/* ---- carnival: bulb strings hum, the wheel sends a gondola past ---- */
body[data-hall-world="carnival"] .world-carnival { opacity: .5; }
body[data-hall-hover="carnival"] .world-carnival { opacity: 1; }
body[data-hall-hover="carnival"] .world-carnival .hw-bg { opacity: .46; }
.hw-bulbwash { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(48% 38% at 50% 10%, rgba(255, 210, 63, .13), transparent 70%),
    radial-gradient(36% 30% at 18% 62%, rgba(230, 57, 70, .1), transparent 70%),
    radial-gradient(34% 30% at 82% 56%, rgba(255, 138, 92, .09), transparent 70%);
  animation: bulb-hum 7s ease-in-out infinite alternate; }
@keyframes bulb-hum { from { filter: brightness(.92); } to { filter: brightness(1.12); } }
body[data-hall-world="carnival"] .hw-bulbwash { opacity: .55; }
body[data-hall-hover="carnival"] .hw-bulbwash { opacity: .95; }
body[data-hall-hover="carnival"] .hw-gondola { opacity: .75; }
body[data-hall-hover="carnival"] .hw-hallballoon { opacity: .8; }
body[data-hall-hover="carnival"] .hw-hallpigeon { opacity: .7; }
.hw-gondola { top: 9%; width: clamp(150px, 14vw, 250px);
  animation: hw-cross-rtl 56s linear 4s infinite; }
.hw-gondola img { width: 100%; height: auto; animation: hw-comet-bob 5s ease-in-out infinite; }
.hw-hallballoon { left: 12%; bottom: -28%; width: clamp(110px, 10vw, 180px);
  animation: hw-rise 52s linear 6s infinite; }
.hw-hallballoon img { width: 100%; height: auto; animation: hw-comet-bob 6.2s ease-in-out infinite reverse; }
.hw-hallpigeon { top: 34%; width: clamp(120px, 11vw, 200px); filter: blur(.3px);
  animation: hw-cross 42s linear 11s infinite; }
.hw-hallpigeon img { width: 100%; height: auto; animation: hw-comet-bob 3s ease-in-out infinite; }
.hw-confetti { position: absolute; inset: 0; }
.hwcf { position: absolute; top: -4vh; width: 7px; height: 10px; border-radius: 1px;
  opacity: .9; animation: hwcf-fall linear forwards; }
@keyframes hwcf-fall {
  30% { transform: translateY(32vh) translateX(calc(var(--cfx, 0px) * .4)) rotateZ(160deg) rotateY(140deg); }
  100% { transform: translateY(106vh) translateX(var(--cfx, 0px)) rotateZ(420deg) rotateY(380deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hw-bulbwash { animation: none; display: none; } .hwcf { display: none; } }

/* ---- hometown: porch light warmth and fireflies in the corridor ---- */
body[data-hall-world="hometown"] .world-hometown { opacity: .5; }
body[data-hall-hover="hometown"] .world-hometown { opacity: 1; }
body[data-hall-hover="hometown"] .world-hometown .hw-bg { opacity: .44; }
.hw-porchwash { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(42% 36% at 78% 22%, rgba(227, 200, 119, .14), transparent 70%),
    radial-gradient(38% 32% at 20% 66%, rgba(168, 50, 50, .1), transparent 70%);
  animation: candle-hall 6.5s ease-in-out infinite; }
body[data-hall-world="hometown"] .hw-porchwash { opacity: .55; }
body[data-hall-hover="hometown"] .hw-porchwash { opacity: .95; }
body[data-hall-hover="hometown"] .hw-halldog { opacity: .7; }
.hw-halldog { right: 7%; bottom: 3%; width: clamp(120px, 11vw, 190px); filter: blur(.3px); }
.hw-porchflies { position: absolute; inset: 0; }
.hwpf { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffe9a8; box-shadow: 0 0 9px 3px rgba(255, 227, 150, .5);
  opacity: 0; animation: hwpf-blink ease-in-out infinite; }
@keyframes hwpf-blink {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  24% { opacity: .85; transform: translate(12px, -9px); }
  52% { opacity: .1; transform: translate(-7px, -20px); }
  76% { opacity: .6; transform: translate(9px, -30px); } }
@media (prefers-reduced-motion: reduce) { .hw-porchwash { animation: none; display: none; } .hwpf { display: none; } }

/* ---- workshop: lamplight on brass, sawdust in the beam ---- */
body[data-hall-world="workshop"] .world-workshop { opacity: .5; }
body[data-hall-hover="workshop"] .world-workshop { opacity: 1; }
body[data-hall-hover="workshop"] .world-workshop .hw-bg { opacity: .44; }
.hw-lampwash { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(40% 34% at 24% 24%, rgba(212, 170, 90, .15), transparent 70%),
    radial-gradient(38% 32% at 76% 62%, rgba(27, 58, 107, .18), transparent 70%);
  animation: lamp-hall 7s ease-in-out infinite alternate; }
@keyframes lamp-hall { from { filter: brightness(.94); } to { filter: brightness(1.1); } }
body[data-hall-world="workshop"] .hw-lampwash { opacity: .55; }
body[data-hall-hover="workshop"] .hw-lampwash { opacity: .95; }
body[data-hall-hover="workshop"] .hw-hallcat { opacity: .7; }
.hw-hallcat { right: 6%; bottom: 4%; width: clamp(110px, 10vw, 175px); filter: blur(.3px); }
.hw-sawdust { position: absolute; inset: 0; }
.hwsd { position: absolute; top: -3vh; width: 3px; height: 3px; border-radius: 1px;
  background: rgba(226, 206, 160, .8); opacity: .8; animation: hwsd-fall linear forwards; }
@keyframes hwsd-fall {
  40% { transform: translateY(40vh) translateX(calc(var(--sdx, 0px) * .5)) rotate(140deg); }
  100% { transform: translateY(104vh) translateX(var(--sdx, 0px)) rotate(320deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hw-lampwash { animation: none; display: none; } .hwsd { display: none; } }

/* ---- tiny worlds: candlelight on walnut, dust enormous in the beam ---- */
body[data-hall-world="tiny_worlds"] .world-tiny_worlds { opacity: .5; }
body[data-hall-hover="tiny_worlds"] .world-tiny_worlds { opacity: 1; }
body[data-hall-hover="tiny_worlds"] .world-tiny_worlds .hw-bg { opacity: .44; }
.hw-candlewash2 { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(38% 34% at 62% 30%, rgba(240, 201, 106, .17), transparent 70%),
    radial-gradient(44% 38% at 24% 70%, rgba(58, 38, 24, .3), transparent 72%);
  animation: candle-hall 6.5s ease-in-out infinite; }
body[data-hall-world="tiny_worlds"] .hw-candlewash2 { opacity: .55; }
body[data-hall-hover="tiny_worlds"] .hw-candlewash2 { opacity: .95; }
body[data-hall-hover="tiny_worlds"] .hw-hallsnail { opacity: .75; }
.hw-hallsnail { left: 8%; bottom: 5%; width: clamp(90px, 8vw, 150px); filter: blur(.3px); }
.hw-dust { position: absolute; inset: 0; }
.hwdu { position: absolute; border-radius: 50%; background: rgba(255, 228, 168, .55);
  box-shadow: 0 0 12px 4px rgba(240, 201, 106, .2); opacity: .8;
  animation: hwdu-float ease-in-out infinite; }
@keyframes hwdu-float {
  0%, 100% { transform: translate(0, 0); opacity: .25; }
  40% { transform: translate(calc(var(--dux, 0px) * .6), -22vh); opacity: .85; }
  80% { transform: translate(var(--dux, 0px), -44vh); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hw-candlewash2 { animation: none; display: none; } .hwdu { display: none; } }

/* ---- the far wall: only there once every door is lit ---- */
.hall-portal { position: relative; display: inline-flex; flex-direction: column;
  gap: 2px; padding: 12px 22px; text-decoration: none; overflow: hidden;
  border: 1px solid rgba(212, 168, 76, .4);
  background: linear-gradient(120deg, rgba(212, 168, 76, .1), rgba(212, 168, 76, .02));
  transition: transform .25s ease, border-color .4s ease, box-shadow .4s ease; }
.hall-portal:hover { transform: translateY(-2px); border-color: rgba(212, 168, 76, .9);
  box-shadow: 0 16px 44px -18px rgba(212, 168, 76, .6); }
.hp-glow { position: absolute; left: -30%; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 190, .3), transparent);
  animation: hp-sweep 5.5s ease-in-out infinite; }
@keyframes hp-sweep { 0%, 62% { left: -30%; } 100% { left: 110%; } }
.hp-eyebrow { position: relative; font-family: var(--font-ui); font-size: 9.5px;
  letter-spacing: .32em; text-transform: uppercase; color: rgba(212, 168, 76, .9); }
.hp-name { position: relative; font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .hp-glow { animation: none; display: none; } }