/* Hallucinophonics — shared site chrome (warm rebrand) */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Marcellus&display=swap');

:root { --bg:#0b0a0a; --panel:#131110; --ink:#efeae3; --dim:#95908a;
        --acc:#d1543a;      /* burnt red — hover / highlight   */
        --acc2:#eab2a8;     /* dusty pink — brand glow         */
        --gold:#d9a13b; --olive:#7a7434; --line:#242019; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink);
       font:15px/1.65 "Instrument Sans",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration:none; }
img { max-width:100%; display:block; }
.mono { font-family:"Instrument Sans",sans-serif; text-transform:uppercase;
        letter-spacing:.2em; font-size:12px; }
.dim { color:var(--dim); }

/* metallic caption text — silver sheen, slight per-element drift */
.metal, .eyebrow {
  background:linear-gradient(105deg,#8f8a86 0%,#efece7 22%,#7e7671 43%,
             #d8d3cd 60%,#918a83 78%,#e5e0da 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:metal-sheen 7s ease-in-out infinite alternate;
}
.metal.warm { background-image:linear-gradient(105deg,#9a7a5a,#f4dcc4 25%,
              #8a6a4e 50%,#e8c9a8 72%,#a07c58 100%); background-size:220% 100%; }
@keyframes metal-sheen { from { background-position:0% 0; } to { background-position:100% 0; } }
.metal:nth-child(odd), .eyebrow:nth-of-type(odd) { animation-duration:9s; }

/* film grain over everything */
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- nav --- */
header.site { position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(13,9,8,.82);
              backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
header.site .in { max-width:1240px; margin:0 auto; padding:21px 32px;
                  display:flex; gap:38px; align-items:center; }
header.site .brand { font-family:"Marcellus",serif; font-size:16px; letter-spacing:.3em;
                     text-transform:uppercase; color:var(--acc2); font-weight:400;
                     text-shadow:0 0 20px rgba(234,178,168,.45); }
header.site nav { margin-left:auto; display:flex; gap:32px; flex-wrap:wrap; }
header.site nav a { color:var(--dim); font-size:13.5px; letter-spacing:.17em;
                    text-transform:uppercase; font-weight:500; }
header.site nav a:hover, header.site nav a.on { color:var(--acc); }

main.page { max-width:1240px; margin:0 auto; padding:132px 28px 96px; }

/* --- scrollfx (Lusion-style) --- */
.rv { opacity:0; transform:translateY(42px);
      transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.rv.rv-in { opacity:1; transform:none; }
.w-mask { display:inline-block; overflow:hidden; vertical-align:bottom; }
.w-mask .w { display:inline-block; transform:translateY(115%) rotate(3deg);
             transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.rv-in .w-mask .w, [data-split].rv-in .w { transform:none; }
[data-split].rv { opacity:1; transform:none; }
.clipimg { clip-path:inset(0 0 100% 0);
           transition:clip-path 1.3s cubic-bezier(.16,1,.3,1); }
.rv-in .clipimg, .clipimg.rv-in { clip-path:inset(0 0 0% 0); }

/* --- type --- */
.eyebrow { display:inline-flex; align-items:center; gap:10px;
           font-size:12px; letter-spacing:.34em; text-transform:uppercase; font-weight:600; }
h1.display { font-family:"Marcellus",serif; font-weight:400;
             font-size:clamp(38px,5vw,74px); line-height:1.05;
             letter-spacing:.01em; margin:16px 0 12px; }
h1.display .q, h2.section .q { color:var(--acc2); }
h2.section { font-family:"Marcellus",serif; font-weight:400;
             font-size:clamp(28px,3vw,44px); letter-spacing:.01em; margin:0 0 22px; }

/* --- pills --- */
.pills { display:flex; flex-wrap:wrap; gap:10px; }
.pill { border:1px solid var(--line); color:var(--dim); padding:9px 20px;
        border-radius:999px; font-size:12px; letter-spacing:.16em;
        text-transform:uppercase; font-weight:500; transition:.2s;
        cursor:pointer; background:none; font-family:"Instrument Sans",sans-serif; }
.pill:hover { border-color:var(--acc); color:var(--acc); }
.pill.main { border-color:#5a2c1e; color:var(--acc2);
             background:linear-gradient(180deg,rgba(209,84,58,.14),rgba(209,84,58,.05)); }
.pill.main:hover { background:var(--acc); color:#140a07; border-color:var(--acc); }
.pill.on { background:var(--ink); color:#140a07; border-color:var(--ink); }

/* --- release table rows --- */
.rows { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:64px 76px 1fr auto 44px;
       gap:20px; align-items:center; padding:14px 8px;
       border-bottom:1px solid var(--line); transition:background .15s; }
.row:hover { background:#15100b; }
.row .thumb { width:56px; height:56px; object-fit:cover; outline:1px solid var(--line); }
.row .year { color:var(--dim); font-size:12px; letter-spacing:.18em; }
.row .title { font-family:"Marcellus",serif;
              font-size:clamp(18px,1.9vw,25px); letter-spacing:.01em; }
.row .tag { font-size:10px; letter-spacing:.22em; color:var(--dim);
            border:1px solid var(--line); padding:4px 10px; border-radius:999px;
            text-transform:uppercase; white-space:nowrap; }
.row .go { color:var(--dim); font-size:20px; text-align:right; transition:.15s; }
.row:hover .go { color:var(--acc); transform:translateX(4px); }
.row:hover .title { color:var(--acc2); }

/* --- footer --- */
footer.site { border-top:1px solid var(--line); margin-top:40px; }
footer.site .in { max-width:1240px; margin:0 auto; padding:36px 28px;
                  display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
footer.site .in nav { display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
footer.site a { color:var(--dim); font-size:12px; letter-spacing:.16em;
                text-transform:uppercase; }
footer.site a:hover { color:var(--acc); }
footer.site .c { color:var(--dim); font-size:12px; letter-spacing:.14em; }

/* --- responsive: keep nav on one line before the tablet layout kicks in --- */
@media (max-width: 1080px){
  header.site .in { gap:22px; }
  header.site nav { gap:18px; }
  header.site nav a { font-size:12px; letter-spacing:.12em; }
  .ni { display:none; }
}
/* --- responsive: tablet --- */
@media (max-width: 900px){
  main.page { padding:112px 20px 72px; }
  .row { grid-template-columns:52px 1fr auto 32px; }
  .row .year { display:none; }
  .row .thumb { width:44px; height:44px; }
}
/* --- responsive: mobile --- */
@media (max-width: 600px){
  header.site .in { padding:12px 18px; gap:18px; }
  header.site nav { gap:16px; }
  main.page { padding:96px 16px 64px; }
  .row { grid-template-columns:44px 1fr 24px; gap:14px; }
  .row .tag { display:none; }
  .row .title { font-size:17px; }
}
@media (hover:none){ .hoverpreview { display:none !important; } }

/* --- chrome nav icons + metallic labels --- */
header.site nav a { display:inline-flex; align-items:center; gap:8px; }
.ni { width:15px; height:15px; color:#8f8a86; animation:navfloat 6s ease-in-out infinite alternate; }
header.site nav a:nth-child(2) .ni { animation-delay:-1.1s; }
header.site nav a:nth-child(3) .ni { animation-delay:-2.2s; }
header.site nav a:nth-child(4) .ni { animation-delay:-3.3s; }
header.site nav a:nth-child(5) .ni { animation-delay:-4.4s; }
header.site nav a:hover .ni, header.site nav a.on .ni { color:var(--acc); }
.ml { background:linear-gradient(105deg,#8f8a86,#efece7 30%,#7e7671 55%,#d8d3cd 80%,#918a83);
      background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
      color:transparent; -webkit-text-fill-color:transparent;
      animation:metal-sheen 8s ease-in-out infinite alternate; }
header.site nav a:hover .ml, header.site nav a.on .ml {
  background-image:linear-gradient(105deg,#eab2a8,#f6d9c9 35%,#d1543a 65%,#eab2a8); }
@keyframes navfloat { from { transform:translateY(.6px); } to { transform:translateY(-.6px); } }

/* --- minimal hover "shader" moments: fast sheen sweeps, nothing disruptive --- */
@keyframes sheen-fast { from { background-position:-60% 0; } to { background-position:160% 0; } }
header.site nav a .ml { transition:letter-spacing .45s cubic-bezier(.16,1,.3,1); }
header.site nav a:hover .ml { animation:sheen-fast .85s cubic-bezier(.2,.8,.2,1) both;
                              letter-spacing:.21em; }
header.site .brand { transition:text-shadow .5s; }
header.site .brand:hover { text-shadow:0 0 30px rgba(234,178,168,.75); }
.pill { position:relative; overflow:hidden; }
.pill::after { content:""; position:absolute; inset:0; pointer-events:none;
  transform:translateX(-140%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(239,234,227,.16), transparent);
  transition:transform .9s cubic-bezier(.16,1,.3,1); }
.pill:hover::after { transform:translateX(140%) skewX(-18deg); }
.row:hover .title, .fcard:hover .ftitle {
  background:linear-gradient(105deg,#eab2a8,#f6dcc9 35%,#d1543a 60%,#eab2a8);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:sheen-fast 1.1s cubic-bezier(.2,.8,.2,1) both; }
footer.site a { transition:letter-spacing .45s; }
footer.site a:hover { letter-spacing:.22em; }

/* merch is hidden until the real lineup + buy links exist — delete this
   rule (and the twin in index.html) to enable it again */
a[href="merch.html"] { display:none !important; }

/* footer nav: align the icons with the labels (they sat on the text baseline) */
footer.site nav a { display:inline-flex; align-items:center; gap:7px; }
footer.site .ni { width:13px; height:13px; animation:none; }

/* camera-viewfinder video cover — built by assets/js/video-cover.js.
   Shared base first (spatial relies on it; videos/release pages carry the
   same rules inline and may override the ring size), then the scene:
   accent room + light leak + scanlines, viewfinder brackets, REC dot,
   timecode — and the FULL cover art framed centre. */
.vcover { position:absolute; inset:0; z-index:2; cursor:pointer;
  transition:opacity 1.8s cubic-bezier(.16,1,.3,1); }
.vplayer:hover .vcover, .vcover.off { opacity:0; pointer-events:none; }
.vcover .vplay { position:absolute; inset:0; display:grid; place-items:center; }
.vcover .vplay span { width:64px; height:64px; border:1px solid rgba(239,234,227,.75);
  border-radius:50%; display:grid; place-items:center; font-size:20px;
  color:var(--ink); background:rgba(11,10,10,.35); backdrop-filter:blur(6px);
  transition:transform 1s cubic-bezier(.16,1,.3,1); }
.vplayer:hover .vplay span { transform:scale(1.1); }
.vcover .vscene { position:absolute; inset:0; overflow:hidden; background:#0b0a0a; }
.vcover .vleak, .vpscene .vleak { position:absolute; top:-22%; left:-12%; width:72%;
  aspect-ratio:1; border-radius:50%; filter:blur(46px); opacity:.34;
  background:radial-gradient(circle, var(--vc), transparent 62%);
  animation:vleak 13s ease-in-out infinite alternate; }
@keyframes vleak { from { transform:translate(-10%,-14%) scale(1); }
                   to   { transform:translate(88%,24%) scale(1.25); } }
.vcover .vscene::before { content:""; position:absolute; inset:0;
  background:radial-gradient(125% 95% at 50% 50%, transparent 55%, rgba(5,4,3,.8)); }
.vcover .vscene::after { content:""; position:absolute; inset:0; opacity:.07;
  background:repeating-linear-gradient(180deg, transparent 0 2px, #000 2px 3px); }
.vcover .vsartw { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  height:72%; aspect-ratio:1/1; border-radius:3px; overflow:hidden;
  outline:1px solid rgba(239,234,227,.16);
  box-shadow:0 12px 46px rgba(0,0,0,.6), 0 0 90px -18px var(--vc); }
.vcover .vsart { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcover .vfx { position:absolute; inset:0; pointer-events:none; }
/* warm site-tone vignette mask so any artwork sits in the page's palette */
.vcover .vfx.grade { mix-blend-mode:multiply; background:
  radial-gradient(125% 125% at 50% 32%, transparent 52%, rgba(24,16,11,.62)),
  linear-gradient(180deg, rgba(209,84,58,.10), transparent 42%, rgba(11,10,10,.28)); }
/* ambient sheen sweeping the art every few seconds, like the nav labels */
.vcover .vfx.sheen { mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 32%, rgba(242,231,220,.13) 46%,
             rgba(234,178,168,.18) 50%, transparent 66%);
  transform:translateX(-160%) skewX(-14deg);
  animation:vsheen 7s cubic-bezier(.4,.1,.2,1) infinite; }
@keyframes vsheen { 0%,52% { transform:translateX(-160%) skewX(-14deg); }
  82%,100% { transform:translateX(160%) skewX(-14deg); } }
.vcover .vsbr { position:absolute; width:24px; height:24px; opacity:.45;
  border:1.5px solid #efeae3; }
.vcover .vsbr.tl { top:13px; left:14px;   border-right:0; border-bottom:0; }
.vcover .vsbr.tr { top:13px; right:14px;  border-left:0;  border-bottom:0; }
.vcover .vsbr.bl { bottom:13px; left:14px;  border-right:0; border-top:0; }
.vcover .vsbr.br { bottom:13px; right:14px; border-left:0;  border-top:0; }
.vcover .vsrec { position:absolute; top:16px; right:24px; color:#efeae3; opacity:.6;
  font-size:10px; letter-spacing:.28em; }
.vcover .vsrec::before { content:""; display:inline-block; width:7px; height:7px;
  border-radius:50%; background:#d1543a; margin-right:7px;
  animation:vrec 1.7s ease-in-out infinite; }
@keyframes vrec { 0%,100% { opacity:.3; } 50% { opacity:1; } }
.vcover .vstc { position:absolute; bottom:14px; left:24px; color:#95908a;
  font-size:10px; letter-spacing:.22em; }

/* CRT life — the scene behaves like a warm tube screen: a refresh band
   rolls down, the tube breathes, and the art gives one rare micro-glitch */
.vcover .vscan { position:absolute; left:0; right:0; top:0; height:26%;
  mix-blend-mode:screen; pointer-events:none; opacity:.55;
  background:linear-gradient(180deg, transparent, rgba(239,234,227,.09) 42%,
    rgba(234,178,168,.15) 50%, rgba(239,234,227,.09) 58%, transparent);
  animation:vscan 6.5s linear infinite; }
@keyframes vscan { from { transform:translateY(-120%); } to { transform:translateY(520%); } }
.vcover .vscene { animation:vtube 4.4s steps(1,end) infinite; }
@keyframes vtube { 0%,91%,94%,100% { opacity:1; } 92% { opacity:.93; } 96% { opacity:.97; } }
.vcover .vsartw { animation:vjolt 11s steps(1,end) infinite; }
@keyframes vjolt {
  0%, 80.4%, 82.4%, 100% { transform:translate(-50%,-50%); }
  81%   { transform:translate(-50.7%,-50%) skewX(.5deg); }
  81.7% { transform:translate(-49.4%,-50%) skewX(-.4deg); } }

/* hover: slow accent bloom around the frame; while playing: a subtle
   philips-hue-style breathing glow in the release accent */
.vplayer { transition:box-shadow 1.6s cubic-bezier(.16,1,.3,1); }
.vplayer:hover { box-shadow:0 0 80px -26px var(--vc); }
.vplayer.playing { animation:vhue 7s ease-in-out infinite alternate; }
@keyframes vhue { from { box-shadow:0 0 55px -28px var(--vc); }
                  to   { box-shadow:0 0 110px -12px var(--vc); } }

/* a few quiet music notes drift up around the frame as the cover dissolves */
.vplayer .vnotes { position:absolute; inset:0; pointer-events:none; z-index:3; }
.vplayer .vnotes s { position:absolute; text-decoration:none; color:var(--vc);
  font-size:15px; opacity:0; filter:drop-shadow(0 0 7px var(--vc)); }
.vplayer:hover .vnotes s { animation:vnote 2.6s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes vnote { 0% { opacity:0; transform:translateY(8px) rotate(-6deg); }
  22% { opacity:.7; } 100% { opacity:0; transform:translateY(-52px) rotate(8deg); } }
.vplayer .vnotes s:nth-child(1) { left:7%;  bottom:16%; }
.vplayer .vnotes s:nth-child(2) { left:49%; bottom:7%;  animation-delay:.4s; }
.vplayer .vnotes s:nth-child(3) { right:8%; bottom:20%; animation-delay:.8s; }

/* apple-vision-pro scene for spatial thumbs — the full cover art repeats in
   EACH eye lens (square art, square-ish lenses: no ugly crop), under one
   curved glass front. Slight perspective tilt sells the 3D. */
.vpscene { position:absolute; inset:0; overflow:hidden; background:#0b0a0a;
  perspective:340px; }
.vpscene::before { content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(5,4,3,.75)); }
.vpscene .visor { position:absolute; left:50%; top:50%;
  transform:translate(-50%,-52%) rotateX(8deg); transform-style:preserve-3d;
  width:76%; aspect-ratio:2.05/1; border-radius:999px; padding:2.6%;
  /* glossy machined aluminium — cool silver, hard speculars (not plastic),
     kept a couple of stops down so it doesn't blaze against the dark page */
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 16%),
    linear-gradient(140deg,#d9d8d6 0%,#a5a4a2 10%,#6f6e6c 26%,#c0bfbd 40%,
                    #454442 58%,#adacaa 74%,#5c5b59 88%,#cfcecb 100%);
  box-shadow:0 22px 50px rgba(0,0,0,.75),
             0 1px 1px rgba(255,255,255,.5) inset,
             0 -2px 7px rgba(0,0,0,.5) inset,
             0 0 95px -14px var(--vc); }
/* strap stubs reaching back from the shell — small, tucked behind */
.vpscene .visor::before, .vpscene .visor::after { content:""; position:absolute;
  top:31%; height:30%; width:5%; z-index:-1;
  background:linear-gradient(180deg,#413e39,#12100c);
  box-shadow:0 4px 10px rgba(0,0,0,.5); }
.vpscene .visor::before { left:-4%; border-radius:50% 0 0 50%; transform:skewY(6deg); }
.vpscene .visor::after  { right:-4%; border-radius:0 50% 50% 0; transform:skewY(-6deg); }
/* digital crown (right) + capture button (left) on the top edge */
.vpscene .visor .crown, .vpscene .visor .vbtn { position:absolute; z-index:-1;
  background:linear-gradient(180deg,#d5d4d2,#8b8a88 55%,#4a4947);
  box-shadow:0 1px 2px rgba(0,0,0,.6); }
.vpscene .visor .crown { top:-6%; right:13%; width:6.5%; height:14%;
  border-radius:30%/50%; }
.vpscene .visor .vbtn { top:-4.5%; left:14%; width:11%; height:9%;
  border-radius:999px; }
/* one dark curved glass front, recessed into the frame (bezel groove) */
.vpscene .vglass { position:absolute; inset:2.6%; border-radius:999px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  gap:5%;
  background:radial-gradient(120% 150% at 50% -20%, #26242a, #0a090c 55%, #060508);
  box-shadow:inset 0 0 16px 4px rgba(0,0,0,.85),
             inset 0 1px 0 rgba(255,255,255,.10); }
/* the two eye panels float in the glass — art never fills the whole front */
.vpscene .lens { position:relative; width:31%; aspect-ratio:1/1;
  overflow:hidden; border-radius:24%;
  box-shadow:0 5px 18px rgba(0,0,0,.6), 0 0 28px -6px var(--vc); }
.vpscene .lens img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; }
/* warm site-tone grade + glassy depth on each eye panel */
.vpscene .lens::after { content:""; position:absolute; inset:0; border-radius:24%;
  background:
    radial-gradient(90% 60% at 30% 16%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(209,84,58,.09), transparent 40%, rgba(8,7,10,.42)),
    radial-gradient(125% 125% at 50% 52%, transparent 60%, rgba(4,3,2,.5));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
/* curved reflections across the whole glass front */
.vpscene .vglass::after { content:""; position:absolute; inset:0; z-index:2;
  border-radius:999px; pointer-events:none;
  background:radial-gradient(130% 85% at 50% -18%, rgba(255,255,255,.17),
             rgba(255,255,255,.04) 40%, transparent 58%),
             linear-gradient(112deg, transparent 34%, rgba(255,255,255,.07) 46%,
             transparent 58%),
             radial-gradient(120% 170% at 50% 135%, rgba(120,160,255,.08), transparent 55%); }