/* ========================================================== listen — the slow-down experience on the home page ---------------------------------------------------------- A LAYER over the real home page. Nothing here restyles the site: every rule is scoped to .listen-* or #listen-*, and if this file never loads the home page is exactly as it was. The whole layer is inert until listen.js adds .listen-active to , so a visitor who never triggers it pays nothing but the download. ========================================================== */ /* The permanent way in. Always present, deliberately quiet — it sits with the hero and reads as a note, not a button. */ .listen-enter{ display:inline-block;margin-top:1.6rem; font-family:var(--mono);font-size:.66rem;letter-spacing:.24em; text-transform:uppercase;color:var(--faint); border-bottom:1px solid var(--line);padding-bottom:.25rem; background:none;border-top:0;border-left:0;border-right:0; cursor:pointer;transition:color .4s ease,border-color .4s ease; } .listen-enter:hover{color:var(--acc);border-color:var(--acc);} /* Nothing below exists until the experience is running. */ #listen-stage,#listen-veil,#listen-banner,#listen-star,#listen-info,#listen-back{ display:none; } .listen-active #listen-stage, .listen-active #listen-veil, .listen-active #listen-star, .listen-active #listen-info, .listen-active #listen-back{ display:block; } /* The reel — every page stitched into one tall document, scrolled by script. One document means no navigation, no load waits, nothing to go wrong. */ #listen-stage{ position:fixed;inset:0;width:100%;height:100%;border:0;z-index:9000; background:var(--paper); } /* The darkening. Sits over everything; never replaces it. */ #listen-veil{ position:fixed;inset:0;background:#0B0906;opacity:0; pointer-events:none;z-index:9010; } /* The banner. Deliberately not a button: these are words the visitor is saying, that happen to be clickable. */ #listen-banner{ position:fixed;inset:0;place-items:center;z-index:9020; cursor:pointer;-webkit-user-select:none;user-select:none; } .listen-active #listen-banner{ display:grid; } /* An emergency exit sign. The borrowed vocabulary is the argument: this is the way out of the overload, and everyone already knows how to read it without being taught. Green, white, heavy, rounded — the standard safety sign, saying SLOW DOWN instead of EXIT. */ #listen-banner span{ display:inline-flex;align-items:center;gap:.5em; font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:clamp(1.35rem,4.8vw,3rem); letter-spacing:-.005em; line-height:1; color:#fff;text-transform:uppercase; opacity:0; transition:opacity 1.4s linear, transform .6s ease, box-shadow .6s ease, filter .6s ease; padding:.44em .66em .48em; background:#0DA750; /* the green of the standard sign */ border-radius:.42em; /* the generous radius of the printed sign */ box-shadow:inset 0 0 0 .075em #fff, /* the white keyline inside the edge */ 0 14px 44px rgba(0,0,0,.16); -webkit-font-smoothing:antialiased; /* Present but not yet live: slightly dimmed and held back, so it reads as "coming" rather than "click me". */ filter:saturate(.7) brightness(.82); transform:scale(.94); } /* Armed: the sign brightens, settles to full size, lifts — the moment it becomes the visitor's to press. */ #listen-banner.armed span{ filter:none; transform:scale(1); box-shadow:inset 0 0 0 .075em #fff, 0 18px 54px rgba(0,0,0,.22); } #listen-banner{ cursor:default; } #listen-banner.armed{ cursor:pointer; } /* The star. Warm rather than pure white, so it sits in the warm dark instead of punching a cold hole in it. */ #listen-star{ position:fixed;z-index:9030;border-radius:50%;background:#FFF7EC; width:3px;height:3px;margin:-1.5px 0 0 -1.5px;opacity:0; cursor:pointer;pointer-events:none; transition:opacity 1.6s ease,width 1.6s ease,height 1.6s ease, margin 1.6s ease,box-shadow 1.6s ease; } #listen-star.on{ pointer-events:auto;animation:listen-twinkle 8.4s ease-in-out infinite; } /* Irregular on purpose: a regular pulse reads as a loading indicator, an uneven one reads as atmosphere. */ @keyframes listen-twinkle{ 0%,100%{transform:scale(1); filter:brightness(1);} 18% {transform:scale(1.4); filter:brightness(1.6);} 31% {transform:scale(1.05); filter:brightness(1.05);} 47% {transform:scale(1.38); filter:brightness(1.5);} 68% {transform:scale(.82); filter:brightness(.75);} 84% {transform:scale(1.18); filter:brightness(1.25);} } /* Diffraction spikes — the flare the eye reads as "star" rather than "dot". */ #listen-star::before{ content:'';position:absolute;left:50%;top:50%; width:56px;height:56px;margin:-28px 0 0 -28px; opacity:0;transition:opacity 3s ease;pointer-events:none; background: linear-gradient(to right,transparent 0%,rgba(255,240,222,.5) 50%,transparent 100%) center/100% 1px no-repeat, linear-gradient(to bottom,transparent 0%,rgba(255,240,222,.5) 50%,transparent 100%) center/1px 100% no-repeat; animation:listen-flare 8.4s ease-in-out infinite; } #listen-star.lit::before{ opacity:.75; } @keyframes listen-flare{ 0%,100%{transform:scale(.8);} 18% {transform:scale(1.25);} 68% {transform:scale(.65);} } /* A 64px target around a 3px star — otherwise it cannot be hit, on a phone least of all. The ring shows on hover so it can be found in the dark. */ #listen-star::after{ content:'';position:absolute;left:50%;top:50%; width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%; border:1px solid rgba(255,240,222,0);transition:border-color .6s ease; } #listen-star.on:hover::after{ border-color:rgba(255,240,222,.22); } /* The work's information: a caption beside its own star, not a panel. */ #listen-info{ position:fixed;z-index:9040;max-width:19rem; opacity:0;pointer-events:none;transition:opacity 1.4s ease; font-family:var(--mono); } #listen-info.on{ opacity:1;pointer-events:auto; } #listen-info h3{ font-family:inherit;font-size:.92rem;font-weight:400;letter-spacing:.06em; color:var(--dark-ink);margin:0 0 .35rem; } #listen-info p{ margin:.1rem 0;color:#8b8177;font-size:.72rem;letter-spacing:.04em;line-height:1.5; } /* The way back. Absent while the piece settles, then surfacing slowly. */ #listen-back{ position:fixed;bottom:2.4rem;left:50%;transform:translateX(-50%);z-index:9030; font-family:var(--mono);font-size:.72rem;letter-spacing:.28em; text-transform:uppercase;color:var(--dark-ink); opacity:0;cursor:pointer;-webkit-user-select:none;user-select:none; transition:opacity 2.5s ease;background:none;border:0;padding:.5rem 1rem; } /* Motion-sensitive visitors are never given the overload at all — listen.js refuses to start. This is belt and braces for the parts that are CSS. */ @media (prefers-reduced-motion:reduce){ #listen-star.on{ animation:none; } #listen-star.lit::before{ animation:none; } }