/* ============================================================
   Portfolio — Mateusz Kowalski
   styles.css
   ============================================================ */

:root {
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.8s ease, color 0.5s ease;
  line-height: 1.6;
}

/* ── THEME TOKENS ─────────────────────────────────────────── */
body.mode-game {
  background-color: #080e0a;
  color: rgba(255,255,255,0.95);
  --accent:    #6ee7b7;
  --accent2:   #6ee7b7;
  --acc-r: 110; --acc-g: 231; --acc-b: 183;
  --glass-bg:  rgba(255,255,255,0.06);
  --glass-b:   rgba(255,255,255,0.13);
  --inset:     rgba(255,255,255,0.16);
  --shadow:    rgba(0,0,0,0.35);
  --t1:        rgba(255,255,255,0.95);
  --t2:        rgba(255,255,255,0.65);
  --t3:        rgba(255,255,255,0.4);
  --bg:        #080e0a;
}

body.mode-art {
  background-color: #f8f6f0;
  color: #1a1a1a;
  --accent:    #fcd34d;
  --accent2:   #fcd34d;
  --acc-r: 252; --acc-g: 211; --acc-b: 77;
  --glass-bg:  rgba(253,248,230,0.18);
  --glass-b:   rgba(255,255,255,0.88);
  --inset:     rgba(255,255,255,0.95);
  --shadow:    rgba(0,0,0,0.09);
  --t1:        #1a1a1a;
  --t2:        #4a4a4a;
  --t3:        #7a7a7a;
  --bg:        #f8f6f0;
}

/* ── BACKGROUND ORBS — removed ────────────────────────────── */
.bg-canvas { display: none; }

/* ── UNITY 3D BACKGROUND ──────────────────────────────────── */
.unity-bg-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 1.2s ease;
}
body.mode-game .unity-bg-canvas { opacity: 0.38; }
body.mode-art  .unity-bg-canvas { opacity: 0; pointer-events: none; }

/* ── BACKGROUND IMAGE ───────────────────────────────────────
.bg-image {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url(assets/background-game.png);
  background-size: cover; background-position: center;
  opacity: 0.1; mix-blend-mode: overlay; transition: opacity 0.8s ease;
}
body.mode-art .bg-image { opacity: 0.1; background-image: none; }
*/

/* ── GLASS UTILITY ────────────────────────────────────────── */
.glass {
  background: linear-gradient(135deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.05) 40%,rgba(255,255,255,0.08) 100%), var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-top-color: rgba(255,255,255,0.48) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.06);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.50), inset 0 1px 0 0 rgba(255,255,255,0.25), inset 0 -1px 0 0 rgba(255,255,255,0.06), 0 6px 20px rgba(0,0,0,0.10), 0 20px 56px var(--shadow);
  position: relative; overflow: hidden;
  transition: background 0.8s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.23,1,0.32,1);
}
.glass:hover {
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.50), inset 0 1px 0 0 rgba(255,255,255,0.25), inset 0 -1px 0 0 rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.14), 0 28px 72px var(--shadow);
}
body.mode-art .glass {
  background: linear-gradient(135deg,rgba(255,255,255,0.42) 0%,rgba(253,245,210,0.22) 45%,rgba(255,255,255,0.32) 100%);
  border: 1px solid rgba(255,255,255,0.80) !important;
  border-top-color: rgba(255,255,255,0.98) !important;
  border-bottom-color: rgba(200,185,140,0.30) !important;
  backdrop-filter: blur(24px) saturate(160%) brightness(1.04) contrast(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(1.04) contrast(1.02);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.95), inset 0 1px 0 0 rgba(255,255,255,0.75), inset 0 -1px 0 0 rgba(200,180,120,0.18), 0 4px 16px rgba(160,140,80,0.08), 0 16px 40px rgba(0,0,0,0.07);
}
body.mode-art .glass:hover {
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.95), inset 0 1px 0 0 rgba(255,255,255,0.75), inset 0 -1px 0 0 rgba(200,180,120,0.18), 0 8px 28px rgba(160,140,80,0.12), 0 20px 52px rgba(0,0,0,0.10);
}
.glass::after {
  content: ""; pointer-events: none; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(155deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.03) 36%,transparent 52%); z-index: 0;
}
body.mode-art .glass::after {
  background: linear-gradient(155deg,rgba(255,255,255,0.65) 0%,rgba(255,250,220,0.15) 40%,transparent 56%);
}
.glass > * { position: relative; z-index: 1; }

.container { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 24px; }
#transition-wrap { transition: opacity 0.4s ease; }

