/* Approved Rock Edison landing-page composition and particle atmosphere. */
:root { color-scheme:dark; font-family:Arial,Helvetica,sans-serif; background:#000; color:#f0f0ef; --overlay:#151819; --ink:#070a0b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; padding:12px; display:grid; place-items:center; background:#000; }
button { font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid #fff; outline-offset:5px; }
button:not(:disabled) { cursor:pointer; }
::selection { color:#050708; background:#e5e5df; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.stage { position:relative; isolation:isolate; width:min(100%,calc((100svh - 24px) * 1.59879)); aspect-ratio:1586/992; overflow:hidden; border-radius:12px; background:#000; container-type:inline-size; }
.visual { position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 10.483871% 0); }
.reference,.atmosphere { position:absolute; inset:0; width:100%; height:100%; display:block; }
.reference,.scene-source { display:none; }
.scene { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.atmosphere { inset:-14% -12%; width:124%; height:128%; pointer-events:none; opacity:0; transition:opacity 1.5s ease-in-out; }
.atmosphere.particles-ready { opacity:1; }
.wordmark { position:absolute; left:10.7%; top:7.25%; width:34%; height:11.5%; pointer-events:none; }
.wordmark-art { display:block; width:100%; height:100%; overflow:hidden; }
.wordmark-visible { display:none; }
.frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.frame path { fill:var(--overlay); stroke:none; }
.spine { position:absolute; inset:0 auto 34% 0; width:6.3%; display:flex; align-items:center; flex-direction:column; }
.home { position:absolute; top:2.3%; left:10%; width:78%; height:12.2%; border:0; background:transparent; padding:0; transform:scale(.8); transform-origin:center; }
/* Use the selected transparent PNG directly, preserving its native colors. */
.home img { display:block; width:100%; height:100%; object-fit:contain; }
.release { position:absolute; left:72.76%; top:81.25%; right:2.25%; bottom:auto; height:7.5116cqw; transform:translateY(-50%); display:grid; grid-template-columns:7.5116cqw minmax(0,1fr); column-gap:1.276cqw; align-items:center; }
.cover { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:1px solid #a0a4a5; border-radius:1px; }
.release-copy { min-width:0; padding-top:0; }
.release h2 { font-family:Arial,Helvetica,sans-serif; font-size:1.75cqw; font-weight:700; font-style:italic; letter-spacing:-.05em; white-space:normal; overflow-wrap:anywhere; margin:0 0 1.12cqw; line-height:1.15; }
.release-actions { display:flex; gap:.84cqw; }
.release-actions button { position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:.55cqw; padding:.55cqw .9cqw; font-size:.9cqw; line-height:1.3; border:1px solid #b8bbba; border-radius:100px; background:transparent; white-space:nowrap; }
.release-actions button::before { content:""; position:absolute; inset:-4px 0; }
.release-actions button:hover { background:#ffffff12; border-color:white; }
.release-actions svg { width:.9cqw; height:.9cqw; flex:none; fill:currentColor; }
.footer { position:absolute; inset:88.3% 0 0; border:0; background:transparent; display:grid; grid-template-columns:31.4% 37.2% 31.4%; padding:1.75cqw 2.4cqw 1.2cqw; align-items:start; }
.copyright { font-family:Consolas,'Courier New',monospace; letter-spacing:.16em; font-size:.89cqw; white-space:nowrap; padding-top:.65cqw; }
.social { display:flex; align-items:center; justify-content:space-evenly; border-inline:1px solid #383c3d; min-height:2.1cqw; }
.icon-button { width:3.05cqw; height:2.5cqw; border:0; background:none; display:grid; place-items:center; padding:.2cqw; }
.icon-button svg { width:1.8cqw; height:1.8cqw; fill:currentColor; }
.icon-button:hover { color:#c9cdce; }
.footer-links-row { display:flex; align-items:center; gap:1.45cqw; }
.footer-links-row::before { content:""; height:1.2cqw; width:1px; background:#777c7c; margin-right:.8cqw; }
.footer-links-row:last-child::before { display:none; }
.footer-links-row:last-child button { color:#b5b8b7; font-size:.84cqw; }
.motion { position:absolute; left:8.35%; bottom:13.4%; width:30px; height:30px; border:1px solid #a3aaa85c; border-radius:50%; display:grid; place-items:center; padding:7px; background:#080b0ba8; color:#d9dddd; }
.motion svg { width:100%; height:100%; fill:currentColor; }
.motion:hover { background:#15191a; border-color:#f0f0ef; }
.motion .play { display:none; }
.motion[aria-pressed="true"] .pause { display:none; }
.motion[aria-pressed="true"] .play { display:block; }
.render-note { position:absolute; left:10.7%; top:21%; margin:0; background:#080b0be8; font-size:13px; padding:8px 12px; max-width:75%; }
.render-note[hidden] { display:none; }
/* At narrow widths the original 1586:992 composition remains the visual
   authority; HTML controls reflow so their labels and focus targets stay usable. */
@media(max-width:760px) {
 body { display:block; padding:8px; }
 .stage { width:100%; min-height:calc(100svh - 16px); aspect-ratio:auto; padding-top:142px; padding-bottom:320px; }
 .stage::before { content:""; position:absolute; inset:0 0 140px; z-index:-1; border-radius:12px; background:var(--overlay); }
 .visual { top:145px; bottom:280px; left:10px; right:10px; border-radius:24px; clip-path:none; }
 .reference,.scene { height:250%; width:auto; max-width:none; top:-57.5%; left:70%; transform:translateX(-70%); object-fit:fill; }
 .atmosphere { inset:-14% -12%; width:124%; height:128%; }
 .frame { display:none; }
 .wordmark { top:22px; left:24px; width:calc(100% - 48px); height:auto; z-index:2; }
 .wordmark-art { display:none; }
 .wordmark-visible { display:block; margin:0; font-size:clamp(26px,7vw,42px); letter-spacing:.06em; font-style:italic; font-weight:400; line-height:1.2; color:#f40000; }
 .wordmark-visible strong { font-weight:800; }
 .wordmark-visible small { color:#f0f0ef; display:block; font:10px/2.5 Arial,sans-serif; letter-spacing:.36em; font-style:normal; }
 .spine { top:101px; left:22px; right:22px; width:auto; height:42px; bottom:auto; z-index:3; }
 .home { display:none; }
 .release { top:auto; transform:none; left:calc(22px + (100% - 44px)*.15); right:22px; bottom:167.4px; height:81.2px; background:transparent; padding:7px 0; display:grid; grid-template-columns:67.2px minmax(0,1fr); gap:14px; }
 .cover { width:67.2px; }
 .release-copy { padding-top:0; }
 .release h2 { font-size:clamp(14px,3.71vw,22.4px); margin-bottom:12.6px; }
 .release-actions { gap:8.4px; }
 .release-actions button { font-size:12px; padding:6px 8px; gap:5px; }
 .release-actions svg { width:11px; height:11px; }
 .footer { top:auto; height:132px; bottom:0; padding:14px 22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
 .copyright { font-size:10px; letter-spacing:.09em; padding:0; order:2; }
 .social { width:100%; border:0; min-height:28px; }
 .icon-button { width:36px; height:32px; padding:4px; }
 .icon-button svg { width:21px; height:21px; }
 .footer-links-row { gap:9px; }
 .footer-links-row::before { display:none; }
 .footer-links-row:last-child button { font-size:10px; }
 .motion { left:24px; bottom:282px; width:32px; height:32px; }
 .render-note { left:24px; top:155px; max-width:calc(100% - 48px); font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .atmosphere { transition:none; } }

button:disabled { cursor:default; }