/* ============================================
ICDTOMO — Kone personal site
gothic / black-metal sigil aesthetic
============================================ */
@font-face{
font-family:'Darkhorn';
src:url('/fonts/Darkhorn.otf') format('opentype');
font-weight:400;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:'AngelWish';
src:url('/fonts/AngelWish.otf') format('opentype');
font-weight:400;
font-style:normal;
font-display:swap;
}
:root{
--bg: #000000;
--bg-2: #050505;
--ink: #e8e3d8; /* bone white */
--ink-2: #9a9389; /* warm muted */
--ink-3: #5a544c; /* dim */
--ink-4: #2a2622; /* faintest */
--line: rgba(255,255,255,.07);
--line-2: rgba(255,255,255,.03);
--card-bg: rgba(8,8,8,.55);
--glow: rgba(232,227,216,.18);
--blood: #6b0a0a;
--red: #b81818;
--red-glow: rgba(184,24,24,.55);
--red-deep: #7a0d0d;
--lime: #d8ff3a;
--lime-glow: rgba(216,255,58,.5);
--blue: #3a8eff;
--blue-glow: rgba(58,142,255,.55);
--violet: #8b5cff;
--violet-glow: rgba(139,92,255,.55);
--gold: #ffb84a;
--gold-glow: rgba(255,184,74,.55);
--display: 'Darkhorn','UnifrakturCook','Pirata One',serif;
--max: 1100px;
--pad: clamp(20px, 4vw, 56px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:auto;min-height:100%}
html{
scroll-behavior:smooth;
scroll-snap-type:y proximity;
scroll-padding-top:0;
}
.hero,
.section,
.ayah-section,
.site-foot{
scroll-snap-align:start;
scroll-snap-stop:normal;
}
@media (max-width:680px){
html{scroll-snap-type:none}
}
body{
margin:0;
font-family:'Cormorant Garamond', Georgia, serif;
background:var(--bg);
color:var(--ink);
cursor:none;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
body.intro-locked{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:none}
input{font-family:inherit}
/* ============================================
Background layers
============================================ */
.bg-grad{
position:fixed;inset:0;z-index:0;
background:
radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,255,255,.04), transparent 60%),
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(107,10,10,.06), transparent 70%),
#000;
pointer-events:none;
}
.bg-grad::after{
content:"";
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:80px 80px;
mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
opacity:.4;
}
/* floating Kone sigils */
.bg-sigils{
position:fixed;inset:0;z-index:1;pointer-events:none;
overflow:hidden;
}
.bg-sigil{
position:absolute;
filter:invert(1) brightness(1) contrast(1.4) blur(.3px);
mix-blend-mode:screen;
opacity:.05;
user-select:none;
pointer-events:none;
}
.bg-sigil-center{
width:min(95vh,95vw);
top:50%;left:50%;
transform:translate(-50%,-50%);
opacity:.022;
animation:sigilCenterRot 120s linear infinite;
}
@keyframes sigilCenterRot{to{transform:translate(-50%,-50%) rotate(360deg)}}
.bg-sigil-1{ width:240px; top:8%; left:6%; animation:sigilFloat1 22s ease-in-out infinite }
.bg-sigil-2{ width:180px; top:14%; right:8%; animation:sigilFloat2 26s ease-in-out infinite }
.bg-sigil-3{ width:200px; top:62%; left:10%; animation:sigilFloat3 28s ease-in-out infinite }
.bg-sigil-4{ width:160px; top:72%; right:6%; animation:sigilFloat4 24s ease-in-out infinite }
@keyframes sigilFloat1{
0%,100%{transform:translate(0,0) rotate(-3deg);opacity:.05}
50%{transform:translate(20px,-15px) rotate(3deg);opacity:.08}
}
@keyframes sigilFloat2{
0%,100%{transform:translate(0,0) rotate(2deg);opacity:.04}
50%{transform:translate(-25px,18px) rotate(-4deg);opacity:.07}
}
@keyframes sigilFloat3{
0%,100%{transform:translate(0,0) rotate(-2deg);opacity:.05}
50%{transform:translate(18px,-22px) rotate(4deg);opacity:.08}
}
@keyframes sigilFloat4{
0%,100%{transform:translate(0,0) rotate(3deg);opacity:.04}
50%{transform:translate(-20px,-12px) rotate(-3deg);opacity:.07}
}
@media (max-width:600px){
.bg-sigil-1,.bg-sigil-2,.bg-sigil-3,.bg-sigil-4{width:130px;opacity:.04}
}
/* spinning dogs — purely decorative now. Behind the content. No click. */
.spinner-hit{
position:fixed;
top:50%;
width:160px;height:160px;
display:flex;align-items:center;justify-content:center;
z-index:1;
pointer-events:none;
transform:translateY(-50%);
}
.spinner-hit-left{ left:max(14px, calc(50% - 600px)) }
.spinner-hit-right{ right:max(14px, calc(50% - 600px)) }
.spinner-hit:hover{
background:radial-gradient(circle, rgba(184,24,24,.08), transparent 65%);
}
.spinner{
width:clamp(60px, 7vw, 92px);
height:auto;
display:block;
pointer-events:none;
user-select:none;
opacity:.78;
}
.spinner-left{
animation:spinL 18s linear infinite, breathL 5s ease-in-out infinite;
}
.spinner-right{
animation:spinR 18s linear infinite, breathR 5s ease-in-out infinite;
}
@keyframes spinL{from{transform:rotate(0deg)} to{transform:rotate(-360deg)}}
@keyframes spinR{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
@keyframes breathL{
0%,100%{filter:drop-shadow(0 0 14px rgba(120,200,160,.25))}
50%{filter:drop-shadow(0 0 24px rgba(120,200,160,.5))}
}
@keyframes breathR{
0%,100%{filter:drop-shadow(0 0 14px rgba(180,80,140,.25))}
50%{filter:drop-shadow(0 0 24px rgba(180,80,140,.5))}
}
/* dog hover/shot states — applied via the spinner img inside hitbox */
.spinner-hit:hover .spinner{
filter:drop-shadow(0 0 28px rgba(184,24,24,.65)) brightness(1.15);
}
.spinner.shot,.spinner-left.shot,.spinner-right.shot{
animation:dogShot .65s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes dogShot{
0% {filter:drop-shadow(0 0 14px rgba(184,24,24,.4)) brightness(1)}
20% {filter:drop-shadow(0 0 40px rgba(255,30,30,.95)) brightness(2)}
100%{filter:drop-shadow(0 0 14px rgba(184,24,24,.4)) brightness(1)}
}
/* bg sigils — clickable + visible. only the giant rotating one was hidden. */
.bg-sigil{pointer-events:auto !important;cursor:none}
.bg-sigil:hover{opacity:.18 !important;filter:invert(1) brightness(1.4) contrast(1.5) !important}
/* kone-tap text — clickable instances of "Kone" */
.kone-tap{
cursor:none;
position:relative;
transition:filter .25s, color .25s;
}
.kone-tap:hover{
filter:drop-shadow(0 0 12px var(--gold-glow)) brightness(1.15);
}
/* fakemink-tap — clickable "fakemink" word, cycles between Crush + Loser Monologue */
.fakemink-tap{
cursor:none;
color:var(--red);
border-bottom:1px dashed color-mix(in srgb, var(--red) 50%, transparent);
padding-bottom:1px;
transition:color .25s, border-color .25s, text-shadow .25s, filter .25s;
}
.fakemink-tap:hover{
color:#fff;
border-bottom-color:var(--red);
text-shadow:0 0 14px var(--red-glow), 0 0 28px rgba(184,24,24,.4);
}
.fakemink-tap.triggered{
color:#fff;
text-shadow:0 0 22px #fff, 0 0 40px var(--red-glow);
animation:fakeFlash .8s ease-out;
}
@keyframes fakeFlash{
0%{filter:brightness(2.5) blur(2px)}
100%{filter:brightness(1) blur(0)}
}
/* clean swipe — soft fade + slight scale, no flash bar */
body.theme-transitioning .site{
animation:themeFade .5s cubic-bezier(.4,0,.2,1);
}
body.theme-transitioning.swipe-left .site{
animation:themeSlideLeft .5s cubic-bezier(.4,0,.2,1);
}
body.theme-transitioning.swipe-right .site{
animation:themeSlideRight .5s cubic-bezier(.4,0,.2,1);
}
@keyframes themeSlideLeft{
0% {transform:translateX(0); opacity:1}
45% {transform:translateX(-18px);opacity:0}
46% {transform:translateX(18px)}
100%{transform:translateX(0); opacity:1}
}
@keyframes themeSlideRight{
0% {transform:translateX(0); opacity:1}
45% {transform:translateX(18px);opacity:0}
46% {transform:translateX(-18px)}
100%{transform:translateX(0); opacity:1}
}
@keyframes themeFade{
0%,100%{opacity:1}
50%{opacity:0}
}
/* a thin vertical seam that sweeps across — clean accent, no full-screen flash */
body.theme-transitioning::before{
content:'';
position:fixed;top:0;bottom:0;left:0;
width:2px;
z-index:9990;pointer-events:none;
background:linear-gradient(180deg, transparent, #c4b6e6 30%, #fff 50%, #c4b6e6 70%, transparent);
box-shadow:0 0 30px rgba(196,182,230,.6), 0 0 60px rgba(196,182,230,.3);
animation:themeSeam .5s cubic-bezier(.4,0,.2,1);
}
body.theme-transitioning.swipe-right::before{animation-direction:reverse}
@keyframes themeSeam{
0% {transform:translateX(-10px);opacity:0}
10% {opacity:1}
90% {opacity:1}
100%{transform:translateX(100vw);opacity:0}
}
/* theme-flash — small toast that confirms theme switch */
.theme-flash{
position:fixed;
top:20px;left:50%;transform:translateX(-50%) translateY(-20px);
z-index:10002;
padding:9px 22px;
background:rgba(0,0,0,.92);
border:1px solid var(--red);
color:var(--red);
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:11px;
letter-spacing:.4em;
text-transform:uppercase;
text-shadow:0 0 12px var(--red-glow);
box-shadow:0 6px 24px rgba(0,0,0,.6), 0 0 18px rgba(184,24,24,.3);
opacity:0;
pointer-events:none;
transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.theme-flash.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Kone-tap modal */
.kone-modal{
position:fixed;inset:0;z-index:10000;
display:none;
align-items:center;justify-content:center;
padding:20px;
}
.kone-modal.show{display:flex}
.km-backdrop{
position:absolute;inset:0;
background:rgba(0,0,0,.85);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
animation:kmBackdropIn .35s ease-out;
}
@keyframes kmBackdropIn{from{opacity:0}to{opacity:1}}
.km-content{
position:relative;z-index:2;
width:min(380px, 92vw);
display:flex;flex-direction:column;
align-items:center;
gap:14px;
animation:kmContentIn .55s cubic-bezier(.16,1,.3,1);
}
@keyframes kmContentIn{
from{opacity:0;transform:translateY(20px) scale(.92);filter:blur(10px)}
to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.km-frame{
width:100%;
aspect-ratio:9/16;
background:#000;
border:1px solid var(--ink-3);
box-shadow:
0 0 60px rgba(184,24,24,.4),
0 30px 80px -20px rgba(0,0,0,.95);
position:relative;
overflow:hidden;
}
.km-frame::before,.km-frame::after{
content:"";position:absolute;
width:14px;height:14px;
border:1.5px solid var(--red);
z-index:3;
}
.km-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.km-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.km-frame iframe{
width:100%;height:100%;
border:0;display:block;
}
.km-close{
position:absolute;
top:-12px;right:-12px;
z-index:4;
width:36px;height:36px;
border-radius:50%;
background:#000;
border:1px solid var(--red);
color:var(--red);
font-family:'Cormorant Garamond',serif;
font-size:24px;
line-height:1;
display:flex;align-items:center;justify-content:center;
cursor:none;
box-shadow:0 0 14px var(--red-glow);
}
.km-close:hover{background:var(--red);color:#fff}
.km-hint{
font-family:'Cinzel',serif;
font-weight:500;
font-size:9px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.4em;
}
/* THEME PICKER (top-right, below cursor picker) */
.theme-picker{
position:fixed;
top:60px;right:18px;
z-index:31;
display:flex;
gap:6px;
padding:5px;
background:rgba(0,0,0,.7);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--ink-4);
opacity:0;
transition:opacity .8s ease 1.2s;
}
body.entered .theme-picker{opacity:1}
.theme-opt{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:transparent;
border:1px solid transparent;
padding:0;
cursor:none;
position:relative;
transition:border-color .2s, transform .2s;
}
.theme-opt:hover{border-color:var(--ink-4);transform:scale(1.05)}
.theme-opt.active{border-color:var(--ink)}
.theme-swatch{
width:18px;height:18px;
border-radius:50%;
display:block;
}
.theme-opt[data-theme="default"] .theme-swatch{background:linear-gradient(135deg, #b81818 50%, #000 50%)}
.theme-opt[data-theme="purple"] .theme-swatch{background:linear-gradient(135deg, #8b5cff 50%, #1a0030 50%)}
.theme-opt[data-theme="kone"] .theme-swatch{background:linear-gradient(135deg, #d8ff3a 50%, #000 50%)}
/* THEMES — variable overrides */
body[data-theme="purple"]{
/* refined palette — dark indigo bg, lavender accent only */
--red: #a78bfa;
--red-glow: rgba(167,139,250,.32);
--red-deep: #6d28d9;
--ink: #ededf2;
--ink-2: #9ea0b3;
--ink-3: #5d6175;
--ink-4: #25283a;
--bg: #0a0a14;
--bg-2: #11111c;
/* Manrope — closest free font to Sony's SST (PlayStation house typeface) */
--display: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
background:#0a0a14 !important;
}
body[data-theme="purple"] .bg-grad{
background:
radial-gradient(ellipse 70% 40% at 50% 0%, rgba(167,139,250,.16), transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(109,40,217,.10), transparent 70%),
linear-gradient(180deg, #0a0a14 0%, #0c0d18 50%, #0a0a14 100%) !important;
}
/* Cleaner card surfaces — solid dark, thin borders, no glass */
body[data-theme="purple"] .work-card,
body[data-theme="purple"] .connect-card,
body[data-theme="purple"] .payout-card,
body[data-theme="purple"] .shoutout-card,
body[data-theme="purple"] .signal-form,
body[data-theme="purple"] .decipher,
body[data-theme="purple"] .sound-display,
body[data-theme="purple"] .ayah-frame,
body[data-theme="purple"] .puzzle-art-frame,
body[data-theme="purple"] .kf-stage{
background:rgba(255,255,255,.025) !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:12px !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
}
body[data-theme="purple"] .kf-num{
color:var(--red) !important;
text-shadow:none !important;
}
body[data-theme="purple"] .player{
background:rgba(20,20,32,.92) !important;
border-color:rgba(255,255,255,.08) !important;
border-radius:12px;
}
body[data-theme="purple"] #playBtn{
background:var(--red) !important;
border-color:var(--red) !important;
color:#0a0a14 !important;
}
/* ============================================
PS3 / PS Vita aesthetic for purple theme
— glossy lifted cards, XMB-style background wave,
subtle top highlight, soft pill-shaped buttons
============================================ */
body[data-theme="purple"]{
--ps-blue: #1d8ddc;
--ps-blue-glow: rgba(29,141,220,.45);
--ps-glass-top: rgba(255,255,255,.10);
--ps-glass-bot: rgba(255,255,255,.02);
}
/* dynamic XMB-style wave bg behind everything */
body[data-theme="purple"] .bg-grad{
background:
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(29,141,220,.35), transparent 60%),
radial-gradient(ellipse 70% 50% at 80% 90%, rgba(167,139,250,.28), transparent 60%),
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(13,30,80,.5), transparent 70%),
linear-gradient(135deg, #04060e 0%, #0a1228 40%, #14163a 70%, #0a0a14 100%) !important;
animation:psWave 18s ease-in-out infinite alternate;
background-size:140% 140%;
}
@keyframes psWave{
0% {background-position:0% 0%}
100%{background-position:100% 100%}
}
/* glossy lifted card surfaces — PS3 menu tile feel */
body[data-theme="purple"] .work-card,
body[data-theme="purple"] .connect-card,
body[data-theme="purple"] .payout-card,
body[data-theme="purple"] .shoutout-card,
body[data-theme="purple"] .signal-form,
body[data-theme="purple"] .sound-display,
body[data-theme="purple"] .ayah-frame,
body[data-theme="purple"] .puzzle-art-frame,
body[data-theme="purple"] .kf-stage,
body[data-theme="purple"] .announce-card{
background:
linear-gradient(180deg, var(--ps-glass-top) 0%, var(--ps-glass-bot) 50%, rgba(255,255,255,.04) 100%),
rgba(20,28,52,.55) !important;
border:1px solid rgba(255,255,255,.12) !important;
border-top-color:rgba(255,255,255,.22) !important;
border-radius:18px !important;
box-shadow:
0 14px 30px -10px rgba(0,0,0,.65),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(255,255,255,.18) inset,
0 -1px 0 rgba(0,0,0,.3) inset !important;
backdrop-filter:blur(14px) saturate(140%) !important;
-webkit-backdrop-filter:blur(14px) saturate(140%) !important;
position:relative;
overflow:hidden;
}
/* glossy sheen on top edge */
body[data-theme="purple"] .work-card::after,
body[data-theme="purple"] .connect-card::after,
body[data-theme="purple"] .payout-card::after,
body[data-theme="purple"] .signal-form::after{
content:'' !important;
position:absolute !important;
top:0;left:8%;right:8%;
height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
border:none !important;
pointer-events:none;
z-index:1;
}
body[data-theme="purple"] .work-card:hover{
transform:translateY(-3px);
border-color:var(--ps-blue) !important;
box-shadow:
0 20px 40px -12px rgba(29,141,220,.3),
0 0 0 1px rgba(29,141,220,.4) inset,
0 1px 0 rgba(255,255,255,.25) inset !important;
}
/* PS3-style soft pill buttons */
body[data-theme="purple"] .hbtn,
body[data-theme="purple"] .da-submit,
body[data-theme="purple"] .sf-submit,
body[data-theme="purple"] .kf-btn,
body[data-theme="purple"] .dp-post{
border-radius:999px !important;
background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
rgba(29,141,220,.85) !important;
border:1px solid rgba(255,255,255,.25) !important;
box-shadow:
0 8px 20px -4px rgba(29,141,220,.45),
0 1px 0 rgba(255,255,255,.35) inset,
0 -1px 0 rgba(0,0,0,.2) inset !important;
color:#fff !important;
}
body[data-theme="purple"] .hbtn:hover,
body[data-theme="purple"] .da-submit:hover,
body[data-theme="purple"] .sf-submit:hover,
body[data-theme="purple"] .kf-btn:hover,
body[data-theme="purple"] .dp-post:hover{
transform:translateY(-2px);
box-shadow:
0 14px 28px -4px rgba(29,141,220,.6),
0 1px 0 rgba(255,255,255,.45) inset !important;
}
/* PS3 player widget — chrome bar */
body[data-theme="purple"] .player{
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.4)),
rgba(20,28,52,.92) !important;
border:1px solid rgba(255,255,255,.16) !important;
border-radius:18px !important;
box-shadow:
0 14px 30px -8px rgba(0,0,0,.7),
0 1px 0 rgba(255,255,255,.18) inset !important;
}
body[data-theme="purple"] #playBtn{
background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0)),
var(--ps-blue) !important;
border:1px solid rgba(255,255,255,.3) !important;
border-radius:50% !important;
color:#fff !important;
box-shadow:0 4px 14px rgba(29,141,220,.5) !important;
}
body[data-theme="purple"] .ctrl-btn{
border-radius:50% !important;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)) !important;
border:1px solid rgba(255,255,255,.14) !important;
}
body[data-theme="purple"] .player-progress-fill{
background:linear-gradient(90deg, var(--ps-blue), #fff) !important;
box-shadow:0 0 10px var(--ps-blue-glow) !important;
}
/* hero PFP — chrome ring around it */
body[data-theme="purple"] .hero-pfp-frame{
border:2px solid rgba(255,255,255,.3) !important;
box-shadow:
0 0 0 1px rgba(29,141,220,.4) inset,
0 0 30px rgba(29,141,220,.4),
0 12px 30px rgba(0,0,0,.6) !important;
}
/* dashboard unlock chip — match PS aesthetic */
body[data-theme="purple"] .dash-unlock{
background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)),
var(--ps-blue) !important;
border:1px solid rgba(255,255,255,.4) !important;
color:#fff !important;
box-shadow:0 6px 18px var(--ps-blue-glow) !important;
}
/* cursor picker chrome */
body[data-theme="purple"] .cur-picker{
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.5)),
rgba(20,28,52,.85) !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:14px !important;
box-shadow:
0 8px 18px rgba(0,0,0,.5),
0 1px 0 rgba(255,255,255,.2) inset !important;
}
body[data-theme="purple"] .cur-opt{
border-radius:8px !important;
}
body[data-theme="purple"] .cur-opt.active{
background:rgba(29,141,220,.25) !important;
border-color:var(--ps-blue) !important;
box-shadow:0 0 10px var(--ps-blue-glow) !important;
}
/* duck hunt UI — console game vibe */
body[data-theme="purple"] .kf-stage{
border:1px solid rgba(255,255,255,.16) !important;
border-radius:14px !important;
box-shadow:
0 0 0 1px rgba(29,141,220,.3) inset,
0 16px 36px -10px rgba(0,0,0,.7) !important;
}
body[data-theme="purple"] .kf-num{
color:var(--ps-blue) !important;
text-shadow:0 0 18px var(--ps-blue-glow) !important;
}
/* sigil section: lift the central logo with a chrome plate */
body[data-theme="purple"] .sigil-display{
filter:drop-shadow(0 0 24px var(--ps-blue-glow)) !important;
}
/* gentle floating animation on cards (PS Vita lifelike) */
body[data-theme="purple"] .work-card{
transition:transform .35s cubic-bezier(.18,.89,.32,1.28), border-color .35s, box-shadow .35s !important;
}
/* equal-height cards so Hideout doesn't dominate the row */
body[data-theme="purple"] .work-card{
min-height:440px;
display:flex;
}
body[data-theme="purple"] .work-card-inner{
display:flex;flex-direction:column;
flex:1;
padding:24px;
}
body[data-theme="purple"] .work-card-inner .work-arrow{
margin-top:auto;
}
body[data-theme="purple"] .work-card-inner .work-tags{
margin-top:auto;
margin-bottom:14px;
}
body[data-theme="purple"] .work-card.hideout .hideout-owners{
font-size:10.5px;
padding:8px 10px;
}
body[data-theme="purple"] .work-card.hideout .hideout-owners a,
body[data-theme="purple"] .work-card.hideout .hideout-owners .ho-name{
font-size:10.5px;
}
/* PS button glyphs row — hero meta + dashboard greeting accent */
body[data-theme="purple"] .hero-meta::after{
content:'△ ◯ ✕ ☐';
display:inline-block;
margin-left:14px;
letter-spacing:.4em;
font-size:11px;
color:var(--ps-blue);
text-shadow:0 0 10px var(--ps-blue-glow);
opacity:.7;
}
/* trophy-style chip accent in section eyebrows */
body[data-theme="purple"] .section-eyebrow::before{
content:'■';
display:inline-block;
color:var(--ps-blue);
font-size:10px;
margin-right:8px;
text-shadow:0 0 8px var(--ps-blue-glow);
}
/* duck hunt — wireframe HUD overlay (PS HUD vibe) */
body[data-theme="purple"] .kf-head{
padding:10px 14px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px rgba(0,0,0,.4);
}
body[data-theme="purple"] .kf-stat .kf-num{
font-family:'Space Grotesk', system-ui, sans-serif !important;
font-weight:600 !important;
letter-spacing:-.02em !important;
}
/* chip-style status pills in purple */
body[data-theme="purple"] .work-status,
body[data-theme="purple"] .payout-status{
background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
rgba(29,141,220,.15) !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:999px !important;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset !important;
}
@media (max-width:760px){
body[data-theme="purple"] .work-card{min-height:auto}
body[data-theme="purple"] .hero-meta::after{display:none}
}
/* keep capitalization — no forced lowercase on purple */
body[data-theme="purple"] .hero-name,
body[data-theme="purple"] .section-title,
body[data-theme="purple"] .section-title .italic,
body[data-theme="purple"] .work-card h3,
body[data-theme="purple"] .gospel-line-1,
body[data-theme="purple"] .gospel-line-2,
body[data-theme="purple"] .sigil-tag,
body[data-theme="purple"] .sound-track,
body[data-theme="purple"] .foot-mark,
body[data-theme="purple"] .enter-title,
body[data-theme="purple"] .vp-soon-title,
body[data-theme="purple"] .payout-amount,
body[data-theme="purple"] .kf-title,
body[data-theme="purple"] .idk-answer{
text-transform:none !important;
}
body[data-theme="purple"] .hero-name{
color:var(--ink) !important;
text-shadow:0 0 30px rgba(167,139,250,.25), 0 4px 16px rgba(0,0,0,.6) !important;
}
body[data-theme="purple"] .section-title{
color:var(--ink) !important;
text-shadow:0 0 22px rgba(167,139,250,.18) !important;
}
body[data-theme="purple"] .section-title .italic{
color:var(--red) !important;
text-shadow:0 0 16px var(--red-glow) !important;
}
body[data-theme="purple"] .work-card h3,
body[data-theme="purple"] .sound-track,
body[data-theme="purple"] .foot-mark,
body[data-theme="purple"] .vp-soon-title{
color:var(--ink) !important;
text-shadow:0 0 16px rgba(167,139,250,.2) !important;
}
body[data-theme="purple"] .gospel-line-1{
color:var(--red) !important;
text-shadow:0 0 22px var(--red-glow) !important;
}
body[data-theme="purple"] .gospel-line-2{
color:var(--ink-2) !important;
text-shadow:none !important;
}
/* duck hunt mobile — keep proper landscape aspect, just smaller */
@media (max-width:560px){
body[data-theme="purple"] .kf-stage{aspect-ratio:8/5 !important}
body[data-theme="purple"] .kf-num{font-size:24px !important}
body[data-theme="purple"] .kf-title{font-size:32px !important}
body[data-theme="purple"] .kf-sub{font-size:11px !important}
}
/* purple = friendly. strip the gothic sigilism layers. */
body[data-theme="purple"] .grunge,
body[data-theme="purple"] .bats-overlay,
body[data-theme="purple"] .bg-sigils,
body[data-theme="purple"] .spinner,
body[data-theme="purple"] .vp-soon,
body[data-theme="purple"] .puzzle-art-grain,
body[data-theme="purple"] .puzzle-art-tape{display:none !important}
body[data-theme="purple"] .bg-vignette{
background:radial-gradient(ellipse 100% 80% at 50% 50%, transparent 70%, rgba(0,0,0,.3) 100%) !important;
}
body[data-theme="purple"] .bg-vignette::after{display:none !important}
body[data-theme="purple"] .bg-grad{
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(157,108,255,.35), transparent 60%),
radial-gradient(ellipse 100% 70% at 50% 100%, rgba(99,53,217,.22), transparent 70%),
linear-gradient(180deg, #1a0f3d 0%, #2a1860 50%, #1a0f3d 100%) !important;
}
body[data-theme="purple"] .bg-grad::after{display:none !important}
body[data-theme="purple"] .puzzle-art-frame{transform:none}
body[data-theme="purple"] .card,
body[data-theme="purple"] .work-card,
body[data-theme="purple"] .connect-card,
body[data-theme="purple"] .payout-card,
body[data-theme="purple"] .shoutout-card,
body[data-theme="purple"] .signal-form,
body[data-theme="purple"] .decipher,
body[data-theme="purple"] .sigil-game,
body[data-theme="purple"] .sound-display,
body[data-theme="purple"] .ayah-frame{
border-radius:16px !important;
background:rgba(255,255,255,.05) !important;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
body[data-theme="purple"] .work-card::before,
body[data-theme="purple"] .work-card::after,
body[data-theme="purple"] .payout-card::before,
body[data-theme="purple"] .payout-card::after,
body[data-theme="purple"] .signal-form::before,
body[data-theme="purple"] .signal-form::after,
body[data-theme="purple"] .decipher::before,
body[data-theme="purple"] .decipher::after,
body[data-theme="purple"] .sigil-game::before,
body[data-theme="purple"] .sigil-game::after,
body[data-theme="purple"] .sound-display::before,
body[data-theme="purple"] .sound-display::after,
body[data-theme="purple"] .ayah-corner,
body[data-theme="purple"] .km-frame::before,
body[data-theme="purple"] .km-frame::after,
body[data-theme="purple"] .kone-toast::before,
body[data-theme="purple"] .kone-toast::after,
body[data-theme="purple"] .puzzle-art-frame::before,
body[data-theme="purple"] .puzzle-art-frame::after,
body[data-theme="purple"] .vp-frame::before,
body[data-theme="purple"] .vp-frame::after{display:none !important}
body[data-theme="purple"] .work-card,
body[data-theme="purple"] .connect-card,
body[data-theme="purple"] .payout-card,
body[data-theme="purple"] .shoutout-card,
body[data-theme="purple"] .signal-form,
body[data-theme="purple"] .decipher{
border:1px solid rgba(255,255,255,.12) !important;
}
/* friendlier cursor on purple — soft dot, no blood/splatter/brackets */
body[data-theme="purple"] .cursor[data-style="scope"] .cur-scope,
body[data-theme="purple"] .cursor[data-style="sigil"] .cur-sigil{display:none !important}
body[data-theme="purple"] .cursor .cur-dot{display:block !important}
body[data-theme="purple"] .cursor .cur-dot circle:first-of-type{
stroke:rgba(255,255,255,.6) !important;
stroke-width:1.5 !important;
}
body[data-theme="purple"] .cursor .cur-dot circle:last-of-type{
fill:#fff !important;
r:3 !important;
}
body[data-theme="purple"] .cur-flash,
body[data-theme="purple"] .blood-drop,
body[data-theme="purple"] .cursor-splatter,
body[data-theme="purple"] .ct-corner{display:none !important}
body[data-theme="purple"] .cursor.shooting .cur-svg{animation:none !important}
/* purple theme typography — Space Grotesk + Inter, sharper / cooler */
body[data-theme="purple"] .hero-name,
body[data-theme="purple"] .section-title,
body[data-theme="purple"] .section-title .italic,
body[data-theme="purple"] .work-card h3,
body[data-theme="purple"] .gospel-line-1,
body[data-theme="purple"] .gospel-line-2,
body[data-theme="purple"] .sigil-tag,
body[data-theme="purple"] .sound-track,
body[data-theme="purple"] .foot-mark,
body[data-theme="purple"] .enter-title,
body[data-theme="purple"] .vp-soon-title,
body[data-theme="purple"] .payout-amount,
body[data-theme="purple"] .kf-title,
body[data-theme="purple"] .kf-num{
font-family: 'Manrope', system-ui, sans-serif !important;
font-weight:500 !important;
letter-spacing:-.025em !important;
text-transform:lowercase !important;
}
body[data-theme="purple"] .hero-name{
font-weight:300 !important;
letter-spacing:-.05em !important;
font-size:clamp(72px, 13vw, 160px) !important;
}
body[data-theme="purple"] .section-title{
font-weight:400 !important;
letter-spacing:-.04em !important;
}
body[data-theme="purple"] .enter-title,
body[data-theme="purple"] .idk-answer{
font-family: 'Manrope', system-ui, sans-serif !important;
font-weight:300 !important;
letter-spacing:-.05em !important;
text-transform:lowercase !important;
}
body[data-theme="purple"] .section-eyebrow,
body[data-theme="purple"] .links-head-text,
body[data-theme="purple"] .alt-title,
body[data-theme="purple"] .gospel-mark,
body[data-theme="purple"] .alt-num,
body[data-theme="purple"] .gospel-foot,
body[data-theme="purple"] .work-tagline,
body[data-theme="purple"] .sound-label,
body[data-theme="purple"] .cc-name,
body[data-theme="purple"] .foot-handle,
body[data-theme="purple"] .hbtn,
body[data-theme="purple"] .kf-lbl,
body[data-theme="purple"] .kf-btn,
body[data-theme="purple"] .work-tags span,
body[data-theme="purple"] .payout-status,
body[data-theme="purple"] .work-status,
body[data-theme="purple"] .mini-badge,
body[data-theme="purple"] .work-arrow,
body[data-theme="purple"] .links-head-text,
body[data-theme="purple"] .ayah-mark,
body[data-theme="purple"] .ayah-ref,
body[data-theme="purple"] .vp-label,
body[data-theme="purple"] .art-num,
body[data-theme="purple"] .art-cred,
body[data-theme="purple"] .foot-cred,
body[data-theme="purple"] .hero-online,
body[data-theme="purple"] .hero-meta,
body[data-theme="purple"] .hero-aka,
body[data-theme="purple"] .scroll-hint{
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-weight:400 !important;
letter-spacing:.16em !important;
text-transform:none !important;
}
body[data-theme="purple"] .hero-bio,
body[data-theme="purple"] .username,
body[data-theme="purple"] .work-desc,
body[data-theme="purple"] .section-sub,
body[data-theme="purple"] .sound-artist,
body[data-theme="purple"] .gospel-line-3,
body[data-theme="purple"] .sound-quote,
body[data-theme="purple"] .alt-text,
body[data-theme="purple"] .sf-field input,
body[data-theme="purple"] .sf-field textarea,
body[data-theme="purple"] .sf-field select,
body[data-theme="purple"] .so-name,
body[data-theme="purple"] .kf-sub{
font-family: 'Inter', system-ui, sans-serif !important;
font-weight:300 !important;
font-style:normal !important;
letter-spacing:-.005em !important;
}
/* kone theme — light mode, white + beige + lime accent */
body[data-theme="kone"]{
--red: #6a6253; /* dark beige used as primary accent text */
--red-glow: rgba(106,98,83,.25);
--red-deep: #4a4438;
--lime: #c4e000; /* punchier lime for buttons */
--lime-glow: rgba(196,224,0,.45);
--ink: #1a1612; /* deep ink for body text */
--ink-2: #4a4438;
--ink-3: #8a7e6a;
--ink-4: #d8d2c4; /* faint border on light bg */
--bg: #f4efe3; /* warm cream */
--bg-2: #e8e0cc; /* beige */
--line: rgba(0,0,0,.08);
--line-2: rgba(0,0,0,.04);
}
body[data-theme="kone"]{
background:#f4efe3;
color:var(--ink);
}
body[data-theme="kone"] .grunge,
body[data-theme="kone"] .bats-overlay,
body[data-theme="kone"] .bg-sigils,
body[data-theme="kone"] .spinner,
body[data-theme="kone"] .puzzle-art-grain,
body[data-theme="kone"] .puzzle-art-tape{display:none !important}
body[data-theme="kone"] .bg-vignette{
background:radial-gradient(ellipse 100% 80% at 50% 50%, transparent 60%, rgba(168,148,108,.12) 100%) !important;
}
body[data-theme="kone"] .bg-vignette::after{display:none !important}
body[data-theme="kone"] .bg-grad{
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196,224,0,.18), transparent 60%),
radial-gradient(ellipse 100% 70% at 50% 100%, rgba(168,148,108,.18), transparent 70%),
linear-gradient(180deg, #f4efe3 0%, #ece4cf 50%, #f4efe3 100%) !important;
}
body[data-theme="kone"] .bg-grad::after{
background-image:
linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px) !important;
opacity:.5 !important;
}
/* light card surfaces */
body[data-theme="kone"] .work-card,
body[data-theme="kone"] .connect-card,
body[data-theme="kone"] .payout-card,
body[data-theme="kone"] .shoutout-card,
body[data-theme="kone"] .signal-form,
body[data-theme="kone"] .decipher,
body[data-theme="kone"] .sigil-game,
body[data-theme="kone"] .sound-display,
body[data-theme="kone"] .ayah-frame,
body[data-theme="kone"] .puzzle-art-frame{
background:#fff !important;
border:1px solid var(--ink-4) !important;
box-shadow:0 6px 24px -10px rgba(60,40,20,.18) !important;
border-radius:12px !important;
}
body[data-theme="kone"] .puzzle-art-frame{transform:none}
/* drop the dark gothic corner brackets in light mode */
body[data-theme="kone"] .work-card::before,
body[data-theme="kone"] .work-card::after,
body[data-theme="kone"] .payout-card::before,
body[data-theme="kone"] .payout-card::after,
body[data-theme="kone"] .signal-form::before,
body[data-theme="kone"] .signal-form::after,
body[data-theme="kone"] .decipher::before,
body[data-theme="kone"] .decipher::after,
body[data-theme="kone"] .sigil-game::before,
body[data-theme="kone"] .sigil-game::after,
body[data-theme="kone"] .sound-display::before,
body[data-theme="kone"] .sound-display::after,
body[data-theme="kone"] .ayah-corner,
body[data-theme="kone"] .km-frame::before,
body[data-theme="kone"] .km-frame::after,
body[data-theme="kone"] .puzzle-art-frame::before,
body[data-theme="kone"] .puzzle-art-frame::after{display:none !important}
/* form inputs go light */
body[data-theme="kone"] .sf-field input,
body[data-theme="kone"] .sf-field select,
body[data-theme="kone"] .sf-field textarea,
body[data-theme="kone"] .d-input-wrap,
body[data-theme="kone"] .d-input{
background:#fffaf0 !important;
color:var(--ink) !important;
border:1px solid var(--ink-4) !important;
caret-color:var(--ink) !important;
}
body[data-theme="kone"] .sf-field input::placeholder,
body[data-theme="kone"] .sf-field textarea::placeholder,
body[data-theme="kone"] .d-input::placeholder{color:var(--ink-3) !important}
body[data-theme="kone"] .sf-field label{color:var(--ink) !important}
/* sigil → invert so the dark sigil reads on light bg */
body[data-theme="kone"] .sigil-large,
body[data-theme="kone"] .foot-sigil img{
filter:invert(.85) contrast(1.2) brightness(.9) !important;
mix-blend-mode:multiply !important;
}
/* footer + nav lighten */
body[data-theme="kone"] .side-nav a span{background:var(--ink-3)}
body[data-theme="kone"] .side-nav a.active span{background:var(--ink)}
body[data-theme="kone"] .side-nav a::after{
background:#fff;
color:var(--ink);
border-color:var(--ink-4);
}
body[data-theme="kone"] .player{
background:rgba(255,255,255,.9) !important;
border-color:var(--ink-4) !important;
color:var(--ink);
}
body[data-theme="kone"] .player-track,
body[data-theme="kone"] .player-times,
body[data-theme="kone"] .player-sub{color:var(--ink-2) !important}
body[data-theme="kone"] .ctrl-btn{
border-color:var(--ink-4) !important;
color:var(--ink-2) !important;
}
body[data-theme="kone"] #playBtn{
background:var(--ink) !important;
border-color:var(--ink) !important;
color:#fff !important;
}
body[data-theme="kone"] .player-progress{background:var(--ink-4) !important}
body[data-theme="kone"] .player-progress-fill{background:var(--lime) !important;box-shadow:0 0 6px var(--lime-glow) !important}
/* big titles in kone use deep ink with subtle lime underline glow */
body[data-theme="kone"] .hero-name,
body[data-theme="kone"] .section-title,
body[data-theme="kone"] .gospel-line-1,
body[data-theme="kone"] .work-card h3,
body[data-theme="kone"] .sound-track,
body[data-theme="kone"] .foot-mark,
body[data-theme="kone"] .vp-soon-title,
body[data-theme="kone"] .payout-amount,
body[data-theme="kone"] .sigil-tag{
color:var(--ink) !important;
text-shadow:0 0 24px var(--lime-glow), 0 2px 4px rgba(0,0,0,.08) !important;
}
body[data-theme="kone"] .section-title .italic,
body[data-theme="kone"] .gospel-line-2{
color:var(--ink-2) !important;
text-shadow:0 2px 4px rgba(0,0,0,.06) !important;
}
body[data-theme="kone"] .hbtn.primary{
background:var(--lime) !important;
color:var(--ink) !important;
border-color:var(--lime) !important;
}
body[data-theme="kone"] .sf-submit{
background:var(--ink) !important;
color:#fff !important;
border-color:var(--ink) !important;
}
body[data-theme="kone"] .vp-play{
background:var(--ink) !important;
border-color:var(--ink) !important;
color:#fff !important;
}
/* hide cursor blood + splatter + brackets in light mode too */
body[data-theme="kone"] .cursor[data-style="scope"] .cur-scope,
body[data-theme="kone"] .cursor[data-style="sigil"] .cur-sigil{display:none !important}
body[data-theme="kone"] .cursor .cur-dot{display:block !important}
body[data-theme="kone"] .cursor .cur-dot circle:first-of-type{
stroke:var(--ink) !important;
stroke-width:1.5 !important;
}
body[data-theme="kone"] .cursor .cur-dot circle:last-of-type{fill:var(--ink) !important;r:3 !important}
body[data-theme="kone"] .cur-flash,
body[data-theme="kone"] .blood-drop,
body[data-theme="kone"] .cursor-splatter,
body[data-theme="kone"] .ct-corner{display:none !important}
body[data-theme="kone"] .cursor.shooting .cur-svg{animation:none !important}
/* picker chrome in light mode */
body[data-theme="kone"] .theme-picker,
body[data-theme="kone"] .cur-picker{
background:rgba(255,255,255,.9) !important;
border-color:var(--ink-4) !important;
}
body[data-theme="kone"] .theme-opt,
body[data-theme="kone"] .cur-opt{color:var(--ink-2)}
body[data-theme="kone"] .theme-opt.active,
body[data-theme="kone"] .cur-opt.active{
border-color:var(--ink) !important;
color:var(--ink) !important;
}
body[data-theme="kone"] .scroll-hint,
body[data-theme="kone"] .hero-meta,
body[data-theme="kone"] .section-eyebrow,
body[data-theme="kone"] .links-head-text,
body[data-theme="kone"] .alt-title,
body[data-theme="kone"] .gospel-mark,
body[data-theme="kone"] .gospel-foot,
body[data-theme="kone"] .work-tagline,
body[data-theme="kone"] .sound-label,
body[data-theme="kone"] .cc-name,
body[data-theme="kone"] .foot-handle{color:var(--ink-2) !important}
body[data-theme="kone"] .cc-icon{
background:#fff !important;
border-color:var(--ink-4) !important;
color:var(--ink-2) !important;
}
body[data-theme="kone"] .work-mark,
body[data-theme="kone"] .work-mark-img,
body[data-theme="kone"] .work-mark-svg,
body[data-theme="kone"] .payout-firm-mark{
background:#fafafa !important;
border-color:var(--ink-4) !important;
}
body[data-theme="kone"] .work-mark-svg{color:var(--ink-2) !important}
body[data-theme="kone"] .ayah-arabic,
body[data-theme="kone"] .bism-arabic{color:var(--ink) !important;text-shadow:none !important}
body[data-theme="kone"] .bio-arabic{color:var(--ink) !important;text-shadow:none !important}
body[data-theme="kone"] .foot-quote[dir="rtl"]{color:var(--ink) !important;text-shadow:none !important}
@media (max-width:980px){
.spinner{ width:60px; opacity:.7 }
.spinner-hit{ width:130px; height:130px }
.spinner-hit-left{ left:max(8px, calc(50% - 380px)) }
.spinner-hit-right{ right:max(8px, calc(50% - 380px)) }
}
@media (max-width:680px){
.spinner{ width:48px; opacity:.78 }
.spinner-hit{ width:100px; height:100px; top:auto; bottom:96px; transform:none }
.spinner-hit-left{ left:10px }
.spinner-hit-right{ right:10px }
}
/* mobile: lighten frosted overlays so sprites/images stay visible */
@media (max-width:680px){
.bg-vignette{
background:radial-gradient(ellipse 110% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
}
.bg-vignette::after{opacity:.22}
.grunge-static{opacity:.1}
.grunge-ink{opacity:.5}
.player{
backdrop-filter:blur(8px) saturate(105%);
-webkit-backdrop-filter:blur(8px) saturate(105%);
background:rgba(0,0,0,.7);
}
}
.particles{
position:fixed;inset:0;z-index:2;pointer-events:none;
opacity:.55;
}
.bg-vignette{
position:fixed;inset:0;z-index:3;pointer-events:none;
background:radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.85) 100%);
}
.bg-vignette::after{
content:"";
position:absolute;inset:-50%;
background-image:url("data:image/svg+xml;utf8,");
opacity:.42;
mix-blend-mode:overlay;
animation:grainShift 5s steps(8) infinite;
}
@keyframes grainShift{
0%,100%{transform:translate(0,0)}
20%{transform:translate(-3%,2%)}
40%{transform:translate(2%,-2%)}
60%{transform:translate(-1%,3%)}
80%{transform:translate(3%,-1%)}
}
/* ============================================
GRUNGE layer — scratches, static, ink
============================================ */
.grunge{
position:fixed;inset:0;z-index:5;pointer-events:none;
mix-blend-mode:screen;
}
.grunge-scratches{
position:absolute;inset:0;width:100%;height:100%;
opacity:.5;
animation:scratchFlick 9s steps(4) infinite;
}
@keyframes scratchFlick{
0%,5%{opacity:.5}
6%,9%{opacity:.85}
10%,100%{opacity:.5}
}
.grunge-static{
position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
opacity:.18;
mix-blend-mode:overlay;
animation:staticShift 0.6s steps(4) infinite;
}
@keyframes staticShift{
0%{transform:translate(0,0)}
25%{transform:translate(-2%,1%)}
50%{transform:translate(2%,-1%)}
75%{transform:translate(-1%,2%)}
100%{transform:translate(0,0)}
}
.grunge-ink{
position:absolute;
background-image:radial-gradient(ellipse, rgba(232,227,216,.08), transparent 70%);
filter:blur(20px);
border-radius:50%;
mix-blend-mode:screen;
}
.grunge-ink-1{ width:300px; height:300px; top:-40px; left:8%; animation:inkDrift1 30s ease-in-out infinite }
.grunge-ink-2{ width:380px; height:380px; bottom:-60px; right:10%; animation:inkDrift2 36s ease-in-out infinite }
.grunge-ink-3{ width:240px; height:240px; top:40%; left:50%; animation:inkDrift3 24s ease-in-out infinite }
@keyframes inkDrift1{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(40px,30px) scale(1.15)}
}
@keyframes inkDrift2{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-30px,-40px) scale(.85)}
}
@keyframes inkDrift3{
0%,100%{transform:translate(-50%,0) scale(1)}
50%{transform:translate(-30%,40px) scale(1.2)}
}
/* ============================================
Custom cursor — multi-style picker
============================================ */
*,*::before,*::after{cursor:none}
html,body,a,button,input,textarea,select,label,div,span,svg{cursor:none}
.cursor{
position:fixed;
top:0;left:0;
pointer-events:none;
z-index:9999;
width:60px;height:60px;
transform:translate(-50%,-50%);
transition:transform .12s ease, filter .25s ease;
filter:drop-shadow(0 0 10px rgba(0,0,0,.6));
}
.cursor .cur-svg{
position:absolute;inset:0;
width:100%;height:100%;
display:none;
transition:transform .25s cubic-bezier(.18,.89,.32,1.28), filter .25s;
}
.cursor[data-style="scope"] .cur-scope{display:block}
.cursor[data-style="sigil"] .cur-sigil{display:block}
.cursor[data-style="dot"] .cur-dot {display:block}
/* hover behavior — nudge target ring/sigil/dot */
.cursor.hover .cur-scope{
transform:scale(1.18);
filter:drop-shadow(0 0 12px rgba(184,24,24,.6));
}
.cursor.hover .cur-sigil{
transform:scale(1.18);
filter:drop-shadow(0 0 12px rgba(184,24,24,.5));
}
.cursor.hover .cur-dot{
transform:scale(1.4);
}
.cursor.click{transform:translate(-50%,-50%) scale(.85)}
/* blood drip animation on scope + sigil */
.drip-bead{
animation:drip 3.5s ease-in infinite;
transform-origin:center;
}
@keyframes drip{
0%,40%{opacity:0;transform:translateY(-8px) scale(.6)}
55%{opacity:1;transform:translateY(0) scale(1)}
85%{opacity:.8;transform:translateY(8px) scale(.9)}
100%{opacity:0;transform:translateY(14px) scale(.5)}
}
@media (hover:none) and (pointer:coarse){
body{cursor:auto}
.cursor,.cur-picker{display:none}
button,a,input{cursor:pointer}
}
/* hover targeting brackets — show when hovering interactive elements */
.ct-corner{
position:absolute;
width:12px;height:12px;
border:1.5px solid var(--red);
opacity:0;
pointer-events:none;
transition:opacity .2s ease, transform .25s cubic-bezier(.18,.89,.32,1.28);
filter:drop-shadow(0 0 4px var(--red-glow));
}
.ct-tl{top:-2px;left:-2px;border-right:none;border-bottom:none;transform:translate(-6px,-6px)}
.ct-tr{top:-2px;right:-2px;border-left:none;border-bottom:none;transform:translate(6px,-6px)}
.ct-bl{bottom:-2px;left:-2px;border-right:none;border-top:none;transform:translate(-6px,6px)}
.ct-br{bottom:-2px;right:-2px;border-left:none;border-top:none;transform:translate(6px,6px)}
.cursor.hover .ct-corner{opacity:.95;transform:translate(0,0)}
/* muzzle flash element — fires on click */
.cur-flash{
position:absolute;
top:50%;left:50%;
width:0;height:0;
border-radius:50%;
background:radial-gradient(circle, #fff 0%, var(--red) 30%, transparent 70%);
transform:translate(-50%,-50%);
pointer-events:none;
opacity:0;
}
.cursor.shooting .cur-flash{
animation:muzzle .35s ease-out forwards;
}
@keyframes muzzle{
0%{width:0;height:0;opacity:1}
40%{width:80px;height:80px;opacity:.85}
100%{width:120px;height:120px;opacity:0}
}
.cursor.shooting .cur-svg{
animation:shootRecoil .3s cubic-bezier(.4,0,.6,1);
}
@keyframes shootRecoil{
0%{transform:scale(1) translate(0,0) rotate(0)}
18%{transform:scale(.82) translate(3px, 3px) rotate(-4deg);filter:brightness(2)}
45%{transform:scale(1.1) translate(-1px, -1px) rotate(1deg)}
100%{transform:scale(1) translate(0,0) rotate(0)}
}
/* blood drops — fall from click point with gravity */
.blood-drop{
position:fixed;
width:var(--sz, 6px);
height:var(--sz, 6px);
background:radial-gradient(circle at 30% 30%, #d81818 0%, #5a0a0a 70%, #2a0505 100%);
border-radius:50%;
pointer-events:none;
z-index:9996;
transform:translate(-50%,-50%);
animation:bloodFall var(--dur, 1.4s) cubic-bezier(.4,0,.9,.8) forwards;
box-shadow:0 0 8px rgba(184,24,24,.7), 0 0 16px rgba(184,24,24,.3);
filter:blur(.3px);
}
@keyframes bloodFall{
0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
15%{opacity:1;transform:translate(-50%,-50%) scale(1)}
60%{opacity:1}
100%{
transform:translate(calc(-50% + var(--fx, 0px)), calc(-50% + var(--fy, 60px))) scale(.5);
opacity:0;
}
}
/* persistent splatter on cursor itself — builds up with clicks */
.cursor-splatter{
position:absolute;
width:var(--sz, 4px);
height:var(--sz, 4px);
background:radial-gradient(circle at 35% 35%, #c81818 0%, #5a0a0a 80%);
border-radius:50%;
transform:translate(-50%,-50%);
pointer-events:none;
opacity:.85;
filter:blur(.4px);
box-shadow:0 0 4px rgba(184,24,24,.5);
animation:splatterIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes splatterIn{
0%{transform:translate(-50%,-50%) scale(0);opacity:0}
60%{opacity:1}
100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
}
/* toast — gothic popup near the bottom */
.kone-toast{
position:fixed;
bottom:96px;left:50%;
transform:translateX(-50%) translateY(20px);
z-index:10001;
padding:14px 26px;
background:rgba(0,0,0,.94);
border:1px solid var(--red);
color:var(--red);
font-family:var(--display);
font-size:clamp(22px, 4vw, 30px);
letter-spacing:.02em;
text-transform:lowercase;
text-shadow:0 0 14px var(--red-glow), 0 0 28px rgba(184,24,24,.4);
box-shadow:
0 0 30px rgba(184,24,24,.5),
0 14px 40px -10px rgba(0,0,0,.9);
opacity:0;
pointer-events:none;
transition:opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1);
white-space:nowrap;
}
.kone-toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}
.kone-toast::before,.kone-toast::after{
content:"";
position:absolute;
width:10px;height:10px;
border:1px solid var(--red);
}
.kone-toast::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.kone-toast::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
/* ============================================
BATS — opening overlay flight
============================================ */
.bats-overlay{
position:fixed;inset:0;
z-index:9990;
pointer-events:none;
opacity:0;
transition:opacity .8s ease;
}
.bats-overlay.flying{opacity:1}
.bat{
position:absolute;
width:46px;height:24px;
display:block;
filter:drop-shadow(0 0 8px rgba(0,0,0,.85));
animation:batFly var(--dur, 4s) linear forwards;
}
.bat .bat-svg{
width:100%;height:100%;
display:block;
animation:batFlap .14s steps(2) infinite;
transform-origin:center;
}
@keyframes batFly{
0%{transform:translate(-15vw, var(--y-start, 30vh)) scale(var(--scale, 1)) rotate(var(--rot, 0deg));opacity:0}
10%{opacity:1}
90%{opacity:1}
100%{transform:translate(115vw, var(--y-end, 60vh)) scale(var(--scale, 1)) rotate(var(--rot, 0deg));opacity:0}
}
@keyframes batFlap{
0%{transform:scaleY(1)}
50%{transform:scaleY(.5)}
}
/* prop firm logo on payout cards — letter fallback */
.payout-letter{
font-family:var(--display);
font-weight:400;
font-size:24px;
color:var(--p-color);
display:flex;align-items:center;justify-content:center;
text-shadow:0 0 14px var(--p-glow);
}
/* picker UI — fixed top-right, near side-nav */
.cur-picker{
position:fixed;
top:18px;right:18px;
z-index:31;
display:flex;
gap:6px;
padding:5px;
background:rgba(0,0,0,.7);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--ink-4);
opacity:0;
transition:opacity .8s ease 1.2s;
}
body.entered .cur-picker{opacity:1}
.cur-opt{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:transparent;
border:1px solid transparent;
color:var(--ink-3);
transition:all .2s;
padding:0;
}
.cur-opt:hover{color:var(--ink-2);border-color:var(--ink-4)}
.cur-opt.active{
color:var(--ink);
border-color:var(--ink);
background:rgba(232,227,216,.06);
}
.cur-opt.active[data-cur="scope"],
.cur-opt.active[data-cur="sigil"]{
color:var(--red);
border-color:var(--red);
box-shadow:0 0 10px var(--red-glow);
}
.cur-opt svg{width:18px;height:18px}
/* prop firm logo on payout cards */
.payout-firm-mark img{
width:28px;height:28px;
object-fit:contain;
display:block;
filter:drop-shadow(0 0 6px var(--p-glow));
}
.payout-firm-mark{
padding:5px;
background:#000;
}
/* ============================================
IDK screen — the whatisguns.lol opener
============================================ */
.idk-screen{
position:fixed;inset:0;z-index:1100;
display:flex;align-items:center;justify-content:center;
background:#000;
cursor:none;
transition:opacity .9s cubic-bezier(.4,0,.2,1);
}
.idk-screen.hidden{opacity:0;pointer-events:none}
.idk-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(184,24,24,.18), transparent 65%),
radial-gradient(ellipse 80% 60% at 50% 100%, rgba(184,24,24,.06), transparent 70%);
animation:idkPulse 4s ease-in-out infinite;
}
@keyframes idkPulse{
0%,100%{opacity:.7;transform:scale(1)}
50%{opacity:1;transform:scale(1.06)}
}
.idk-content{
position:relative;z-index:2;
text-align:center;
padding:30px;
max-width:90vw;
}
.idk-q{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:300;
font-size:clamp(18px, 3vw, 26px);
color:var(--ink-2);
margin-bottom:16px;
letter-spacing:.02em;
opacity:0;
animation:idkFadeIn 1.2s cubic-bezier(.16,1,.3,1) .2s forwards;
}
.idk-question{
font-family:var(--display);
font-weight:400;
font-size:clamp(48px, 11vw, 110px);
color:var(--red);
line-height:.95;
letter-spacing:0;
text-transform:lowercase;
text-shadow:
0 0 40px var(--red-glow),
0 0 100px rgba(184,24,24,.32),
0 4px 18px rgba(0,0,0,.92);
margin:0 0 24px;
opacity:0;
transform:translateY(12px);
filter:blur(10px);
animation:idkQuestionIn 1s cubic-bezier(.16,1,.3,1) .15s forwards;
}
@keyframes idkQuestionIn{
0%{opacity:0;transform:translateY(12px) scale(.96);filter:blur(10px)}
100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.idk-answer{
font-family:'AngelWish', var(--display), serif;
font-weight:400;
font-size:clamp(160px, 32vw, 380px);
color:var(--gold);
line-height:.85;
letter-spacing:.01em;
text-transform:lowercase;
text-shadow:
0 0 60px var(--gold-glow),
0 0 140px rgba(255,184,74,.55),
0 0 220px rgba(255,184,74,.3),
0 6px 30px rgba(0,0,0,.95);
margin:0;
opacity:0;
transform:scale(.4) translateY(40px) rotate(-6deg);
filter:blur(30px);
animation:idkImpact 1.4s cubic-bezier(.34,1.56,.64,1) .4s forwards,
idkFlicker 3s ease-in-out 2s infinite,
idkBreathe 5s ease-in-out 2.5s infinite;
cursor:none;
position:relative;
}
@keyframes idkBreathe{
0%,100%{
text-shadow:
0 0 60px var(--gold-glow),
0 0 140px rgba(255,184,74,.55),
0 0 220px rgba(255,184,74,.3),
0 6px 30px rgba(0,0,0,.95);
}
50%{
text-shadow:
0 0 80px #fff,
0 0 180px var(--gold),
0 0 320px rgba(255,184,74,.6),
0 6px 30px rgba(0,0,0,.95);
transform:scale(1.04);
}
}
.idk-answer::before,
.idk-answer::after{
content:'';
position:absolute;
border-radius:50%;
pointer-events:none;
z-index:-1;
}
.idk-answer::before{
inset:-15%;
background:radial-gradient(circle, rgba(255,184,74,.4), transparent 60%);
filter:blur(30px);
animation:idkAura 4s ease-in-out infinite;
}
.idk-answer::after{
inset:-30%;
background:radial-gradient(circle, rgba(255,184,74,.18), transparent 70%);
filter:blur(50px);
animation:idkAura 4s ease-in-out 1s infinite;
}
@keyframes idkAura{
0%,100%{transform:scale(1);opacity:.6}
50%{transform:scale(1.25);opacity:1}
}
/* Sparkle particles around the idk text */
.idk-screen .idk-content::before,
.idk-screen .idk-content::after{
content:'✦';
position:absolute;
font-size:clamp(20px, 3vw, 36px);
color:var(--gold);
text-shadow:0 0 20px var(--gold-glow);
animation:idkSparkle 3s ease-in-out infinite;
pointer-events:none;
z-index:1;
}
.idk-screen .idk-content::before{
top:18%;left:14%;
animation-delay:.5s;
}
.idk-screen .idk-content::after{
bottom:30%;right:16%;
animation-delay:1.5s;
}
@keyframes idkSparkle{
0%,100%{opacity:0;transform:scale(.5) rotate(0)}
50%{opacity:1;transform:scale(1.2) rotate(180deg)}
}
.idk-screen .idk-content{position:relative}
.idk-bg{
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,184,74,.22), transparent 60%),
radial-gradient(ellipse 100% 70% at 50% 100%, rgba(255,184,74,.08), transparent 70%) !important;
}
/* Flash on entry — quick white pulse before the idk lands */
.idk-screen::before{
content:'';
position:absolute;inset:0;
background:radial-gradient(circle at 50% 50%, rgba(255,184,74,.5), transparent 60%);
pointer-events:none;
animation:idkFlash 1.2s cubic-bezier(.16,1,.3,1) forwards;
mix-blend-mode:screen;
}
@keyframes idkFlash{
0%{opacity:0;transform:scale(.5)}
20%{opacity:1;transform:scale(.8)}
100%{opacity:0;transform:scale(1.5)}
}
.idk-bg{
background:
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,184,74,.18), transparent 65%),
radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,184,74,.06), transparent 70%) !important;
}
@keyframes idkImpact{
0%{opacity:0;transform:scale(.6) translateY(20px);filter:blur(20px)}
60%{opacity:1;transform:scale(1.05) translateY(0);filter:blur(0)}
100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
@keyframes idkFlicker{
0%,100%{opacity:1}
47%{opacity:1}
48%{opacity:.55}
49%{opacity:1}
73%{opacity:1}
74%{opacity:.7}
75%{opacity:1}
}
.idk-domain{
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:clamp(11px, 1.6vw, 14px);
letter-spacing:.32em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.32em;
margin-bottom:32px;
opacity:0;
animation:idkFadeIn 1s ease 1.4s forwards;
}
.idk-hint{
display:inline-flex;align-items:center;gap:10px;
font-family:'Cinzel',serif;
font-weight:500;
font-size:13px;
letter-spacing:.36em;
color:#fff;
text-transform:uppercase;
margin:30px auto 0;
padding:14px 26px 14px 30px;
border:1px solid var(--gold);
background:rgba(255,184,74,.08);
text-shadow:0 0 14px var(--gold-glow);
box-shadow:0 0 18px var(--gold-glow), 0 0 38px rgba(255,184,74,.18);
opacity:0;
animation:idkFadeIn .8s ease 1.6s forwards, idkHintPulse 1.8s ease-in-out 2.4s infinite;
}
.idk-hint::before{
content:'➤';
display:inline-block;
font-size:14px;
color:var(--gold);
text-shadow:0 0 8px var(--gold-glow);
animation:idkArrow 1.4s ease-in-out 2.4s infinite;
}
@keyframes idkHintPulse{
0%,100%{
box-shadow:0 0 18px var(--gold-glow), 0 0 38px rgba(255,184,74,.18);
transform:scale(1);
border-color:var(--gold);
}
50%{
box-shadow:0 0 28px var(--gold), 0 0 60px var(--gold-glow);
transform:scale(1.04);
border-color:#fff;
}
}
@keyframes idkArrow{
0%,100%{transform:translateX(0)}
50%{transform:translateX(5px)}
}
@keyframes idkFadeIn{
to{opacity:1}
}
@keyframes idkBlink{
0%,100%{opacity:.4}
50%{opacity:1}
}
/* ============================================
Enter screen splash
============================================ */
.enter-screen{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
background:#000;
cursor:none;
transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.enter-screen.hidden{opacity:0;pointer-events:none}
.enter-bg{
position:absolute;inset:0;
background:radial-gradient(ellipse 50% 40% at 50% 50%, rgba(232,227,216,.07), transparent 65%);
animation:pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow{
0%,100%{opacity:.6;transform:scale(1)}
50%{opacity:1;transform:scale(1.08)}
}
.enter-content{position:relative;z-index:2;text-align:center;padding:32px}
.enter-title{
font-family:var(--display);
font-weight:400;
font-size:clamp(60px,12vw,120px);
letter-spacing:.02em;
color:var(--red);
text-shadow:
0 0 32px var(--red-glow),
0 0 64px rgba(184,24,24,.4);
animation:flicker 4s ease-in-out infinite;
margin-bottom:14px;
text-transform:lowercase;
line-height:.92;
}
@keyframes flicker{
0%,100%{opacity:1}
47%{opacity:1}
48%{opacity:.3}
49%{opacity:1}
73%{opacity:1}
74%{opacity:.5}
75%{opacity:1}
}
.enter-sub{
font-family:'Cinzel',serif;
font-weight:500;
font-size:13px;
letter-spacing:.55em;
color:var(--ink-2);
text-transform:uppercase;
margin-bottom:36px;
margin-left:.55em;
opacity:.85;
}
.enter-hint{
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:10.5px;
letter-spacing:.4em;
color:var(--ink-3);
text-transform:uppercase;
margin-left:.4em;
animation:fadeBlink 2.4s ease-in-out infinite;
}
@keyframes fadeBlink{
0%,100%{opacity:.3}
50%{opacity:.9}
}
/* ============================================
Side nav (vertical dots on right)
============================================ */
.side-nav{
position:fixed;
top:50%;right:18px;
transform:translateY(-50%);
z-index:30;
display:flex;flex-direction:column;
gap:14px;
padding:14px 8px;
opacity:0;
transition:opacity .8s ease;
}
.site.entered ~ .side-nav,
body.entered .side-nav{opacity:1}
.side-nav a{
position:relative;
display:block;
width:18px;height:18px;
display:flex;align-items:center;justify-content:center;
}
.side-nav a span{
display:block;
width:5px;height:5px;border-radius:50%;
background:var(--ink-3);
transition:all .25s;
}
.side-nav a:hover span{background:var(--ink);transform:scale(1.4)}
.side-nav a.active span{
background:var(--ink);
width:5px;height:18px;border-radius:3px;
box-shadow:0 0 8px rgba(232,227,216,.6);
}
.side-nav a::after{
content:attr(data-label);
position:absolute;
right:calc(100% + 14px);top:50%;transform:translateY(-50%);
font-family:'Cinzel',serif;
font-weight:500;
font-size:9px;letter-spacing:.4em;text-transform:uppercase;
color:var(--ink-2);
white-space:nowrap;
background:#000;
padding:4px 10px 4px 12px;
border:1px solid var(--ink-4);
opacity:0;
pointer-events:none;
transition:opacity .25s;
}
.side-nav a:hover::after{opacity:1}
@media (max-width:780px){.side-nav{display:none}}
/* ============================================
Site shell + sections
============================================ */
.site{
position:relative;
z-index:10;
width:100%;
opacity:0;
transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.site.entered{opacity:1}
.section{
position:relative;
max-width:var(--max);
margin:0 auto;
padding:120px var(--pad) 100px;
}
.section-eyebrow{
font-family:'Cinzel',serif;
font-weight:500;
font-size:10px;
letter-spacing:.5em;
text-transform:uppercase;
color:var(--ink-3);
margin:0 0 16px;
margin-left:.5em;
display:flex;align-items:center;gap:14px;
}
.section-eyebrow::after{
content:"";
flex:1;max-width:200px;height:1px;
background:linear-gradient(90deg,var(--ink-4),transparent);
}
.section-title{
font-family:var(--display);
font-weight:400;
font-size:clamp(48px, 8.5vw, 88px);
line-height:.92;
letter-spacing:.01em;
margin:0 0 22px;
color:var(--red);
text-shadow:
0 0 32px var(--red-glow),
0 0 64px rgba(184,24,24,.35),
0 2px 14px rgba(0,0,0,.9);
text-transform:lowercase;
}
.section-title .italic{
font-family:var(--display);
font-style:normal;
font-weight:400;
color:var(--red);
display:inline-block;
text-shadow:
0 0 32px var(--red-glow),
0 0 64px rgba(184,24,24,.35),
0 2px 14px rgba(0,0,0,.9);
}
.section-sub{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:400;
font-size:clamp(15px, 2.3vw, 19px);
color:var(--ink-2);
margin:0 0 40px;
max-width:560px;
line-height:1.5;
}
/* scroll-reveal */
.rev{
opacity:0;
transform:translateY(24px);
filter:blur(6px);
transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease;
}
.rev.in{opacity:1;transform:translateY(0);filter:blur(0)}
/* ============================================
HERO
============================================ */
.hero{
position:relative;
min-height:100vh;
display:flex;align-items:center;
padding:80px var(--pad) 80px;
}
.hero-inner{
width:100%;
max-width:var(--max);
margin:0 auto;
}
/* bismillah — opening blessing */
.bismillah{
display:flex;flex-direction:column;
align-items:flex-start;
gap:6px;
margin-bottom:24px;
padding-bottom:18px;
border-bottom:1px solid var(--ink-4);
max-width:600px;
}
.bism-arabic{
font-family:'Amiri', serif;
font-weight:400;
font-size:clamp(22px, 3vw, 32px);
color:var(--ink);
line-height:1.4;
text-shadow:0 0 18px rgba(232,227,216,.25);
letter-spacing:0;
direction:rtl;
}
.bism-en{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:400;
font-size:13px;
color:var(--ink-3);
letter-spacing:.02em;
}
@media (max-width:780px){
.bismillah{align-items:center;text-align:center;margin:0 auto 24px}
}
.hero-online{
display:inline-flex;align-items:center;gap:10px;
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--ink-3);
padding:5px 11px;
border:1px solid var(--ink-4);
margin-bottom:36px;
}
.hero-online .dot{
width:6px;height:6px;border-radius:50%;
background:var(--ink);
box-shadow:0 0 8px var(--ink);
animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.4;transform:scale(.8)}
}
.hero-views{
display:inline-flex;align-items:center;gap:5px;
margin-left:8px;padding-left:10px;
border-left:1px solid var(--ink-4);
color:var(--ink-3);
}
.hero-grid{
display:grid;
grid-template-columns:auto 1fr;
gap:clamp(28px,5vw,64px);
align-items:center;
}
/* hero PFP */
.hero-pfp{
position:relative;
width:clamp(200px, 24vw, 280px);
aspect-ratio:1/1;
flex-shrink:0;
}
.hero-pfp-ring{
position:absolute;inset:-12px;border-radius:50%;
border:1px solid var(--ink-4);
animation:ringRotate 50s linear infinite;
}
.hero-pfp-ring::before,.hero-pfp-ring::after{
content:"";
position:absolute;
background:var(--ink-3);
opacity:.45;
}
.hero-pfp-ring::before{top:50%;left:-4px;right:-4px;height:1px}
.hero-pfp-ring::after{left:50%;top:-4px;bottom:-4px;width:1px}
@keyframes ringRotate{to{transform:rotate(360deg)}}
.hero-pfp-frame{
position:absolute;inset:0;
border-radius:50%;
background:#000;
border:1px solid var(--ink-3);
overflow:hidden;
box-shadow:
0 0 30px rgba(232,227,216,.1) inset,
0 24px 60px rgba(0,0,0,.7);
}
.hero-pfp-img{
width:100%;height:100%;
object-fit:cover;
filter:contrast(1.05) brightness(.95) saturate(.85);
}
.hero-pfp-grain{
position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
opacity:.6;
pointer-events:none;
}
/* hero text */
.hero-text{min-width:0}
.hero-eyebrow{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:300;
font-size:14px;
color:var(--ink-3);
margin-bottom:8px;
}
.hero-name{
font-family:var(--display);
font-weight:400;
font-size:clamp(80px, 15vw, 180px);
line-height:.82;
margin:0 0 10px;
letter-spacing:.01em;
color:var(--red);
text-shadow:
0 0 50px var(--red-glow),
0 0 100px rgba(184,24,24,.3),
0 4px 22px rgba(0,0,0,.95);
text-transform:lowercase;
}
.hero-handle{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:400;
font-size:clamp(18px, 2.4vw, 24px);
letter-spacing:.04em;
color:var(--ink-2);
margin:0 0 22px;
}
.hero-handle .at{color:var(--ink-3);font-style:normal;font-weight:300}
.hero-bio{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:clamp(17px,2.6vw,22px);
line-height:1.4;
color:var(--ink);
margin:0 0 28px;
border-left:1px solid var(--ink-3);
padding-left:14px;
max-width:520px;
}
.hero-bio span{display:block}
.hero-bio .italic{color:var(--ink-2)}
.bio-arabic{
font-family:'Amiri', serif;
font-style:normal;
font-weight:400;
font-size:clamp(22px, 3vw, 30px);
color:#ffffff;
line-height:1.5;
margin-bottom:6px;
text-shadow:0 0 18px rgba(232,227,216,.3);
direction:rtl;
}
.foot-quote[dir="rtl"]{
font-family:'Amiri', serif;
font-style:normal;
font-size:18px;
color:#ffffff;
line-height:1.4;
text-shadow:0 0 14px rgba(232,227,216,.25);
}
.hero-cta{
display:flex;flex-wrap:wrap;
gap:10px;
margin-bottom:28px;
}
.hbtn{
font-family:'Cinzel',serif;
font-weight:500;
font-size:11px;
letter-spacing:.32em;
text-transform:uppercase;
padding:13px 22px 13px 24px;
border:1px solid var(--ink-3);
color:var(--ink);
background:transparent;
transition:all .25s cubic-bezier(.18,.89,.32,1.28);
display:inline-flex;align-items:center;gap:8px;
}
.hbtn:hover{
background:rgba(232,227,216,.05);
border-color:var(--ink);
transform:translateY(-2px);
box-shadow:0 8px 22px -8px rgba(232,227,216,.4);
}
.hbtn.primary{
background:var(--ink);
color:#000;
border-color:var(--ink);
}
.hbtn.primary:hover{
background:#fff;
border-color:#fff;
}
.hero-meta{
display:flex;flex-wrap:wrap;
gap:9px;
font-family:'Cinzel',serif;
font-weight:500;
font-size:9px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.4em;
}
.hero-aka{
display:flex;flex-wrap:wrap;
align-items:center;gap:8px;
margin-top:14px;
padding-top:12px;
border-top:1px solid var(--ink-4);
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:11px;
letter-spacing:.06em;
color:var(--ink-2);
max-width:520px;
}
.hero-aka .aka-label{
font-family:'Cinzel',serif;
font-weight:500;
font-size:9px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--ink-3);
padding:3px 8px 3px 10px;
border:1px solid var(--ink-4);
margin-right:4px;
}
.hero-aka .sep{color:var(--ink-4);font-weight:300}
@media (max-width:780px){
.hero-aka{justify-content:center;max-width:none}
}
/* scroll hint */
.scroll-hint{
position:absolute;
bottom:28px;left:50%;
transform:translateX(-50%);
display:flex;flex-direction:column;
align-items:center;gap:5px;
font-family:'Cinzel',serif;
font-weight:500;
font-size:9px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--ink-3);
opacity:0;
animation:scrollHintIn 1s ease 2s forwards, scrollBob 2s ease-in-out infinite 3s;
margin-left:.4em;
}
.scroll-arrow{font-size:14px;animation:scrollArrowBob 2s ease-in-out infinite}
@keyframes scrollHintIn{to{opacity:.7}}
@keyframes scrollArrowBob{
0%,100%{transform:translateY(0)}
50%{transform:translateY(4px)}
}
@keyframes scrollBob{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(3px)}
}
@media (max-width:780px){
.hero-grid{
grid-template-columns:1fr;
text-align:center;
gap:30px;
}
.hero-pfp{margin:0 auto;width:170px}
.hero-bio{margin-left:auto;margin-right:auto;border-left:none;padding-left:0;border-top:1px solid var(--ink-3);padding-top:14px}
.hero-cta{justify-content:center}
.hero-meta{justify-content:center}
}
/* ============================================
SIGIL section
============================================ */
.sigil-section{text-align:center}
.sigil-section .section-eyebrow{justify-content:center;margin-left:0}
.sigil-section .section-eyebrow::after{display:none}
.sigil-display{
position:relative;
width:min(380px,80vw);
margin:42px auto 32px;
filter:drop-shadow(0 0 30px rgba(232,227,216,.18));
animation:sigilBreathe 6s ease-in-out infinite;
}
@keyframes sigilBreathe{
0%,100%{filter:drop-shadow(0 0 24px rgba(232,227,216,.16))}
50%{filter:drop-shadow(0 0 40px rgba(232,227,216,.32))}
}
.sigil-large{
width:100%;height:auto;
display:block;
filter:contrast(1.25) brightness(1.18);
mix-blend-mode:screen;
}
.sigil-burn{
position:absolute;inset:-8%;
background:radial-gradient(circle at 50% 50%, rgba(232,227,216,.15), transparent 60%);
animation:burnPulse 5s ease-in-out infinite;
pointer-events:none;
z-index:-1;
}
@keyframes burnPulse{
0%,100%{opacity:.5;transform:scale(1)}
50%{opacity:1;transform:scale(1.06)}
}
.sigil-lore{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:clamp(16px,2.2vw,20px);
color:var(--ink-2);
max-width:540px;
margin:0 auto;
line-height:1.55;
}
.sigil-tag{
font-family:var(--display);
font-weight:400;
font-size:clamp(26px, 4vw, 38px);
color:var(--red);
margin:8px auto 0;
line-height:1;
letter-spacing:.02em;
text-transform:lowercase;
text-shadow:
0 0 24px var(--red-glow),
0 0 48px rgba(184,24,24,.3),
0 2px 12px rgba(0,0,0,.9);
}
/* games gating: decipher only on default, duck-hunt only on purple */
.kone-flap{display:none !important}
body[data-theme="purple"] .kone-flap{display:flex !important}
body[data-theme="purple"] .decipher-section-wrap,
body[data-theme="purple"] #decipher{display:none !important}
/* second pfp swap — purple-theme PFP only on purple */
.hero-pfp-img.pfp-purple{display:none}
body[data-theme="purple"] .hero-pfp-img.pfp-default{display:none}
body[data-theme="purple"] .hero-pfp{
width:clamp(200px, 24vw, 260px) !important;
aspect-ratio:1 / 1 !important;
}
body[data-theme="purple"] .hero-pfp-frame{
border-radius:50% !important;
overflow:hidden !important;
border:1px solid rgba(167,139,250,.4) !important;
inset:0 !important;
width:auto !important;height:auto !important;
aspect-ratio:1 / 1 !important;
clip-path:circle(50% at 50% 50%);
}
body[data-theme="purple"] .hero-pfp-img.pfp-purple{
display:block;
width:100% !important;
height:100% !important;
object-fit:cover;
object-position:center 22%;
border-radius:50%;
}
@media (max-width:680px){
body[data-theme="purple"] .hero-pfp{
width:160px !important;height:160px !important;
}
}
.hero-pfp-frame{cursor:none}
/* purple-theme cursor variants */
.cur-scope-purple,.cur-sigil-purple,.cur-dot-purple{display:none}
body[data-theme="purple"] .cursor[data-style="scope"] .cur-scope{display:none}
body[data-theme="purple"] .cursor[data-style="scope"] .cur-scope-purple{display:block}
body[data-theme="purple"] .cursor[data-style="sigil"] .cur-sigil{display:none}
body[data-theme="purple"] .cursor[data-style="sigil"] .cur-sigil-purple{display:block}
body[data-theme="purple"] .cursor[data-style="dot"] .cur-dot{display:none}
body[data-theme="purple"] .cursor[data-style="dot"] .cur-dot-purple{display:block}
/* ============================================
KONE-FLAP — flappy-bird style game (purple theme)
============================================ */
.kone-flap{
max-width:760px;
margin:30px auto 0;
display:flex;flex-direction:column;
gap:14px;
}
.kf-head{
display:flex;justify-content:space-between;align-items:center;
padding:0 4px;
}
.kf-stat{display:flex;align-items:baseline;gap:8px}
.kf-num{
font-family:var(--display);
font-size:36px;
color:var(--red);
line-height:1;
text-shadow:0 0 16px var(--red-glow);
}
.kf-lbl{
font-family:'Cinzel',serif;
font-weight:500;
font-size:9px;
letter-spacing:.42em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.42em;
}
.kf-stage{
position:relative;
width:100%;
aspect-ratio:8/5;
background:linear-gradient(180deg, #1a0f3d 0%, #2a1860 50%, #1a0f3d 100%);
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
overflow:hidden;
cursor:none;
user-select:none;
-webkit-user-select:none;
touch-action:manipulation;
}
#kfCanvas{
width:100%;height:100%;
display:block;
cursor:none;
}
.kf-overlay{
position:absolute;inset:0;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:14px;
background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(157,108,255,.2), transparent 70%), rgba(0,0,0,.55);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
transition:opacity .35s ease;
text-align:center;padding:24px;
}
.kf-overlay.hidden{opacity:0;pointer-events:none}
.kf-title{
font-family:var(--display);
font-size:clamp(34px, 6vw, 54px);
color:#fff;
letter-spacing:-.02em;
font-weight:800;
text-shadow:0 0 24px var(--red-glow);
line-height:1;
}
.kf-sub{
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
font-size:13px;
letter-spacing:.06em;
color:var(--ink-2);
text-transform:lowercase;
}
.kf-btn{
font-family:'Cinzel',serif;
font-weight:500;
font-size:11px;
letter-spacing:.42em;
text-transform:uppercase;
padding:13px 26px;
background:var(--red);
color:#fff;
border:1px solid var(--red);
border-radius:8px;
cursor:none;
box-shadow:0 8px 22px -6px var(--red-glow);
transition:transform .15s ease, box-shadow .15s ease;
margin-top:6px;
}
.kf-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -6px var(--red-glow)}
.kf-btn:active{transform:translateY(0) scale(.97)}
@media (max-width:560px){
.kf-stage{aspect-ratio:4/5}
.kf-num{font-size:28px}
}
/* idle game inside the sigil section */
.sigil-display{cursor:none;position:relative}
.sigil-display:active .sigil-large{transform:scale(.94);transition:transform .12s}
.sg-pop-layer{
position:absolute;inset:0;
pointer-events:none;
overflow:visible;
}
.sg-pop{
position:absolute;
font-family:var(--display);
font-size:22px;
color:var(--red);
text-shadow:0 0 12px var(--red-glow);
pointer-events:none;
transform:translate(-50%,-50%);
animation:sgPopUp 1.1s cubic-bezier(.2,.8,.3,1) forwards;
white-space:nowrap;
}
@keyframes sgPopUp{
0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
100%{opacity:0;transform:translate(-50%, calc(-50% - 60px)) scale(.9)}
}
.sg-pop.mult{
font-size:36px;
color:#fff;
text-shadow:0 0 22px var(--red), 0 0 44px var(--red-glow);
}
.sg-spark{
position:absolute;
width:var(--sz, 4px); height:var(--sz, 4px);
background:radial-gradient(circle, #fff, var(--red) 70%);
border-radius:50%;
pointer-events:none;
transform:translate(-50%,-50%);
box-shadow:0 0 10px var(--red), 0 0 20px var(--red-glow);
animation:sgSparkFly .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sgSparkFly{
0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
100%{
opacity:0;
transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 30px)) scale(.3);
}
}
.sg-num.pulse{
animation:sgPulse .35s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes sgPulse{
0%{transform:scale(1)}
40%{transform:scale(1.18)}
100%{transform:scale(1)}
}
.sigil-display.combo-on .sigil-large{
filter:drop-shadow(0 0 30px var(--red-glow)) brightness(1.1);
}
.sigil-display.combo-hot .sigil-large{
filter:drop-shadow(0 0 50px var(--red)) brightness(1.25) hue-rotate(-15deg);
}
.sigil-display.combo-fire .sigil-large{
filter:drop-shadow(0 0 80px #fff) brightness(1.5) hue-rotate(-30deg) saturate(1.5);
animation:sigilBreathe 1.4s ease-in-out infinite !important;
}
.sigil-game{
max-width:640px;margin:30px auto 0;
display:flex;flex-direction:column;gap:18px;
padding:22px;
border:1px solid var(--ink-4);
background:rgba(8,8,8,.4);
position:relative;
}
.sigil-game::before,.sigil-game::after{
content:"";position:absolute;width:10px;height:10px;border:1px solid var(--ink-3);
}
.sigil-game::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.sigil-game::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.sg-stats{
display:flex;justify-content:space-between;align-items:end;
gap:14px;
border-bottom:1px solid var(--ink-4);
padding-bottom:14px;
}
.sg-counter{display:flex;align-items:baseline;gap:10px}
.sg-num{
font-family:var(--display);
font-size:clamp(40px, 6vw, 56px);
color:var(--red);
line-height:.95;
letter-spacing:.01em;
text-shadow:0 0 22px var(--red-glow);
}
.sg-label{
font-family:'Cinzel',serif;
font-weight:500;font-size:10px;
letter-spacing:.42em;text-transform:uppercase;
color:var(--ink-3);margin-left:.42em;
}
.sg-rate{
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:12px;
letter-spacing:.06em;
color:var(--ink-2);
white-space:nowrap;
}
.sg-upgrades{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media (max-width:600px){.sg-upgrades{grid-template-columns:1fr}}
.sg-up{
display:flex;flex-direction:column;align-items:flex-start;
gap:4px;padding:12px 14px;
background:#000;
border:1px solid var(--ink-4);
color:var(--ink-2);
text-align:left;
cursor:none;
transition:all .2s;
}
.sg-up:hover:not(.disabled):not(.owned){
border-color:var(--ink);background:rgba(232,227,216,.04);color:var(--ink);
}
.sg-up.disabled{opacity:.5}
.sg-up.owned{
border-color:var(--red);
background:rgba(184,24,24,.08);
color:var(--ink);
box-shadow:0 0 14px var(--red-glow) inset;
}
.sg-up-name{
font-family:var(--display);
font-size:20px;
color:inherit;
text-transform:lowercase;
letter-spacing:.02em;
line-height:1;
}
.sg-up-meta{
font-family:'JetBrains Mono',monospace;
font-weight:300;font-size:11px;
letter-spacing:.04em;
color:var(--ink-2);
}
.sg-up-cost{
font-family:'Cinzel',serif;
font-weight:500;font-size:9px;
letter-spacing:.32em;text-transform:uppercase;
color:var(--ink-3);margin-left:.32em;
}
.sg-up.owned .sg-up-cost{color:var(--red)}
.sg-message{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:14px;
color:var(--ink-3);
text-align:center;
border-top:1px solid var(--ink-4);
padding-top:14px;
}
/* Mike PFP — 10-tap secret unlock */
.hero-pfp-frame{cursor:none;position:relative}
.hero-pfp-frame::after{
content:"";
position:absolute;inset:-12px;
border-radius:50%;
border:2px solid transparent;
background:conic-gradient(var(--red) var(--mike-pct, 0%), transparent 0%);
-webkit-mask:radial-gradient(circle, transparent 65%, #000 67%);
mask:radial-gradient(circle, transparent 65%, #000 67%);
pointer-events:none;
transition:opacity .3s;
filter:drop-shadow(0 0 6px var(--red-glow));
}
.hero-pfp-frame.mike-tick{
animation:mikeTick .25s ease-out;
}
@keyframes mikeTick{
0%{transform:scale(1)}
40%{transform:scale(.97)}
100%{transform:scale(1)}
}
.hero-pfp-frame.mike-unlocked{
animation:mikeUnlock 1.6s cubic-bezier(.16,1,.3,1);
}
@keyframes mikeUnlock{
0%{box-shadow:0 0 0 rgba(184,24,24,0)}
20%{box-shadow:0 0 60px var(--red), 0 0 120px var(--red-glow)}
100%{box-shadow:0 0 0 rgba(184,24,24,0)}
}
/* ============================================
DECIPHER section + puzzle
============================================ */
/* decipher 2-col layout: art on left, puzzle on right */
.decipher-layout{
display:grid;
grid-template-columns:minmax(220px, 320px) 1fr;
gap:36px;
align-items:start;
margin-top:30px;
}
@media (max-width:780px){
.decipher-layout{
grid-template-columns:1fr;
gap:24px;
}
}
.decipher-section-wrap .decipher{
margin:0;
max-width:560px;
}
/* puzzle-art frame */
.puzzle-art{
margin:0;
display:flex;flex-direction:column;
gap:14px;
}
.puzzle-art-frame{
position:relative;
background:#0a0a0a;
padding:14px 14px 14px;
border:1px solid var(--ink-3);
box-shadow:
0 22px 50px -12px rgba(0,0,0,.85),
0 0 0 1px rgba(255,255,255,.03) inset;
transform:rotate(-1.6deg);
transition:transform .4s cubic-bezier(.18,.89,.32,1.28);
}
.puzzle-art-frame:hover{
transform:rotate(0deg) scale(1.02);
}
.puzzle-art-frame::before,.puzzle-art-frame::after{
content:"";position:absolute;
width:14px;height:14px;
border:1px solid var(--ink-2);
}
.puzzle-art-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.puzzle-art-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.puzzle-art-frame img{
display:block;
width:100%;
height:auto;
filter:contrast(1.08) brightness(.92) saturate(.78);
border:1px solid var(--ink-4);
}
.puzzle-art-grain{
position:absolute;inset:14px;
pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
opacity:.55;
}
/* tape effect on opposite corners */
.puzzle-art-tape{
position:absolute;
width:54px;height:18px;
background:rgba(232,227,216,.18);
border:1px solid rgba(232,227,216,.18);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
pointer-events:none;
}
.puzzle-art-tape-tl{top:-9px;left:18px;transform:rotate(-22deg)}
.puzzle-art-tape-br{bottom:-9px;right:18px;transform:rotate(-22deg)}
.puzzle-art figcaption{
display:flex;flex-direction:column;
gap:6px;
padding:0 6px;
}
.art-num{
font-family:'Cinzel',serif;font-weight:500;font-size:9px;
letter-spacing:.42em;text-transform:uppercase;
color:var(--ink-3);margin-left:.42em;
}
.art-quote{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:14px;color:var(--ink);
line-height:1.45;
border-left:1px solid var(--ink-3);
padding-left:10px;
}
.art-cred{
font-family:'JetBrains Mono',monospace;font-weight:300;
font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-4);
margin-top:2px;
}
.decipher{
margin:18px 0 22px;
padding:22px 20px 18px;
border:1px solid var(--ink-4);
background:rgba(0,0,0,.45);
position:relative;
}
.decipher::before,.decipher::after{
content:"";
position:absolute;
width:10px;height:10px;
border:1px solid var(--ink-3);
}
.decipher::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.decipher::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.decipher-head{
display:flex;align-items:center;gap:10px;
margin-bottom:16px;
}
.d-line{
flex:1;height:1px;
background:linear-gradient(90deg,transparent,var(--ink-4),transparent);
}
.d-title{
font-family:'Cinzel',serif;
font-weight:500;
font-size:9.5px;
letter-spacing:.42em;
text-transform:uppercase;
color:var(--ink-2);
margin-left:.42em;
white-space:nowrap;
}
.d-glyphs{
display:flex;justify-content:center;gap:7px;
margin-bottom:18px;
flex-wrap:wrap;
}
.d-glyph{
width:36px;height:44px;
display:flex;align-items:center;justify-content:center;
font-family:'UnifrakturCook','Pirata One',serif;
font-weight:700;
font-size:24px;
color:var(--ink);
background:transparent;
border:1px solid var(--ink-4);
border-bottom:1px solid var(--ink-2);
position:relative;
transition:all .3s cubic-bezier(.18,.89,.32,1.28);
text-shadow:0 0 12px rgba(232,227,216,.25);
}
.d-glyph.glow{
border-color:var(--ink);
color:#fff;
text-shadow:0 0 18px var(--ink), 0 0 32px rgba(232,227,216,.5);
animation:glyphPulse 1.4s ease-in-out infinite;
}
@keyframes glyphPulse{
0%,100%{transform:translateY(0);text-shadow:0 0 18px var(--ink)}
50%{transform:translateY(-3px);text-shadow:0 0 26px #fff,0 0 40px var(--ink)}
}
.d-glyph .d-meaning{
position:absolute;
top:calc(100% + 5px);
left:50%;transform:translateX(-50%);
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:11px;
letter-spacing:.04em;
color:var(--ink-3);
white-space:nowrap;
opacity:0;
transition:opacity .5s ease;
text-transform:lowercase;
text-shadow:none;
}
.d-glyph.revealed .d-meaning{opacity:1}
.d-glyph.revealed{border-bottom-color:var(--ink)}
.d-input-wrap{
display:flex;align-items:center;gap:8px;
padding:9px 12px;
background:#000;
border:1px solid var(--ink-4);
margin-bottom:11px;
transition:border-color .25s;
}
.d-input-wrap:focus-within{border-color:var(--ink)}
.d-prompt{
font-family:'JetBrains Mono',monospace;
font-weight:300;color:var(--ink-2);
font-size:14px;user-select:none;
}
.d-input{
flex:1;background:transparent;border:none;outline:none;
color:var(--ink);
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:16px;letter-spacing:.02em;
caret-color:var(--ink);
}
.d-input::placeholder{color:var(--ink-3);font-style:italic}
.d-submit{
background:transparent;
border:1px solid var(--ink-4);
color:var(--ink-2);
font-family:'Cinzel',serif;
font-weight:500;
font-size:9.5px;
letter-spacing:.32em;
text-transform:uppercase;
padding:7px 12px 7px 14px;
transition:all .2s;
}
.d-submit:hover{border-color:var(--ink);color:var(--ink);background:rgba(232,227,216,.05)}
.d-submit:active{transform:scale(.96)}
.d-feedback{
display:flex;justify-content:space-between;align-items:center;
gap:10px;
font-family:'JetBrains Mono',monospace;
font-weight:300;font-size:10px;
letter-spacing:.06em;color:var(--ink-3);
}
.d-status{flex:1;line-height:1.45}
.d-status.warm{color:var(--ink-2)}
.d-status.hot{color:var(--ink)}
.d-status.win{
color:var(--ink);font-weight:400;
letter-spacing:.18em;text-transform:uppercase;
}
.d-status.shake{animation:shake .35s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
10%,90%{transform:translateX(-1px)}
20%,80%{transform:translateX(2px)}
30%,50%{transform:translateX(-3px)}
40%,60%{transform:translateX(3px)}
}
.d-attempts{font-size:9px;letter-spacing:.2em;color:var(--ink-4);white-space:nowrap}
.d-reveal{
margin-top:14px;text-align:center;
font-family:'UnifrakturCook','Pirata One',serif;
font-weight:700;font-size:0;
color:var(--ink);letter-spacing:.04em;line-height:1.05;
text-shadow:0 0 24px rgba(232,227,216,.4);
opacity:0;max-height:0;overflow:hidden;
transition:max-height .9s cubic-bezier(.16,1,.3,1), opacity .9s ease, font-size .9s ease;
}
.d-reveal.show{font-size:clamp(22px,5.5vw,30px);opacity:1;max-height:200px;margin-top:18px}
.d-reveal-line{display:block}
.d-reveal-line.italic{font-style:normal;color:var(--ink-2);margin-top:4px}
.decipher.solved{border-color:var(--ink-2);background:rgba(232,227,216,.04)}
.decipher.solved::before,.decipher.solved::after{border-color:var(--ink)}
/* gospel */
.gospel{
display:none;text-align:center;
padding:6px 4px 4px;
animation:gospelIn 1.4s cubic-bezier(.16,1,.3,1) both;
}
.decipher.solved .gospel{display:block}
.decipher.solved .decipher-head,
.decipher.solved .d-glyphs,
.decipher.solved .d-input-wrap,
.decipher.solved .d-feedback,
.decipher.solved .d-reveal{display:none}
.gospel-mark{
font-family:'Cormorant Garamond',serif;
font-size:11px;letter-spacing:.55em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:14px;margin-left:.55em;
}
.gospel-line-1{
font-family:var(--display);font-weight:400;
font-size:clamp(34px,8vw,54px);letter-spacing:.02em;line-height:.92;
color:var(--red);
text-shadow:
0 0 28px var(--red-glow),
0 0 60px rgba(184,24,24,.3),
0 2px 14px rgba(0,0,0,.9);
text-transform:lowercase;margin:0 0 4px;
}
.gospel-line-2{
font-family:var(--display);font-weight:400;
font-size:clamp(22px,5.5vw,36px);letter-spacing:.04em;line-height:1;
color:var(--ink-2);
text-shadow:0 0 22px rgba(232,227,216,.3),0 2px 12px rgba(0,0,0,.9);
text-transform:lowercase;margin:0;
}
.gospel-divider{
display:flex;align-items:center;justify-content:center;gap:14px;
margin:14px 0;color:var(--ink-3);
}
.gospel-divider span{font-size:14px;letter-spacing:.4em}
.gospel-divider::before,.gospel-divider::after{
content:"";flex:0 0 50px;height:1px;
background:linear-gradient(90deg,transparent,var(--ink-3),transparent);
}
.gospel-line-3{
font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
font-size:clamp(18px,4.5vw,24px);letter-spacing:.03em;
color:var(--ink);margin:0;line-height:1.2;
text-shadow:0 0 18px rgba(232,227,216,.35);
}
.gospel-foot{
margin-top:18px;
font-family:'Cinzel',serif;font-weight:500;font-size:9.5px;
letter-spacing:.42em;text-transform:uppercase;
color:var(--ink-3);margin-left:.42em;
}
@keyframes gospelIn{
0%{opacity:0;transform:translateY(8px);filter:blur(6px)}
100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
/* WIN celebration — flash, shake, sparks, oversized gospel impact */
.win-flash{
position:fixed;inset:0;z-index:9998;
background:radial-gradient(ellipse at 50% 50%, #fff 0%, rgba(255,80,80,.85) 40%, rgba(0,0,0,0) 80%);
pointer-events:none;
mix-blend-mode:screen;
animation:winFlash 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes winFlash{
0%{opacity:0;transform:scale(.4)}
10%{opacity:1}
100%{opacity:0;transform:scale(1.6)}
}
.win-sparks{
position:fixed;
width:1px;height:1px;
pointer-events:none;
z-index:9997;
}
.win-spark{
position:absolute;
top:0;left:0;
width:5px;height:5px;
border-radius:50%;
background:#fff;
box-shadow:0 0 12px #fff, 0 0 24px var(--red), 0 0 36px var(--red-glow);
animation:sparkFly 1.8s cubic-bezier(.16,1,.3,1) forwards;
transform:translate(-50%,-50%);
}
@keyframes sparkFly{
0%{transform:translate(-50%,-50%) scale(1.4);opacity:1}
60%{opacity:1}
100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 100px)) scale(.2);opacity:0}
}
.win-shake{animation:winShake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes winShake{
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px,0,0)}
}
/* gospel lines get oversized, slingshot reveal */
.decipher.solved .gospel-line-1{
animation:gospelImpact 1.2s cubic-bezier(.34,1.56,.64,1) .25s both;
}
.decipher.solved .gospel-line-2{
animation:gospelImpact 1.2s cubic-bezier(.34,1.56,.64,1) .55s both;
}
.decipher.solved .gospel-line-3{
animation:gospelImpact 1s cubic-bezier(.16,1,.3,1) 1.1s both;
}
@keyframes gospelImpact{
0%{
transform:scale(2.2);
opacity:0;
filter:blur(24px) brightness(2.5);
text-shadow:0 0 80px #fff,0 0 160px var(--red);
}
35%{
opacity:1;
filter:blur(0) brightness(1.2);
}
100%{
transform:scale(1);
opacity:1;
filter:blur(0) brightness(1);
}
}
/* a brief red bloom on the body */
.win-bloom{
animation:winBloom 2.4s ease-out;
}
@keyframes winBloom{
0%{box-shadow:inset 0 0 0 rgba(184,24,24,0)}
10%{box-shadow:inset 0 0 240px rgba(184,24,24,.55)}
100%{box-shadow:inset 0 0 0 rgba(184,24,24,0)}
}
/* alt readings */
.alt-readings{margin-top:24px;padding-top:18px;border-top:1px solid var(--ink-4)}
.alt-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.alt-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ink-4),transparent)}
.alt-title{
font-family:'Cinzel',serif;font-weight:500;font-size:9px;
letter-spacing:.42em;text-transform:uppercase;color:var(--ink-3);
margin-left:.42em;white-space:nowrap;
}
.alt-stage{position:relative;min-height:74px;display:flex;align-items:center;justify-content:center;padding:6px 4px}
.alt-card{
position:absolute;inset:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;opacity:0;transform:translateY(8px);
transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
.alt-card.active{opacity:1;transform:translateY(0);pointer-events:auto}
.alt-num{
font-family:'Cinzel',serif;font-weight:500;font-size:9px;
letter-spacing:.4em;text-transform:uppercase;color:var(--ink-3);
margin-bottom:6px;margin-left:.4em;
}
.alt-text{
font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
font-size:clamp(14px,3.6vw,17px);letter-spacing:.01em;
color:var(--ink);line-height:1.4;max-width:340px;
text-shadow:0 0 14px rgba(232,227,216,.15);
}
.alt-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.alt-dot{
width:5px;height:5px;border-radius:50%;
background:var(--ink-4);border:none;padding:0;
transition:all .25s;cursor:none;
}
.alt-dot.active{
background:var(--ink);width:18px;border-radius:3px;
box-shadow:0 0 8px rgba(232,227,216,.5);
}
/* ============================================
MANIFESTO
============================================ */
.manifesto{
list-style:none;padding:0;margin:0;
display:grid;
grid-template-columns:1fr;
gap:0;
max-width:780px;
}
.manifesto li{
display:grid;
grid-template-columns:80px 1fr;
gap:24px;
padding:24px 0;
border-bottom:1px solid var(--ink-4);
align-items:start;
}
.manifesto li:last-child{border-bottom:none}
.m-num{
font-family:'Pirata One','UnifrakturCook',serif;
font-size:clamp(34px,5vw,46px);
color:var(--ink-3);
line-height:1;
text-align:right;
letter-spacing:.04em;
transition:color .3s;
}
.manifesto li:hover .m-num{
color:var(--ink);
text-shadow:0 0 16px rgba(232,227,216,.4);
}
.m-body h4{
font-family:'Cormorant Garamond',serif;
font-style:italic;font-weight:500;
font-size:clamp(20px,3vw,28px);
margin:0 0 6px;color:var(--ink);
letter-spacing:.01em;line-height:1.2;
}
.m-body p{
font-family:'Cormorant Garamond',serif;
font-weight:400;
font-size:clamp(15px,2vw,17px);
line-height:1.55;
color:var(--ink-2);
margin:0;max-width:520px;
}
@media (max-width:600px){
.manifesto li{grid-template-columns:50px 1fr;gap:16px;padding:18px 0}
}
/* ============================================
WORK
============================================ */
/* clean work cards — equal height, minimal content */
.work-grid{
display:flex;
flex-wrap:wrap;
gap:14px;
}
.work-grid > .work-card{
flex:1 1 calc(50% - 7px);
min-width:260px;
max-width:calc(50% - 7px);
width:auto !important;
min-height:200px;
display:flex;flex-direction:column;
padding:22px 22px 18px;
text-decoration:none;
position:relative;
overflow:hidden;
}
@media (max-width:760px){
.work-grid > .work-card{flex:1 1 100%;max-width:100%}
}
/* center the lone last card (when count is odd in 2-col flex layout) */
@media (min-width:761px){
.work-grid > .work-card:last-child:nth-child(odd){
margin-left:auto;
margin-right:auto;
}
}
.wc-top{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:18px;
gap:10px;
}
.wc-mark{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--ink-3);
background:#000;
flex-shrink:0;
}
.wc-mark-img{padding:5px}
.wc-mark-img img{width:100%;height:100%;object-fit:contain;display:block}
.wc-mark-svg svg{width:60%;height:60%}
.wc-mark-svg{color:var(--w-color, var(--ink-2))}
.wc-status{
display:inline-flex;align-items:center;gap:6px;
font-family:'JetBrains Mono',monospace;
font-weight:400;font-size:9.5px;
letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-3);
padding:4px 9px;
border:1px solid var(--ink-4);
}
.wc-status .dot{
width:5px;height:5px;border-radius:50%;
background:var(--ink);
box-shadow:0 0 6px var(--ink);
animation:dotPulse 2.4s ease-in-out infinite;
}
.wc-status .parent-chip{
font-size:8.5px;letter-spacing:.22em;
color:var(--ink-3);padding:2px 7px;
border:1px solid var(--ink-4);
margin-right:4px;
}
.wc-body{flex:1;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.wc-title{
font-family:var(--display);
font-weight:400;font-size:clamp(28px,4vw,38px);
margin:0;line-height:1;
letter-spacing:.01em;
color:var(--w-color, var(--red));
text-transform:lowercase;
text-shadow:
0 0 18px var(--w-glow, var(--red-glow)),
0 2px 10px rgba(0,0,0,.9);
}
.wc-line{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:15px;line-height:1.4;
color:var(--ink-2);
margin:0;
}
.wc-line b{color:var(--ink);font-weight:500}
.wc-foot{
display:flex;justify-content:flex-end;align-items:center;
padding-top:10px;border-top:1px solid var(--ink-4);
}
.wc-cta{
font-family:'Cinzel',serif;font-weight:500;font-size:10px;
letter-spacing:.4em;text-transform:uppercase;
color:var(--ink-2);
margin-left:.4em;
transition:color .2s, transform .25s, letter-spacing .25s;
}
.work-card:hover{
background:rgba(232,227,216,.04);
border-color:var(--w-color, var(--ink-2));
transform:translateY(-3px);
box-shadow:0 14px 30px -10px var(--w-glow, transparent);
}
.work-card:hover .wc-cta{
color:var(--w-color, var(--ink));
letter-spacing:.5em;
}
/* Hideout co-owners row — separate from cards, doesn't bloat them */
.hideout-owners-row{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
margin-top:18px;
padding:12px 16px;
border:1px solid var(--ink-4);
border-left:2px solid var(--violet, #8b5cff);
background:rgba(139,92,255,.04);
}
.hideout-owners-row .ho-label{
font-family:'Cinzel',serif;
font-weight:500;font-size:9.5px;
letter-spacing:.42em;text-transform:uppercase;
color:var(--ink-3);
margin-right:8px;margin-left:.42em;
}
.hideout-owners-row a{
font-family:'JetBrains Mono',monospace;
font-weight:300;font-size:12px;
color:var(--violet, #8b5cff);
border-bottom:1px dashed color-mix(in srgb, var(--violet, #8b5cff) 50%, transparent);
padding-bottom:1px;
transition:color .2s, border-color .2s, text-shadow .2s;
}
.hideout-owners-row a:hover{
color:#fff;
border-bottom-color:var(--violet, #8b5cff);
text-shadow:0 0 12px rgba(139,92,255,.6);
}
/* leftover-row centering: handled in JS via inline grid-column-start
on the first orphan in the last row. Applies to any auto-fit grid. */
/* discord-style mark for The Hideout — uses an inline SVG, not an image */
.work-mark-svg{
background:#000;
display:flex;align-items:center;justify-content:center;
color:var(--w-color);
}
.work-mark-svg svg{
width:60%;height:60%;
filter:drop-shadow(0 0 8px var(--w-glow, rgba(255,255,255,.3)));
transition:filter .25s, transform .25s;
}
.work-card:hover .work-mark-svg svg{
filter:drop-shadow(0 0 14px var(--w-glow, rgba(255,255,255,.5)));
transform:scale(1.06);
}
.work-card{
position:relative;display:block;
background:rgba(8,8,8,.5);
border:1px solid var(--ink-4);
padding:0;
transition:all .3s cubic-bezier(.18,.89,.32,1.28);
overflow:hidden;
}
.work-card::before,.work-card::after{
content:"";position:absolute;
width:12px;height:12px;
border:1px solid var(--ink-3);
transition:border-color .3s;
}
.work-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.work-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.work-card-inner{padding:26px 26px 22px}
.work-card:hover{
background:rgba(232,227,216,.04);
border-color:var(--ink-2);
transform:translateY(-4px);
box-shadow:0 14px 30px -10px rgba(232,227,216,.2);
}
.work-card:hover::before,.work-card:hover::after{border-color:var(--ink)}
.work-card-head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:18px;
}
.work-mark{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
font-family:'UnifrakturCook',serif;font-weight:700;font-size:26px;
color:var(--ink);
border:1px solid var(--ink-3);
background:#000;
text-shadow:0 0 16px rgba(232,227,216,.4);
}
.work-status{
display:inline-flex;align-items:center;gap:6px;
font-family:'JetBrains Mono',monospace;font-weight:300;
font-size:9px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-3);
padding:4px 9px;
border:1px solid var(--ink-4);
}
.work-status .dot{
width:5px;height:5px;border-radius:50%;
background:var(--ink);box-shadow:0 0 6px var(--ink);
animation:dotPulse 2.4s ease-in-out infinite;
}
.work-card h3{
font-family:var(--display);
font-weight:400;font-size:clamp(34px,5.5vw,46px);
margin:0 0 4px;letter-spacing:.02em;line-height:.95;
color:var(--w-color, var(--red));text-transform:lowercase;
text-shadow:
0 0 22px var(--w-glow, var(--red-glow)),
0 2px 12px rgba(0,0,0,.9);
}
.work-card.landonkone{ --w-color: var(--lime); --w-glow: var(--lime-glow); }
.work-card.chartix { --w-color: var(--blue); --w-glow: var(--blue-glow); }
.work-card.hideout { --w-color: var(--violet); --w-glow: var(--violet-glow); }
.work-card.indicators{ --w-color: var(--gold); --w-glow: var(--gold-glow); }
.work-card.landonkone .work-mark,
.work-card.chartix .work-mark,
.work-card.hideout .work-mark,
.work-card.indicators .work-mark{
color:var(--w-color);
border-color:color-mix(in srgb, var(--w-color) 60%, var(--ink-3));
text-shadow:0 0 16px var(--w-glow);
}
.work-mark-img{
padding:5px;
background:#000;
box-shadow:0 0 18px var(--w-glow, transparent) inset;
}
.work-mark-img img{
width:100%;height:100%;
object-fit:contain;
display:block;
filter:drop-shadow(0 0 6px var(--w-glow, rgba(255,255,255,.2)));
transition:filter .25s, transform .25s;
}
.work-card:hover .work-mark-img img{
filter:drop-shadow(0 0 12px var(--w-glow, rgba(255,255,255,.4)));
transform:scale(1.06);
}
.work-card.landonkone:hover,
.work-card.chartix:hover,
.work-card.hideout:hover,
.work-card.indicators:hover{
border-color:color-mix(in srgb, var(--w-color) 50%, var(--ink-2));
box-shadow:0 14px 30px -10px var(--w-glow);
}
.work-card.landonkone:hover::before,.work-card.landonkone:hover::after,
.work-card.chartix:hover::before,.work-card.chartix:hover::after,
.work-card.hideout:hover::before,.work-card.hideout:hover::after,
.work-card.indicators:hover::before,.work-card.indicators:hover::after{
border-color:var(--w-color);
}
.work-card.landonkone:hover .work-arrow,
.work-card.chartix:hover .work-arrow,
.work-card.hideout:hover .work-arrow,
.work-card.indicators:hover .work-arrow{
color:var(--w-color);
border-bottom-color:var(--w-color);
}
.work-tagline{
font-family:'Cinzel',serif;font-weight:500;font-size:9.5px;
letter-spacing:.32em;text-transform:uppercase;
color:var(--ink-3);margin:0 0 18px;margin-left:.32em;
}
.work-desc{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:16px;line-height:1.55;
color:var(--ink-2);margin:0 0 18px;
}
.work-desc b{color:var(--ink);font-weight:500}
.hideout-owners{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
margin:0 0 16px;
padding:10px 12px;
border:1px solid var(--ink-4);
border-left:2px solid var(--violet);
background:rgba(139,92,255,.04);
}
.hideout-owners .ho-label{
font-family:'Cinzel',serif;
font-weight:500;font-size:9px;
letter-spacing:.4em;text-transform:uppercase;
color:var(--ink-3);
margin-right:6px;margin-left:.4em;
}
.hideout-owners a{
font-family:'JetBrains Mono',monospace;
font-weight:300;font-size:11.5px;
letter-spacing:.04em;
color:var(--violet);
border-bottom:1px dashed color-mix(in srgb, var(--violet) 50%, transparent);
padding-bottom:1px;
transition:color .2s, border-color .2s, text-shadow .2s;
}
.hideout-owners a:hover{
color:#fff;
border-bottom-color:var(--violet);
text-shadow:0 0 12px var(--violet-glow);
}
.hideout-owners .ho-name{
font-family:'JetBrains Mono',monospace;
font-weight:300;font-size:11.5px;
letter-spacing:.04em;
color:var(--violet);
opacity:.85;
}
.work-tags{
display:flex;flex-wrap:wrap;gap:5px;
margin-bottom:20px;
}
.work-tags span{
font-family:'Cinzel',serif;font-weight:500;font-size:8.5px;
letter-spacing:.28em;text-transform:uppercase;
padding:4px 8px 4px 10px;
border:1px solid var(--ink-4);
color:var(--ink-3);
}
.work-arrow{
display:inline-block;
font-family:'Cinzel',serif;font-weight:500;font-size:10px;
letter-spacing:.32em;text-transform:uppercase;
color:var(--ink-2);
border-bottom:1px solid var(--ink-3);
padding-bottom:3px;margin-left:.32em;
transition:all .25s;
}
.work-card:hover .work-arrow{
color:var(--ink);
border-bottom-color:var(--ink);
letter-spacing:.4em;
}
/* "by DK PROJX" parent chip on work cards */
.parent-chip{
font-family:'Cinzel',serif;
font-weight:500;
font-size:8.5px;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--ink-3);
padding:3px 8px 3px 10px;
border:1px solid var(--ink-4);
margin-right:8px;
}
/* ============================================
WATCH — video player (coming soon)
============================================ */
.video-player{
max-width:740px;
margin:0 auto;
cursor:none;
}
.vp-frame{
position:relative;
aspect-ratio:16/9;
border:1px solid var(--ink-3);
background:#000;
overflow:hidden;
box-shadow:0 24px 60px -16px rgba(0,0,0,.85);
}
.vp-frame::before,.vp-frame::after{
content:"";position:absolute;
width:14px;height:14px;
border:1px solid var(--ink-2);
z-index:3;
transition:border-color .3s;
}
.vp-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.vp-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.video-player:hover .vp-frame::before,
.video-player:hover .vp-frame::after{border-color:var(--red)}
.vp-thumb{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
}
.vp-thumb img{
width:100%;height:100%;
object-fit:cover;
filter:contrast(1.05) brightness(.4) saturate(.7);
transform:scale(1.05);
transition:filter .35s, transform .6s;
}
.video-player:hover .vp-thumb img{
filter:contrast(1.1) brightness(.55) saturate(.8);
transform:scale(1);
}
.vp-overlay{
position:absolute;inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, transparent, rgba(0,0,0,.65) 80%),
repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
}
.vp-play{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:96px;height:96px;
border-radius:50%;
background:rgba(0,0,0,.6);
border:1.5px solid var(--ink);
color:var(--ink);
display:flex;align-items:center;justify-content:center;
z-index:2;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
transition:all .3s cubic-bezier(.18,.89,.32,1.28);
}
.vp-play svg{margin-left:6px;transition:transform .25s}
.vp-play::before{
content:"";
position:absolute;inset:-8px;
border:1px solid var(--ink-3);
border-radius:50%;
animation:vpRing 2.5s ease-in-out infinite;
pointer-events:none;
}
@keyframes vpRing{
0%,100%{transform:scale(1);opacity:.6}
50%{transform:scale(1.12);opacity:0}
}
.video-player:hover .vp-play{
background:var(--red);
border-color:var(--red);
color:#fff;
box-shadow:0 0 30px var(--red-glow);
}
.video-player:hover .vp-play svg{transform:scale(1.1)}
.vp-meta{
position:absolute;
bottom:14px;left:16px;right:16px;
z-index:2;
display:flex;justify-content:space-between;align-items:end;
font-family:'Cinzel',serif;
font-weight:500;
font-size:10px;
letter-spacing:.32em;
color:var(--ink-2);
}
.vp-len{
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:11px;
letter-spacing:.06em;
color:var(--ink-3);
}
/* coming soon overlay */
.vp-soon{
position:absolute;inset:0;
z-index:5;
background:rgba(0,0,0,.92);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;
text-align:center;
padding:30px;
opacity:0;
pointer-events:none;
transition:opacity .55s cubic-bezier(.16,1,.3,1);
}
.video-player.soon-on .vp-soon{
opacity:1;
pointer-events:auto;
}
.vp-soon-mark{
font-family:'Cinzel',serif;
font-weight:500;
font-size:10px;
letter-spacing:.5em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.5em;
opacity:0;transform:translateY(8px);
transition:opacity .6s ease .1s, transform .6s ease .1s;
}
.vp-soon-title{
font-family:var(--display);
font-weight:400;
font-size:clamp(40px, 7vw, 64px);
color:var(--red);
text-shadow:
0 0 26px var(--red-glow),
0 0 60px rgba(184,24,24,.3);
letter-spacing:.02em;
text-transform:lowercase;
line-height:.95;
opacity:0;transform:translateY(12px) scale(.96);filter:blur(8px);
transition:opacity .8s cubic-bezier(.16,1,.3,1) .25s, transform .8s cubic-bezier(.16,1,.3,1) .25s, filter .8s ease .25s;
animation:vpFlicker 4s ease-in-out infinite 1.2s;
}
@keyframes vpFlicker{
0%,100%{opacity:1}
47%{opacity:1}
48%{opacity:.45}
49%{opacity:1}
73%{opacity:1}
74%{opacity:.65}
75%{opacity:1}
}
.vp-soon-sub{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:14px;
color:var(--ink-2);
opacity:0;transform:translateY(6px);
transition:opacity .6s ease .55s, transform .6s ease .55s;
}
.vp-soon-bar{
width:min(280px, 80%);
height:2px;
background:var(--ink-4);
overflow:hidden;
margin-top:6px;
opacity:0;
transition:opacity .6s ease .8s;
}
.vp-soon-bar-fill{
height:100%;width:0%;
background:linear-gradient(90deg, transparent, var(--red), transparent);
transition:none;
}
.video-player.soon-on .vp-soon-mark{opacity:1;transform:translateY(0)}
.video-player.soon-on .vp-soon-title{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.video-player.soon-on .vp-soon-sub{opacity:1;transform:translateY(0)}
.video-player.soon-on .vp-soon-bar{opacity:1}
.video-player.soon-on .vp-soon-bar-fill{
width:100%;
transition:width 2.4s cubic-bezier(.4,0,.2,1) 1s;
}
.vp-close{
position:absolute;
top:14px;right:14px;
width:32px;height:32px;
background:transparent;
border:1px solid var(--ink-4);
color:var(--ink-3);
font-family:'Cormorant Garamond',serif;
font-size:22px;
line-height:1;
display:flex;align-items:center;justify-content:center;
transition:all .25s;
}
.vp-close:hover{
border-color:var(--ink);
color:var(--ink);
}
/* ============================================
SHOUTOUTS / RESPECT
============================================ */
.shoutouts-section{text-align:center}
.shoutouts-section .section-eyebrow{justify-content:center;margin-left:0}
.shoutouts-section .section-eyebrow::after{display:none}
.shoutouts-section .section-sub{margin-left:auto;margin-right:auto}
.shoutouts-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
gap:14px;
max-width:880px;
margin:0 auto;
}
.shoutout-card{
display:grid;
grid-template-columns:46px 1fr auto;
align-items:center;gap:14px;
padding:16px 18px 16px 14px;
border:1px solid var(--ink-4);
background:rgba(8,8,8,.4);
text-align:left;
color:var(--ink-2);
transition:all .25s cubic-bezier(.18,.89,.32,1.28);
}
a.shoutout-card:hover{
background:rgba(232,227,216,.04);
border-color:var(--so-color, var(--ink-2));
transform:translateY(-2px);
color:var(--ink);
box-shadow:0 10px 22px -8px var(--so-glow, transparent);
}
a.shoutout-card:hover .so-arrow{transform:translateX(4px);color:var(--so-color, var(--ink))}
.shoutout-card.golden { --so-color:#ffd24a; --so-glow:rgba(255,210,74,.3) }
.shoutout-card.dkprojx { --so-color:#3affe5; --so-glow:rgba(58,255,229,.3) }
.shoutout-card.malick { --so-color:var(--ink-2) }
.so-mark{
width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
font-family:var(--display);
font-weight:400;font-size:24px;
color:var(--so-color, var(--ink));
background:#000;
border:1px solid color-mix(in srgb, var(--so-color, var(--ink-3)) 50%, var(--ink-3));
text-shadow:0 0 14px var(--so-glow, transparent);
}
.so-info{min-width:0}
.so-name{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:500;
font-size:18px;
color:var(--ink);
line-height:1.1;
margin-bottom:2px;
}
.so-role{
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:10px;
letter-spacing:.08em;
color:var(--ink-3);
}
.so-arrow{
font-family:'Cormorant Garamond',serif;
font-size:18px;color:var(--ink-3);
transition:transform .25s, color .25s;
}
/* ============================================
PAYOUTS
============================================ */
.payouts-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
@media (max-width:820px){.payouts-grid{grid-template-columns:1fr}}
.payout-card{
position:relative;
padding:24px 22px 20px;
border:1px solid var(--ink-4);
background:rgba(8,8,8,.5);
display:flex;flex-direction:column;
gap:14px;
transition:all .3s cubic-bezier(.18,.89,.32,1.28);
}
.payout-card::before,.payout-card::after{
content:"";position:absolute;
width:10px;height:10px;
border:1px solid var(--ink-3);
transition:border-color .3s;
}
.payout-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.payout-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.payout-card.mffu { --p-color:#3aff9d; --p-glow:rgba(58,255,157,.55); }
.payout-card.lucid { --p-color:#7a3aff; --p-glow:rgba(122,58,255,.55); }
.payout-card.topstep{ --p-color:#ff7a3a; --p-glow:rgba(255,122,58,.55); }
.payout-card:hover{
background:rgba(232,227,216,.04);
border-color:color-mix(in srgb, var(--p-color) 50%, var(--ink-2));
transform:translateY(-3px);
box-shadow:0 14px 30px -10px var(--p-glow);
}
.payout-card:hover::before,.payout-card:hover::after{border-color:var(--p-color)}
.payout-firm{
display:flex;align-items:center;gap:11px;
}
.payout-firm-mark{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
font-family:var(--display);
font-weight:400;font-size:22px;
color:var(--p-color);
background:#000;
border:1px solid color-mix(in srgb, var(--p-color) 50%, var(--ink-3));
text-shadow:0 0 14px var(--p-glow);
}
.payout-firm-name{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:500;
font-size:18px;
color:var(--ink);
line-height:1.1;
display:flex;flex-direction:column;
gap:2px;
}
.payout-firm-name span{
font-family:'Cinzel',serif;
font-style:normal;
font-weight:500;
font-size:9px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.4em;
}
.payout-amount{
font-family:var(--display);
font-weight:400;
font-size:clamp(36px, 5vw, 48px);
color:var(--p-color);
line-height:.95;
letter-spacing:.02em;
text-shadow:
0 0 22px var(--p-glow),
0 2px 12px rgba(0,0,0,.9);
}
.payout-meta{
display:flex;flex-wrap:wrap;gap:8px;
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:11px;
letter-spacing:.06em;
color:var(--ink-3);
}
.payout-meta b{color:var(--ink-2);font-weight:500}
.payout-status{
display:inline-flex;align-items:center;gap:7px;
margin-top:auto;
padding-top:10px;
border-top:1px solid var(--ink-4);
font-family:'Cinzel',serif;
font-weight:500;
font-size:9px;
letter-spacing:.32em;
text-transform:uppercase;
color:var(--ink-2);
margin-left:.32em;
}
.payout-status .dot{
width:5px;height:5px;border-radius:50%;
background:var(--p-color);
box-shadow:0 0 6px var(--p-color);
animation:dotPulse 2.4s ease-in-out infinite;
}
.payouts-foot{
margin:30px auto 0;
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:14px;
color:var(--ink-3);
text-align:center;
max-width:520px;
}
/* ============================================
AUDIO-PAUSED — freeze rotations when music stops
============================================ */
body:not(.audio-playing) .hero-pfp-ring,
body:not(.audio-playing) .spinner-left,
body:not(.audio-playing) .spinner-right,
body:not(.audio-playing) .bg-sigil-center,
body:not(.audio-playing) .vinyl-disc,
body:not(.audio-playing) .ayah-arabic,
body:not(.audio-playing) .sigil-display{
animation-play-state:paused !important;
}
/* ============================================
AYAH — Quranic verse interlude
============================================ */
.ayah-section{
max-width:760px;
margin:0 auto;
padding:60px var(--pad);
text-align:center;
}
.ayah-frame{
position:relative;
padding:46px 32px 38px;
border:1px solid var(--ink-3);
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232,227,216,.04), transparent 70%),
rgba(0,0,0,.5);
display:flex;flex-direction:column;
align-items:center;
gap:18px;
}
.ayah-corner{
position:absolute;
width:18px;height:18px;
border:1.5px solid var(--ink-2);
}
.ayah-corner-tl{top:-2px;left:-2px;border-right:none;border-bottom:none}
.ayah-corner-tr{top:-2px;right:-2px;border-left:none;border-bottom:none}
.ayah-corner-bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.ayah-corner-br{bottom:-2px;right:-2px;border-left:none;border-top:none}
.ayah-mark{
font-family:'Cinzel',serif;
font-weight:500;
font-size:10px;
letter-spacing:.5em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.5em;
}
.ayah-arabic{
font-family:'Amiri', serif;
font-weight:400;
font-size:clamp(24px, 4vw, 40px);
color:#ffffff;
line-height:1.7;
margin:0;
text-shadow:
0 0 26px rgba(232,227,216,.35),
0 0 60px rgba(232,227,216,.15);
direction:rtl;
}
.ayah-en{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:400;
font-size:clamp(15px, 2vw, 18px);
color:var(--ink-2);
margin:0;
max-width:480px;
line-height:1.5;
}
.ayah-ref{
font-family:'Cinzel',serif;
font-weight:500;
font-size:9.5px;
letter-spacing:.32em;
text-transform:uppercase;
color:var(--ink-3);
margin-top:6px;
margin-left:.32em;
padding-top:14px;
border-top:1px solid var(--ink-4);
width:60%;
}
/* ============================================
SOUND
============================================ */
.sound-display{
display:grid;
grid-template-columns:auto 1fr;
gap:36px;align-items:center;
padding:36px;
border:1px solid var(--ink-4);
background:rgba(8,8,8,.4);
position:relative;
}
.sound-display::before,.sound-display::after{
content:"";position:absolute;width:12px;height:12px;
border:1px solid var(--ink-3);
}
.sound-display::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.sound-display::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.vinyl{
position:relative;
width:160px;height:160px;
flex-shrink:0;
cursor:none;
transition:transform .25s cubic-bezier(.18,.89,.32,1.28), filter .25s;
}
.vinyl:hover{
transform:scale(1.04);
filter:drop-shadow(0 0 22px var(--red-glow));
}
.vinyl:hover .vinyl-disc{animation-duration:2s !important}
.vinyl::after{
content:'spin for a bonus →';
position:absolute;
top:50%;left:calc(100% + 14px);
transform:translateY(-50%);
font-family:'Cinzel',serif;
font-weight:500;font-size:9px;
letter-spacing:.32em;text-transform:uppercase;
color:var(--red);
white-space:nowrap;
opacity:0;
transition:opacity .25s, transform .25s;
pointer-events:none;
text-shadow:0 0 10px var(--red-glow);
}
.vinyl:hover::after{
opacity:1;
transform:translateY(-50%) translateX(4px);
}
.vinyl.vinyl-pop{
animation:vinylPop .8s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes vinylPop{
0% {transform:scale(1)}
20% {transform:scale(1.18) rotate(-8deg);filter:drop-shadow(0 0 40px var(--red))}
60% {transform:scale(1.05) rotate(4deg)}
100%{transform:scale(1) rotate(0)}
}
.vinyl.vinyl-pop .vinyl-disc{animation-duration:.6s !important}
@media (max-width:680px){
.vinyl::after{display:none}
.vinyl{width:100px;height:100px}
}
.vinyl-disc{
position:absolute;inset:0;
border-radius:50%;
background:
radial-gradient(circle at 50% 50%, var(--ink) 14%, #000 15%, #000 18%, transparent 19%),
repeating-radial-gradient(circle at 50% 50%, rgba(232,227,216,.05) 0 1px, transparent 1px 3px),
radial-gradient(circle at 30% 30%, #2a2622, #000 70%);
border:1px solid var(--ink-3);
animation:spin 8s linear infinite;
box-shadow:0 0 30px rgba(232,227,216,.2),0 0 0 1px rgba(255,255,255,.05) inset;
}
@keyframes spin{to{transform:rotate(360deg)}}
.vinyl-grooves{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.vinyl-label{
position:absolute;top:50%;left:50%;
width:42%;height:42%;
transform:translate(-50%,-50%);
border-radius:50%;
background:linear-gradient(135deg, #2a1a14, #4a2a1a);
border:1px solid var(--ink-3);
}
.vinyl-arm{
position:absolute;
top:-18px;right:-22px;
width:90px;height:8px;
background:linear-gradient(90deg, var(--ink-3), var(--ink-2));
transform-origin:90px 4px;
transform:rotate(-28deg);
border-radius:4px 0 0 4px;
}
.vinyl-arm::after{
content:"";
position:absolute;
left:-6px;top:50%;transform:translateY(-50%);
width:8px;height:14px;
background:var(--ink-2);
}
.sound-info{min-width:0}
.sound-label{
font-family:'Cinzel',serif;font-weight:500;font-size:9.5px;
letter-spacing:.42em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:6px;margin-left:.42em;
}
.sound-track{
font-family:var(--display);
font-weight:400;font-size:clamp(38px,5.5vw,52px);
color:var(--red);margin-bottom:4px;line-height:.95;
letter-spacing:.02em;text-transform:lowercase;
text-shadow:
0 0 26px var(--red-glow),
0 2px 12px rgba(0,0,0,.9);
}
.sound-artist{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:16px;color:var(--ink-2);
margin-bottom:10px;
}
.sound-artist a{
color:var(--ink);
border-bottom:1px solid var(--ink-3);
padding-bottom:1px;
transition:border-color .25s;
}
.sound-artist a:hover{border-bottom-color:var(--ink)}
.sound-meta{
display:flex;flex-wrap:wrap;gap:8px;
font-family:'JetBrains Mono',monospace;font-weight:300;font-size:11px;
letter-spacing:.06em;color:var(--ink-3);
margin-bottom:14px;
}
.sound-quote{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:14px;color:var(--ink-2);
border-left:1px solid var(--ink-3);
padding-left:12px;
line-height:1.5;
max-width:440px;
}
@media (max-width:640px){
.sound-display{grid-template-columns:1fr;gap:24px;padding:24px;text-align:center}
.vinyl{margin:0 auto}
.sound-quote{border-left:none;border-top:1px solid var(--ink-3);padding-left:0;padding-top:10px;margin:0 auto}
}
/* ============================================
CONNECT
============================================ */
.connect-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:12px;
}
.connect-card{
display:grid;
grid-template-columns:48px 1fr auto;
gap:14px;align-items:center;
padding:14px 18px 14px 14px;
border:1px solid var(--ink-4);
border-left:1px solid var(--ink-3);
background:rgba(8,8,8,.4);
transition:all .25s cubic-bezier(.18,.89,.32,1.28);
color:var(--ink-2);
}
.connect-card:hover{
background:rgba(232,227,216,.04);
border-color:var(--ink-2);
border-left-color:var(--ink);
transform:translateX(4px);
color:var(--ink);
}
.connect-card.primary{
background:rgba(232,227,216,.04);
border-color:var(--ink-3);
border-left-color:var(--ink);
}
.cc-icon{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
background:#000;
border:1px solid var(--ink-4);
color:var(--ink-2);
transition:color .25s, border-color .25s;
}
.connect-card:hover .cc-icon{color:var(--ink);border-color:var(--ink-3)}
.cc-info{min-width:0}
.cc-name{
font-family:'Cinzel',serif;font-weight:500;font-size:11px;
letter-spacing:.32em;text-transform:uppercase;
color:var(--ink);margin-bottom:2px;margin-left:.32em;
}
.cc-handle{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:14px;color:var(--ink-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cc-arrow{
font-family:'Cormorant Garamond',serif;
font-size:18px;color:var(--ink-3);
transition:transform .25s, color .25s;
}
.connect-card:hover .cc-arrow{transform:translateX(4px);color:var(--ink)}
/* ============================================
SIGNAL — contact form (centered)
============================================ */
.signal-section{text-align:center}
.signal-section .section-eyebrow{justify-content:center;margin-left:0}
.signal-section .section-eyebrow::after{display:none}
.signal-section .section-sub{margin-left:auto;margin-right:auto}
.signal-form{
max-width:680px;
margin:0 auto;
display:flex;flex-direction:column;
gap:18px;
padding:30px 28px;
border:1px solid var(--ink-4);
background:rgba(8,8,8,.45);
position:relative;
text-align:left;
}
.signal-form::before,.signal-form::after{
content:"";position:absolute;
width:14px;height:14px;
border:1px solid var(--ink-3);
}
.signal-form::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.signal-form::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.sf-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
@media (max-width:540px){.sf-row{grid-template-columns:1fr}}
.sf-field{
display:flex;flex-direction:column;
gap:6px;
}
.sf-field label{
font-family:'Cinzel',serif;
font-weight:500;
font-size:9.5px;
letter-spacing:.4em;
text-transform:uppercase;
color:var(--ink-3);
margin-left:.4em;
}
.sf-field input,
.sf-field select,
.sf-field textarea{
width:100%;
background:#000;
border:1px solid var(--ink-4);
color:#ffffff;
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:16px;
letter-spacing:.01em;
padding:11px 13px;
outline:none;
transition:border-color .25s, background .25s;
caret-color:#ffffff;
border-radius:0;
appearance:none;
-webkit-appearance:none;
}
.sf-field input::placeholder,
.sf-field textarea::placeholder{color:rgba(255,255,255,.4);font-style:italic}
.sf-field input:focus,
.sf-field select:focus,
.sf-field textarea:focus{
border-color:#ffffff;
background:#050505;
}
.sf-field label{color:#ffffff}
.sf-field select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 13px center;
padding-right:32px;
}
.sf-field textarea{
font-family:'Cormorant Garamond',serif;
resize:vertical;
min-height:120px;
line-height:1.55;
}
.sf-foot{
display:flex;justify-content:center;align-items:center;
flex-wrap:wrap;
flex-direction:column;
gap:12px;
margin-top:8px;
}
.sf-submit{
display:inline-flex;align-items:center;gap:10px;
font-family:'Cinzel',serif;
font-weight:500;
font-size:11px;
letter-spacing:.4em;
text-transform:uppercase;
padding:14px 22px 14px 26px;
background:var(--ink);
color:#000;
border:1px solid var(--ink);
transition:all .25s cubic-bezier(.18,.89,.32,1.28);
}
.sf-submit:hover:not(:disabled){
background:#fff;
border-color:#fff;
transform:translateY(-2px);
box-shadow:0 10px 22px -8px rgba(232,227,216,.5);
}
.sf-submit:active{transform:scale(.97)}
.sf-submit:disabled{opacity:.6;cursor:none}
.sf-submit-arrow{
font-family:'Cormorant Garamond',serif;
font-size:16px;font-weight:300;letter-spacing:0;
transition:transform .25s;
}
.sf-submit:hover .sf-submit-arrow{transform:translateX(4px)}
.sf-tip{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:13px;
color:var(--ink-3);
}
.sf-tip a{
color:var(--ink-2);
border-bottom:1px solid var(--ink-3);
padding-bottom:1px;
transition:color .25s, border-color .25s;
}
.sf-tip a:hover{color:var(--ink);border-color:var(--ink)}
.sf-status{
display:none;
font-family:'JetBrains Mono',monospace;
font-weight:300;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
padding:10px 14px;
border:1px solid var(--ink-4);
}
.sf-status.show{display:block}
.sf-status.ok{
color:var(--ink);
border-color:var(--ink-2);
background:rgba(232,227,216,.04);
}
.sf-status.err{
color:#ff8888;
border-color:rgba(255,80,80,.4);
background:rgba(255,40,40,.06);
}
.signal-form.sent{
background:rgba(232,227,216,.04);
border-color:var(--ink-2);
}
.signal-form.sent::before,.signal-form.sent::after{border-color:var(--ink)}
/* ============================================
FOOTER
============================================ */
.site-foot{
max-width:var(--max);
margin:60px auto 0;
padding:50px var(--pad) 130px;
border-top:1px solid var(--ink-4);
display:grid;
grid-template-columns:auto 1fr;
gap:30px;align-items:center;
}
.foot-sigil img{
width:60px;height:auto;
filter:invert(1) brightness(.8);
opacity:.5;
}
.foot-cols{
display:grid;
grid-template-columns:1fr auto;
gap:30px;align-items:center;
}
.foot-mark{
font-family:var(--display);
font-weight:400;font-size:30px;
color:var(--red);margin-bottom:4px;
letter-spacing:.02em;
text-shadow:0 0 18px var(--red-glow);
line-height:1;
}
.foot-handle{
font-family:'Cinzel',serif;font-weight:500;font-size:9px;
letter-spacing:.32em;text-transform:uppercase;
color:var(--ink-3);margin-left:.32em;
}
.foot-quote-col{
display:flex;flex-direction:column;gap:8px;
text-align:right;
}
.foot-quote{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:15px;color:var(--ink-2);
}
.foot-cred{
font-family:'JetBrains Mono',monospace;font-weight:300;
font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-4);
}
.foot-credit-link{
color:var(--lime);
border-bottom:1px solid color-mix(in srgb, var(--lime) 40%, var(--ink-4));
padding-bottom:1px;
text-shadow:0 0 10px var(--lime-glow);
transition:border-color .25s, text-shadow .25s;
}
.foot-credit-link:hover{
border-bottom-color:var(--lime);
text-shadow:0 0 16px var(--lime-glow);
}
@media (max-width:640px){
.site-foot{grid-template-columns:1fr;text-align:center;gap:20px;padding-bottom:140px}
.foot-sigil{margin:0 auto}
.foot-cols{grid-template-columns:1fr;gap:14px}
.foot-quote-col{text-align:center}
}
/* ============================================
Audio player widget — fixed bottom right
============================================ */
.player{
position:fixed;
bottom:18px;right:18px;
z-index:50;
width:min(440px,calc(100% - 36px));
display:grid;
grid-template-columns:50px 1fr auto;
gap:13px;align-items:center;
padding:10px 14px 10px 10px;
background:rgba(0,0,0,.85);
backdrop-filter:blur(20px) saturate(110%);
-webkit-backdrop-filter:blur(20px) saturate(110%);
border:1px solid var(--line);
transform:translateY(140%);
transition:transform .9s cubic-bezier(.16,1,.3,1) .8s, border-color .25s;
touch-action:pan-y;
overflow:hidden;
}
.player.swiping{cursor:grabbing}
.player.swipe-left .player-info{transform:translateX(-12px);transition:transform .25s ease-out}
.player.swipe-right .player-info{transform:translateX(12px);transition:transform .25s ease-out}
.player.swiped{
border-color:var(--red);
box-shadow:0 0 0 1px var(--red), 0 12px 30px -10px var(--red-glow);
}
.player.swiped::after{
content:attr(data-swipe-dir);
position:absolute;top:50%;
font-family:var(--display);
font-size:38px;
color:var(--red);
opacity:.55;
pointer-events:none;
transform:translateY(-50%);
text-shadow:0 0 18px var(--red-glow);
animation:swipeFlash .5s ease-out;
}
.player.swiped[data-swipe-dir="→"]::after{right:14px}
.player.swiped[data-swipe-dir="←"]::after{left:14px}
@keyframes swipeFlash{
0%{opacity:0;transform:translateY(-50%) scale(.6)}
60%{opacity:.7}
100%{opacity:0;transform:translateY(-50%) scale(1.1)}
}
.player-swipe-hint{display:none}
.site.entered ~ .player,
body.entered .player{transform:translateY(0)}
.player-art{
position:relative;width:50px;height:50px;
border-radius:50%;overflow:hidden;flex-shrink:0;
background:#000;border:1px solid var(--ink-4);
}
.player-art-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.art-disc{
width:36px;height:36px;border-radius:50%;
background:
radial-gradient(circle at 50% 50%, #000 18%, transparent 19%),
repeating-radial-gradient(circle at 50% 50%, rgba(232,227,216,.08) 0 1px, transparent 1px 2px),
#050505;
border:1px solid var(--ink-4);
animation:spin 6s linear infinite;animation-play-state:paused;
}
.player.playing .art-disc{animation-play-state:running}
.art-shine{
position:absolute;inset:0;
background:linear-gradient(135deg, rgba(232,227,216,.15) 0%, transparent 50%);
pointer-events:none;
}
.player-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.player-marquee{
overflow:hidden;position:relative;
mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
}
.player-track{
font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
font-size:14px;white-space:nowrap;color:var(--ink);
animation:marquee 18s linear infinite;animation-play-state:paused;
}
.player.playing .player-track{animation-play-state:running}
@keyframes marquee{
0%{transform:translateX(0)}
10%{transform:translateX(0)}
100%{transform:translateX(-100%)}
}
.player-sub{
font-family:'Cinzel',serif;font-weight:500;font-size:9px;
letter-spacing:.4em;text-transform:uppercase;
color:var(--ink-3);margin-left:.4em;
}
.player-progress{
height:1px;background:var(--ink-4);overflow:hidden;margin-top:6px;
}
.player-progress-fill{
height:100%;width:0%;background:var(--ink);
transition:width .25s linear;box-shadow:0 0 6px rgba(232,227,216,.5);
}
.player-times{
display:flex;justify-content:space-between;
font-family:'JetBrains Mono',monospace;font-weight:300;font-size:9px;
color:var(--ink-3);margin-top:3px;
}
.player-ctrls{display:flex;align-items:center;gap:6px}
.ctrl-btn{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
background:transparent;border:1px solid var(--ink-4);color:var(--ink-2);
transition:all .2s;
}
.ctrl-btn.small{width:26px;height:26px}
.ctrl-btn:hover{background:rgba(232,227,216,.05);border-color:var(--ink);color:var(--ink)}
.ctrl-btn:active{transform:scale(.92)}
#playBtn{background:var(--ink);border-color:var(--ink);color:#000}
#playBtn:hover{background:#fff;border-color:#fff;color:#000}
.vol-wrap{width:54px;display:flex;align-items:center}
.vol-slider{
-webkit-appearance:none;appearance:none;
width:100%;height:1px;background:var(--ink-4);outline:none;
}
.vol-slider::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;
background:var(--ink);cursor:none;box-shadow:0 0 6px rgba(232,227,216,.5);
transition:transform .2s;
}
.vol-slider::-webkit-slider-thumb:hover{transform:scale(1.4)}
.vol-slider::-moz-range-thumb{
width:9px;height:9px;border:none;border-radius:50%;
background:var(--ink);box-shadow:0 0 6px rgba(232,227,216,.5);
}
@media (max-width:520px){
.player{
bottom:10px;left:10px;right:10px;
width:auto;
grid-template-columns:42px 1fr auto;
gap:10px;padding:8px 11px 8px 8px;
}
.player-art{width:42px;height:42px}
.art-disc{width:28px;height:28px}
.vol-wrap{display:none}
}
/* reduce motion */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
html{scroll-behavior:auto}
}
/* ============================================
PERFORMANCE — keep large pages responsive
============================================ */
/* let the browser skip painting offscreen sections */
.section,
.ayah-section,
.site-foot,
.hero{
content-visibility:auto;
contain-intrinsic-size:auto 600px;
}
/* the hero is always near-top — don't skip it */
.hero{content-visibility:visible;contain-intrinsic-size:none}
/* GPU hint for fixed transformed layers */
.cursor,
.spinner-hit,
.bg-sigils,
.bg-sigil,
.particles,
.spinner{
will-change:transform;
transform:translateZ(0);
}
/* freeze every infinite background animation when tab is hidden */
body.tab-hidden .bg-sigil,
body.tab-hidden .spinner,
body.tab-hidden .grunge-static,
body.tab-hidden .grunge-scratches,
body.tab-hidden .bg-grad::after,
body.tab-hidden .bg-vignette::after,
body.tab-hidden .vinyl-disc,
body.tab-hidden .art-disc,
body.tab-hidden .avatar-ring,
body.tab-hidden .hero-pfp-ring,
body.tab-hidden .grunge-ink{
animation-play-state:paused !important;
}
/* drop heavy backdrop blurs on mobile (huge perf win) */
@media (max-width:680px){
.work-card,
.connect-card,
.payout-card,
.shoutout-card,
.signal-form,
.decipher,
.sigil-game,
.sound-display,
.ayah-frame,
.player,
.puzzle-art-frame,
.km-content,
.vp-soon{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
/* tone down the heaviest grunge layers on phones */
.grunge-scratches,.grunge-static{display:none !important}
.grunge-ink{opacity:.35 !important;animation:none !important}
/* freeze the giant rotating sigil on mobile */
.bg-sigil-center{animation:none !important;opacity:.015 !important}
}
/* ============================================
SOCIAL section (public IG/photos from dashboard)
============================================ */
.social-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:14px;
max-width:980px;
align-items:start;
}
.social-ig-wrap{
background:#fff;
border:1px solid var(--ink-4);
border-radius:0;
overflow:hidden;
min-height:200px;
}
.social-ig-wrap blockquote.instagram-media{
margin:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
.social-card{
display:block;
position:relative;
aspect-ratio:1/1;
background:rgba(8,8,8,.55);
border:1px solid var(--ink-4);
overflow:hidden;
text-decoration:none;
transition:transform .25s, border-color .25s, box-shadow .25s;
}
.social-card:hover{
transform:translateY(-3px);
border-color:var(--red);
box-shadow:0 14px 30px -10px var(--red-glow);
}
.social-card img{
width:100%;height:100%;
object-fit:cover;display:block;
transition:transform .35s;
}
.social-card:hover img{transform:scale(1.04)}
.social-card.ig-post{
display:flex;align-items:center;justify-content:center;
padding:18px;text-align:center;
}
.social-card.ig-post .sc-icon{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
color:var(--red);
margin-bottom:12px;
}
.social-card.ig-post .sc-meta{
font-family:'Cinzel',serif;font-weight:500;font-size:9.5px;
letter-spacing:.32em;text-transform:uppercase;
color:var(--ink-2);
margin-left:.32em;
}
.social-card.ig-post .sc-link{
font-family:'JetBrains Mono',monospace;font-size:11px;
color:var(--ink-3);margin-top:8px;
display:block;word-break:break-all;
}
.social-card .sc-cap{
position:absolute;bottom:0;left:0;right:0;
padding:14px 12px 10px;
background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:13px;color:#fff;line-height:1.3;
}
/* ============================================
ANNOUNCEMENTS (public — rendered from localStorage)
============================================ */
.announce-list{
display:flex;flex-direction:column;
gap:12px;
max-width:680px;
}
.announce-card{
padding:18px 20px;
background:rgba(8,8,8,.55);
border:1px solid var(--ink-4);
border-left:2px solid var(--red);
position:relative;
}
.announce-card .ac-time{
font-family:'JetBrains Mono',monospace;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:8px;
}
.announce-card h4{
font-family:var(--display);
font-weight:400;font-size:24px;
color:var(--red);margin:0 0 8px;
line-height:1.05;
text-shadow:0 0 14px var(--red-glow);
}
.announce-card .ac-body{
font-family:'Cormorant Garamond',serif;
font-size:16px;line-height:1.55;
color:var(--ink);white-space:pre-wrap;
}
/* ============================================
DASHBOARD UNLOCK CHIP (shows after 33 hits)
============================================ */
.dash-unlock{
position:fixed;
bottom:88px;left:14px;
z-index:55;
width:36px;height:36px;
background:#000;
border:1px solid var(--red);
color:var(--red);
font-size:18px;
display:flex;align-items:center;justify-content:center;
cursor:none;
border-radius:50%;
box-shadow:0 0 18px var(--red-glow), 0 0 36px rgba(184,24,24,.3);
animation:duPulse 1.4s ease-in-out infinite;
}
.dash-unlock[hidden]{display:none !important}
@keyframes duPulse{
0%,100%{transform:scale(1);box-shadow:0 0 14px var(--red-glow)}
50%{transform:scale(1.08);box-shadow:0 0 28px var(--red), 0 0 60px rgba(184,24,24,.4)}
}
/* ============================================
DASHBOARD AUTH MODAL
============================================ */
.dash-auth{
position:fixed;inset:0;z-index:10001;
display:flex;align-items:center;justify-content:center;
padding:20px;
}
.dash-auth[hidden]{display:none !important}
.da-backdrop{
position:absolute;inset:0;
background:rgba(0,0,0,.92);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
animation:daFade .35s ease-out;
}
@keyframes daFade{from{opacity:0}to{opacity:1}}
.da-card{
position:relative;z-index:2;
width:min(440px, 92vw);
padding:32px 28px 26px;
background:rgba(15,7,15,.95);
border:1px solid var(--red);
text-align:center;
box-shadow:0 0 60px var(--red-glow), 0 30px 80px rgba(0,0,0,.9);
animation:daPop .55s cubic-bezier(.16,1,.3,1);
}
@keyframes daPop{
from{opacity:0;transform:translateY(20px) scale(.94);filter:blur(10px)}
to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.da-pre{
font-family:'Cinzel',serif;font-weight:500;font-size:9px;
letter-spacing:.5em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:12px;
}
.da-title{
font-family:var(--display);font-weight:400;
font-size:clamp(28px, 5vw, 40px);
color:var(--red);
text-shadow:0 0 22px var(--red-glow);
line-height:1.05;margin-bottom:6px;
}
.da-sub{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:16px;color:var(--ink-2);margin-bottom:24px;
}
#dashAuthForm{display:flex;flex-direction:column;gap:10px}
#dashPass{
padding:13px 14px;background:#000;
border:1px solid var(--ink-4);color:#fff;
font-family:'JetBrains Mono',monospace;font-size:14px;
outline:none;text-align:center;letter-spacing:.06em;
transition:border-color .25s;
}
#dashPass:focus{border-color:var(--red);box-shadow:0 0 12px var(--red-glow)}
.da-submit{
padding:13px 18px;
background:var(--red);color:#fff;
border:1px solid var(--red);
font-family:'Cinzel',serif;font-weight:500;font-size:11px;
letter-spacing:.42em;text-transform:uppercase;
transition:transform .15s, box-shadow .15s;
}
.da-submit:hover{transform:translateY(-2px);box-shadow:0 8px 22px -6px var(--red-glow)}
.da-submit:active{transform:scale(.97)}
.da-err{
margin-top:14px;
font-family:'JetBrains Mono',monospace;font-size:11px;
letter-spacing:.1em;color:#ff6b6b;
min-height:18px;
}
.da-close{
position:absolute;top:12px;right:12px;
width:30px;height:30px;
background:transparent;border:1px solid var(--ink-4);color:var(--ink-3);
font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1;
cursor:none;
}
.da-close:hover{border-color:var(--ink);color:var(--ink)}
/* ============================================
DASHBOARD PANEL
============================================ */
.dashboard{
position:fixed;inset:0;z-index:10000;
background:#08080d;
overflow-y:auto;
display:flex;flex-direction:column;
cursor:auto !important;
}
.dashboard,
.dashboard *{cursor:auto !important}
.dashboard input,
.dashboard textarea{cursor:text !important}
.dashboard button,
.dashboard a,
.dashboard select{cursor:pointer !important}
.dashboard[hidden]{display:none !important}
/* same for auth modal — native mouse cursor for the form */
.dash-auth,
.dash-auth *{cursor:auto !important}
.dash-auth input{cursor:text !important}
.dash-auth button{cursor:pointer !important}
/* hide the custom cursor while dashboard/auth is open */
body.dash-active .cursor,
body.dash-active .ct-corner,
body.dash-active .cur-flash{display:none !important}
.dash-head{
padding:30px clamp(18px,3vw,40px) 18px;
border-bottom:1px solid var(--ink-4);
background:linear-gradient(180deg, rgba(184,24,24,.08), transparent);
}
.dash-greeting{margin-bottom:22px;text-align:left}
.dh-eyebrow{
font-family:'Cinzel',serif;font-weight:500;font-size:10px;
letter-spacing:.5em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:6px;
}
.dh-title{
font-family:var(--display);font-weight:400;
font-size:clamp(32px, 5vw, 52px);
color:var(--red);line-height:1.05;
text-shadow:0 0 22px var(--red-glow);
}
.dh-sub{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:18px;color:var(--ink-2);margin-top:4px;
}
.dash-nav{
display:flex;gap:6px;flex-wrap:wrap;
margin-bottom:14px;
}
.dash-nav button{
padding:9px 16px;
background:transparent;border:1px solid var(--ink-4);
color:var(--ink-2);
font-family:'Cinzel',serif;font-weight:500;font-size:10px;
letter-spacing:.32em;text-transform:uppercase;
transition:all .2s;cursor:none;
}
.dash-nav button:hover{border-color:var(--ink);color:var(--ink)}
.dash-nav button.active{
background:var(--red);border-color:var(--red);color:#fff;
box-shadow:0 0 12px var(--red-glow);
}
.dash-actions{
display:flex;gap:8px;flex-wrap:wrap;
font-family:'JetBrains Mono',monospace;font-size:11px;
}
.dash-actions button{
padding:8px 14px;background:transparent;
border:1px solid var(--ink-4);color:var(--ink-2);
font-family:'JetBrains Mono',monospace;font-size:11px;
letter-spacing:.06em;cursor:none;transition:all .2s;
}
.dash-actions button:hover{border-color:var(--ink);color:var(--ink)}
.dash-out{margin-left:auto !important;border-color:var(--red) !important;color:var(--red) !important}
.dash-out:hover{background:rgba(184,24,24,.1)}
.dash-body{
flex:1;padding:30px clamp(18px,3vw,40px);
max-width:980px;width:100%;
margin:0 auto;
}
.dash-page{display:none}
.dash-page.active{display:block;animation:dpFade .3s ease-out}
@keyframes dpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.dp-title{
font-family:var(--display);font-weight:400;
font-size:clamp(28px,4vw,40px);
color:var(--red);
margin:0 0 6px;line-height:1;
}
.dp-sub{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:14px;color:var(--ink-3);margin-bottom:22px;
}
.dp-compose{
display:flex;flex-direction:column;gap:10px;
margin-bottom:24px;padding:18px;
background:rgba(0,0,0,.4);
border:1px solid var(--ink-4);
}
.dp-compose textarea,
.dp-compose input{
width:100%;
padding:11px 13px;
background:#000;border:1px solid var(--ink-4);
color:#fff;
font-family:'Cormorant Garamond',serif;
font-size:14.5px;outline:none;
transition:border-color .2s;
}
.dp-compose textarea{resize:vertical;min-height:80px}
.dp-compose textarea:focus,
.dp-compose input:focus{border-color:var(--red)}
.dp-row{display:flex;gap:8px;flex-wrap:wrap}
.dp-row input{flex:1;min-width:200px}
.dp-post{
padding:11px 18px;background:var(--red);color:#fff;
border:1px solid var(--red);
font-family:'Cinzel',serif;font-weight:500;font-size:10px;
letter-spacing:.32em;text-transform:uppercase;cursor:none;
transition:transform .15s;
}
.dp-post:hover{transform:translateY(-1px)}
.dp-list{display:flex;flex-direction:column;gap:10px}
.dp-list.dp-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.dp-item{
padding:14px 16px;
background:rgba(255,255,255,.025);
border:1px solid var(--ink-4);
position:relative;
display:flex;flex-direction:column;gap:6px;
}
.dp-item .di-time{
font-family:'JetBrains Mono',monospace;font-size:10px;
letter-spacing:.12em;color:var(--ink-3);
}
.dp-item .di-title{
font-family:var(--display);font-weight:400;
font-size:18px;color:var(--ink);
text-shadow:0 0 12px var(--red-glow);line-height:1.1;
}
.dp-item .di-body{
font-family:'Cormorant Garamond',serif;
font-size:14px;line-height:1.5;
color:var(--ink-2);white-space:pre-wrap;
}
.dp-item .di-del{
position:absolute;top:8px;right:8px;
width:24px;height:24px;
background:transparent;border:1px solid var(--ink-4);color:var(--ink-3);
font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1;
cursor:none;transition:all .2s;
}
.dp-item .di-del:hover{border-color:#ff6b6b;color:#ff6b6b}
.dp-item img{width:100%;height:160px;object-fit:cover;border:1px solid var(--ink-4)}
.dp-empty{
padding:30px;text-align:center;
font-family:'Cormorant Garamond',serif;font-style:italic;
color:var(--ink-3);
border:1px dashed var(--ink-4);
}
.dash-foot{
padding:18px;text-align:center;
font-family:'JetBrains Mono',monospace;font-size:10px;
color:var(--ink-3);letter-spacing:.06em;
border-top:1px solid var(--ink-4);
}
.dash-toast{
position:fixed;
top:20px;left:50%;
transform:translateX(-50%) translateY(-12px);
z-index:10010;
padding:10px 22px;
background:#000;
border:1px solid var(--red);
color:var(--red);
font-family:'Cinzel',serif;font-weight:500;font-size:11px;
letter-spacing:.32em;text-transform:uppercase;
text-shadow:0 0 10px var(--red-glow);
box-shadow:0 0 18px var(--red-glow), 0 8px 24px rgba(0,0,0,.6);
opacity:0;
transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
.dash-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.dash-toast.ok{border-color:#3aff9d;color:#3aff9d;text-shadow:0 0 10px rgba(58,255,157,.6);box-shadow:0 0 18px rgba(58,255,157,.4)}
.dash-toast.err{border-color:#ff6b6b;color:#ff6b6b;text-shadow:0 0 10px rgba(255,107,107,.6);box-shadow:0 0 18px rgba(255,107,107,.4)}
@media (max-width:680px){
.dash-head{padding:20px 14px 14px}
.dash-body{padding:20px 14px}
.dash-actions{font-size:10px}
.dash-out{margin-left:0 !important}
}
/* ============================================
MOBILE CLEANUP
============================================ */
@media (max-width:680px){
/* tighter container padding */
:root{ --pad: 16px }
body{overflow-x:hidden}
html{scroll-snap-type:none}
/* hero — keep PFP smaller, tighten gap */
.hero{padding:60px var(--pad) 100px;min-height:auto}
.hero-grid{gap:22px}
.hero-pfp{width:130px;aspect-ratio:1/1}
.hero-name{
font-size:clamp(56px, 18vw, 92px) !important;
line-height:.85;margin:0 0 6px;
}
.hero-handle{font-size:16px;margin-bottom:14px}
.hero-eyebrow{font-size:12px}
.hero-bio{
font-size:14.5px !important;
padding-left:10px;
border-left:none;border-top:1px solid var(--ink-3);
padding-top:10px;padding-left:0;
margin-bottom:18px;
}
.bio-arabic{font-size:20px !important}
.hero-cta{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:18px}
.hbtn{padding:12px 16px;font-size:10px;letter-spacing:.28em;text-align:center;justify-content:center}
.hero-meta,.hero-aka{
justify-content:center;
font-size:8.5px !important;
letter-spacing:.32em !important;
gap:6px;
}
.hero-aka{padding-top:10px;margin-top:10px}
.hero-aka .aka-label{font-size:8px;padding:3px 7px}
.hero-online{font-size:9px;padding:4px 9px;margin-bottom:24px;flex-wrap:wrap;gap:6px}
/* bismillah — smaller, centered */
.bismillah{margin:0 auto 18px;padding-bottom:14px}
.bism-arabic{font-size:20px}
.bism-en{font-size:11px}
/* sections — tighter top/bottom */
.section{padding:64px var(--pad) 64px}
.section-eyebrow{font-size:9px;letter-spacing:.36em;margin-bottom:12px}
.section-eyebrow::after{max-width:80px}
.section-title{
font-size:clamp(36px, 10vw, 56px) !important;
margin-bottom:14px;
}
.section-sub{font-size:14.5px;margin-bottom:24px;max-width:none}
/* sigil section */
.sigil-display{width:240px;margin:24px auto 20px}
.sigil-tag{font-size:22px}
/* decipher */
.decipher-section-wrap .decipher{margin-top:18px}
.decipher{padding:16px 14px}
.d-glyphs{gap:5px;flex-wrap:wrap}
.d-glyph{width:30px;height:38px;font-size:20px}
.d-input{font-size:14px}
.d-submit{font-size:9px;padding:6px 10px}
/* puzzle art */
.puzzle-art-frame{padding:10px}
.art-quote{font-size:13px}
/* work cards */
.work-card-inner{padding:20px 18px 18px}
.work-card h3{font-size:30px}
.work-tagline{font-size:8.5px;letter-spacing:.24em;margin-bottom:14px}
.work-desc{font-size:14.5px;line-height:1.5}
.work-mark,.work-mark-img,.work-mark-svg{width:38px;height:38px}
.work-mark{font-size:22px}
.work-card-head{margin-bottom:14px}
/* payouts */
.payout-card{padding:18px 16px 14px}
.payout-firm-mark{width:34px;height:34px}
.payout-firm-name{font-size:16px}
/* sound */
.sound-display{padding:20px;gap:16px}
.vinyl{width:120px;height:120px}
.sound-track{font-size:32px !important}
.sound-artist{font-size:14px}
.sound-quote{font-size:13px}
/* watch / video player */
.video-player{max-width:100%}
.vp-play{width:64px;height:64px}
.vp-play svg{width:26px;height:26px}
.vp-meta{bottom:10px;left:12px;right:12px;font-size:8.5px;letter-spacing:.22em}
/* connect grid stays single col on phones */
.connect-grid{grid-template-columns:1fr;gap:8px}
.connect-card{padding:12px 14px 12px 12px;gap:11px;grid-template-columns:42px 1fr auto}
.cc-icon{width:42px;height:42px}
.cc-name{font-size:10px;letter-spacing:.24em}
.cc-handle{font-size:13px}
/* shoutouts */
.shoutouts-grid{grid-template-columns:1fr;gap:8px}
.shoutout-card{padding:14px;gap:11px;grid-template-columns:40px 1fr auto}
/* signal form */
.signal-form{padding:20px 16px}
.sf-foot{align-items:stretch}
.sf-submit{justify-content:center}
.sf-tip{font-size:12px;text-align:center}
/* footer */
.site-foot{padding:36px var(--pad) 130px;gap:18px}
.foot-sigil img{width:48px}
.foot-mark{font-size:24px}
.foot-quote{font-size:13px}
.foot-cred{font-size:8.5px}
/* audio player — much more compact */
.player{
bottom:8px;left:8px;right:8px;
width:auto;
grid-template-columns:38px 1fr auto;
gap:8px;padding:7px 9px 7px 7px;
border-radius:10px;
}
.player-art{width:38px;height:38px}
.art-disc{width:26px;height:26px}
.player-track{font-size:12px}
.player-sub{font-size:8px;letter-spacing:.28em}
.player-times{font-size:8px}
.player-progress{margin-top:4px}
.ctrl-btn{width:28px;height:28px}
.ctrl-btn.small{width:24px;height:24px}
.ctrl-btn svg{width:14px;height:14px}
.vol-wrap{display:none}
/* ayah */
.ayah-frame{padding:30px 18px 26px;gap:14px}
.ayah-arabic{font-size:24px;line-height:1.6}
.ayah-en{font-size:14px}
.ayah-ref{font-size:8.5px;letter-spacing:.28em;width:75%}
/* pickers + theme flash positioning */
.cur-picker{top:10px;right:10px;padding:4px;gap:4px}
.cur-opt{width:26px;height:26px}
.cur-opt svg{width:14px;height:14px}
.theme-flash{font-size:9px;letter-spacing:.32em;padding:7px 16px}
/* idk intro */
.idk-answer{font-size:clamp(120px, 38vw, 220px) !important}
/* enter screen */
.enter-title{font-size:clamp(46px, 14vw, 80px) !important}
.enter-sub{font-size:11px;letter-spacing:.4em}
.enter-hint{font-size:9px;letter-spacing:.32em}
/* spinner dogs — stay decorative, smaller, lower opacity */
.spinner-hit{width:80px;height:80px}
.spinner{width:42px;opacity:.55}
/* bg sigils — tone down to avoid mobile clutter */
.bg-sigil-1,.bg-sigil-2,.bg-sigil-3,.bg-sigil-4{
width:90px !important;
opacity:.035 !important;
}
.bg-sigil-center{width:min(140vh,140vw) !important;opacity:.018 !important}
/* gospel reveal sizing */
.gospel-line-1{font-size:clamp(26px,8vw,40px)}
.gospel-line-2{font-size:clamp(20px,6.5vw,32px)}
.gospel-line-3{font-size:clamp(16px,4.5vw,20px)}
/* alt readings */
.alt-text{font-size:14px;max-width:280px}
/* sigil game (purple only) */
.kf-head{padding:0 2px;flex-wrap:wrap;gap:8px}
.kf-num{font-size:24px}
.kf-lbl{font-size:8px;letter-spacing:.32em}
.kf-overlay{padding:18px;gap:10px}
.kf-title{font-size:clamp(28px, 8vw, 40px) !important}
.kf-sub{font-size:11px}
.kf-btn{font-size:10px;padding:11px 20px;letter-spacing:.32em}
}
/* really small phones */
@media (max-width:380px){
.hero-name{font-size:clamp(48px, 16vw, 72px) !important}
.section-title{font-size:clamp(28px, 9vw, 44px) !important}
.work-card h3{font-size:26px}
.sound-track{font-size:28px !important}
.payout-amount{font-size:32px}
.bism-arabic{font-size:18px}
.player{padding:6px 8px 6px 6px}
.ctrl-btn{width:26px;height:26px}
}