/* ── NAV ──────────────────────────────────────────────────── */
nav { position:fixed; top:0; left:0; right:0; z-index:200; padding:14px 24px; }
.nav-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-size:16px; font-weight:700; letter-spacing:-0.3px; color:var(--t1); text-decoration:none; display:flex; align-items:center; line-height:1; transition:color 0.5s; height: 40px; }
.nav-logo span { font-weight:400; opacity:0.4; margin-left:2px; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-link { color:var(--t2); text-decoration:none; font-size:15px; font-weight:500; padding:8px 16px; border-radius:var(--radius-sm); transition:color 0.3s, background 0.3s; line-height:1; display:flex; align-items:center; }
.nav-link:hover { color:var(--t1); background:rgba(128,128,128,0.1); }

/* ── MODE TOGGLE ──────────────────────────────────────────── */
.toggle-wrap { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:201; display:flex; align-items:center; }
.toggle-inner { display:flex; align-items:center; border-radius:40px; padding:4px; position:relative; cursor:pointer; }
.toggle-pill {
  position:absolute; top:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  border-radius:32px; z-index:0;
  transition: left 0.35s cubic-bezier(0.25,0.8,0.25,1), background 0.5s;
}
body.mode-game .toggle-pill { left:4px; background: var(--accent); }
body.mode-art  .toggle-pill { left:calc(50%); background: var(--accent); }
.tbtn {
  position:relative; z-index:1; padding:12px 38px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:500;
  border:none; background:transparent; cursor:pointer; border-radius:32px; white-space:nowrap; line-height:1;
  transition:color 0.3s, font-weight 0.3s; display:flex; align-items:center; gap:6px;
}
body.mode-game .tbtn-game { color:#080e0a; font-weight:700; }
body.mode-game .tbtn-art  { color:rgba(255,255,255,0.4); }
body.mode-art  .tbtn-art  { color:#1a1a1a; font-weight:700; }
body.mode-art  .tbtn-game { color:rgba(0,0,0,0.4); }

/* ── ANIMATIONS ───────────────────────────────────────────── */
.entry { opacity:0; transform:translateY(28px); transition: opacity 0.55s cubic-bezier(0.23,1,0.32,1), transform 0.55s cubic-bezier(0.23,1,0.32,1); }
.entry.in { opacity:1; transform:translateY(0); }
.reveal { opacity:0; transform:translateY(26px); transition: opacity 0.6s cubic-bezier(0.23,1,0.32,1), transform 0.6s cubic-bezier(0.23,1,0.32,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── SECTIONS ─────────────────────────────────────────────── */
.section { padding:100px 0; }
.eyebrow { display: none; }
.sec-title { font-size:clamp(32px,4vw,52px); font-weight:800; letter-spacing:-1.5px; line-height:1.1; color:var(--t1); transition:color 0.5s; margin-bottom:16px; }
.sec-sub { font-size:16px; color:var(--t2); margin-top:12px; line-height:1.7; max-width:560px; font-weight:400; transition:color 0.5s; margin-bottom:48px; }
.divider { height:80px; background: transparent; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero { min-height:100vh; display:flex; align-items:center; padding:150px 0 90px; }
.hero-inner { max-width:760px; }
.avail { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent); padding:8px 16px; border-radius:20px; background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),0.12); border:1px solid rgba(var(--acc-r),var(--acc-g),var(--acc-b),0.3); margin-bottom:32px; transition:color 0.5s, background 0.5s, border-color 0.5s; }
.avail-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; transition:background 0.5s; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.45);opacity:0.6;} }
.hero-tag { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--t3); margin-bottom:20px; transition:color 0.5s; }
.hero-tag-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; transition:background 0.5s; }
.hero-name { font-size:clamp(52px,7vw,92px); font-weight:900; letter-spacing:-3px; line-height:0.96; margin-bottom:8px; color:var(--t1); transition:color 0.5s; }
.hero-name-last { display:block; }
.hero-title { font-size:clamp(18px,2.5vw,26px); font-weight:400; letter-spacing:-0.4px; margin:24px 0; line-height:1.4; color:var(--t2); transition:color 0.5s; }
.hero-title strong { color:var(--t1); font-weight:700; transition:color 0.5s; }
.hero-desc { font-size:16px; line-height:1.8; color:var(--t2); max-width:580px; margin-bottom:40px; transition:color 0.5s; }
.hero-cta { display:flex; gap:16px; flex-wrap:wrap; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary { padding:14px 32px; border-radius:40px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; font-weight:700; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; background: var(--accent); color:#1a1a1a !important; transition:transform 0.3s, background 0.5s, opacity 0.3s; }
.btn-primary:hover { transform:translateY(-2px); opacity:0.88; }
.btn-ghost { padding:14px 32px; border-radius:40px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; color:var(--t2); border:1px solid rgba(128,128,128,0.2); transition:color 0.3s, background 0.3s, transform 0.3s; }
.btn-ghost:hover { transform:translateY(-2px); }

/* ── CONSEQUENCES (art mode) ──────────────────────────────── */
.cons-section { padding:0 0 100px; }
.cons-headline { border-radius:var(--radius-lg); padding:48px 56px; display:flex; flex-direction:column; gap:12px; }
.cons-num { font-size:88px; font-weight:900; letter-spacing:-4px; line-height:1; color: var(--accent); transition: color 0.5s; }
.cons-headline-text { font-size:20px; font-weight:400; color:var(--t2); max-width:520px; line-height:1.6; }
.cons-headline-text strong { color:var(--t1); font-weight:700; }
.cons-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.cons-card { border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column; gap:12px; transition:transform 0.3s; }
.cons-card:hover { transform:translateY(-4px); }
.cons-icon { width:56px; height:56px; border-radius:14px; background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),0.15); display:flex; align-items:center; justify-content:center; transition:background 0.5s; }
.cons-icon svg { width:26px; height:26px; }
.cons-title { font-size:16px; font-weight:700; color:var(--t1); }
.cons-desc { font-size:14px; line-height:1.7; color:var(--t2); }
.cons-verdict { font-size:12px; font-weight:700; letter-spacing:0.5px; color:var(--accent); margin-top:auto; text-transform:uppercase; transition:color 0.5s; }

