/* ==========================================================================
THEATER STAGE CONSTANTS (Global CSS Variables)
========================================================================== */
:root {
/* Velvet Color Palette */
--velvet-deep: oklch(9% 0.027 29);
--velvet-dark: oklch(19% 0.066 29);
--velvet-mid: oklch(38% 0.136 29);
--velvet-bright: oklch(63% 0.233 29);
--velvet-shadow: oklch(7% 0.021 29);
--velvet-crevice: oklch(13% 0.043 29);
--velvet-satin: oklch(56% 0.219 29);
--velvet-fold-light: oklch(44% 0.163 29);
--velvet-fold-deep: oklch(11% 0.033 29);
--velvet-glow: oklch(48% 0.179 29);
--velvet-edge: oklch(23% 0.078 29);
--velvet-accent: oklch(52% 0.198 29);
--velvet-end: oklch(24% 0.082 29);
/* Spotlight & Stage Lighting */
--light-gold: oklch(93% 0.083 86 / 0.18);
--light-gold-intense: oklch(93% 0.083 86 / 0.22);
--light-glow: oklch(89% 0.162 92 / 0.04);
--light-glow-intense: oklch(89% 0.162 92 / 0.05);
--stage-ambient: oklch(15% 0 0);
--stage-dark: oklch(4% 0 0);
/* Surface Colors */
--surface-white: oklch(100% 0 0);
--surface-near-white: oklch(96% 0 0);
--surface-white-wash: oklch(100% 0 0 / 0.12);
--surface-white-border: oklch(100% 0 0 / 0.35);
--signboard-bg: oklch(7% 0.006 264 / 0.9);
/* Shadow Depths */
--shadow-transparent: oklch(0% 0 0 / 0);
--shadow-subtle: oklch(0% 0 0 / 0.5);
--shadow-medium: oklch(0% 0 0 / 0.55);
--shadow-moderate: oklch(0% 0 0 / 0.6);
--shadow-strong: oklch(0% 0 0 / 0.75);
--shadow-heavy: oklch(0% 0 0 / 0.8);
--shadow-deep: oklch(0% 0 0 / 0.9);
--shadow-near-black: oklch(0% 0 0 / 0.95);
}
/* ==========================================================================
LIGHTING & ENVIRONMENT
========================================================================== */
html {
background-color: var(--stage-dark);
background-image:
/* Left Spotlight (Wide Wash) */
radial-gradient( circle at 0% 100%, var(--light-gold) 0%, var(--light-glow) 40%, var(--shadow-transparent) 70% ),
/* Right Spotlight (Narrow Pin) */
radial-gradient( circle at 100% 100%, var(--light-gold-intense) 0%, var(--light-glow-intense) 18%, var(--shadow-transparent) 35% ),
/* Ambient Stage Floor Backdrop */
radial-gradient( circle at 50% 50%, var(--stage-ambient) 0%, var(--stage-dark) 100% );
background-blend-mode: screen;
background-attachment: fixed;
}
/* ==========================================================================
FABRIC TEXTURE ENGINE
========================================================================== */
body::before, body::after, header[role="banner"]::before { /* apply the same fabric texture to all major stage elements for visual cohesion */
background: radial-gradient(circle at 50% 25%, var(--surface-white-wash) 0%, var(--shadow-medium) 100%), linear-gradient( to right, var(--velvet-deep) 0%, var(--velvet-dark) 2%, var(--velvet-mid) 4%, var(--velvet-bright) 5%, var(--velvet-mid) 7%, var(--velvet-crevice) 9%, var(--velvet-shadow) 10%, var(--velvet-crevice) 12%, var(--velvet-fold-light) 14%,var(--velvet-satin) 15%, var(--velvet-fold-light) 17%,var(--velvet-fold-deep) 19%,var(--velvet-shadow) 20%, var(--velvet-dark) 22%, var(--velvet-fold-light) 24%,var(--velvet-bright) 25%, var(--velvet-fold-light) 27%,var(--velvet-crevice) 29%, var(--velvet-shadow) 30%, var(--velvet-crevice) 32%, var(--velvet-fold-light) 34%,var(--velvet-satin) 35%, var(--velvet-fold-light) 37%,var(--velvet-fold-deep) 39%,var(--velvet-shadow) 40%, var(--velvet-edge) 42%, var(--velvet-glow) 44%, var(--velvet-bright) 45%, var(--velvet-glow) 47%, var(--velvet-crevice) 49%, var(--velvet-shadow) 50%, var(--velvet-crevice) 52%, var(--velvet-fold-light) 54%,var(--velvet-satin) 55%, var(--velvet-fold-light) 57%,var(--velvet-fold-deep) 59%,var(--velvet-shadow) 60%, var(--velvet-dark) 62%, var(--velvet-fold-light) 64%,var(--velvet-bright) 65%, var(--velvet-fold-light) 67%,var(--velvet-crevice) 69%, var(--velvet-shadow) 70%, var(--velvet-crevice) 72%, var(--velvet-fold-light) 74%,var(--velvet-satin) 75%, var(--velvet-fold-light) 77%,var(--velvet-fold-deep) 79%,var(--velvet-shadow) 80%, var(--velvet-edge) 82%, var(--velvet-glow) 84%, var(--velvet-bright) 85%, var(--velvet-glow) 87%, var(--velvet-crevice) 89%, var(--velvet-shadow) 90%, var(--velvet-crevice) 92%, var(--velvet-fold-light) 95%,var(--velvet-accent) 97%, var(--velvet-end) 99%, var(--velvet-deep) 100% );
background-blend-mode: multiply;
}
/* ==========================================================================
SIDE CURTAINS
========================================================================== */
body::before, body::after { /* left and right curtains */
content: "";
pointer-events: none;
position: fixed;
top: 0;
width: 60vw;
height: 99vh;
height: 99dvh;
z-index: 10;
}
body::before { /* left curtain */
left: 0;
clip-path: polygon(0% 0%, 100% 0%, 83.3% 100%, 0% 100%);
filter: drop-shadow(1rem 0 1.5rem var(--shadow-strong));
}
body::after { /* right curtain */
right: 0;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 16.7% 100%);
filter: drop-shadow(-0.3rem 0 1rem var(--shadow-subtle));
}
/* ==========================================================================
VALANCE TRIM
========================================================================== */
header[role="banner"]::before { /* valance trim */
content: "";
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 10vh;
z-index: 20;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
filter: drop-shadow(0 1rem 1.25rem var(--shadow-deep));
}