:root {
   --bg:     #04030e;
  --accent:  #6d28d9;
  --accent2: #7c3aed;
  --accent3: #a78bfa;
  --text:    #eeeeff;
  --muted:   #55557a;
  --glass:   rgba(255,255,255,.048);
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.13);
  --glow-b:  rgba(79,143,255,.18);
  --glow-v:  rgba(157,78,221,.18);
  --nav-h:   66px;
}

/* ── EARTH ── */
body.mode-earth {
  --bg:      #010a1a;
  --accent:  #38bdf8;
  --accent2: #0ea5e9;
  --accent3: #7dd3fc;
  --text:    #e0f2fe;
  --muted:   #2a5a7a;
  --glass:   rgba(56,189,248,.05);
  --border:  rgba(56,189,248,.10);
  --border2: rgba(56,189,248,.20);
  --glow-b:  rgba(56,189,248,.22);
  --glow-v:  rgba(14,165,233,.18);
}
body.mode-earth #space-bg {
  background:
    radial-gradient(ellipse 80% 60% at 18% 28%,rgba(2,40,90,.60),transparent 70%),
    radial-gradient(ellipse 65% 50% at 82% 65%,rgba(1,25,70,.50),transparent 65%),
    radial-gradient(ellipse 55% 40% at 50% 92%,rgba(5,50,110,.45),transparent 60%),
    radial-gradient(100% 100% at 50% 50%,#010a1a 0%,#020d22 100%);
}
body.mode-earth #space-veil { background: rgba(1,8,20,.42); }

/* ── SUN ── */
body.mode-sun {
  --bg:      #0f0500;
  --accent:  #ffaa00;
  --accent2: #ff5500;
  --accent3: #ffdd44;
  --text:    #fff8e8;
  --muted:   #7a4a18;
  --glass:   rgba(255,170,0,.05);
  --border:  rgba(255,170,0,.10);
  --border2: rgba(255,170,0,.20);
  --glow-b:  rgba(255,170,0,.20);
  --glow-v:  rgba(255,85,0,.18);
}
body.mode-sun #space-bg {
  background:
    radial-gradient(ellipse 80% 60% at 18% 35%,rgba(120,40,0,.6),transparent 70%),
    radial-gradient(ellipse 70% 55% at 82% 60%,rgba(150,60,0,.5),transparent 65%),
    radial-gradient(100% 100% at 50% 50%,#0f0500 0%,#180800 100%);
}
body.mode-sun #space-veil { background: rgba(15,5,0,.4); }

/* ── VOID ── */
body.mode-void {
  --bg:      #020000;
  --accent:  #8b0000;
  --accent2: #5a0000;
  --accent3: #c02020;
  --text:    #ccc0c0;
  --muted:   #3a1010;
  --glass:   rgba(80,0,0,.06);
  --border:  rgba(120,0,0,.12);
  --border2: rgba(160,0,0,.18);
  --glow-b:  rgba(100,0,0,.25);
  --glow-v:  rgba(80,0,0,.18);
}
body.mode-void #space-bg {
  background:
    radial-gradient(ellipse 40% 30% at 15% 20%, rgba(50,0,0,.6), transparent 70%),
    radial-gradient(ellipse 30% 25% at 85% 75%, rgba(40,0,0,.5), transparent 65%),
    radial-gradient(ellipse 20% 15% at 50% 50%, rgba(30,0,0,.3), transparent 55%),
    radial-gradient(100% 100% at 50% 50%, #020000 0%, #010000 100%);
}
body.mode-void #space-veil { background: rgba(2,0,0,.75); }
/* Void cursor visible dark crimson */
body.mode-void #cur-diamond {
  background: #5a0000 !important;
  box-shadow: 0 0 8px rgba(100,0,0,.6) !important;
  opacity: 1 !important;
}
body.mode-void #cur-ring {
  border-color: rgba(120,0,0,.5) !important;
  opacity: 1 !important;
  width: 42px !important; height: 42px !important;
}
body.mode-void #cur-dot { opacity: 0 !important; }
/* Void text elements */
body.mode-void .section-title { color: #c08080; }
body.mode-void .contact-form { border-color: rgba(120,0,0,.2); }
body.mode-void .skill-group:hover { border-color: rgba(120,0,0,.4); box-shadow: 0 0 24px rgba(80,0,0,.3); }

/*
   RESET + SCROLL SNAP
 */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,var(--accent),var(--accent2)); border-radius:6px; }
