/* PSEUDOCODE: Place one shared world behind the document; keep content on a separate,
   readable layer. Nothing in the decorative layer can intercept a click or focus. */
.cinematic-page { background: #09080e; isolation: isolate; }
.digital-world { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 80% 35%, #271335 0, #09080e 65%); }
.digital-world canvas { width: 100%; height: 100%; display: block; }
.world-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, #09080eb3 0, #09080e40 48%, transparent 80%), linear-gradient(0deg, #09080e85, transparent 30%, transparent 85%, #09080e88); }
.cinematic-page .journey, .cinematic-page .approach, .cinematic-page .cta-section { background: linear-gradient(110deg,#100b19a6,#100b1938); }
.cinematic-page .hero-art.brand-hero { background: transparent; border-color: #b79af738; box-shadow: 0 30px 100px #0a061b55; }
.page-index .primary-brand-logo { mix-blend-mode: screen; }
.world-status { position: fixed; z-index: 12; left: 22px; bottom: 25px; width: 190px; display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: #c7b0e5; font: 8px/1.5 monospace; letter-spacing: .1em; pointer-events: none; padding: 10px; border: 1px solid #b79af724; background: #09080ee8; border-radius: 3px; }
.world-orbit { color: #d6c4f5; font-size: 16px; grid-row: span 2; }
.world-progress { height: 1px; background: #aa88cc36; }
.world-progress i { display: block; width: 100%; height: 100%; background: #b79af7; transform-origin: left; transform: scaleX(var(--world-progress,0)); }
/* PSEUDOCODE: Blend a small selection of original photo-style imagery into the
   digital story. Dark gradients protect copy; picture sources reduce mobile cost. */
.photo-scene { position: relative; isolation: isolate; overflow: hidden; }
.atmosphere-photo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.atmosphere-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: .55; }
.photo-scene::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#09080eea,#09080e85), linear-gradient(0deg,#09080e,transparent 25%,transparent 80%,#09080e); pointer-events: none; }
.image-disclosure { position: absolute; bottom: 14px; right: 20px; font: 9px/1.4 monospace; letter-spacing: .05em; color: #c5bacb; }
.page-about .studio-story { padding: 70px 32px; border-block: 1px solid #b79af739; border-radius: 8px; }
.page-work .featured-work { padding: 38px 24px; border-radius: 8px; }
.page-contact .page-intro { position: relative; background: radial-gradient(ellipse at 85% 45%,#7c4dcc2e,transparent 65%); }
.page-contact .page-intro::after { content:'◇'; position:absolute; right:8%; top:20%; color:#b79af735; font:140px/1 Georgia,serif; pointer-events:none; }
/* PSEUDOCODE: Shared scroll progress reorganizes one fictional interface from
   cluttered blocks to aligned type, spacing, and a visible consultation action. */
.refinement-demo { margin: 26px 0; }
.refinement-interface { position:relative; min-height: 210px; border: 1px solid #b79af76b; background:#100b19db; border-radius:8px; overflow:hidden; }
.refine-chrome { display:flex; gap:5px; padding:13px; border-bottom:1px solid #b79af733; }
.refine-chrome i { width:5px; height:5px; border-radius:50%; background:#9e85b5; }
.refine-pieces { display:grid; grid-template-columns:1fr 1fr; gap:calc(3px + var(--refine,1)*13px); padding:calc(12px + var(--refine,1)*16px); transform:skewY(calc((1 - var(--refine,1))*-4deg)); }
.refine-pieces span { font:14px Georgia,serif; color:#ded4eb; grid-column:1/-1; }
.refine-pieces i { height:20px; background:#b79af72e; border:1px solid #b79af725; }
.refine-pieces b { grid-column:1/-1; justify-self:start; font:10px monospace; padding:10px 14px; background:#b79af7; color:#160e20; }
.refinement-demo figcaption { color:var(--muted); font-size:11px; margin-top:10px; }
.refine-guides { position:absolute; inset:35px 8px 8px; border:1px dashed #b79af76b; opacity:calc(1 - var(--refine,1)); pointer-events:none; }
html[data-motion="paused"] .world-status { opacity: .55; }
html[data-motion="paused"] .refine-pieces { --refine:1; }
@media(max-width:700px) {
 .world-status { display:none; }
 .world-vignette { background:linear-gradient(90deg,#09080e99,#09080e70); }
 .atmosphere-photo img { opacity:.35; object-position:65% center; }
 .page-about .studio-story, .page-work .featured-work { padding-inline:20px; }
 .page-contact .page-intro::after { font-size:85px; right:2%; }
}
@media(prefers-reduced-motion:reduce) { .world-status { display:none; } .refine-pieces { --refine:1; } }

/* Keep the main invitation readable immediately while the atmosphere initializes. */
.cinematic-page .hero-copy > * { animation: none; opacity: 1; transform: none; }
/* Keep the shared paths behind a quiet reading surface in service side notes. */
.page-services .detail-note { background: linear-gradient(135deg,#110d1bef,#110d1bc9); padding:24px; border:1px solid #b79af72e; border-radius:8px; }

/* THE DIGITAL CONNECTION: reuse one world canvas, but keep contact surfaces calm.
   PSEUDOCODE: Put signals behind the page and dark reading panels over the form.
   The background never captures events or adds anything to the reading order. */
.page-contact .digital-world { background:radial-gradient(ellipse at 75% 40%,#21142f,#09080e 72%); }
.page-contact .world-vignette { background:linear-gradient(90deg,#09080ebf,#09080e40),linear-gradient(0deg,#09080e66,transparent 65%); }
.page-contact .contact-details { position:relative; background:#0c0912db; padding:24px; border:1px solid #b79af72b; border-radius:8px; }
.page-contact .form-panel { background:#100c18f2; position:relative; }
.page-contact .page-intro { background:transparent; }
.page-contact .page-intro::after { display:none; }
@media(max-width:700px) {
 .page-contact .digital-world canvas { opacity:.65; }
 .page-contact .contact-details { padding:20px; }
}