...items... (duplicated once in the DOM for a seamless loop)
The track is twice as wide as one set of items and animates
from translateX(0) to translateX(-50%), so the duplicate set
lines up exactly as the first set scrolls off.
========================================================= */
.marquee {
margin-top: var(--space-3);
overflow: hidden;
-webkit-mask-image: linear-gradient(
to right,
transparent,
#000 8%,
#000 92%,
transparent
);
mask-image: linear-gradient(
to right,
transparent,
#000 8%,
#000 92%,
transparent
);
}
.marquee__track {
display: flex;
gap: 0.75rem;
width: max-content;
animation: marquee-scroll 36s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
animation-play-state: paused;
}
.marquee__item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 0.5rem 1.1rem;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.85rem;
color: var(--text-2);
white-space: nowrap;
box-shadow: 0 0 18px -8px var(--glow-blue);
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track {
animation: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Show Blocks — square show-art tiles in the marquee */
.marquee--shows {
margin-top: var(--space-4);
}
.marquee--shows .marquee__track {
/* No flex `gap` here on purpose: gap adds one extra gap-width
between the two duplicated sets, which throws off the
translateX(-50%) loop point by half a gap and causes a visible
jump/stutter on every cycle. Using a margin on each tile instead
keeps every tile's "slot" (tile + spacing) an identical width,
so the duplicated track is exactly 2x one set and -50% lines up
pixel-perfect. */
gap: 0;
animation-duration: 75s;
}
/* Desktop hover: pause the marquee so tiles are easy to click */
.marquee--shows:hover .marquee__track {
animation-play-state: paused;
}
.show-tile {
flex: 0 0 auto;
width: clamp(140px, 22vw, 220px);
aspect-ratio: 1 / 1;
margin-right: var(--space-3);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 24px -10px var(--glow-blue);
}
.show-tile__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Show tiles that link to a world — clickable */
.show-tile[data-world] { cursor: pointer; }
.show-tile.is-selected {
outline: 2px solid rgba(255, 188, 32, 0.85);
outline-offset: -2px;
border-radius: var(--radius);
}
/* Featured Artists — "Here's Who Earned It" marquee, same seamless-loop
pattern as .marquee--shows but pink-tinted to read as "artists" */
.marquee--artists {
margin-top: var(--space-4);
}
.marquee--artists .marquee__track {
/* See note on .marquee--shows above — gap:0 + per-tile margin keeps
the duplicated track exactly 2x one set for a seamless -50% loop. */
gap: 0;
animation-duration: 45s;
}
.artist-tile {
position: relative;
flex: 0 0 auto;
width: clamp(140px, 22vw, 220px);
aspect-ratio: 1 / 1;
margin-right: var(--space-3);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 24px -10px var(--glow-pink);
}
.artist-tile__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Top-anchored crop for tall/vertical source photos — keeps the
face/head in frame instead of center-cropping it out */
.artist-tile__img--top {
object-position: top center;
}
/* Nikki Voice's photo — nudged down slightly from a pure top crop so
more of the "N" logo at the bottom of the shot is visible, while
keeping her head/face safely in frame */
.artist-tile__img--nikki {
object-position: center 20%;
}
/* DreadHead4Life's photo — full-body vertical shot, seated cross-legged.
Anchor further down to trim the empty white space above his head and
reveal more of his seated pose (jeans, crossed legs, sneakers), while
keeping his face, hat, and shades safely in frame. */
.artist-tile__img--dreadhead {
object-position: center 40%;
}
.artist-tile__name {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.6rem 0.75rem 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-0);
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
/* Open-slot tile — a real link into submission, not a dead placeholder.
Reads as "earned, not filled yet" rather than "coming soon". */
.artist-tile--placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.artist-tile--placeholder:hover,
.artist-tile--placeholder:focus-visible {
border-color: rgba(254, 102, 196, 0.45);
background: linear-gradient(160deg, var(--bg-2), var(--bg-1) 70%, rgba(254, 102, 196, 0.08));
}
.artist-tile--placeholder__plus {
position: relative;
width: 26%;
aspect-ratio: 1 / 1;
}
.artist-tile--placeholder__plus::before,
.artist-tile--placeholder__plus::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 2px;
transition: background 0.2s ease;
}
.artist-tile--placeholder__plus::before {
left: 50%;
top: 0;
bottom: 0;
width: 13%;
transform: translateX(-50%);
}
.artist-tile--placeholder__plus::after {
top: 50%;
left: 0;
right: 0;
height: 13%;
transform: translateY(-50%);
}
.artist-tile--placeholder:hover .artist-tile--placeholder__plus::before,
.artist-tile--placeholder:hover .artist-tile--placeholder__plus::after,
.artist-tile--placeholder:focus-visible .artist-tile--placeholder__plus::before,
.artist-tile--placeholder:focus-visible .artist-tile--placeholder__plus::after {
background: var(--color-pink);
}
.artist-tile--placeholder__tag {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-pink);
}
.artist-tile--placeholder__label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-1);
text-align: center;
padding: 0 0.5rem;
}
.section-kicker--center {
text-align: center;
}
/* =========================================================
GENERIC SECTIONS
========================================================= */
.section {
padding: var(--space-5) 0;
}
.section--listeners { background: var(--bg-1); }
.section--artists { background: var(--bg-0); }
.section--journey { background: var(--bg-1); }
.section--signup { background: var(--bg-0); }
.section--shows { background: var(--bg-0); }
.section--featured-artists { background: var(--bg-1); }
.section-title--center {
text-align: center;
}
.section-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.6rem, 4vw, 2.2rem);
margin: 0 0 var(--space-3);
line-height: 1.25;
}
.section-kicker {
color: var(--text-1);
margin-top: -0.5rem;
margin-bottom: var(--space-3);
}
.section p { color: var(--text-1); }
.welcome-line {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--text-0);
font-weight: 600;
margin-top: var(--space-3);
}
.emphasis-line {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--text-0);
font-weight: 500;
font-style: italic;
}
.pull-quote {
margin: var(--space-3) 0;
padding: var(--space-2) var(--space-3);
border-left: 3px solid var(--color-pink);
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
color: var(--text-0);
}
/* =========================================================
PLAYER (Live365) + JOTFORM PLACEHOLDERS
========================================================= */
.player-section {
padding: var(--space-5) 0;
background: var(--bg-1);
}
.player-frame {
margin-top: var(--space-3);
}
/* Two-column "Now Airing" layout — content left, vertical player right.
Stacks (content above player) on narrow screens. */
.player-layout {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.player-layout__content {
flex: 1 1 320px;
}
.player-layout__content .section-title,
.player-layout__content .section-kicker {
margin: 0;
}
.player-layout__content .section-kicker {
margin-top: var(--space-2);
}
/* "Now Airing" live show + mood, auto-filled by js/schedule.js */
.now-airing__badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: var(--space-2);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-pink);
}
.now-airing__badge::before {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--color-pink);
box-shadow: 0 0 8px var(--glow-pink);
}
.now-airing__show {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.3rem;
color: var(--text-0);
margin: var(--space-1) 0 0;
}
.now-airing__mood {
font-size: 1rem;
font-style: italic;
color: var(--text-muted);
margin: 0.25rem 0 0;
min-height: 1.5em;
transition: opacity 1s ease;
}
.player-layout__player {
flex: 0 0 auto;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
@media (max-width: 760px) {
.player-layout {
flex-direction: column;
}
.player-layout__content {
text-align: center;
}
}
/* Live365 embeds — main player + "Previously on MuSocí" history widget,
laid out side-by-side on wide screens and stacked on mobile. */
.live365-players {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: var(--space-4);
}
.live365-player {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.live365-player__label {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--text-0);
margin: 0 0 var(--space-2);
text-align: center;
}
.responsive-embed {
width: 100%;
margin: 0 auto;
border-radius: var(--radius);
overflow: hidden;
}
.responsive-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.responsive-embed--player {
max-width: 300px;
aspect-ratio: 300 / 614;
}
.responsive-embed--played {
max-width: 450px;
aspect-ratio: 450 / 511;
}
.player-placeholder,
.jotform-placeholder {
border: 1px dashed rgba(255, 255, 255, 0.18);
border-radius: var(--radius);
padding: var(--space-4);
background: var(--bg-2);
}
.player-placeholder__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
margin: 0 0 0.5rem;
}
.player-placeholder__text {
color: var(--text-1);
font-size: 0.95rem;
max-width: 560px;
}
.player-placeholder__text code {
background: rgba(255,255,255,0.08);
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.85em;
}
.player-placeholder__slot {
margin-top: var(--space-2);
padding: var(--space-4);
border-radius: var(--radius);
background: var(--bg-0);
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
}
.placeholder-tag {
color: var(--text-muted);
font-size: 0.85rem;
letter-spacing: 0.05em;
}
/* =========================================================
JOURNEY STEPS
========================================================= */
.journey-steps {
list-style: none;
margin: var(--space-4) 0 0;
padding: 0;
display: grid;
gap: var(--space-3);
}
.journey-steps li {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.journey-steps__num {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: var(--grad-brand);
color: #fff;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
}
.journey-steps h3 {
margin: 0 0 0.25rem;
font-family: var(--font-display);
font-weight: 600;
}
.journey-steps p { margin: 0; }
/* =========================================================
SUBMISSION BLOCK
========================================================= */
.submission-block {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.submission-block__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.6rem;
margin: 0 0 var(--space-1);
}
.submission-block__note {
color: var(--text-1);
margin-bottom: var(--space-3);
}
/* =========================================================
THE SOUL THEORY — CINEMATIC SHOW WORLD
========================================================= */
/* Section: full-width cinematic band.
aspect-ratio matches the wide image (1659×948 = 7:4) exactly so object-fit:cover
shows the complete image with zero crop at any viewport width. */
.world--soul-theory {
position: relative;
width: 100%;
aspect-ratio: 1659 / 948;
min-height: 340px;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
isolation: isolate; /* contain mix-blend-mode: screen on smoke to this section */
}
/* ---- Background art ---- */
.soul-bg {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
/* ---- Single drift frame: ONE element carries the Ken Burns animation.
The background image, lamp overlays, and city windows are all children
of this div — they share one CSS transform and physically cannot drift
apart. Smoke and embers live outside this frame. ---- */
.soul-drift-frame {
position: absolute;
inset: 0;
transform-origin: center center;
will-change: transform;
animation: soul-bg-drift 45s ease-in-out infinite alternate;
}
/* Very subtle Ken Burns — any scale > 1.00 trims edges slightly */
@keyframes soul-bg-drift {
from { transform: scale(1.00) translate(0, 0); }
to { transform: scale(1.03) translate(-0.8%, 0.3%); }
}
.soul-bg__img {
width: 100%;
height: 100%;
/* Container aspect-ratio matches image: cover = no crop at all at 1× scale */
object-fit: cover;
object-position: center center;
display: block;
/* No animation here — parent .soul-drift-frame carries the transform */
}
/* ---- Scrim: heavy bottom darkening for tagline readability,
subtle left shadow behind the singer ---- */
.soul-scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to top,
rgba(5,2,12,0.92) 0%,
rgba(5,2,12,0.72) 16%,
rgba(5,2,12,0.38) 36%,
rgba(5,2,12,0.08) 58%,
transparent 78%
),
linear-gradient(to right,
rgba(5,2,12,0.22) 0%,
transparent 18%
);
}
/* ---- Smoke: canvas particle simulation (js/smoke.js)
Canvas is centered horizontally on the trumpet bell (left:63%) and spans the
full section height so particles can rise as far as they need to.
mix-blend-mode:screen makes the canvas black background invisible —
only bright smoke particles composite against the artwork.
isolation:isolate on the section (already set) confines the blend mode. ---- */
.soul-smoke-canvas {
position: absolute;
left: 63%;
top: 0;
transform: translateX(-50%);
width: 28%;
height: 100%;
z-index: 2;
pointer-events: none;
mix-blend-mode: screen;
}
/* ---- Gold dust particles: fine flecks rising from the piano (bottom of frame).
Piano hands are in the lower-right area of the wide image (~left 60-82%, bottom 2-10%).
Sizes small (2-4px), glow tight, drifting slowly upward from the performance. ---- */
.soul-embers {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.soul-ember {
position: absolute;
border-radius: 50%;
background: rgba(255,225,80,0.90);
box-shadow:
0 0 4px 2px rgba(255,205,55,0.72),
0 0 9px 4px rgba(255,170,20,0.36);
will-change: transform, opacity;
}
/* Anchored at bottom 2-10% = piano zone; rise slowly through the scene */
.soul-ember--1 { width: 3px; height: 3px; left: 67%; bottom: 6%; animation: ember-rise 9s ease-in infinite; animation-delay: 0s; }
.soul-ember--2 { width: 2px; height: 2px; left: 72%; bottom: 4%; animation: ember-rise 12s ease-in infinite; animation-delay: -4s; }
.soul-ember--3 { width: 4px; height: 4px; left: 63%; bottom: 8%; animation: ember-rise 10s ease-in infinite; animation-delay: -7s; }
.soul-ember--4 { width: 2px; height: 2px; left: 78%; bottom: 3%; animation: ember-rise 14s ease-in infinite; animation-delay: -2s; }
.soul-ember--5 { width: 3px; height: 3px; left: 69%; bottom: 10%; animation: ember-rise 11s ease-in infinite; animation-delay: -9s; }
.soul-ember--6 { width: 2px; height: 2px; left: 75%; bottom: 5%; animation: ember-rise 8s ease-in infinite; animation-delay: -5s; }
.soul-ember--7 { width: 3px; height: 3px; left: 61%; bottom: 7%; animation: ember-rise 13s ease-in infinite; animation-delay: -1s; }
.soul-ember--8 { width: 2px; height: 2px; left: 82%; bottom: 2%; animation: ember-rise 10s ease-in infinite; animation-delay: -6s; }
@keyframes ember-rise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
8% { opacity: 0.92; }
50% { transform: translateY(-160px) translateX(8px); opacity: 0.68; }
82% { opacity: 0.14; }
100% { transform: translateY(-340px) translateX(-5px); opacity: 0; }
}
12% { opacity: 0; }
22% { opacity: 0.60; }
34% { opacity: 0.26; }
44% { opacity: 0.54; }
56% { opacity: 0; }
100% { opacity: 0; }
}
/* ---- Lamp-sync wrapper: fills the world section identically to the
background image and carries the same soul-bg-drift transform animation.
Because the wrapper's bounding box matches the container exactly, its
transform-origin:center is the same physical pivot as the image's — so
every child lamp glow tracks the Ken Burns drift frame-for-frame.
Opacity and child z-index are unaffected; only position is synced. ---- */
/* ---- Lamp wrapper: no animation — inherits drift from .soul-drift-frame parent. ---- */
.soul-lamp-sync {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
/* ---- City-window wrapper: no animation — inherits drift from .soul-drift-frame parent.
Sits below the lamp wrapper (z-index:2 vs 3). ---- */
.soul-city-sync {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
/* ---- Place mode: freeze the single drift frame so visual pos = layout pos.
Added by placer.js via document.body.classList.add("is-placing") when ?place=1. ---- */
.is-placing .soul-drift-frame {
animation-play-state: paused !important;
}
/* ---- City window shared styles.
Small warm point of light. JS (soul-city.js) controls opacity (0=off, onOpacity=lit).
In ?place=1 mode soul-city.js sets all windows to opacity:1 so they're visible
while being dragged to real building positions.
mix-blend-mode:screen composites warmly against dark building silhouettes. ---- */
.soul-win {
position: absolute;
width: 0.70%;
height: 0.90%;
border-radius: 1px;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
transition: opacity 5s ease-in-out; /* JS overrides per-window for varied feel */
background: radial-gradient(ellipse,
rgba(255, 252, 210, 0.80) 0%,
rgba(255, 240, 140, 0.55) 25%,
rgba(255, 205, 55, 0.28) 55%,
rgba(255, 160, 15, 0.08) 78%,
transparent 100%
);
/* no box-shadow — clean point of light, no halo */
}
/* soul-win--twinkle / is-twinkling — flicker behaviour handled in JS (soul-city.js).
CSS animation removed: JS sets inline opacity directly for flicker,
which avoids the CSS animation override conflict and gives real random flicker. */
/* Finalized positions — manually placed on real building windows 2026-06-20. */
.soul-win--1 { left: 21.59%; top: 63.62%; }
.soul-win--2 { left: 10.72%; top: 62.84%; }
.soul-win--3 { left: 16.68%; top: 55.28%; }
.soul-win--4 { left: 4.39%; top: 59.71%; }
.soul-win--5 { left: 1.64%; top: 67.01%; }
.soul-win--6 { left: 15.93%; top: 65.45%; }
.soul-win--7 { left: 13.25%; top: 60.10%; }
.soul-win--8 { left: 6.18%; top: 64.67%; }
/* ================================================================
LAMPS — FINALIZED. DO NOT EDIT POSITIONS OR SIZE.
.soul-streetlight → left:12.0% top:72.34% width:1% height:1.75%
.soul-sign-glow → left:23.9% top:76.2% width:1% height:1.75%
These are pixel-locked to artwork bulbs via Ken Burns drift-sync.
Placer.js is barred from touching these elements (soul-win class guard).
Any future CSS edit near this section: scroll past without changing.
================================================================ */
/* ---- Streetlight — LEFT lamp above the "good music sold here" sign.
JS drives opacity: steady 0.82 for ~5–6 s, then electrical flicker.
Pixel-measured bulb: (218,694) in the 1659×948 image = 13.14%,73.21%.
CSS left/top offset by half element size (1%×1.75%) to center on bulb. ---- */
.soul-streetlight {
position: absolute;
left: 12.0%;
top: 72.34%;
width: 1%;
height: 1.75%;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 248, 200, 0.95) 0%,
rgba(255, 215, 90, 0.70) 35%,
rgba(255, 165, 30, 0.30) 65%,
transparent 85%
);
box-shadow:
0 0 8px 4px rgba(255, 215, 80, 0.55),
0 0 20px 10px rgba(255, 160, 20, 0.22);
mix-blend-mode: screen;
opacity: 0;
z-index: 3;
pointer-events: none;
}
/* ---- Sign glow — RIGHT lamp above the sign: calm, mostly-steady warm wash
that illuminates the sign text. No flicker. Very gentle breathing.
Pixel-measured bulb: (395,738) in the 1659×948 image = 23.81%,77.85%.
CSS left/top offset by half element size (1%×1.75%) to center on bulb. ---- */
.soul-sign-glow {
position: absolute;
left: 23.9%;
top: 76.2%;
width: 1%;
height: 1.75%;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 248, 200, 0.90) 0%,
rgba(255, 215, 90, 0.65) 35%,
rgba(255, 165, 30, 0.28) 65%,
transparent 85%
);
box-shadow:
0 0 12px 6px rgba(255, 210, 75, 0.50),
0 0 30px 15px rgba(255, 155, 20, 0.18);
mix-blend-mode: screen;
opacity: 0.76;
z-index: 3;
pointer-events: none;
animation: sign-glow-breathe 11s ease-in-out infinite;
}
@keyframes sign-glow-breathe {
0%, 100% { opacity: 0.70; }
50% { opacity: 0.82; }
}
/* ---- EQ bar overlay: 9 animated audio-meter bars inside the
"O" counter in SOUL. Must stay ENTIRELY within the O's inner
circle. Container is small and high so even the tallest bar
at peak scaleY never touches the O's bottom ring or "THEORY".
Container bottom = top + height = 40 + 6 = 46% — well inside O. ---- */
.soul-eq-overlay {
position: absolute;
left: 44%;
top: 40%;
width: 5%;
height: 6%;
z-index: 3;
pointer-events: none;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
mix-blend-mode: screen;
overflow: hidden;
opacity: 0.72;
}
.soul-eq-bar {
display: block;
width: 7%;
height: 100%;
background: linear-gradient(to top,
rgba(255, 188, 32, 0.92) 0%,
rgba(255, 158, 18, 0.72) 55%,
rgba(255, 218, 92, 0.58) 100%
);
border-radius: 1px 1px 0 0;
transform-origin: bottom center;
transform: scaleY(0.15);
}
@keyframes eq-p1 { 0%,100%{transform:scaleY(0.12)} 50%{transform:scaleY(0.74)} }
@keyframes eq-p2 { 0%,100%{transform:scaleY(0.38)} 50%{transform:scaleY(0.90)} }
@keyframes eq-p3 { 0%,100%{transform:scaleY(0.58)} 50%{transform:scaleY(0.28)} }
@keyframes eq-p4 { 0%,100%{transform:scaleY(0.18)} 50%{transform:scaleY(0.96)} }
@keyframes eq-p5 { 0%,100%{transform:scaleY(0.45)} 50%{transform:scaleY(0.62)} }
@keyframes eq-p6 { 0%,100%{transform:scaleY(0.28)} 50%{transform:scaleY(0.82)} }
@keyframes eq-p7 { 0%,100%{transform:scaleY(0.62)} 50%{transform:scaleY(0.22)} }
@keyframes eq-p8 { 0%,100%{transform:scaleY(0.35)} 50%{transform:scaleY(0.72)} }
@keyframes eq-p9 { 0%,100%{transform:scaleY(0.50)} 50%{transform:scaleY(0.18)} }
.soul-eq-bar--1 { animation: eq-p1 3.2s ease-in-out infinite; animation-delay: 0.0s; }
.soul-eq-bar--2 { animation: eq-p2 2.8s ease-in-out infinite; animation-delay: -0.8s; }
.soul-eq-bar--3 { animation: eq-p3 3.7s ease-in-out infinite; animation-delay: -1.4s; }
.soul-eq-bar--4 { animation: eq-p4 2.5s ease-in-out infinite; animation-delay: -0.3s; }
.soul-eq-bar--5 { animation: eq-p5 3.4s ease-in-out infinite; animation-delay: -2.1s; }
.soul-eq-bar--6 { animation: eq-p6 2.9s ease-in-out infinite; animation-delay: -1.7s; }
.soul-eq-bar--7 { animation: eq-p7 3.1s ease-in-out infinite; animation-delay: -0.6s; }
.soul-eq-bar--8 { animation: eq-p8 3.5s ease-in-out infinite; animation-delay: -2.8s; }
.soul-eq-bar--9 { animation: eq-p9 2.7s ease-in-out infinite; animation-delay: -1.2s; }
/* ---- Tagline: upper-center, in the darker atmospheric zone ABOVE the gold title ----
Gold title sits at ~y=28-58% of the wide image; tagline at top: 20%
materialises in the moody upper space well above the title. ---- */
.soul-content {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
z-index: 4;
width: 60%;
text-align: center;
pointer-events: none;
}
.soul-show-link {
display: inline-block;
margin-top: 1rem;
font-family: 'Exo 2', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(212,172,60,0.35);
padding-bottom: 2px;
transition: border-color 0.2s;
}
.soul-show-link:hover,
.soul-show-link:focus {
border-bottom-color: var(--gold);
outline: none;
}
/* Slow hypnotic loop — PURE OPACITY only, no position or letter-spacing movement.
fade in → breathe with warm glow → fade out completely → brief pause → repeat (22s) */
.soul-meta {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.05rem, 2.8vw, 1.55rem);
color: rgba(255,235,175,0.95);
letter-spacing: 0.04em;
margin: 0;
animation: soul-tagline-cycle 22s linear infinite;
}
@keyframes soul-tagline-cycle {
/* FADE IN: 0-22% (0-4.8s) — slow opacity climb */
0% { opacity: 0; text-shadow: none; }
22% { opacity: 1; text-shadow: none; }
/* BREATHE: 22-70% (4.8-15.4s) — two slow swells with warm gold glow */
30% { opacity: 0.30; text-shadow: none; }
42% { opacity: 1; text-shadow: 0 0 14px rgba(255,220,100,0.88), 0 0 28px rgba(255,180,50,0.52), 0 0 50px rgba(255,150,20,0.24); }
52% { opacity: 0.33; text-shadow: none; }
63% { opacity: 1; text-shadow: 0 0 16px rgba(255,220,100,0.82), 0 0 30px rgba(255,180,50,0.46); }
/* DISSIPATE: 70-88% (15.4-19.4s) — fade decisively to ZERO */
70% { opacity: 1; text-shadow: none; }
88% { opacity: 0; text-shadow: none; } /* fully gone — linear guarantees true 0 */
/* PAUSE: 88-100% (19.4-22s) — hold invisible, clean gap before loop */
100% { opacity: 0; text-shadow: none; }
}
/* ---- Reduced motion: static image + tagline visible, no animation ---- */
@media (prefers-reduced-motion: reduce) {
.soul-drift-frame { animation: none; } /* stops Ken Burns; children freeze with it */
.soul-win { transition: none; }
.soul-smoke-canvas { display: none; }
.soul-embers { display: none; }
.soul-streetlight { opacity: 0.82; } /* JS sets steady-on for reduced-motion */
.soul-sign-glow { animation: none; opacity: 0.76; }
.velvet-candle-glow { animation: none; opacity: 0.80; }
.velvet-candle-flame { animation: none; opacity: 0.88; }
.soul-eq-bar { animation: none; transform: scaleY(0.55); }
.soul-meta { animation: none; opacity: 1; }
}
/* =========================================================
VELVET HOURS WORLD — static background, structured for
future layered effects (same pattern as Soul Theory).
Image: velvet hours chaise.png — 1536×1024 (3:2 ratio).
"VELVET Hours" title is baked in at lower-left of artwork;
object-position: left bottom protects it from any cropping
on narrow screens where min-height overrides the aspect-ratio.
isolation: isolate pre-wires mix-blend-mode containment for
any future overlay layers.
========================================================= */
.world--velvet-hours {
position: relative;
width: 100%;
aspect-ratio: 1536 / 1024;
min-height: 340px;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
isolation: isolate;
}
.velvet-bg {
position: absolute;
inset: 0;
}
.velvet-bg__img {
width: 100%;
height: 100%;
object-fit: cover;
/* Anchor lower-left so "VELVET Hours" title stays visible
if the image is cropped on very narrow viewports */
object-position: left bottom;
display: block;
}
/* ---- Velvet Hours: candle flicker — main votive candle, bottom-right.
Two layers positioned over the candle at ~left:87%, top:82%:
1. velvet-candle-glow — the ambient light pool the flame throws.
Larger oval, very slow and irregular breathing (17 s cycle).
Radiates down toward the surface as well as up around the flame.
2. velvet-candle-flame — the flame body itself.
Smaller, pivots from transform-origin:bottom center (the wick).
Irregular 7.3 s cycle with asymmetric keyframe stops so it never
settles into an obvious repeating pulse. Small lateral sways (±2–3 px)
and scaleX/Y variations mimic a calm real flame in still air.
Both use mix-blend-mode:screen — blends warmth into the artwork
without sitting on top of it as an obvious overlay.
Left values are pre-adjusted so the center of each element lands
at 87% — avoids stacking translateX(-50%) with animated transforms.
---- */
.velvet-candle-glow {
position: absolute;
left: 86.25%; /* 87.5% center − 1.25% (half of 2.5% width) */
top: 51%; /* tight halo around the tall slim flame */
width: 2.5%;
height: 4.5%;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 55%,
rgba(255, 190, 55, 0.38) 0%,
rgba(255, 135, 18, 0.16) 45%,
rgba(180, 62, 0, 0.05) 68%,
transparent 85%
);
mix-blend-mode: screen;
z-index: 2;
pointer-events: none;
animation: velvet-glow-breathe 17s ease-in-out infinite;
}
@keyframes velvet-glow-breathe {
/* Long irregular breathing — the gap between peaks is never the same */
0% { opacity: 0.80; }
7% { opacity: 0.90; }
13% { opacity: 0.74; }
21% { opacity: 0.86; }
28% { opacity: 0.92; }
36% { opacity: 0.70; }
42% { opacity: 0.84; }
49% { opacity: 0.90; }
55% { opacity: 0.76; }
62% { opacity: 0.88; }
70% { opacity: 0.94; }
76% { opacity: 0.68; }
83% { opacity: 0.82; }
89% { opacity: 0.78; }
95% { opacity: 0.92; }
100% { opacity: 0.80; }
}
.velvet-candle-flame {
position: absolute;
left: 87.05%; /* 87.5% center − 0.45% (half of 0.9% width) */
top: 52%; /* bottom at ~56.5%, flame sits on the wick */
width: 0.9%;
height: 4.5%;
border-radius: 50% 50% 38% 38%;
background: radial-gradient(ellipse at 50% 60%,
rgba(255, 248, 185, 0.94) 0%,
rgba(255, 205, 65, 0.66) 36%,
rgba(255, 130, 12, 0.28) 68%,
transparent 88%
);
mix-blend-mode: screen;
z-index: 2;
pointer-events: none;
transform-origin: bottom center;
animation: velvet-flame-flicker 7.3s linear infinite;
}
@keyframes velvet-flame-flicker {
/* Asymmetric stops + values — no two "quiet" stretches are equal length.
Lateral sways keep the flame feeling alive without being dramatic.
scaleX widens on a lean, scaleY drops slightly (flame compresses in wind). */
0% { opacity: 0.88; transform: scaleX(1.00) scaleY(1.00) translateX(0px); }
5% { opacity: 0.78; transform: scaleX(1.06) scaleY(0.96) translateX(1px); }
9% { opacity: 0.91; transform: scaleX(0.97) scaleY(1.04) translateX(-1px); }
15% { opacity: 0.84; transform: scaleX(1.03) scaleY(0.98) translateX(0px); }
20% { opacity: 0.60; transform: scaleX(1.10) scaleY(0.91) translateX(2px); }
24% { opacity: 0.88; transform: scaleX(0.96) scaleY(1.04) translateX(-1px); }
30% { opacity: 0.93; transform: scaleX(1.01) scaleY(1.02) translateX(0px); }
35% { opacity: 0.76; transform: scaleX(1.07) scaleY(0.94) translateX(-2px); }
40% { opacity: 0.89; transform: scaleX(0.98) scaleY(1.06) translateX(1px); }
46% { opacity: 0.82; transform: scaleX(1.02) scaleY(1.00) translateX(0px); }
52% { opacity: 0.91; transform: scaleX(0.95) scaleY(1.05) translateX(1px); }
57% { opacity: 0.64; transform: scaleX(1.11) scaleY(0.89) translateX(-3px); }
62% { opacity: 0.87; transform: scaleX(1.01) scaleY(1.01) translateX(0px); }
68% { opacity: 0.93; transform: scaleX(0.96) scaleY(1.05) translateX(0px); }
74% { opacity: 0.79; transform: scaleX(1.05) scaleY(0.95) translateX(2px); }
79% { opacity: 0.89; transform: scaleX(1.00) scaleY(1.01) translateX(-1px); }
85% { opacity: 0.73; transform: scaleX(1.08) scaleY(0.92) translateX(1px); }
90% { opacity: 0.91; transform: scaleX(0.97) scaleY(1.05) translateX(-1px); }
95% { opacity: 0.85; transform: scaleX(1.02) scaleY(0.99) translateX(0px); }
100% { opacity: 0.88; transform: scaleX(1.00) scaleY(1.00) translateX(0px); }
}
/* ---------------------------------------------------------
Island Soul world (1535 × 1024 px artwork)
--------------------------------------------------------- */
.world--island-soul {
position: relative;
width: 100%;
aspect-ratio: 1535 / 1024;
min-height: 340px;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
isolation: isolate;
}
.island-soul-bg {
position: absolute;
inset: 0;
}
.island-soul-bg__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* ---------------------------------------------------------
Vinyl Sundays world (1536 × 1024 px artwork)
--------------------------------------------------------- */
.world--vinyl-sundays {
position: relative;
width: 100%;
aspect-ratio: 1536 / 1024;
min-height: 340px;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
isolation: isolate;
}
.vinyl-sundays-bg {
position: absolute;
inset: 0;
}
.vinyl-sundays-bg__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* ---------------------------------------------------------
Vinyl Sundays — animation overlays
Approach: ALL overlays use inset:0 (full section coverage).
No border-radius = no visible circular boundary.
Groove overlay rotates around record centre via transform-origin.
Radial gradients are self-clipping — edges fade to transparent.
Spindle centre in image: x=46.9%, y=43.0% (remeasured)
--------------------------------------------------------- */
/* 1. Groove rotation overlay — covers full section, rotates around
record centre. No border-radius = no visible ellipse edge. */
.vs-record-spin-clip {
/* Clips sweep to record area only: inset removes VU/knob panel (top 40%).
Inner element ellipse handles the disc boundary.
Tonearm contact at one point in cycle accepted as known minor imperfection. */
position: absolute;
inset: 0;
clip-path: inset(40% 0 0 0);
pointer-events: none;
}
.vs-record-spin {
position: absolute;
inset: 0;
transform-origin: 46.9% 43.0%; /* pivot = spindle centre */
/* STATIC scaleY only — no rotation. Gradient angle is animated via
@property --sweep-angle, so the clip-path stays fixed in world space.
If transform rotated, the polygon clip would spin with it — wrong. */
transform: scaleY(0.64);
animation: vs-sweep 1.8s linear infinite;
/* Polygon clip in LOCAL space (before scaleY). After scaleY(0.64) it maps
to world space following the album sleeve's lower diagonal boundary,
with a 57px safety margin. Diagonal cutoff: world (0,485)→(676,158).
Sleeve boundary estimate: y_world ≈ 428 - 0.483×x.
Cutoff + 57px margin: y_local = 510 - 0.755×x_local. */
/* Clip to the record's verified outer ellipse (rx=789px, ry=506px,
measured via 7-point least-squares fit at v250/v251).
In LOCAL space (before scaleY), ry must be divided by 0.64 so that
after scaleY(0.64) the world ry equals the measured 506px:
rx_local = 789 / 1536 = 51.37% (no x-scaling → same in world)
ry_local = (506 / 0.64) / 1024 = 77.21% → world ry = ×0.64 = 506px ✓
Element transform is STATIC scaleY(0.64) only (no rotation since v256),
so this ellipse stays fixed in world space while --sweep-angle animates.
Anything outside the record's true boundary is excluded automatically —
no polygon notch-carving around sleeve / VU meters / knobs / tonearm. */
clip-path: ellipse(44.00% 73.35% at 46.9% 43.0%); /* rx 44% ≈ 675px — sits inside platter rim */
/* Soft light sweep — illuminates photographed grooves.
from var(--sweep-angle) rotates the arc while the clip stays fixed. */
/* Soft light sweep — illuminates photographed grooves.
v259: peak opacity raised 0.018 → 0.035 (×1.94), shape unchanged.
Arc width 150°, boundary polygon, timing all untouched. */
background: conic-gradient(
from var(--sweep-angle) at 46.9% 43.0%,
transparent 0deg,
rgba(255,215,100, 0.004) 6deg,
rgba(255,215,100, 0.027) 20deg,
rgba(255,215,100, 0.035) 30deg,
rgba(255,215,100, 0.035) 40deg,
rgba(255,215,100, 0.027) 50deg,
rgba(255,215,100, 0.004) 64deg,
transparent 70deg,
transparent 360deg
);
mix-blend-mode: screen;
pointer-events: none;
}
/* @keyframes vs-spin removed — transform is now static scaleY(0.64).
The sweep is animated via CSS @property on the conic gradient from-angle. */
@property --sweep-angle {
syntax: '