#scroll-container::-webkit-scrollbar       { width: 5px; }
#scroll-container::-webkit-scrollbar-track { background: transparent; }
#scroll-container::-webkit-scrollbar-thumb { background: linear-gradient(180deg,var(--accent),var(--accent2)); border-radius:6px; }
#skill-panel::-webkit-scrollbar       { width: 4px; }
#skill-panel::-webkit-scrollbar-track { background: transparent; }
#skill-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius:4px; }

/* ── CURSOR ── */
*, *::before, *::after {
  cursor: none !important;
}
* { margin:0; padding:0; box-sizing:border-box; }

/* ── ANIMATED GRADIENT BORDER — on hover only, CSS fallback ── */
.skill-group:hover { border-color: var(--accent); box-shadow: 0 0 28px var(--glow-v); opacity:.9; }
.skill-group {
  background: rgba(5,4,20,.42);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 1px solid rgba(255,255,255,.14);
  border-left: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:18px 18px 14px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  display:flex;flex-direction:column;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
  overflow:hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
}
.av-card:hover     { border-color: var(--accent); box-shadow: 0 0 24px var(--glow-b); }
.contact-form:focus-within { border-color: var(--accent); box-shadow: 0 0 28px var(--glow-b); }

/* ── GLASS CARD — improved ── */
.skill-group, .av-card, .contact-form {
  background: rgba(5,4,20,.42);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 1px solid rgba(255,255,255,.14);
  border-left: 1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:24px 24px 20px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .3s,box-shadow .3s;
  box-shadow: 0 2px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ── SECTION LABEL — clean, no data-num ── */
.section-label {
  font-family:'DM Mono',monospace; font-size:.61rem; letter-spacing:.28em;
  color:var(--accent); text-transform:uppercase; margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.section-label::before {
  content:''; display:block; width:26px; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* ── HERO TITLE — spans for GSAP ── */
.hero-title { perspective: 800px; }
.hero-title .l1,.hero-title .l2,.hero-title .l3 { display: block; }

/* ── NAV — frosted glass upgrade ── */
html {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Lora', Georgia, serif;
  transition: background .8s ease, color .6s ease;
}

#scroll-container {
  position: relative;
  z-index: 3;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

section {
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* - Language -*/

/* Przełącznik języków w navbarze */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace; /* Dopasowane do fontu Twojej strony */
    margin-left: 15px;
    padding-left: 15px;
}

.lang-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    padding: 0;
    text-transform: uppercase;
}

.lang-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.lang-btn.active {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(71, 71, 71, 0.5);
    font-weight: 500;
}

.separator {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
}

/* Dostosowanie nawigacji na telefonach, żeby zmieścił się język */
@media (max-width: 768px) {
    .lang-switcher {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        justify-content: center;
        margin-top: 10px;
    }
}

/* BACKGROUND LAYERS */
#space-bg {
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,rgba(55,10,120,.60),transparent 70%),
    radial-gradient(ellipse 70% 50% at 80% 65%,rgba(90,15,130,.50),transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 90%,rgba(30,10,90,.45),transparent 60%),
    radial-gradient(100% 100% at 50% 50%,#04030e 0%,#080318 100%);
  transition:background 1.2s ease;
}
#stars-s,#stars-m,#stars-l {
  position:fixed;inset:0;z-index:0;pointer-events:none;border-radius:50%;
  transition:filter .8s ease, opacity .8s ease;
}
#space-canvas  { position:fixed;inset:0;z-index:1;pointer-events:none;image-rendering:crisp-edges; }
#special-canvas{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s ease; }
#space-veil {
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background: rgba(3,3,10,.45);
  transition:background .8s ease;
}

