:root{color-scheme:dark;--acid:#c8ff39;--pink:#ff3ca6;--blue:#6547ff;--ink:#f7f6ff;--dark:#08070b}
*{box-sizing:border-box}
html{background:var(--dark)}
body{position:relative;min-width:320px;margin:0;overflow-x:hidden;color:var(--ink);background:radial-gradient(circle at 50% -15%,#342370 0,transparent 42rem),linear-gradient(155deg,#07060a 0,#100817 55%,#050a0b 100%);font:16px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:var(--acid);text-underline-offset:4px}
.site-header,main,footer{position:relative;z-index:2;width:min(100% - 2rem,1050px);margin:auto}
.site-header{display:flex;justify-content:space-between;padding:1.25rem 0;border-bottom:1px solid #5c4772;color:#c2b8ce;font-size:.76rem;letter-spacing:.12em}
.liquid{position:fixed;z-index:0;width:28rem;height:35rem;border-radius:42% 58% 70% 30%/52% 37% 63% 48%;opacity:.19;filter:blur(24px);pointer-events:none}
.liquid-one{top:8rem;right:-12rem;background:var(--pink);animation:slosh 14s ease-in-out infinite alternate}
.liquid-two{bottom:-14rem;left:-10rem;background:var(--blue);animation:slosh 18s ease-in-out infinite alternate-reverse}
.intro{padding:clamp(4rem,10vw,8rem) 0 5rem}
.eyebrow,.specimen{margin:0;color:var(--acid);font-size:.73rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.intro h1{position:relative;width:max-content;max-width:100%;margin:.05em 0;font:950 clamp(4rem,16vw,10rem)/.78 system-ui,sans-serif;letter-spacing:-.09em;text-transform:uppercase;transform:skew(-5deg) rotate(-1deg);text-shadow:7px 8px 0 var(--blue),-4px -3px 0 var(--pink);animation:wobble 7s ease-in-out infinite alternate}
.intro h1 span{display:inline-block;transform:translateY(.1em) scaleY(1.16)}
.intro h1::after{position:absolute;top:83%;left:10%;width:18%;height:1.2em;border-radius:0 0 60% 35%;background:var(--pink);content:"";filter:blur(1px);transform:skew(12deg);z-index:-1}
.intro>p:last-child{max-width:670px;margin:2.2rem 0 0;color:#d1c8d8;font-size:clamp(1rem,2.3vw,1.3rem)}
.video-grid{display:grid;gap:clamp(4rem,9vw,7rem)}
.video-card{position:relative;padding:clamp(.8rem,2.5vw,1.4rem);background:linear-gradient(135deg,#25142e,#15121c 58%,#152226);filter:drop-shadow(1.2rem 1.5rem 1.2rem rgba(0,0,0,.45));isolation:isolate}
.video-card::before,.video-card::after{position:absolute;z-index:-1;background:inherit;content:""}
.video-card::before{inset:-.7rem -.9rem .35rem -.55rem;clip-path:polygon(2% 3%,18% 0,34% 4%,52% 1%,70% 5%,86% 0,100% 4%,98% 87%,91% 91%,86% 100%,79% 91%,68% 96%,57% 90%,42% 97%,30% 91%,18% 99%,3% 93%)}
.video-card::after{right:13%;bottom:-2.3rem;width:12%;height:3.4rem;border-radius:0 0 55% 55%;transform:skew(-8deg)}
.ooze-left{transform:rotate(-1.15deg) skewX(-.55deg)}
.ooze-right{transform:rotate(1deg) skewX(.45deg)}
.ooze-right::after{right:auto;left:18%;height:2.6rem}
.embed{position:relative;overflow:hidden;background:#000;clip-path:polygon(.5% 2%,20% .2%,41% 1.5%,62% 0,81% 1.3%,99.5% .5%,99% 98%,80% 99.5%,60% 98.5%,40% 100%,19% 98%,0 99%)}
.embed.landscape{aspect-ratio:16/9}
.embed.portrait{width:min(100%,430px);margin:auto;aspect-ratio:9/16}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.card-copy{padding:clamp(1.2rem,4vw,2.4rem) clamp(.4rem,2vw,1.4rem) .8rem}
.card-copy h2{margin:.12em 0 .25em;font:850 clamp(1.8rem,6vw,4rem)/.98 system-ui,sans-serif;letter-spacing:-.055em}
.card-copy p:not(.specimen){color:#c8bdcf}
.short-card{width:min(100%,780px)}
.short-card:nth-of-type(even){margin-left:auto}
.more{margin:8rem auto 3rem;padding:1.2rem;border:1px dashed var(--pink);color:#d2c4d8;text-align:center;transform:rotate(-.5deg)}
footer{margin-top:5rem;padding:2rem 0;border-top:1px solid #493853;color:#8e8295;font-size:.78rem}
@keyframes slosh{to{border-radius:65% 35% 38% 62%/31% 66% 34% 69%;transform:translate(2rem,-3rem) rotate(18deg) scale(1.12)}
}
@keyframes wobble{0%{transform:skew(-5deg) rotate(-1deg) scaleY(1)}
45%{transform:skew(-3deg) rotate(.4deg) scaleY(1.035)}
100%{transform:skew(-7deg) rotate(-.25deg) scaleY(.97)}
}
@media(max-width:600px){.site-header{gap:1rem;align-items:flex-start;flex-direction:column}
.intro{padding:4rem 0}
.intro h1{text-shadow:4px 5px 0 var(--blue),-2px -2px 0 var(--pink)}
.video-grid{gap:4rem}
.video-card{transform:none}
.short-card{width:100%}
}
@media(prefers-reduced-motion:reduce){.liquid,.intro h1{animation:none}
}

/* Every text layer gets its own small synthetic distortion. The iframe
   players remain untouched so their controls stay predictable. */
.site-header{transform:skewX(-2deg) rotate(-.2deg)}
.site-header a{display:inline-block;text-shadow:2px 1px 0 var(--blue);transform:rotate(-1deg) scaleY(1.08)}
.site-header span{display:inline-block;text-shadow:-2px 1px 0 var(--pink);transform:rotate(1.2deg) skewX(4deg)}
.eyebrow,.specimen{display:inline-block;text-shadow:2px 2px 0 #263500;transform:skewX(-8deg) rotate(-1deg)}
.intro>p:last-child{letter-spacing:.015em;text-shadow:-1px 1px 0 rgba(255,60,166,.45);transform:skewX(2.4deg) rotate(.35deg);transform-origin:left center;animation:text-slump 9s ease-in-out infinite alternate}
.card-copy h2{width:fit-content;text-shadow:4px 3px 0 rgba(101,71,255,.72),-2px -1px 0 rgba(255,60,166,.68);transform:skewX(-4deg) rotate(-.55deg) scaleY(1.04);transform-origin:left center;animation:title-melt 8s ease-in-out infinite alternate}
.video-card:nth-child(even) .card-copy h2{transform:skewX(5deg) rotate(.65deg) scaleY(.97);animation-direction:alternate-reverse}
.card-copy p:not(.specimen){width:fit-content;transform:skewX(2.5deg) rotate(.35deg)}
.card-copy a{display:inline-block;text-shadow:2px 2px 0 rgba(101,71,255,.85);transform:skewX(-7deg) rotate(-.7deg);transition:transform 150ms ease,text-shadow 150ms ease}
.card-copy a:hover,.card-copy a:focus-visible{outline:none;text-shadow:4px 3px 0 var(--pink);transform:skewX(7deg) rotate(.8deg) scale(1.03)}
.more{text-shadow:3px 2px 0 rgba(101,71,255,.8);transform:rotate(-1.2deg) skewX(-3deg) scaleY(1.06);animation:text-slump 10s ease-in-out infinite alternate-reverse}
footer{letter-spacing:.035em;text-shadow:-2px 1px 0 rgba(255,60,166,.45);transform:skewX(3deg) rotate(.25deg);transform-origin:left center}

@keyframes text-slump{from{transform:skewX(2.4deg) rotate(.35deg) scaleY(1)}to{transform:skewX(-1.5deg) rotate(-.25deg) scaleY(.96)}}
@keyframes title-melt{from{transform:skewX(-4deg) rotate(-.55deg) scaleY(1.04)}to{transform:skewX(-7deg) rotate(.3deg) scaleY(.94)}}

@media(prefers-reduced-motion:reduce){.intro>p:last-child,.card-copy h2,.more{animation:none}}