@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--purple:#8b35e8;--purple-light:#bd7cff;--text:#f8f5ff;--muted:#a9a1b8;--panel:rgba(20,19,21,.92);--border:rgba(168,85,247,.2)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--text);background:#050505}body{min-height:100vh;overflow-x:hidden}.video-bg,.background-overlay{position:fixed;inset:0;width:100%;height:100%}.video-bg{z-index:0;object-fit:cover;background:radial-gradient(ellipse at 50% 25%,rgba(103,10,209,.2),transparent 48%),#050505;animation:background-drift 28s ease-in-out infinite alternate;will-change:transform}.background-overlay{z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,3,9,.48),rgba(5,3,9,.78)),radial-gradient(ellipse at 50% 45%,transparent,rgba(4,2,8,.48))}
.entry-screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;width:100%;height:100%;padding:24px;border:0;background:#000;color:#f7f7f7;font:700 25px Inter,Arial,sans-serif;cursor:pointer;transition:opacity .7s ease,visibility .7s ease}.entry-screen span{animation:entry-pulse 2s ease-in-out infinite}.entry-screen:hover span{color:#d9b7ff;text-shadow:0 0 22px #812be7}.entry-screen.is-leaving{opacity:0;visibility:hidden;pointer-events:none}.entry-screen[hidden]{display:none}
.page{position:relative;z-index:2;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:30px 20px;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s}.page.is-visible{opacity:1;visibility:visible}.profile-card{--pointer-x:50%;--pointer-y:25%;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);column-gap:38px;row-gap:18px;width:min(100%,920px);padding:38px 42px 20px;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:var(--panel);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 25px 90px #0008,0 0 45px #7c3aed12;transform:translateY(18px) scale(.98);opacity:0;transition:transform .75s cubic-bezier(.2,.75,.25,1),opacity .75s ease}.page.is-visible .profile-card{transform:translateY(0) scale(1);opacity:1;animation:card-enter .8s cubic-bezier(.2,.75,.25,1) both}.profile-card:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.8;background:radial-gradient(300px circle at var(--pointer-x) var(--pointer-y),#a855f71c,transparent 70%)}.profile-main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 10px 12px;border-right:1px solid #ffffff0d}.avatar-wrap{position:relative;width:112px;height:112px;margin:0 auto 18px;padding:2px;border-radius:50%;background:conic-gradient(from 0deg,#e9d5ff,#9333ea,#3b0764,#c084fc,#e9d5ff);box-shadow:0 0 25px #a855f733;animation:avatar-enter .75s .12s both,avatar-glow 4s 1s ease-in-out infinite}.avatar-wrap:after{content:"";position:absolute;inset:-6px;border:1px solid #c084fc40;border-radius:inherit;animation:ring-pulse 3.5s ease-in-out infinite;pointer-events:none}.avatar,.avatar-fallback{display:block;width:100%;height:100%;border:3px solid #12091d;border-radius:50%;object-fit:cover}.avatar-fallback{display:grid;place-items:center;background:linear-gradient(135deg,#321052,#12091d);font-size:40px;font-weight:800;color:#e9d5ff}[hidden]{display:none!important}h1{margin:0;text-align:center;font-size:36px;font-weight:800;letter-spacing:-.055em;animation:fade-up .6s .2s both}.verified{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:7px;border-radius:50%;background:var(--purple);color:#fff;font-size:11px;vertical-align:5px;letter-spacing:0;animation:badge-glow 3s 1.2s ease-in-out infinite}.tagline{margin:10px 0 0;text-align:center;color:var(--purple-light);font-size:11px;letter-spacing:.12em;text-transform:uppercase;animation:fade-up .6s .3s both}.tagline span{color:#6d5a81;padding:0 3px}.location{margin:14px 0 0;color:#a970f0;font-size:13px;animation:fade-up .6s .38s both}.bio{max-width:280px;margin:15px 0 19px;text-align:center;color:#d2c9df;font-size:13px;line-height:1.6;animation:fade-up .6s .44s both}.socials{display:flex;align-items:center;justify-content:center;gap:18px}.socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#f7efff;font-size:23px;text-decoration:none;text-shadow:0 0 12px #d8b4fe80;transition:transform .22s ease,color .22s ease,background .22s ease;animation:fade-up .5s .5s both}.socials a:hover{transform:translateY(-4px) scale(1.08);color:#c084fc;background:#a855f71a}
.profile-side{display:flex;flex-direction:column;justify-content:center;gap:11px}.link-card{position:relative;display:flex;align-items:center;gap:13px;min-height:65px;padding:11px 14px;overflow:hidden;border:1px solid #c084fc20;border-radius:15px;background:#ffffff06;color:var(--text);text-decoration:none;transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;animation:fade-up .55s both}.link-card:nth-child(1){animation-delay:.25s}.link-card:nth-child(2){animation-delay:.33s}.link-card:nth-child(3){animation-delay:.41s}.link-card:before{content:"";position:absolute;top:0;bottom:0;left:-75%;width:45%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#ffffff10,transparent);transition:left .55s ease}.link-card:hover,.link-card:focus-visible{transform:translateY(-2px);border-color:#c084fc70;background:#a855f716;box-shadow:0 7px 22px #50197822;outline:none}.link-card:hover:before,.link-card:focus-visible:before{left:140%}.link-icon{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;border-radius:12px;background:#a855f722;color:#d8b4fe;font-size:21px;transition:transform .25s ease,background .25s ease}.link-card:hover .link-icon{transform:rotate(-6deg) scale(1.08);background:#a855f73d}.link-copy{display:flex;flex-direction:column;gap:4px}.link-card strong{font-size:13px;font-weight:600}.link-card small{color:var(--muted);font-size:11px}.arrow{margin-left:auto;color:#8e7a9f;font-size:18px;transition:transform .22s ease,color .22s ease}.link-card:hover .arrow{transform:translate(2px,-2px);color:#e9d5ff}
.music-player{display:flex;align-items:center;gap:12px;margin-top:4px;padding:12px;border:1px solid #c084fc1c;border-radius:16px;background:#ffffff08;animation:fade-up .55s .5s both}.music-art{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:linear-gradient(135deg,#3b0764,#a855f7);font-size:25px}.music-info{display:flex;min-width:0;flex:1;flex-direction:column;gap:5px}.music-info strong{font-size:12px}.music-info small{color:var(--muted);font-size:10px}.progress-track{height:2px;margin-top:3px;overflow:hidden;border-radius:3px;background:#ffffff1a}.progress-track span{display:block;width:0;height:100%;background:#a855f7;transition:width .2s linear}.music-button{--color:#d8b4fe;--size:24px;position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#a855f722;fill:var(--color);cursor:pointer;user-select:none;transition:transform .2s ease,background .2s ease}.music-button:hover{transform:scale(1.08);background:#a855f744}.music-button .play,.music-button .pause{position:absolute;width:12px;height:16px;fill:currentColor;animation:keyframes-fill .7s ease}.music-button .pause{display:none;width:11px;height:16px}.music-button input:checked~.play{display:none}.music-button input:checked~.pause{display:block}.music-button input{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer}.music-button:focus-within{outline:2px solid var(--purple-light);outline-offset:3px}.music-button.is-playing{animation:music-glow 2s ease-in-out infinite}@keyframes keyframes-fill{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}footer{grid-column:1/-1;margin-top:0;padding-top:14px;border-top:1px solid #ffffff0b;text-align:center;color:#82768f;font-size:10px}
@keyframes card-enter{from{filter:blur(5px)}to{filter:blur(0)}}@keyframes fade-up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes avatar-enter{from{opacity:0;transform:scale(.82) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes avatar-glow{0%,100%{box-shadow:0 0 20px #a855f72e}50%{box-shadow:0 0 34px #a855f75c}}@keyframes ring-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.035)}}@keyframes badge-glow{0%,100%{box-shadow:0 0 0 #a855f700}50%{box-shadow:0 0 12px 2px #a855f74d}}@keyframes background-drift{from{transform:scale(1)}to{transform:scale(1.055)}}@keyframes music-glow{0%,100%{box-shadow:0 0 0 #a855f700}50%{box-shadow:0 0 15px #a855f74d}}@keyframes entry-pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
@media(max-width:700px){.page{padding:20px 13px}.profile-card{grid-template-columns:1fr;gap:22px;width:min(100%,480px);padding:27px 20px 16px}.profile-main{border-right:0;border-bottom:1px solid #ffffff0d;padding:4px 0 23px}.avatar-wrap{width:96px;height:96px}h1{font-size:31px}.profile-side{gap:9px}.link-card{min-height:59px}footer{margin-top:0}}@media(hover:none){.link-card:hover{transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.video-bg{animation:none}}

/* Rzeczywiste logotypy platform w SVG z Simple Icons */
.socials img,.link-icon img{display:block;width:24px;height:24px;object-fit:contain;transition:transform .25s ease,filter .25s ease}.socials a:hover img{transform:scale(1.12);filter:drop-shadow(0 0 7px #a855f7)}.link-icon img{width:21px;height:21px}.music-art{overflow:hidden}.music-art img{width:100%;height:100%;object-fit:cover;display:block}.music-art span{font-size:25px}


/* Subtelna animacja refleksu na logo */
.identity h1 { position: relative; }
.identity h1::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 22%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(216,180,254,.22), transparent);
  transform: skewX(-18deg);
  animation: logo-reflection 9s ease-in-out 2s infinite;
}
@keyframes logo-reflection {
  0%, 78%, 100% { left: -30%; opacity: 0; }
  82% { opacity: .55; }
  91% { left: 115%; opacity: 0; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .identity h1::after { animation: none !important; }
}


/* Dodatkowe, subtelne animacje awatara */
.avatar-wrap { transform-origin: center; transition: filter .35s ease; }
.avatar-wrap:hover { filter: brightness(1.08); }
.avatar-wrap:hover .avatar { transform: scale(1.035); }
.avatar { transition: transform .35s cubic-bezier(.2,.75,.25,1), filter .35s ease; }
.avatar-wrap:before { content:""; position:absolute; z-index:2; inset:3px; border-radius:50%; pointer-events:none; background:linear-gradient(125deg,transparent 32%,rgba(255,255,255,.18) 48%,transparent 62%); transform:translateX(-130%) rotate(8deg); animation:avatar-shimmer 7s ease-in-out 2s infinite; mix-blend-mode:screen; }
@keyframes avatar-shimmer { 0%,72%,100% { transform:translateX(-130%) rotate(8deg); opacity:0; } 76% { opacity:.9; } 88% { transform:translateX(130%) rotate(8deg); opacity:0; } }

/* Suwak głośności dopasowany do odtwarzacza */
.volume-control { display:flex; align-items:center; gap:9px; margin-top:2px; padding:0 3px 1px; color:var(--muted); font-size:12px; }
.volume-control > span:first-child { width:14px; color:#c084fc; text-align:center; font-size:15px; }
.volume-control input[type="range"] { --volume-progress:45%; appearance:none; -webkit-appearance:none; flex:1; min-width:0; height:4px; border-radius:99px; outline:none; cursor:pointer; background:linear-gradient(to right,#a855f7 0%,#a855f7 var(--volume-progress),#ffffff20 var(--volume-progress),#ffffff20 100%); }
.volume-control input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:11px; border:2px solid #e9d5ff; border-radius:50%; background:#a855f7; box-shadow:0 0 8px #a855f755; transition:transform .15s ease; }
.volume-control input[type="range"]::-moz-range-thumb { width:9px; height:9px; border:2px solid #e9d5ff; border-radius:50%; background:#a855f7; box-shadow:0 0 8px #a855f755; }
.volume-control input[type="range"]:hover::-webkit-slider-thumb { transform:scale(1.2); }
.volume-control input[type="range"]:focus-visible { outline:1px solid #bd7cff80; outline-offset:5px; }
.volume-value { min-width:30px; text-align:right; color:#c4b5d6; font-size:10px; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce) { .avatar-wrap:before { animation:none !important; } .avatar,.avatar-wrap { transition:none !important; } }