/* [Redesign 2026-07-27] skin-terminal.css — "Gear / Signal"
   No longer a distinct color skin. All typography, layout, and color come
   from the unscoped Classified baseline in area51-components.css, untouched.
   This file adds exactly one graphic identity: a purple-tinted rendering of
   the Area 51 gear + Vitruvian-Man mark (assets/images/Area 51 logo White
   (best).png), used as a slow-rotating watermark. Everything below is scoped
   under body.skin-terminal so it can never affect the default look. */

/* --- Sitewide: small mark in the footer corner, present on every page --- */
body.skin-terminal .area51-footer {
    position: relative;
    overflow: hidden;
}

body.skin-terminal .area51-footer::before {
    content: "";
    position: absolute;
    bottom: 5px;
    right: 16px;
    width: 130px;
    height: 130px;
    background-image: url("../../images/skins/gear-mark-purple.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

/* --- Sitewide: large watermark fixed to the viewport, right-justified,
   shifted up half its own height from vertical center (top:50% +
   translateY(-100%), instead of the centering -50%). No positional
   movement at all — the gear spins in place and the figure holds still
   at its exact center.

   Earlier attempts (background-position defaults + counter-rotation tricks)
   fought the fact that the gear's own artwork wasn't centered within its
   800x1200 source canvas, which made any rotation swing the visible content
   in a circle around a pivot that didn't match its true center. Fixed at
   the source instead: gear-ring-purple.png and figure-purple.png were
   re-cropped to a square 620x620 canvas centered exactly on the gear
   ring's own bounding-box center (computed from the original combined
   gear-mark-purple.png). With the box's default rotation origin (50% 50%)
   now coinciding with the gear's true visual center, rotating produces a
   pure in-place spin with zero wobble — and since the figure shares that
   same centered canvas but gets no animation at all, it simply stays put,
   which is now exactly the gear's own center. Real markup (echoed via
   area51_render_watermark() on wp_footer, not a pseudo-element) so the two
   images can share one positioned box without duplicating position/size
   rules.

   Box size 496px/56.8vw (not 960px/110vw) is deliberate: the tightly
   cropped 620x620 canvas has far less transparent padding than the old
   800x1200 one, so the same box size would render the artwork ~1.9x
   larger. This value restores the original on-screen size (gear bbox
   height was 582/1200=48.5% of the box before, is 582/620=93.9% now;
   960 * (48.5/93.9) = 496). --- */
body.skin-terminal .area51-watermark-pivot {
    position: fixed;
    top: 50%;
    right: 0;
    width: min(496px, 56.8vw);
    height: min(496px, 56.8vw);
    opacity: 0.28;
    pointer-events: none;
    z-index: -1;
    transform: translateY(-100%);
}

body.skin-terminal .area51-watermark-gear,
body.skin-terminal .area51-watermark-figure {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body.skin-terminal .area51-watermark-gear {
    background-image: url("../../images/skins/gear-ring-purple.png");
    animation: area51-gear-spin 140s linear infinite;
}

body.skin-terminal .area51-watermark-figure {
    background-image: url("../../images/skins/figure-purple.png");
}

@keyframes area51-gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    body.skin-terminal .area51-watermark-gear {
        animation: none;
    }
}