:root { --dark:#0b0c0c; --white:#efebe4; --amber:#ca8c65; --red-bright:#ff6672; --line:rgba(225,76,90,.46); --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-display:"Arial Narrow","Roboto Condensed","Liberation Sans Narrow",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--dark); color:var(--white); font-family:var(--font-body); }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:2px solid var(--red-bright); outline-offset:4px; }
button { font:inherit; cursor:pointer; }
.container { width:min(1200px,calc(100% - 88px)); margin:auto; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:10px 14px; background:var(--white); color:var(--dark); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow { color:#ee747d; font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:700; }
.hero { height:min(850px,95vh); min-height:650px; position:relative; overflow:hidden; isolation:isolate; }
.hero-picture,.hero-picture img { position:absolute; inset:0; width:100%; height:100%; }
.hero-picture img { object-fit:cover; object-position:center 43%; filter:brightness(.76) contrast(1.11) saturate(.82); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,8,9,.38) 0%,transparent 27%,rgba(6,6,7,.06) 50%,#0b0c0c 99%),linear-gradient(90deg,rgba(7,7,8,.25),transparent 45%,rgba(7,7,8,.22)); pointer-events:none; }
.hero-picture { z-index:-2; }
.header { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding-top:30px; }
.header-logo { width:204px; height:auto; display:block; }
.header-actions { display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav { display:flex; align-items:center; gap:28px; }
.nav a { font:400 13px var(--font-display); letter-spacing:.15em; text-transform:uppercase; transition:color .2s; }
.nav a:hover { color:#f48790; }
.nav a:first-child { color:#fff; }
.header-social { display:flex; align-items:center; gap:9px; }
.social-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(239,235,228,.34); border-radius:50%; color:#fff; background:rgba(9,10,11,.14); transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s; }
.social-icon:hover,.social-icon:focus-visible { background:rgba(225,76,90,.16); border-color:var(--red-bright); color:#fff; box-shadow:0 0 16px rgba(225,76,90,.22); }
.social-icon svg { width:17px; height:17px; fill:currentColor; }
.social-icon:first-child svg { fill:none; stroke:currentColor; stroke-width:1.8; }
.social-icon:first-child .social-icon-dot { fill:currentColor; stroke:none; }
.menu-toggle { display:none; }
.hero-center { position:absolute; top:53%; left:50%; transform:translate(-50%,-50%); width:min(920px,86%); text-align:center; }
.hero-logo-glitch { position:relative; display:block; width:min(740px,100%); margin:0 auto; }
.hero-logo { display:block; width:100%; height:auto; margin:0; filter:drop-shadow(0 4px 20px rgba(0,0,0,.46)); }
.hero-logo-glitch::before,.hero-logo-glitch::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:url("assets/logo-white.png") center/contain no-repeat; }
.hero-logo-glitch::before { filter:drop-shadow(7px 0 rgba(241,65,84,.96)); }
.hero-logo-glitch::after { filter:drop-shadow(-7px 0 rgba(67,201,207,.9)); }
.hero-center p { margin:32px 0 29px; font:500 14px var(--font-display); letter-spacing:.34em; text-transform:uppercase; text-shadow:0 3px 14px #000; }
html.intro-ready .hero-logo { animation:cinematic-logo-intro 650ms cubic-bezier(.22,1,.36,1) 180ms both; }
html.intro-ready .hero-logo-glitch::before { animation:logo-glitch-red 330ms steps(2,end) 840ms 1 both; }
html.intro-ready .hero-logo-glitch::after { animation:logo-glitch-cyan 330ms steps(2,end) 840ms 1 both; }
html.hero-glitch-micro .hero-logo-glitch::before { animation:logo-glitch-micro-red 240ms steps(2,end) 1 both; }
html.hero-glitch-micro .hero-logo-glitch::after { animation:logo-glitch-micro-cyan 240ms steps(2,end) 1 both; }
html.hero-glitch-rgb .hero-logo-glitch::before { animation:logo-glitch-red 380ms steps(2,end) 1 both; }
html.hero-glitch-rgb .hero-logo-glitch::after { animation:logo-glitch-cyan 380ms steps(2,end) 1 both; }
html.hero-glitch-double .hero-logo-glitch::before { animation:logo-glitch-double-red 420ms steps(2,end) 1 both; }
html.hero-glitch-double .hero-logo-glitch::after { animation:logo-glitch-double-cyan 420ms steps(2,end) 1 both; }
html.intro-ready .intro-cta { animation:cinematic-cta-intro 850ms cubic-bezier(.22,1,.36,1) 160ms both; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:51px; padding:0 34px; border:1px solid var(--line); background:linear-gradient(105deg,rgba(37,13,19,.78),rgba(13,13,14,.72)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 0 transparent; color:var(--white); font:600 13px var(--font-display); letter-spacing:.19em; text-transform:uppercase; transition:background .2s,border-color .2s,box-shadow .2s; }
.button:hover,.button:focus-visible { background:linear-gradient(105deg,rgba(113,27,41,.86),rgba(35,15,20,.8)); border-color:var(--red-bright); box-shadow:0 0 22px rgba(225,76,90,.2); }
.button.arrow::after { content:"↗"; font:23px Arial,sans-serif; }
.scroll-note { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); font-size:28px; color:#d8d0c9; opacity:.7; }
.section { position:relative; padding:105px 0; }
.section::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(ellipse at 5% 0%,rgba(225,76,90,.1),transparent 50%); }
#hudba { isolation:isolate; overflow:hidden; background:#0b0c0c url("assets/backgrounds/bg-neony.webp") 78% center/cover no-repeat; }
#hudba::after,.about::before,.contact::before { content:""; position:absolute; inset:-35%; z-index:0; pointer-events:none; opacity:.4; will-change:transform; }
#hudba::after { background:radial-gradient(circle at 24% 54%,rgba(255,63,91,.24),transparent 29%),radial-gradient(circle at 78% 42%,rgba(165,38,82,.16),transparent 40%),linear-gradient(118deg,transparent 35%,rgba(238,98,112,.045) 50%,transparent 67%); animation:ambient-neon 24s ease-in-out infinite alternate; }
.music-layout { position:relative; z-index:1; }
.reveal { --reveal-distance:52px; --reveal-duration:950ms; }
html.reveal-ready .reveal { opacity:0; filter:brightness(1); transition:transform var(--reveal-duration) cubic-bezier(.22,1,.36,1),opacity var(--reveal-duration) cubic-bezier(.22,1,.36,1),filter 700ms ease-out; will-change:transform,opacity; }
html.reveal-ready .reveal-left { transform:translateX(calc(var(--reveal-distance) * -1)); }
html.reveal-ready .reveal-right { transform:translateX(var(--reveal-distance)); }
html.reveal-ready .reveal.is-revealed { opacity:1; transform:translateX(0); will-change:auto; }
.music-layout { display:grid; grid-template-columns:1.14fr 1fr; gap:80px; align-items:center; }
.music-layout { --reveal-duration:950ms; }
html.reveal-ready .music-layout .video,html.reveal-ready .music-layout > div:last-child > * { opacity:0; transform:translateX(-10px); transition:transform 560ms cubic-bezier(.22,1,.36,1),opacity 560ms cubic-bezier(.22,1,.36,1); }
html.reveal-ready .music-layout.is-revealed .video { opacity:1; transform:translateX(0); transition-delay:120ms; }
html.reveal-ready .music-layout.is-revealed > div:last-child > * { opacity:1; transform:translateX(0); transition-delay:160ms; }
html.reveal-ready .music-layout.is-revealed .section-title { animation:neony-glitch-pulse 140ms steps(2,end) 520ms 1 both; }
.video { position:relative; aspect-ratio:16/9; background:#17191a; border:1px solid rgba(225,76,90,.34); overflow:hidden; box-shadow:0 22px 60px #0008,0 0 36px rgba(225,76,90,.08); }
.video img { display:block; width:100%; height:100%; object-fit:cover; }
.play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:66px; height:66px; border:1px solid rgba(255,255,255,.76); border-radius:50%; background:rgba(56,12,20,.76); box-shadow:0 0 22px rgba(225,76,90,.2); color:white; font-size:25px; transition:background-color .2s,border-color .2s,box-shadow .2s; }
.play:hover,.play:focus-visible { background:rgba(140,31,48,.84); border-color:var(--red-bright); box-shadow:0 0 28px rgba(225,76,90,.38); }
.section-title { font:300 clamp(72px,9vw,128px)/.9 var(--font-display); letter-spacing:.09em; text-transform:uppercase; margin:24px 0 22px; }
.description { max-width:445px; color:#c6bdb5; font-size:15px; line-height:1.9; }
.links { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.link-pill { border:1px solid #655650; padding:11px 14px; font-size:12px; white-space:nowrap; transition:border-color .2s; }
.link-pill:hover { border-color:var(--red-bright); }
.platform-links { align-items:center; gap:8px; }
.platform-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:6px 12px; border:1px solid rgba(238,235,230,.68); border-radius:13px; background:#0d1011; color:var(--white); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:background-color 280ms ease,border-color 280ms ease,box-shadow 280ms ease; }
.platform-link:hover,.platform-link:focus-visible { border-color:var(--red-bright); background:#181012; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 18px rgba(255,58,78,.3),0 0 5px rgba(255,111,123,.45); }
.platform-logo { display:block; height:auto; object-fit:contain; }
.spotify-logo { width:80px; }
.tidal-logo { width:96px; }
.platform-link--apple { padding:5px 8px; border-color:rgba(238,235,230,.68); background:#0d1011; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:background-color 240ms ease,border-color 240ms ease,box-shadow 240ms ease; }
.platform-link--apple:hover,.platform-link--apple:focus-visible { border-color:var(--red-bright); background:#181012; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 18px rgba(255,58,78,.3),0 0 5px rgba(255,111,123,.45); }
.apple-music-badge { display:block; width:111px; height:auto; }
.platform-link--deezer { padding:5px 8px; }
.deezer-logo-surface { display:flex; align-items:center; justify-content:center; height:28px; padding:3px 6px; border-radius:5px; background:#fff; }
.deezer-logo { width:79px; }
.about { position:relative; isolation:isolate; overflow:hidden; padding:0; background:#131011 url("assets/backgrounds/bg-o-kapele.webp") 76% center/cover no-repeat; }
.about::before { background:radial-gradient(ellipse at 74% 43%,rgba(236,69,89,.2),transparent 36%),radial-gradient(circle at 22% 82%,rgba(113,23,53,.18),transparent 35%),linear-gradient(150deg,transparent 43%,rgba(255,101,116,.045) 55%,transparent 69%); animation:ambient-amber 28s ease-in-out infinite alternate; }
.about-layout { --reveal-duration:1000ms; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; min-height:570px; }
.about-photo { overflow:hidden; position:relative; }
.about-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:48% 40%; filter:contrast(1.09) saturate(.72) brightness(.75); }
.about-photo::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 57%,#171012 100%),linear-gradient(0deg,rgba(72,8,23,.18),transparent 48%); }
.about-text { padding:90px clamp(45px,6vw,100px) 85px 35px; align-self:center; }
.about-text h2 { font:300 clamp(50px,5.5vw,78px)/1 var(--font-display); letter-spacing:.15em; margin:20px 0 26px; }
.about-text p { color:#c3bbb5; font-size:14px; line-height:1.92; margin:0 0 18px; }
html.reveal-ready .about-layout .about-text > * { opacity:0; transform:translateX(10px); transition:transform 580ms cubic-bezier(.22,1,.36,1),opacity 580ms cubic-bezier(.22,1,.36,1) 150ms; }
html.reveal-ready .about-layout.is-revealed .about-text > * { opacity:1; transform:translateX(0); }
.contact { isolation:isolate; overflow:hidden; padding:100px 0 90px; text-align:center; background:#0b0c0c url("assets/backgrounds/bg-kontakt.webp") center center/cover no-repeat; }
.contact::before { background:radial-gradient(circle at 50% 37%,rgba(240,64,87,.18),transparent 28%),radial-gradient(ellipse at 8% 88%,rgba(122,21,52,.16),transparent 39%),radial-gradient(ellipse at 94% 76%,rgba(198,42,67,.1),transparent 36%); animation:ambient-contact 26s ease-in-out infinite alternate; }
.contact .container { position:relative; z-index:1; }
.contact .reveal { --reveal-duration:900ms; }
.contact h2 { font:300 clamp(65px,8vw,110px)/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; margin:16px 0; }
.contact-sub { color:#b8ada6; font-size:14px; margin-bottom:43px; }
.contact-card { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
html.reveal-ready .contact .reveal > * { opacity:0; transform:translateX(-10px); transition:transform 540ms cubic-bezier(.22,1,.36,1),opacity 540ms cubic-bezier(.22,1,.36,1) 140ms; }
html.reveal-ready .contact .reveal.is-revealed > * { opacity:1; transform:translateX(0); }
.email { padding:12px 3px; border-bottom:1px solid var(--line); color:#fff5f3; font-size:20px; font-weight:600; text-shadow:0 0 18px rgba(225,76,90,.12); transition:border-color .2s,color .2s,text-shadow .2s; }
.email:hover,.email:focus-visible { border-color:var(--red-bright); color:#fff; text-shadow:0 0 20px rgba(225,76,90,.35); }
.copy { border:1px solid var(--line); background:rgba(57,13,22,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); color:#fff1f0; padding:12px 19px; font-size:12px; transition:background-color .2s,border-color .2s,box-shadow .2s; }
.copy:hover,.copy:focus-visible { border-color:var(--red-bright); background:rgba(126,27,44,.5); box-shadow:0 0 18px rgba(225,76,90,.2); }
.social { display:flex; gap:25px; justify-content:center; margin-top:60px; }
.social a { font:600 13px var(--font-display); letter-spacing:.15em; text-transform:uppercase; color:#c9b7b6; transition:color .2s,text-shadow .2s; }
.social a:hover,.social a:focus-visible { color:#fff; text-shadow:0 0 14px rgba(225,76,90,.45); }
.footer { border-top:1px solid rgba(225,76,90,.22); padding:27px 0; }
.footer .container { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer img { width:118px; height:auto; }
.footer small { color:#817873; font-size:11px; }
html.ambient-paused #hudba::after,html.ambient-paused .about::before,html.ambient-paused .contact::before { animation-play-state:paused; }
html.reveal-ready .reveal.is-returning { filter:brightness(1.035); }
@keyframes ambient-neon { from { transform:translate3d(-2%,0,0); } to { transform:translate3d(3%,-2%,0); } }
@keyframes ambient-amber { from { transform:translate3d(2%,1%,0); } to { transform:translate3d(-3%,-2%,0); } }
@keyframes ambient-contact { from { transform:translate3d(-1%,1%,0); } to { transform:translate3d(2%,-2%,0); } }
@keyframes cinematic-logo-intro { from { opacity:.45; filter:brightness(.8) drop-shadow(0 4px 20px rgba(0,0,0,.46)); transform:translateY(12px); } to { opacity:1; filter:brightness(1) drop-shadow(0 4px 20px rgba(0,0,0,.46)); transform:translateY(0); } }
@keyframes cinematic-cta-intro { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes logo-glitch-red { 0%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); } 16% { opacity:.88; transform:translateX(8px); clip-path:inset(7% 0 67% 0); } 34% { opacity:.68; transform:translateX(-7px); clip-path:inset(45% 0 28% 0); } 58% { opacity:.86; transform:translateX(6px); clip-path:inset(70% 0 9% 0); } 78% { opacity:.46; transform:translateX(-4px); clip-path:inset(25% 0 46% 0); } }
@keyframes logo-glitch-cyan { 0%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); } 20% { opacity:.76; transform:translateX(-8px); clip-path:inset(16% 0 60% 0); } 41% { opacity:.62; transform:translateX(7px); clip-path:inset(56% 0 19% 0); } 64% { opacity:.8; transform:translateX(-6px); clip-path:inset(34% 0 40% 0); } 84% { opacity:.42; transform:translateX(4px); clip-path:inset(75% 0 6% 0); } }
@keyframes logo-glitch-micro-red { 0%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); } 34% { opacity:.64; transform:translateX(4px); clip-path:inset(39% 0 42% 0); } 68% { opacity:.46; transform:translateX(-4px); clip-path:inset(71% 0 14% 0); } }
@keyframes logo-glitch-micro-cyan { 0%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); } 34% { opacity:.56; transform:translateX(-4px); clip-path:inset(21% 0 60% 0); } 68% { opacity:.42; transform:translateX(4px); clip-path:inset(64% 0 22% 0); } }
@keyframes logo-glitch-double-red { 0%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); } 14% { opacity:.78; transform:translateX(7px); clip-path:inset(12% 0 62% 0); } 27%,49% { opacity:0; transform:translateX(0); } 63% { opacity:.82; transform:translateX(-7px); clip-path:inset(59% 0 20% 0); } 80% { opacity:.4; transform:translateX(5px); clip-path:inset(31% 0 45% 0); } }
@keyframes logo-glitch-double-cyan { 0%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); } 16% { opacity:.68; transform:translateX(-7px); clip-path:inset(28% 0 48% 0); } 29%,51% { opacity:0; transform:translateX(0); } 66% { opacity:.74; transform:translateX(7px); clip-path:inset(67% 0 11% 0); } 82% { opacity:.38; transform:translateX(-5px); clip-path:inset(8% 0 69% 0); } }
@keyframes neony-glitch-pulse { 0%,100% { text-shadow:none; } 38% { text-shadow:1px 0 rgba(70,198,208,.65),-1px 0 rgba(177,92,215,.5); } 72% { text-shadow:-1px 0 rgba(70,198,208,.4),1px 0 rgba(177,92,215,.35); } }
@keyframes platform-glitch-accent { from { background-position:0 0; } to { background-position:100% 0; } }
@media (max-width:900px) { .container { width:calc(100% - 40px); } .header-logo { width:145px; } .header-actions { gap:18px; } .nav { gap:24px; } .nav a { font-size:11px; } .header-social { gap:6px; } .social-icon { width:34px; height:34px; } .hero { min-height:610px; height:83vh; } .hero-center { width:92%; } .hero-center p { font-size:12px; letter-spacing:.16em; } .music-layout { grid-template-columns:1fr; gap:40px; } .section { padding:76px 0; } .about-layout { grid-template-columns:1fr; } .about-photo { min-height:480px; } .about-photo::after { background:linear-gradient(0deg,#151414,transparent 35%); } .about-text { padding:45px 25px 70px; } .description { max-width:none; } }
@media (max-width:640px) { .header { padding-top:18px; display:flex; flex-wrap:wrap; text-align:left; } .header-logo { width:144px; margin:0; } .menu-toggle { min-width:44px; min-height:44px; border:1px solid #9a6b52; background:transparent; color:var(--white); padding:9px 12px; font:400 11px var(--font-display); letter-spacing:.16em; text-transform:uppercase; } .js .menu-toggle { display:block; } .header-actions { width:100%; margin:24px 0 0; flex-direction:column; gap:18px; } .js .header-actions { display:none; } .js .header-actions.is-open { display:flex; } .nav { margin:0; justify-content:center; gap:18px; } .nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:10px; } .header-social { gap:10px; } .social-icon { width:44px; height:44px; } }
@media (max-width:640px) { .reveal { --reveal-distance:20px; } }
@media (max-width:520px) { .hero { height:80svh; min-height:580px; } .hero-picture img { object-position:center center; } .hero-center { top:60%; } .hero-center p { line-height:1.6; margin:22px 0; } .hero-logo { width:100%; } .section-title { font-size:80px; } .about-photo { min-height:360px; } .contact-card { flex-direction:column; } .email { font-size:17px; } .social { gap:15px; flex-wrap:wrap; } .footer .container { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } #hudba::after,.about::before,.contact::before,.hero-logo,.hero-logo-glitch::before,.hero-logo-glitch::after,.intro-cta,.platform-link:hover { animation:none!important; } .hero-logo-glitch::before,.hero-logo-glitch::after { opacity:0!important; } html.reveal-ready .reveal,html.reveal-ready .music-layout .video,html.reveal-ready .music-layout > div:last-child > *,html.reveal-ready .about-layout .about-text > *,html.reveal-ready .contact .reveal > * { opacity:1; transform:none; transition:none; } }