/* DJ Mehmetcan — Sonic Gallery redesign */
:root{--ink:#070915;--ink-soft:#11172c;--paper:#f4f0e8;--ice:#e9f9ff;--acid:#d8ff45;--coral:#ff735e;--electric:#62e5ff;--violet:#8f7dff;--line:rgba(232,246,255,.18)}
html{background:var(--ink)}body{background:var(--ink);color:var(--ice);font-weight:600}body:before{background:radial-gradient(circle at 3% 33%,rgba(143,125,255,.2),transparent 23%),radial-gradient(circle at 96% 72%,rgba(255,115,94,.14),transparent 25%),#070915}body:after{opacity:.1;background-image:radial-gradient(rgba(255,255,255,.65) .55px,transparent .75px);background-size:7px 7px;mask-image:linear-gradient(to bottom,black,transparent 82%)}.noise{opacity:.045}
.site-header{position:absolute;inset:16px 24px auto;height:64px;padding:0 22px;border:1px solid rgba(233,249,255,.24);border-radius:18px;background:rgba(5,8,20,.52);backdrop-filter:blur(18px);box-shadow:0 14px 42px rgba(0,0,0,.22)}.site-header:after{display:none}.brand{font-weight:800;letter-spacing:.17em}.brand img{width:39px;height:39px;border-color:rgba(216,255,69,.8);box-shadow:0 0 20px rgba(216,255,69,.2)}nav{gap:22px}nav a{font-size:9px;letter-spacing:.17em}nav a:after{bottom:-7px;background:var(--acid)}.header-social{padding-left:14px;border-left-color:rgba(233,249,255,.18)}.header-social a{border-color:rgba(233,249,255,.2);background:rgba(255,255,255,.04);box-shadow:none}.header-social a:hover{color:var(--acid);border-color:var(--acid);box-shadow:0 0 18px rgba(216,255,69,.28)}
.hero{height:min(860px,96vh);min-height:680px;padding:150px clamp(26px,11vw,190px) 118px;isolation:isolate;overflow:hidden}.hero-art{background:linear-gradient(90deg,rgba(4,7,17,.97) 0%,rgba(4,7,17,.88) 33%,rgba(4,7,17,.22) 70%),url('assets/hero-kinetic-vinyl-v4.png') center/cover!important;filter:saturate(1.02) contrast(1.04)}.hero:before{content:"";position:absolute;z-index:-1;width:66vw;height:66vw;right:-25vw;top:-36vw;border-radius:50%;border:1px solid rgba(216,255,69,.24);box-shadow:0 0 0 34px rgba(98,229,255,.035),0 0 0 68px rgba(255,115,94,.025);animation:orbit-drift 19s ease-in-out infinite}.hero:after{content:"";position:absolute;inset:auto 0 0;height:20%;z-index:-1;background:linear-gradient(transparent,rgba(4,7,17,.4));pointer-events:none}.hero-copy{max-width:730px;padding:28px 32px 26px;border-left:0;background:linear-gradient(115deg,rgba(10,15,32,.6),rgba(10,15,32,.1));backdrop-filter:blur(4px);clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}.eyebrow{color:var(--acid);margin-bottom:21px;font-size:9px;letter-spacing:.24em;text-shadow:none}.eyebrow span{height:8px;width:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 15px var(--coral)}h1,h2{letter-spacing:-.08em}h1{max-width:630px;font-size:clamp(48px,6.2vw,100px);line-height:.83;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ice);text-shadow:0 5px 35px rgba(0,0,0,.34)}h1>span{margin-right:.17em}h1 em,h2 em{color:var(--acid);text-shadow:0 0 23px rgba(216,255,69,.25)}.intro{max-width:420px;margin:25px 0;color:#d2dce7;font-size:15px;line-height:1.72}.button{padding:15px 17px;border-radius:999px;font-size:9px;letter-spacing:.14em}.button-primary{background:var(--acid);color:#0a1020;box-shadow:0 7px 26px rgba(216,255,69,.18)}.button-primary:hover{box-shadow:0 12px 32px rgba(216,255,69,.31)}.button-ghost{background:rgba(233,249,255,.07);border-color:rgba(233,249,255,.4);backdrop-filter:blur(14px)}.hero-meta{left:clamp(24px,5vw,84px);bottom:73px;gap:8px}.hero-meta span{padding:6px 10px;border-radius:999px;border-color:rgba(233,249,255,.17);background:rgba(4,7,17,.44);color:#bfccdc}.hero-meta span:first-child{color:var(--acid);border-color:rgba(216,255,69,.5)}.scroll-cue{right:clamp(26px,5vw,84px);bottom:76px;color:var(--ice)}.scroll-cue b{color:var(--acid)}.hero-loop{position:absolute;z-index:1;left:0;right:0;bottom:0;overflow:hidden;height:43px;border-top:1px solid rgba(233,249,255,.17);border-bottom:1px solid rgba(233,249,255,.12);background:rgba(7,9,21,.7);backdrop-filter:blur(12px);pointer-events:none}.hero-loop div{width:max-content;white-space:nowrap;padding:12px 0;color:var(--ice);font:700 9px 'DM Mono',monospace;letter-spacing:.22em;animation:sonic-marquee 27s linear infinite}.hero-loop b{color:var(--acid);font-weight:500;padding:0 19px}
.section,.clips,.statement{padding:clamp(86px,10vw,155px) clamp(24px,8vw,132px)}.platforms{display:block;position:relative;overflow:hidden;background:linear-gradient(145deg,#111633,#090b1a)}.platforms:before{content:"";position:absolute;width:64vw;height:64vw;left:-32vw;bottom:-45vw;border-radius:50%;background:conic-gradient(from 45deg,transparent,var(--violet),transparent,var(--coral),transparent);opacity:.22;filter:blur(24px);animation:orbit-drift 18s ease-in-out infinite reverse}.platforms .section-heading{position:relative;z-index:1;display:grid;grid-template-columns:minmax(250px,.75fr) minmax(300px,1.35fr);column-gap:10vw;align-items:end;margin-bottom:48px}.platforms .section-heading .eyebrow{grid-column:1/-1}.platforms h2{max-width:480px;color:#fff;font-size:clamp(54px,6.3vw,102px);line-height:.78}.section-heading>p:last-child{align-self:end;margin:0 0 8px;max-width:360px;color:#bac9d9}.platform-groups{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .95fr;gap:18px}.platform-group{padding:20px;border:1px solid rgba(233,249,255,.16);border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.06)}.platform-group-label{margin-bottom:17px;padding:0;color:var(--ice);font-size:9px;letter-spacing:.22em}.platform-group-label:before{width:9px;height:9px;background:var(--acid);box-shadow:0 0 15px var(--acid)}.platform-group:nth-child(2) .platform-group-label:before{background:var(--coral);box-shadow:0 0 15px var(--coral)}.platform-grid{gap:10px;background:transparent;border:0}.music-platform-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.social-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.platform-card,.platform-card.featured{min-height:152px;padding:17px 15px;border:1px solid rgba(233,249,255,.12);border-radius:18px;background:rgba(4,8,20,.54);box-shadow:none;transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease,border-color .22s,background .22s,box-shadow .22s}.platform-card:before{width:130px;height:130px;top:-76px;right:-62px;background:radial-gradient(circle,rgba(98,229,255,.28),transparent 67%)}.platform-card:hover,.platform-card.featured:hover{color:#fff;transform:perspective(700px) translateY(-7px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:rgba(233,249,255,.6);background:rgba(21,29,59,.82);box-shadow:0 15px 28px rgba(0,0,0,.24)}.platform-symbol{width:43px;height:43px;border-color:currentColor;background:rgba(2,5,14,.5);box-shadow:0 0 19px currentColor}.platform-name{margin-top:10px;font-size:15px;font-weight:800}.platform-card small{font-size:9px;color:#b9c8db}.arrow{color:var(--acid)}
.music{position:relative;overflow:hidden;background:var(--paper);color:#11172a}.music:before{content:"";position:absolute;right:-10vw;top:-21vw;width:54vw;height:54vw;border:2px solid rgba(17,23,42,.12);border-radius:50%;box-shadow:0 0 0 27px rgba(17,23,42,.035),0 0 0 54px rgba(17,23,42,.025)}.music:after{content:"MUSIC / VISUALS / MOVEMENT";bottom:24px;color:rgba(17,23,42,.26);font-weight:800}.music .eyebrow{color:#24324c;text-shadow:none}.music .eyebrow span{background:var(--coral);box-shadow:0 0 12px var(--coral)}.music h2{color:#10182b;font-size:clamp(62px,7vw,114px);line-height:.78}.music-note{color:#38435a;font-size:15px}.music-grid{position:relative;z-index:1;gap:14px;border:0}.release{min-height:285px;padding:19px;border:1px solid rgba(17,23,42,.22);border-radius:20px;background:#fdfdfd;box-shadow:7px 8px 0 #ccd4df;transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease,box-shadow .2s}.release:hover{transform:perspective(700px) translateY(-7px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));background:#fff;box-shadow:11px 14px 0 #b9c3d2}.release span{color:#49556b;font-weight:800}.release strong{font-size:28px;color:#10182b}.release-player iframe{margin-top:18px;border:1px solid rgba(17,23,42,.2);border-radius:10px;filter:saturate(.95)}
.stream-dock{position:relative;z-index:1;display:grid;grid-template-columns:minmax(225px,.55fr) minmax(330px,1.45fr);align-items:center;gap:22px;max-width:980px;margin:32px 0 36px;padding:13px 17px 13px 21px;border:1px solid #11172a;border-radius:18px;background:#121a31;box-shadow:7px 8px 0 #c4ccd8}.stream-dock-copy{display:flex;flex-direction:column;gap:5px;color:#fff}.stream-dock-copy span{color:var(--acid);font:800 9px 'DM Mono',monospace;letter-spacing:.15em}.stream-dock-copy strong{font-size:25px;letter-spacing:-.06em}.stream-dock-copy a{width:max-content;color:#c9d5e9;text-decoration:none;font:700 9px 'DM Mono',monospace;letter-spacing:.12em}.stream-dock-copy a:hover{color:var(--acid)}.stream-dock-copy b{color:var(--acid);font-size:13px}.stream-dock iframe{display:block;border:0;border-radius:12px}@media(max-width:700px){.stream-dock{grid-template-columns:1fr;gap:12px;padding:16px}.stream-dock-copy strong{font-size:23px}}
.clips{position:relative;overflow:hidden;background:linear-gradient(125deg,#2a1745,#111938 50%,#0a2330)}.clips:before{content:"";position:absolute;inset:18% 6% auto auto;width:22vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--coral),transparent 58%);filter:blur(20px);opacity:.46;animation:pulse-halo 7s ease-in-out infinite}.clips-top{position:relative;z-index:1;margin-bottom:48px}.clips-top p{color:#d4dbf2}.clip-feature{min-height:375px;border-radius:28px;border-color:rgba(233,249,255,.38);background:linear-gradient(105deg,rgba(7,9,21,.88),rgba(7,9,21,.18)),url('assets/hero-kinetic-vinyl-v4.png') center/cover;box-shadow:0 24px 54px rgba(0,0,0,.26);transition:transform .25s ease,box-shadow .25s}.clip-feature:hover{transform:translateY(-5px);box-shadow:0 32px 62px rgba(0,0,0,.33)}.clip-feature:after{width:58px;height:58px;border-color:var(--acid);color:var(--acid);box-shadow:0 0 25px rgba(216,255,69,.26)}.clip-feature span{color:var(--acid)}
.statement{background:var(--acid);color:#0b1123}.statement .eyebrow{color:#253052;text-shadow:none}.statement .eyebrow span{background:#273cda;box-shadow:none}.statement-grid{grid-template-columns:minmax(0,1.1fr) minmax(250px,.55fr) minmax(200px,.7fr);gap:clamp(28px,4.5vw,82px)}.statement h2{color:#0b1123;font-size:clamp(54px,6vw,98px)}.statement h2 em{color:#273cda;text-shadow:none}.statement-grid>div{color:#132142}.statement-grid>div:before{color:#273cda}.signature-art{border-color:#101a36;box-shadow:10px 12px 0 rgba(16,26,54,.84),0 0 0 4px rgba(255,255,255,.38);transform:rotate(2.3deg)}.signature-art:before{border-color:#273cda}.signature-art figcaption{background:#101a36;color:var(--acid);border-color:#101a36}
.contact{background:linear-gradient(125deg,#ff765f,#f4478d 56%,#8e7dff);color:#101127}.contact .eyebrow{color:#101127;text-shadow:none}.contact .eyebrow span{background:#101127;box-shadow:none}.contact h2{color:#101127;font-size:clamp(54px,6.4vw,104px)}.contact h2 em{color:#fff;text-shadow:none}.contact-link{border-color:#101127;color:#101127}.contact-link span{color:#101127;text-shadow:none}.contact-note{color:#2c163d}footer{border:0;background:#070915;color:#aebbd1}
.statement-grid{grid-template-columns:minmax(0,.78fr) minmax(250px,.55fr) minmax(340px,.92fr);align-items:start}.statement h2{padding-top:8px}.statement-grid>div{max-width:480px;font-size:16px;line-height:1.72}.statement-grid>div p{margin:0 0 17px}.statement-grid>div p:last-child{margin-bottom:0}
.motion-ready .rise-in{opacity:0;transform:translateY(24px)}.motion-ready .rise-in.is-visible{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.25,1)}
@keyframes sonic-marquee{to{transform:translateX(-35%)}}@keyframes orbit-drift{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-3vw,3vw,0) rotate(18deg)}}@keyframes pulse-halo{0%,100%{transform:scale(.88);opacity:.28}50%{transform:scale(1.12);opacity:.54}}
@media(max-width:1100px){.platforms .section-heading{grid-template-columns:1fr;gap:20px}.platform-groups{grid-template-columns:1fr}.social-platform-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.statement-grid{grid-template-columns:1fr minmax(250px,320px)}.statement-grid>div{grid-column:1/-1}}@media(max-width:800px){.site-header{inset:10px 12px auto;height:58px;padding:0 14px;border-radius:14px}.brand{font-size:8px}.brand img{width:34px;height:34px}.header-social{display:none}.hero{min-height:700px;height:100svh;padding:126px 24px 90px}.hero-copy{padding:22px 18px;clip-path:none;background:rgba(7,9,21,.5)}h1{font-size:clamp(46px,13vw,67px)}.hero-meta{bottom:61px}.hero-meta span:nth-child(2){display:inline-flex}.scroll-cue{display:none}.hero-loop{height:37px}.hero-loop div{padding:10px 0}.music-grid{gap:17px}.release{min-height:250px}.social-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.statement-grid{grid-template-columns:1fr}.statement-grid>div{grid-column:auto}.signature-art{width:min(320px,85vw)}.section,.clips,.statement{padding-block:75px}}@media(prefers-reduced-motion:reduce){.hero:before,.platforms:before,.clips:before,.hero-loop div{animation:none}.motion-ready .rise-in{opacity:1;transform:none}}