/* impact flash */
#impact-flash  { position:fixed;inset:0;z-index:4000;opacity:0;pointer-events:none;transition:opacity .12s; }

/* CURSOR */
/* ── CURSOR: 3D spinning cube ── */
#cur-diamond {
  position:fixed;width:14px;height:14px;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  perspective:60px;
  will-change:left,top;
  transition:opacity .3s;
}

#cur-diamond .cube {
  width:14px;height:14px;
  position:relative;
  transform-style:preserve-3d;
  animation:cubeSpinX 2.2s linear infinite, cubeSpinY 3.1s linear infinite;
}
#cur-diamond .cube .face {
  position:absolute;width:14px;height:14px;
  background:var(--accent);
  border:1px solid rgba(255,255,255,.25);
  opacity:.88;
}
#cur-diamond .cube .face.front  { transform:translateZ(7px); }
#cur-diamond .cube .face.back   { transform:rotateY(180deg) translateZ(7px); }
#cur-diamond .cube .face.left   { transform:rotateY(-90deg) translateZ(7px); }
#cur-diamond .cube .face.right  { transform:rotateY(90deg) translateZ(7px); }
#cur-diamond .cube .face.top    { transform:rotateX(90deg) translateZ(7px); }
#cur-diamond .cube .face.bottom { transform:rotateX(-90deg) translateZ(7px); }
/* Subtle glow behind cube */
#cur-diamond::after {
  content:'';position:absolute;inset:-6px;border-radius:50%;
  background:var(--accent);opacity:.18;filter:blur(8px);pointer-events:none;
  z-index:-1;
}
@keyframes cubeSpinX {
  from { transform:rotateX(0deg) rotateY(0deg); }
  to   { transform:rotateX(360deg) rotateY(0deg); }
}
@keyframes cubeSpinY {
  from { transform:rotateX(0deg) rotateY(0deg); }
  to   { transform:rotateX(0deg) rotateY(360deg); }
}
/* Łącznie — JS ustawia oba elementy na tym samym elemencie poprzez nakładanie animacji CSS */
#cur-diamond .cube {
  animation:cubeRotate 4s linear infinite;
}
@keyframes cubeRotate {
  0%   { transform:rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
  33%  { transform:rotateX(120deg) rotateY(90deg)  rotateZ(45deg); }
  66%  { transform:rotateX(240deg) rotateY(200deg) rotateZ(90deg); }
  100% { transform:rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
}

#cur-ring {
  position:fixed;width:38px;height:38px;
  border:1px solid var(--accent);
  border-radius:50%;
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:width .3s,height .3s,border-color .3s,opacity .3s;
  will-change:left,top;
  opacity:.5;
}
#cur-dot {
  position:fixed;width:3px;height:3px;background:#fff;border-radius:50%;
  pointer-events:none;z-index:10000;transform:translate(-50%,-50%);opacity:.5;will-change:left,top;
}
body.cur-hover #cur-ring { width:52px;height:52px;border-color:var(--accent2);opacity:.7; }
body.cur-hover #cur-diamond .cube .face { background:var(--accent2); }
/* Sun mode: keep blue ring */
body.mode-sun #cur-ring { border-color: #ffae00; }
body.mode-sun.cur-hover #cur-ring { border-color: #f3d10f; }
/* Void cursor */
body.mode-void #cur-diamond .cube .face { background:#5a0000; }
body.mode-void #cur-diamond::after { background:#5a0000; }
body.mode-void #cur-ring { border-color:rgba(100,0,0,.6) !important; opacity:.7; }
body.mode-void #cur-dot { opacity:0; }

