*{box-sizing:border-box}html{margin:0;background:#030504}body{margin:0;color:white;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background-color:#030504;background-image:url('/assets/backgrounds/main-background-legacy.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,rgba(0,0,0,.15),rgba(0,0,0,.67));z-index:0;pointer-events:none}
main{overflow:hidden;position:relative;z-index:1}
.top{min-height:54vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7vh 5vw 5vh}
.top-logo{width:min(1080px,96vw);max-height:34vh;object-fit:contain;display:block;filter:drop-shadow(0 0 22px rgba(255,255,255,.05));filter:brightness(0) saturate(100%);}
.top span{font-size:10px;letter-spacing:.38em;opacity:.48;margin-top:2.4rem}
.release{min-height:78vh;position:relative;display:flex;align-items:center;justify-content:center}
.release::before{content:"";position:absolute;width:min(58vw,620px);aspect-ratio:1;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.018);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.05),rgba(255,255,255,.01) 58%,rgba(0,0,0,.16) 100%)}
.release.has-art::after{content:"";position:absolute;width:min(58vw,620px);aspect-ratio:1;border-radius:50%;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.34)),var(--album-art);background-size:cover;background-position:center center;box-shadow:inset 0 0 70px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.12);z-index:0}
.release-copy{position:relative;text-align:center;max-width:min(42vw,430px);z-index:1;padding:2.1rem 2.2rem;background:rgba(5,8,11,.33);backdrop-filter:blur(4px);border-radius:28px;border:1px solid rgba(210,244,248,.10);box-shadow:0 12px 35px rgba(0,0,0,.22)}
.release-copy h2{font:500 clamp(32px,5.7vw,74px)/.93 Arial,sans-serif;letter-spacing:-.05em;margin:0;text-shadow:0 2px 16px rgba(0,0,0,.38)}
.release-copy small{display:block;margin-top:1rem;opacity:.86;letter-spacing:.16em;text-shadow:0 2px 12px rgba(0,0,0,.34)}
.release.album-release{color:white;text-decoration:none;cursor:pointer;transition:filter .35s ease}
.release.album-release::before,.release.album-release::after{transition:border-color .35s ease,box-shadow .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .35s ease;pointer-events:none}
.release.album-release .release-copy{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,background .35s ease}
.release.album-release:hover::before,.release.album-release:focus-visible::before{border-color:rgba(190,247,255,.48);box-shadow:0 0 0 34px rgba(137,232,242,.035),0 0 0 68px rgba(137,232,242,.022),0 0 58px rgba(114,231,239,.10);transform:scale(1.025)}
.release.album-release:hover::after,.release.album-release:focus-visible::after{transform:scale(1.025);filter:saturate(1.06) brightness(1.04)}
.release.album-release:hover .release-copy,.release.album-release:focus-visible .release-copy{transform:scale(1.025);background:rgba(5,8,11,.38)}
.release.album-release:focus-visible{outline:none}
.release-copy .glyph-title{font-size:clamp(24px,4.3vw,54px);letter-spacing:-.035em;max-width:min(900px,86vw);overflow-wrap:anywhere}
.h-projects{padding:11vh 0;background:rgba(0,0,0,.16);backdrop-filter:blur(2px)}
.label{width:min(1060px,90vw);margin:0 auto 4vh;font-size:11px;letter-spacing:.34em;opacity:.65}
.h-track{display:flex;gap:18vw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 18vw 4vh}
.h-track::-webkit-scrollbar{display:none}
.h-slide{scroll-snap-align:center;min-width:64vw;min-height:52vh;position:relative;display:flex;align-items:center;justify-content:center}
.h-slide::before{content:"";position:absolute;width:min(44vw,460px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.12)}
.h-slide h3{position:relative;font:500 clamp(30px,5vw,70px)/1 Arial,sans-serif;text-align:center}
.dots{display:flex;justify-content:center;gap:17px}.dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.32);cursor:pointer}.dot.active{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.about{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10vh 5vw 12vh;gap:1.25rem}
.about img{width:min(620px,78vw);border-radius:50%;display:block;box-shadow:0 0 80px rgba(0,0,0,.55)}
.blurb{position:static;transform:none;width:min(760px,90vw);text-align:center;background:rgba(0,0,0,.42);padding:1rem 1.25rem;backdrop-filter:blur(5px);margin:0;border:1px solid rgba(198,241,246,.14);box-shadow:0 0 45px rgba(0,0,0,.25)}
.blurb-glyph{font:600 clamp(14px,1.7vw,20px)/1.35 Arial,sans-serif;letter-spacing:.12em;opacity:.96;margin-bottom:.65rem;word-break:break-word}
.blurb-text{font:16px/1.6 Arial,sans-serif;opacity:.93}
.socials{width:min(1240px,96vw);display:flex;align-items:flex-end;justify-content:center;gap:clamp(2px,.8vw,16px);margin-top:.65rem;padding:.25rem 0 .15rem;white-space:nowrap}
.social-creature{position:relative;display:block;flex:0 1 18%;min-width:110px;max-width:190px;aspect-ratio:240/390;color:rgba(190,250,255,.95);text-decoration:none;filter:drop-shadow(0 16px 24px rgba(0,0,0,.38));transform-origin:50% 82%;will-change:transform,filter}
.about .social-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;border-radius:0;box-shadow:none;max-width:none}
.social-icon{display:none !important}
.social-icon svg{display:none !important}
.social-creature:hover,.social-creature:focus-visible{filter:drop-shadow(0 22px 34px rgba(0,0,0,.46)) drop-shadow(0 0 12px rgba(98,235,255,.2));outline:none}
.sc1{animation-delay:0s,0s}.sc2{animation-delay:-.8s,-.2s}.sc3{animation-delay:-1.1s,-.4s}.sc4{animation-delay:-.35s,-.1s}.sc5{animation-delay:-1.45s,-.25s}
/* Five distinct organisms: visibly different movement signatures, not a shared bob. */
.sc1{animation:creatureMove1 4.7s cubic-bezier(.45,.05,.3,1) infinite,creatureGlow1 3.1s ease-in-out infinite;}
.sc2{animation:creatureMove2 5.6s cubic-bezier(.35,.02,.25,1) infinite,creatureGlow2 4.2s ease-in-out infinite;}
.sc3{animation:creatureMove3 4.15s cubic-bezier(.5,0,.2,1) infinite,creatureGlow3 2.9s ease-in-out infinite;}
.sc4{animation:creatureMove4 6.25s cubic-bezier(.3,.03,.25,1) infinite,creatureGlow4 3.7s ease-in-out infinite;}
.sc5{animation:creatureMove5 5.05s cubic-bezier(.4,.02,.25,1) infinite,creatureGlow5 3.35s ease-in-out infinite;}
/* SoundCloud — curious side-to-side scuttle with a little lift. */
@keyframes creatureMove1{
0%,100%{transform:translate3d(0,0,0) rotate(-1.2deg) scale(1)}
12%{transform:translate3d(6px,-3px,0) rotate(.7deg) scale(1.018)}
28%{transform:translate3d(13px,-9px,0) rotate(2.1deg) scale(1.035)}
41%{transform:translate3d(7px,-13px,0) rotate(.4deg) scale(1.02)}
58%{transform:translate3d(-7px,-7px,0) rotate(-2deg) scale(1.028)}
74%{transform:translate3d(-12px,1px,0) rotate(-1.1deg) scale(.995)}
88%{transform:translate3d(-4px,-4px,0) rotate(.9deg) scale(1.012)}
}
/* Bandcamp — slow buoyant hover with an off-axis pendulum lean. */
@keyframes creatureMove2{
0%,100%{transform:translate3d(0,3px,0) rotate(1.4deg) scale(1)}
18%{transform:translate3d(-5px,-5px,0) rotate(-.8deg) scale(1.02)}
38%{transform:translate3d(-9px,-14px,0) rotate(-2.4deg) scale(1.035)}
58%{transform:translate3d(3px,-18px,0) rotate(.8deg) scale(1.018)}
76%{transform:translate3d(9px,-7px,0) rotate(2.5deg) scale(1.03)}
90%{transform:translate3d(4px,1px,0) rotate(.5deg) scale(1.008)}
}
/* Instagram — alert creature: compress, peek, then spring outward. */
@keyframes creatureMove3{
0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
16%{transform:translate3d(2px,3px,0) rotate(-.8deg) scale(.975)}
31%{transform:translate3d(-7px,-4px,0) rotate(-2.2deg) scale(1.015)}
46%{transform:translate3d(-3px,-12px,0) rotate(.7deg) scale(1.055)}
57%{transform:translate3d(7px,-8px,0) rotate(2.6deg) scale(1.035)}
69%{transform:translate3d(11px,1px,0) rotate(.8deg) scale(.99)}
84%{transform:translate3d(3px,-3px,0) rotate(-1.2deg) scale(1.018)}
}
/* TikTok — mostly stalking, then a quick playful recoil/pounce. */
@keyframes creatureMove4{
0%,100%{transform:translate3d(0,0,0) rotate(-.7deg) scale(1)}
18%{transform:translate3d(-5px,-3px,0) rotate(-1.5deg) scale(1.008)}
36%{transform:translate3d(-9px,-7px,0) rotate(.2deg) scale(1.02)}
48%{transform:translate3d(-4px,-9px,0) rotate(1.3deg) scale(1.03)}
54%{transform:translate3d(10px,-15px,0) rotate(3deg) scale(1.065)}
61%{transform:translate3d(5px,-4px,0) rotate(-1.2deg) scale(.982)}
76%{transform:translate3d(8px,2px,0) rotate(.8deg) scale(1.005)}
90%{transform:translate3d(1px,-3px,0) rotate(-.4deg) scale(1.012)}
}
/* YouTube — lazy elliptical orbit, as if swimming through low gravity. */
@keyframes creatureMove5{
0%,100%{transform:translate3d(0,2px,0) rotate(1.3deg) scale(1)}
20%{transform:translate3d(9px,-4px,0) rotate(2.4deg) scale(1.025)}
40%{transform:translate3d(13px,-13px,0) rotate(.4deg) scale(1.04)}
60%{transform:translate3d(1px,-18px,0) rotate(-2deg) scale(1.02)}
80%{transform:translate3d(-11px,-8px,0) rotate(-2.7deg) scale(1.035)}
92%{transform:translate3d(-5px,0,0) rotate(-.4deg) scale(1.008)}
}
@keyframes creatureGlow1{0%,100%{filter:drop-shadow(0 12px 20px rgba(0,0,0,.32))}50%{filter:drop-shadow(0 20px 30px rgba(0,0,0,.45)) drop-shadow(0 0 13px rgba(91,235,255,.24))}}
@keyframes creatureGlow2{0%,100%{filter:drop-shadow(0 11px 19px rgba(0,0,0,.3))}50%{filter:drop-shadow(0 22px 32px rgba(0,0,0,.44)) drop-shadow(0 0 10px rgba(91,235,255,.20))}}
@keyframes creatureGlow3{0%,100%{filter:drop-shadow(0 12px 19px rgba(0,0,0,.31))}50%{filter:drop-shadow(0 19px 29px rgba(0,0,0,.46)) drop-shadow(0 0 15px rgba(91,235,255,.28))}}
@keyframes creatureGlow4{0%,100%{filter:drop-shadow(0 12px 20px rgba(0,0,0,.32))}54%{filter:drop-shadow(0 23px 34px rgba(0,0,0,.47)) drop-shadow(0 0 14px rgba(91,235,255,.25))}}
@keyframes creatureGlow5{0%,100%{filter:drop-shadow(0 12px 20px rgba(0,0,0,.32))}50%{filter:drop-shadow(0 21px 31px rgba(0,0,0,.44)) drop-shadow(0 0 11px rgba(91,235,255,.22))}}
.interstellar-contact{width:min(960px,92vw);margin:.45rem auto 0;text-align:center;font:400 clamp(10px,1vw,13px)/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;color:rgba(224,239,236,.72);text-shadow:0 1px 12px rgba(0,0,0,.48)}
.interstellar-contact a{color:rgba(183,244,246,.92);text-decoration:none;border-bottom:1px solid rgba(183,244,246,.28);padding-bottom:2px;transition:color .2s ease,border-color .2s ease,text-shadow .2s ease}
.interstellar-contact a:hover,.interstellar-contact a:focus-visible{color:#fff;border-color:rgba(183,244,246,.72);text-shadow:0 0 10px rgba(125,239,247,.36);outline:none}
@media(max-width:640px){.socials{width:98vw;gap:2px}.social-creature{min-width:66px;max-width:110px}}
@media(prefers-reduced-motion:reduce){.social-creature{animation:none!important}}
.top .top-logo{filter:brightness(0) saturate(100%) !important;}
/* Editorial press/reception block — concise article previews after artifacts. */
/* Reviews live inside the ART / TEXT / OTHER horizontal rail. */
.h-slide.review-slide{min-width:min(74vw,980px);min-height:58vh;overflow:hidden;border:1px solid rgba(196,241,245,.13);background:#020403;isolation:isolate;box-shadow:0 25px 80px rgba(0,0,0,.34)}
.h-slide.review-slide::before{content:"";position:absolute;inset:-5%;width:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background-image:linear-gradient(115deg,rgba(0,0,0,.18),rgba(0,0,0,.50)),var(--review-art);background-size:cover;background-position:center;filter:saturate(.88) contrast(1.08) brightness(.72);transform:scale(1.08);z-index:-4;animation:xenoBase 12s ease-in-out infinite alternate;animation-delay:var(--review-delay)}
.h-slide.review-slide::after{content:"";position:absolute;inset:-4%;background-image:var(--review-art);background-size:cover;background-position:center;mix-blend-mode:screen;opacity:.16;filter:hue-rotate(128deg) saturate(1.65) contrast(1.2);z-index:-3;animation:xenoVeil 5.8s steps(1,end) infinite;animation-delay:var(--review-delay);pointer-events:none}
.review-visual{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.review-visual::before,.review-visual::after{content:"";position:absolute;inset:-3%;background-image:var(--review-art);background-size:cover;background-position:center;opacity:.27;mix-blend-mode:screen;will-change:clip-path,transform,filter}
.review-visual::before{filter:hue-rotate(162deg) saturate(2) contrast(1.25);animation:xenoSliceA 4.6s steps(1,end) infinite;animation-delay:var(--review-delay)}
.review-visual::after{filter:hue-rotate(-32deg) saturate(1.7) contrast(1.3);animation:xenoSliceB 3.9s steps(1,end) infinite;animation-delay:calc(var(--review-delay) - .7s)}
.review-copy{width:min(590px,72%);margin-left:clamp(30px,6vw,84px);padding:clamp(24px,3.4vw,44px);background:linear-gradient(135deg,rgba(2,4,4,.79),rgba(2,4,4,.49));border:1px solid rgba(194,238,241,.16);backdrop-filter:blur(7px);box-shadow:0 24px 60px rgba(0,0,0,.34);position:relative;overflow:hidden}
.review-copy::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(150,248,238,.6),transparent);animation:reviewScan 4.8s linear infinite}
.review-meta{display:flex;justify-content:space-between;gap:1rem;font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;opacity:.66;margin-bottom:clamp(28px,5vh,58px)}
.review-copy h3{font:500 clamp(31px,4.2vw,58px)/.98 Arial,sans-serif;letter-spacing:-.045em;text-align:left;margin:0 0 1.1rem;position:relative}
.review-copy p{font:14px/1.68 Arial,sans-serif;margin:0 0 2rem;opacity:.78;max-width:49em}
.review-link{display:inline-block;color:rgba(210,251,250,.92);text-decoration:none;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;border-bottom:1px solid rgba(194,238,241,.28);padding-bottom:.5rem;transition:letter-spacing .25s ease,color .25s ease,border-color .25s ease}
.review-link:hover,.review-link:focus-visible{color:#fff;letter-spacing:.26em;border-color:rgba(228,255,254,.76);outline:none}
.h-slide.review-slide:hover::before{filter:saturate(1.02) contrast(1.12) brightness(.78)}
.h-slide.review-slide:hover .review-copy{border-color:rgba(194,238,241,.3)}
@keyframes xenoBase{0%{transform:scale(1.08) translate3d(0,0,0)}50%{transform:scale(1.11) translate3d(-1.2%,.8%,0)}100%{transform:scale(1.09) translate3d(.9%,-.6%,0)}}
@keyframes xenoVeil{0%,13%,100%{opacity:.12;transform:translateX(0)}14%{opacity:.34;transform:translateX(8px)}15%{opacity:.08;transform:translateX(-5px)}47%{opacity:.14;transform:translateX(0)}48%{opacity:.28;transform:translateX(-11px)}49%{opacity:.10;transform:translateX(4px)}}
@keyframes xenoSliceA{0%,18%,100%{clip-path:polygon(0 14%,100% 9%,100% 24%,0 30%);transform:translateX(0)}19%{clip-path:polygon(0 34%,100% 28%,100% 39%,0 46%);transform:translateX(18px)}20%{clip-path:polygon(0 55%,100% 50%,100% 62%,0 69%);transform:translateX(-12px)}61%{clip-path:polygon(0 72%,100% 67%,100% 79%,0 85%);transform:translateX(9px)}62%{clip-path:polygon(0 21%,100% 17%,100% 30%,0 34%);transform:translateX(-7px)}}
@keyframes xenoSliceB{0%,26%,100%{clip-path:polygon(0 63%,100% 57%,100% 70%,0 76%);transform:translateX(0) skewX(0)}27%{clip-path:polygon(0 6%,100% 3%,100% 15%,0 19%);transform:translateX(-20px) skewX(-4deg)}28%{clip-path:polygon(0 42%,100% 36%,100% 49%,0 53%);transform:translateX(13px) skewX(3deg)}73%{clip-path:polygon(0 82%,100% 77%,100% 90%,0 94%);transform:translateX(-9px) skewX(-2deg)}}
@keyframes reviewScan{0%{transform:translateX(-100%);opacity:0}20%{opacity:.6}50%{opacity:.9}80%{opacity:.4}100%{transform:translateX(100%);opacity:0}}
@media(max-width:760px){.h-slide.review-slide{min-width:84vw;min-height:64vh}.review-copy{width:82%;margin-left:7%;padding:24px}.review-meta{flex-direction:column;gap:.4rem;margin-bottom:28px}.review-copy h3{font-size:clamp(30px,8vw,46px)}.review-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.h-slide.review-slide::before,.h-slide.review-slide::after,.review-visual::before,.review-visual::after,.review-copy::before{animation:none!important}}
/* B17 override: article imagery should read as corrupted xeno residue, not clean album covers. */
.h-slide.review-slide{background:#010202;box-shadow:0 28px 90px rgba(0,0,0,.45);}
.h-slide.review-slide::before{
inset:-12%;
background-image:
radial-gradient(circle at 18% 20%, rgba(97,255,242,.14), transparent 26%),
radial-gradient(circle at 78% 74%, rgba(255,92,54,.12), transparent 24%),
linear-gradient(115deg,rgba(0,0,0,.70),rgba(1,6,7,.48) 35%,rgba(0,0,0,.78)),
var(--review-art);
background-size: auto, auto, auto, cover;
background-position:center;
filter: blur(14px) saturate(2.35) contrast(1.65) brightness(.33) hue-rotate(138deg);
transform:scale(1.28) translate3d(0,0,0);
opacity:.95;
animation:xenoB17Base 13.5s cubic-bezier(.55,.02,.2,.98) infinite alternate;
}
.h-slide.review-slide::after{
inset:-8%;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,0) 2px 6px),
linear-gradient(90deg, rgba(70,255,235,.08), rgba(255,86,56,.04) 22%, rgba(0,0,0,0) 40%, rgba(93,239,255,.10) 65%, rgba(255,86,56,.06) 100%),
var(--review-art);
background-size:auto, auto, cover;
background-position:center;
mix-blend-mode:screen;
opacity:.22;
filter:blur(1.5px) hue-rotate(-22deg) saturate(2.6) contrast(1.8) brightness(.8);
animation:xenoB17Flicker 3.2s steps(1,end) infinite;
}
.review-visual{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;isolation:isolate;}
.review-visual .rv{position:absolute;inset:-10%;background-image:var(--review-art);background-size:cover;background-position:center;will-change:transform,filter,opacity,clip-path;}
.review-visual .rv-a{
mix-blend-mode:screen;opacity:.20;
filter:blur(5px) hue-rotate(176deg) saturate(3.2) contrast(2.1) brightness(.9);
clip-path:polygon(0 0,100% 0,100% 18%,0 30%);
animation:xenoB17SliceA 2.7s steps(1,end) infinite;
}
.review-visual .rv-b{
mix-blend-mode:color-dodge;opacity:.16;
filter:blur(3px) hue-rotate(-58deg) saturate(3) contrast(1.9) brightness(.85);
clip-path:polygon(0 34%,100% 22%,100% 58%,0 66%);
animation:xenoB17SliceB 2.25s steps(1,end) infinite;
}
.review-visual .rv-c{
mix-blend-mode:lighten;opacity:.18;
filter:blur(10px) grayscale(.15) hue-rotate(98deg) saturate(2.4) contrast(2.25) brightness(.58);
clip-path:polygon(0 64%,100% 54%,100% 100%,0 100%);
animation:xenoB17SliceC 3.05s steps(1,end) infinite;
}
.review-visual .rv-d{
mix-blend-mode:overlay;opacity:.14;
filter:blur(20px) saturate(2.7) contrast(2.2) brightness(.45) hue-rotate(210deg);
clip-path:polygon(12% 8%,88% 0,100% 20%,76% 48%,100% 78%,85% 100%,20% 94%,0 75%,8% 40%,0 16%);
animation:xenoB17Pulse 8s ease-in-out infinite;
}
.review-visual .rv-scan{
inset:0;background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,0) 1px 5px),
repeating-linear-gradient(90deg, rgba(76,246,238,.07) 0 3px, rgba(0,0,0,0) 3px 17px),
linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.22));
mix-blend-mode:screen;opacity:.20;filter:blur(.2px);
animation:xenoB17Scan 7s linear infinite;
}
.review-visual .rv-vignette{
inset:0;background-image:radial-gradient(circle at center, rgba(0,0,0,0) 0 18%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.64) 88%);
opacity:1;mix-blend-mode:normal;
}
.review-copy{
background:linear-gradient(135deg,rgba(1,4,5,.88),rgba(1,4,5,.58));
border:1px solid rgba(194,238,241,.19);
box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.review-copy::after{
content:"";position:absolute;inset:auto -15% 10% -15%;height:38%;
background:linear-gradient(90deg, rgba(83,255,236,.0), rgba(83,255,236,.11), rgba(255,91,62,.08), rgba(83,255,236,.0));
filter:blur(24px);opacity:.45;pointer-events:none;
}
@keyframes xenoB17Base{
0%{transform:scale(1.28) translate3d(0,0,0)}
20%{transform:scale(1.31) translate3d(-2.5%,1.5%,0)}
42%{transform:scale(1.34) translate3d(1.8%,-2.8%,0)}
61%{transform:scale(1.29) translate3d(3.4%,1.2%,0)}
77%{transform:scale(1.36) translate3d(-1.2%,3.5%,0)}
100%{transform:scale(1.33) translate3d(2.2%,-1.8%,0)}
}
@keyframes xenoB17Flicker{
0%,100%{opacity:.18;transform:translate3d(0,0,0)}
10%{opacity:.28;transform:translate3d(1.2%,0,0)}
23%{opacity:.1;transform:translate3d(-1.4%,0,0)}
37%{opacity:.24;transform:translate3d(3.2%,0,0)}
58%{opacity:.08;transform:translate3d(-2.4%,0,0)}
72%{opacity:.22;transform:translate3d(.8%,0,0)}
88%{opacity:.12;transform:translate3d(-.6%,0,0)}
}
@keyframes xenoB17SliceA{
0%{transform:translate3d(0,0,0) scale(1.22)}
18%{transform:translate3d(-6%,2%,0) scale(1.28)}
39%{transform:translate3d(9%,-4%,0) scale(1.35)}
54%{transform:translate3d(-3%,5%,0) scale(1.24)}
78%{transform:translate3d(5%,-3%,0) scale(1.32)}
100%{transform:translate3d(0,0,0) scale(1.26)}
}
@keyframes xenoB17SliceB{
0%{transform:translate3d(0,0,0) skewX(0deg) scale(1.16)}
15%{transform:translate3d(7%,0,0) skewX(-12deg) scale(1.24)}
31%{transform:translate3d(-4%,3%,0) skewX(9deg) scale(1.18)}
57%{transform:translate3d(10%,-4%,0) skewX(-8deg) scale(1.28)}
81%{transform:translate3d(-6%,1%,0) skewX(11deg) scale(1.21)}
100%{transform:translate3d(1%,0,0) skewX(0deg) scale(1.19)}
}
@keyframes xenoB17SliceC{
0%{transform:translate3d(0,0,0) scale(1.18) rotate(0deg)}
22%{transform:translate3d(-8%,-4%,0) scale(1.31) rotate(-1.6deg)}
48%{transform:translate3d(4%,5%,0) scale(1.22) rotate(1.1deg)}
69%{transform:translate3d(11%,-2%,0) scale(1.35) rotate(-.8deg)}
100%{transform:translate3d(-2%,3%,0) scale(1.24) rotate(.4deg)}
}
@keyframes xenoB17Pulse{
0%,100%{transform:scale(1) rotate(0deg);opacity:.12}
50%{transform:scale(1.15) rotate(8deg);opacity:.2}
}
@keyframes xenoB17Scan{
0%{transform:translateY(-8%)}
100%{transform:translateY(8%)}
}
@media(max-width:840px){
.review-copy{width:min(88%,620px);margin:0 auto;padding:24px 22px}
.h-slide.review-slide{display:grid;place-items:center;min-height:60vh}
}
/* Writing slide with supplied biomechanical city background */
.h-slide.writing-slide{min-width:min(74vw,980px);min-height:58vh;overflow:hidden;border:1px solid rgba(196,241,245,.13);background:#020403;isolation:isolate;box-shadow:0 25px 80px rgba(0,0,0,.34)}
.h-slide.writing-slide::before{content:"";position:absolute;inset:-4%;width:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background-image:linear-gradient(120deg,rgba(0,0,0,.66),rgba(1,6,9,.34) 42%,rgba(0,0,0,.72)),var(--writing-art);background-size:cover;background-position:center;filter:saturate(.95) contrast(1.08) brightness(.56);transform:scale(1.05);z-index:-2}
.h-slide.writing-slide::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(113,238,248,.08),transparent 34%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 5px);mix-blend-mode:screen;opacity:.3;pointer-events:none;z-index:-1}
.writing-copy{width:min(640px,76%);margin-left:clamp(34px,6vw,88px);padding:clamp(24px,3.6vw,44px);background:linear-gradient(135deg,rgba(1,4,5,.84),rgba(1,4,5,.55));border:1px solid rgba(194,238,241,.16);backdrop-filter:blur(6px);box-shadow:0 24px 60px rgba(0,0,0,.34);position:relative;overflow:hidden;text-align:left}
.writing-copy::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(150,248,238,.6),transparent)}
.writing-meta{display:block;font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;opacity:.66;margin-bottom:clamp(24px,5vh,48px)}
.writing-slide h3{font:500 clamp(31px,4.2vw,58px)/.98 Arial,sans-serif;letter-spacing:-.045em;text-align:left;margin:0 0 1.05rem;position:relative}
.writing-copy p{font:14px/1.72 Arial,sans-serif;margin:0;opacity:.82;max-width:50em}
@media(max-width:840px){.h-slide.writing-slide{display:grid;place-items:center;min-height:60vh}.writing-copy{width:min(88%,620px);margin:0 auto;padding:24px 22px}}
/* B19 — ARTIFACTS becomes an immersive horizontal exhibition. */
.h-projects{
position:relative;
height:100svh;
min-height:620px;
padding:0;
margin:0;
background:#010202;
overflow:hidden;
backdrop-filter:none;
isolation:isolate;
}
.h-projects>.label{
position:absolute;
z-index:30;
top:clamp(24px,4.5vh,52px);
left:clamp(24px,5vw,78px);
width:auto;
margin:0;
color:rgba(225,248,247,.72);
font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.38em;
text-shadow:0 0 18px rgba(114,245,238,.12);
opacity:.85;
pointer-events:none;
}
.h-track{
display:flex;
width:100%;
height:100%;
min-height:100%;
gap:0;
padding:0;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
overscroll-behavior-x:contain;
scrollbar-width:none;
touch-action:pan-x pan-y;
cursor:grab;
}
.h-track:active{cursor:grabbing}
.h-track::-webkit-scrollbar{display:none}
.h-slide,
.h-slide.writing-slide,
.h-slide.review-slide{
flex:0 0 100vw;
width:100vw;
min-width:100vw;
height:100%;
min-height:100%;
scroll-snap-align:start;
scroll-snap-stop:always;
position:relative;
display:block;
border:0;
box-shadow:none;
overflow:hidden;
background:#010202;
isolation:isolate;
}
/* FIELD NOTES: the supplied architecture becomes the world, not a card. */
.h-slide.writing-slide::before{
content:"";
position:absolute;
inset:-2%;
width:auto;
aspect-ratio:auto;
border:0;
border-radius:0;
box-shadow:none;
background-image:var(--writing-art);
background-size:cover;
background-position:center center;
filter:saturate(.96) contrast(1.09) brightness(.68);
transform:scale(1.035);
z-index:-4;
animation:artifactFieldDrift 19s ease-in-out infinite alternate;
}
.h-slide.writing-slide::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.48) 25%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.20) 78%,rgba(0,0,0,.62) 100%),
linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.04) 46%,rgba(0,0,0,.30) 100%),
repeating-linear-gradient(0deg,rgba(191,247,244,.026) 0 1px,transparent 1px 5px);
z-index:-3;
pointer-events:none;
}
.writing-copy{
position:absolute;
z-index:5;
left:clamp(28px,6vw,94px);
bottom:clamp(78px,13vh,150px);
width:min(590px,64vw);
margin:0;
padding:0;
background:none;
border:0;
backdrop-filter:none;
box-shadow:none;
text-align:left;
overflow:visible;
}
.writing-copy::before{
content:"";
position:absolute;
left:-18px;
top:-22px;
width:1px;
height:calc(100% + 44px);
background:linear-gradient(180deg,transparent,rgba(151,242,238,.32) 18%,rgba(151,242,238,.14) 80%,transparent);
}
.writing-copy::after{display:none}
.writing-meta{
margin:0 0 1.4rem;
font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.30em;
color:rgba(211,249,247,.67);
opacity:1;
}
.writing-copy p{
margin:0;
max-width:49em;
color:rgba(246,248,247,.92);
font:clamp(13px,1.05vw,15px)/1.72 Arial,sans-serif;
text-shadow:0 2px 18px rgba(0,0,0,.82),0 1px 2px rgba(0,0,0,.92);
opacity:1;
}
/* Reviews: the corrupted source image owns the entire coordinate. */
.h-slide.review-slide::before{
inset:-14%;
z-index:-6;
border:0;
border-radius:0;
box-shadow:none;
background-image:
radial-gradient(circle at 18% 20%,rgba(91,255,239,.16),transparent 24%),
radial-gradient(circle at 82% 72%,rgba(255,74,45,.11),transparent 22%),
linear-gradient(112deg,rgba(0,0,0,.66),rgba(1,6,7,.28) 48%,rgba(0,0,0,.70)),
var(--review-art);
background-size:auto,auto,auto,cover;
background-position:center;
filter:blur(17px) saturate(2.7) contrast(1.78) brightness(.30) hue-rotate(143deg);
transform:scale(1.35);
opacity:.98;
}
.h-slide.review-slide::after{
inset:-7%;
z-index:-5;
opacity:.18;
background-image:
repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 6px),
linear-gradient(90deg,rgba(59,251,237,.08),transparent 34%,rgba(255,77,45,.07) 67%,transparent),
var(--review-art);
background-size:auto,auto,cover;
filter:blur(2px) hue-rotate(-31deg) saturate(3) contrast(1.9) brightness(.74);
}
.review-visual{z-index:-4}
.review-copy{
position:absolute;
z-index:6;
left:clamp(30px,6.5vw,104px);
bottom:clamp(82px,13vh,154px);
width:min(620px,62vw);
margin:0;
padding:0;
background:none;
border:0;
backdrop-filter:none;
box-shadow:none;
overflow:visible;
}
.review-copy::before{
content:"";
position:absolute;
left:-18px;
top:-20px;
width:1px;
height:calc(100% + 40px);
background:linear-gradient(180deg,transparent,rgba(151,242,238,.32) 18%,rgba(151,242,238,.14) 80%,transparent);
animation:none;
}
.review-copy::after{display:none}
.review-meta{
justify-content:flex-start;
gap:2.6rem;
margin:0 0 1.15rem;
color:rgba(214,248,246,.68);
opacity:1;
}
.review-copy h3{
max-width:14em;
margin:0 0 1rem;
color:rgba(249,250,249,.97);
font:500 clamp(29px,4vw,58px)/.98 Arial,sans-serif;
text-shadow:0 4px 24px rgba(0,0,0,.84);
}
.review-copy p{
max-width:46em;
margin:0 0 1.55rem;
color:rgba(244,247,246,.83);
font:clamp(13px,1vw,15px)/1.68 Arial,sans-serif;
text-shadow:0 2px 16px rgba(0,0,0,.82);
opacity:1;
}
.review-link{color:rgba(211,250,248,.84)}
/* Cryptic coordinate navigation: intentionally irregular rather than carousel-perfect. */
.artifact-coordinates{
position:absolute;
z-index:40;
left:50%;
bottom:clamp(24px,4.4vh,48px);
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
min-width:180px;
height:32px;
pointer-events:auto;
user-select:none;
}
.artifact-coordinate{
appearance:none;
-webkit-appearance:none;
border:0;
background:transparent;
color:rgba(215,247,245,.42);
width:26px;
height:30px;
padding:0;
margin:0;
display:grid;
place-items:center;
cursor:pointer;
font:400 19px/1 Georgia,'Times New Roman',serif;
text-shadow:0 0 12px rgba(109,244,235,.10);
transition:color .35s ease,transform .35s ease,text-shadow .35s ease,opacity .35s ease;
opacity:.72;
}
.artifact-coordinate:nth-child(1){margin-right:7px;transform:translateY(1px)}
.artifact-coordinate:nth-child(2){margin-right:17px;transform:translateY(-3px)}
.artifact-coordinate:nth-child(3){margin-right:11px;transform:translateY(3px)}
.artifact-coordinate:nth-child(4){transform:translateY(-1px)}
.artifact-coordinate.active{
color:rgba(224,255,252,.96);
opacity:1;
font-size:22px;
text-shadow:0 0 8px rgba(103,245,236,.38),0 0 24px rgba(103,245,236,.16);
animation:coordLock 4.8s ease-in-out infinite;
}
.artifact-coordinate:hover,.artifact-coordinate:focus-visible{color:#fff;outline:none;text-shadow:0 0 12px rgba(111,247,238,.45)}
.artifact-axis{
position:absolute;
z-index:39;
right:clamp(24px,4vw,64px);
bottom:clamp(28px,4.7vh,52px);
color:rgba(215,247,245,.22);
font:16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.2em;
pointer-events:none;
}
@keyframes coordLock{
0%,100%{transform:scale(1);opacity:.9}
50%{transform:scale(1.08);opacity:1}
}
@keyframes artifactFieldDrift{
0%{transform:scale(1.035) translate3d(0,0,0)}
100%{transform:scale(1.065) translate3d(-.8%,.7%,0)}
}
@media(max-width:840px){
.h-projects{min-height:560px}
.writing-copy,.review-copy{left:26px;bottom:90px;width:min(86vw,620px);margin:0;padding:0}
.review-copy h3{font-size:clamp(28px,8.6vw,48px)}
.artifact-axis{display:none}
.h-projects>.label{left:26px;top:28px}
}
@media(prefers-reduced-motion:reduce){
.h-slide.writing-slide::before,.artifact-coordinate.active{animation:none!important}
}
/* B20 — return TvMcC header to its original white presentation. */
.top .top-logo,.top-logo{filter:drop-shadow(0 0 22px rgba(255,255,255,.07)) !important;}
.vessel-identification{
width:min(900px,92vw);margin:.75rem auto .15rem;text-align:center;
font:400 clamp(11px,1.05vw,14px)/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.09em;color:rgba(236,244,241,.82);text-shadow:0 1px 14px rgba(0,0,0,.55)
}
.artifact-coordinate:nth-child(5){margin-left:15px;transform:translateY(2px)}
/* Fifth artifact coordinate — commissioned object / Idolized Designs. */
.h-slide.idolized-slide{position:relative;overflow:hidden;background:#010304;isolation:isolate;}
.h-slide.idolized-slide::before{
content:"";position:absolute;inset:0;width:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;
background:
radial-gradient(circle at 68% 35%,rgba(91,244,235,.12),transparent 18%),
radial-gradient(circle at 31% 64%,rgba(255,104,65,.10),transparent 22%),
linear-gradient(125deg,#020405 0%,#071013 42%,#020304 72%,#000 100%);
z-index:-7;
}
.idolized-field{position:absolute;inset:0;overflow:hidden;z-index:-5;pointer-events:none;}
.idolized-arc{position:absolute;border:1px solid rgba(142,231,227,.12);border-radius:50%;filter:blur(.1px);}
.idolized-arc.arc-a{width:72vw;height:72vw;left:-20vw;top:-30vw;box-shadow:0 0 90px rgba(79,232,221,.04);animation:idolArcA 18s linear infinite;}
.idolized-arc.arc-b{width:56vw;height:56vw;right:-17vw;bottom:-27vw;border-color:rgba(255,128,91,.11);animation:idolArcB 23s linear infinite;}
.idolized-arc.arc-c{width:34vw;height:34vw;left:36vw;top:15vh;border-style:dashed;opacity:.42;animation:idolArcC 28s linear infinite;}
.idolized-noise{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);mix-blend-mode:screen;opacity:.28;}
.idolized-copy{position:absolute;left:clamp(30px,6.5vw,104px);bottom:clamp(96px,15vh,176px);width:min(580px,54vw);z-index:7;}
.idolized-copy::before{content:"";position:absolute;left:-18px;top:-20px;width:1px;height:calc(100% + 40px);background:linear-gradient(180deg,transparent,rgba(151,242,238,.32) 18%,rgba(151,242,238,.14) 80%,transparent);}
.idolized-meta{margin:0 0 1.1rem;color:rgba(214,248,246,.62);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.28em;}
.idolized-copy h3{max-width:13em;margin:0 0 1rem;color:rgba(249,250,249,.97);font:500 clamp(31px,4.2vw,58px)/.98 Arial,sans-serif;text-align:left;text-shadow:0 4px 24px rgba(0,0,0,.84);}
.idolized-copy p{max-width:44em;margin:0;color:rgba(244,247,246,.84);font:clamp(13px,1vw,15px)/1.68 Arial,sans-serif;text-shadow:0 2px 16px rgba(0,0,0,.82);}
.idolized-social-creature{position:absolute;z-index:9;right:clamp(34px,9vw,150px);top:50%;width:min(230px,24vw);transform:translateY(-50%);text-decoration:none;filter:drop-shadow(0 20px 34px rgba(0,0,0,.48));animation:idolCreatureHover 5.8s cubic-bezier(.45,.02,.2,1) infinite;transform-origin:50% 70%;}
.idolized-organism{display:block;width:100%;height:auto;overflow:visible;}
.idolized-social-creature:hover,.idolized-social-creature:focus-visible{outline:none;filter:drop-shadow(0 24px 44px rgba(0,0,0,.56)) drop-shadow(0 0 18px rgba(94,244,236,.22));}
.idolized-social-creature:hover .idol-eye,.idolized-social-creature:focus-visible .idol-eye{stroke-width:6;}
.idol-wing-left{transform-origin:116px 150px;animation:idolWingL 4.4s ease-in-out infinite;}
.idol-wing-right{transform-origin:164px 150px;animation:idolWingR 4.9s ease-in-out infinite;}
.idol-tendril{transform-origin:140px 220px;animation:idolTendril 5.2s ease-in-out infinite;}
.idol-tendril.t2,.idol-tendril.t4{animation-delay:-1.8s;}
.idol-antenna{transform-origin:140px 70px;animation:idolAntenna 3.8s ease-in-out infinite;}
.idol-instagram{animation:idolSignal 2.8s ease-in-out infinite;transform-origin:21px 21px;}
.idolized-photo-source{position:absolute;z-index:8;right:clamp(34px,9vw,150px);bottom:clamp(44px,7vh,82px);color:rgba(210,249,247,.46);text-decoration:none;border-bottom:1px solid rgba(183,244,246,.16);padding-bottom:4px;font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;transition:color .2s ease,border-color .2s ease;}
.idolized-photo-source:hover,.idolized-photo-source:focus-visible{color:rgba(230,255,253,.92);border-color:rgba(183,244,246,.55);outline:none;}
@keyframes idolCreatureHover{
0%,100%{transform:translateY(-50%) translate3d(0,3px,0) rotate(-1deg)}
24%{transform:translateY(-50%) translate3d(-7px,-10px,0) rotate(1.1deg)}
52%{transform:translateY(-50%) translate3d(6px,-17px,0) rotate(-.6deg)}
76%{transform:translateY(-50%) translate3d(10px,-6px,0) rotate(1.4deg)}
}
@keyframes idolWingL{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(-4deg) scale(1.025)}}
@keyframes idolWingR{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(5deg) scale(1.018)}}
@keyframes idolTendril{0%,100%{transform:rotate(0deg)}50%{transform:rotate(3deg)}}
@keyframes idolAntenna{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-2deg)}}
@keyframes idolSignal{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes idolArcA{to{transform:rotate(360deg)}}
@keyframes idolArcB{to{transform:rotate(-360deg)}}
@keyframes idolArcC{to{transform:rotate(360deg)}}
@media(max-width:840px){
.idolized-copy{left:26px;bottom:110px;width:min(74vw,540px)}
.idolized-social-creature{right:20px;top:24%;width:min(150px,32vw);}
.idolized-photo-source{right:24px;bottom:62px;}
}
@media(prefers-reduced-motion:reduce){.idolized-social-creature,.idol-wing-left,.idol-wing-right,.idol-tendril,.idol-antenna,.idol-instagram,.idolized-arc{animation:none!important}}
/* B21 — Idolized coordinate: floating image fragments over the neutral xeno environment */
.h-slide.idolized-slide{min-width:100vw;min-height:100svh}
.idolized-gallery{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1400px;overflow:hidden}
.idolized-float{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:3/4;margin:0;border-radius:18px;transform:translate(-50%,-50%) rotate(var(--rot)) translateZ(calc(var(--z) * 6px));background-size:cover;background-position:center center;box-shadow:0 24px 58px rgba(0,0,0,.42),0 0 0 1px rgba(235,245,244,.16),0 0 24px rgba(129,236,229,.12);overflow:hidden;opacity:.92;filter:saturate(.98) contrast(1.05);animation:idolFloat var(--dur) ease-in-out infinite;animation-delay:var(--delay)}
.idolized-float::before{content:"";position:absolute;inset:-1px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 20%,transparent 78%,rgba(125,236,229,.18));pointer-events:none}
.idolized-float::after{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(180deg,rgba(6,10,12,.0),rgba(6,10,12,.12) 74%,rgba(6,10,12,.34));pointer-events:none}
.idolized-shimmer{position:absolute;inset:auto auto -10% -18%;width:46%;height:130%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:rotate(17deg);mix-blend-mode:screen;opacity:.26;animation:idolShimmer 9s ease-in-out infinite}
.idf-1,.idf-4,.idf-7{animation-name:idolFloatAlt}
.idf-2 .idolized-shimmer,.idf-5 .idolized-shimmer,.idf-8 .idolized-shimmer{animation-delay:-3s}
.idolized-copy{z-index:7;backdrop-filter:blur(4px);padding:clamp(20px,2.2vw,28px);background:linear-gradient(145deg,rgba(1,4,5,.76),rgba(1,4,5,.28));border:1px solid rgba(218,244,242,.14);box-shadow:0 18px 55px rgba(0,0,0,.28);border-radius:18px;max-width:min(580px,52vw)}
.idolized-copy h3{margin:0 0 1rem;font:500 clamp(28px,3.8vw,54px)/.96 Arial,sans-serif;letter-spacing:-.04em;color:#f2f8f8}
.idolized-copy p{max-width:44ch;color:rgba(236,244,241,.83)}
.idolized-social-creature{z-index:7}
.idolized-photo-source{z-index:7;background:rgba(0,0,0,.32);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);padding:.55rem .9rem;border-radius:999px}
@keyframes idolFloat{0%,100%{transform:translate(-50%,-50%) rotate(var(--rot)) translateY(0) scale(1)}25%{transform:translate(calc(-50% + 10px),calc(-50% - 7px)) rotate(calc(var(--rot) + 2deg)) scale(1.015)}50%{transform:translate(calc(-50% - 8px),calc(-50% + 10px)) rotate(calc(var(--rot) - 1.5deg)) scale(.988)}75%{transform:translate(calc(-50% + 6px),calc(-50% - 5px)) rotate(calc(var(--rot) + .75deg)) scale(1.01)}}
@keyframes idolFloatAlt{0%,100%{transform:translate(-50%,-50%) rotate(var(--rot)) translateY(0) scale(1)}30%{transform:translate(calc(-50% - 12px),calc(-50% + 8px)) rotate(calc(var(--rot) - 2.2deg)) scale(1.02)}62%{transform:translate(calc(-50% + 9px),calc(-50% - 11px)) rotate(calc(var(--rot) + 1.6deg)) scale(.985)}}
@keyframes idolShimmer{0%,100%{transform:translateX(-20%) rotate(17deg);opacity:.14}50%{transform:translateX(180%) rotate(17deg);opacity:.33}}
@media (max-width: 960px){
.idolized-gallery{opacity:.85}
.idolized-float{width:min(28vw,190px)}
.idf-1{--x:62%;--y:16%;--w:min(28vw,200px)}
.idf-2{--x:81%;--y:24%;--w:min(23vw,160px)}
.idf-3{--x:74%;--y:40%;--w:min(24vw,165px)}
.idf-4{--x:59%;--y:49%;--w:min(24vw,165px)}
.idf-5{--x:82%;--y:61%;--w:min(22vw,150px)}
.idf-6{--x:67%;--y:74%;--w:min(24vw,165px)}
.idf-7,.idf-8{display:none}
.idolized-copy{left:22px !important;right:22px;bottom:110px !important;width:auto;max-width:unset}
}
@media (max-width: 640px){
.idolized-gallery{opacity:.64}
.idf-2,.idf-5,.idf-6{display:none}
.idf-1{--x:70%;--y:20%;--w:38vw}
.idf-3{--x:76%;--y:41%;--w:30vw}
.idf-4{--x:64%;--y:66%;--w:34vw}
.idolized-copy{bottom:124px !important;padding:18px 18px 20px}
.idolized-copy h3{font-size:clamp(28px,8vw,40px)}
}
/* B22 — prioritize the floating head images; shrink and lower the social creature */
.idolized-gallery{z-index:4}
.idolized-float{opacity:.98;box-shadow:0 28px 72px rgba(0,0,0,.52),0 0 0 1px rgba(245,248,247,.18),0 0 34px rgba(129,236,229,.10)}
.idolized-copy{width:min(440px,38vw);max-width:min(440px,38vw);bottom:90px !important;left:26px !important;padding:18px 20px 20px;background:linear-gradient(145deg,rgba(1,4,5,.68),rgba(1,4,5,.20));border-color:rgba(218,244,242,.10);box-shadow:0 14px 44px rgba(0,0,0,.24)}
.idolized-copy h3{font-size:clamp(24px,3.1vw,44px);margin-bottom:.8rem}
.idolized-copy p{font-size:clamp(14px,1.05vw,17px);line-height:1.6;max-width:38ch}
.idolized-social-creature{position:absolute;right:120px;bottom:34px;top:auto;transform:none !important;z-index:6;display:block;width:clamp(90px,9vw,128px)}
.idolized-organism{width:100%;height:auto;display:block}
.idolized-photo-source{right:24px;bottom:32px}
@media (min-width: 1200px){
.idolized-field{background:radial-gradient(circle at 72% 44%,rgba(101,244,239,.12),transparent 15%),radial-gradient(circle at 80% 64%,rgba(255,116,76,.08),transparent 19%)}
}
@media (max-width: 960px){
.idolized-copy{width:min(380px,42vw);max-width:min(380px,42vw);bottom:84px !important;left:20px !important}
.idolized-social-creature{right:104px;bottom:22px;width:88px}
.idolized-photo-source{right:18px;bottom:22px}
.idf-1{--x:55%;--y:18%;--w:min(30vw,230px)}
.idf-2{--x:81%;--y:19%;--w:min(28vw,210px)}
.idf-3{--x:87%;--y:38%;--w:min(22vw,165px)}
.idf-4{--x:58%;--y:46%;--w:min(30vw,220px)}
.idf-5{--x:82%;--y:50%;--w:min(27vw,205px)}
.idf-6{--x:78%;--y:72%;--w:min(22vw,160px)}
.idf-7{--x:57%;--y:74%;--w:min(26vw,190px)}
.idf-8{display:none}
}
@media (max-width: 640px){
.idolized-gallery{opacity:.86}
.idolized-copy{left:16px !important;right:16px;width:auto;max-width:none;bottom:118px !important}
.idolized-social-creature{right:102px;bottom:18px;width:74px}
.idolized-photo-source{right:14px;bottom:18px}
.idf-1{--x:70%;--y:20%;--w:36vw}
.idf-2{--x:86%;--y:28%;--w:28vw}
.idf-3{--x:77%;--y:45%;--w:28vw}
.idf-4{--x:62%;--y:53%;--w:33vw}
.idf-5{--x:84%;--y:63%;--w:29vw}
.idf-6{display:none}
.idf-7{--x:70%;--y:78%;--w:30vw}
.idf-8{display:none}
}
/* B27 — main background is a viewport layer, never document-height stretched. */
body{background:#030504 !important;background-image:none !important;position:relative;}
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:url('/assets/backgrounds/main-background-restored.jpg');
background-position:center center;background-size:cover;background-repeat:no-repeat;
filter:none;transform:translateZ(0);
}
body::after{
z-index:1 !important;
background:radial-gradient(circle at 50% 40%,rgba(0,0,0,.04) 0%,rgba(0,0,0,.16) 55%,rgba(0,0,0,.44) 100%) !important;
}
main{position:relative;z-index:2 !important;}
/* B27 — FIELD NOTES: use the actual 1280×720 art and preserve its detail. */
.h-slide.writing-slide{background:#020506 !important;}
.h-slide.writing-slide::before{
content:"" !important;position:absolute !important;inset:0 !important;
background-image:var(--writing-art) !important;background-size:cover !important;background-position:center center !important;background-repeat:no-repeat !important;
filter:none !important;transform:none !important;opacity:1 !important;z-index:-3 !important;
}
.h-slide.writing-slide::after{
content:"" !important;position:absolute !important;inset:0 !important;z-index:-2 !important;
background:
linear-gradient(90deg,rgba(0,0,0,.54) 0%,rgba(0,0,0,.35) 27%,rgba(0,0,0,.12) 46%,rgba(0,0,0,.02) 64%,transparent 100%),
linear-gradient(0deg,rgba(0,0,0,.12),transparent 38%) !important;
opacity:1 !important;mix-blend-mode:normal !important;
}
.writing-copy{
width:min(660px,43vw) !important;margin-left:clamp(34px,5.5vw,88px) !important;
padding:clamp(24px,3vw,40px) !important;background:rgba(1,4,5,.46) !important;
border:1px solid rgba(210,244,246,.17) !important;backdrop-filter:blur(2px) !important;
box-shadow:0 18px 50px rgba(0,0,0,.26) !important;overflow:hidden !important;
}
.writing-copy::after{
content:"";position:absolute;right:2%;top:8%;width:46%;height:78%;z-index:0;pointer-events:none;
background-image:url('/assets/artifacts/one-union-watermark-legacy-a.png');background-repeat:no-repeat;background-size:contain;background-position:center;
opacity:.20;mix-blend-mode:screen;filter:saturate(.78) contrast(1.06);
}
.writing-copy>*{position:relative;z-index:2;}
.writing-copy p{opacity:.97 !important;text-shadow:0 2px 11px rgba(0,0,0,.72);}
.writing-meta{opacity:.82 !important;}
/* B27 — Idolized images are the exhibit: large, left/center, spaced, no overlap. */
.idolized-gallery{position:absolute !important;inset:0 !important;z-index:6 !important;overflow:hidden !important;}
.idolized-float{
position:absolute !important;left:var(--x) !important;top:var(--y) !important;width:var(--w) !important;
aspect-ratio:4/5 !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;
border-radius:18px !important;opacity:1 !important;z-index:var(--z) !important;
box-shadow:0 24px 58px rgba(0,0,0,.35),0 0 0 1px rgba(248,249,248,.18),0 0 22px rgba(100,231,226,.08) !important;
animation:idolFloatB27 var(--dur) ease-in-out infinite !important;animation-delay:var(--delay) !important;
}
@keyframes idolFloatB27{
0%,100%{transform:translate(-50%,-50%) rotate(var(--rot))}
35%{transform:translate(calc(-50% + 2px),calc(-50% - 3px)) rotate(calc(var(--rot) + .3deg))}
70%{transform:translate(calc(-50% - 2px),calc(-50% + 2px)) rotate(calc(var(--rot) - .25deg))}
}
.idolized-copy{
left:auto !important;right:3.5vw !important;top:24vh !important;bottom:auto !important;
width:min(340px,22vw) !important;max-width:min(340px,22vw) !important;padding:20px 22px !important;
background:linear-gradient(145deg,rgba(1,4,5,.73),rgba(1,4,5,.25)) !important;
border-color:rgba(218,244,242,.12) !important;z-index:8 !important;
}
.idolized-copy h3{font-size:clamp(25px,2.8vw,40px) !important;}
.idolized-copy p{font-size:clamp(12px,.92vw,14px) !important;line-height:1.58 !important;}
.idolized-social-creature{right:6.2vw !important;bottom:23px !important;top:auto !important;width:clamp(66px,6.5vw,92px) !important;transform:none !important;z-index:9 !important;}
.idolized-photo-source{right:1.4vw !important;bottom:25px !important;z-index:9 !important;}
@media(max-width:1100px){
.idolized-copy{right:2.3vw !important;width:min(300px,24vw) !important;max-width:min(300px,24vw) !important;}
.idf-1{--x:18%;--y:24%;--w:17vw !important} .idf-2{--x:40%;--y:24%;--w:17vw !important} .idf-3{--x:62%;--y:24%;--w:17vw !important}
.idf-4{--x:18%;--y:69%;--w:17vw !important} .idf-5{--x:40%;--y:69%;--w:17vw !important} .idf-6{--x:62%;--y:69%;--w:17vw !important}
}
@media(max-width:760px){
.writing-copy{width:min(88%,650px) !important;margin:0 auto !important;}
.writing-copy::after{width:50%;opacity:.14;}
.idolized-copy{left:16px !important;right:16px !important;top:auto !important;bottom:86px !important;width:auto !important;max-width:none !important;padding:14px 16px !important;}
.idolized-copy h3{font-size:27px !important;margin-bottom:.55rem !important;} .idolized-copy p{font-size:11.5px !important;line-height:1.45 !important;}
.idolized-social-creature{right:90px !important;bottom:14px !important;width:62px !important;} .idolized-photo-source{right:10px !important;bottom:14px !important;}
.idf-1{--x:18%;--y:15%;--w:27vw !important} .idf-2{--x:50%;--y:15%;--w:27vw !important} .idf-3{--x:82%;--y:15%;--w:27vw !important}
.idf-4{--x:18%;--y:42%;--w:27vw !important} .idf-5{--x:50%;--y:42%;--w:27vw !important} .idf-6{--x:82%;--y:42%;--w:27vw !important}
}
/* B28 — make the One Union watermark clearly visible but secondary to the field note. */
.writing-copy::after{
background-image:url('/assets/artifacts/one-union-watermark-legacy-b.png') !important;
right:2% !important;top:7% !important;width:48% !important;height:82% !important;
opacity:.30 !important;mix-blend-mode:screen !important;filter:saturate(.88) contrast(1.1) !important;
}
/* Keep image cards visually dominant and fully separated. */
.idolized-float{background-color:#080b0c !important;}
/* B29 — visible One Union watermark in FIELD NOTES blurb. */
.writing-copy::after{
background-image:url('/assets/artifacts/one-union-watermark-legacy-c.png') !important;
width:55% !important;height:78% !important;right:0 !important;top:9% !important;
opacity:.42 !important;mix-blend-mode:screen !important;
background-size:contain !important;background-position:center right !important;background-repeat:no-repeat !important;
filter:saturate(.92) contrast(1.08) brightness(1.05) !important;
}
/* B30 — explicit One Union watermark layer behind FIELD NOTES text. */
.writing-copy::after{display:none !important}
.one-union-watermark{position:absolute !important;right:14px !important;top:50% !important;transform:translateY(-50%) !important;width:48% !important;height:auto !important;max-width:none !important;border-radius:0 !important;box-shadow:none !important;opacity:.28 !important;mix-blend-mode:screen !important;filter:saturate(.9) contrast(1.08) !important;z-index:1 !important;pointer-events:none !important}
.writing-copy>.writing-meta,.writing-copy>p{position:relative !important;z-index:2 !important}
/* B31 — compact release archive: five releases in 3 + 2 rows instead of five long vertical screens. */
.release-archive{position:relative;z-index:1;padding:3vh 4vw 8vh;margin:0 auto;width:100%;}
.release-archive-label{width:min(1180px,92vw);margin:0 auto 2.2rem;font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.38em;color:rgba(241,250,248,.62);text-shadow:0 1px 14px rgba(0,0,0,.7)}
.release-grid{width:min(1180px,92vw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(24px,3.2vw,52px)}
.release-grid .release{flex:0 1 calc((100% - clamp(48px,6.4vw,104px))/3);width:auto;min-width:250px;max-width:350px;min-height:0 !important;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin:0;}
.release-grid .release::before,.release-grid .release.has-art::after{width:100% !important;max-width:none !important;}
.release-grid .release::before{box-shadow:0 0 0 18px rgba(255,255,255,.022),0 0 0 36px rgba(255,255,255,.012) !important;}
.release-grid .release.has-art::after{background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.25)),var(--album-art) !important;box-shadow:inset 0 0 45px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.11) !important;}
.release-grid .release-copy{max-width:76% !important;padding:1.2rem 1.15rem !important;border-radius:18px !important;background:rgba(5,8,11,.34) !important;backdrop-filter:blur(3px) !important;}
.release-grid .release-copy h2{font-size:clamp(23px,2.75vw,39px) !important;line-height:.96 !important;}
.release-grid .release-copy .glyph-title{font-size:clamp(18px,2.15vw,31px) !important;max-width:100% !important;}
.release-grid .release-copy small{font-size:8px !important;line-height:1.35;margin-top:.65rem !important;letter-spacing:.13em !important;}
@media(max-width:900px){.release-grid .release{flex-basis:calc((100% - 28px)/2);max-width:330px;min-width:210px}.release-archive{padding-bottom:7vh}}
@media(max-width:560px){.release-grid{gap:24px}.release-grid .release{flex-basis:min(82vw,330px);min-width:0}.release-archive{padding-top:2vh}}
/* B31 — artifact entry language: cryptic descriptor + explicit interaction hint. */
.h-projects>.artifact-title{position:absolute;z-index:42;top:clamp(24px,4.2vh,46px);left:clamp(24px,4.8vw,74px);width:auto;margin:0;color:rgba(225,248,247,.76);font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4em;text-shadow:0 0 18px rgba(114,245,238,.12);opacity:.9;pointer-events:none}
.artifact-entry-note{position:absolute;z-index:42;left:clamp(24px,4.8vw,74px);top:clamp(48px,7.8vh,82px);max-width:min(600px,72vw);pointer-events:none;transition:opacity .8s ease,transform .8s ease;}
.artifact-entry-desc{font:400 clamp(9px,.75vw,11px)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.17em;color:rgba(222,247,244,.58);text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.artifact-entry-hint{margin-top:.55rem;font:400 clamp(8px,.67vw,10px)/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:rgba(215,247,245,.38);text-transform:lowercase}
.h-projects.artifact-engaged .artifact-entry-note{opacity:.18;transform:translateY(-4px)}
.h-projects.artifact-engaged .artifact-entry-hint{opacity:0}
/* B31 — Idolized Designs becomes a photographic exhibition. Xeno space is only a perimeter/gap. */
.h-slide.idolized-slide{background:#010304 !important;}
.idolized-gallery{position:absolute !important;inset:5.5vh 2.2vw 7.5vh !important;z-index:4 !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,22px) clamp(12px,1.25vw,24px);width:auto !important;height:auto !important;perspective:none !important;overflow:visible !important;pointer-events:none;}
.idolized-float{position:relative !important;inset:auto !important;left:auto !important;top:auto !important;width:100% !important;height:100% !important;aspect-ratio:auto !important;margin:0 !important;border-radius:16px !important;transform:none !important;background-size:cover !important;background-position:center center !important;background-repeat:no-repeat !important;box-shadow:0 18px 50px rgba(0,0,0,.32),0 0 0 1px rgba(240,247,245,.16) !important;opacity:1 !important;filter:saturate(1.02) contrast(1.03) !important;animation:none !important;overflow:hidden;}
.idolized-float::before{background:linear-gradient(145deg,rgba(255,255,255,.14),transparent 16%,transparent 84%,rgba(113,234,229,.10)) !important;}
.idolized-float::after{background:linear-gradient(180deg,transparent 72%,rgba(1,5,7,.12)) !important;}
.idolized-shimmer{opacity:.10 !important;}
.idolized-copy{position:absolute !important;z-index:8 !important;left:clamp(30px,4vw,62px) !important;bottom:clamp(74px,9vh,108px) !important;top:auto !important;right:auto !important;width:min(430px,29vw) !important;max-width:min(430px,29vw) !important;padding:15px 18px 17px !important;background:linear-gradient(135deg,rgba(1,4,5,.82),rgba(1,4,5,.50)) !important;border:1px solid rgba(218,244,242,.13) !important;border-radius:15px !important;backdrop-filter:blur(5px) !important;box-shadow:0 14px 42px rgba(0,0,0,.34) !important;}
.idolized-copy h3{font-size:clamp(25px,2.7vw,42px) !important;margin:0 0 .65rem !important;}
.idolized-copy p{font-size:clamp(11px,.84vw,13px) !important;line-height:1.5 !important;max-width:39ch !important;}
.idolized-meta{font-size:8px !important;margin-bottom:.7rem !important;}
/* Parent stays anchored at bottom; nested SVG does the visible organism movement so older transform overrides cannot freeze it. */
.idolized-social-creature{position:absolute !important;z-index:10 !important;right:clamp(22px,3.2vw,54px) !important;bottom:clamp(18px,2.3vh,30px) !important;top:auto !important;width:clamp(60px,5.4vw,82px) !important;transform:none !important;animation:none !important;}
.idolized-social-creature .idolized-organism{display:block;width:100%;height:auto;transform-origin:50% 68%;will-change:transform;animation:idolOrganismBottom 4.8s cubic-bezier(.42,.03,.28,1) infinite !important;}
@keyframes idolOrganismBottom{0%,100%{transform:translate3d(0,2px,0) rotate(-1.6deg)}22%{transform:translate3d(-5px,-8px,0) rotate(1.2deg)}49%{transform:translate3d(4px,-13px,0) rotate(-.5deg)}73%{transform:translate3d(7px,-5px,0) rotate(1.7deg)}}
@media(max-width:980px){
.idolized-gallery{inset:7vh 2vw 20vh !important;grid-template-columns:repeat(3,1fr);gap:10px !important}
.idolized-copy{left:18px !important;bottom:68px !important;width:min(390px,48vw) !important;max-width:min(390px,48vw) !important;}
.idolized-social-creature{right:18px !important;bottom:16px !important;width:66px !important;}
}
@media(max-width:680px){
.idolized-gallery{inset:8vh 3vw 28vh !important;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:8px !important}
.idolized-copy{left:14px !important;right:94px !important;bottom:70px !important;width:auto !important;max-width:none !important;padding:12px 14px !important}
.idolized-copy h3{font-size:25px !important}.idolized-copy p{font-size:10.5px !important}
.idolized-social-creature{right:17px !important;bottom:14px !important;width:62px !important;}
}
/* B32 — ARTIFACTS is a portal with its own first world. */
.artifact-intro-slide{position:relative;overflow:hidden;background:#010304;isolation:isolate;color:#effbfa}
.artifact-intro-slide::before{content:"";position:absolute;inset:0;width:auto;aspect-ratio:auto;border:0;border-radius:0;background:
radial-gradient(circle at 50% 42%,rgba(83,246,232,.10),transparent 22%),
radial-gradient(circle at 22% 70%,rgba(239,86,59,.08),transparent 18%),
linear-gradient(145deg,#010303 0%,#061012 45%,#020303 72%,#000 100%);z-index:-3}
.artifact-intro-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.intro-orbit{position:absolute;border:1px solid rgba(139,241,235,.10);border-radius:50%;transform-origin:center;}
.intro-o1{width:72vw;height:72vw;left:14vw;top:-27vw;animation:introOrbitA 26s linear infinite}
.intro-o2{width:44vw;height:44vw;right:-13vw;bottom:-20vw;border-color:rgba(255,122,79,.10);animation:introOrbitB 34s linear infinite}
.intro-o3{width:28vw;height:28vw;left:-9vw;bottom:8vh;border-style:dashed;opacity:.45;animation:introOrbitA 41s linear reverse infinite}
.intro-signal{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(127,247,239,.4),transparent);opacity:.24}
.intro-sg1{width:76vw;left:11vw;top:36%;transform:rotate(-8deg);animation:introSignal 7s ease-in-out infinite}
.intro-sg2{width:58vw;left:28vw;top:64%;transform:rotate(11deg);animation:introSignal 9.5s ease-in-out -3s infinite}
.intro-noise{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px);opacity:.28;mix-blend-mode:screen}
.artifact-intro-core{position:relative;width:min(920px,84vw);text-align:center;padding:clamp(28px,4vw,54px);z-index:2}
.artifact-intro-kicker{font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.52em;color:rgba(213,248,244,.58);margin-bottom:clamp(28px,5vh,60px)}
.artifact-intro-title{margin:0;font:500 clamp(44px,7.4vw,112px)/.86 Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase;text-shadow:0 8px 50px rgba(0,0,0,.65)}
.artifact-intro-desc{max-width:720px;margin:clamp(22px,3vh,34px) auto 0;font:400 clamp(11px,1vw,15px)/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;text-transform:uppercase;color:rgba(224,247,244,.62)}
.artifact-intro-hint{margin-top:clamp(34px,6vh,72px);font:400 clamp(9px,.78vw,11px)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:rgba(215,247,245,.45);text-transform:lowercase}
.artifact-intro-hint span{display:inline-block;margin:0 .55rem;color:rgba(118,239,232,.64)}
@keyframes introOrbitA{to{transform:rotate(360deg)}}
@keyframes introOrbitB{to{transform:rotate(-360deg)}}
@keyframes introSignal{0%,100%{opacity:.10;transform:translateX(-3%) rotate(-8deg)}50%{opacity:.34;transform:translateX(3%) rotate(-8deg)}}
/* B32 — One Union exists as its own artifact coordinate. The logo becomes the environment. */
.h-slide.oneunion-slide{position:relative;overflow:hidden;background:#010203;isolation:isolate;color:#eef8f7}
.h-slide.oneunion-slide::before{content:"";position:absolute;inset:0;width:auto;aspect-ratio:auto;border:0;border-radius:0;background:
radial-gradient(circle at 52% 46%,rgba(73,239,225,.08),transparent 28%),
radial-gradient(circle at 76% 68%,rgba(221,243,59,.06),transparent 21%),
linear-gradient(125deg,#000 0%,#071113 48%,#010202 100%);z-index:-6}
.ou-xeno-field{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;isolation:isolate}
.ou-xeno-field span{position:absolute;display:block;background-image:var(--ou-logo);background-repeat:no-repeat;background-position:center;background-size:contain;will-change:transform,clip-path,filter,opacity}
.ou-logo-main{width:min(78vw,1240px);height:48vh;left:11vw;top:24vh;opacity:.28;filter:saturate(1.7) contrast(1.45) brightness(.66) hue-rotate(8deg);transform:scale(1.06) rotate(-2deg);animation:ouMainDrift 13s ease-in-out infinite alternate}
.ou-logo-slice{left:5vw;width:90vw;height:62vh;top:18vh;mix-blend-mode:screen;opacity:.24;background-size:min(78vw,1240px) auto}
.ou-s1{clip-path:polygon(0 10%,100% 2%,100% 27%,0 37%);filter:hue-rotate(138deg) saturate(2.6) contrast(2);animation:ouSlice1 3.4s steps(1,end) infinite}
.ou-s2{clip-path:polygon(0 38%,100% 29%,100% 60%,0 69%);filter:hue-rotate(-41deg) saturate(2.2) contrast(2.1);animation:ouSlice2 2.75s steps(1,end) -1.1s infinite}
.ou-s3{clip-path:polygon(0 67%,100% 58%,100% 94%,0 100%);filter:hue-rotate(195deg) saturate(2.7) contrast(1.9);animation:ouSlice3 4.1s steps(1,end) -.5s infinite}
.ou-logo-echo{width:54vw;height:34vh;opacity:.12;mix-blend-mode:color-dodge;filter:blur(7px) saturate(3) contrast(1.8)}
.ou-e1{left:-4vw;top:3vh;transform:rotate(14deg);animation:ouEcho 11s ease-in-out infinite alternate}
.ou-e2{right:-5vw;bottom:0;transform:rotate(-17deg);animation:ouEcho 14s ease-in-out -4s infinite alternate-reverse}
.ou-scanfield{inset:0 !important;width:100% !important;height:100% !important;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px) !important;background-size:auto !important;opacity:.14;mix-blend-mode:screen}
.artifact-copy-panel{position:relative;width:min(620px,67vw);padding:clamp(24px,3.5vw,44px);background:linear-gradient(135deg,rgba(1,4,5,.84),rgba(1,4,5,.48));border:1px solid rgba(194,238,241,.17);backdrop-filter:blur(6px);box-shadow:0 24px 64px rgba(0,0,0,.38);overflow:hidden;text-align:left}
.artifact-copy-panel::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(150,248,238,.62),transparent)}
.artifact-copy-meta{font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;color:rgba(221,247,244,.63);margin-bottom:clamp(25px,4vh,46px)}
.artifact-copy-panel p{font:clamp(13px,1vw,15px)/1.72 Arial,sans-serif;color:rgba(239,246,245,.84);margin:0;max-width:52em}
.oneunion-copy{margin-left:clamp(34px,6vw,92px);margin-right:auto}
@keyframes ouMainDrift{0%{transform:scale(1.05) translate3d(-1%,1%,0) rotate(-2deg)}100%{transform:scale(1.11) translate3d(2%,-2%,0) rotate(1deg)}}
@keyframes ouSlice1{0%,100%{transform:translate3d(-4%,0,0) skewX(-7deg)}22%{transform:translate3d(7%,-2%,0) skewX(11deg)}48%{transform:translate3d(-1%,4%,0) skewX(-3deg)}73%{transform:translate3d(10%,1%,0) skewX(8deg)}}
@keyframes ouSlice2{0%,100%{transform:translate3d(5%,0,0) scaleX(1.02)}25%{transform:translate3d(-8%,3%,0) scaleX(1.1)}52%{transform:translate3d(12%,-2%,0) scaleX(.96)}79%{transform:translate3d(-3%,1%,0) scaleX(1.06)}}
@keyframes ouSlice3{0%,100%{transform:translate3d(-2%,1%,0) rotate(.2deg)}33%{transform:translate3d(9%,-4%,0) rotate(-1deg)}61%{transform:translate3d(-7%,2%,0) rotate(.8deg)}82%{transform:translate3d(4%,4%,0) rotate(-.5deg)}}
@keyframes ouEcho{0%{opacity:.07;transform:scale(1) rotate(14deg)}100%{opacity:.16;transform:scale(1.18) rotate(20deg)}}
/* B32 — entering ARTIFACTS from above performs a single viewport lock, not continuous scroll hijacking. */
.h-projects.artifact-vertical-lock::after{content:"";position:absolute;inset:0;z-index:90;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(123,248,238,.10),transparent 34%);mix-blend-mode:screen;animation:artifactBoundaryLock .62s ease-out both}
.h-projects.artifact-vertical-lock .artifact-coordinate.active{animation:artifactCoordLock .58s ease-out both}
@keyframes artifactBoundaryLock{0%{opacity:0}26%{opacity:.8}100%{opacity:0}}
@keyframes artifactCoordLock{0%{transform:scale(.86);text-shadow:none}48%{transform:scale(1.32);text-shadow:0 0 17px rgba(118,246,237,.72)}100%{transform:scale(1)}}
@media(max-width:760px){
.artifact-intro-core{width:min(92vw,720px);padding:24px 16px}.artifact-intro-title{font-size:clamp(38px,12vw,66px)}
.oneunion-copy{margin:0 auto;width:min(88vw,620px);padding:23px 20px}.ou-logo-main{width:94vw;left:3vw;height:42vh;top:23vh}.ou-logo-slice{left:0;width:100vw;background-size:94vw auto}
}
/* B35 — brighter artifact environments, clearer portal hierarchy, Idolized gallery above copy, bottom contact composition. */
/* Portal: ARTIFACTS is the public title; auxiliary transmissions is the descriptor. */
.h-projects > .label{display:none !important}
.artifact-intro-core{
transform:translateY(6vh);
width:min(980px,88vw) !important;
}
.artifact-intro-kicker{
margin:0 0 clamp(16px,2.3vh,28px) !important;
font:500 clamp(10px,.92vw,13px)/1 ui-monospace,SFMono-Regular,Menlo,monospace !important;
letter-spacing:.42em !important;
color:rgba(174,246,239,.72) !important;
}
.artifact-intro-title{
font:500 clamp(72px,11vw,164px)/.82 Arial,sans-serif !important;
letter-spacing:-.065em !important;
color:rgba(248,252,251,.98) !important;
text-shadow:0 8px 54px rgba(0,0,0,.68),0 0 26px rgba(92,237,228,.07) !important;
}
.artifact-intro-desc{
margin-top:clamp(22px,3.2vh,38px) !important;
color:rgba(226,249,246,.70) !important;
}
.artifact-intro-hint{
margin-top:clamp(30px,4.8vh,58px) !important;
color:rgba(220,250,248,.64) !important;
font-size:clamp(9px,.84vw,12px) !important;
}
/* One Union: keep the xeno corruption, but let the logo actually read. */
.h-slide.oneunion-slide::before{
background:
radial-gradient(circle at 52% 46%,rgba(73,239,225,.13),transparent 31%),
radial-gradient(circle at 76% 68%,rgba(221,243,59,.10),transparent 24%),
linear-gradient(125deg,#020405 0%,#0a181a 48%,#020405 100%) !important;
}
.ou-logo-main{
opacity:.56 !important;
filter:saturate(1.5) contrast(1.24) brightness(.93) hue-rotate(8deg) !important;
}
.ou-logo-slice{opacity:.34 !important}
.ou-logo-echo{opacity:.18 !important;filter:blur(5px) saturate(2.6) contrast(1.55) brightness(.92) !important}
.ou-scanfield{opacity:.10 !important}
.oneunion-copy{
background:linear-gradient(135deg,rgba(1,5,6,.82),rgba(1,5,6,.55)) !important;
border-color:rgba(194,238,241,.24) !important;
}
/* Reviews: retain the alien abstraction while surfacing much more image detail. */
.h-slide.review-slide::before{
filter:blur(10px) saturate(2.35) contrast(1.52) brightness(.48) hue-rotate(143deg) !important;
opacity:1 !important;
background-image:
radial-gradient(circle at 18% 20%,rgba(91,255,239,.12),transparent 25%),
radial-gradient(circle at 82% 72%,rgba(255,74,45,.08),transparent 23%),
linear-gradient(112deg,rgba(0,0,0,.38),rgba(1,6,7,.12) 48%,rgba(0,0,0,.42)),
var(--review-art) !important;
}
.h-slide.review-slide::after{
opacity:.27 !important;
filter:blur(1.2px) hue-rotate(-31deg) saturate(2.65) contrast(1.65) brightness(.98) !important;
}
.review-visual .rv-a{opacity:.27 !important;filter:blur(3px) hue-rotate(176deg) saturate(2.7) contrast(1.8) brightness(1.08) !important}
.review-visual .rv-b{opacity:.22 !important;filter:blur(2px) hue-rotate(-58deg) saturate(2.6) contrast(1.65) brightness(1.02) !important}
.review-visual .rv-c{opacity:.24 !important;filter:blur(6px) grayscale(.08) hue-rotate(98deg) saturate(2.1) contrast(1.8) brightness(.82) !important}
.review-copy{
background:linear-gradient(135deg,rgba(1,4,5,.68),rgba(1,4,5,.38)) !important;
border:1px solid rgba(194,238,241,.18) !important;
padding:clamp(20px,2.5vw,32px) !important;
backdrop-filter:blur(4px) !important;
}
/* Idolized Designs: images own the upper field; copy is entirely below them. */
.h-slide.idolized-slide{display:block !important;padding:0 !important}
.idolized-gallery{
position:absolute !important;
left:2vw !important;
right:2vw !important;
top:3.5vh !important;
height:68vh !important;
z-index:5 !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,minmax(0,1fr)) !important;
gap:clamp(10px,1.25vw,22px) !important;
opacity:1 !important;
overflow:hidden !important;
}
.idolized-float{
position:relative !important;
inset:auto !important;
left:auto !important;
top:auto !important;
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
transform:none !important;
margin:0 !important;
border-radius:clamp(12px,1.25vw,20px) !important;
background-size:cover !important;
background-position:center center !important;
opacity:1 !important;
box-shadow:0 16px 46px rgba(0,0,0,.30),0 0 0 1px rgba(245,248,247,.14) !important;
animation:none !important;
display:block !important;
}
.idolized-float:nth-child(n+7){display:none !important}
.idolized-copy{
position:absolute !important;
left:3vw !important;
bottom:5.5vh !important;
width:min(650px,58vw) !important;
max-width:min(650px,58vw) !important;
padding:18px 22px 20px !important;
margin:0 !important;
background:linear-gradient(145deg,rgba(1,4,5,.82),rgba(1,4,5,.58)) !important;
border:1px solid rgba(218,244,242,.15) !important;
backdrop-filter:blur(5px) !important;
box-shadow:0 16px 46px rgba(0,0,0,.34) !important;
border-radius:16px !important;
z-index:8 !important;
}
.idolized-copy h3{font-size:clamp(28px,3vw,46px) !important;margin-bottom:.65rem !important}
.idolized-copy p{font-size:clamp(12px,.9vw,14px) !important;line-height:1.58 !important;max-width:52em !important}
.idolized-social-creature{
top:auto !important;
right:3vw !important;
bottom:5.2vh !important;
width:clamp(76px,7vw,104px) !important;
transform:none !important;
animation:none !important;
z-index:10 !important;
}
.idolized-social-creature .idol-creature-body{
transform-origin:50% 62%;
animation:idolizedFooterCreature 5.4s cubic-bezier(.42,.02,.28,1) infinite !important;
}
.idolized-photo-source{
right:calc(3vw + 118px) !important;
bottom:5.3vh !important;
z-index:10 !important;
}
@keyframes idolizedFooterCreature{
0%,100%{transform:translate3d(0,2px,0) rotate(-1deg) scale(1)}
24%{transform:translate3d(-5px,-6px,0) rotate(1deg) scale(1.025)}
52%{transform:translate3d(5px,-12px,0) rotate(-.6deg) scale(1.04)}
76%{transform:translate3d(2px,-4px,0) rotate(1.4deg) scale(1.015)}
}
/* Final page footer: clear text left, living social organisms centered. */
.about{
padding-bottom:0 !important;
min-height:100svh !important;
}
.contact-footer{
width:100vw;
box-sizing:border-box;
margin-top:clamp(6vh,9vh,110px);
padding:clamp(24px,4vh,44px) clamp(24px,4vw,70px) clamp(28px,4.5vh,54px);
display:grid;
grid-template-columns:minmax(300px,1fr) minmax(560px,1.8fr) minmax(300px,1fr);
align-items:end;
gap:clamp(20px,2vw,36px);
background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.72) 24%,rgba(0,0,0,.88));
border-top:1px solid rgba(196,239,241,.10);
backdrop-filter:blur(5px);
position:relative;
}
.contact-copy{
grid-column:1;
align-self:center;
padding:18px 20px;
background:rgba(0,0,0,.64);
border:1px solid rgba(198,241,246,.14);
border-radius:14px;
box-shadow:0 16px 44px rgba(0,0,0,.28);
}
.contact-footer .vessel-identification,
.contact-footer .interstellar-contact{
width:auto !important;
margin:0 !important;
text-align:left !important;
color:rgba(246,249,248,.94) !important;
text-shadow:0 2px 12px rgba(0,0,0,.88) !important;
letter-spacing:.07em !important;
}
.contact-footer .vessel-identification{
font-size:clamp(11px,.95vw,14px) !important;
font-weight:600 !important;
margin-bottom:.85rem !important;
}
.contact-footer .interstellar-contact{
font-size:clamp(10px,.85vw,13px) !important;
color:rgba(231,242,240,.86) !important;
}
.contact-footer .interstellar-contact a{color:rgba(165,248,244,.98) !important}
.contact-footer .socials{
grid-column:2;
width:100% !important;
margin:0 auto !important;
justify-content:center !important;
align-items:flex-end !important;
gap:clamp(0px,.6vw,12px) !important;
}
.contact-footer .social-creature{
min-width:84px !important;
max-width:142px !important;
flex:0 1 19% !important;
}
.contact-balance{grid-column:3}
@media(max-width:1000px){
.artifact-intro-core{transform:translateY(3vh)}
.artifact-intro-title{font-size:clamp(58px,13vw,110px) !important}
.idolized-gallery{left:2vw !important;right:2vw !important;height:64vh !important;grid-template-columns:repeat(2,1fr) !important;grid-template-rows:repeat(3,1fr) !important}
.idolized-copy{width:min(64vw,600px) !important;max-width:min(64vw,600px) !important}
.contact-footer{grid-template-columns:1fr;justify-items:center;text-align:center}
.contact-copy,.contact-footer .socials,.contact-balance{grid-column:1}
.contact-copy{width:min(760px,90vw);box-sizing:border-box}
.contact-footer .vessel-identification,.contact-footer .interstellar-contact{text-align:left !important}
.contact-footer .socials{width:min(820px,94vw) !important}
.contact-balance{display:none}
}
@media(max-width:640px){
.artifact-intro-core{transform:translateY(1vh)}
.artifact-intro-title{font-size:clamp(50px,15vw,78px) !important}
.artifact-intro-desc{font-size:10px !important}
.idolized-gallery{height:61vh !important;gap:8px !important}
.idolized-copy{left:16px !important;right:16px !important;width:auto !important;max-width:none !important;bottom:13vh !important}
.idolized-social-creature{right:18px !important;bottom:3vh !important;width:70px !important}
.idolized-photo-source{right:104px !important;bottom:3.4vh !important}
.contact-footer{padding-left:16px;padding-right:16px}
.contact-copy{width:100%}
.contact-footer .social-creature{min-width:62px !important;max-width:100px !important}
}
/* B36 — portal hierarchy correction, balanced artifact brightness, stacked page footer. */
/* ARTIFACTS is the section title at the top; AUXILIARY TRANSMISSIONS remains the smaller descriptor. */
.artifact-intro-slide{position:relative !important}
.artifact-intro-title{
position:absolute !important;
top:clamp(26px,4.2vh,50px) !important;
left:clamp(28px,5vw,78px) !important;
margin:0 !important;
font:600 clamp(18px,1.75vw,28px)/1 ui-monospace,SFMono-Regular,Menlo,monospace !important;
letter-spacing:.34em !important;
color:rgba(244,251,250,.94) !important;
text-shadow:0 3px 22px rgba(0,0,0,.64),0 0 15px rgba(95,239,232,.08) !important;
z-index:18 !important;
}
.artifact-intro-core{
transform:translateY(5.5vh) !important;
width:min(840px,86vw) !important;
}
.artifact-intro-kicker{
margin:0 0 clamp(18px,2.4vh,28px) !important;
font:500 clamp(10px,.92vw,13px)/1 ui-monospace,SFMono-Regular,Menlo,monospace !important;
letter-spacing:.42em !important;
color:rgba(174,246,239,.76) !important;
}
.artifact-intro-desc{margin-top:0 !important}
.artifact-intro-hint{margin-top:clamp(34px,5vh,58px) !important}
/* One Union: step brightness back down from B35, keeping readable xeno structure. */
.h-slide.oneunion-slide::before{
background:
radial-gradient(circle at 52% 46%,rgba(73,239,225,.08),transparent 30%),
radial-gradient(circle at 76% 68%,rgba(221,243,59,.055),transparent 23%),
linear-gradient(125deg,#010304 0%,#091214 48%,#010203 100%) !important;
}
.ou-logo-main{
opacity:.39 !important;
filter:saturate(1.45) contrast(1.34) brightness(.72) hue-rotate(8deg) !important;
}
.ou-logo-slice{opacity:.25 !important}
.ou-logo-echo{opacity:.11 !important;filter:blur(6px) saturate(2.45) contrast(1.65) brightness(.72) !important}
.ou-scanfield{opacity:.08 !important}
.oneunion-copy{
position:absolute !important;
left:clamp(28px,5vw,76px) !important;
bottom:clamp(42px,6vh,72px) !important;
margin:0 !important;
width:min(650px,58vw) !important;
max-width:min(650px,58vw) !important;
padding:20px 24px 22px !important;
background:linear-gradient(135deg,rgba(1,5,6,.84),rgba(1,5,6,.56)) !important;
border-color:rgba(194,238,241,.20) !important;
z-index:12 !important;
}
/* Reviews: expose noticeably more of the article imagery, especially the first Igloo world. */
.h-slide.review-slide::before{
filter:blur(6px) saturate(2.15) contrast(1.40) brightness(.66) hue-rotate(139deg) !important;
opacity:1 !important;
background-image:
radial-gradient(circle at 18% 20%,rgba(91,255,239,.09),transparent 25%),
radial-gradient(circle at 82% 72%,rgba(255,74,45,.055),transparent 23%),
linear-gradient(112deg,rgba(0,0,0,.22),rgba(1,6,7,.035) 48%,rgba(0,0,0,.24)),
var(--review-art) !important;
}
.h-slide.review-slide::after{
opacity:.35 !important;
filter:blur(.7px) hue-rotate(-28deg) saturate(2.35) contrast(1.48) brightness(1.16) !important;
}
.review-visual .rv-a{opacity:.32 !important;filter:blur(2px) hue-rotate(176deg) saturate(2.45) contrast(1.65) brightness(1.22) !important}
.review-visual .rv-b{opacity:.27 !important;filter:blur(1.4px) hue-rotate(-58deg) saturate(2.35) contrast(1.55) brightness(1.18) !important}
.review-visual .rv-c{opacity:.28 !important;filter:blur(4px) grayscale(.04) hue-rotate(98deg) saturate(2) contrast(1.65) brightness(1.00) !important}
.review-copy{
background:linear-gradient(135deg,rgba(1,4,5,.72),rgba(1,4,5,.42)) !important;
border-color:rgba(194,238,241,.21) !important;
}
/* First Igloo card gets an extra lift because its source image is substantially darker. */
.h-slide.review-slide[data-review="01"]::before{
filter:blur(5px) saturate(2.10) contrast(1.32) brightness(.78) hue-rotate(137deg) !important;
}
.h-slide.review-slide[data-review="01"]::after{opacity:.41 !important;filter:blur(.55px) hue-rotate(-24deg) saturate(2.2) contrast(1.42) brightness(1.30) !important}
/* True bottom footer: organisms centered; vessel/contact copy directly beneath them. */
.about{
min-height:100svh !important;
padding-bottom:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
.contact-footer{
width:100vw !important;
box-sizing:border-box !important;
margin-top:auto !important;
padding:clamp(22px,3vh,36px) clamp(18px,4vw,62px) clamp(28px,4.5vh,52px) !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-end !important;
gap:clamp(14px,2vh,22px) !important;
background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.72) 28%,rgba(0,0,0,.90)) !important;
border-top:1px solid rgba(196,239,241,.10) !important;
backdrop-filter:blur(5px) !important;
}
.contact-footer .socials{
order:1 !important;
width:min(850px,92vw) !important;
margin:0 auto !important;
justify-content:center !important;
align-items:flex-end !important;
gap:clamp(0px,.75vw,14px) !important;
}
.contact-footer .social-creature{
min-width:78px !important;
max-width:138px !important;
flex:0 1 19% !important;
}
.contact-copy{
order:2 !important;
width:min(920px,92vw) !important;
box-sizing:border-box !important;
margin:0 auto !important;
padding:16px 20px 18px !important;
text-align:center !important;
background:rgba(0,0,0,.72) !important;
border:1px solid rgba(198,241,246,.15) !important;
border-radius:14px !important;
box-shadow:0 16px 44px rgba(0,0,0,.30) !important;
}
.contact-footer .vessel-identification,
.contact-footer .interstellar-contact{
width:auto !important;
margin:0 !important;
text-align:center !important;
color:rgba(246,249,248,.96) !important;
text-shadow:0 2px 13px rgba(0,0,0,.92) !important;
letter-spacing:.06em !important;
}
.contact-footer .vessel-identification{
font-size:clamp(11px,.95vw,14px) !important;
font-weight:600 !important;
margin-bottom:.72rem !important;
}
.contact-footer .interstellar-contact{
font-size:clamp(10px,.86vw,13px) !important;
color:rgba(232,242,241,.90) !important;
}
.contact-footer .interstellar-contact a{color:rgba(164,249,244,.99) !important}
.contact-balance{display:none !important}
@media(max-width:760px){
.artifact-intro-title{top:26px !important;left:24px !important;font-size:clamp(15px,4vw,20px) !important}
.artifact-intro-core{transform:translateY(3vh) !important}
.oneunion-copy{left:16px !important;right:16px !important;width:auto !important;max-width:none !important;bottom:12vh !important}
.contact-footer .socials{width:min(96vw,700px) !important}
.contact-footer .social-creature{min-width:58px !important;max-width:96px !important}
.contact-copy{width:94vw !important;padding:15px 15px 17px !important}
}