/* ================================================================= THE OVERSEER'S PRESENCE The frame around the video the idle engine drives. See frontend/game/js/overseerPresence.js — that file explains the playback; this one only has to explain the box. Everything here is prefixed .op- and every node is created by the module, so nothing in this file selects markup that lives in index.html. It can be loaded before the presence is wired anywhere and change nothing. ## Size comes from the container Nothing here sets a size. `.op-presence` fills the width it is given and squares itself; the caller's container is what decides how big the Overseer is, and Lane C owns those containers. --op-size is a *ceiling*, not a size. It exists for the one case the container does not constrain anything — a presence appended to the intro overlay or to document.body — where without it the portrait would run the full width of the page. A container narrower than the ceiling always wins. An earlier version of this file did size itself, with the avatar at 44px stepping down to 32px on a phone. That was wrong twice over: it fought whatever the container wanted, and it was built around the old 28px HUD icon. The content in this clip is a 720x720 face and a slow push-in, and neither survives being drawn at 32px — at that scale the feature is a smudge that flickers. It is designed to be read at 96-160px and it is verified at 96, 120 and 160. `avatar` and `scene` now differ only in that ceiling and in how heavy the ring and the glow are. ================================================================= */ .op-presence { position: relative; /* The container decides. See the header. */ width: 100%; max-width: var(--op-size); /* The crop is free, and this is the whole trick. The source is 1280x720 but the *content* is a 720x720 square at x 280-1000; the rest is black pillarbox, and the Veo watermark sits at x 1200-1260 inside the right-hand bar. A 1:1 box with object-fit: cover scales the frame to the box's height and centres it horizontally, which lands on exactly x 280-1000. The watermark and both bars fall outside the box. So: no clip-path, no negative margins, no transcode, and no magic offsets that would need re-deriving if the asset is ever re-rendered at another resolution. `contain` would bring the pillarbox back; a 16:9 slot would bring the watermark back. */ aspect-ratio: 1 / 1; overflow: hidden; /* The frame is padding, and the square is the OUTER edge — without this the padding would be added outside the aspect ratio and the frame would make him a rectangle. */ box-sizing: border-box; /* A rounded-corner square, not a circle. The circle read as an avatar chip — a contact photo — and he is meant to read as something you are looking at THROUGH: a viewport, a monitor, a cell. The radius is a proportion of the size rather than a constant so the corner looks the same at 96px and at 320px; a fixed radius reads sharp when small and soft when large. */ --op-radius: calc(var(--op-size, 160px) * 0.075); border-radius: var(--op-radius); /* --- the steel frame ------------------------------------------------- Brushed metal is a lighting trick, not a texture: a hard bright edge where a light source catches the top bevel, a dark edge where the bottom one falls away, and a shallow gradient across the face between them. Doing it with `border` cannot express that — a border has one colour per side — so the frame is padding filled by a background gradient, with the bevel drawn as inset shadows. Fallback first, then the mixed value: a browser that cannot parse color-mix() drops that declaration and keeps this one, rather than rendering in the initial (currentColor) colour. Same pattern everywhere below. */ padding: var(--op-frame); background: #2a2f38; background: linear-gradient(145deg, #4a515c 0%, #767d88 12%, /* top-left highlight, where the light lands */ #363c45 38%, #2b3038 62%, #565d68 88%, /* a weaker bounce off the bottom-right */ #333942 100%); /* Bevel and seat. The first two inset shadows are the lit and shadowed edges of the metal; the third is the recess the media sits in, which is what stops the picture looking pasted on top of the frame. Held in a custom property because the mood rules below all set box-shadow to apply their glow, and box-shadow does not merge — a mood that simply assigned its glow would silently flatten the frame. Every one of them composes with this instead. */ --op-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.4); box-shadow: var(--op-bevel); /* It sits in flex rows (the HUD header) next to text that will happily squeeze it if allowed. */ flex-shrink: 0; /* The ring, the vignette and the media all overlap; none of them should be able to paint over a panel border two pixels away. */ isolation: isolate; transition: border-color var(--transition-base), box-shadow var(--transition-base); } /* min-width is a floor, not a size. A container that forgets to give this a width — a bare div dropped into a flex row, which is exactly what the HUD header is — otherwise shrink-to-fits it down to nothing, and the failure is silent: a 44px Overseer looks like a deliberate small icon rather than like a mistake. The floor is well under any intended size, so it never binds in practice; it only stops the silent version. */ .op-avatar { --op-size: 160px; --op-ring: 2px; --op-frame: 7px; --op-glow: 18px; min-width: 72px; } .op-scene { /* 72vw keeps it inside a 390px phone with room either side; the fixed cap is what it settles to on anything wider. Combined with the max-width above, nothing here can cause horizontal overflow at any viewport width. */ --op-size: min(340px, 72vw); --op-ring: 2px; --op-frame: 10px; --op-glow: 34px; min-width: 120px; } .op-video, .op-still { display: block; width: 100%; height: 100%; object-fit: cover; /* The parent's overflow: hidden ought to be enough, and for the still it is. It is not reliably enough for the video: a