/* jasondmacleod.com — homepage styles (extracted from index.html) */
/* =========================================================
PALETTE: risograph / xerox protest-collage
(Winston Hacking · RTJ "JU$T" energy)
newsprint cream · photocopy black · 2 riso inks
========================================================= */
:root{
--desk: #241b2e; /* deep aubergine ground (semi-truck scene) */
--desk-2: #2b2236;
--chrome: #e8e2d2; /* photocopied paper-gray */
--chrome-d: #8a8270;
--chrome-l: #fdfbf3;
--bar: #1a1714; /* photocopy black */
--bar-2: #3a342c;
--ink: #1a1714; /* near-black ink */
--paper: #f4ede0; /* clean zine paper */
--riso-pink: #ff2d8f; /* riso fluorescent pink — primary */
--riso-orange: #ff6b1f; /* riso orange — secondary */
--riso-acid: #9be15a; /* bilious acid green — JU$T frame 2 */
--riso-purple: #8f5ad2; /* sickly purple — JU$T frame 3 */
--riso-blue: #2a55d4; /* riso blue — occasional */
--riso-yellow: #ffd23f; /* riso yellow — occasional */
/* legacy token remaps so nothing breaks */
--hot-pink: #ff2d8f;
--acid: #ff6b1f;
--siren: #e3261c;
--gold: #ffd23f;
--ms: "MS Sans Serif", "Tahoma", system-ui, sans-serif;
--pixel: "Press Start 2P", monospace;
--crt: "VT323", monospace;
--black-letter: "UnifrakturCook", "Times New Roman", serif;
--western: "Rye", "Georgia", serif;
--kana: "DotGothic16", monospace;
--slab: "Archivo Black", "Arial Black", sans-serif;
--cut: "Anton", "Arial Black", sans-serif;
--type: "Special Elite", "Courier New", monospace;
--mono: "VT323", "Courier New", monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
font-family:var(--ms);font-size:13px;color:var(--ink);
background:var(--desk);
image-rendering:pixelated;
-webkit-font-smoothing:none;
overflow-x:hidden;
cursor:url("data:image/svg+xml;utf8,") 2 2, auto;
}
/* visually-hidden but crawler/screen-reader accessible — proper SEO content
for Googlebot. NOT display:none (which gets deprioritized). Uses the
standard a11y pattern. */
.sr-only{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
button, a, .clickable{cursor:url("data:image/svg+xml;utf8,") 5 2, pointer}
/* desktop = deep aubergine ground; the semi-truck scene + windows sit on top */
body{
background-color:var(--desk);
background-image:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,107,31,.05) 0%, transparent 55%),
linear-gradient(180deg,var(--desk-2),var(--desk) 70%);
background-attachment: fixed;
}
body::before{ content:none; }
/* ---- COLLAGE SCRAPS — agitprop slogans on the desktop ---- */
.scrap-slogan{
background:var(--bar);color:var(--paper);
font-family:var(--cut);text-transform:uppercase;
padding:6px 13px;font-size:14px;letter-spacing:.04em;line-height:1.15;
box-shadow:4px 4px 0 rgba(26,23,20,.4);
}
.scrap-slogan.pink{background:var(--riso-pink);color:var(--bar)}
.scrap-slogan.acid{background:var(--riso-acid);color:var(--bar)}
.scrap-slogan.orange{background:var(--riso-orange);color:var(--bar)}
.scrap-slogan.purple{background:var(--riso-purple);color:var(--paper)}
/* DESKTOP: the three agitprop slogans float absolutely in empty desktop space.
(At tablet/phone these are overridden to flow inline as scrap dividers.) */
.scrap-divider{position:absolute;z-index:1;pointer-events:none}
.scrap-divider.pink {top:57%;right:1%;transform:rotate(-7deg)}
.scrap-divider.orange{top:65%;right:0.5%;transform:rotate(5deg)}
.scrap-divider.purple{bottom:0.5%;left:50%;transform:translateX(-50%) rotate(-4deg)}
/* ============ DESKTOP DEBRIS — margin clutter on wide screens.
Lives outside .stage-grid (which is capped at 1850px), pinned to the full
.stage width, so items sit in the desk-color bands left/right of the canvas.
Hidden below 1500px where the canvas already fills the width.
Content is sourced Foucault (Discipline & Punish), each attributed. ============ */
/* ============ SEMI-TRUCK SCENE — animated background ============
Big trucks haul currency right-to-left in a continuous loop, in front of a
Seattle skyline that sits on a single road line. Centered in the middle of
the screen. Homage to thestrokes.com, recolored to the riso palette. ====== */
.bg-scene{
position:fixed;left:0;right:0;bottom:0;
height:86vh;
z-index:0;pointer-events:none;overflow:hidden;
}
/* skyline sits ON the road line (its base aligns to the road) */
/* white Seattle skyline as a backdrop: base sits ON the road line and it
fills upward to roughly the top of the scene band (below the desktop menu) */
.bg-skyline{
position:absolute;left:-21%;
bottom:12%;width:125%;height:auto;opacity:.9;z-index:0;
}
/* single road line that the skyline + trucks sit on */
/* the marching strip: sized to its content, two identical halves so a
translateX(-50%) loop is perfectly seamless (no gap, no pop).
Trucks roll on the skyline's own baseline (same bottom as .bg-skyline). */
.bg-track{
position:absolute;left:0;bottom:12%;
display:flex;align-items:flex-end;width:max-content;
animation:march 60s linear infinite;will-change:transform;z-index:2;
}
@keyframes march{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.bg-unit{ flex:0 0 auto;margin-right:90px }
.bg-rig{ position:relative;display:inline-block;
filter:drop-shadow(0 6px 0 rgba(13,10,20,.3)) }
.bg-rig .truck{ display:block;width:680px;height:auto }
/* single centered row of 5 currency coins on the trailer face */
.bg-cargo{
position:absolute;left:40.5%;top:17.5%;width:55.5%;height:45%;
display:grid;grid-template-columns:repeat(5,1fr);place-items:center;overflow:visible;
}
.bg-coin{ width:92%;height:auto;aspect-ratio:1/1;display:block }
@media (prefers-reduced-motion:reduce){ .bg-track{animation:none} }
@media (max-width:1100px){ .bg-scene{display:none} }
.desk-debris{
position:absolute;left:0;right:0;top:230px;bottom:0;
z-index:2;pointer-events:none;overflow:hidden;
opacity:0;transition:opacity .3s;
}
@media (min-width:1500px){ .desk-debris{opacity:1} }
.dbr{
position:absolute;transform:rotate(var(--rot,0deg));
filter:drop-shadow(3px 3px 0 rgba(26,23,20,.32));
}
/* slogan scraps — sourced critical-theory fragments, unattributed */
.dbr-slogan{
padding:8px 13px 7px;font-size:clamp(12px,0.9vw,17px);
letter-spacing:.02em;line-height:1.18;text-align:center;
max-width:clamp(150px,12vw,230px);
background:var(--bar);color:var(--paper);
font-family:var(--type);text-transform:none;
}
.dbr-slogan.pink {background:var(--riso-pink);color:var(--bar)}
.dbr-slogan.acid {background:var(--riso-acid);color:var(--bar)}
.dbr-slogan.orange{background:var(--riso-orange);color:var(--bar)}
.dbr-slogan.purple{background:var(--riso-purple);color:var(--paper)}
.dbr-slogan.paper {background:var(--paper);color:var(--bar);border:2px solid var(--bar)}
/* taped index-card notes (own voice, not attributed) */
.dbr-note{
font-family:var(--type);
background:var(--riso-yellow);color:var(--bar);
padding:11px 14px 10px;font-size:clamp(11px,0.7vw,14px);line-height:1.3;
border:1px solid rgba(26,23,20,.25);text-align:center;
max-width:clamp(140px,11vw,200px);
}
.dbr-note::before{
content:"";position:absolute;top:-8px;left:50%;
transform:translateX(-50%) rotate(-2deg);
width:46px;height:15px;background:rgba(255,255,255,.45);
border:1px solid rgba(26,23,20,.18);
}
/* neutral riso sticker-marks (stars / asterisks — no symbols) */
.dbr-mark{
display:flex;align-items:center;justify-content:center;
width:clamp(38px,2.8vw,54px);height:clamp(38px,2.8vw,54px);
font-size:clamp(20px,1.5vw,30px);color:var(--paper);
background:var(--bar);
font-family:var(--cut);
}
.dbr-mark.x {background:var(--riso-pink);color:var(--bar)}
.dbr-mark.acid{background:var(--riso-acid);color:var(--bar)}
.dbr-mark.orange{background:var(--riso-orange);color:var(--bar)}
.scrap-blob{ background-size:cover;opacity:.7; }
.scrap-mark{
background:var(--paper);border:3px solid var(--bar);
display:flex;align-items:center;justify-content:center;
font-family:var(--cut);color:var(--bar);
box-shadow:5px 5px 0 rgba(26,23,20,.4);
}
.scrap-mark.x{background:var(--riso-pink)}
.scrap-mark.acid{background:var(--riso-acid)}
a{color:var(--riso-pink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
a:hover{color:var(--riso-orange);background:var(--bar)}
/* =========================================================
TOP TASKBAR — photocopied paper strip
========================================================= */
.topbar{
position:fixed;top:0;left:0;right:0;height:34px;z-index:60;
background:var(--chrome);
background-image:
radial-gradient(circle at 1px 1px, rgba(26,23,20,.1) .5px, transparent 1px);
background-size:4px 4px;
border-bottom:2px solid var(--bar);
display:flex;justify-content:space-between;align-items:center;
padding:0 4px;
box-shadow: inset 0 1px 0 var(--chrome-l), 0 2px 0 rgba(26,23,20,.25);
}
.topbar .left{display:flex;gap:4px;align-items:center}
.hamburger{
display:none;
background:var(--bar);padding:0 8px;height:22px;align-items:center;justify-content:center;
font-family:var(--cut);font-size:13px;font-weight:400;color:var(--paper);
border:2px solid var(--bar);letter-spacing:.08em;
}
.hamburger:active{background:var(--riso-pink);color:var(--bar)}
.menu-panel{
display:none;
position:fixed;bottom:46px;left:4px;z-index:70;
width:300px;max-width:calc(100vw - 8px);
background:var(--paper);
border:2.5px solid var(--bar);
box-shadow:6px 6px 0 rgba(26,23,20,.5);
font-family:var(--ms);font-size:13px;
max-height:80vh;overflow:auto;
}
/* on narrow screens the menu drops from the top bar (hamburger context) */
@media (max-width:1100px){
.menu-panel{ bottom:auto;top:34px;left:4px;right:4px;width:auto;max-width:none; }
}
.menu-panel.open{display:block}
.menu-panel .group-title{
background:var(--bar);
color:var(--riso-pink);padding:5px 8px;font-weight:400;font-size:11px;
letter-spacing:.12em;text-transform:uppercase;font-family:var(--cut);
}
.menu-panel a, .menu-panel .menu-item{
display:flex;align-items:center;gap:10px;
padding:9px 12px;color:var(--bar);text-decoration:none;
border-bottom:1px dashed var(--chrome-d);
background:var(--paper);font-size:13px;
}
.menu-panel a:hover, .menu-panel .menu-item:hover{
background:var(--riso-pink);color:var(--bar);
}
.menu-panel .swatch{
width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
border:2px solid var(--bar);font-family:var(--cut);font-size:10px;flex-shrink:0;
background:var(--riso-yellow);color:var(--bar);
}
.winbtn{
display:inline-flex;align-items:center;gap:4px;
height:22px;padding:0 10px;
background:var(--riso-pink);
border:2px solid var(--bar);
font-family:var(--cut);font-size:11px;letter-spacing:.1em;color:var(--bar);
text-transform:uppercase;
}
.winbtn:active{background:var(--riso-orange)}
.topbar .right{display:flex;gap:6px;align-items:center;font-family:var(--type);font-size:11px}
.topnav{display:flex;gap:2px;align-items:center;margin-right:4px}
.topnav a{
display:inline-block;color:var(--bar);text-decoration:none;
font-family:var(--cut);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border:2px solid var(--bar);background:var(--paper);
line-height:1;
}
.topnav a:hover{background:var(--riso-pink);color:var(--ink);}
.topbar .clock{
background:var(--bar);padding:3px 8px;color:var(--riso-yellow);
border:2px solid var(--bar);
font-family:var(--type);
font-variant-numeric:tabular-nums;
min-width:58px;text-align:right;
}
.audio-btn{
background:var(--chrome);padding:3px 8px;font-family:var(--type);font-size:11px;
border:2px solid var(--bar);color:var(--bar);
text-transform:uppercase;letter-spacing:.05em;
}
.audio-btn.on{background:var(--riso-orange);color:var(--bar)}
/* =========================================================
WORDMARK — cut-paper ransom-note headline
========================================================= */
.stage{
padding-top:34px;padding-bottom:54px;min-height:100vh;position:relative;overflow:hidden;
z-index:1;
}
.wordmark{
text-align:center;padding:18px 0 2px;
font-family:var(--cut);
color:var(--bar);
font-size:clamp(30px,7vw,78px);
line-height:.92;letter-spacing:.01em;
text-transform:uppercase;
position:relative;
}
/* each word becomes a pasted paper scrap via the spans inside */
.wordmark .scrap{
display:inline-block;padding:2px 12px;margin:3px 4px;
background:var(--paper);
border:2.5px solid var(--bar);
box-shadow:4px 4px 0 rgba(26,23,20,.45);
}
.wordmark .scrap:nth-child(1){transform:rotate(-3deg);background:var(--riso-pink);color:var(--paper)}
.wordmark .scrap:nth-child(2){transform:rotate(2deg);background:var(--paper);color:var(--bar)}
.subbar{
text-align:center;color:var(--paper);
font-family:var(--type);
font-size:clamp(12px,2vw,18px);
letter-spacing:.18em;
margin:10px 0 6px;text-transform:uppercase;
}
.subbar .tag{
background:var(--bar);padding:4px 10px;display:inline-block;
transform:rotate(-1deg);
box-shadow:3px 3px 0 var(--riso-orange);
}
.subbar .blink{animation:blink 1.1s steps(2,end) infinite;color:var(--riso-pink)}
@keyframes blink{50%{opacity:.2}}
/* =========================================================
MARQUEE — torn agitprop ticker strip
========================================================= */
.ticker-row{
background:var(--bar);color:var(--paper);
border-top:3px solid var(--bar);
border-bottom:3px solid var(--bar);
overflow:hidden;white-space:nowrap;padding:8px 0;
font-family:var(--type);font-size:15px;line-height:1.4;letter-spacing:.05em;
position:relative;
}
.ticker-row .inner{display:inline-block;animation:slide 34s linear infinite}
.ticker-row .inner span{margin-right:36px}
.ticker-row .inner span::before{content:"✷ ";color:var(--riso-orange)}
.ticker-row .pink{color:var(--riso-pink)}
.ticker-row .red{color:var(--riso-orange)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* =========================================================
WINDOWS — pasted paper scraps (hard ink + offset shadow)
========================================================= */
.win{
position:absolute;background:var(--chrome);
border:2.5px solid var(--bar);
box-shadow:6px 6px 0 rgba(26,23,20,.4);
font-family:var(--ms);font-size:1em;
}
/* a riso-ink blot bleeding from behind each window */
/* (decorative pink corner blob removed — it read as a smudge behind the
window controls) */
.win__bar{
display:flex;justify-content:space-between;align-items:center;
background:var(--bar);
color:var(--paper);padding:4px 5px;
font-weight:400;font-size:12px;letter-spacing:.08em;
font-family:var(--cut);text-transform:uppercase;
user-select:none;
border-bottom:2.5px solid var(--bar);
cursor:url("data:image/svg+xml;utf8,") 10 10, move;
touch-action:none;
}
.win__bar .controls .ctl{ touch-action:auto; }
.win.dragging{
box-shadow: 10px 10px 0 rgba(26,23,20,.5);
}
.win.dragging .win__bar{
background:var(--riso-pink);color:var(--bar);
}
.win__bar .ico{display:inline-flex;align-items:center;gap:6px}
/* status dot = riso ink blob */
.win__bar .ico .q{
width:11px;height:11px;background:var(--riso-pink);display:inline-block;position:relative;
border:2px solid var(--paper);border-radius:50%;
}
.win__bar .ico .q::before,
.win__bar .ico .q::after{content:none}
.win__bar .controls{display:flex;gap:3px}
/* Win95-style window controls: small raised-bevel gray buttons.
Symbol is drawn via CSS (not a font glyph) so it's always crisp — this
also removes the old "smudge" from rendering _/□/× in the display font. */
.win__bar .controls{display:flex;gap:2px;align-items:center}
.win__bar .ctl{
width:16px;height:14px;
background:var(--chrome,#c8c2b4);
border-top:1.5px solid #fff;
border-left:1.5px solid #fff;
border-right:1.5px solid #4a443a;
border-bottom:1.5px solid #4a443a;
box-shadow:inset -1px -1px 0 #908a7c, inset 1px 1px 0 #efeae0;
color:transparent; /* hide the source character */
font-size:0;line-height:0;
position:relative;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
}
.win__bar .ctl:active{
border-top:1.5px solid #4a443a;border-left:1.5px solid #4a443a;
border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;
box-shadow:inset 1px 1px 0 #908a7c;
}
/* minimize: a short bar near the bottom (the "_" control) */
.win__bar .ctl.is-min::before{
content:"";position:absolute;bottom:2px;left:3px;right:3px;height:2px;
background:#1a1714;
}
/* maximize: a hollow square (the "□" control) */
.win__bar .ctl.is-max::before{
content:"";position:absolute;top:2px;left:3px;right:3px;bottom:2px;
border:1.5px solid #1a1714;border-top-width:2.5px;
}
/* close: a crisp × drawn from two bars */
.win__bar .ctl.is-close::before,
.win__bar .ctl.is-close::after{
content:"";position:absolute;top:50%;left:50%;width:9px;height:1.8px;
background:#1a1714;
}
.win__bar .ctl.is-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.win__bar .ctl.is-close::after {transform:translate(-50%,-50%) rotate(-45deg)}
.win__bar .ctl:hover{background:#d8d2c4}
.win__bar .ctl.is-close:hover{background:var(--riso-pink)}
/* MOBILE: make close/min/max buttons finger-tappable (symbols still CSS-drawn) */
@media (max-width: 920px), (pointer:coarse) {
.win__bar{padding:6px 6px}
.win__bar .ctl{
width:26px;height:22px;font-size:0;
}
.win__bar .ctl.is-close::before,
.win__bar .ctl.is-close::after{width:13px;height:2.4px}
.win__bar .ctl.is-min::before{height:3px;bottom:4px}
.win__bar .controls{gap:4px}
}
.win__menu{
border-bottom:2px solid var(--bar);
padding:3px 7px;display:flex;gap:14px;font-size:11px;
background:var(--chrome);
font-family:var(--type);
}
.win__menu span{cursor:pointer}
.win__menu span:hover{background:var(--riso-pink);color:var(--paper)}
.win__menu span u{text-underline-offset:1px}
.win__body{padding:9px;background:var(--paper)}
/* =========================================================
UNIFIED DESIGN TOKENS — modern indie pixel-art UI
(used across all small windows for consistency)
========================================================= */
/* CUT-PAPER BUTTON — hard ink edge + offset shadow */
.px-btn{
display:inline-block;font-family:var(--cut);font-size:11px;
padding:6px 14px;color:var(--bar);
background:var(--paper);
border:2.5px solid var(--bar);
box-shadow:3px 3px 0 var(--bar);
cursor:pointer;letter-spacing:.06em;text-transform:uppercase;
}
.px-btn:hover{background:var(--riso-yellow)}
.px-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--bar)}
.px-btn.danger{background:var(--siren);color:var(--paper)}
.px-btn.danger:hover{background:var(--riso-orange);color:var(--bar)}
.px-btn.go{background:var(--riso-blue);color:var(--paper)}
.px-btn.go:hover{background:var(--riso-pink);color:var(--bar)}
.px-btn.neon{background:var(--riso-pink);color:var(--paper)}
.px-btn.neon:hover{background:var(--riso-orange);color:var(--bar)}
/* TYPED INPUT — paper field, hard outline */
.px-input{
font-family:var(--type);font-size:12px;color:var(--bar);
background:var(--paper);
border:2.5px solid var(--bar);
padding:5px 7px;
outline:none;
}
.px-input::placeholder{color:#9a917e}
.px-input:focus{background:#fff;box-shadow:3px 3px 0 var(--riso-pink)}
/* PROGRESS BAR — riso ink meter */
.px-progress{
background:var(--paper);
border:2.5px solid var(--bar);
height:14px;position:relative;overflow:hidden;
}
.px-progress .fill{
display:block;height:100%;
background:
repeating-linear-gradient(45deg,
var(--riso-pink) 0 7px,
var(--riso-orange) 7px 14px);
}
/* SLIDER */
.px-slider{
height:8px;background:var(--paper);border:2.5px solid var(--bar);position:relative;
}
.px-slider .thumb{
position:absolute;top:-5px;width:12px;height:16px;
background:var(--riso-pink);
border:2.5px solid var(--bar);
}
/* SCROLLBAR — inked */
.px-scroll::-webkit-scrollbar{width:13px}
.px-scroll::-webkit-scrollbar-track{background:var(--paper);border-left:2px solid var(--bar)}
.px-scroll::-webkit-scrollbar-thumb{
background:var(--riso-pink);
border:2px solid var(--bar);
}
.px-scroll::-webkit-scrollbar-thumb:hover{background:var(--riso-orange)}
/* =========================================================
FEATURED CENTER WINDOW — Jason's intro
========================================================= */
.stage-grid{
position:relative;
z-index:3;
/* scaling canvas: keeps a fixed aspect ratio, grows/shrinks with viewport
so the whole overlapping collage scales as one unit. Capped at 1850px
with a wide aspect so on ultra-wide displays (2K/4K) the window cluster
spreads to fill the width — only a thin desk-color frame each side
(~155px at 2160) — and the font cap keeps windows from ballooning, so
they spread apart more than they enlarge. */
width:100%;
max-width:1850px;
margin:0 auto;
aspect-ratio:1900 / 1300;
container-type:inline-size;
overflow:visible;
/* font scales with the canvas so window text stays proportional */
font-size:clamp(9px, 0.95cqw, 13px);
}
/* every desktop window positioned as a % of the scaling canvas */
.stage-grid > .win{
position:absolute;
}
.w-hero{
width:40%;
left:30%;
top:7%;z-index:25;
}
/* =========================================================
HERO OFFICE SCENE — modern indie pixel-art
(Stardew/Eastward/Disco Elysium feel)
220px tall · bright fluorescent · no UFO here
========================================================= */
.hero-art{
height:220px;position:relative;overflow:hidden;
border:2.5px solid var(--bar);
background:#3a3220; /* fallback */
image-rendering:pixelated;
image-rendering:crisp-edges;
}
.office-svg{
position:absolute;inset:0;width:100%;height:100%;display:block;
}
/* slight scene-wide warm-yellow filter + grain */
.hero-art::after{
content:"";position:absolute;inset:0;z-index:50;pointer-events:none;
background:
/* corner vignette */
radial-gradient(ellipse at 50% 60%, transparent 60%, rgba(0,0,0,.25) 100%),
/* warm office tint */
linear-gradient(180deg, rgba(255,240,200,.06) 0%, rgba(255,210,160,.03) 100%);
}
/* ======== BACK WALL (visible above the cubicles) ======== */
.o-wall{
position:absolute;left:0;right:0;top:0;height:38%;z-index:1;
background:
/* horizontal molding strip at bottom (chair-rail height) */
linear-gradient(180deg,
#b8a888 0%, /* top wall — beige */
#c8b898 88%, /* slight lift toward bottom */
#6a5a40 89%, /* molding shadow */
#d8c8a0 90%, /* molding highlight */
#a89878 91%,
#b8a888 100%
);
}
/* wall texture noise */
.o-wall::before{
content:"";position:absolute;inset:0;opacity:.18;
background:
repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.06) 2px 3px),
repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.04) 3px 4px);
}
/* "HANG IN THERE" poster on wall */
.o-poster{
position:absolute;width:34px;height:26px;z-index:2;
top:8px;left:6%;
background:#fff;
border:1px solid #2a2418;
box-shadow:
inset 0 0 0 1px #f0e8d0,
1px 1px 0 rgba(0,0,0,.3);
}
.o-poster::before{
/* branch */
content:"";position:absolute;left:2px;top:8px;right:2px;height:1px;background:#5a3a1a;
}
.o-poster::after{
/* cat shape */
content:"";position:absolute;left:11px;top:3px;width:12px;height:8px;
background:
radial-gradient(ellipse 6px 4px at 50% 70%, #ffa15e 0 90%, transparent),
radial-gradient(circle 1px at 35% 30%, #000, transparent),
radial-gradient(circle 1px at 65% 30%, #000, transparent);
}
/* wall clock */
.o-clock{
position:absolute;top:6px;right:5%;z-index:2;
width:24px;height:24px;border-radius:50%;
background:radial-gradient(circle at 35% 35%, #fff 0%, #e0d8c8 70%, #908878 100%);
border:2px solid #3a2418;
box-shadow:1px 1px 0 rgba(0,0,0,.25);
}
.o-clock::before{
/* hour ticks */
content:"";position:absolute;inset:1px;border-radius:50%;
background:
radial-gradient(circle 1px at 50% 12%, #2a2418 0 100%, transparent 0),
radial-gradient(circle 1px at 50% 88%, #2a2418 0 100%, transparent 0),
radial-gradient(circle 1px at 12% 50%, #2a2418 0 100%, transparent 0),
radial-gradient(circle 1px at 88% 50%, #2a2418 0 100%, transparent 0);
}
.o-clock::after{
/* hands — pointing at ~4:47 (afternoon despair time) */
content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;background:#2a2418;border-radius:50%;
box-shadow:
0 -5px 0 -.5px #2a2418, /* minute hand pointing roughly up-left */
4px 1px 0 -.5px #2a2418; /* hour hand pointing right-ish at 4 */
}
/* faded org-chart paper on the wall */
.o-org{
position:absolute;top:8px;right:18%;width:22px;height:18px;z-index:2;
background:
linear-gradient(180deg, #f0e0c0 0%, #d8c8a0 100%);
border:1px solid #5a4818;
transform:rotate(-3deg);
box-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.o-org::before{
/* org boxes — 1 on top, 3 below */
content:"";position:absolute;inset:2px;
background:
linear-gradient(transparent 30%, #5a4818 30%, #5a4818 31%, transparent 31%),
linear-gradient(90deg, transparent 33%, #5a4818 33%, #5a4818 34%, transparent 34%, transparent 66%, #5a4818 66%, #5a4818 67%, transparent 67%);
}
/* ======== CEILING (drop-tile grid with fluorescents) ======== */
.o-ceiling{
position:absolute;left:0;right:0;top:0;height:22%;z-index:6;
background:
/* grid lines */
repeating-linear-gradient(90deg, transparent 0 38px, rgba(0,0,0,.35) 38px 39px),
repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,0,0,.3) 26px 27px),
/* tile surface gradient */
linear-gradient(180deg, #f8f4e8 0%, #e8e0c8 60%, #b8a888 100%);
}
/* the metal T-bar bottom edge of ceiling */
.o-ceiling::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
background:linear-gradient(180deg, #888 0%, #555 50%, #888 100%);
border-top:1px solid #2a2418;
}
/* fluorescent fixtures (recessed) */
.o-light{
position:absolute;height:8px;background:#3a3220;border:1px solid #1a1408;z-index:7;top:6px;
box-shadow:inset 0 0 0 1px #5a4828;
}
.o-light::before{
/* the actual tube light */
content:"";position:absolute;inset:1px;
background:
/* 4 tube highlights */
repeating-linear-gradient(90deg,
#fff8c8 0 5px, #ffe88a 5px 9px, transparent 9px 11px,
#fff8c8 11px 16px, #ffe88a 16px 20px, transparent 20px 22px,
#fff8c8 22px 27px, #ffe88a 27px 31px, transparent 31px 33px,
#fff8c8 33px 38px, #ffe88a 38px 42px
);
box-shadow:0 0 8px rgba(255,248,200,.9);
}
.o-light.l1{left:14%;width:60px}
.o-light.l2{left:58%;width:60px;animation:lightFlicker 5.3s infinite;animation-delay:.7s}
@keyframes lightFlicker{
0%,2%,5%,8%,100%{opacity:1;filter:none}
3%{opacity:.25;filter:none}
4%{opacity:.85;filter:none}
72%{opacity:1}
73%{opacity:.15}
74%{opacity:.92}
75%{opacity:1}
}
/* light spill halos */
.o-light-halo{
position:absolute;height:30px;width:120px;z-index:5;top:14px;
background:radial-gradient(ellipse at 50% 0%, rgba(255,248,200,.5) 0%, rgba(255,248,200,.18) 40%, transparent 70%);
pointer-events:none;
}
.o-light-halo.h1{left:9%}
.o-light-halo.h2{left:53%;animation:lightFlicker 5.3s infinite;animation-delay:.7s}
/* water stain on one ceiling tile */
.o-stain{
position:absolute;top:18px;left:35%;width:28px;height:14px;z-index:7;
background:
radial-gradient(ellipse at 40% 50%, rgba(180,130,80,.5) 0%, rgba(180,130,80,.3) 40%, transparent 70%);
pointer-events:none;
}
/* ======== FLOOR (linoleum tile w/ perspective + furniture shadow strip) ======== */
.o-floor{
position:absolute;left:0;right:0;bottom:0;height:18%;z-index:2;
background:
/* perspective receding lines */
linear-gradient(0deg, transparent 50%, rgba(0,0,0,.18) 50%, transparent 50.5%) 0 60%/100% 12px no-repeat,
linear-gradient(0deg, transparent 50%, rgba(0,0,0,.12) 50%, transparent 50.5%) 0 30%/100% 12px no-repeat,
/* the tile checker (subtle 2-tone) */
repeating-linear-gradient(90deg,
#6a5e48 0 32px,
#7a6e58 32px 64px
);
}
/* darker shadow band right against the back wall (where floor meets wall) */
.o-floor::before{
content:"";position:absolute;left:0;right:0;top:0;height:6px;
background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 100%);
}
/* a scuff mark */
.o-floor::after{
content:"";position:absolute;left:34%;top:50%;width:14px;height:3px;
background:rgba(0,0,0,.3);border-radius:50%;transform:rotate(-12deg);
}
/* ======== CUBICLE WALLS (3-tone with padded-fabric texture) ======== */
.o-cube{
position:absolute;bottom:18%;z-index:3;
background:
/* texture — diagonal hatch */
repeating-linear-gradient(45deg,
rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
repeating-linear-gradient(135deg,
rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
/* base shading */
linear-gradient(180deg,
#e0c890 0%,
#c8a85e 60%,
#a08838 100%
);
border-left:1px solid #5a4818;
border-right:1px solid #5a4818;
box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);
}
/* dark plastic top trim */
.o-cube::before{
content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:4px;
background:linear-gradient(180deg, #5a4818 0%, #2a2010 100%);
border-top:1px solid #1a1408;
box-shadow:0 -1px 0 #d8b878;
}
/* desk surface attached to bottom of cubicle */
.o-desk{
position:absolute;bottom:18%;z-index:4;height:14px;
background:
/* wood grain — horizontal streaks in 4 tones */
repeating-linear-gradient(0deg,
#6a4828 0 2px,
#7a5838 2px 3px,
#8a6848 3px 5px,
#6a4828 5px 6px,
#5a3818 6px 7px,
#7a5838 7px 10px
);
border-top:1px solid #d8a868; /* lit top edge */
border-bottom:1px solid #3a2010; /* underside shadow */
box-shadow:0 4px 6px -2px rgba(0,0,0,.4);
}
/* front lip highlight (where overhead light hits) */
.o-desk::before{
content:"";position:absolute;left:0;right:0;top:1px;height:1px;background:rgba(255,255,255,.25);
}
/* cable run along the inside-back edge */
.o-desk::after{
content:"";position:absolute;left:6px;right:6px;top:2px;height:1px;background:#1a1a1a;
border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.2);
}
/* ======== PINNED THINGS ON CUBICLE WALLS ======== */
.o-pin-note{position:absolute;z-index:4}
.o-pin-note.postit{width:9px;height:9px;background:#ffe14a;border:1px solid #aa9800;transform:rotate(-4deg);box-shadow:1px 1px 0 rgba(0,0,0,.2)}
.o-pin-note.postit::before{content:"";position:absolute;inset:1px 1px 4px 1px;background:repeating-linear-gradient(0deg,transparent 0 1px,rgba(0,0,0,.25) 1px 2px)}
.o-pin-note.postit.pink{background:#ff9ab8;border-color:#a04068;transform:rotate(6deg)}
.o-pin-note.memo{
width:14px;height:18px;background:#fff;border:1px solid #aaa;transform:rotate(2deg);
box-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.o-pin-note.memo::before{
content:"";position:absolute;inset:2px 2px 4px 2px;
background:repeating-linear-gradient(0deg, #888 0 1px, transparent 1px 3px);
}
.o-pin-note.review{
width:11px;height:14px;background:#fff;border:1px solid #a00;transform:rotate(-5deg);
box-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.o-pin-note.review::before{
content:"";position:absolute;inset:2px;
background:repeating-linear-gradient(0deg, #a00 0 1px, transparent 1px 3px);
}
/* pushpin */
.o-pin-note::after{
content:"";position:absolute;left:50%;top:0;width:2px;height:2px;background:#a00;
border-radius:50%;transform:translateX(-50%);box-shadow:0 1px 0 #500;
}
/* child's rainbow drawing */
.o-pin-draw{
position:absolute;z-index:4;width:18px;height:14px;background:#fff8e8;
border:1px solid #aaa;transform:rotate(-2deg);box-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.o-pin-draw::before{
content:"";position:absolute;left:1px;top:2px;width:16px;height:6px;
background:
linear-gradient(180deg,
#ff2bd6 0 16%,
#ff7a1e 16% 32%,
#ffe14a 32% 48%,
#ff6b1f 48% 64%,
#00f0ff 64% 80%,
#6a3a8a 80% 100%
);
border-radius:8px 8px 0 0;
}
.o-pin-draw::after{
content:"";position:absolute;left:4px;bottom:1px;width:2px;height:3px;background:#000;
box-shadow:6px 0 0 #000;
}
/* ======== CRT MONITORS ======== */
.o-crt{
position:absolute;width:46px;height:38px;z-index:6;
}
.o-crt .body{
position:absolute;inset:0;
background:
/* highlight on top */
linear-gradient(180deg,
#f0e8d0 0%,
#e0d4b0 18%,
#c8b890 50%,
#a89868 90%,
#886848 100%
);
border:1px solid #2a2418;
border-radius:2px 2px 1px 1px;
box-shadow:
inset 1px 1px 0 #fff8e8,
inset -1px -1px 0 #886848;
}
/* side ventilation dots */
.o-crt .body::before{
content:"";position:absolute;right:2px;top:6px;width:1px;height:1px;background:#3a2418;
box-shadow:
0 3px 0 #3a2418,
0 6px 0 #3a2418,
0 9px 0 #3a2418,
0 12px 0 #3a2418;
}
/* brand badge */
.o-crt .body::after{
content:"";position:absolute;left:8px;bottom:2px;width:6px;height:2px;background:#5a4828;
}
/* the screen */
.o-crt .screen{
position:absolute;left:4px;top:3px;right:4px;bottom:8px;
background:#0044aa;
border:1px solid #1a1408;
overflow:hidden;
box-shadow:
inset 1px 1px 0 #002266,
inset -1px -1px 0 #1166dd;
}
/* scanlines that drift */
.o-crt .screen::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:repeating-linear-gradient(0deg,
rgba(0,0,0,.18) 0 1px,
transparent 1px 2px);
}
.o-crt .screen::after{
content:"";position:absolute;left:0;right:0;height:8px;
background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
animation:scanlineDrift 2.4s linear infinite;
}
@keyframes scanlineDrift{
from{top:-8px}
to{top:100%}
}
/* screen text — pixel font */
.o-crt .scr-text{
position:absolute;inset:2px;font-family:var(--pixel);font-size:4px;color:#fff;line-height:1.35;
letter-spacing:-.4px;z-index:1;
}
.o-crt .scr-text .bar{
background:#aaa;color:#000;padding:0 1px;font-size:4px;margin-bottom:1px;
display:inline-block;letter-spacing:0;
}
/* power LED */
.o-crt .led{
position:absolute;right:4px;bottom:2px;width:2px;height:2px;background:#ff6b1f;
border-radius:50%;
box-shadow:0 0 3px #ff6b1f;
animation:ledPulse 2s ease-in-out infinite;
}
@keyframes ledPulse{50%{opacity:.5}}
/* monitor base */
.o-crt .base{
position:absolute;left:14px;right:14px;bottom:-3px;height:4px;
background:linear-gradient(180deg, #b8a888 0%, #886848 100%);
border:1px solid #2a2418;border-radius:0 0 2px 2px;
}
/* blue glow spill on desk in front of monitor */
.o-crt-glow{
position:absolute;z-index:5;width:50px;height:8px;
background:radial-gradient(ellipse at 50% 0%, rgba(60,140,255,.35) 0%, transparent 70%);
pointer-events:none;
}
/* ======== OFFICE CHAIRS ======== */
.o-chair{
position:absolute;z-index:5;width:22px;height:30px;
}
/* mesh back */
.o-chair .back{
position:absolute;left:1px;top:0;width:20px;height:18px;
background:
repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.4) 2px 3px),
repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,.4) 2px 3px),
linear-gradient(180deg, #4a4a55 0%, #2a2a35 100%);
border:1px solid #1a1a25;border-radius:3px 3px 1px 1px;
}
/* headrest curve */
.o-chair .back::before{
content:"";position:absolute;left:2px;right:2px;top:-2px;height:3px;
background:#3a3a45;border:1px solid #1a1a25;border-radius:2px 2px 0 0;
}
/* seat cushion */
.o-chair .seat{
position:absolute;left:0;top:16px;width:22px;height:4px;
background:linear-gradient(180deg, #4a4a55 0%, #2a2a35 100%);
border:1px solid #1a1a25;border-radius:1px;
}
/* armrest visible */
.o-chair .arm{
position:absolute;left:-2px;top:16px;width:3px;height:5px;
background:#1a1a25;border:1px solid #000;
}
/* gas piston */
.o-chair .piston{
position:absolute;left:10px;top:20px;width:2px;height:6px;background:#666;
}
/* 5-star base + wheels */
.o-chair .base{
position:absolute;left:4px;top:26px;width:14px;height:2px;background:#222;
}
.o-chair .base::before, .o-chair .base::after{
content:"";position:absolute;width:3px;height:3px;background:#1a1a1a;
border-radius:50%;border:1px solid #000;top:1px;
}
.o-chair .base::before{left:-2px}
.o-chair .base::after{right:-2px}
/* ======== DESK OBJECTS ======== */
/* keyboard */
.o-keyboard{
position:absolute;z-index:7;width:22px;height:6px;
background:
/* keys */
repeating-linear-gradient(90deg,
#d8d0c0 0 2px,
#1a1408 2px 3px) 1px 1px/20px 2px no-repeat,
repeating-linear-gradient(90deg,
#d8d0c0 0 2px,
#1a1408 2px 3px) 1px 4px/20px 1px no-repeat,
/* base */
linear-gradient(180deg, #5a4828 0%, #3a2818 100%);
border:1px solid #1a1408;border-radius:1px;
}
/* mouse */
.o-mouse{
position:absolute;z-index:7;width:5px;height:7px;
background:linear-gradient(180deg, #d8d0c0 0%, #888070 100%);
border:1px solid #2a2418;border-radius:2px 2px 1px 1px;
}
.o-mouse::before{
content:"";position:absolute;left:1px;top:1px;right:1px;height:1px;background:#3a2418;
}
/* stapler — Swingline red */
.o-stapler{
position:absolute;z-index:7;width:8px;height:4px;
background:linear-gradient(180deg, #d92020 0%, #8a1010 100%);
border:1px solid #4a0808;border-radius:1px;
}
.o-stapler::before{
content:"";position:absolute;left:1px;top:-1px;right:1px;height:1px;background:#888;
}
/* paper stack */
.o-paper{
position:absolute;z-index:7;width:9px;height:5px;
background:#fff;
border:1px solid #888;
box-shadow:
1px -1px 0 #fff, 1px -1px 0 1px #888,
2px -2px 0 #fff, 2px -2px 0 1px #888;
}
/* pencil cup */
.o-cup{
position:absolute;z-index:7;width:5px;height:6px;
background:linear-gradient(180deg, #4a4a55 0%, #2a2a35 100%);
border:1px solid #1a1a25;border-radius:1px 1px 0 0;
}
.o-cup::before{
/* pens sticking out */
content:"";position:absolute;left:1px;top:-4px;width:1px;height:5px;background:#ffe14a;
box-shadow:1px -1px 0 #0044aa, 2px 0 0 #a00000;
}
/* framed photo */
.o-photo{
position:absolute;z-index:7;width:7px;height:6px;
background:linear-gradient(180deg, #d8a868 0%, #886038 100%);
border:1px solid #2a2418;
}
.o-photo::before{
content:"";position:absolute;inset:1px;
background:linear-gradient(180deg, #b0d0e8 0%, #80a0c8 70%, #5a8050 100%);
}
.o-photo::after{
content:"";position:absolute;left:2px;top:2px;width:2px;height:2px;background:#f0d8b0;border-radius:50%;
box-shadow:1px 0 0 #f0d8b0;
}
/* cold coffee mug — modern, with handle */
.o-mug{
position:absolute;z-index:7;width:7px;height:8px;
background:linear-gradient(90deg, #f0e8d0 0%, #c8b898 100%);
border:1px solid #2a2418;border-radius:1px 1px 2px 2px;
box-shadow:inset -1px 0 0 #886848;
}
/* coffee surface */
.o-mug::before{
content:"";position:absolute;left:1px;right:1px;top:1px;height:2px;background:#3a1a08;
box-shadow:inset 0 1px 0 #5a2a18;
}
/* handle */
.o-mug::after{
content:"";position:absolute;right:-3px;top:2px;width:3px;height:4px;
border:1px solid #2a2418;border-left:none;border-radius:0 2px 2px 0;
background:transparent;
}
/* steam — three curling puffs */
.o-steam{
position:absolute;z-index:7;width:3px;height:8px;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.6) 0%, transparent 70%);
border-radius:50%;
animation:steamRise 2.4s ease-out infinite;
pointer-events:none;
}
@keyframes steamRise{
0%{opacity:0;transform:translate(0,0) scale(.5)}
20%{opacity:.7}
50%{transform:translate(2px,-6px) scale(1)}
80%{opacity:.5}
100%{opacity:0;transform:translate(4px,-14px) scale(1.4)}
}
/* ======== WORKERS (SVG sprites — 64×100 viewBox, much more detailed) ======== */
.o-worker{position:absolute;z-index:6;width:38px;height:60px}
.o-worker svg{display:block;width:100%;height:100%;image-rendering:pixelated}
/* sleeper subtle breathing */
.o-worker.sleeper{animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-1px)}}
/* screamer trembles */
.o-worker.screamer{animation:tremble .12s steps(2,end) infinite}
@keyframes tremble{0%{transform:translate(0,0)}50%{transform:translate(1px,-1px)}}
/* ======== Z-Z-Z (cleaner italic with shadow) ======== */
.o-zzz{
position:absolute;z-index:8;font-family:Georgia,serif;font-style:italic;
font-weight:700;color:#f8f4d8;font-size:11px;
text-shadow:1px 1px 0 #2a2418, -1px 0 0 #2a2418, 0 -1px 0 #2a2418, 1px 0 0 #2a2418;
animation:zzzFloat 2.4s ease-in-out infinite;
pointer-events:none;
}
@keyframes zzzFloat{
0%{opacity:0;transform:translate(0,4px) rotate(-8deg)}
15%{opacity:1}
85%{opacity:1}
100%{opacity:0;transform:translate(4px,-12px) rotate(10deg)}
}
/* ======== SCREAM BUBBLE (comic-style jagged) ======== */
.o-scream{
position:absolute;z-index:8;
background:#fff;
border:1.5px solid #2a2418;
padding:3px 6px 2px;
font-family:Impact,Haettenschweiler,sans-serif;
font-size:11px;font-weight:900;color:#a00000;
letter-spacing:.05em;
box-shadow:1.5px 1.5px 0 #2a2418;
/* jagged starburst edge via clip-path */
clip-path:polygon(
0% 30%, 4% 14%, 14% 22%, 20% 6%, 32% 22%,
40% 0%, 52% 22%, 62% 6%, 70% 22%, 80% 4%,
88% 22%, 100% 14%, 96% 36%, 100% 50%, 96% 64%,
100% 80%, 88% 78%, 80% 96%, 70% 78%, 60% 100%,
50% 78%, 40% 100%, 30% 78%, 20% 96%, 12% 76%,
4% 90%, 6% 64%, 0% 50%
);
animation:screamPulse .25s steps(2,end) infinite;
pointer-events:none;
}
@keyframes screamPulse{
0%{transform:scale(1) rotate(-2deg)}
50%{transform:scale(1.08) rotate(2deg)}
}
/* sweat drops flicking off screamer */
.o-sweat{
position:absolute;z-index:8;width:2px;height:3px;
background:#7fc8ff;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
box-shadow:inset 0 1px 0 #b8dfff;
animation:sweatFlick 1.6s ease-out infinite;
pointer-events:none;
}
@keyframes sweatFlick{
0%{opacity:0;transform:translate(0,0) scale(.6)}
20%{opacity:1}
100%{opacity:0;transform:translate(6px,-10px) scale(1)}
}
/* ======== PRINTER ON FIRE ======== */
.o-printer-scene{
position:absolute;z-index:7;width:60px;height:80px;bottom:18%;right:1%;
}
.o-printer-scene svg.printer{
position:absolute;left:0;bottom:0;width:100%;height:50px;
image-rendering:pixelated;
}
/* the flame layers, stacked */
.o-flames{
position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
width:32px;height:42px;z-index:3;
filter:drop-shadow(0 0 6px rgba(255,120,0,.7));
}
.o-flames svg{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated}
.o-flames .flame-1{animation:flame1 .42s ease-in-out infinite alternate}
.o-flames .flame-2{animation:flame2 .37s ease-in-out infinite alternate;animation-delay:-.1s}
.o-flames .flame-3{animation:flame3 .51s ease-in-out infinite alternate;animation-delay:-.2s}
@keyframes flame1{
0%{transform:scaleY(1) translateX(0)}
100%{transform:scaleY(1.15) translateX(1px)}
}
@keyframes flame2{
0%{transform:scaleY(.95) translateX(0)}
100%{transform:scaleY(1.1) translateX(-1px)}
}
@keyframes flame3{
0%{transform:scaleY(.9) translateX(1px)}
100%{transform:scaleY(1.05) translateX(-1px)}
}
/* embers */
.o-ember{
position:absolute;width:1.5px;height:1.5px;background:#ffe14a;border-radius:50%;
box-shadow:0 0 3px #ff7a1e;
animation:emberRise 2.2s ease-out infinite;
pointer-events:none;
}
@keyframes emberRise{
0%{opacity:0;transform:translate(0,0) scale(1)}
10%{opacity:1}
100%{opacity:0;transform:translate(-8px,-44px) scale(.4)}
}
/* smoke puffs */
.o-smoke{
position:absolute;width:10px;height:10px;border-radius:50%;
background:radial-gradient(circle at 35% 35%, rgba(140,130,120,.7) 0%, rgba(60,55,50,.4) 50%, transparent 80%);
animation:smokeDrift 3s ease-out infinite;
pointer-events:none;
}
@keyframes smokeDrift{
0%{opacity:0;transform:translate(0,0) scale(.4)}
20%{opacity:.85}
100%{opacity:0;transform:translate(-12px,-46px) scale(2.2)}
}
/* fire-light spill on the floor */
.o-fire-glow{
position:absolute;z-index:2;width:100px;height:14px;
bottom:14%;right:-10px;
background:radial-gradient(ellipse at 70% 0%, rgba(255,140,30,.55) 0%, rgba(255,80,0,.2) 40%, transparent 70%);
animation:fireGlowFlicker .3s steps(2,end) infinite alternate;
pointer-events:none;
}
@keyframes fireGlowFlicker{
0%{opacity:.9}
100%{opacity:1;transform:scaleY(1.1)}
}
/* soot scorch on the wall behind printer */
.o-soot{
position:absolute;z-index:3;right:2px;top:22%;width:60px;height:32px;
background:radial-gradient(ellipse at 60% 100%, rgba(20,15,10,.7) 0%, rgba(20,15,10,.35) 30%, transparent 65%);
pointer-events:none;
}
/* ======== DUST MOTES (drifting particles) ======== */
.o-mote{
position:absolute;z-index:9;width:1.5px;height:1.5px;background:rgba(255,250,220,.6);
border-radius:50%;animation:moteDrift 14s linear infinite;pointer-events:none;
}
@keyframes moteDrift{
0% {transform:translate(0,0)}
25% {transform:translate(20px,-6px)}
50% {transform:translate(38px,2px)}
75% {transform:translate(58px,-8px)}
100%{transform:translate(80px,-2px)}
}
/* ======== HUD lower-third ======== */
.o-hud{
position:absolute;left:0;right:0;bottom:0;z-index:30;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.85) 100%);
color:#ff6b1f;font-family:var(--crt);font-size:11px;
padding:6px 10px 4px;display:flex;justify-content:space-between;align-items:center;gap:10px;
text-shadow:0 0 4px rgba(255,107,31,.5);letter-spacing:.06em;
border-top:1px solid rgba(255,107,31,.3);
}
.o-hud .red{color:#ff5a3a;text-shadow:0 0 4px rgba(255,90,58,.5);animation:blink 1.1s steps(2,end) infinite}
.o-hud .lbl{color:#888;font-size:9px;font-family:var(--pixel);letter-spacing:.1em}
.o-hud b{color:#fff;font-weight:400}
/* ============== END HERO OFFICE SCENE ============== */
.hero-body{padding:14px 16px 16px;font-family:var(--ms);font-size:13px;line-height:1.55;color:var(--bar);background:var(--paper)}
.hero-body h3{
font-family:var(--cut);font-size:17px;margin-bottom:3px;letter-spacing:.03em;
text-transform:uppercase;color:var(--bar);
background:var(--riso-acid);display:inline-block;padding:2px 9px;
transform:rotate(-1.5deg);box-shadow:3px 3px 0 var(--bar);
}
.hero-body .sub-id{
font-family:var(--type);font-size:10px;color:var(--paper);letter-spacing:.14em;
margin:12px 0 12px;text-transform:uppercase;
background:var(--bar);display:inline-block;padding:3px 8px;
}
.hero-body .roles{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.hero-body .roles b{
background:var(--bar);color:var(--paper);font-family:var(--cut);font-size:11px;
padding:3px 8px;font-weight:400;text-transform:uppercase;letter-spacing:.06em;
}
.hero-body .roles b:nth-child(2n){background:var(--riso-pink);color:var(--bar);transform:rotate(2deg)}
.hero-body .roles b:nth-child(3n){background:var(--riso-orange);color:var(--bar);transform:rotate(-2deg)}
.hero-body .roles b:nth-child(4n){background:var(--riso-purple);color:var(--paper)}
.hero-body p{margin-bottom:9px}
.hero-body p em{font-style:normal;background:var(--riso-yellow);padding:0 3px;color:var(--bar)}
.hero-body .creds{
font-family:var(--type);font-size:11px;
background:var(--bar);color:var(--paper);padding:9px 11px;display:block;margin-top:10px;
line-height:1.7;border:2.5px solid var(--bar);
box-shadow:4px 4px 0 var(--riso-pink);
}
.hero-body .creds .k{color:var(--riso-orange);text-transform:uppercase;letter-spacing:.1em;font-size:9px}
/* =========================================================
SMALL SCATTERED WINDOWS
========================================================= */
/* horses → DJ booth scene */
.w-horses{top:7%;left:7%;width:17%;z-index:25;transform:rotate(-1.2deg)}
/* ======== DJ BOOTH SCENE — modern indie pixel-art club interior ======== */
.dj-booth{
padding:0;position:relative;height:220px;overflow:hidden;
border:2px inset var(--chrome);
background:
/* haze near the floor */
radial-gradient(ellipse 80% 30% at 50% 100%, rgba(255,43,214,.25) 0%, transparent 70%),
/* ambient stage lighting */
radial-gradient(ellipse 100% 60% at 50% 30%, rgba(255,43,214,.18) 0%, transparent 60%),
/* base dark club gradient */
linear-gradient(180deg, #0a0218 0%, #1a0a3a 40%, #2a0a55 75%, #3a1066 100%);
image-rendering:pixelated;
}
/* vignette + grain overlay */
.dj-booth::after{
content:"";position:absolute;inset:0;z-index:50;pointer-events:none;
background:
radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,.4) 100%);
}
/* ======== BACK WALL — brick texture with neon sign ======== */
.dj-wall{
position:absolute;left:0;right:0;top:0;height:50%;z-index:1;
background:
/* brick mortar lines */
repeating-linear-gradient(0deg,
transparent 0 9px,
rgba(0,0,0,.4) 9px 10px),
repeating-linear-gradient(90deg,
transparent 0 18px,
rgba(0,0,0,.4) 18px 19px),
/* brick offset rows */
linear-gradient(180deg,
#2a1818 0%,
#3a1818 50%,
#1a0808 100%);
}
/* offset alternating rows (subtle) */
.dj-wall::before{
content:"";position:absolute;inset:0;
background:
repeating-linear-gradient(90deg,
transparent 0 9px,
rgba(0,0,0,.2) 9px 10px,
transparent 10px 19px);
background-position:0 9px;
background-size:19px 18px;
opacity:.5;
}
/* ======== NEON SIGN — "DJ ADVENT" on back wall ======== */
.dj-neon{
position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2;
font-family:var(--pixel);font-size:14px;font-weight:400;letter-spacing:.12em;
color:#fff;
text-shadow:
0 0 3px #ff2bd6,
0 0 6px #ff2bd6,
0 0 10px #ff2bd6,
0 0 18px #ff00a0;
animation:neonFlicker 4s infinite;
}
@keyframes neonFlicker{
0%,5%,12%,100%{opacity:1}
6%{opacity:.4}
8%{opacity:.95}
52%{opacity:1}
53%{opacity:.5}
54%{opacity:1}
}
/* small star burst neon next to text */
.dj-neon::before, .dj-neon::after{
content:"★";color:#fff;font-size:10px;margin:0 4px;
text-shadow:
0 0 3px #00f0ff,
0 0 6px #00f0ff,
0 0 12px #00f0ff;
}
/* ======== LIGHT CONES (overhead spotlights) ======== */
.dj-cone{
position:absolute;top:0;width:60px;height:90px;z-index:3;
background:linear-gradient(180deg,
rgba(255,225,74,.4) 0%,
rgba(255,225,74,.18) 60%,
transparent 100%);
clip-path:polygon(40% 0, 60% 0, 95% 100%, 5% 100%);
pointer-events:none;
mix-blend-mode:screen;
}
.dj-cone.c1{left:5%;animation:coneSwing 3.2s ease-in-out infinite alternate}
.dj-cone.c2{right:5%;animation:coneSwing 3.4s ease-in-out infinite alternate;animation-delay:.5s;
background:linear-gradient(180deg,
rgba(0,240,255,.4) 0%,
rgba(0,240,255,.18) 60%,
transparent 100%);
}
.dj-cone.c3{left:50%;transform:translateX(-50%);animation:coneSwing 2.6s ease-in-out infinite alternate;animation-delay:.8s;
background:linear-gradient(180deg,
rgba(255,43,214,.4) 0%,
rgba(255,43,214,.2) 60%,
transparent 100%);
}
@keyframes coneSwing{
0%{transform:rotate(-6deg);transform-origin:50% 0}
100%{transform:rotate(6deg);transform-origin:50% 0}
}
.dj-cone.c3{animation:coneSwingCenter 2.6s ease-in-out infinite alternate;animation-delay:.8s}
@keyframes coneSwingCenter{
0%{transform:translateX(-50%) rotate(-4deg);transform-origin:50% 0}
100%{transform:translateX(-50%) rotate(4deg);transform-origin:50% 0}
}
/* ======== LASERS ======== */
.dj-laser{
position:absolute;top:8px;width:3px;height:110px;z-index:4;
background:linear-gradient(180deg, transparent 0%, #ff2bd6 30%, #ff2bd6 70%, transparent 100%);
box-shadow:0 0 6px #ff2bd6, 0 0 12px #ff2bd6;
pointer-events:none;
transform-origin:50% 0;
animation:laserSweep 2.8s ease-in-out infinite alternate;
mix-blend-mode:screen;
}
.dj-laser.l1{left:20%}
.dj-laser.l2{left:50%;background:linear-gradient(180deg, transparent 0%, #00f0ff 30%, #00f0ff 70%, transparent 100%);box-shadow:0 0 6px #00f0ff, 0 0 12px #00f0ff;animation-delay:.4s}
.dj-laser.l3{right:20%;background:linear-gradient(180deg, transparent 0%, #ffe14a 30%, #ffe14a 70%, transparent 100%);box-shadow:0 0 6px #ffe14a, 0 0 12px #ffe14a;animation-delay:.9s}
@keyframes laserSweep{
0%{transform:rotate(-25deg)}
100%{transform:rotate(25deg)}
}
/* ======== STROBE FLASH (occasional full-scene white blast) ======== */
.dj-strobe{
position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none;
animation:dStrobe 8s steps(1,end) infinite;
}
@keyframes dStrobe{
0%, 96% {opacity:0}
97%{opacity:.4}
98%{opacity:0}
99%{opacity:.5}
100%{opacity:0}
}
/* ======== STAGE FLOOR — checker pattern with reflection ======== */
.dj-floor{
position:absolute;left:0;right:0;bottom:50px;height:30px;z-index:2;
background:
/* dark with magenta ambient */
linear-gradient(180deg, #1a0a2a 0%, #2a0a3a 100%),
/* checker */
repeating-conic-gradient(#1a0a2a 0 25%, #2a1a3a 25% 50%) 0 0/24px 24px;
background-blend-mode:normal;
}
/* edge glow on floor where lights hit */
.dj-floor::before{
content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,
transparent, #ff2bd6, #00f0ff, #ffe14a, transparent);
box-shadow:0 0 4px #ff2bd6;
}
/* ======== SPEAKERS flanking the booth ======== */
.dj-speaker{
position:absolute;bottom:50px;width:28px;height:60px;z-index:5;
background:
linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
border:2px solid #000;border-radius:2px;
box-shadow:inset 0 0 0 1px #444;
}
.dj-speaker.left{left:-2px;animation:speakerThump .35s steps(2,end) infinite}
.dj-speaker.right{right:-2px;animation:speakerThump .35s steps(2,end) infinite;animation-delay:.18s}
@keyframes speakerThump{0%{transform:scale(1)}50%{transform:scale(1.04)}}
/* big speaker cone */
.dj-speaker::before{
content:"";position:absolute;left:50%;top:6px;width:18px;height:18px;
transform:translateX(-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%, #5a5a5a 0%, #1a1a1a 60%, #000 100%);
border:1.5px solid #000;
box-shadow:0 0 8px rgba(255,43,214,.4);
}
/* small tweeter */
.dj-speaker::after{
content:"";position:absolute;left:50%;bottom:8px;width:8px;height:8px;
transform:translateX(-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%, #4a4a4a 0%, #1a1a1a 80%);
border:1px solid #000;
}
/* fog/haze near the floor */
.dj-fog{
position:absolute;bottom:30px;left:-20px;right:-20px;height:50px;z-index:6;pointer-events:none;
background:radial-gradient(ellipse at 30% 80%, rgba(255,43,214,.18) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(0,240,255,.15) 0%, transparent 60%);
animation:fogDrift 8s ease-in-out infinite alternate;
mix-blend-mode:screen;
}
@keyframes fogDrift{
0%{transform:translateX(0)}
100%{transform:translateX(10px)}
}
/* DJ figures — keep size + animation, add glow rim */
.dj-fig{position:absolute;bottom:80px;width:88px;height:108px;z-index:10;animation:djBob .55s ease-in-out infinite alternate}
.dj-fig.left{left:8px;filter:drop-shadow(2px 0 0 rgba(255,43,214,.5))}
.dj-fig.right{right:8px;animation-delay:.27s;filter:drop-shadow(-2px 0 0 rgba(0,240,255,.5))}
@keyframes djBob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
/* CROWD DANCERS — silhouettes with neon rim */
.dancer{
position:absolute;width:24px;height:42px;z-index:9;
image-rendering:pixelated;
}
.dancer.d1{left:36%;bottom:96px;animation:danceBounce .42s ease-in-out infinite alternate}
.dancer.d2{left:46%;bottom:104px;animation:danceSway .58s ease-in-out infinite alternate;animation-delay:.1s}
.dancer.d3{left:58%;bottom:96px;animation:danceJump .68s ease-in-out infinite alternate;animation-delay:.2s}
@keyframes danceBounce{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes danceSway{
0% { transform:translateY(0) rotate(-8deg) }
100% { transform:translateY(-2px) rotate(8deg) }
}
@keyframes danceJump{
0% { transform:translateY(0) }
50% { transform:translateY(-7px) }
100% { transform:translateY(-1px) rotate(3deg) }
}
.dancer svg{display:block;width:100%;height:100%;filter:drop-shadow(1px 0 0 rgba(255,43,214,.6)) drop-shadow(-1px 0 0 rgba(0,240,255,.6))}
/* TURNTABLE RIG — pro mixer detail */
.dj-rig{
position:absolute;left:6px;right:6px;bottom:6px;height:42px;z-index:8;
background:
linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
border:2px solid #000;border-radius:3px;
display:flex;align-items:center;justify-content:space-around;
box-shadow:
inset 0 1px 0 #5a5a5a,
inset 0 -2px 0 #000,
0 2px 0 #000;
}
/* mixer brand strip */
.dj-rig::before{
content:"PIONEER · DJM-S11";position:absolute;left:50%;top:1px;transform:translateX(-50%);
font-family:var(--pixel);font-size:5px;color:#ff2bd6;letter-spacing:.08em;
text-shadow:0 0 2px #ff2bd6;
}
.platter{
width:36px;height:36px;border-radius:50%;
background:
/* vinyl grooves */
repeating-radial-gradient(circle, #2a2a2a 0 1px, #0a0a0a 1px 2px),
radial-gradient(circle, #d92020 0 22%, #000 24%);
position:relative;animation:spin 1.4s linear infinite;
box-shadow:
0 0 0 2px #000,
0 0 0 3px #444,
inset 0 0 4px rgba(255,255,255,.06);
}
@keyframes spin{to{transform:rotate(360deg)}}
.platter::before{
content:"";position:absolute;top:3px;left:50%;width:3px;height:3px;
background:#fff;border-radius:50%;transform:translateX(-50%);
box-shadow:0 0 3px var(--acid);
}
/* tonearm */
.platter::after{
content:"";position:absolute;top:-2px;right:-3px;width:24px;height:2px;
background:linear-gradient(90deg, #aaa 0%, #555 70%, #888 100%);
transform-origin:right center;transform:rotate(22deg);
border-radius:1px;
box-shadow:0 1px 0 #000;
}
/* center mixer section with knobs */
.dj-mix-center{
width:46px;height:36px;background:linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
border:1px solid #000;border-radius:2px;
position:relative;
display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:3px 0;
}
/* row of EQ knobs */
.dj-mix-center .knobs{
display:flex;gap:3px;
}
.dj-mix-center .knobs i{
width:5px;height:5px;border-radius:50%;
background:radial-gradient(circle at 35% 35%, #aaa 0%, #555 70%, #1a1a1a 100%);
border:1px solid #000;position:relative;
}
.dj-mix-center .knobs i::after{
content:"";position:absolute;left:50%;top:1px;width:1px;height:2px;background:#ffe14a;transform:translateX(-50%);
}
/* crossfader strip */
.crossfader{
width:36px;height:6px;background:#000;border:1px inset #444;position:relative;border-radius:1px;
}
.crossfader::after{
content:"";position:absolute;top:-3px;width:8px;height:12px;
background:linear-gradient(180deg, #aaa 0%, #555 100%);
border:1px solid #000;border-radius:1px;
box-shadow:inset 1px 1px 0 #ddd, inset -1px -1px 0 #222;
left:14px;animation:fader 2.4s ease-in-out infinite alternate;
}
/* translateX instead of `left` so the knob animates on the compositor (no
layout); resting spot under reduced-motion stays left:14px. NOTE: the
other width/height bar animations (fill, gpuFill, slopFill, eqStandby,
eqJump) are left alone deliberately — their gradient/stripe backgrounds
size to the element box, so converting to scale/clip-path visibly
distorts them; they are small, layout-contained boxes, cheap to reflow. */
@keyframes fader{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
.w-horses .label{
text-align:center;font-family:var(--pixel);font-size:9px;padding:6px 0 4px;background:var(--chrome);
color:#000;letter-spacing:.08em;
}
.w-horses .label .red{color:var(--siren);animation:blink .8s steps(2,end) infinite}
/* "REALITY AWAITS" → "CAPITALISM DETECTED" */
.w-warn{top:47%;left:13%;width:15%;z-index:30;transform:rotate(1.6deg)}
.w-warn .win__bar{background:linear-gradient(90deg,#5a0000,#c20000,#7a0000)}
.warn-body{
padding:0;text-align:center;position:relative;overflow:hidden;
background:
/* CRT scanlines */
repeating-linear-gradient(0deg,
transparent 0 2px,
rgba(0,0,0,.35) 2px 3px),
/* slow radial pulse */
radial-gradient(ellipse at 50% 30%, #4a0808 0%, #1a0202 70%);
}
/* hazard stripe border top + bottom */
.warn-body::before{
content:"";position:absolute;left:0;right:0;top:0;height:6px;
background:repeating-linear-gradient(45deg,
#ffe14a 0 8px,
#1a1408 8px 16px);
box-shadow:inset 0 -1px 0 #000;
}
.warn-body .big{
font-family:var(--pixel);font-size:18px;color:var(--siren);line-height:1.15;
text-shadow:
0 0 4px rgba(255,90,58,.8),
2px 2px 0 #000;
letter-spacing:.04em;padding:14px 4px 2px;
animation:blink 0.8s steps(2,end) infinite;
position:relative;z-index:2;
}
.warn-body .big2{
font-family:var(--pixel);font-size:24px;color:var(--gold);line-height:1.1;
text-shadow:
0 0 5px rgba(255,225,74,.6),
2px 2px 0 #000;
letter-spacing:.04em;padding:0 4px 8px;
position:relative;z-index:2;
}
.warn-body .small{
font-family:var(--crt);font-size:15px;color:#fff;padding:4px 8px 10px;line-height:1.2;
text-shadow:1px 1px 0 #000;position:relative;z-index:2;
}
.warn-body .yn{
display:flex;gap:6px;padding:8px;
background:linear-gradient(180deg, #c8c4b8 0%, #aaa498 100%);
border-top:1px solid #2a2418;
justify-content:center;flex-wrap:wrap;
position:relative;
}
.warn-body .yn::before{
content:"";position:absolute;left:0;right:0;top:-1px;height:6px;
background:repeating-linear-gradient(45deg,
#ffe14a 0 8px,
#1a1408 8px 16px);
z-index:3;
}
.yn button{
padding:4px 12px;font-family:var(--ms);font-size:11px;color:#1a1408;
background:linear-gradient(180deg, #f8f6ee 0%, #d8d4c8 50%, #b8b4a8 100%);
border:1px solid #2a2418;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.7),
inset -1px -1px 0 rgba(0,0,0,.25),
1px 1px 0 rgba(0,0,0,.4);
text-shadow:0 1px 0 rgba(255,255,255,.4);
margin-top:4px;
}
.yn button:active{
background:linear-gradient(180deg, #b8b4a8 0%, #d8d4c8 50%, #f8f6ee 100%);
box-shadow:inset -1px -1px 0 rgba(255,255,255,.7), inset 1px 1px 0 rgba(0,0,0,.25);
transform:translate(1px,1px);
}
/* pre-order panel → "BUY NOTHING" */
.w-buy{top:23%;left:13%;width:16%;z-index:26;transform:rotate(-3deg)}
.w-buy .win__bar{background:linear-gradient(90deg,#5a004a,#c200a0,#7a0066)}
.buy-body{
color:#fff;padding:10px;font-family:var(--ms);font-size:11px;text-align:center;
position:relative;overflow:hidden;height:220px;
border:2px inset var(--chrome);
image-rendering:pixelated;
}
/* multi-layer sunset sky */
.buy-body .scene{
position:absolute;inset:0;
background:
/* dithered band breaks (suggested via slight bands) */
linear-gradient(180deg,
#1a0a3a 0%,
#3a0a5a 8%,
#6a1a78 18%,
#c2208a 32%,
#ff5a4a 48%,
#ff9a2a 62%,
#ffd060 76%,
#ffe8a0 88%,
#ff6a02 100%);
}
/* SUN — pixel disc */
.buy-body .scene::after{
content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
width:46px;height:46px;border-radius:50%;
background:
radial-gradient(circle at 38% 38%, #fff5d0 0%, #ffe14a 25%, #ff7a1e 70%, #c84a02 100%);
box-shadow:
0 0 24px rgba(255,225,74,.6),
0 0 48px rgba(255,122,30,.4);
}
/* horizon stripes — heat shimmer on sun */
.buy-body .horizon-stripes{
position:absolute;left:35%;right:35%;top:42%;height:14px;z-index:2;
background:
repeating-linear-gradient(0deg,
transparent 0 2px,
rgba(255,255,200,.5) 2px 3px);
pointer-events:none;
}
/* STARS in the upper sky */
.buy-body .stars{
position:absolute;left:0;right:0;top:0;height:25%;z-index:2;pointer-events:none;
background:
radial-gradient(circle 1px at 10% 30%, #fff 0 100%, transparent 0),
radial-gradient(circle 1px at 26% 60%, #fff 0 100%, transparent 0),
radial-gradient(circle 1px at 44% 25%, #fff 0 100%, transparent 0),
radial-gradient(circle 1px at 62% 50%, #fff 0 100%, transparent 0),
radial-gradient(circle 1px at 78% 35%, #fff 0 100%, transparent 0),
radial-gradient(circle 1px at 92% 65%, #fff 0 100%, transparent 0);
animation:twinkleStars 3s steps(2,end) infinite;
}
@keyframes twinkleStars{50%{opacity:.4}}
/* MOUNTAIN silhouette */
.buy-body .mountains{
position:absolute;left:0;right:0;bottom:60px;height:50px;z-index:3;
background:linear-gradient(180deg, #1a0a2a 0%, #2a0a3a 100%);
clip-path:polygon(
0% 100%, 0% 70%, 8% 55%, 14% 65%, 22% 40%, 30% 50%,
38% 30%, 46% 45%, 54% 25%, 62% 40%, 70% 35%, 78% 50%,
86% 30%, 94% 45%, 100% 38%, 100% 100%
);
}
/* rider silhouette — bike + person riding */
.buy-body .rider{
position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:4;
width:60px;height:34px;
}
.buy-body .rider svg{display:block;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
/* desert floor with perspective lines */
.buy-body .ground{
position:absolute;left:0;right:0;bottom:0;height:60px;z-index:3;
background:
/* perspective lines */
repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,0,0,.18) 6px 7px),
linear-gradient(180deg, #6a1a4a 0%, #2a0828 100%);
}
.buy-body .ground::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:#ff7a1e;box-shadow:0 0 4px #ff7a1e;
}
.buy-body .text{
position:relative;z-index:5;font-family:var(--pixel);font-size:18px;line-height:1.2;
text-shadow:2px 2px 0 #000, 0 0 6px rgba(255,90,40,.6);
padding:4px 6px;color:#fff;
letter-spacing:.05em;
}
.buy-body .text em{
color:#ffe14a;font-style:normal;display:block;font-size:26px;margin-top:4px;
text-shadow:2px 2px 0 #5a1010, 0 0 12px rgba(255,225,74,.6);
letter-spacing:.06em;
}
.buy-body .cta{
position:absolute;left:8px;right:8px;bottom:8px;z-index:6;
background:linear-gradient(180deg, #ffe14a 0%, #ff7a1e 50%, #c84a02 100%);
color:#1a0a02;font-family:var(--pixel);font-size:11px;padding:6px;
border:2px solid #1a0a02;
box-shadow:inset 1px 1px 0 rgba(255,255,255,.5), inset -1px -1px 0 rgba(0,0,0,.3), 2px 2px 0 #1a0a02;
text-shadow:0 1px 0 rgba(255,255,255,.3);
letter-spacing:.05em;
animation:wiggle .35s ease-in-out infinite alternate;
}
@keyframes wiggle{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
/* "AI HAS DECIDED" — paper collage */
.w-ai{top:62%;left:69%;width:21%;z-index:43;transform:rotate(1deg)}
.ai-body{
background:var(--paper);
padding:11px;font-family:var(--ms);font-size:12px;color:var(--bar);
}
.ai-body .head{
font-family:var(--cut);font-size:13px;text-transform:uppercase;letter-spacing:.03em;
background:var(--riso-pink);color:var(--bar);
padding:5px 9px;margin-bottom:9px;
transform:rotate(-1.5deg);box-shadow:3px 3px 0 var(--bar);
}
.ai-tokens{
font-family:var(--type);font-size:13px;line-height:1.7;color:var(--bar);
background:#fff;
padding:9px;
border:2.5px solid var(--bar);
min-height:62px;overflow:hidden;
}
.ai-tokens .tk{
background:var(--paper);
padding:1px 5px;margin-right:3px;
border:2px solid var(--bar);
animation:tkpop .8s ease-in 1;
display:inline-block;
}
.ai-tokens .tk.lit{ background:var(--riso-acid); }
@keyframes tkpop{
from{background:var(--riso-pink);color:var(--paper)}
to {background:var(--paper);color:var(--bar)}
}
.ai-bar{
margin-top:9px;height:14px;
background:var(--paper);
border:2.5px solid var(--bar);
position:relative;overflow:hidden;
}
.ai-bar i{
display:block;height:100%;
background:repeating-linear-gradient(45deg,
var(--riso-pink) 0 8px, var(--riso-orange) 8px 16px);
width:0%;animation:fill 6s ease-out infinite;
}
@keyframes fill{0%{width:0%}80%{width:97%}100%{width:97%}}
.ai-body .foot{
font-family:var(--type);font-size:11px;margin-top:9px;color:var(--bar);
}
.ai-body .foot b{background:var(--riso-yellow);padding:0 4px;color:var(--bar)}
/* mini "click here" window */
.w-click{top:64%;left:46%;width:18%;z-index:45;transform:rotate(-2deg)}
/* OFFICE WORKERS sidebar scene */
.w-workers{top:80%;left:2%;width:42%;z-index:28;transform:rotate(-.4deg)}
.w-workers .win__bar{background:linear-gradient(90deg,#3a2814,#7a5a30)}
/* ======== WORKERS SCENE — same indie pixel-art language as hero ======== */
.workers-scene{
height:220px;position:relative;overflow:hidden;
border:2.5px solid var(--bar);
background:#3a3220;
image-rendering:pixelated;
}
/* scene-wide vignette + warm tint */
.workers-scene::after{
content:"";position:absolute;inset:0;z-index:50;pointer-events:none;
background:
radial-gradient(ellipse at 50% 60%, transparent 60%, rgba(0,0,0,.25) 100%),
linear-gradient(180deg, rgba(255,240,200,.06) 0%, rgba(255,210,160,.03) 100%);
}
/* back wall */
.ws-wall{
position:absolute;left:0;right:0;top:0;height:42%;z-index:1;
background:
linear-gradient(180deg,
#b8a888 0%,
#c8b898 88%,
#6a5a40 89%,
#d8c8a0 90%,
#a89878 91%,
#b8a888 100%
);
}
.ws-wall::before{
content:"";position:absolute;inset:0;opacity:.18;
background:
repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.06) 2px 3px),
repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.04) 3px 4px);
}
/* random wall details — small framed thing + pinned papers */
.ws-wall-deco{
position:absolute;top:6px;z-index:2;
background:#fff;border:1px solid #5a4818;
box-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.ws-wall-deco.exit-sign{
width:20px;height:8px;background:#0a8a3a;border-color:#053a18;
color:#fff;font-family:var(--pixel);font-size:5px;text-align:center;line-height:8px;
letter-spacing:.05em;
}
.ws-wall-deco.fire-ext{
/* fire extinguisher icon */
width:8px;height:14px;background:#a00;border-color:#600;
}
.ws-wall-deco.fire-ext::before{
content:"";position:absolute;left:50%;top:-2px;width:2px;height:2px;background:#888;transform:translateX(-50%);
}
.ws-wall-deco.fire-ext::after{
content:"";position:absolute;left:1px;top:5px;right:1px;height:1px;background:#fff;
box-shadow:0 2px 0 #fff;
}
/* ceiling tile grid */
.ws-ceiling{
position:absolute;left:0;right:0;top:0;height:18%;z-index:6;
background:
repeating-linear-gradient(90deg, transparent 0 50px, rgba(0,0,0,.35) 50px 51px),
repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,0,0,.3) 22px 23px),
linear-gradient(180deg, #f8f4e8 0%, #e8e0c8 60%, #b8a888 100%);
}
.ws-ceiling::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
background:linear-gradient(180deg, #888 0%, #555 50%, #888 100%);
border-top:1px solid #2a2418;
}
/* fluorescent fixtures (4) */
.ws-light{
position:absolute;height:7px;background:#3a3220;border:1px solid #1a1408;z-index:7;top:5px;
box-shadow:inset 0 0 0 1px #5a4828;
}
.ws-light::before{
content:"";position:absolute;inset:1px;
background:repeating-linear-gradient(90deg,
#fff8c8 0 4px, #ffe88a 4px 7px, transparent 7px 9px,
#fff8c8 9px 13px, #ffe88a 13px 16px, transparent 16px 18px,
#fff8c8 18px 22px, #ffe88a 22px 25px, transparent 25px 27px,
#fff8c8 27px 31px, #ffe88a 31px 34px);
box-shadow:0 0 8px rgba(255,248,200,.9);
}
.ws-light.l1{left:6%;width:50px}
.ws-light.l2{left:30%;width:50px;animation:lightFlicker 5.1s infinite;animation-delay:.4s}
.ws-light.l3{left:54%;width:50px;animation:lightFlicker 3.7s infinite;animation-delay:1.1s}
.ws-light.l4{left:78%;width:50px}
/* halos */
.ws-halo{
position:absolute;height:24px;width:100px;z-index:5;top:12px;
background:radial-gradient(ellipse at 50% 0%, rgba(255,248,200,.5) 0%, rgba(255,248,200,.18) 40%, transparent 70%);
pointer-events:none;
}
.ws-halo.h1{left:3%}
.ws-halo.h2{left:27%;animation:lightFlicker 5.1s infinite;animation-delay:.4s}
.ws-halo.h3{left:51%;animation:lightFlicker 3.7s infinite;animation-delay:1.1s}
.ws-halo.h4{left:75%}
/* linoleum floor */
.ws-floor{
position:absolute;left:0;right:0;bottom:0;height:16%;z-index:2;
background:
linear-gradient(0deg, transparent 50%, rgba(0,0,0,.18) 50%, transparent 50.5%) 0 40%/100% 12px no-repeat,
repeating-linear-gradient(90deg,
#6a5e48 0 38px,
#7a6e58 38px 76px);
}
.ws-floor::before{
content:"";position:absolute;left:0;right:0;top:0;height:5px;
background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 100%);
}
/* cubicle dividers — taller, padded fabric */
.ws-divider{
position:absolute;bottom:16%;width:8px;z-index:3;height:48%;
background:
repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
linear-gradient(180deg,
#e0c890 0%,
#c8a85e 60%,
#a08838 100%);
border-left:1px solid #5a4818;
border-right:1px solid #5a4818;
}
.ws-divider::before{
content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:4px;
background:linear-gradient(180deg, #5a4818 0%, #2a2010 100%);
border-top:1px solid #1a1408;
box-shadow:0 -1px 0 #d8b878;
}
/* long shared desk counter — wood grain */
.ws-desk{
position:absolute;left:0;right:0;bottom:16%;height:14px;z-index:4;
background:
repeating-linear-gradient(0deg,
#6a4828 0 2px,
#7a5838 2px 3px,
#8a6848 3px 5px,
#6a4828 5px 6px,
#5a3818 6px 7px,
#7a5838 7px 10px);
border-top:1px solid #d8a868;
border-bottom:1px solid #3a2010;
box-shadow:0 4px 6px -2px rgba(0,0,0,.4);
}
.ws-desk::before{
content:"";position:absolute;left:0;right:0;top:1px;height:1px;background:rgba(255,255,255,.25);
}
/* ======== CRTS on desk (4 of them) ======== */
.ws-crt{
position:absolute;width:50px;height:38px;z-index:5;bottom:30%;
}
.ws-crt .body{
position:absolute;inset:0;
background:linear-gradient(180deg,
#f0e8d0 0%, #e0d4b0 18%, #c8b890 50%, #a89868 90%, #886848 100%);
border:1px solid #2a2418;
border-radius:2px 2px 1px 1px;
box-shadow:inset 1px 1px 0 #fff8e8, inset -1px -1px 0 #886848;
}
.ws-crt .body::before{
content:"";position:absolute;right:2px;top:6px;width:1px;height:1px;background:#3a2418;
box-shadow:0 3px 0 #3a2418, 0 6px 0 #3a2418, 0 9px 0 #3a2418, 0 12px 0 #3a2418;
}
.ws-crt .screen{
position:absolute;left:4px;top:3px;right:4px;bottom:8px;
background:#0044aa;
border:1px solid #1a1408;overflow:hidden;
box-shadow:inset 1px 1px 0 #002266, inset -1px -1px 0 #1166dd;
}
.ws-crt .screen::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:repeating-linear-gradient(0deg,
rgba(0,0,0,.18) 0 1px, transparent 1px 2px);
}
.ws-crt .screen::after{
content:"";position:absolute;left:0;right:0;height:8px;
background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
animation:scanlineDrift 3.2s linear infinite;
}
.ws-crt .scr-text{
position:absolute;inset:2px;font-family:var(--pixel);font-size:4.5px;color:#fff;line-height:1.4;
letter-spacing:-.4px;z-index:1;
}
.ws-crt .scr-text .bar{
background:#aaa;color:#000;padding:0 1px;font-size:4px;margin-bottom:1px;
display:inline-block;letter-spacing:0;
}
.ws-crt .scr-text .red{color:#ff5a3a}
.ws-crt .scr-text .err{color:#ff6b1f}
.ws-crt .led{
position:absolute;right:4px;bottom:2px;width:2px;height:2px;background:#ff6b1f;
border-radius:50%;box-shadow:0 0 3px #ff6b1f;animation:ledPulse 2s ease-in-out infinite;
}
.ws-crt .base{
position:absolute;left:14px;right:14px;bottom:-3px;height:4px;
background:linear-gradient(180deg, #b8a888 0%, #886848 100%);
border:1px solid #2a2418;border-radius:0 0 2px 2px;
}
/* sticky note stuck on bezel */
.ws-crt .postit{
position:absolute;width:8px;height:6px;background:#ffe14a;
border:1px solid #aa9800;transform:rotate(-6deg);box-shadow:1px 1px 0 rgba(0,0,0,.3);
z-index:6;
}
/* monitor blue glow on desk */
.ws-crt-glow{
position:absolute;z-index:4;width:60px;height:10px;
background:radial-gradient(ellipse at 50% 0%, rgba(60,140,255,.35) 0%, transparent 70%);
pointer-events:none;
}
/* ======== HIGH-BACK OFFICE CHAIRS (back view) ======== */
.ws-chair{
position:absolute;z-index:5;width:60px;height:88px;bottom:16%;
}
.ws-chair .back{
position:absolute;left:8px;top:0;width:44px;height:54px;
background:
repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.4) 3px 4px),
repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.35) 3px 4px),
linear-gradient(180deg, #4a4a55 0%, #2a2a35 100%);
border:1px solid #1a1a25;
border-radius:6px 6px 2px 2px;
box-shadow:inset 2px 2px 0 rgba(255,255,255,.04);
}
/* headrest cushion */
.ws-chair .back::before{
content:"";position:absolute;left:6px;right:6px;top:-3px;height:6px;
background:linear-gradient(180deg, #5a5a65 0%, #2a2a35 100%);
border:1px solid #1a1a25;border-radius:4px 4px 0 0;
}
/* lumbar curve highlight */
.ws-chair .back::after{
content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:rgba(0,0,0,.5);
box-shadow:0 4px 0 rgba(0,0,0,.4), 0 8px 0 rgba(0,0,0,.3);
}
/* seat (sticking out) */
.ws-chair .seat{
position:absolute;left:4px;top:52px;width:52px;height:8px;
background:linear-gradient(180deg, #4a4a55 0%, #2a2a35 100%);
border:1px solid #1a1a25;border-radius:2px;
}
/* armrests */
.ws-chair .arm{
position:absolute;top:48px;width:6px;height:10px;background:#1a1a25;
border:1px solid #000;border-radius:1px;
}
.ws-chair .arm.l{left:-2px}
.ws-chair .arm.r{right:-2px}
/* gas piston */
.ws-chair .piston{
position:absolute;left:28px;top:60px;width:4px;height:14px;
background:linear-gradient(90deg, #aaa 0%, #555 50%, #aaa 100%);
}
/* 5-star base */
.ws-chair .base{
position:absolute;left:8px;top:74px;width:44px;height:4px;background:#2a2a35;
border:1px solid #000;border-radius:2px;
box-shadow:0 2px 0 rgba(0,0,0,.3);
}
.ws-chair .wheel{
position:absolute;top:78px;width:6px;height:6px;background:#1a1a1a;
border:1px solid #000;border-radius:50%;
}
.ws-chair .wheel.l{left:2px}
.ws-chair .wheel.r{right:2px}
.ws-chair .wheel.c{left:50%;margin-left:-3px;top:80px}
/* ======== WORKERS (back view, sitting in chairs) ======== */
.ws-worker{
position:absolute;z-index:6;width:40px;height:46px;bottom:32%;
}
.ws-worker svg{display:block;width:100%;height:100%;image-rendering:pixelated}
.ws-worker.bang{animation:wsHeadBang .42s ease-in infinite}
@keyframes wsHeadBang{
0% { transform:translateY(0) }
35% { transform:translateY(7px) }
50% { transform:translateY(7px) }
100% { transform:translateY(0) }
}
.ws-worker.sigh{animation:wsSigh 2.4s ease-in-out infinite alternate}
@keyframes wsSigh{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
.ws-worker.type{animation:wsType .14s steps(2,end) infinite}
@keyframes wsType{from{transform:translateY(0)}to{transform:translateY(-1px)}}
/* ======== MODERN SPEECH BUBBLES ======== */
.ws-bubble{
position:absolute;z-index:8;
background:linear-gradient(180deg, #ffffff 0%, #f0e8d0 100%);
border:1.5px solid #2a2418;
padding:4px 7px;line-height:1.25;
font-family:var(--ms);font-size:10px;color:#1a1408;
box-shadow:2px 2px 0 #2a2418, 0 0 0 .5px #2a2418;
border-radius:6px;
max-width:140px;
}
.ws-bubble::before, .ws-bubble::after{
content:"";position:absolute;bottom:-6px;width:0;height:0;
border:6px solid transparent;
}
.ws-bubble::before{
border-top-color:#2a2418;left:12px;bottom:-7px;
}
.ws-bubble::after{
border-top-color:#f0e8d0;left:13px;bottom:-4px;border-width:5px;
}
.ws-bubble.right::before{left:auto;right:12px}
.ws-bubble.right::after{left:auto;right:13px}
.ws-bubble b{color:#a00000}
/* scream variant — yellow, jagged */
.ws-bubble.scream{
background:#ffe14a;
border-color:#1a1714;
color:#1a1714;
font-family:Impact,Haettenschweiler,sans-serif;font-weight:900;
letter-spacing:.03em;font-size:11px;line-height:1.15;
box-shadow:2px 2px 0 #1a1714;
border-radius:0;
/* generous padding keeps text inside the star's safe centre */
padding:22px 26px !important;
width:128px;text-align:center;
/* jagged starburst */
clip-path:polygon(
0% 30%, 6% 14%, 16% 22%, 22% 6%, 34% 22%,
42% 0%, 54% 22%, 64% 6%, 72% 22%, 82% 4%,
90% 22%, 100% 14%, 96% 36%, 100% 50%, 96% 64%,
100% 80%, 90% 78%, 82% 96%, 72% 78%, 62% 100%,
52% 78%, 42% 100%, 32% 78%, 22% 96%, 14% 76%,
6% 90%, 8% 64%, 0% 50%
);
animation:wsScreamPulse .25s steps(2,end) infinite;
}
.ws-bubble.scream::before, .ws-bubble.scream::after{display:none}
@keyframes wsScreamPulse{
0%{transform:scale(1) rotate(-1.5deg)}
50%{transform:scale(1.06) rotate(1.5deg)}
}
/* ======== IMPACT STAR ======== */
.ws-impact{
position:absolute;z-index:7;width:34px;height:34px;
animation:wsImpactPulse .42s ease-in-out infinite;
filter:drop-shadow(0 0 4px rgba(255,225,74,.6));
}
.ws-impact svg{display:block;width:100%;height:100%}
@keyframes wsImpactPulse{
0%,100%{transform:scale(.85) rotate(-3deg)}
50%{transform:scale(1.12) rotate(3deg)}
}
/* radiating spark lines */
.ws-spark{
position:absolute;z-index:7;width:1.5px;height:8px;background:#ffe14a;
box-shadow:0 0 3px #ff7a1e;
animation:wsSparkFly .42s ease-out infinite;
pointer-events:none;
transform-origin:50% 100%;
}
@keyframes wsSparkFly{
0%{opacity:0;transform:translate(0,0) scale(.5)}
20%{opacity:1}
100%{opacity:0;transform:translate(var(--sx,8px),var(--sy,-8px)) scale(1.2)}
}
/* ======== DESK CLUTTER ======== */
.ws-paper{
position:absolute;z-index:5;width:10px;height:4px;background:#fff;
border:1px solid #888;box-shadow:1px -1px 0 #fff,1px -1px 0 1px #888;
}
.ws-mug{
position:absolute;z-index:5;width:7px;height:8px;
background:linear-gradient(90deg, #f0e8d0 0%, #c8b898 100%);
border:1px solid #2a2418;border-radius:1px 1px 2px 2px;
box-shadow:inset -1px 0 0 #886848;
}
.ws-mug::before{
content:"";position:absolute;left:1px;right:1px;top:1px;height:2px;background:#3a1a08;
}
.ws-mug::after{
content:"";position:absolute;right:-3px;top:2px;width:3px;height:4px;
border:1px solid #2a2418;border-left:none;border-radius:0 2px 2px 0;
}
/* dust motes */
.ws-mote{
position:absolute;z-index:9;width:1.5px;height:1.5px;background:rgba(255,250,220,.6);
border-radius:50%;animation:moteDrift 18s linear infinite;pointer-events:none;
}
/* HUD lower-third */
.ws-hud{
position:absolute;left:0;right:0;bottom:0;z-index:30;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.9) 100%);
color:#ff6b1f;font-family:var(--crt);font-size:11px;
padding:6px 12px 4px;display:flex;justify-content:space-between;align-items:center;gap:12px;
text-shadow:0 0 4px rgba(255,107,31,.5);letter-spacing:.06em;
border-top:1px solid rgba(255,107,31,.3);
}
.ws-hud .red{color:#ff5a3a;text-shadow:0 0 4px rgba(255,90,58,.5);animation:blink 1.1s steps(2,end) infinite}
.ws-hud .lbl{color:#888;font-size:9px;font-family:var(--pixel);letter-spacing:.1em}
.ws-hud b{color:#fff;font-weight:400}
/* AI slop window */
.slop-body{
background:
/* scanlines */
repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.3) 2px 3px),
radial-gradient(ellipse at 50% 30%, #2a0028 0%, #0a0008 100%);
color:#ffeaa0;padding:10px;font-family:var(--ms);font-size:11px;line-height:1.4;
position:relative;
}
.slop-body .siren{
background:linear-gradient(180deg, #ff3030 0%, #c80000 50%, #7a0000 100%);
color:#fff;font-family:var(--pixel);font-size:11px;
padding:6px;margin-bottom:10px;text-align:center;
border:1px solid #4a0000;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.4),
inset -1px -1px 0 rgba(0,0,0,.4),
0 0 8px rgba(255,30,30,.5);
text-shadow:1px 1px 0 #000;
animation:blink .6s steps(2,end) infinite;letter-spacing:.05em;
}
/* ===== AI SLOP — visual "generating corrupted mush" redesign ===== */
.slop-gen{ margin:4px 0 8px; }
.slop-canvas{
position:relative;height:84px;border:2px solid #4a0030;
background:#1a0014;overflow:hidden;
display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);
box-shadow:inset 0 0 12px rgba(0,0,0,.6);
}
.slop-block{ display:block;width:100%;height:100%; animation:slopFlicker 1.6s steps(3,end) infinite; }
.slop-block.b1{background:#ff2bd6} .slop-block.b2{background:#3a0028;animation-delay:.1s}
.slop-block.b3{background:#ff6b1f;animation-delay:.5s} .slop-block.b4{background:#7a0044;animation-delay:.2s}
.slop-block.b5{background:#ffea4a;animation-delay:.8s} .slop-block.b6{background:#aa0077;animation-delay:.3s}
.slop-block.b7{background:#5a0038;animation-delay:.6s} .slop-block.b8{background:#ff2bd6;animation-delay:.15s}
.slop-block.b9{background:#ff6b1f;animation-delay:.9s} .slop-block.b10{background:#2a0020;animation-delay:.4s}
.slop-block.b11{background:#ffea4a;animation-delay:.25s} .slop-block.b12{background:#aa0077;animation-delay:.7s}
.slop-glitch{
position:absolute;left:0;right:0;top:38%;height:8px;z-index:3;
background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 8px);
opacity:.5;mix-blend-mode:overlay;animation:slopScan 2.4s linear infinite;
}
.slop-fingers{
position:absolute;right:5px;bottom:3px;z-index:4;font-size:16px;
filter:drop-shadow(0 1px 2px #000);transform:rotate(-8deg);
}
.slop-bar{
height:9px;background:#2a0020;border:1px solid #4a0030;margin-top:5px;overflow:hidden;
}
.slop-bar span{
display:block;height:100%;width:42%;
background:repeating-linear-gradient(45deg,#ff2bd6 0 6px,#ff6b1f 6px 12px);
animation:slopFill 3s ease-in-out infinite;
}
.slop-stat{
font-family:var(--crt,monospace);font-size:9px;color:#ff9aaa;
margin-top:3px;letter-spacing:.04em;
}
.slop-chips{ display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 4px; }
.slop-chips .chip{
font-size:10px;color:#ffeaa0;background:rgba(255,43,214,.14);
border:1px solid rgba(255,43,214,.4);padding:2px 6px;
white-space:nowrap;text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
@keyframes slopFlicker{ 0%,100%{opacity:1} 33%{opacity:.4} 66%{opacity:.85} }
@keyframes slopScan{ from{top:-8px} to{top:100%} }
@keyframes slopFill{ 0%{width:18%} 50%{width:67%} 100%{width:34%} }
.slop-body .footer{
margin-top:8px;padding-top:7px;font-size:10px;color:#ff9aaa;font-style:italic;
border-top:1px dashed rgba(255,154,170,.4);
text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
/* ===== PHONE WINDOW — consumer-tech notification hell ===== */
.w-surv{top:51%;left:10%;width:18%;z-index:27;transform:rotate(-1.4deg)}
.surv-body{
background:var(--paper);
padding:14px 12px;
background-image:radial-gradient(circle at 2px 2px, rgba(26,23,20,.08) .5px, transparent 1px);
background-size:5px 5px;
}
/* the phone — a hand-cut paper device */
.phone{
background:var(--bar);
border:3px solid var(--bar);
border-radius:18px;
padding:8px 7px;
box-shadow:5px 5px 0 rgba(26,23,20,.4);
position:relative;
}
.phone .notch{
width:54px;height:9px;background:var(--bar);
border-radius:0 0 9px 9px;
margin:0 auto 6px;position:relative;z-index:3;
}
.phone .notch::after{
content:"";position:absolute;right:12px;top:3px;width:5px;height:5px;
border-radius:50%;background:var(--riso-pink);
}
/* the screen */
.phone .screen{
background:var(--paper);
border-radius:6px;
padding:8px 7px 10px;
min-height:148px;
}
.phone .scr-time{
font-family:var(--cut);font-size:21px;color:var(--bar);
text-align:center;line-height:1;margin-bottom:1px;
}
.phone .scr-date{
font-family:var(--type);font-size:8px;color:#8a8270;
text-align:center;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px;
}
/* notification cards */
.notif{
background:var(--chrome);
border:2px solid var(--bar);
border-radius:5px;
padding:5px 6px;margin-bottom:5px;
box-shadow:2px 2px 0 rgba(26,23,20,.35);
position:relative;
}
.notif:nth-child(odd){transform:rotate(-.8deg)}
.notif:nth-child(even){transform:rotate(.8deg)}
.notif .app{
font-family:var(--cut);font-size:7px;text-transform:uppercase;letter-spacing:.1em;
color:var(--bar);display:flex;align-items:center;gap:4px;margin-bottom:2px;
}
.notif .app::before{
content:"";width:9px;height:9px;border-radius:2px;background:var(--riso-pink);
border:1.5px solid var(--bar);flex-shrink:0;
}
.notif.a2 .app::before{background:var(--riso-orange)}
.notif.a3 .app::before{background:var(--riso-blue)}
.notif.a4 .app::before{background:var(--riso-yellow)}
.notif .msg{
font-family:var(--type);font-size:9.5px;color:var(--bar);line-height:1.3;
}
.notif .t{
position:absolute;top:4px;right:6px;
font-family:var(--type);font-size:7px;color:#9a917e;
}
.surv-body .caption{
margin-top:10px;
font-family:var(--type);font-size:9px;color:var(--bar);
text-align:center;line-height:1.4;
background:var(--riso-yellow);
border:2px solid var(--bar);
padding:4px 6px;transform:rotate(-1deg);
}
/* GPU temp window */
.w-gpu{top:78%;left:48%;width:20%;z-index:22;transform:rotate(.6deg)}
.w-gpu .win__bar{background:linear-gradient(90deg,#1a0202,#a01010,#3a0a0a)}
.gpu-body{
background:
repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,90,40,.04) 3px 4px),
radial-gradient(ellipse at 50% 100%, rgba(255,90,40,.18) 0%, transparent 60%),
linear-gradient(180deg, #2a0a0a 0%, #1a0202 100%);
color:#ffeaa0;padding:10px;font-family:var(--mono);font-size:11px;
}
.gpu-row{
display:flex;justify-content:space-between;align-items:center;padding:4px 0;
border-bottom:1px dashed rgba(255,90,40,.3);
text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
.gpu-row b{
font-family:var(--crt);font-size:18px;color:var(--siren);font-variant-numeric:tabular-nums;
text-shadow:0 0 5px rgba(255,90,40,.6);
}
.gpu-bar{
height:10px;
background:linear-gradient(180deg, #1a0a02 0%, #2a1408 100%);
border:1px solid #000;
box-shadow:
inset 1px 1px 0 rgba(0,0,0,.5),
inset -1px -1px 0 rgba(255,255,255,.1);
margin:8px 0;position:relative;overflow:hidden;
}
.gpu-bar i{
display:block;height:100%;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.15) 0 3px, transparent 3px 6px),
linear-gradient(90deg,#ffe14a 0%,#ff7a1e 50%,#ff2a02 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
width:92%;animation:gpuFill 4s ease-in-out infinite alternate;
}
@keyframes gpuFill{from{width:88%}to{width:98%}}
.gpu-flame{
color:var(--siren);font-family:var(--pixel);font-size:11px;text-align:center;
margin-top:8px;padding:4px;
background:linear-gradient(180deg, rgba(255,90,40,.2) 0%, rgba(255,90,40,.05) 100%);
border:1px solid rgba(255,90,40,.3);
text-shadow:0 0 6px rgba(255,90,40,.7);
animation:blink .7s steps(2,end) infinite;
}
/* mini "click here" CTA */
.w-click .win__bar{background:linear-gradient(90deg,#7a3a02,#ee9900,#aa5500)}
.click-body{
background:var(--paper);
padding:9px;text-align:center;
}
.click-body .scroll{
background:var(--bar);
color:var(--riso-orange);overflow:hidden;white-space:nowrap;font-family:var(--type);font-size:12px;
padding:5px 0;
border:2.5px solid var(--bar);
}
.click-body .scroll span{display:inline-block;animation:scrollLeft 8s linear infinite}
@keyframes scrollLeft{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.click-body .bang{
font-family:var(--cut);font-size:21px;color:var(--paper);
background:var(--riso-pink);
padding:6px 4px 4px;margin:9px 0 0;
letter-spacing:.04em;line-height:1;
box-shadow:4px 4px 0 var(--bar);
transform:rotate(-2deg);
}
.click-body .fineline{
font-family:var(--cut);font-size:15px;color:var(--bar);
background:var(--riso-acid);
display:inline-block;padding:4px 12px;margin:11px 0 9px;
transform:rotate(1.5deg);
box-shadow:3px 3px 0 var(--bar);
animation:blink 1.4s steps(2,end) infinite;
}
.click-body .finesub{
font-family:var(--type);font-size:9px;color:#6a6253;
margin:0 0 9px;letter-spacing:.04em;
}
.click-body .gobtn{
display:inline-block;
background:var(--riso-orange);
color:var(--bar);padding:7px 22px;font-family:var(--cut);font-size:14px;
border:2.5px solid var(--bar);
box-shadow:3px 3px 0 var(--bar);
letter-spacing:.08em;text-transform:uppercase;
}
.click-body .gobtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--bar)}
/* attention heads — paper collage */
.w-hallu{top:8%;left:71%;width:17%;z-index:46;transform:rotate(2deg)}
.hallu-body{
background:var(--paper);
color:var(--bar);padding:11px;font-family:var(--type);font-size:13px;min-height:160px;
line-height:1.5;
}
.hallu-body .posiwid{
margin:8px 0;padding:7px 9px;
border-left:3px solid var(--hot-pink);
background:rgba(255,45,143,.06);
font-size:13px;line-height:1.45;
}
.hallu-body .p{
background:var(--bar);color:var(--riso-acid);padding:2px 6px;display:inline-block;
font-family:var(--type);
}
.hallu-body .attn{
display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin:9px 0;padding:5px;
background:var(--bar);
border:2.5px solid var(--bar);
}
.hallu-body .attn i{
display:block;height:9px;
background:var(--riso-orange);
opacity:var(--o,.3);
animation:flicker 1.4s ease-in-out infinite;
}
@keyframes flicker{50%{opacity:.06}}
.hallu-body .cursor{
display:inline-block;width:8px;height:13px;background:var(--riso-pink);
vertical-align:-2px;animation:blink 1s steps(2,end) infinite;margin-left:2px;
}
/* DJ ADVENT mixtape window */
/* ========================================================
BIO + RESUME WINDOWS — hidden by default, open from desktop icons
======================================================== */
.w-doc{
display:none;
/* fixed-positioned: must override .win{position:absolute} from earlier in the
stylesheet. !important guards against any later rule (mobile breakpoint,
containers, etc.) breaking it. */
position:fixed !important;
top:50px !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translateX(-50%) !important;
width:min(900px, 90vw) !important;
max-height:calc(100vh - 80px) !important;
z-index:99999 !important;
margin:0 !important;
/* isolate from any ancestor effects */
isolation:isolate;
contain:layout;
}
.w-doc.open{ display:block; animation:docOpen .18s ease-out; }
@keyframes docOpen{
from{ transform:translateX(-50%) translateY(-12px) scale(.96); opacity:0; }
to { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
}
.w-doc .win__body{
background:var(--paper);
padding:0;
max-height:calc(100vh - 130px);
overflow-y:auto;
}
.w-bio .win__bar{ background:linear-gradient(90deg,#1a1714,#5a4a3a,#1a1714); }
.w-resume .win__bar{ background:linear-gradient(90deg,#1a1714,#3a5a4a,#1a1714); }
/* documents — use system sans for readability (typewriter font was too noisy
at body sizes). Larger, darker, with tighter line-height for scannability. */
.doc{
font-family:Helvetica, Arial, sans-serif;
color:#15110d;
padding:28px 36px 34px;
line-height:1.62;
font-size:16px;
font-weight:400;
}
.doc .doc-title{
font-family:var(--cut);
font-size:38px;
letter-spacing:.04em;
text-transform:uppercase;
background:var(--bar);
color:var(--paper);
padding:10px 18px;
display:inline-block;
transform:rotate(-1.2deg);
margin:0 0 16px;
box-shadow:4px 4px 0 rgba(26,23,20,.4);
}
.doc .doc-sub{
font-family:var(--ms);
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:#5a4d3d;
margin:0 0 26px;
border-bottom:1.5px solid var(--bar);
padding-bottom:10px;
font-weight:600;
}
.doc h2{
font-family:var(--cut);
font-size:22px;
text-transform:uppercase;
letter-spacing:.06em;
margin:32px 0 14px;
padding:5px 12px;
background:var(--riso-pink);
color:var(--paper);
display:inline-block;
transform:rotate(-.5deg);
box-shadow:3px 3px 0 rgba(26,23,20,.35);
}
.doc h2.acid{ background:var(--riso-acid);color:var(--bar); }
.doc h2.orange{ background:var(--riso-orange);color:var(--paper); }
.doc h2.purple{ background:var(--riso-purple);color:var(--paper); }
.doc h2.blue{ background:var(--riso-blue);color:var(--paper); }
.doc h3{
font-family:Helvetica, Arial, sans-serif;
font-size:17px;
font-weight:700;
letter-spacing:.01em;
margin:18px 0 2px;
color:#15110d;
}
.doc h4{
font-family:var(--ms);
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase;
margin:0 0 6px;
color:#5a4d3d;
font-weight:600;
}
.doc .entry{
padding:12px 0 16px;
border-bottom:1px dashed rgba(26,23,20,.22);
margin-bottom:6px;
}
.doc .entry:last-child{ border-bottom:none; }
.doc .entry .date{
font-family:var(--ms);
font-size:11px;
color:#6b5d4d;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:700;
}
.doc .entry p{ margin:6px 0 0;font-size:15px;line-height:1.55; }
.doc p{ margin:0 0 16px;font-size:16px; }
.doc blockquote{
font-family:var(--cut);
font-size:24px;
line-height:1.3;
margin:6px 0 24px;
padding:16px 20px;
border-left:5px solid var(--riso-pink);
background:rgba(255,45,143,0.08);
color:#15110d;
transform:rotate(-.3deg);
font-weight:400;
}
.doc a{ color:#1d3fa8;text-decoration:underline;text-decoration-style:dotted;font-weight:600; }
.doc a:hover{ background:var(--riso-yellow);color:var(--bar); }
.doc em{ font-style:italic; }
.doc .pill-row{ display:flex;flex-wrap:wrap;gap:7px 9px;margin:6px 0 14px; }
.doc .pill{
font-family:var(--ms);
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase;
padding:4px 10px;
background:var(--bar);
color:var(--paper);
border:2px solid var(--bar);
font-weight:600;
}
.doc .pill.cert{ background:var(--riso-acid);color:var(--bar); }
.doc .pill.bar{ background:var(--paper);color:var(--bar); }
/* prominent close button — big red [×] in the top right of the doc bar */
.w-doc .doc-close{
background:#e3261c;
color:#fff;
font-family:Helvetica, Arial, sans-serif;
font-size:22px;
font-weight:700;
line-height:1;
width:34px;
height:28px;
display:inline-flex;
align-items:center;
justify-content:center;
border:2px solid #fff;
box-shadow:2px 2px 0 rgba(0,0,0,0.5);
cursor:pointer;
margin-left:8px;
transition:transform .08s;
}
.w-doc .doc-close:hover{ background:#ff3a30;transform:scale(1.08); }
.w-doc .doc-close:active{ transform:scale(.95); }
/* ========================================================
RESUME-specific overrides — clean professional CV inside Win98 chrome.
Strips the playful slogan styling from h2 headers and uses a calm
rule-divided typography instead. Bio keeps the slogan look.
======================================================== */
.w-resume .doc{
padding:36px 44px 40px;
font-size:15px;
line-height:1.55;
}
.w-resume .doc-title{
font-family:Helvetica, Arial, sans-serif;
font-size:30px;
font-weight:700;
letter-spacing:.01em;
text-transform:none;
background:none;
color:#15110d;
padding:0;
transform:none;
box-shadow:none;
margin:0 0 4px;
display:block;
}
.w-resume .doc-sub{
font-family:Helvetica, Arial, sans-serif;
font-size:13px;
letter-spacing:.02em;
text-transform:none;
color:#5a4d3d;
margin:0 0 28px;
padding-bottom:14px;
border-bottom:2px solid #15110d;
font-weight:500;
}
.w-resume .doc h2{
font-family:Helvetica, Arial, sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
color:#15110d;
background:none !important;
padding:0 0 6px;
margin:30px 0 16px;
transform:none;
box-shadow:none;
border-bottom:1.5px solid #15110d;
display:block;
}
.w-resume .doc h3{
font-family:Helvetica, Arial, sans-serif;
font-size:15px;
font-weight:700;
color:#15110d;
margin:0 0 1px;
letter-spacing:0;
}
.w-resume .doc h4{
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:500;
font-style:italic;
letter-spacing:0;
text-transform:none;
color:#3a322a;
margin:0 0 6px;
}
.w-resume .entry{
display:grid;
grid-template-columns:140px 1fr;
gap:18px;
padding:10px 0 14px;
border-bottom:none;
margin-bottom:2px;
}
.w-resume .entry .date{
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
color:#5a4d3d;
letter-spacing:.04em;
text-transform:none;
font-weight:600;
padding-top:2px;
}
.w-resume .entry p{
font-size:14px;
color:#2a241e;
margin:4px 0 0;
line-height:1.5;
}
.w-resume .entry ul{
margin:4px 0 0;
padding:0 0 0 18px;
list-style:disc;
}
.w-resume .entry ul li{
font-size:14px;
color:#2a241e;
line-height:1.5;
margin:0 0 3px;
}
.w-resume .pill-row{ gap:6px 8px;margin:0 0 8px; }
.w-resume .pill{
font-family:Helvetica, Arial, sans-serif;
font-size:11px;
letter-spacing:.06em;
padding:3px 9px;
background:#15110d;
color:#f4ede0;
border:none;
font-weight:600;
text-transform:uppercase;
}
.w-resume .pill.cert{ background:#15110d;color:#f4ede0; }
.w-resume .pill.bar{ background:none;color:#15110d;border:1.5px solid #15110d; }
/* responsive — collapse the date column on narrow screens */
@media (max-width: 700px){
.w-resume .entry{ grid-template-columns:1fr;gap:2px; }
.w-resume .entry .date{ font-size:11px; }
}
.w-amp{
top:31%;left:73%;width:21%;z-index:42;transform:rotate(.6deg);
}
.w-amp .win__bar{background:linear-gradient(90deg,#1a1a1a,#5a5a5a,#000)}
.amp-body{
background:
/* metal brushed texture */
repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,.02) 1px 2px),
linear-gradient(180deg, #3a3a3a 0%, #252525 50%, #1a1a1a 100%);
padding:8px;
border:2px inset #1a1a1a;
box-shadow:inset 1px 1px 0 rgba(255,255,255,.1), inset -1px -1px 0 rgba(0,0,0,.5);
font-family:var(--ms);color:#ff6b1f;
}
.amp-row{display:flex;gap:6px;align-items:center}
.amp-readout{
flex:1;
background:
repeating-linear-gradient(0deg, rgba(255,107,31,.06) 0 1px, transparent 1px 2px),
linear-gradient(180deg, #001a08 0%, #000 100%);
border:1px solid #000;
box-shadow:
inset 1px 1px 0 rgba(0,0,0,.7),
inset -1px -1px 0 rgba(255,107,31,.15);
padding:4px 6px;font-family:var(--crt);color:#ff6b1f;
text-shadow:0 0 4px rgba(255,107,31,.6);
overflow:hidden;white-space:nowrap;position:relative;
}
.amp-readout .scroll{display:inline-block;animation:ampScroll 12s linear infinite;font-size:16px;letter-spacing:.04em}
@keyframes ampScroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.amp-readout .meta{display:flex;justify-content:space-between;font-family:var(--pixel);font-size:7px;color:#ff6b1f;margin-top:2px;letter-spacing:.1em;opacity:.7}
.amp-time{
background:
repeating-linear-gradient(0deg, rgba(255,107,31,.06) 0 1px, transparent 1px 2px),
linear-gradient(180deg, #001a08 0%, #000 100%);
border:1px solid #000;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.7);
padding:3px 6px;font-family:var(--crt);font-size:22px;color:#ff6b1f;
text-shadow:0 0 8px rgba(255,107,31,.8);min-width:68px;text-align:center;
font-variant-numeric:tabular-nums;
}
.amp-eq{
display:flex;gap:2px;align-items:flex-end;justify-content:space-between;
height:38px;
background:linear-gradient(180deg, #000 0%, #0a0a0a 100%);
border:1px solid #000;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.7);
padding:4px 5px;margin-top:6px;
}
.amp-eq i{
display:block;flex:1;
background:linear-gradient(180deg,#ff2bd6 0%,#ffe14a 50%,#ff6b1f 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3);
/* idle / standby: all bars rest low and breathe together in a slow synced pulse */
height:16%;
animation:eqStandby 2.4s ease-in-out infinite;
}
/* once a track is actually playing (body.playing is set by the player), the
bars come alive with the staggered jump animation */
body.playing .amp-eq i{
height:50%;
animation:eqJump 0.6s ease-in-out infinite alternate;
}
@keyframes eqStandby{ 0%,100%{height:14%;opacity:.5} 50%{height:24%;opacity:.85} }
/* per-bar speeds/offsets apply only while playing, so the idle pulse stays in sync */
body.playing .amp-eq i:nth-child(1){animation-duration:.42s}
body.playing .amp-eq i:nth-child(2){animation-duration:.55s}
body.playing .amp-eq i:nth-child(3){animation-duration:.38s;animation-delay:.1s}
body.playing .amp-eq i:nth-child(4){animation-duration:.62s;animation-delay:.05s}
body.playing .amp-eq i:nth-child(5){animation-duration:.45s;animation-delay:.15s}
body.playing .amp-eq i:nth-child(6){animation-duration:.52s;animation-delay:.08s}
body.playing .amp-eq i:nth-child(7){animation-duration:.4s;animation-delay:.18s}
body.playing .amp-eq i:nth-child(8){animation-duration:.58s;animation-delay:.02s}
body.playing .amp-eq i:nth-child(9){animation-duration:.5s;animation-delay:.12s}
body.playing .amp-eq i:nth-child(10){animation-duration:.46s;animation-delay:.2s}
body.playing .amp-eq i:nth-child(11){animation-duration:.55s;animation-delay:.04s}
body.playing .amp-eq i:nth-child(12){animation-duration:.42s;animation-delay:.14s}
body.playing .amp-eq i:nth-child(13){animation-duration:.5s;animation-delay:.06s}
body.playing .amp-eq i:nth-child(14){animation-duration:.58s;animation-delay:.16s}
body.playing .amp-eq i:nth-child(15){animation-duration:.44s;animation-delay:.09s}
body.playing .amp-eq i:nth-child(16){animation-duration:.6s;animation-delay:.13s}
@keyframes eqJump{from{height:8%}to{height:92%}}
.amp-controls{
display:flex;gap:3px;margin-top:8px;align-items:center;
}
.amp-btn{
flex:1;
background:linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 50%, #2a2a2a 100%);
border:1px solid #000;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.2),
inset -1px -1px 0 rgba(0,0,0,.4);
font-family:var(--ms);font-size:13px;padding:4px 0;color:#ff6b1f;
text-shadow:0 0 4px rgba(255,107,31,.5);
}
.amp-btn:active{
background:linear-gradient(180deg, #2a2a2a 0%, #3a3a3a 50%, #5a5a5a 100%);
box-shadow:inset -1px -1px 0 rgba(255,255,255,.2), inset 1px 1px 0 rgba(0,0,0,.4);
transform:translate(0,1px);
}
.amp-slider{
flex:1.5;display:flex;align-items:center;gap:5px;
font-family:var(--pixel);font-size:7px;color:#aaa;
}
.amp-slider .track{
flex:1;height:8px;
background:linear-gradient(180deg, #000 0%, #1a1a1a 100%);
border:1px solid #000;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.6);
position:relative;border-radius:1px;
}
.amp-slider .track::after{
content:"";position:absolute;left:0;top:0;bottom:0;
background:linear-gradient(90deg,#ff6b1f,#ffe14a);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 4px rgba(255,107,31,.4);
border-radius:1px 0 0 1px;
}
.amp-slider .track.vol::after{width:70%}
.amp-slider .track.bal::after{width:50%;left:25%;background:linear-gradient(90deg,#ff2bd6,#ff7a48);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 4px rgba(255,43,214,.4)}
/* PLAYLIST companion window */
.w-pl{top:42%;left:73%;width:21%;z-index:40;transform:rotate(-.4deg)}
/* a "click here" call-out cue above the list */
.pl-cue{
background:var(--riso-pink);color:var(--bar);
font-family:var(--cut);font-size:12px;text-transform:uppercase;
letter-spacing:.08em;text-align:center;padding:5px 0;
border-bottom:2.5px solid var(--bar);
animation:plCueBlink 1.3s steps(2,end) infinite;
}
@keyframes plCueBlink{50%{background:var(--riso-yellow)}}
/* big pulsing PLAY button */
.pl-playbtn{
display:flex;align-items:center;justify-content:center;gap:8px;
background:var(--riso-acid);color:var(--bar);
font-family:var(--cut);font-size:15px;text-transform:uppercase;letter-spacing:.1em;
padding:9px 0;cursor:pointer;
border-bottom:2.5px solid var(--bar);
animation:plPulse 1.4s ease-in-out infinite;
}
.pl-playbtn .tri{
width:0;height:0;
border-left:14px solid var(--bar);
border-top:9px solid transparent;
border-bottom:9px solid transparent;
}
.pl-playbtn:hover{background:var(--riso-yellow)}
.pl-playbtn:active{transform:translateY(1px)}
@keyframes plPulse{
0%,100%{box-shadow:inset 0 0 0 0 rgba(26,23,20,0)}
50%{box-shadow:inset 0 0 0 4px rgba(26,23,20,.3)}
}
.pl-body{
background:var(--paper);
color:var(--bar);font-family:var(--ms);font-size:12px;padding:0;
max-height:226px;overflow-y:auto;overflow-x:hidden;
}
.pl-body .row{
display:grid;grid-template-columns:20px 18px 1fr auto;gap:7px;
padding:6px 9px;align-items:center;
border-bottom:2px solid var(--bar);
cursor:pointer;
transition:transform .08s, background .08s;
}
/* the ▶ play icon in its own column */
.pl-body .row .play{
width:16px;height:16px;display:flex;align-items:center;justify-content:center;
background:var(--bar);color:var(--riso-acid);
font-size:8px;
}
.pl-body .row .n{
color:#9a917e;font-family:var(--type);font-size:10px;text-align:right;
}
.pl-body .row .t{letter-spacing:.01em;line-height:1.2;font-weight:bold;font-size:11px}
.pl-body .row .t small{color:#8a8170;font-size:10px;display:block;font-weight:normal}
.pl-body .row .d{
color:#8a8170;font-size:10px;font-variant-numeric:tabular-nums;font-family:var(--type);
}
/* hover = clearly a button: lifts, fills, icon flips colour */
.pl-body .row:hover{
background:var(--riso-yellow);
transform:translateX(3px);
}
.pl-body .row:hover .play{background:var(--riso-pink);color:var(--bar)}
.pl-body .row:active{transform:translateX(1px)}
.pl-body .row.active{
background:var(--riso-acid);
}
.pl-body .row.active .play{background:var(--riso-pink);color:var(--bar)}
.pl-body .row.active .play::after{content:""}
/* the final "archive" row reads as a link */
.pl-body .row.archive{background:var(--bar)}
.pl-body .row.archive .t{color:var(--riso-pink)}
.pl-body .row.archive .n,.pl-body .row.archive .d{color:#8a8398}
.pl-body .row.archive:hover{background:#2c2b3b}
/* "now generating" — paper collage */
.w-cart{top:10%;left:22%;width:13%;z-index:20;transform:rotate(-1.5deg)}
.cart-body{
background:var(--paper);
padding:11px;text-align:center;
}
.cart-body .head{
font-family:var(--cut);font-size:12px;text-transform:uppercase;letter-spacing:.03em;
background:var(--riso-orange);color:var(--bar);
padding:5px 8px;margin-bottom:9px;display:block;
transform:rotate(1.5deg);box-shadow:3px 3px 0 var(--bar);
}
.carts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:9px 0}
.carts svg{width:100%;height:auto;animation:cartroll 1.1s ease-in-out infinite}
.carts svg:nth-child(2){animation-delay:.18s;animation-duration:.95s}
.carts svg:nth-child(3){animation-delay:.36s;animation-duration:1.3s}
@keyframes cartroll{
0% {transform:translate(0,0) rotate(0)}
15% {transform:translate(-3px,-9px) rotate(-9deg)}
30% {transform:translate(2px,-3px) rotate(6deg)}
45% {transform:translate(-2px,-11px) rotate(-5deg)}
60% {transform:translate(3px,-2px) rotate(8deg)}
75% {transform:translate(-1px,-7px) rotate(-7deg)}
100%{transform:translate(0,0) rotate(0)}
}
.cart-body .scrollmsg{
background:var(--bar);
color:var(--riso-pink);font-family:var(--type);font-size:11px;
padding:6px 0;overflow:hidden;white-space:nowrap;margin-top:9px;
border:2.5px solid var(--bar);
}
.cart-body .scrollmsg span{display:inline-block;animation:scrollLeft 9s linear infinite}
/* CONTACT / GUESTBOOK window */
.w-contact{top:79%;left:72%;width:24%;z-index:27;transform:rotate(-.6deg)}
.contact-body{
background:var(--paper);
padding:12px;font-size:11px;color:var(--bar);
}
.contact-body h3{
font-family:var(--cut);font-size:12px;margin-bottom:9px;line-height:1.3;
color:var(--bar);letter-spacing:.03em;text-transform:uppercase;
background:var(--riso-acid);display:inline-block;padding:3px 8px;
}
.contact-body .row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.contact-body .row label{
min-width:58px;text-align:right;font-family:var(--type);font-size:11px;
color:#3a2418;
}
.contact-body input, .contact-body textarea{
flex:1;font-family:var(--ms);font-size:11px;padding:3px 5px;color:#1a1408;
background:linear-gradient(180deg, #fff 0%, #f8f4e8 100%);
border:1px solid #2a2418;
box-shadow:
inset 1px 1px 0 rgba(0,0,0,.3),
inset -1px -1px 0 rgba(255,255,255,.5);
min-width:0;outline:none;
}
.contact-body input:focus, .contact-body textarea:focus{
background:#fff8e0;
box-shadow:
inset 1px 1px 0 rgba(0,0,0,.3),
inset -1px -1px 0 rgba(255,255,255,.5),
0 0 0 2px rgba(255,225,74,.5);
}
.contact-body textarea{min-height:48px;resize:vertical;font-family:var(--ms)}
.contact-body .actions{display:flex;gap:5px;justify-content:flex-end;margin-top:8px}
.contact-body .actions button,
.contact-body .actions a{
padding:4px 10px;font-family:var(--ms);font-size:11px;color:#1a1408;
background:linear-gradient(180deg, #f8f6ee 0%, #d8d4c8 50%, #b8b4a8 100%);
border:1px solid #2a2418;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.7),
inset -1px -1px 0 rgba(0,0,0,.25),
1px 1px 0 rgba(0,0,0,.4);
text-shadow:0 1px 0 rgba(255,255,255,.4);
text-decoration:none;display:inline-block;line-height:normal;
}
.contact-body .actions button:active,
.contact-body .actions a:active{
background:linear-gradient(180deg, #b8b4a8 0%, #d8d4c8 50%, #f8f6ee 100%);
box-shadow:inset -1px -1px 0 rgba(255,255,255,.7), inset 1px 1px 0 rgba(0,0,0,.25);
transform:translate(1px,1px);
}
.contact-body .note{
margin-top:8px;font-family:var(--crt);font-size:12px;color:#1a1408;
background:linear-gradient(180deg, #ffff80 0%, #ffe14a 100%);
padding:3px 8px;display:inline-block;transform:rotate(-1deg);
border:1px solid #aa9800;
box-shadow:1px 1px 0 rgba(0,0,0,.3);
}
/* ========================================================
DESKTOP ICON SHORTCUTS — floating in the blue gaps
======================================================== */
.desktop-icons{
position:absolute;top:6px;left:0;right:0;z-index:5;
display:flex;flex-wrap:wrap;gap:6px 10px;
justify-content:center;align-items:flex-start;
padding:0 10px;pointer-events:none;
}
.desktop-icons .icn{pointer-events:auto;position:static}
.icn{
width:72px;text-align:center;color:#fff;font-family:var(--ms);font-size:11px;
text-shadow:1px 1px 0 #000;text-decoration:none;
display:block;border:1px dashed transparent;padding:3px;
}
.icn:hover{border-color:#fff;background:rgba(0,0,0,.18);color:#fff}
.icn:focus-visible{outline:1px dashed #fff;outline-offset:2px}
/* keyboard focus for the controls that are now real