/* ============================================================
   JAN PORTFOLIO — main.css
   ============================================================ */

:root {
  --bg:      #0a0a0a;
  --bg2:     #111111;
  --bg3:     #161616;
  --border:  #222222;
  --orange:  #f97316;
  --orange2: #ea6b0a;
  --text:    #f0f0f0;
  --muted:   #666666;
  --mid:     #999999;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}

/* ── CUSTOM CURSOR ── */
#cur {
  position: fixed; width: 10px; height: 10px;
  background: var(--orange); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transition: transform .15s, width .2s, height .2s;
}
#curRing {
  position: fixed; width: 38px; height: 38px;
  border: 1.5px solid rgba(249,115,22,.5); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transition: width .25s, height .25s, border-color .25s;
}
#curRing.big { width: 64px; height: 64px; border-color: var(--orange); }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 72px; height: 62px;
  background: rgba(10,10,10,0);
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
nav.scrolled {
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--border);
}
.logo {
  font-size: 22px; font-weight: 800; letter-spacing: -1px;
  color: var(--text); text-decoration: none; flex-shrink: 0;
}
.logo span { color: var(--orange); }

/* ── TAB BAR ── */
.nav-tabbar {
  position: fixed; top: 62px; left: 0; right: 0; z-index: 199;
  display: flex; align-items: center;
  padding: 0 72px; height: 42px;
  background: rgba(10,10,10,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; gap: 2px;
}
.nav-tabbar::-webkit-scrollbar { display: none; }
.nav-tab {
  display: flex; align-items: center;
  padding: 6px 16px;
  color: var(--muted); text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  border-radius: 4px; white-space: nowrap; cursor: none;
  transition: color .2s, background .2s; flex-shrink: 0;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active {
  color: #fff; background: var(--orange); font-weight: 600;
  box-shadow: 0 0 18px rgba(249,115,22,.3);
}

/* top nav links */
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 500; letter-spacing: .03em;
  color: var(--mid); text-decoration: none;
  transition: color .2s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--orange); border-radius: 1px;
  transform: scaleX(0); transition: transform .25s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--orange); }
.nav-hire {
  padding: 8px 20px; background: var(--orange); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 13px;
  border-radius: 4px; transition: background .2s, box-shadow .2s; flex-shrink: 0;
}
.nav-hire:hover { background: var(--orange2); box-shadow: 0 0 24px rgba(249,115,22,.4); }

/* ── HERO ── */
#home {
  min-height: 100vh; display: flex; align-items: center;
  padding: 0 72px; padding-top: 80px;
  position: relative; overflow: hidden;
}
.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(249,115,22,.07); pointer-events: none;
}
.ring1 { width: 700px; height: 700px; right: -180px; top: 50%; transform: translateY(-50%); }
.ring2 { width: 520px; height: 520px; right: -90px;  top: 50%; transform: translateY(-50%); }
.ring3 { width: 340px; height: 340px; right: 0;      top: 50%; transform: translateY(-50%); }
#bgCanvas { position: absolute; inset: 0; pointer-events: none; opacity: .5; }

.hero-left { position: relative; z-index: 2; flex: 1; }
.hero-greeting {
  font-size: 15px; font-weight: 400; color: var(--mid);
  margin-bottom: 8px; letter-spacing: .05em;
  opacity: 0; animation: up .6s .1s forwards;
}
.hero-name {
  font-size: clamp(36px,4.5vw,56px); font-weight: 700;
  color: var(--text); margin-bottom: 16px; letter-spacing: -.5px;
  opacity: 0; animation: up .7s .25s forwards;
}
.hero-title-wrap {
  font-size: clamp(48px,7vw,86px); font-weight: 900;
  letter-spacing: -2px; line-height: 1; margin-bottom: 32px;
  opacity: 0; animation: up .7s .4s forwards;
}
.hero-title-static { color: var(--orange); }
.typed-cursor { color: var(--orange); animation: blink 1s step-end infinite; }

