/* Yasemin Demirdalic, personal site.
   Base rules give a complete, readable page with no JavaScript.
   Everything under .js turns the same markup into scroll-driven scenes. */

:root{
  --bg:#0d0c0b;
  --paper:#f1ece2;
  --ink:#171512;
  --muted:#958c80;
  --line:#2c2825;
  --accent:#ff6a47;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Archivo", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:"Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter:clamp(20px, 5vw, 72px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-anchor:none}
body{margin:0; background:var(--bg); color:var(--paper); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip}
a{color:inherit; text-decoration:none}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
::selection{background:var(--accent); color:var(--bg)}
img{display:block; max-width:100%; height:auto}
h1,h2,p,ul,dl,dd,figure{margin:0; padding:0}
ul{list-style:none}
i,em{font-style:normal}

.top{position:fixed; z-index:40; left:0; right:0; top:0; display:flex; justify-content:space-between; gap:16px; padding:16px var(--gutter); font:400 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff; mix-blend-mode:difference}
.top nav{display:flex; gap:20px}
.progress{position:fixed; z-index:41; left:0; right:0; top:0; height:2px; pointer-events:none}
.progress span{display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left}

/* ---------- plain layout ---------- */
.scene,.sheet{padding:clamp(70px,12vh,130px) var(--gutter)}
.field,.intro-fill,.intro-hint,.work-index,.work-wipe,.xk{display:none}

.intro-title{font:600 clamp(58px,15vw,220px)/.96 var(--display); letter-spacing:-.03em}
.intro-word,.intro-last{display:block}
.intro-kicker{margin-top:26px; font:400 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

.work-head,#what-i-built h2,.morph-cap h2{font:400 clamp(38px,6vw,84px)/1.04 var(--display); letter-spacing:-.02em}
.projects{display:grid; gap:44px; margin-top:44px; grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr))}
.project-shot{display:block; min-height:120px; background:#1a1816; overflow:hidden}
.project-shot img{width:100%; height:auto; object-fit:cover; object-position:top}
.project-text{display:grid; grid-template-columns:1fr auto; gap:2px 16px; margin-top:14px}
.project-text strong{font:400 clamp(24px,2.6vw,34px)/1.1 var(--display)}
.project-text i{grid-column:2; grid-row:1; align-self:center; font:400 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.project-text em{grid-column:1 / -1; color:var(--muted)}

.morph-cap{margin-bottom:56px}
.morph-lead{margin-top:10px; font:400 clamp(20px,2.4vw,32px)/1.2 var(--display)}
.morph-sub{margin-top:10px; max-width:720px; color:var(--muted)}

.built{margin-top:34px; border-top:1px solid var(--line); max-width:980px}
.built>div{display:grid; grid-template-columns:minmax(96px,170px) 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line)}
.built dt{font:400 11px/2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.note{margin-top:26px; max-width:680px; color:var(--muted)}

.award-block{margin-bottom:72px}
.award-label{font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.award-place{margin-top:14px; font:400 clamp(17px,1.5vw,22px)/1.2 var(--mono); letter-spacing:.02em; color:var(--muted)}
.award-name{margin-top:6px; font:500 clamp(30px,3.5vw,52px)/1.04 var(--display); letter-spacing:-.018em}
#taekwondo .award-name{font-size:clamp(38px,5.4vw,84px); line-height:.98; letter-spacing:-.025em}
#taekwondo .award-place{color:var(--accent)}
.gold-1{display:inline-block; font:600 clamp(64px,7.4vw,112px)/.8 var(--display); letter-spacing:-.02em; margin-right:.04em; vertical-align:-.04em; transform-origin:70% 80%; background:linear-gradient(105deg,#a9791f 0%,#f6d774 28%,#fff3c2 42%,#e7b63f 58%,#a9791f 100%) 0 0/220% 100%; -webkit-background-clip:text; background-clip:text; color:#e7b63f; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 22px rgba(231,182,63,.28))}
.award-meta{margin-top:10px; font:400 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.award-minor{margin-top:20px; display:grid; gap:7px; font-size:14px; line-height:1.35; color:#c2b9ad}
.award-minor b{display:inline-block; min-width:74px; margin-right:6px; font:400 10px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}

.closing-line{font:400 clamp(44px,8.6vw,132px)/1 var(--display); letter-spacing:-.025em}

#contact{display:grid; gap:clamp(30px,6vw,84px); grid-template-columns:auto minmax(0,1fr); align-items:end}
.portrait{overflow:hidden; width:clamp(150px,16vw,240px)}
.portrait img{width:100%; height:auto; aspect-ratio:920/1150; object-fit:cover; object-position:50% 70%}
.mail{display:block; font:400 clamp(29px,5.8vw,86px)/1.02 var(--display); letter-spacing:-.025em; overflow-wrap:anywhere; background:linear-gradient(var(--accent),var(--accent)) left bottom/0 2px no-repeat; transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.mail:hover{background-size:100% 2px}
.contact-links{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:24px; font:400 12px var(--mono); overflow-wrap:anywhere}
.contact-links a:hover{color:var(--accent)}
.edu{margin-top:34px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted)}
.edu strong{font-weight:500; color:var(--paper)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:24px var(--gutter) 30px; border-top:1px solid var(--line); font:400 10px var(--mono); letter-spacing:.06em; color:var(--muted)}
@media (max-width:700px){
  #contact{grid-template-columns:1fr}
  .portrait{width:150px}
}

/* ---------- scenes (only with JavaScript and motion allowed) ---------- */
.js .scene{padding:0; position:relative}
.js .stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; overflow:clip}
.js .field{display:block; position:absolute; inset:0; width:100%; height:100%}
.js #intro{height:280vh}
.js #work{height:780vh; background:var(--paper)}
.js #morph{height:360vh}
.js #achievements{height:680vh}
.js #closing{height:220vh}

/* intro */
.js #intro .stage{background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.js .intro-fill{display:block; position:absolute; inset:0; z-index:2; background:var(--paper); opacity:0}
.js .intro-title{position:relative; z-index:1; font-size:clamp(72px,19vw,330px)}
.js .intro-word{display:inline-block}
.js .intro-last{font-size:.22em; font-weight:400; letter-spacing:-.01em; margin-top:.12em}
.js .intro-kicker{position:relative; z-index:1; text-align:center}
.js .intro-hint{display:block; position:absolute; left:0; right:0; bottom:30px; font:400 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* work */
.js #work .stage{background:var(--paper); color:var(--ink)}
.js .work-head{position:absolute; z-index:5000; left:var(--gutter); top:44px; font:400 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#6d645a}
.js .work-index{display:block; position:absolute; left:50%; top:50%; margin:0; font:300 min(62vw,92vh)/.8 var(--display); letter-spacing:-.05em; color:#e4dccd; transform:translate(-50%,-50%); white-space:nowrap}
.js .projects{display:block; margin:0; position:absolute; inset:0; perspective:1000px}
.js .project{position:absolute; left:50%; top:52%; width:min(72vw, calc((100svh - 190px) * 1.6)); opacity:0; will-change:transform,opacity; pointer-events:none}
.js .project a{display:block; pointer-events:none}
.js .project.is-active a{pointer-events:auto}
.js .project-shot img{max-height:calc(100svh - 200px)}
.js .project-shot{background:#d9d1c2; box-shadow:0 34px 90px rgba(23,21,18,.28)}
.js .project a:hover img{transform:scale(1.025)}
.js .project img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.js .project-text em{color:#5e564c}
.js .project-text i{color:#6d645a}
.js .work-wipe{display:block; position:absolute; inset:0; z-index:6000; background:#0a0909; clip-path:circle(0 at 50% 50%); pointer-events:none}

/* morph */
.js #morph .stage,.js #achievements .stage{background:#0a0909}
.js .morph-cap{position:absolute; left:0; right:0; bottom:8vh; margin:0; padding:0 6vw; text-align:center; opacity:0; pointer-events:none}
.js .morph-cap h2{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.js .morph-sub{margin-inline:auto}

/* sections between scenes */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1; transform:none}
.js .portrait.reveal{transform:none; transition:opacity .4s ease}
.js .portrait img{clip-path:inset(100% 0 0 0); transform:scale(1.16); transition:clip-path 1.3s cubic-bezier(.7,0,.2,1), transform 1.8s cubic-bezier(.2,.7,.2,1)}
.js .portrait.in img{clip-path:inset(0); transform:scale(1)}

/* achievements */
.js .award-block{position:absolute; right:var(--gutter); top:50%; width:38vw; margin:0; transform:translateY(-50%); opacity:0}
.js #taekwondo .award-name{font-size:clamp(38px,4.9vw,76px)}
@media (max-aspect-ratio:11/10), (max-width:639px){
  .js .award-block{left:var(--gutter); right:var(--gutter); top:auto; bottom:14px; width:auto; transform:none}
  .gold-1{font-size:64px}
  .js .award-minor{margin-top:14px; gap:5px; font-size:13px}
}
@media (max-width:639px){
  .js .project{width:88vw}
}
.js .project.is-active a{pointer-events:auto}

/* closing */
.js #closing .stage{background:var(--bg); display:flex; align-items:center; justify-content:center; text-align:center; padding:0 var(--gutter)}
.js .word{display:inline-block; white-space:nowrap}
.js .ch{display:inline-block; opacity:0; will-change:transform,opacity}

/* inside XEKTA */
.js #what-i-built{height:760vh; padding:0}
.js #what-i-built .stage{background:#0a0909}
.js #what-i-built .inside-head{position:absolute; z-index:3; left:var(--gutter); top:44px; font:400 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.js .xk{display:block; position:absolute; inset:0}
.xk-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.xk-line{fill:none; stroke:var(--accent); stroke-width:1.5; opacity:0}
.xk-line[data-from="workos"],.xk-line[data-from="supabase"],.xk-line[data-from="postgres"],.xk-line[data-from="railway"]{stroke:#5b544c}
.xk-packet{position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--accent); box-shadow:0 0 20px 5px rgba(255,106,71,.6); opacity:0}
.xk-node{position:absolute; width:max-content; opacity:0; will-change:transform,opacity}
.xk-node small{position:absolute; top:100%; left:50%; margin-top:7px; padding:1px 6px; transform:translateX(-50%); background:#0a0909; font:400 10px var(--mono); letter-spacing:.06em; color:var(--muted); white-space:nowrap}
.xk-tile{display:grid; place-items:center; width:clamp(62px,6vw,88px); aspect-ratio:1; border-radius:20px; background:#16140f; border:1px solid #2f2b26; transition:border-color .5s, box-shadow .5s}
.xk-tile img{width:62%; height:62%; object-fit:contain; border-radius:10px}
.xk-mono img{filter:brightness(0) invert(1); border-radius:0; width:50%; height:50%}
.xk-shop{color:var(--paper)}
.xk-node[data-node="chatgpt"] .xk-tile,.xk-node[data-node="claude"] .xk-tile,.xk-node[data-node="muse"] .xk-tile{background:var(--paper); border-color:var(--paper)}
.xk-node.is-lit .xk-tile{border-color:#57504a}
.xk-hub .xk-tile{width:clamp(112px,13vw,190px); aspect-ratio:1.6; background:var(--paper); color:var(--ink); border:0; box-shadow:0 0 70px rgba(241,236,226,.2)}
.xk-hub b{font:600 clamp(24px,2.9vw,42px)/1 var(--display); letter-spacing:-.01em}
.xk-small b{font:500 13px var(--display); color:var(--paper)}
.xk-bubble{position:absolute; width:max-content; max-width:min(78vw,300px); min-height:1.3em; margin:0; padding:10px 15px; transform:translate(-50%,-50%); border-radius:14px 14px 14px 3px; background:var(--accent); color:#1a0e0a; font-size:clamp(14px,1.1vw,16px); line-height:1.3; opacity:0}
.xk-chips{position:absolute; display:flex; gap:6px; transform:translateX(-50%); opacity:0; width:max-content}
.xk-chip{padding:5px 9px; border:1px solid #3a352f; border-radius:99px; font:400 clamp(9px,.75vw,11px) var(--mono); color:var(--muted); transition:background .25s,color .25s,border-color .25s}
.xk-chip.is-on{background:var(--accent); border-color:var(--accent); color:#1a0e0a}
.xk-pos{position:absolute; display:flex; align-items:center; gap:10px; transform:translateX(-50%); opacity:0; width:max-content; font:500 11px var(--display); color:var(--paper)}
.xk-pos img{filter:brightness(0) invert(1); width:18px; height:18px}
.js .built{position:absolute; z-index:3; inset:0; margin:0; border:0; max-width:none; pointer-events:none}
.js .built>div{position:absolute; left:50%; top:clamp(70px,12vh,120px); width:min(860px,86vw); display:block; padding:0; border:0; text-align:center; opacity:0}
.js .built dt{font:500 11px var(--mono); letter-spacing:.14em; color:var(--accent); margin-bottom:8px}
.js .built dd{font:400 clamp(20px,2.3vw,33px)/1.18 var(--display); letter-spacing:-.01em}
@media (max-aspect-ratio:11/10), (max-width:639px){
  .xk-tile{width:58px; border-radius:15px}
  .xk-hub .xk-tile{width:112px}
  .js .built>div{top:72px}
  .js .built dd{font-size:19px}
  .xk-chip{padding:4px 7px; font-size:9px}
}


@media (max-height:680px) and (max-aspect-ratio:11/10){
  .js .award-name,.js #taekwondo .award-name{font-size:27px}
  .js .award-minor{margin-top:10px; gap:3px; font-size:11.5px; line-height:1.25}
  .js .award-minor b{min-width:0; font-size:9px}
  .js .award-meta{margin-top:6px}
  .gold-1{font-size:60px}
}