/* ============================================================================
* EPAL GROUP ERP · assets/css/atmosphere.css
* ----------------------------------------------------------------------------
* BESPOKE VERTICAL ATMOSPHERE — a whisper-subtle, hand-drawn line-art emblem set
* behind each page header, unique to the vertical you are standing in (think
* embossed letterhead, not wallpaper):
*
* group → a constellation: a hub with orbiting company nodes
* travels → a globe with a great-circle flight arc + a paper plane
* travels/visa → concentric passport-stamp seals with an "approved" tick
* construction → a lattice tower crane over a faint site plan
* woodart → topographic wood-grain contour lines around a knot
* it → a chip with orthogonal circuit traces and solder nodes
* shop → a retail bag with a barcode
*
* DESIGN LAW (why it looks expensive and not "new money"):
* 1. ONE colour. The whole system stays the single brand blue; a vertical's
* identity comes from its MOTIF, never a second accent hue. No rainbow.
* 2. Near-invisible. Opacity is kept so low the emblem is *felt*, not *seen* —
* it reads as craft, not decoration. Restraint is the point.
* 3. Line only. Fine single-weight strokes, engraved — no fills, no glow.
*
* HOW IT BINDS: app.js `onRoute` stamps data-atmos="{companyId}" and
* data-module="{moduleId}" onto the #view mount; the emblem is a mask on
* `.page-head::after`, tinted with the live --accent, so it recolours with the
* theme automatically. Encoded as inline SVG data-URIs — zero network cost,
* GitHub-Pages friendly.
*
* ==> LARAVEL / PHP MAPPING: pure presentation. In Blade, set data-atmos /
* data-module on the content wrapper (@yield('content') container) from the
* active company + module; ship this stylesheet unchanged.
* ========================================================================== */
/* The emblem is a large, faint architectural watermark bleeding off the content's
TOP-RIGHT corner — the page reads as if it were set on branded drafting paper.
It lives on the scroll container (#view) behind everything, so real content
always paints crisply on top and the motif only breathes through the header
whitespace. It scrolls up with the page (atmosphere, not a fixed sticker). */
#view { position: relative; }
/* When the 3D ambient scene (ambient3d.js) is active, hide the 2D SVG airfield
scene — it's kept in the codebase and re-appears when `ui.atmos` is set back to
'2d'. (The faint #view::before emblem watermark stays; it never fights the 3D.) */
html.atmos-3d .ascene { display: none !important; }
/* Settings ▸ Background: 'No background' hides the 2D scenes too (the 3D
canvas never mounts in that mode), and the 2D master-opacity slider drives
--atmos-op2d — filter:opacity multiplies ON TOP of the scene's own fades,
so the .on/.off transitions keep working untouched. */
html.atmos-off .ascene { display: none !important; }
.ascene { filter: opacity(var(--atmos-op2d, 1)); }
#view::before {
content: ''; position: absolute; z-index: 0; pointer-events: none;
top: 0; right: 0; /* stays inside the scroll box */
width: 540px; height: 316px; max-width: 60%;
opacity: .12; /* felt, not seen (light) */
/* NO background here: it is painted only by the per-vertical rules below.
(If the base rule painted ink and --atmos was ever unset — e.g. before the
router stamps data-atmos — the un-masked box would render as a solid
rectangle. Ink and mask must always arrive together.) */
/* mask nudged up/right so the motif bleeds toward the corner WITHOUT the box
leaving the container (which would force a horizontal scrollbar). */
-webkit-mask: var(--atmos, none) no-repeat right -30px top -26px / 116%;
mask: var(--atmos, none) no-repeat right -30px top -26px / 116%;
}
/* ink is applied ONLY when a vertical has claimed the page (mask + paint together) */
[data-atmos="group"]#view::before, [data-atmos="travels"]#view::before,
[data-atmos="construction"]#view::before, [data-atmos="woodart"]#view::before,
[data-atmos="it"]#view::before, [data-atmos="shop"]#view::before {
background: color-mix(in srgb, var(--accent) 55%, var(--text));
}
[data-theme="dark"] #view::before { opacity: .18; } /* a touch more on navy */
/* keep the app content above the watermark */
#view > * { position: relative; z-index: 1; }
/* No emblem until a vertical claims one — the var(--atmos, none) fallback above
keeps `.page-head::after` blank until one of the rules below sets --atmos.
(Deliberately NOT reset on #view: an #id rule would out-specify these
attribute rules and suppress every emblem.) */
/* ---------------------------------------------------------------- GROUP */
[data-atmos="group"] {
--atmos: url("data:image/svg+xml,");
}
/* -------------------------------------------------------------- TRAVELS */
[data-atmos="travels"] {
--atmos: url("data:image/svg+xml,");
}
/* ---------------------------------------------- TRAVELS · VISA (module) */
[data-atmos="travels"][data-module="visa-processing"] {
--atmos: url("data:image/svg+xml,");
}
/* --------------------------------------------------------- CONSTRUCTION */
[data-atmos="construction"] {
--atmos: url("data:image/svg+xml,");
}
/* ------------------------------------------------- WOODART · INTERIORS */
[data-atmos="woodart"] {
--atmos: url("data:image/svg+xml,");
}
/* ------------------------------------------------------------------- IT */
[data-atmos="it"] {
--atmos: url("data:image/svg+xml,");
}
/* ----------------------------------------------------------------- SHOP */
[data-atmos="shop"] {
--atmos: url("data:image/svg+xml,");
}
/* Reduced-motion users: the emblem is static anyway, but keep the fade instant. */
@media (prefers-reduced-motion: reduce) {
.page-head::after { transition: none; }
}