.hero-social { display: flex; gap: 14px; margin-bottom: 40px; opacity: 0; animation: up .6s .55s forwards; }
.soc-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--mid); text-decoration: none; font-size: 15px;
  transition: border-color .2s, color .2s, background .2s;
}
.soc-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(249,115,22,.1); }

.hero-btns { display: flex; gap: 16px; margin-bottom: 60px; opacity: 0; animation: up .6s .7s forwards; }
.btn-orange {
  padding: 14px 36px; background: var(--orange); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 4px;
  transition: background .2s, box-shadow .2s, transform .2s;
  border: 2px solid var(--orange);
}
.btn-orange:hover { background: var(--orange2); box-shadow: 0 0 28px rgba(249,115,22,.4); transform: translateY(-2px); }
.btn-outline {
  padding: 14px 36px; border: 2px solid var(--border); color: var(--text);
  text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 4px;
  transition: border-color .2s, color .2s, transform .2s;
}
.btn-outline:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }

.hero-stats {
  display: flex; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  opacity: 0; animation: up .6s .85s forwards; width: fit-content;
}
.hstat { padding: 20px 36px; border-right: 1px solid var(--border); }
.hstat:last-child { border-right: none; }
.hstat-num { font-size: 30px; font-weight: 800; color: var(--orange); letter-spacing: -1px; margin-bottom: 4px; }
.hstat-label { font-size: 12px; color: var(--muted); font-weight: 400; }

/* ── HERO PHOTO ── */
.hero-right {
  position: relative; z-index: 2; flex: 0 0 420px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; animation: fadeIn .9s .5s forwards;
}
.photo-container { position: relative; width: 380px; height: 460px; }
.photo-circle-bg {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle,rgba(249,115,22,.18),rgba(249,115,22,.04) 60%,transparent);
  bottom: 0; left: 50%; transform: translateX(-50%);
}
.photo-frame {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--border); background: var(--bg3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; transition: border-color .3s; cursor: pointer;
}
.photo-frame:hover { border-color: var(--orange); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: none; }
.photo-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--muted); text-align: center; padding: 20px;
}
.photo-placeholder svg { width: 52px; height: 52px; opacity: .4; }
.photo-placeholder p { font-size: 12px; letter-spacing: .05em; opacity: .5; line-height: 1.6; }
.photo-placeholder strong { color: var(--orange); opacity: .8; }
.photo-corner {
  position: absolute; width: 60px; height: 60px;
  border-top: 3px solid var(--orange); border-right: 3px solid var(--orange);
  top: -10px; right: -10px; border-radius: 0 8px 0 0;
}
.photo-corner2 {
  position: absolute; width: 60px; height: 60px;
  border-bottom: 3px solid var(--orange); border-left: 3px solid var(--orange);
  bottom: -10px; left: -10px; border-radius: 0 0 0 8px;
}
.photo-badge {
  position: absolute; bottom: 20px; right: -16px;
  background: var(--orange); color: #fff;
  padding: 10px 16px; border-radius: 6px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(249,115,22,.4);
}
#photoInput { display: none; }

/* ── SECTIONS BASE ── */
section { padding: 110px 72px; border-top: 1px solid var(--border); }

.sec-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px;
}
.sec-tag::before { content: ''; width: 28px; height: 2px; background: var(--orange); }
.sec-heading {
  font-size: clamp(32px,4.5vw,52px); font-weight: 800;
  letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 64px;
}

/* reveal on scroll */
.rev { opacity: 0; transform: translateY(36px); transition: opacity .75s ease, transform .75s ease; }
.rev.in { opacity: 1; transform: none; }

/* ── SERVICES ── */
#services { background: var(--bg); }
.services-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2px; background: var(--border);
}
.svc {
  background: var(--bg); padding: 44px 40px;
  position: relative; overflow: hidden; transition: background .3s;
}
.svc::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(249,115,22,.06),transparent);
  opacity: 0; transition: opacity .4s;
}
.svc:hover { background: var(--bg3); }
.svc:hover::before { opacity: 1; }
.svc-icon {
  width: 52px; height: 52px; background: rgba(249,115,22,.12); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px; font-size: 22px; transition: background .3s;
}
.svc:hover .svc-icon { background: rgba(249,115,22,.22); }
.svc-title { font-size: 19px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.3px; }
.svc-desc { font-size: 13px; color: var(--muted); line-height: 1.8; }