/* ── ASTRONAUT BUTTON ── */
#astro-btn {
  position:fixed;bottom:28px;right:28px;
  width:56px;height:56px;border-radius:50%;
  cursor:none !important;z-index:9990;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(157,78,221,.2),0 4px 20px rgba(0,0,0,.4);
  animation:astroFloat 5s ease-in-out infinite;
  transition:transform .2s, box-shadow .2s, background .2s;
  user-select:none;
}
#astro-btn:hover {
  transform:scale(1.1) translateY(-3px);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 28px rgba(157,78,221,.35), 0 6px 24px rgba(0,0,0,.5);
}
@keyframes astroFloat {
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-9px) rotate(3deg)}
}

/* ── FAQ PANEL ── */
#faq-panel {
  position:fixed;bottom:96px;right:24px;
  width:320px;max-height:70vh;
  background:rgba(4,3,14,.88);
  border:1px solid rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  z-index:9989;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;
  transition:opacity .25s ease, transform .28s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
#faq-panel.open {
  opacity:1;transform:translateY(0) scale(1);pointer-events:all;
}
#faq-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
#faq-header span {
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.5);text-transform:uppercase;
}
#faq-close {
  background:transparent;border:none;color:rgba(255,255,255,.4);
  font-size:14px;cursor:none !important;padding:2px 4px;
  transition:color .15s;
}
#faq-close:hover { color:rgba(255,255,255,.8); }
#faq-body {
  overflow-y:auto;padding:8px 12px 16px;flex:1;
}
#faq-body::-webkit-scrollbar{width:3px;}
#faq-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px;}
.faq-section {
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.16em;
  color:var(--accent);text-transform:uppercase;
  padding:10px 4px 4px;margin-top:4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.faq-item {
  padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.04);
}
.faq-q {
  font-size:12px;color:rgba(255,255,255,.85);margin-bottom:3px;font-weight:500;
}
.faq-a {
  font-size:11px;color:rgba(255,255,255,.45);line-height:1.5;
}
.faq-a strong { color:rgba(255,255,255,.7); }
.faq-a em { color:var(--accent3); font-style:normal; }
.faq-a code {
  font-family:'DM Mono',monospace;font-size:10px;
  background:rgba(255,255,255,.08);
  padding:1px 5px;border-radius:3px;
  color:var(--accent);
}

/* Moon hidden */
#moon-btn { display:none !important; }

/* INTRO */
#intro {
  position:fixed;inset:0;z-index:5000;background:#000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .9s ease,transform .9s ease;
}
#intro.hide { opacity:0;transform:scale(1.04);pointer-events:none; }
.intro-logo {
  width:110px;height:110px;
  background:url('https://matthewb.pl/assets/img/logo.png') center/contain no-repeat;
  animation:introPulse 2.2s ease-in-out infinite;
}
@keyframes introPulse {
  0%,100%{filter:drop-shadow(0 0 18px rgba(157,78,221,.7)) drop-shadow(0 0 40px rgba(157,78,221,.2));transform:scale(1)}
  50%    {filter:drop-shadow(0 0 30px rgba(157,78,221,.9)) drop-shadow(0 0 60px rgba(157,78,221,.3));transform:scale(1.06)}
}
.intro-name {
  font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.32em;
  color:var(--muted);margin-top:22px;
  display:inline-block;border-right:2px solid var(--accent);white-space:nowrap;min-height:1.4em;
}
.intro-bar { width:180px;height:1px;background:var(--border);margin-top:28px;border-radius:1px;overflow:hidden;opacity:0;animation:fadeUp .4s ease 1s forwards; }
.intro-bar-fill { height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));animation:barFill 1.8s ease 1.1s forwards; }
@keyframes barFill { to{width:100%} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* NAV */
nav {
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:0 clamp(20px,4vw,64px);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  background: rgba(5,4,20,.48);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 20px rgba(0,0,0,.22);
  transition: background .7s;
}
.nav-brand { display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0; }.nav-logo  { width:34px;height:34px;flex-shrink:0;background:url('https://matthewb.pl/assets/img/logo.png') center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(157,78,221,.55)); }
.nav-name  { font-family:'Bebas Neue',sans-serif;font-size:clamp(.95rem,2vw,1.28rem);letter-spacing:.1em;color:var(--text);line-height:1;white-space:nowrap; }
.nav-name span { color:var(--accent); }
.nav-links { display:flex;gap:clamp(14px,2.5vw,32px);list-style:none;flex-shrink:0; }
.nav-links a { font-family:'DM Mono',monospace;font-size:.67rem;letter-spacing:.18em;color:var(--muted);text-decoration:none;text-transform:uppercase;white-space:nowrap;position:relative;transition:color .3s; }
.nav-links a::after { content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--accent);transition:width .3s; }
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }

