/* ORVEX LABS — portfolio */
:root{
  --bg:#0E1116; --bg-2:#141821; --fg:#F5F5F2; --muted:#9AA0AA; --line:rgba(245,245,242,.09);
  --purple:#5B5BF6; --purple-lt:#8B8BFA; --purple-ink:#6C6CFF;
  --card:rgba(245,245,242,.03); --card-line:rgba(245,245,242,.12);
  --f-display:"Sora",system-ui,sans-serif; --f-serif:"Instrument Serif",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace; --f-body:"Inter",system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px); --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="light"]{
  --bg:#F5F5F2; --bg-2:#EAEAE5; --fg:#0E1116; --muted:#5D626B; --line:rgba(14,17,22,.08);
  --purple-lt:#4B4BE0; --card:rgba(14,17,22,.025); --card-line:rgba(14,17,22,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block}
::selection{background:var(--purple);color:#fff}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--purple);outline-offset:4px;border-radius:4px}

/* grid lines */
.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/8));
  background-size:100% 100%}
@media (max-width:700px){.grid-lines{background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/4))}}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:#0E1116;color:#F5F5F2;display:grid;place-items:center;transition:transform .9s var(--ease) .1s}
.loader.done{transform:translateY(-100%)}
.loader svg{width:min(28vw,180px)}
.loader .ring{stroke-dasharray:180;stroke-dashoffset:180}
.loader .dot{transform-origin:79px 25.6px;transform:translateY(-60px) scale(.4);opacity:0;transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.loader.full .dot{transform:none;opacity:1}
.loader-count{position:absolute;right:var(--pad);bottom:var(--pad);font-family:var(--f-display);font-weight:700;font-size:clamp(56px,12vw,150px);line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* fixed chrome */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;padding:22px var(--pad);pointer-events:none;mix-blend-mode:difference;color:#F5F5F2}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:19px;letter-spacing:-.02em}
.brand b{font-weight:700}.brand span{font-weight:300;opacity:.75}
.brand svg{width:26px;height:26px}
.menu-btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;border:1px solid currentColor;border-radius:999px;padding:11px 18px;min-height:44px;display:flex;align-items:center;gap:10px}
.menu-btn i{width:14px;height:6px;border-top:1.5px solid;border-bottom:1.5px solid;transition:transform .3s}
.menu-open .menu-btn i{transform:rotate(90deg)}

.theme{position:fixed;left:var(--pad);bottom:22px;z-index:40;display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--card-line);background:var(--bg)}
.theme button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:.3s}
.theme button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.theme svg{width:16px;height:16px}

