/* DispoZe visual shell v1 - the shared visual environment for customer-facing pages.
*
* Dispoze visual environment (this file) -> responsive page shell -> page-specific interface
*
* Source of truth = the approved Guest Camera (public/guest.html). Sections 1-2 are the camera's own look, lifted out unchanged:
* ink base, paper text, "flash" yellow, Bebas Neue / DM Mono / DM Sans, glass panels, and the photographic environment (party photo + scrim + film-grain overlay).
* Camera-only UI (viewfinder, SHOOT, mode pills, live-camera overlay, roll frames, a2hs chip) deliberately stays in guest.html.
*
* It makes NO assumption that a page is a narrow phone column: `.dz-column` is opt-in and takes its width from --dz-column, so a marketing page or an app surface
* (Host Workspace, Master Control) can use the same tokens and environment with a completely different layout.
*
* Usage: +
*
...page...
* data-dz-env="full" = the camera's environment exactly; "quiet" = same environment, dimmed further so photographs/content dominate (gallery grid, dense pages).
* If this file fails to load a page still works on the plain ink fallback below (html background) - never a broken or tan field.
*/
/* ---- 1. tokens (the camera's values) ------------------------------------------------------------------------------------------------------------------ */
:root{
--dz-ink:#0d0b09; --dz-ink-deep:#070504; --dz-panel:rgba(22,17,13,.60); --dz-panel-solid:#17120e; --dz-panel-lift:#241d18; --dz-line:rgba(247,241,232,.15);
--dz-paper:#f7f1e8; --dz-mut:#c9bfb2; --dz-soft:#e7ded1; --dz-flash:#ffd83d; --dz-flash-2:#ffe15c; --dz-gold-deep:#e0b021; --dz-on-gold:#20180a;
--dz-font-display:"Bebas Neue",sans-serif; --dz-font-mono:"DM Mono",monospace; --dz-font-body:"DM Sans",system-ui,sans-serif;
--dz-radius-card:16px; --dz-radius-pill:999px; --dz-blur:blur(10px);
--dz-column:520px; /* default reading/camera column; pages override */
--dz-gutter:20px;
--dz-safe-t:env(safe-area-inset-top,0px); --dz-safe-r:env(safe-area-inset-right,0px); --dz-safe-b:env(safe-area-inset-bottom,0px); --dz-safe-l:env(safe-area-inset-left,0px);
}
/* The canvas is ink wherever nothing else paints: overscroll, rubber-banding, mobile browser-chrome resize and short pages can never show a tan/brown field or a repeated tile. */
html{background:var(--dz-ink);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
.dz-body{margin:0;min-height:100vh;min-height:100dvh;background:transparent;color:var(--dz-paper);font-family:var(--dz-font-body);-webkit-font-smoothing:antialiased;
padding:var(--dz-safe-t) var(--dz-safe-r) var(--dz-safe-b) var(--dz-safe-l);overflow-x:clip}
/* ---- 2. the environment: photographic background + scrim + film-grain overlay (identical values to the camera's .cam-bg / .cam-scrim / .cam-grain) ------ */
.dz-env{position:fixed;inset:0;min-height:100lvh;z-index:0;pointer-events:none;overflow:hidden}
.dz-env-bg{position:absolute;inset:0;background:#0d0b09 center/cover no-repeat;
background-image:
radial-gradient(680px 400px at 50% -6%, rgba(255,216,61,.12), transparent 60%),
radial-gradient(120% 90% at 50% 118%, rgba(0,0,0,.55), transparent 60%);
opacity:1;transition:opacity .5s ease}
.dz-env-bg.loaded{background-blend-mode:normal}
.dz-env-scrim{position:absolute;inset:0;background:
linear-gradient(180deg, rgba(10,8,6,.30) 0%, rgba(10,8,6,.44) 36%, rgba(10,8,6,.72) 64%, rgba(8,6,5,.92) 86%, #070504 100%),
radial-gradient(120% 70% at 50% 8%, transparent 40%, rgba(0,0,0,.45))}
.dz-env-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* "quiet": the same environment dimmed further (the photograph stays faintly present, so the page still feels like the camera) - for content that must dominate. */
.dz-env-scrim::after{content:"";position:absolute;inset:0;background:rgba(7,5,4,.72);opacity:0;transition:opacity .6s ease}
[data-dz-env="quiet"] .dz-env-scrim::after{opacity:1}
/* Wide screens: the camera scrim is vertical only, which is right for a phone. Beside a narrow column on a large display, darken the middle so text/photos never sit on a raw
bright photo, and let the photograph breathe toward the edges. Phones are unaffected. */
@media (min-width:900px){
.dz-env-scrim{background:
radial-gradient(ellipse 52% 100% at 50% 46%, rgba(7,5,4,.50), transparent 100%),
linear-gradient(180deg, rgba(10,8,6,.30) 0%, rgba(10,8,6,.44) 36%, rgba(10,8,6,.72) 64%, rgba(8,6,5,.92) 86%, #070504 100%),
radial-gradient(120% 70% at 50% 8%, transparent 40%, rgba(0,0,0,.45))}
}
/* ---- 3. layout helpers (opt-in) ---------------------------------------------------------------------------------------------------------------------- */
.dz-page{position:relative;z-index:3;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.dz-column{width:100%;max-width:var(--dz-column);margin:0 auto;padding-left:var(--dz-gutter);padding-right:var(--dz-gutter)}
/* ---- 4. shared components (the camera's, generalised) ------------------------------------------------------------------------------------------------ */
.dz-brand{font-family:var(--dz-font-display);font-size:clamp(24px,7vw,30px);letter-spacing:.06em;line-height:1;display:inline-flex;align-items:baseline;gap:8px}
.dz-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--dz-flash);box-shadow:0 0 12px rgba(255,216,61,.85);align-self:center}
.dz-brand b{color:var(--dz-flash)}
.dz-kicker{font-family:var(--dz-font-mono);font-size:clamp(11px,3vw,13px);letter-spacing:.24em;color:var(--dz-mut);text-transform:uppercase}
.dz-title{font-family:var(--dz-font-display);font-weight:400;letter-spacing:.02em;line-height:.98;margin:0}
.dz-lede{color:var(--dz-soft);line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.dz-panel{background:var(--dz-panel);border:1px solid var(--dz-line);border-radius:var(--dz-radius-card);-webkit-backdrop-filter:var(--dz-blur);backdrop-filter:var(--dz-blur)}
.dz-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
background:var(--dz-flash);color:var(--dz-on-gold);font-family:var(--dz-font-display);letter-spacing:.05em;font-size:clamp(18px,5vw,21px);line-height:1;
padding:12px 22px;border-radius:12px;min-height:44px;box-shadow:0 2px 12px rgba(255,216,61,.28)}
.dz-btn:active{transform:translateY(1px)}
.dz-btn:disabled{filter:grayscale(.6) brightness(.7);cursor:not-allowed;box-shadow:none}
.dz-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dz-spin{width:26px;height:26px;border:3px solid var(--dz-line);border-top-color:var(--dz-flash);border-radius:50%;animation:dz-spin 1s linear infinite;margin:0 auto}
@keyframes dz-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .dz-env-bg,.dz-env-scrim::after{transition:none} .dz-spin{animation:none} }