/* ── PROJECTS ─────────────────────────────────────────────── */
.proj-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:40px; }
.proj-card { border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:transform 0.35s, box-shadow 0.35s; display:flex; flex-direction:column; }
.proj-card:hover { transform:translateY(-6px); }
.proj-card.featured { grid-column:span 2; }
.proj-thumb { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.proj-card.featured .proj-thumb { aspect-ratio:16/9; }
.proj-thumb-bg { position:absolute; inset:0; width: 100%; height: 100%; transition:transform 0.6s cubic-bezier(0.23,1,0.32,1); object-fit: cover;}
.proj-card:hover .proj-thumb-bg { transform:scale(1.05); }
.proj-thumb-icon { position:relative; z-index:1; }
.proj-thumb-icon svg { width:52px; height:52px; filter: drop-shadow(0 0 16px rgba(0,0,0,0.4)); }
.proj-body { padding:28px 32px; display:flex; flex-direction:column; flex-grow:1; justify-content:space-between; }
.proj-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ptag { font-size:12px; font-weight:600; letter-spacing:0.4px; padding:5px 12px; border-radius:20px; border:1px solid rgba(128,128,128,0.18); color:var(--t3); background:rgba(128,128,128,0.06); transition:all 0.5s; }
.ptag.acc { border-color:rgba(var(--acc-r),var(--acc-g),var(--acc-b),0.4); color:var(--accent); background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),0.08); }
.proj-name { font-size:22px; font-weight:800; letter-spacing:-0.5px; margin-bottom:12px; color:var(--t1); transition:color 0.5s; }
.proj-desc { font-size:15px; color:var(--t2); line-height:1.7; margin-bottom:24px; transition:color 0.5s; }
.proj-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.proj-meta { font-size:13px; font-weight:500; color:var(--t3); transition:color 0.5s; }
.proj-link { font-size:14px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:20px; color:var(--accent); background:rgba(var(--acc-r),var(--acc-g),var(--acc-b),0.08); transition:transform 0.3s, all 0.5s; }
.proj-link:hover { transform:translateX(3px); }
#aprojects .proj-card { position: relative; display: block; }
#aprojects .proj-thumb { height: 100%; aspect-ratio: 4/3; }
#aprojects .proj-card.featured .proj-thumb { aspect-ratio: 17/9; }
#aprojects .proj-body { display: none; }
.proj-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; z-index: 2; padding: 24px; }
#aprojects .proj-card:hover .proj-overlay { opacity: 1; }
.proj-overlay-name { color: #fff; font-size: 26px; font-weight: 800; margin-bottom: 24px; text-align: center; letter-spacing: -0.5px; transform: translateY(15px); transition: transform 0.4s ease; }
#aprojects .proj-card:hover .proj-overlay-name { transform: translateY(0); }
.proj-overlay .btn-primary { transform: translateY(15px); }
#aprojects .proj-card:hover .proj-overlay .btn-primary { transform: translateY(0); }
#aprojects .proj-card:hover .proj-overlay .btn-primary:hover { transform: translateY(-2px); }

/* ── ABOUT ────────────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.about-text p { font-size:16px; line-height:1.8; color:var(--t2); margin-bottom:20px; transition:color 0.5s; }
.about-text p strong { color:var(--t1); font-weight:700; transition:color 0.5s; }
.pull-quote { font-size:clamp(18px,2.5vw,24px); font-weight:400; letter-spacing:-0.4px; line-height:1.5; color:var(--t2); border-left:4px solid var(--accent); padding:6px 0 6px 28px; margin:40px 0; max-width:640px; transition:border-color 0.5s, color 0.5s; }
.pull-quote strong { color:var(--t1); font-weight:700; transition:color 0.5s; }
.skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.skill-item { border-radius:var(--radius-md); padding:16px 20px; display:flex; align-items:center; gap:14px; }
.skill-icon { width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(128,128,128,0.08); }
.skill-icon svg { width:20px; height:20px; }
.skill-name { font-size:14px; font-weight:700; color:var(--t1); transition:color 0.5s; }
.skill-lvl { font-size:12px; font-weight:500; color:var(--t3); margin-top:2px; transition:color 0.5s; }

/* ── TIMELINE ─────────────────────────────────────────────── */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:''; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:rgba(128,128,128,0.15); }
.tl-item { position:relative; margin-bottom:32px; }
.tl-item::before { content:''; position:absolute; left:-23.5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:3px solid var(--accent); transition:border-color 0.5s, background 0.5s; }
.tl-year { font-size:12px; font-weight:700; letter-spacing:1px; color:var(--t3); text-transform:uppercase; transition:color 0.5s; }
.tl-title { font-size:16px; font-weight:800; margin:6px 0 4px; color:var(--t1); transition:color 0.5s; }
.tl-where { font-size:14px; font-weight:500; color:var(--t2); margin-bottom:8px; transition:color 0.5s; }
.tl-desc { font-size:14px; color:var(--t3); line-height:1.7; transition:color 0.5s; }