/* ── SKILLS ── */
#skills { background: var(--bg2); }
.skills-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.skill-bars { display: flex; flex-direction: column; gap: 24px; }
.skill-meta { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.skill-pct { color: var(--orange); }
.skill-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.skill-fill {
  height: 100%; background: linear-gradient(90deg,var(--orange),#fbbf24);
  border-radius: 2px; width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.tech-grid { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 10px; }
.tech-pill {
  padding: 8px 18px; border: 1.5px solid var(--border);
  font-size: 12px; font-weight: 500; letter-spacing: .05em;
  color: var(--mid); border-radius: 4px;
  transition: border-color .2s, color .2s, background .2s;
  font-family: 'JetBrains Mono', monospace;
}
.tech-pill:hover { border-color: var(--orange); color: var(--orange); background: rgba(249,115,22,.07); }

/* ── PORTFOLIO ── */
#portfolio { background: var(--bg); }
.port-filter { display: flex; gap: 10px; margin-bottom: 48px; flex-wrap: wrap; }
.filt-btn {
  padding: 8px 20px; border: 1.5px solid var(--border);
  background: transparent; color: var(--mid);
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .05em; border-radius: 4px; cursor: none; transition: all .2s;
}
.filt-btn.active, .filt-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(249,115,22,.08); }
.port-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.port-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.port-card:hover { border-color: var(--orange); transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,.4); }
.port-img {
  height: 200px; background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; position: relative; overflow: hidden;
}
.port-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.6));
}
.port-overlay {
  position: absolute; inset: 0; background: rgba(249,115,22,.15);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s; z-index: 2;
}
.port-card:hover .port-overlay { opacity: 1; }
.port-overlay-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.port-info { padding: 20px 24px 24px; }
.port-cat { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.port-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.3px; }
.port-desc { font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ── ABOUT ── */
#about { background: var(--bg2); }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.about-img {
  position: relative; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; height: 440px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.about-img-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
.about-img-inner svg { opacity: .25; width: 44px; }
.about-img-inner span { font-size: 12px; opacity: .4; }
.about-accent-line {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom,var(--orange),transparent); border-radius: 2px;
}
.about-text p { font-size: 14px; color: var(--muted); line-height: 1.9; margin-bottom: 20px; }
.about-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.ainfo { padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.ainfo-key { font-size: 10px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.ainfo-val { font-size: 13px; font-weight: 500; }

/* ── EXPERIENCE / TIMELINE ── */
#experience { background: var(--bg); }
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.tl-item { position: relative; margin-bottom: 48px; }
.tl-dot {
  position: absolute; left: -42px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border);
  transition: border-color .3s, box-shadow .3s;
}
.tl-item:hover .tl-dot { border-color: var(--orange); box-shadow: 0 0 14px rgba(249,115,22,.5); }
.tl-year { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.tl-company { font-size: 19px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.3px; }
.tl-role { font-size: 13px; color: var(--mid); margin-bottom: 12px; }
.tl-desc { font-size: 13px; color: var(--muted); line-height: 1.8; max-width: 600px; }

/* ── HOBBY ── */
#hobby { background: var(--bg); }
.hobby-intro { max-width: 600px; margin-bottom: 52px; font-size: 14px; color: var(--muted); line-height: 1.9; }
.hobby-gear { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); margin-bottom: 52px; }
.gear-item { background: var(--bg3); padding: 28px 32px; display: flex; align-items: flex-start; gap: 16px; }
.gear-icon {
  font-size: 22px; flex-shrink: 0; width: 46px; height: 46px;
  background: rgba(249,115,22,.1); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.gear-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.2px; }
.gear-desc { font-size: 12px; color: var(--muted); line-height: 1.7; }
.photo-gallery {
  display: grid; grid-template-columns: repeat(4,1fr);
  grid-template-rows: 200px 200px; gap: 10px;
}
.gal-item {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s, transform .3s;
}
.gal-item:hover { border-color: var(--orange); transform: scale(1.02); z-index: 2; }
.gal-item.big  { grid-column: span 2; grid-row: span 2; }
.gal-item.wide { grid-column: span 2; }
.gal-item img  { width: 100%; height: 100%; object-fit: cover; }
.gal-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); pointer-events: none; }
.gal-placeholder svg { width: 28px; height: 28px; opacity: .2; }
.gal-placeholder span { font-size: 10px; opacity: .3; letter-spacing: .08em; text-transform: uppercase; }
.gal-hover-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0); color: transparent;
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  transition: background .25s, color .25s; cursor: pointer;
}
.gal-item:hover .gal-hover-label { background: rgba(0,0,0,.55); color: var(--orange); }
.hobby-quote {
  margin-top: 48px; padding: 32px 40px;
  background: var(--bg3); border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0;
}
.hobby-quote blockquote { font-size: 17px; font-style: italic; color: var(--mid); line-height: 1.7; margin-bottom: 10px; letter-spacing: -.2px; }
.hobby-quote cite { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

/* ── CONTACT ── */
#contact { background: var(--bg2); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact-info .big-email {
  font-size: clamp(20px,2.5vw,28px); font-weight: 700;
  color: var(--orange); letter-spacing: -.5px;
  text-decoration: none; display: block; margin-bottom: 40px; transition: opacity .2s;
}
.contact-info .big-email:hover { opacity: .75; }
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.cdet { display: flex; align-items: center; gap: 14px; }
.cdet-icon {
  width: 38px; height: 38px; border-radius: 6px; background: rgba(249,115,22,.12);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.cdet-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.cdet-val { font-size: 13px; font-weight: 500; }
.cform { display: flex; flex-direction: column; gap: 16px; }
.cform input, .cform textarea {
  background: var(--bg3); border: 1.5px solid var(--border);
  color: var(--text); font-family: 'Outfit', sans-serif; font-size: 14px;
  padding: 14px 18px; border-radius: 6px; outline: none; transition: border-color .2s; resize: none;
}
.cform input::placeholder, .cform textarea::placeholder { color: var(--muted); }
.cform input:focus, .cform textarea:focus { border-color: var(--orange); }
.cform textarea { height: 130px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.submit-btn {
  padding: 15px 36px; background: var(--orange); color: #fff;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600;
  border: none; border-radius: 6px; cursor: none;
  transition: background .2s, box-shadow .2s, transform .2s; align-self: flex-start;
}
.submit-btn:hover { background: var(--orange2); box-shadow: 0 0 28px rgba(249,115,22,.4); transform: translateY(-2px); }
.form-success {
  padding: 14px 20px; background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3); border-radius: 6px;
  color: #4ade80; font-size: 13px; display: none;
}

/* ── FOOTER ── */
footer {
  padding: 32px 72px; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--muted);
}
.foot-logo { font-size: 18px; font-weight: 800; color: var(--text); }
.foot-logo span { color: var(--orange); }

/* ── SCROLL TO TOP ── */
#toTop {
  position: fixed; bottom: 32px; right: 32px; z-index: 300;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: none; font-size: 18px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s, transform .3s, box-shadow .2s; pointer-events: none;
}
#toTop.show { opacity: 1; transform: none; pointer-events: auto; }
#toTop:hover { box-shadow: 0 0 24px rgba(249,115,22,.5); }

/* ── ANIMATIONS ── */
@keyframes up      { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:none } }
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes blink   { 50% { opacity:0 } }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  nav { padding: 0 24px; }
  .nav-tabbar { padding: 0 24px; }
  .nav-links { display: none; }
  #home, section { padding-left: 24px; padding-right: 24px; }
  .hero-right { display: none; }
  .services-grid,
  .skills-layout,
  .about-layout,
  .contact-layout,
  .port-grid { grid-template-columns: 1fr; }
  .hobby-gear { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gal-item.big, .gal-item.wide { grid-column: span 1; grid-row: span 1; }
  footer { flex-direction: column; gap: 10px; text-align: center; padding: 24px; }
}