.lab-tab{position:fixed;right:0;top:50%;z-index:40;transform:translateY(-50%);background:var(--purple);color:#fff;padding:18px 12px;border-radius:12px 0 0 12px;writing-mode:vertical-rl;font-family:var(--f-mono);font-size:12px;letter-spacing:.25em;display:flex;align-items:center;gap:12px;transition:padding .3s var(--ease)}
.lab-tab:hover{padding-right:20px}
.lab-tab span{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:35;background:var(--purple);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 60px;clip-path:circle(0% at calc(100% - 60px) 44px);transition:clip-path .8s var(--ease);visibility:hidden}
.menu-open .menu{clip-path:circle(150% at calc(100% - 60px) 44px);visibility:visible}
.menu nav{display:flex;flex-direction:column;gap:4px}
.menu a{font-family:var(--f-display);font-weight:700;font-size:clamp(44px,8vw,96px);line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;gap:18px;opacity:0;transform:translateY(30px);transition:.6s var(--ease)}
.menu a small{font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.2em;opacity:.7}
.menu a:hover{font-family:var(--f-serif);font-style:italic;font-weight:400}
.menu-open .menu a{opacity:1;transform:none}
.menu-open .menu a:nth-child(2){transition-delay:.05s}.menu-open .menu a:nth-child(3){transition-delay:.1s}
.menu-open .menu a:nth-child(4){transition-delay:.15s}.menu-open .menu a:nth-child(5){transition-delay:.2s}.menu-open .menu a:nth-child(6){transition-delay:.25s}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--purple);transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border .3s;will-change:transform}
.cursor.big{width:66px;height:66px;margin:-33px 0 0 -33px;background:transparent;border:1.5px solid var(--purple)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (hover:hover) and (pointer:fine){html.has-cursor,html.has-cursor *{cursor:none!important}html.has-cursor input{cursor:text!important}}
.cursor.hide{opacity:0}

/* sections */
main{position:relative;z-index:1}
section{position:relative;overflow-x:clip;padding:clamp(90px,14vw,180px) var(--pad)}
.label{display:block;color:var(--purple-lt);margin-bottom:28px}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:110px;overflow:hidden}
.face{position:absolute;left:58%;top:50%;width:min(92vw,880px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;color:var(--fg)}
.face .head>path{stroke-opacity:.1;transition:stroke-opacity .6s}
.hero:hover .face .head>path{stroke-opacity:.17}
.face svg{width:100%;height:100%;overflow:visible}
.face .head{transform-origin:50px 50px;will-change:transform}
.face .smile{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .7s var(--ease)}
.face.happy .smile{stroke-dashoffset:0}
.face .eye{fill:var(--purple);will-change:transform;filter:drop-shadow(0 0 6px rgba(91,91,246,.7))}
.face .eye-inner{transform-origin:center;transform-box:fill-box;animation:wink 5s infinite}
@keyframes wink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.hero h1{position:relative;margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(64px,15.5vw,240px);line-height:.86;letter-spacing:-.065em}
.hero h1 .l1,.hero h1 .l2{display:flex;align-items:flex-end;gap:.12em;flex-wrap:wrap}
.hero h1 .l2{padding-left:clamp(0px,12vw,220px)}
.hero h1 .serif{color:var(--purple-lt);font-size:.5em;line-height:1;padding-bottom:.08em;letter-spacing:-.02em}
.hero h1 .w{display:inline-block;overflow:hidden}
.hero h1 .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.ready .hero h1 .w>span{transform:none}
.ready .hero h1 .w:nth-child(2)>span{transition-delay:.08s}
.ready .hero h1 .l2 .w>span{transition-delay:.16s}
.hero-info{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(36px,6vw,70px);flex-wrap:wrap}
.hero-info p{margin:0;max-width:360px;font-size:15px;color:var(--muted)}
.hero-info p strong{display:block;color:var(--fg);font-weight:500;margin-bottom:6px}
.scroll-hint{display:flex;align-items:center;gap:14px;color:var(--muted)}
.scroll-hint i{width:1px;height:46px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--purple);animation:drop 1.8s infinite}
@keyframes drop{to{top:100%}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:clamp(30px,6vw,90px);align-items:center}
.about-text{margin:0;font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4.6vw,66px);line-height:1.04;letter-spacing:-.035em}
.about-text .word{display:inline-block;opacity:.12;transform:translateY(.25em);filter:blur(6px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:calc(var(--i,0) * 32ms)}
.about-text.lit .word{opacity:1;transform:none;filter:none}
.about-text .about-joke.word{display:block}
.about-text .serif{color:var(--purple-lt)}
.about-joke{display:block;margin-top:.5em;font-size:.62em;color:var(--purple-lt)}
.about-mark{position:relative;display:block;width:100%;aspect-ratio:1;perspective:900px;border-radius:50%;-webkit-tap-highlight-color:transparent}
.about-mark .spin,.about-mark .orbit{display:block}
.about-mark .spin{width:100%;height:100%;will-change:transform}
.about-mark svg{width:100%;height:100%}
.about-mark .orbit{position:absolute;inset:-6%;border:1px dashed var(--card-line);border-radius:50%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--card-line);margin-top:clamp(20px,4vw,40px)}
.facts div{padding:26px 24px 0 0}
.facts b{display:block;font-family:var(--f-display);font-size:clamp(30px,4vw,52px);letter-spacing:-.04em;line-height:1}
.facts span{display:block;margin-top:10px;color:var(--muted)}

/* skills */
.skills-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,60px)}
.h2{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(46px,8.5vw,128px);line-height:.88;letter-spacing:-.06em}
.h2 .serif{color:var(--purple-lt);font-size:.62em}
.skills-head p{max-width:300px;margin:0;color:var(--muted)}
.skill-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--card-line)}
.skill{position:relative;border-bottom:1px solid var(--card-line);overflow:hidden}
.skill button{width:100%;display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:20px;padding:clamp(20px,2.6vw,34px) 0;text-align:left}
.skill .num{color:var(--muted);transition:color .3s}
.skill .name{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,5vw,74px);line-height:1;letter-spacing:-.045em;
  background:linear-gradient(90deg,var(--purple-lt) 0 50%,var(--fg) 50% 100%);background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .7s var(--ease)}