/* Terminal button - void reload */
#terminal-btn {
  display: none !important;
}
body.terminal-unlocked #terminal-btn {
  display: flex !important;
  opacity: 1 !important;
  color: #00ff41 !important;
  border: 1px solid rgba(0,255,65,.35) !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  background: rgba(0,255,65,.06) !important;
  animation: termGlow 2s ease-in-out infinite !important;
  letter-spacing: .12em !important;
}
body.terminal-unlocked #terminal-btn:hover {
  background: rgba(0,255,65,.15) !important;
  box-shadow: 0 0 20px rgba(0,255,65,.4) !important;
}
body.terminal-unlocked #terminal-btn svg {
  stroke: #00ff41;
}
@keyframes termGlow {
  0%,100% { box-shadow: 0 0 8px rgba(0,255,65,.5), 0 0 20px rgba(0,255,65,.2); }
  50%      { box-shadow: 0 0 16px rgba(0,255,65,.8), 0 0 40px rgba(0,255,65,.4); }
}

/* HELPERS */
.section-label {
  font-family:'DM Mono',monospace;font-size:.61rem;letter-spacing:.28em;
  color:var(--accent);text-transform:uppercase;margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.section-label::before { content:'';display:block;width:26px;height:1px;background:var(--accent); }
.section-title { font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:.03em; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1 !important; transform:none !important; }
.reveal-d1 { transition-delay:.12s; }
.reveal-d2 { transition-delay:.24s; }

/* HERO */
#hero { justify-content:center;padding:var(--nav-h) clamp(24px,5vw,80px) 0; }
.hero-inner { max-width:min(860px,90vw); }
.hero-eyebrow { font-family:'DM Mono',monospace;font-size:.67rem;letter-spacing:.35em;color:var(--accent);text-transform:uppercase;margin-bottom:20px; }
.hero-title { font-family:'Bebas Neue',sans-serif;font-size:clamp(3.4rem,8.5vw,7.8rem);line-height:.93;letter-spacing:.025em; }
.hero-title .l1 { color:var(--text);display:block; }
.hero-title .l2 { color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);display:block; }
.hero-title .l3 { display:block;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.hero-desc { max-width:500px;margin-top:22px;font-size:.97rem;line-height:1.85;color:var(--muted); }
.hero-cta  { margin-top:36px;display:flex;gap:14px;flex-wrap:wrap; }
.btn { font-family:'DM Mono',monospace;font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;padding:13px 30px;border-radius:4px;text-decoration:none;display:inline-block;transition:all .3s; }
.btn-primary { background:var(--accent);color:#03030a; }
.btn-primary:hover { filter:brightness(1.2);box-shadow:0 0 28px var(--glow-v); }
.btn-ghost { border:1px solid var(--border2);color:var(--muted); }
.btn-ghost:hover { border-color:var(--accent2);color:var(--text);box-shadow:0 0 22px var(--glow-v); }
.hero-tags { margin-top:38px;display:flex;gap:10px;flex-wrap:wrap; }
.tag { font-family:'DM Mono',monospace;font-size:.61rem;letter-spacing:.13em;padding:5px 13px;border:1px solid var(--border);border-radius:100px;color:var(--muted);text-transform:uppercase;background:var(--glass);backdrop-filter:blur(8px); }
.scroll-hint { position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px; }
.scroll-hint span { font-family:'DM Mono',monospace;font-size:.57rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase; }
.scroll-line { width:1px;height:46px;background:linear-gradient(to bottom,var(--accent),transparent);animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.2} 50%{opacity:1} }

/*SHOWREEL */
#showreel { justify-content:center;align-items:center; }
#showreel .sr-video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92; }
/* Ukryj obszar roboczy planety w oknie podglądu showreelu */
#showreel ~ * #special-canvas { opacity:0; }
.sr-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--bg) 0%,transparent 14%,transparent 86%,var(--bg) 100%),
             linear-gradient(to right, var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%);
}
.sr-content { position:relative;z-index:2;text-align:center; }
.sr-title { font-family:'Bebas Neue',sans-serif;font-size:clamp(2.8rem,6.5vw,6rem);letter-spacing:.1em;background:linear-gradient(90deg,var(--accent),#fff,var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.sr-sub  { font-family:'DM Mono',monospace;font-size:.63rem;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;margin-top:10px; }
.sr-play { margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:.67rem;letter-spacing:.17em;color:var(--text);text-transform:uppercase;text-decoration:none;border:1px solid var(--border2);padding:12px 26px;border-radius:4px;background:var(--glass);backdrop-filter:blur(12px);transition:border-color .3s,color .3s,box-shadow .3s; }
.sr-play:hover { border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px var(--glow-v); }

/*ABOUT */
#about { padding:var(--nav-h) clamp(24px,5vw,80px) 0;justify-content:center; }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;height:100%;padding:clamp(20px,4vh,50px) 0; }
.about-text p { color:var(--muted);line-height:1.75;margin-bottom:11px;font-size:.91rem; }
.about-text p strong { color:var(--text);font-weight:600; }
.about-text .section-title { margin-bottom:18px; }
.about-visual { position:relative;height:min(300px,calc(100svh - 220px)); }
.av-card {
  position:absolute;
  background: rgba(5,4,20,.42);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 1px solid rgba(255,255,255,.16);
  border-left: 1px solid rgba(255,255,255,.10);
  border-radius:14px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  transition:border-color .3s,box-shadow .3s;
  box-shadow: 0 2px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
}
.av-card:hover { border-color:rgba(157,78,221,.24);box-shadow:0 0 28px var(--glow-v); }
.av-card-1 { inset:0 32px 64px 0;padding:20px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px; }
.av-card-2 { bottom:0;right:0;width:138px;height:118px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.av-stat-num { font-family:'Bebas Neue',sans-serif;font-size:2.3rem;color:var(--accent);line-height:1; }
.av-stat-lbl { font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:4px; }
.av-icon-row { display:flex;gap:7px;flex-wrap:wrap; }
.av-icon { font-size:.6rem;font-family:'DM Mono',monospace;padding:4px 9px;border:1px solid var(--border);border-radius:3px;color:var(--muted);letter-spacing:.07em;background:rgba(255,255,255,.025); }
.av-course-label { font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.13em;color:var(--muted);text-transform:uppercase; }
.av-course-name  { font-size:.86rem;color:var(--text);margin-top:3px; }
.av-course-prog  { font-family:'DM Mono',monospace;font-size:.58rem;color:var(--accent3);margin-top:3px;letter-spacing:.08em; }

/*SKILLS */
#skills { padding:var(--nav-h) clamp(24px,5vw,80px) 0; }
.skills-inner { flex:1;display:flex;flex-direction:column;padding:clamp(18px,4vh,42px) 0 clamp(12px,2vh,24px); }
.skills-header { margin-bottom:clamp(12px,3vh,32px);text-align:center; }
.skills-grid { flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-height:0;overflow:visible; }
.skill-group {
  background: rgba(5,4,18,.50);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding:18px 18px 14px;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  display:flex;flex-direction:column;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 16px rgba(0,0,0,.25);
}
.skill-group:hover { border-color:rgba(157,78,221,.24);box-shadow:0 0 26px var(--glow-v); }
.skill-group-title { font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.22em;color:var(--accent2);text-transform:uppercase;margin-bottom:10px;flex-shrink:0;display:flex;align-items:center;gap:10px; }
.skill-group-title::after { content:'';flex:1;height:1px;background:var(--border); }
.skill-items { flex:1;display:flex;flex-direction:column;justify-content:space-around;min-height:0; }
.skill-head { display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px; }
.skill-name { font-size:.83rem;color:var(--text); }
.skill-pct  { font-family:'DM Mono',monospace;font-size:.64rem;color:var(--muted); }
.skill-track { height:2px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden; }
.skill-fill  { height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;transition:width 1.3s cubic-bezier(.4,0,.2,1); }

/* PORTFOLIO */
#portfolio { padding:var(--nav-h) clamp(24px,5vw,80px) 0; }
.portfolio-inner { flex:1;display:flex;flex-direction:column;padding:clamp(16px,3.5vh,36px) 0 clamp(10px,2vh,20px); }
.portfolio-header { flex-shrink:0;margin-bottom:clamp(8px,1.8vh,20px); }
.portfolio-grid { flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:12px;min-height:0; }
.p-card {
  position:relative;overflow:hidden;border-radius:12px;
  background: rgba(5,4,20,.38);
  border: 1px solid rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(28px) saturate(160%);
  cursor:none !important;
  transition:border-color .35s, box-shadow .35s; min-height:0;
  box-shadow: 0 2px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
}
.p-card:first-child { grid-column:span 2; }
.p-card:hover { border-color:rgba(157,78,221,.28);box-shadow:0 0 30px var(--glow-v); }
.p-card-bg { position:absolute;inset:0;transition:transform .55s ease,opacity .4s; }
.p-card:hover .p-card-bg { transform:scale(1.05);opacity:.65; }
.p-card-bg-1{background:radial-gradient(ellipse at 30% 40%,#1a1050,#03030a 70%)}
.p-card-bg-2{background:radial-gradient(ellipse at 70% 30%,#201040,#03030a 70%)}
.p-card-bg-3{background:radial-gradient(ellipse at 40% 60%,#0a1040,#03030a 70%)}
.p-card-bg-4{background:radial-gradient(ellipse at 60% 50%,#1a0a40,#03030a 70%)}
.p-card-bg-5{background:radial-gradient(ellipse at 50% 50%,#0a1530,#03030a 70%)}
.p-coming { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px; }
.p-coming-icon { font-size:1.6rem;opacity:.22; }
.p-coming-lbl  { font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase; }
.p-card-info { position:absolute;bottom:0;left:0;right:0;padding:16px 18px;background:linear-gradient(to top,rgba(3,3,10,.95),transparent);transform:translateY(8px);opacity:0;transition:all .35s; }
.p-card:hover .p-card-info { transform:none;opacity:1; }
.p-card-cat   { font-family:'DM Mono',monospace;font-size:.57rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:4px; }
.p-card-title { font-size:.9rem;font-weight:600; }

/* CONTACT */
#contact { padding:var(--nav-h) 0 0; }
.contact-inner { flex:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);padding:clamp(60px,10vh,110px) clamp(24px,5vw,80px) 0;align-items:center; }
.contact-left .section-title { margin-bottom:14px; }
.contact-left p { color:var(--muted);line-height:1.8;font-size:.93rem; }
.contact-email { display:block;margin-top:24px;font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.1em;color:var(--accent);text-decoration:none;transition:color .3s; }
.contact-email:hover { color:var(--accent3); }
.contact-form {
  background: rgba(5,4,18,.50);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:24px 24px 20px;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .3s,box-shadow .3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 16px rgba(0,0,0,.25);
}
.contact-form:focus-within { border-color:var(--accent2);box-shadow:0 0 28px var(--glow-v); }
.form-field { display:flex;flex-direction:column;gap:6px; }
label { font-family:'DM Mono',monospace;font-size:.61rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase; }
input,textarea { background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:7px;padding:11px 15px;color:var(--text);font-family:'Lora',serif;font-size:.9rem;outline:none;resize:vertical;transition:border-color .3s,box-shadow .3s; }
input:focus,textarea:focus { border-color:rgba(157,78,221,.45);box-shadow:0 0 0 3px rgba(157,78,221,.06); }
textarea { min-height:110px; }
.btn-submit { align-self:flex-start;background:transparent;border:1px solid rgba(157,78,221,.38);color:var(--accent2);font-family:'DM Mono',monospace;font-size:.69rem;letter-spacing:.17em;text-transform:uppercase;padding:11px 28px;border-radius:7px;transition:all .3s; }
.btn-submit:hover { background:var(--accent);color:#03030a;box-shadow:0 0 24px rgba(157,78,221,.35); }
footer {
  flex-shrink:0;
  padding:18px clamp(24px,5vw,80px);
  display:flex;align-items:center;justify-content:space-between;
  z-index:4;
  background: rgba(5,4,20,.48);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 -2px 20px rgba(0,0,0,.18);
}
.footer-brand { font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.17em;color:var(--muted);text-transform:uppercase; }
.footer-links { display:flex;gap:18px; }
.footer-links a { font-family:'DM Mono',monospace;font-size:.57rem;letter-spacing:.13em;color:var(--muted);text-decoration:none;text-transform:uppercase;transition:color .3s; }
.footer-links a:hover { color:var(--text); }

/* RESPONSIVE + MOTION */
@media (prefers-reduced-motion:reduce) {
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  #cur-diamond,#cur-ring,#cur-dot{display:none}
  body{cursor:auto}
}
@media (max-width:900px) {
  nav{padding:0 18px} .nav-links{display:none}
  #scroll-container{scroll-snap-type:none}
  section{height:auto;min-height:100svh}
  .about-grid{grid-template-columns:1fr} .about-visual{height:200px}
  .av-card-1{right:0;bottom:56px} .av-card-2{width:128px;height:108px}
  .portfolio-grid{grid-template-columns:1fr;grid-template-rows:repeat(5,160px);flex:none}
  .p-card:first-child{grid-column:span 1} .p-card-info{transform:none;opacity:1}
  .contact-inner{grid-template-columns:1fr}
  footer{flex-direction:column;gap:12px;text-align:center}
  .skills-grid{grid-template-columns:1fr}
  .portfolio-inner,.skills-inner{flex:none}
}

/* ══════════════════════════════════════════
   PORTFOLIO SLIDESHOW
══════════════════════════════════════════ */
.p-slideshow {
  position:absolute;inset:0;display:none;
  overflow:hidden;border-radius:inherit;
}
.p-slideshow img {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.p-slideshow img.active {
  opacity:1;
}
/* Gradient overlay so card-info text stays readable */
.p-slideshow::after {
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,3,14,.85) 0%,rgba(4,3,14,.2) 50%,transparent 100%);
  pointer-events:none;
}
/* Dots navigation */
.p-slide-dots {
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:4;pointer-events:all;
}
.p-dot {
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.3);
  cursor:pointer;transition:background .2s, transform .2s;
}
.p-dot.active {
  background:rgba(255,255,255,.9);transform:scale(1.3);
}
/* When slideshow active, hide the coming-soon overlay */
.p-card:has(.p-slideshow img) .p-coming { display:none; }