/* ── CONTACT ──────────────────────────────────────────────── */
.contact-links { display:flex; flex-direction:column; max-width:560px; }
.c-link { display:flex; align-items:center; gap:16px; text-decoration:none; padding:16px 20px; border-radius:var(--radius-md); color:var(--t2); margin-bottom:12px; transition:color 0.3s, background 0.3s, transform 0.3s; }
.c-link:hover { color:var(--t1); transform:translateX(6px); background:rgba(128,128,128,0.07); }
.c-link-icon { width:44px; height:44px; border-radius:12px; background:rgba(128,128,128,0.09); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.c-link-icon svg { width:22px; height:22px; }
.c-link-label { font-size:12px; font-weight:600; color:var(--t3); transition:color 0.5s; }
.c-link-val { font-size:15px; font-weight:700; color:var(--t1); transition:color 0.5s; margin-top:2px; }
.form-area { border-radius:var(--radius-lg); padding:36px; }
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:12px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; color:var(--t3); margin-bottom:8px; transition:color 0.5s; }
.form-input, .form-textarea { width:100%; background:rgba(128,128,128,0.07); border:1px solid rgba(128,128,128,0.15); border-radius:var(--radius-sm); padding:14px 18px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; color:var(--t1); outline:none; transition:border-color 0.3s, box-shadow 0.3s, background 0.5s, color 0.5s; }
.form-input::placeholder, .form-textarea::placeholder { color:var(--t3); }
.form-input:focus, .form-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--acc-r),var(--acc-g),var(--acc-b),0.12); }
.form-textarea { resize:vertical; min-height:110px; line-height:1.6; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { padding:40px 0; position:relative; z-index:1; border-top:1px solid rgba(128,128,128,0.1); display:flex; align-items:center; justify-content:space-between; }
footer span { font-size:14px; font-weight:500; color:var(--t3); transition:color 0.5s; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:768px){
  .proj-grid { grid-template-columns:1fr; }
  .proj-card.featured { grid-column:span 1; }
  .proj-card.featured .proj-thumb { aspect-ratio:16/9; }
  .about-grid { grid-template-columns:1fr; }
  .contact-grid, .cons-grid { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .skills-grid { grid-template-columns:1fr; }
  .cons-headline { padding:32px; }
  .cons-num { font-size:64px; }
}