/* =========================================================
   milė.ka portfolio — shared styles
   ========================================================= */
:root{
  --ink:#141416; --ink2:#2b2b31; --muted:#6c6c75; --line:#ececf0; --bg:#ffffff; --soft:#f6f6f8;
  --red:#e0352b; --radius:28px;
  --shadow:0 30px 60px -24px rgba(20,16,40,.28);
  --font:"Inter Tight",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (not hidden) keeps the sticky nav working: hidden on both html and body turns body into a scroll box */
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}body{overflow-x:visible}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.dot{color:var(--red)}
::selection{background:var(--red);color:#fff}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:"Quicksand",sans-serif;font-weight:300;font-size:30px;letter-spacing:.3px;line-height:1;display:inline-flex;align-items:baseline;transition:opacity .2s}
.logo i{font-style:normal;color:var(--red);display:inline-block;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.logo:hover i{transform:translateY(-6px) scale(1.3)}
.links{display:flex;gap:34px;align-items:center;font-weight:500;font-size:15px}
.links a{position:relative;padding:6px 0}
.links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .3s}
.links a:hover::after,.links a.on::after{width:100%}
.links .btn{padding:10px 18px;font-size:14px}
.links .btn::after{display:none}
#prog{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--red);z-index:60;transform-origin:left;transform:scaleX(0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 26px;font-weight:600;font-size:16px;background:var(--ink);color:#fff;border:1px solid var(--ink);cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.45);background:var(--red);border-color:var(--red)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:#d9d9df}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:var(--ink);border-color:var(--ink)}
.btn.outline-red{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.btn.outline-red:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* CV button (main.js [data-cv]): opens a small menu to pick the language of the PDF */
.cvp{position:relative;display:inline-block}
/* the row of buttons is an animated block (.rv): lift it above what follows, so the open menu covers it */
:has(> .cvp.open){position:relative;z-index:60}
.cvp > .btn svg{width:16px;height:16px;transition:transform .25s}
.cvp.open > .btn svg{transform:rotate(180deg)}
.cvp-menu{position:absolute;left:0;top:calc(100% + 10px);z-index:40;min-width:210px;padding:8px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),0 26px 50px -22px rgba(20,12,45,.38)}
.cvp-menu.up{top:auto;bottom:calc(100% + 10px)}
.cvp.open .cvp-menu{animation:cvp-in .2s cubic-bezier(.2,.7,.2,1)}
@keyframes cvp-in{from{opacity:0;transform:translateY(-6px)}}
.cvp-menu .t{display:block;padding:8px 12px 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cvp-menu a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;padding:9px 10px 9px 14px;border-radius:14px;color:var(--ink);transition:background .2s}
.cvp-menu a:hover,.cvp-menu a:focus-visible{background:var(--soft);outline:none}
.cvp-menu b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.cvp-menu small{grid-column:1;font-size:12.5px;color:var(--muted)}
.cvp-menu i{grid-column:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;transition:transform .2s}
.cvp-menu i svg{width:16px;height:16px}
.cvp-menu a:hover i{transform:translateY(2px)}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--red)}
.label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
h1,h2,h3{letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(34px,4.6vw,56px);font-weight:700;margin-bottom:22px;max-width:860px}
h3{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
p.body{font-size:18px;color:#3b3b43;max-width:680px}
p.body+p.body{margin-top:16px}
.muted{color:var(--muted)}
section.block{padding-top:130px}

/* ---------- handwritten notes ---------- */
.note{position:absolute;z-index:8;font-family:"Caveat",cursive;font-size:30px;line-height:1.05;color:#24242a;white-space:nowrap;pointer-events:none}
.note span{display:inline-block;transform:rotate(-4deg)}
.note::after{content:"";display:block;width:70px;height:3px;border-radius:3px;background:var(--u,var(--red));margin:8px 0 0 6px;transform:rotate(-3deg)}
.note svg{position:absolute;width:90px;height:70px;color:#24242a}
.note.light{color:#f5efe9}.note.light svg{color:#f5efe9}

/* ---------- float / tilt ---------- */
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes bob2{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:2deg}}
.float{animation:bob 6.5s ease-in-out infinite;will-change:translate}
.float.d1{animation-delay:-1.5s}.float.d2{animation-delay:-3s;animation-name:bob2}.float.d3{animation-delay:-4.5s;animation-duration:7.5s}
.tilt-r{transform:perspective(2200px) rotateX(10deg) rotateY(-22deg) rotateZ(6deg)}
.tilt-l{transform:perspective(2200px) rotateX(10deg) rotateY(22deg) rotateZ(-6deg)}
.tilt-s{transform:perspective(2200px) rotateX(6deg) rotateY(-10deg) rotateZ(3deg)}
.tilt-w{transform:perspective(2600px) rotateX(14deg) rotateY(-14deg) rotateZ(4deg)}
.prop{position:absolute;z-index:6;border-radius:16px;box-shadow:0 22px 40px -18px rgba(25,15,60,.35)}
.prop.png{box-shadow:none;border-radius:0;filter:drop-shadow(0 18px 24px rgba(25,15,60,.28))}
.prop.round{border-radius:50%}

/* ---------- iPhone mockup ---------- */
.phone{position:relative;width:280px;aspect-ratio:390/844;border-radius:52px;padding:8px;flex:none;
  background:linear-gradient(135deg,#f3f3f5 0%,#a8a8ae 18%,#e8e8eb 38%,#8b8b91 62%,#d6d6da 80%,#9a9aa0 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 2px 2px rgba(0,0,0,.18),0 40px 70px -28px rgba(20,12,45,.45);
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.phone .bez{width:100%;height:100%;border-radius:45px;background:#050505;padding:6px}
.phone .scr{position:relative;width:100%;height:100%;border-radius:39px;overflow:hidden;background:var(--scr,#fff)}
.phone .scr img{width:100%;height:auto;display:block}
.phone .scr .shot{width:100%;height:100%;overflow:hidden}
.phone.sb .scr{padding-top:40px}
.phone .isl{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:31%;height:24px;background:#000;border-radius:20px;z-index:4}
.phone.native .isl{display:none}
.phone .sbar{position:absolute;inset:0 0 auto 0;height:40px;display:flex;justify-content:space-between;align-items:center;padding:2px 24px 0 28px;font-weight:600;font-size:13px;z-index:3;color:var(--sbc,#111)}
.phone .sbar svg{fill:currentColor}
.phone .sbar .ic{display:flex;gap:4px;align-items:center}
.phone .btns i{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#86868c,#d3d3d7)}
.phone .btns i:nth-child(1){left:-2px;top:17%;height:5%}.phone .btns i:nth-child(2){left:-2px;top:25%;height:9%}.phone .btns i:nth-child(3){left:-2px;top:36%;height:9%}.phone .btns i:nth-child(4){right:-2px;top:28%;height:13%}
.phone::after{content:"";position:absolute;inset:0;border-radius:52px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%)}
.phone.scroll .scr img{animation:scrollshot 18s ease-in-out infinite alternate}
@keyframes scrollshot{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--sy,-70%))}}

/* ---------- browser window mockup ---------- */
.win{position:relative;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 80px -30px rgba(20,12,45,.45);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.win .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f1f1f4;border-bottom:1px solid #e4e4e9}
.win .bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.win .bar i:nth-child(2){background:#febc2e}.win .bar i:nth-child(3){background:#28c840}
.win .bar .url{margin-left:14px;flex:1;max-width:280px;height:20px;border-radius:6px;background:#fff;font-size:11px;color:#888;display:flex;align-items:center;padding:0 10px;overflow:hidden;white-space:nowrap}
.win .view{overflow:hidden;position:relative}
.win .view img{width:100%;height:auto}
.win.scroll .view img{animation:scrollshot 20s ease-in-out infinite alternate}

/* ---------- reveal ----------
   A keyframe animation on the individual `translate` / `scale` properties, so it never fights a component's own
   `transition` or hover `transform` (a transition-based reveal lost its fade on cards and delayed their hover). */
.rv{opacity:0}
.rv.in{opacity:1;animation:rv-in .9s cubic-bezier(.2,.7,.2,1) backwards}
.rv.in.d1{animation-delay:.1s}.rv.in.d2{animation-delay:.2s}.rv.in.d3{animation-delay:.3s}
@keyframes rv-in{from{opacity:0;translate:0 34px}}
/* text settles out of a soft blur */
:is(p,li,dl,small,.label,.eyebrow,.cs-eyebrow,.cs-kicker,.cs-lead,.cs-tag).rv.in{animation-name:rv-txt}
@keyframes rv-txt{from{opacity:0;translate:0 22px;filter:blur(6px)}}
/* big visuals rise and grow in a touch */
:is(.cs-stage,.cover,.cover-ba,figure,.card,.contact,.win,.bw,.nt).rv.in{animation-name:rv-vis;animation-duration:1.1s}
@keyframes rv-vis{from{opacity:0;translate:0 44px;scale:.975}}
/* headings split into words by main.js: each word rises out of a blur, one after another */
.rv-words .w{display:inline-block}
.rv.rv-words{opacity:1}
.rv.rv-words.in{animation:none}
.rv-words:not(.in) .w{opacity:0}
.rv-words.in .w{animation:rv-word .85s cubic-bezier(.2,.7,.2,1) calc(var(--wd,0s) + var(--i,0) * 55ms) backwards}
@keyframes rv-word{from{opacity:0;translate:0 .42em;filter:blur(8px)}}
.rv-words:not(.in) .wp{opacity:0}
.rv-words.in .wp{animation:rv-fade .6s ease calc(var(--wd,0s) + var(--i,0) * 55ms + .3s) backwards}
@keyframes rv-fade{from{opacity:0}}
.rv-words.d1{--wd:.1s}.rv-words.d2{--wd:.2s}.rv-words.d3{--wd:.3s}
/* children of a revealed row follow one by one */
.rv.in :is(.cs-row,.cs-web,.cs-devices,.phones,.cs-col) > :not(.rv){animation:rv-kid .8s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--k,0) * 80ms) backwards}
@keyframes rv-kid{from{opacity:0;translate:0 26px}}

/* list items inside a revealed block follow one by one */
.rv.in :is(ul,ol) > li:not(.rv){animation:rv-li .7s cubic-bezier(.2,.7,.2,1) calc(.22s + var(--k,0) * 70ms) backwards}
@keyframes rv-li{from{opacity:0;translate:-10px 0}}
/* hand-drawn arrows draw themselves once their note is in view (main.js gives them pathLength=1 and .draw) */
/* the transitions live on the drawn state only, so adding .draw on load hides them without an "undraw" */
:is(.note,.hand) svg path.draw{stroke-dasharray:1;stroke-dashoffset:1}
:is(.in .note,.note.in,.in .hand,.hand.in) svg path.draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.3,1) .45s}
.note::after{transform-origin:left}
.note.rv:not(.in)::after,.rv:not(.in) .note::after{scale:0 1}
:is(.note.rv.in,.rv.in .note)::after{transition:scale .7s cubic-bezier(.2,.7,.2,1) .9s}
/* scroll-linked depth (where supported): a case-study cover settles back as you scroll past it,
   project-card visuals drift a little against the scroll */
@supports (animation-timeline:view()){
  .cs-cover{animation:cover-out linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
  @keyframes cover-out{to{scale:.955;opacity:.55;translate:0 50px}}
  .card .media .stage{animation:card-drift linear both;animation-timeline:view();animation-range:cover}
  @keyframes card-drift{from{translate:0 22px}to{translate:0 -22px}}
}
@media (prefers-reduced-motion:reduce){
  .cs-cover,.card .media .stage,.rv.in :is(ul,ol) > li{animation:none!important}
  :is(.note,.hand) svg path.draw{stroke-dashoffset:0;transition:none}
  .note::after{scale:1!important;transition:none}
}

/* sideways rows (phones): the edge that has more to show fades out, so the row reads as swipeable, not cut */
.x-more{--xl:0px;--xr:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--xl),#000 calc(100% - var(--xr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--xl),#000 calc(100% - var(--xr)),transparent 100%)}
.x-more.x-l{--xl:28px}.x-more.x-r{--xr:48px}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* the trailing padding equals the gap, so -50% lands exactly on the copy and the loop has no jump */
.marquee .track{display:flex;gap:20px;padding-right:20px;width:max-content;animation:mq var(--dur,40s) linear infinite}
.marquee.rev .track{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* a marquee that can also be moved by hand (.grab, main.js): it scrolls instead of animating; no scrollbar */
/* a scrolling box clips on all sides: room above and below (taken back by the margins) for the hover lift and its shadow */
.marquee.grab{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:16px 0 44px;margin:-16px 0 -44px}
.marquee.grab{-webkit-mask-image:none;mask-image:none}     /* her wish (2026-10-22): no fade at the edges, the squares stay sharp */
.marquee.grab::-webkit-scrollbar{display:none}
.marquee.grab .track{animation:none}
.marquee.grab.held{user-select:none}
.marquee.grab img{-webkit-user-drag:none;user-select:none}
.marquee.grab:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.logo-tile{flex:none;width:200px;height:96px;border-radius:20px;border:1.5px dashed #d6d6dd;display:grid;place-items:center;font-weight:600;color:#9a9aa3;font-size:15px;background:#fff;transition:all .3s}
.logo-tile:hover{border-color:var(--red);color:var(--red);transform:translateY(-4px)}
.logo-tile.sm{width:160px;height:64px;border-radius:14px;font-size:14px}
.fun-tile{flex:none;width:230px;height:420px;border-radius:26px;background:var(--soft);border:1.5px dashed #d6d6dd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9a9aa3;font-weight:600;font-size:14px;overflow:hidden;transition:transform .35s,box-shadow .35s}
.fun-tile:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:var(--shadow)}
.fun-tile.el{background:#fff;border:1px solid var(--line);padding:18px}
.fun-tile.el img{max-height:100%;width:auto;object-fit:contain;border-radius:14px}
.fun-tile .ph-ic{width:46px;height:46px;border-radius:14px;background:#ececf1;display:grid;place-items:center;font-size:20px}

/* ---------- placeholder marker ---------- */
.ph{background:#fff4c2;color:#7a5b00;padding:1px 6px;border-radius:5px;font-weight:600}

/* ---------- before/after ---------- */
.ba{position:relative;overflow:hidden;border-radius:20px;user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.ba .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:18px;font-weight:700;color:#111;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.ba .tag{position:absolute;top:14px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.65);color:#fff;z-index:2}
.ba .tag.l{left:14px}.ba .tag.r{right:14px;background:var(--accent,#111)}

/* ---------- footer ---------- */
footer.site{padding:44px 0 60px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:14px}
footer.site .soc{display:flex;gap:18px}
footer.site .soc a{transition:color .2s}
footer.site .soc a:hover{color:var(--red)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .wrap{padding:0 16px}
  .links{gap:18px;font-size:14px}
  .links .hide-m{display:none}
  section.block{padding-top:90px}
  .note{font-size:24px}
  .hide-m{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .float,.marquee .track,.phone.scroll .scr img,.win.scroll .view img{animation:none!important}
  .rv,.rv-words .w{opacity:1!important;animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- page to page: a short cross-fade between the portfolio's own pages (where supported) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;translate:0 -12px}}
@keyframes vt-in{from{opacity:0;translate:0 18px}}

/* ---------- stage: fixed composition scaled by JS ---------- */
.stage{position:absolute!important;left:50%;top:0;transform-origin:top center}
.stage > *{position:absolute}

/* ---------- the cursor is a red dot (added by main.js, only where there is a real mouse) ----------
   It opens into a ring over anything that can be clicked, and shrinks on a press. A thin white edge keeps it
   visible on red buttons and on dark pages. The normal cursor stays if the script does not run. */
html.has-cur,html.has-cur *{cursor:none!important}
.cur{position:fixed;left:0;top:0;z-index:9999;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#e0352b;box-shadow:0 0 0 1.5px rgba(255,255,255,.85);pointer-events:none;opacity:0;transition:opacity .2s,scale .22s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .2s}
.cur.show{opacity:1}
.cur.on{scale:2.8;background:rgba(224,53,43,.18);box-shadow:inset 0 0 0 .55px #e0352b,0 0 0 .5px rgba(255,255,255,.8)}
.cur.no{background:#9a9aa3}
.cur.dn{scale:.7}
.cur.on.dn{scale:2.2}
@media (forced-colors:active){html.has-cur,html.has-cur *{cursor:auto!important}.cur{display:none}}
@media print{.cur{display:none}}