/* ===== lesyuk.dev — concept-d3 (ported from claude.ai/design) ===== */
:root{
  color-scheme:dark;
  --bg:#0B0D10; --panel:#0E1116; --panel2:#12151C; --panel3:#10131A;
  --text:#E8ECF2; --c3:#C3CAD9; --muted:#97A1B7; --dim:#6E7890; --dim2:#4A5261;
  --lc:151,161,183; --wc:255,255,255;
  --line:rgba(var(--lc),.14); --line2:rgba(var(--lc),.2);
  --acc:#7C86FF; --ok:#3ECF8E; --amb:#F5A97F;
  --headerbg:rgba(11,13,16,.9); --modalback:rgba(0,0,0,.6);
  --pincore:#E3E6FF; --cardbg-active:linear-gradient(180deg,#151827,#0F131C);
  --wdot:#2A2F3A;
  --syn-a:#C9E4A5; --syn-b:#F5A97F; --syn-c:#5AA6FF; --syn-d:#C678DD; --syn-e:#98A0FF;
}
/* light theme — neutral palette flips; accents stay. Dark stays byte-identical. */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F6F9; --panel:#FFFFFF; --panel2:#F3F5F8; --panel3:#ECEFF4;
  --text:#151A24; --c3:#3A4350; --muted:#5B6573; --dim:#727C8B; --dim2:#7C8592;
  --lc:71,85,105; --wc:15,23,42;
  --acc:#5257E0; --ok:#0E9F6E; --amb:#C2410C;
  --headerbg:rgba(255,255,255,.82); --modalback:rgba(15,23,42,.32);
  --pincore:#4A54D8; --cardbg-active:linear-gradient(180deg,#EEF0FF,#FFFFFF);
  --wdot:#CBD2DC;
  --syn-a:#3F8A2E; --syn-b:#C2410C; --syn-c:#1D6FD8; --syn-d:#9333EA; --syn-e:#4F46E5;
}
/* theme toggle icon: moon shown in dark, sun in light */
#themeBtn .ic-sun{display:none}
html[data-theme="light"] #themeBtn .ic-moon{display:none}
html[data-theme="light"] #themeBtn .ic-sun{display:block}
/* whole-page cross-fade on theme switch via View Transitions — uniform, no two-stage */
::view-transition-old(root),::view-transition-new(root){animation-duration:.36s;animation-timing-function:ease}
/* terminal window dots: soft & theme-aware; light up native macOS colors on hover */
.wdot{background:var(--wdot);transition:background .2s}
.term-win:hover .wdot:nth-of-type(1){background:#FF5F57}
.term-win:hover .wdot:nth-of-type(2){background:#FEBC2E}
.term-win:hover .wdot:nth-of-type(3){background:#28C840}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:Geist,ui-sans-serif,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:clip}
::selection{background:var(--acc);color:var(--bg)}
a{color:inherit}
button{font-family:inherit;touch-action:manipulation}
input{font-family:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.mono{font-family:"Geist Mono",ui-monospace,monospace}

@keyframes dCaret{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes dFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes dPulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}70%{box-shadow:0 0 0 9px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
@keyframes dPin{0%{box-shadow:0 0 0 0 rgba(124,134,255,.55)}70%{box-shadow:0 0 0 10px rgba(124,134,255,0)}100%{box-shadow:0 0 0 0 rgba(124,134,255,0)}}
/* inactive nodes = ultra-subtle tiny dot (recessive structural anchor, not a UI element) */
.pin{width:14px;height:14px;border-radius:50%;background:rgba(var(--lc),.3);border:2px solid transparent;cursor:pointer;z-index:2;transform:translateX(-50%) scale(.5);transition:transform .5s cubic-bezier(.22,1,.36,1),background .5s,border-color .5s,box-shadow .5s}
.pin::after{content:"";position:absolute;inset:-9px;border-radius:50%}
/* active node = layered light source: bright core scales up + accent ring + layered glow + breathing halo */
.exp-row.is-active .pin{transform:translateX(-50%) scale(1);background:var(--pincore);border-color:rgba(124,134,255,.6);box-shadow:0 0 0 4px rgba(124,134,255,.16),0 0 16px 2px rgba(124,134,255,.5)}
.exp-row.is-active .pin::before{content:"";position:absolute;inset:-11px;border-radius:50%;background:radial-gradient(circle,rgba(124,134,255,.5),rgba(124,134,255,0) 70%);z-index:-1;pointer-events:none;animation:tlpulse 2.6s ease-in-out infinite}
@keyframes tlpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.3)}}
.exp-d-date{color:var(--dim);transition:color .5s,text-shadow .5s}
.exp-d-loc{color:var(--dim);transition:color .5s}
.exp-row.is-active .exp-d-date{color:var(--text);text-shadow:0 0 18px rgba(124,134,255,.25)}
.exp-row.is-active .exp-d-loc{color:var(--muted)}
#tl-rail{position:absolute;width:2px;transform:translateX(-50%);pointer-events:none;z-index:0}
#tl-track{position:absolute;inset:0;background:rgba(var(--lc),.16);border-radius:2px}
/* active line = glowing gradient wire (fades in at top, brightens at the active node) */
#tl-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;background:linear-gradient(180deg,rgba(124,134,255,0) 0%,rgba(124,134,255,.45) 12%,var(--acc) 58%,var(--acc) 100%);box-shadow:0 0 12px rgba(124,134,255,.6);transition:height .9s cubic-bezier(.22,1,.36,1)}

/* base transitions / states (always apply) */
.navlink{font-size:11px;letter-spacing:.06em;color:var(--dim);text-decoration:none;transition:color .18s,text-shadow .18s}
.navlink.is-active{color:var(--text)}
.cue{opacity:0;transition:opacity .35s}
.iconbtn{transition:transform .18s,border-color .18s,color .18s,box-shadow .18s}
.btn-primary{transition:transform .18s,box-shadow .18s,filter .18s}
.btn-ghost{transition:transform .18s,border-color .18s,box-shadow .18s}
.social{transition:color .18s,border-color .18s,transform .18s,box-shadow .18s}
.about-tab{cursor:pointer;transition:color .2s,opacity .2s,background .2s}
.exp-card{border:1px solid rgba(var(--lc),.16);border-radius:14px;background:linear-gradient(180deg,var(--panel3),var(--panel));padding:20px 22px;box-shadow:0 4px 18px -8px rgba(0,0,0,.6);cursor:pointer;transition:border-color .5s,background .5s,box-shadow .5s,transform .2s}
.exp-row.is-active .exp-card{border-color:rgba(124,134,255,.4);background:var(--cardbg-active);box-shadow:0 12px 36px -12px rgba(124,134,255,.32),inset 0 0 0 1px rgba(124,134,255,.07)}
.proj-card{cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.open-link{transition:transform .18s}
.talk-row{cursor:pointer;transition:background .2s}
.ide-tab{transition:color .15s,background .15s,text-shadow .15s}
.contact-row .cval{transition:color .18s,text-shadow .18s}
.res-link{transition:transform .18s,border-color .18s}
.xclose{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.xclose:active{background:rgba(124,134,255,.2);color:var(--text)}
#modalCard:focus{outline:none}
#palItems,#modalOverlay{-webkit-overflow-scrolling:touch}
/* hide the modal's scroll indicator for a clean look (content is obviously scrollable) */
#modalOverlay{scrollbar-width:none}
#modalOverlay::-webkit-scrollbar{display:none}
/* Download Deck button — premium interactive hover */
.deck-dl svg{transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.deck-dl:hover{background:rgba(10,12,16,.82)}.deck-dl:hover svg{transform:translateY(2px)}}
/* touch: activate the centered project card (show DETAILS + subtle glow) */
@media (max-width:900px){.proj-card.is-active{border-color:rgba(124,134,255,.3)}.proj-card.is-active .cue{opacity:1}}
/* phone mockup — portrait Mini-App demo framed inside the 16:9 media slot */
.mk-bg{position:absolute;inset:-12%;background-position:center;background-size:cover;filter:blur(52px) saturate(1.35) brightness(.6);transform:scale(1.15)}
.mk-tint{position:absolute;inset:0;background:radial-gradient(120% 90% at 72% 0%,rgba(124,134,255,.32),transparent 62%),linear-gradient(180deg,rgba(10,11,18,.15),rgba(10,11,18,.55))}
.mk-phone{position:relative;height:88%;aspect-ratio:588/1280;background:#000;border-radius:34px;padding:5px;box-shadow:0 34px 80px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07)}
.mk-phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:30%;height:10px;background:#000;border-radius:99px;z-index:2}
.mk-screen{width:100%;height:100%;object-fit:cover;border-radius:29px;display:block}
.mk-label{position:absolute;left:20px;bottom:16px;z-index:3;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.75);text-transform:uppercase}
#palPanel{max-height:min(86dvh,780px);display:flex;flex-direction:column}
#palItems{max-height:none;flex:1;min-height:0}

/* hover states — only on real hover devices (no sticky :hover on touch/mobile) */
@media (hover:hover) and (pointer:fine){
  .brand:hover{color:var(--text)}
  .navlink:hover{color:var(--text);text-shadow:0 0 12px rgba(232,236,242,.6)}
  .iconbtn:hover{transform:scale(1.05);border-color:var(--acc);color:var(--text);box-shadow:0 0 16px rgba(124,134,255,.25)}
  .btn-primary:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 30px -8px rgba(124,134,255,.55);filter:brightness(1.1)}
  .btn-ghost:hover{transform:translateY(-2px) scale(1.03);border-color:var(--acc);box-shadow:0 0 18px rgba(124,134,255,.25)}
  .social:hover{color:var(--text);border-color:var(--acc);transform:scale(1.08);box-shadow:0 0 18px rgba(124,134,255,.3)}
  .about-tab:hover{color:var(--text) !important;opacity:1 !important;background:rgba(var(--lc),.08) !important}
  .exp-card:hover{border-color:rgba(124,134,255,.2);transform:translateY(-2px);box-shadow:0 14px 38px -14px rgba(0,0,0,.7)}
  .exp-card:hover .cue{opacity:1}
  .proj-card:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 18px 44px -18px rgba(124,134,255,.35)}
  .proj-card:hover .cue{opacity:1}
  .open-link:hover{transform:scale(1.08);text-decoration:underline}
  .talk-row:hover{background:rgba(var(--wc),.05) !important}
  .talk-row:hover .cue{opacity:1}
  .ide-tab:hover{color:var(--text) !important;background:var(--panel) !important;text-shadow:0 0 10px rgba(124,134,255,.45)}
  .contact-row:hover .cval{color:var(--text);text-shadow:0 0 14px rgba(124,134,255,.7)}
  .res-link:hover{transform:scale(1.05)}
  .xclose:hover{background:rgba(124,134,255,.14);color:var(--text)}
  .pal-item:hover{background:var(--panel2) !important}
}

/* image-slot placeholder (no real images yet — see README) */
.img-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:var(--panel);color:var(--dim);font-family:"Geist Mono",monospace;font-size:10px;
  letter-spacing:.08em;text-align:center;padding:10px;
  border:1px dashed rgba(var(--lc),.22);border-radius:inherit}

/* About media (photo grid on desktop → horizontal swipe on mobile) */
.about-media{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.about-media .am-main{grid-column:1 / -1}
.about-media.is-single{display:block}

/* experience git-timeline row */
.exp-row{display:grid;grid-template-columns:175px 40px minmax(0,1fr)}

/* mobile */
.mob{display:none}
@media (max-width:900px){
  .desk{display:none !important}
  .mob{display:flex !important}
  .exp-row{grid-template-columns:28px minmax(0,1fr)}
  /* touch: no hover to reveal DETAILS — show it on the active (centered) card instead */
  .exp-row.is-active .cue{opacity:1}
  .js-kbd{display:none}
  .hero-badge{font-size:10px;letter-spacing:.04em;padding:6px 11px}
  /* About: multi-photo tabs become a horizontal swipe row */
  .about-media.is-multi{display:flex;grid-template-columns:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none}
  .about-media.is-multi::-webkit-scrollbar{display:none}
  .about-media.is-multi .am-item{flex:0 0 82%;scroll-snap-align:center}
  .about-media.is-multi .am-main{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s !important;animation-iteration-count:1 !important;transition-duration:.01s !important}
  html{scroll-behavior:auto}
}