/* A reflected repeat has matching colour/texture at all four tile edges.
   The root also carries it, so long pages and overscroll have no finite image edge. */
:root{--velvet-texture:url('/assets/velvet-seamless.svg');--velvet-size:960px 1707px}
html{min-height:100%;background-color:#13202c;background-image:linear-gradient(#0b172060,#0b172060),var(--velvet-texture);background-position:center top;background-size:100% 100%,var(--velvet-size);background-repeat:no-repeat,repeat}
body{background-image:none;background-color:transparent;min-height:100vh;min-height:100svh;min-height:100dvh}
#salon-backdrop{position:fixed;inset:-96px;min-height:0;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate;background-color:#13202c;background-image:var(--salon-shade),var(--velvet-texture);background-position:center top;background-size:100% 100%,var(--velvet-size);background-repeat:no-repeat,repeat}
#salon-backdrop #salon-light-field{position:absolute;inset:0;overflow:visible;z-index:0}
.scene-dimmer{position:fixed;inset:-96px;min-height:0}
.site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
.bottom-nav{background:linear-gradient(180deg,transparent 0%,#0d182488 28%,#0d1824e8 65%,#0d1824f5 100%);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:0}
.salon-ending{margin:38px auto 0;padding:20px 0 max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
/* Sixteen independently phased stars; layout keeps them in free velvet. */
#salon-stars{position:absolute;inset:0 0 auto;height:100%;z-index:1;overflow:hidden;pointer-events:none;opacity:.96;transition:opacity 1s}
.ambient-star{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);animation:salon-star-drift var(--drift) var(--phase) ease-in-out infinite alternate;transform-origin:center;pointer-events:none}
.ambient-star-glow{position:relative;display:block;width:100%;height:100%;animation:salon-star-breathe var(--pulse) var(--phase) ease-in-out infinite;pointer-events:none}
.ambient-star-glow:before{content:'';position:absolute;inset:-90%;border-radius:50%;background:radial-gradient(circle,#fff0bd45 0%,#e6bf7826 28%,transparent 67%);pointer-events:none}
.ambient-star-art{display:block;width:100%;height:100%;filter:drop-shadow(0 0 2px #ffe6a09c);pointer-events:none}
.ambient-star-rays{position:absolute;inset:-70%;width:240%;height:240%;overflow:visible;stroke:#e9bf69;stroke-width:.65;fill:none;opacity:.3;animation:salon-star-rays var(--pulse) var(--phase) ease-in-out infinite;pointer-events:none}
@keyframes salon-star-drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}}
@keyframes salon-star-breathe{0%,100%{opacity:.48;transform:scale(.9)}27%{opacity:.7;transform:scale(.99)}46%{opacity:1;transform:scale(1.12)}60%{opacity:.57;transform:scale(.96)}76%{opacity:.9;transform:scale(1.04)}}
@keyframes salon-star-rays{0%,100%{opacity:.13;transform:scale(.72)}46%{opacity:.85;transform:scale(1.16)}60%{opacity:.16;transform:scale(.82)}76%{opacity:.46;transform:scale(1.02)}}
body[data-stage=shuffle] #salon-stars,body[data-stage=select] #salon-stars,body[data-stage=selected] #salon-stars,body[data-stage=revealed] #salon-stars,body[data-stage=reading] #salon-stars,body[data-stage^=question] #salon-stars,body[data-stage^=reflection] #salon-stars{opacity:.22}
body[data-stage=goodbye] #salon-stars{opacity:.16}
body.salon-paused .ambient-star,body.salon-paused .ambient-star-glow,body.salon-paused .ambient-star-rays{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ambient-star,.ambient-star-glow,.ambient-star-rays{animation:none!important;transform:none}.ambient-star-glow{opacity:.85}.ambient-star-rays{opacity:.25}.ambient-star{transition:none}}