.skill .desc{max-width:260px;color:var(--muted);font-size:14px;text-align:right}
.skill .scan{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--purple);box-shadow:0 0 18px 2px var(--purple);opacity:0;transform:translateX(-10px)}
.skill.active .name{background-position:0 0}
.skill.active .num{color:var(--purple-lt)}
.skill.active .scan{animation:scan .7s var(--ease) forwards}
@keyframes scan{0%{opacity:1;transform:translateX(0)}85%{opacity:1}100%{opacity:0;transform:translateX(var(--w,1200px))}}
.skill-inline{display:none}
@media (max-width:760px){
  .skill button{grid-template-columns:44px minmax(0,1fr)}
  .skill .desc{display:none}
  .skill-inline{display:block;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
  .skill.active .skill-inline{max-height:320px}
  .skill-inline .pv{margin:0 0 24px 64px}
  .skill-inline p{margin:0 0 14px 64px;color:var(--muted);font-size:14px}
}

/* floating preview */
.preview{position:fixed;left:0;top:0;z-index:30;pointer-events:none;width:240px;height:200px;margin:-100px 0 0 30px;opacity:0;transform:scale(.6);transition:opacity .3s,scale .3s;will-change:transform}
.preview.show{opacity:1}
.preview .pv{display:none}
.preview .pv.on{display:block}
@media (hover:none),(pointer:coarse),(max-width:760px){.preview{display:none}}

/* preview mini illustrations */
.pv{width:240px;height:200px;border-radius:18px;background:#181C26;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;color:#F5F5F2;box-shadow:0 30px 60px -20px rgba(0,0,0,.5),0 0 0 1px rgba(91,91,246,.15)}
.pv *{animation-play-state:paused}
.on>.pv-in *,.active .pv *,.on *{animation-play-state:running}
.pv-tag{position:absolute;left:12px;bottom:10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.15em;color:#8B8BFA}
/* 1 phone */
.pv-phone{position:absolute;left:50%;top:16px;width:92px;height:184px;margin-left:-46px;border-radius:16px;border:3px solid #2A2F3B;background:#F5F5F2;overflow:hidden}
.pv-phone .scr{animation:scrollsite 4s var(--ease) infinite alternate}
.pv-phone .b{height:10px;border-radius:3px;background:#D9D9E4;margin:6px 8px}
.pv-phone .hero-b{height:60px;margin:0;border-radius:0;background:linear-gradient(135deg,#5B5BF6,#8B8BFA)}
.pv-phone .row{display:flex;gap:4px;margin:6px 8px}.pv-phone .row i{flex:1;height:34px;border-radius:5px;background:#E4E4EE}
.pv-phone .wa{position:absolute;right:6px;bottom:8px;width:18px;height:18px;border-radius:50%;background:#25D366;animation:pop 1.6s infinite}
@keyframes scrollsite{to{transform:translateY(-90px)}}
@keyframes pop{50%{transform:scale(1.25)}}
/* 2 landing */
.pv-land{position:absolute;inset:16px 16px 30px;border-radius:10px;background:#F5F5F2;padding:14px}
.pv-land .t{height:10px;width:80%;border-radius:3px;background:#0E1116}
.pv-land .t2{height:8px;width:60%;border-radius:3px;background:#C9C9D6;margin-top:8px}
.pv-land .cta{margin-top:18px;width:96px;height:28px;border-radius:999px;background:#5B5BF6;animation:press 2.4s infinite}
.pv-land .ptr{position:absolute;left:120px;top:90px;width:14px;height:14px;animation:ptr 2.4s infinite}
.pv-land .lead{position:absolute;right:10px;top:10px;font-family:var(--f-mono);font-size:10px;color:#2E9E5B;opacity:0;animation:lead 2.4s infinite}
@keyframes ptr{0%{transform:translate(40px,30px)}45%,60%{transform:translate(-30px,-8px)}100%{transform:translate(40px,30px)}}
@keyframes press{0%,48%{transform:scale(1)}52%{transform:scale(.9)}58%,100%{transform:scale(1)}}
@keyframes lead{0%,52%{opacity:0;transform:translateY(6px)}60%,90%{opacity:1;transform:none}100%{opacity:0}}
/* 3 google */
.pv-gmb{position:absolute;inset:16px 16px 30px;border-radius:10px;background:#F5F5F2;color:#0E1116;padding:12px}
.pv-gmb .map{height:58px;border-radius:7px;background:repeating-linear-gradient(45deg,#E2E6EE 0 6px,#ECEFF4 6px 12px);position:relative}
.pv-gmb .pin{position:absolute;left:50%;top:10px;width:16px;height:16px;margin-left:-8px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#5B5BF6;animation:bounce 1.2s infinite}
@keyframes bounce{50%{margin-top:-5px}}
.pv-gmb b{display:block;margin-top:9px;font-family:var(--f-display);font-size:12px}
.stars{display:flex;gap:3px;margin-top:6px}
.stars i{width:14px;height:14px;background:#D4D6DE;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:star 3s infinite}
.stars i:nth-child(2){animation-delay:.2s}.stars i:nth-child(3){animation-delay:.4s}.stars i:nth-child(4){animation-delay:.6s}.stars i:nth-child(5){animation-delay:.8s}
@keyframes star{0%,10%{background:#D4D6DE}20%,85%{background:#F5B400}100%{background:#D4D6DE}}
/* 4 seo */
.pv-seo{position:absolute;inset:16px 16px 30px;border-radius:10px;background:#F5F5F2;padding:10px;color:#0E1116}
.pv-seo .q{height:20px;border-radius:999px;border:1px solid #D4D6DE;font-size:9px;font-family:var(--f-body);display:flex;align-items:center;padding:0 9px;color:#5D626B}
.pv-seo .res{position:relative;height:98px;margin-top:8px}
.pv-seo .r{position:absolute;left:0;right:0;height:20px;border-radius:5px;background:#E4E6EC;display:flex;align-items:center;padding:0 7px;font-family:var(--f-mono);font-size:8px;color:#8A8F98}
.pv-seo .r:nth-child(1){top:0}.pv-seo .r:nth-child(2){top:25px}.pv-seo .r:nth-child(3){top:50px}
.pv-seo .me{top:75px;background:#5B5BF6;color:#fff;z-index:2;animation:rise 3.2s var(--ease) infinite}
@keyframes rise{0%,15%{top:75px}55%,90%{top:0}100%{top:75px}}
.pv-seo .r:not(.me){animation:push 3.2s var(--ease) infinite}
@keyframes push{0%,15%{transform:none}55%,90%{transform:translateY(25px)}100%{transform:none}}
/* 5 menu / qr */
.pv-qr{position:absolute;left:18px;top:26px;width:92px;height:92px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:6px;border-radius:8px;background:#F5F5F2}
.pv-qr i{background:#0E1116;border-radius:1px}.pv-qr i.o{background:transparent}
.pv-qr .ln{position:absolute;left:0;right:0;top:0;height:2px;background:#5B5BF6;box-shadow:0 0 10px #5B5BF6;animation:qr 2s infinite}
@keyframes qr{50%{top:100%}}
.pv-menu{position:absolute;right:16px;top:26px;width:96px;display:flex;flex-direction:column;gap:7px}
.pv-menu i{height:20px;border-radius:5px;background:rgba(245,245,242,.1);opacity:0;animation:item 4s infinite}
.pv-menu i:nth-child(2){animation-delay:.25s}.pv-menu i:nth-child(3){animation-delay:.5s}.pv-menu i:nth-child(4){animation-delay:.75s}
@keyframes item{0%,25%{opacity:0;transform:translateX(10px)}35%,90%{opacity:1;transform:none}100%{opacity:0}}
/* 6 maintenance */
.pv-care{position:absolute;inset:22px 18px 30px;display:flex;flex-direction:column;gap:12px}
.pv-care div{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em}
.pv-care s{flex:1;height:4px;border-radius:2px;background:rgba(245,245,242,.1);position:relative;overflow:hidden;text-decoration:none}
.pv-care s::after{content:"";position:absolute;inset:0;background:#5B5BF6;transform-origin:left;transform:scaleX(0);animation:fill 3s infinite}
.pv-care div:nth-child(2) s::after{animation-delay:.4s}.pv-care div:nth-child(3) s::after{animation-delay:.8s}
.pv-care em{width:16px;height:16px;border-radius:50%;border:1.5px solid #5B5BF6;display:grid;place-items:center;font-style:normal;font-size:10px;color:#8B8BFA}
@keyframes fill{0%{transform:scaleX(0)}40%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* projects */
.proj-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:clamp(30px,5vw,60px)}
.badge{position:relative;flex:none;width:clamp(110px,13vw,170px);aspect-ratio:1;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center}
.badge .txt{position:absolute;inset:0;animation:spin 14s linear infinite}
.badge:hover .txt{animation-duration:4s}
.badge text{font-family:var(--f-mono);font-size:8.6px;letter-spacing:2.6px;fill:currentColor}
.badge .core{width:34%}
.proj-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.proj{grid-column:span 3;display:flex;flex-direction:column;gap:14px}

.proj-cover{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;transition:transform .6s var(--ease),border-radius .6s var(--ease)}
.proj:hover .proj-cover{transform:scale(.985);border-radius:28px}
.proj-meta{display:flex;justify-content:space-between;align-items:center;gap:16px}
.proj-meta h3{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.05em;line-height:1}
.proj-meta p{margin:4px 0 0;color:var(--muted);font-size:14px}
.live{flex:none;width:58px;height:58px;border-radius:50%;border:1px solid var(--card-line);display:grid;place-items:center;transition:.4s var(--ease)}
.live svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.proj:hover .live{background:var(--purple);border-color:var(--purple);color:#fff}
.proj:hover .live svg{transform:rotate(-45deg)}
@media (max-width:760px){.proj{grid-column:span 6}}

/* covers: mini browser */
.cv{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(14px,2.4vw,30px);font-family:var(--f-display)}
.cv .bar{display:flex;gap:6px;margin-bottom:auto}.cv .bar i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.25}
.cv .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;opacity:.7;margin-bottom:10px}
.cv .big{font-size:clamp(30px,6vw,90px);line-height:.88;letter-spacing:-.05em;font-weight:800;text-transform:uppercase}
.cv .big{font-size:clamp(30px,4.6vw,68px)}
.cv-torque{background:#0B0B0D;color:#F2F2F2;background-image:radial-gradient(ellipse at 80% 110%,rgba(255,74,28,.45),transparent 55%)}
.cv-torque .big em{font-style:normal;color:#FF4A1C}
.cv-torque .gauge{position:absolute;right:6%;bottom:-18%;width:40%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,74,28,.6);border-bottom-color:transparent}
.cv-torque .gauge::after{content:"";position:absolute;left:50%;top:50%;width:45%;height:2px;background:#FF4A1C;transform-origin:0 50%;transform:rotate(-150deg);transition:transform 1.2s var(--ease)}
.proj:hover .cv-torque .gauge::after{transform:rotate(-30deg)}
.cv-mare{color:#fff;background:linear-gradient(180deg,#1E5C70 0%,#E98A6B 62%,#F6C177 72%,#2C8C8C 72%,#16586A 100%)}
.cv-mare .sun{position:absolute;left:50%;top:48%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#FFE3A3,#FF9E5E);transform:translate(-50%,0);transition:transform 1.2s var(--ease)}
.proj:hover .cv-mare .sun{transform:translate(-50%,22%)}
.cv-mare .big{font-family:var(--f-serif);font-weight:400;text-transform:none;letter-spacing:-.02em;position:relative}
.cv-ferro{background:#16110D;color:#E9DDC8;background-image:radial-gradient(circle at 20% 30%,rgba(200,161,90,.22),transparent 50%)}
.cv-ferro .big span{display:block;color:transparent;-webkit-text-stroke:1px #C8A15A}
.cv-ferro .amp{position:absolute;right:8%;top:22%;font-family:var(--f-serif);font-style:italic;font-size:clamp(70px,10vw,150px);color:#C8A15A;line-height:1}
.cv-lumen{background:linear-gradient(140deg,#F7FAFF,#DDE9FF);color:#0E1A33}
.cv-lumen .big{text-transform:none;font-weight:600;letter-spacing:-.04em}
.cv-lumen .orb{position:absolute;right:10%;top:18%;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#8FB4FF 55%,#5E86F0);box-shadow:0 20px 50px rgba(94,134,240,.4);transition:transform 1.2s var(--ease)}
.proj:hover .cv-lumen .orb{transform:translate(-14px,10px) scale(1.06)}
.cv-velare{background:#F4EFE9;color:#3B2F2A;background-image:radial-gradient(circle at 15% 20%,rgba(246,170,130,.45),transparent 40%),radial-gradient(circle at 85% 30%,rgba(205,170,235,.45),transparent 40%)}
.cv-velare .big{font-family:var(--f-serif);font-weight:400;text-transform:none;letter-spacing:-.01em}
.cv-velare .big em{color:#B98AA0}

/* marquee */
.marquee{overflow:hidden;padding:clamp(30px,5vw,60px) 0;border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line);white-space:nowrap}
.marquee .track{display:inline-flex;align-items:center;gap:clamp(24px,4vw,56px);animation:mq 28s linear infinite;will-change:transform}
.marquee.paused .track{animation-play-state:paused}
.marquee span{font-family:var(--f-serif);font-style:italic;font-size:clamp(56px,10vw,150px);line-height:1}
.marquee svg{width:clamp(44px,6vw,86px);height:auto;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* contact */
.contact{background:#0E1116;color:#F5F5F2;text-align:center;min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;overflow:hidden}
.contact::before{content:"";position:absolute;left:50%;top:50%;width:min(110vw,1000px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(91,91,246,.28),transparent 62%);pointer-events:none}
.contact h2{position:relative;margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(46px,9vw,140px);line-height:.88;letter-spacing:-.06em}
.contact h2 .serif{color:#8B8BFA}
.contact h2 .lw{display:inline-block;white-space:nowrap}
.contact h2 .lt{display:inline-block;will-change:transform}
.contact .label{color:#8B8BFA;margin:0}
.btn{position:relative;display:inline-flex;align-items:center;gap:16px;background:var(--purple);color:#fff;border-radius:999px;padding:20px 30px;min-height:56px;font-family:var(--f-display);font-weight:600;font-size:18px;overflow:hidden;box-shadow:0 0 60px rgba(91,91,246,.35);transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn svg{width:22px;height:22px}
.foot{position:relative;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:40px;color:#9AA0AA}
.foot a:hover{color:#fff}
.coffee{display:flex;align-items:center;gap:14px;text-align:right;border:1px solid rgba(245,245,242,.14);border-radius:16px;padding:12px 14px 12px 18px;transition:.4s var(--ease)}
.coffee:hover{border-color:#5B5BF6;background:rgba(91,91,246,.1);color:#fff}
.coffee b{display:block;color:#F5F5F2;font-weight:400;font-variant-numeric:tabular-nums}
.coffee svg{width:42px;height:42px}
.coffee .steam{stroke-dasharray:10;animation:steam 2s linear infinite}
@keyframes steam{to{stroke-dashoffset:-20}}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (max-width:860px){
  .about{grid-template-columns:1fr}
  .about-mark{width:min(60vw,320px);margin:0 auto;order:-1}
  .facts{grid-template-columns:1fr}
  .facts div{padding:22px 0;border-bottom:1px solid var(--card-line)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
.contact h2 .serif .lt{margin-right:-.045em}

/* hero letter swap */
.hero h1 .ch{display:inline-block;text-align:center;transform-style:preserve-3d;backface-visibility:hidden}
.hero h1 .ch.swap{animation:chflip .9s var(--ease)}
.hero h1 .ch.alt{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--purple-lt);letter-spacing:0}
@keyframes chflip{0%{transform:scaleX(1)}45%{transform:scaleX(0) skewY(8deg)}55%{transform:scaleX(0) skewY(-8deg)}100%{transform:scaleX(1)}}

/* skills cards */
.cards-sec{padding-top:clamp(40px,6vw,80px)}
.cards-title{margin-bottom:12px}
.cards-title .serif{font-size:.62em}
.cards-hint{color:var(--muted);margin:0 0 clamp(28px,4vw,48px)}
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.card{grid-column:span 2;display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--card-line);background:var(--bg);transition:border-color .4s var(--ease)}
.card:nth-child(4){grid-column:2/span 2}
.card:hover{border-color:var(--purple)}
.card header{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
.card canvas{width:100%;aspect-ratio:1;display:block;touch-action:pan-y}
.card h3{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(18px,1.8vw,24px);line-height:1.05;letter-spacing:-.03em}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card,.card:nth-child(4){grid-column:auto}.card:nth-child(5){grid-column:1/-1;max-width:50%;justify-self:center;width:100%}}
@media (max-width:520px){.cards{grid-template-columns:1fr}.card:nth-child(5){max-width:none}}

/* pc / phone copy */
.t-touch{display:none}
@media (hover:none),(pointer:coarse){.t-hover{display:none}.t-touch{display:inline}}

/* tighter rhythm between Sobre and Serviços */
.about{padding-bottom:clamp(40px,6vw,80px)}
.serv{padding-top:clamp(40px,6vw,90px)}

/* "O que a Orvex faz" entrance */
.mask-in .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.mask-in .mw>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.mask-in .mw:nth-of-type(2)>span{transition-delay:.1s}
.serv.in .mask-in .mw>span{transform:none}
.serv .skills-head p{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s}
.serv.in .skills-head p{opacity:1;transform:none}
.serv .skill-list{border-top-color:transparent;transition:border-color .6s .2s}
.serv.in .skill-list{border-top-color:var(--card-line)}
.serv .skill{opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(.25s + var(--k,0) * .08s)}
.serv.in .skill{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mask-in .mw>span,.serv .skill,.serv .skills-head p{transform:none!important;opacity:1!important}}

/* page transition (site <-> lab): the page itself animates out, the next one animates in */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
html.leaving main,html.leaving .top,html.leaving .theme,html.leaving .lab-tab,html.leaving .stage{opacity:0;transform:scale(.965);filter:blur(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease);pointer-events:none}
html.arriving main,html.arriving .top{opacity:0;transform:scale(1.03);filter:blur(8px)}
html.arriving.arrived main,html.arriving.arrived .top{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease)}

/* project covers: Kanban Ryū + O Último Farol */
.cv-ryu{background:#0b0b0d;color:#f2ece2;background-image:radial-gradient(ellipse at 50% 120%,rgba(29,47,87,.7),transparent 60%)}
.cv-ryu .sun{position:absolute;right:12%;top:16%;width:30%;aspect-ratio:1;border-radius:50%;background:#d7261b;box-shadow:0 0 80px rgba(215,38,27,.35);transition:transform 1.2s var(--ease)}
.cv-ryu .kanji{position:absolute;right:16%;top:22%;font-family:var(--f-serif);font-size:clamp(60px,9vw,130px);line-height:1;color:#0b0b0d;transition:transform 1.2s var(--ease)}
.proj:hover .cv-ryu .sun{transform:translateY(12%) scale(1.08)}
.proj:hover .cv-ryu .kanji{transform:translateY(8%) rotate(-6deg)}
.cv-ryu .big{font-family:var(--f-serif);font-weight:400;text-transform:none;letter-spacing:-.01em;position:relative}
.cv-ryu .big em{color:#d7261b}
.cv-ryu .tag{color:#ff4a2e;opacity:1}
.cv-farol{background:#0b0d1e;color:#f6f0e6;background-image:radial-gradient(ellipse at 70% 100%,rgba(127,227,216,.18),transparent 55%)}
.cv-farol .stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 40% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 62% 40%,#fff,transparent),radial-gradient(1px 1px at 12% 60%,#fff,transparent),radial-gradient(1px 1px at 52% 12%,#fff,transparent),radial-gradient(1px 1px at 30% 48%,#fff,transparent);opacity:.7}
.cv-farol .tower{position:absolute;right:20%;bottom:0;width:7%;height:52%;background:linear-gradient(90deg,#f6f0e6 0 50%,#d8cfc0 50%);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.cv-farol .tower::before{content:"";position:absolute;left:0;right:0;top:12%;height:10%;background:#ff9d86}
.cv-farol .beam{position:absolute;right:calc(20% + 3.5%);bottom:52%;width:0;height:0;transform-origin:0 0}
.cv-farol .beam::before{content:"";position:absolute;left:0;top:-30px;width:min(70vw,700px);height:60px;background:linear-gradient(90deg,rgba(242,183,102,.85),rgba(242,183,102,0));clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);transform-origin:0 50%;animation:beam 6s ease-in-out infinite alternate;animation-play-state:paused}
.proj:hover .cv-farol .beam::before{animation-play-state:running}
.cv-farol .beam::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:#f2b766;box-shadow:0 0 40px 10px rgba(242,183,102,.6)}
@keyframes beam{from{transform:rotate(-170deg)}to{transform:rotate(-200deg)}}
.cv-farol .big{font-family:var(--f-serif);font-weight:400;text-transform:none;letter-spacing:-.01em;position:relative}
.cv-farol .big em{color:#f2b766}
.cv-farol .tag{color:#7fe3d8;opacity:1}