/*
Theme Name: Rudenc Hatibi Portfolio
Theme URI: https://designer-portfolio.krise-rosette54.chatgpt.site
Author: Rudenc Hatibi
Description: Immersive, motion-led portfolio for a multidisciplinary designer and art director.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: rudenc-portfolio
*/
:root{--acid:#c9ff00;--deep:#20251b;--paper:#edeade;--ink:#12130f;--line:#b9b8af;--mx:0;--my:0;--scroll:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}em{font-family:Georgia,serif;font-weight:400;font-style:italic}
.page-loader{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;background:var(--acid);transition:transform .8s cubic-bezier(.77,0,.18,1) .25s}.page-loader span{font-size:clamp(90px,18vw,260px);font-weight:900;letter-spacing:-.12em}.page-loader i{position:absolute;bottom:8%;left:8%;height:2px;width:84%;background:var(--ink);transform-origin:left;animation:loading 1s ease both}.loaded .page-loader{transform:translateY(-102%)}@keyframes loading{from{transform:scaleX(0)}}
.cursor-dot{position:fixed;z-index:10000;width:10px;height:10px;border-radius:50%;background:var(--acid);pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .2s,height .2s}.cursor-dot.hover{width:42px;height:42px}
.rh-header{position:fixed;z-index:100;left:0;right:0;top:0;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 2.7vw;color:#f3f5e9;mix-blend-mode:difference}.rh-brand{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.08em}.rh-brand b{display:grid;place-items:center;width:38px;height:38px;background:var(--acid);color:#10130d;font-size:16px;letter-spacing:-.08em;transform:skew(-8deg)}.header-status{font-size:9px;letter-spacing:.14em;text-transform:uppercase}.header-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 5px #c9ff001f;margin-right:9px}
.menu-toggle{position:relative;z-index:102;width:96px;height:42px;border:0;background:var(--acid);color:#11150e;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.12em;cursor:pointer}.menu-toggle span{margin-right:12px}.menu-toggle i{display:inline-block;width:13px;height:1px;background:currentColor;margin:0 1px;vertical-align:middle;transition:.3s}.menu-open .menu-toggle i:first-of-type{transform:rotate(45deg) translate(2px,1px)}.menu-open .menu-toggle i:last-of-type{transform:rotate(-45deg) translate(-2px,1px)}
.rh-menu{position:fixed;z-index:101;inset:0;display:flex;flex-direction:column;justify-content:center;padding:8vw;background:var(--acid);color:var(--ink);clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.77,0,.18,1);mix-blend-mode:normal}.menu-open .rh-menu{clip-path:inset(0)}.menu-index{position:absolute;top:40px;left:8vw;font-size:10px;letter-spacing:.18em}.rh-menu>a{display:grid;grid-template-columns:50px 1fr auto;align-items:center;border-bottom:1px solid #12130f50;font-size:clamp(46px,7vw,106px);font-weight:800;line-height:1;letter-spacing:-.07em;padding:.08em 0;transform:translateY(40px);opacity:0;transition:.45s}.menu-open .rh-menu>a{transform:none;opacity:1}.menu-open .rh-menu>a:nth-of-type(2){transition-delay:.05s}.menu-open .rh-menu>a:nth-of-type(3){transition-delay:.1s}.menu-open .rh-menu>a:nth-of-type(4){transition-delay:.15s}.rh-menu>a small{font-size:10px;letter-spacing:.1em}.rh-menu>a span{font-size:.25em}.menu-foot{position:absolute;bottom:38px;right:8vw;font-size:12px}
.hero-racing{position:relative;height:100svh;min-height:720px;background:var(--deep);color:#f3f5e9;overflow:hidden;isolation:isolate}.hero-racing:after{content:"";position:absolute;z-index:8;inset:auto 0 0;height:22%;background:linear-gradient(transparent,var(--deep));pointer-events:none}.hero-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(#e9efd61c 1px,transparent 1px),linear-gradient(90deg,#e9efd61c 1px,transparent 1px);background-size:7.15vw 7.15vw;transform:perspective(700px) rotateX(calc(var(--scroll)*8deg)) scale(calc(1 + var(--scroll)*.08))}.hero-kicker{position:absolute;z-index:10;top:110px;left:3.2vw;right:3.2vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#b8bdaa}.hero-kicker b{font-weight:500}.hero-word{position:absolute;z-index:4;left:0;width:100%;overflow:hidden;font-size:clamp(118px,18.8vw,310px);font-weight:900;line-height:.72;letter-spacing:-.09em;text-transform:uppercase;white-space:nowrap;pointer-events:none}.hero-word span{display:block;transform:translate3d(calc(var(--mx)*-18px),calc(var(--scroll)*-55px),0)}.hero-word-first{top:18%}.hero-word-last{top:52%;color:transparent;-webkit-text-stroke:2px #eef1e5}.hero-word-last span{transform:translate3d(calc(var(--mx)*22px),calc(var(--scroll)*65px),0)}.hero-number{position:absolute;z-index:1;right:-2vw;top:5%;font-size:min(68vw,950px);font-weight:900;line-height:1;color:#171b13;letter-spacing:-.14em;transform:translateX(calc(var(--scroll)*60px));pointer-events:none}
.hero-portrait-wrap{position:absolute;z-index:6;left:50%;bottom:-2%;width:min(43vw,650px);height:88%;transform:translateX(-50%) translateY(calc(var(--scroll)*60px));transform-origin:bottom center}.hero-portrait{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:saturate(.82) contrast(1.06);transform:translate(calc(var(--mx)*-10px),calc(var(--my)*-7px))}.hero-initials{display:grid;place-items:center;width:74%;height:78%;inset:auto 13% 0;border-radius:50% 50% 8% 8%;background:linear-gradient(145deg,#4b5143,#10140e 70%);box-shadow:inset 30px 20px 70px #ffffff12,0 60px 100px #0008}.hero-initials span{font-size:clamp(120px,16vw,260px);font-weight:900;letter-spacing:-.12em;color:var(--acid);transform:rotate(-8deg)}.portrait-halo{position:absolute;z-index:1;width:72%;aspect-ratio:1;left:14%;top:9%;border:1px solid #c9ff0070;border-radius:50%;box-shadow:0 0 0 7vw #c9ff0008,0 0 90px #c9ff001f;animation:halo 4s ease-in-out infinite}.portrait-outline{position:absolute;z-index:2;inset:7% 7% 5%;border:1px solid #f3f5e926;border-radius:48% 52% 5% 5%;transform:rotate(4deg)}
.hero-sidecard{position:absolute;z-index:10;left:3.2vw;bottom:5.5%;width:155px;height:188px;padding:18px 14px;border:1px solid #e7eed32d;clip-path:polygon(0 0,72% 0,100% 17%,100% 100%,0 100%);display:flex;flex-direction:column}.hero-sidecard small{font-size:9px;color:#888f7d;letter-spacing:.14em}.hero-sidecard strong{margin:auto 0;font-size:19px;line-height:.95}.hero-sidecard span{font-size:8px;line-height:1.4;color:var(--acid)}.hero-status{position:absolute;z-index:10;right:3.2vw;bottom:6%;display:flex;gap:28px;align-items:center;font-size:9px;letter-spacing:.16em}.hero-status span{color:var(--acid)}.hero-status span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acid);margin-right:8px;box-shadow:0 0 0 5px #c9ff001c}.hero-status b{font-weight:500;color:#9fa593}.hero-role{position:absolute;z-index:10;right:3.2vw;top:27%;width:180px;font-size:12px;line-height:1.55;text-transform:uppercase;color:#b6bca9}.hero-action{position:absolute;z-index:12;right:3.2vw;top:43%;width:112px;height:112px;border-radius:50%;background:var(--acid);color:#11150e;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.04em;transition:.35s}.hero-action b{font-size:28px}.hero-action:hover{transform:rotate(8deg) scale(1.08);box-shadow:0 0 0 12px #c9ff0020}.hero-speed-lines i{position:absolute;z-index:2;height:1px;background:linear-gradient(90deg,transparent,#c9ff0070,transparent);width:60vw;left:-20vw;top:35%;transform:rotate(-12deg);animation:speed 3.6s linear infinite}.hero-speed-lines i:nth-child(2){top:42%;animation-delay:-1s}.hero-speed-lines i:nth-child(3){left:55vw;top:62%;animation-delay:-2s}.hero-speed-lines i:nth-child(4){left:40vw;top:72%;animation-delay:-2.7s}.hero-progress{position:absolute;z-index:12;left:0;bottom:0;width:100%;height:3px;background:#ffffff12}.hero-progress i{display:block;width:calc(var(--scroll)*100%);height:100%;background:var(--acid)}
.ticker{height:52px;overflow:hidden;background:var(--acid);display:flex;align-items:center;white-space:nowrap}.ticker div{display:flex;width:max-content;animation:ticker 26s linear infinite}.ticker span{display:inline-flex;gap:26px;margin-right:26px;font-size:12px;font-weight:700;letter-spacing:.08em}.ticker b{font-size:15px}
.section-tag{display:flex;gap:18px;font-size:10px;font-weight:700;letter-spacing:.16em}.section-tag span{color:#7a7c73}.section-tag.light{color:#f2f4e9}.display{margin:0;font-size:clamp(66px,10vw,155px);line-height:.82;letter-spacing:-.08em}.display em{color:var(--acid)}.reveal{opacity:0;transform:translateY(70px);transition:opacity .9s,transform .9s cubic-bezier(.16,1,.3,1)}.reveal.in{opacity:1;transform:none}
.journal{position:relative;min-height:240vh;padding:11vw 3vw 14vw;background:var(--paper)}.journal-sticky{position:sticky;top:13vh;width:46%;z-index:2}.journal-sticky h2{margin-top:55px}.journal-intro{width:73%;margin:55px 0 0 auto;font-size:clamp(18px,1.8vw,28px);line-height:1.35}.collage{position:relative;min-height:2050px;margin-top:-28vh}.collage-item{position:absolute;margin:0;width:24vw}.collage-item img,.art-placeholder{width:100%;aspect-ratio:4/5;object-fit:cover}.collage-item figcaption{display:flex;justify-content:space-between;margin-top:10px;font-size:9px;letter-spacing:.09em}.collage-item small{color:#777}.collage-1{top:8%;right:4%;width:20vw}.collage-2{top:31%;left:6%;width:27vw}.collage-3{top:43%;right:12%;width:32vw}.collage-4{top:67%;left:19%;width:18vw}.collage-5{top:75%;right:2%;width:26vw}.art-placeholder{position:relative;background:var(--deep);overflow:hidden}.art-placeholder b{position:absolute;left:7%;top:5%;font-size:10vw;color:#ffffff10}.art-placeholder i{position:absolute;width:75%;aspect-ratio:1;border-radius:46% 54%;left:20%;top:24%;background:radial-gradient(circle at 30% 25%,#c9ff00,#3c4632 40%,#0d100b 70%);transform:rotate(-18deg);box-shadow:inset -20px -15px 50px #000}.collage blockquote{position:absolute;top:27%;right:4%;width:30vw;margin:0;font:italic clamp(26px,3.3vw,53px)/1.08 Georgia,serif;letter-spacing:-.035em}
.split-scenes{background:var(--paper)}.scene{position:relative;height:110vh;min-height:780px;overflow:hidden;display:flex;align-items:center;border-top:1px solid var(--line)}.scene-1{background:#e9e5d9}.scene-2{background:var(--acid)}.scene-copy{position:relative;z-index:3;width:50%;padding-left:5vw}.scene-copy>span{font-size:10px;letter-spacing:.15em}.scene-copy h2{margin:55px 0 35px;font-size:clamp(82px,10vw,170px);line-height:.72;letter-spacing:-.09em}.scene-copy p{width:60%;font-size:17px;line-height:1.5}.circle-link{display:grid;place-items:center;width:84px;height:84px;margin-top:40px;border-radius:50%;background:var(--ink);color:white;font-size:30px}.scene-art{position:absolute;right:-4%;bottom:-14%;width:55%;height:100%}.scene-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.scene-object{position:absolute;right:2%;bottom:0;width:80%;aspect-ratio:.78;border-radius:50% 50% 9% 9%;background:linear-gradient(145deg,#55594f,#10120e 65%);box-shadow:inset 40px 30px 100px #ffffff15,0 50px 100px #0004;transform:rotate(6deg)}.scene-object:after{content:"";position:absolute;width:115%;height:35%;left:-15%;top:38%;border-radius:50%;background:#0e100c;transform:rotate(-9deg)}.scene-object span{position:absolute;z-index:2;top:25%;left:-10%;font-size:17vw;font-weight:900;color:transparent;-webkit-text-stroke:2px var(--acid);letter-spacing:-.12em}
.work{background:#11130f;color:#f1f3e8;padding:10vw 2.5vw}.work-head{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;margin-bottom:9vw}.work-head .section-tag{grid-column:1/-1;margin-bottom:55px}.work-head p{max-width:440px;margin:0 0 10px;font-size:18px;line-height:1.5;color:#a6aa9c}.project-grid{display:grid;grid-template-columns:repeat(12,1fr);border-top:1px solid #ffffff28;border-left:1px solid #ffffff28}.project-card{grid-column:span 4;min-height:640px;padding:22px;border-right:1px solid #ffffff28;border-bottom:1px solid #ffffff28}.project-card:nth-child(5n+1),.project-card:nth-child(5n+2){grid-column:span 6}.project-meta,.project-name{display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.12em}.project-image{display:block;height:480px;margin:24px 0;overflow:hidden;background:#20231d}.project-card:nth-child(n+3) .project-image{height:390px}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .4s;filter:saturate(.8)}.project-card:hover img{transform:scale(1.06);filter:saturate(1)}.project-name{align-items:center}.project-name h3{margin:0;font-size:23px;letter-spacing:-.04em}.project-name span{font-size:25px;color:var(--acid)}.card-placeholder{position:relative;height:100%;overflow:hidden;background:linear-gradient(140deg,#273020,#0b0e09)}.card-placeholder b{position:absolute;z-index:2;left:6%;bottom:5%;max-width:85%;font-size:clamp(35px,5vw,85px);line-height:.8;letter-spacing:-.08em}.card-placeholder i{position:absolute;width:70%;aspect-ratio:1;right:-15%;top:8%;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--acid),#34412b 43%,#080a07 70%);box-shadow:0 0 90px #c9ff0020}.variant-2{background:#d9d7ca;color:#12130f}.variant-3 i{border-radius:8%;transform:rotate(22deg)}.variant-4{background:var(--acid);color:var(--ink)}.variant-5 i{width:100%;right:-60%;top:-20%}
.services-list{padding:11vw 3vw;background:var(--paper)}.service-rows{margin-top:70px;border-top:1px solid}.service-row{display:grid;grid-template-columns:65px 1fr 1fr 40px;align-items:center;min-height:145px;border-bottom:1px solid #12130f40;transition:.35s}.service-row:hover{padding:0 22px;background:var(--acid)}.service-row>span{font-size:10px}.service-row h3{font-size:clamp(28px,3.5vw,54px);font-weight:500;letter-spacing:-.055em}.service-row p{max-width:430px;font-size:15px;line-height:1.5}.service-row b{font-size:28px}
.story{display:grid;grid-template-columns:1fr 1fr;min-height:150vh;padding:11vw 4vw;background:#d8d6ca}.story-sticky{position:sticky;top:12vh;height:max-content}.story-sticky h2{margin-top:60px}.eyebrow{font-size:10px;letter-spacing:.16em}.story-content{padding:15vh 3vw 0}.story-content>p{font-size:18px;line-height:1.7;color:#55574f}.story-content .story-lead{font-size:clamp(29px,3vw,48px);line-height:1.2;color:var(--ink);letter-spacing:-.04em}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:100px 0;border-top:1px solid;padding-top:20px}.stats div{display:flex;flex-direction:column}.stats strong{font-size:55px;font-weight:500;letter-spacing:-.07em}.stats span{font-size:10px}.manifesto{padding:45px;background:var(--deep);color:#f2f4e9;font:italic clamp(29px,3vw,48px)/1.2 Georgia,serif}
.follow{background:var(--acid);overflow:hidden;padding-top:50px}.marquee{display:flex;width:max-content;white-space:nowrap;animation:ticker 28s linear infinite}.marquee div{font-size:clamp(70px,11vw,170px);font-weight:900;letter-spacing:-.08em}.follow-cards{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px}.follow-card{position:relative;height:330px;padding:20px;border:1px solid #12130f66;transition:.4s;overflow:hidden}.follow-card:hover{transform:translateY(-20px);background:var(--ink);color:var(--paper)}.follow-card span{position:absolute;left:20px;bottom:20px;font-size:clamp(32px,3.4vw,55px);font-weight:800;letter-spacing:-.06em}.follow-card b{position:absolute;right:20px;top:18px;font-size:30px}
.contact{min-height:100vh;padding:9vw 3vw 25px;background:var(--deep);color:#f2f4e9}.contact-kicker{margin:55px 0 20px;font-size:18px}.contact-title{position:relative;display:block;width:max-content;font-size:clamp(115px,20vw,330px);font-weight:900;line-height:.63;letter-spacing:-.1em}.contact-title em{color:var(--acid);-webkit-text-stroke:0}.contact-title span{position:absolute;right:-7vw;top:18%;display:grid;place-items:center;width:7vw;aspect-ratio:1;border-radius:50%;background:var(--acid);color:var(--ink);font-size:3vw}.contact-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin:10vw 0 7vw;padding-bottom:45px;border-bottom:1px solid #ffffff3a}.contact-bottom>a{font-size:clamp(20px,2.5vw,38px);border-bottom:2px solid var(--acid)}.contact-bottom nav{display:flex;gap:28px;font-size:12px}.contact footer{display:flex;justify-content:space-between;color:#9ea293;font-size:9px;letter-spacing:.12em}
@keyframes halo{50%{transform:scale(1.035);opacity:.72}}@keyframes speed{from{translate:-20vw 0}to{translate:120vw 0}}@keyframes ticker{to{transform:translateX(-50%)}}
@media(max-width:900px){.cursor-dot{display:none}.rh-header{height:70px;padding:0 18px}.header-status,.rh-brand span{display:none}.menu-toggle{width:82px}.hero-kicker{top:92px;left:20px;right:20px}.hero-kicker b{display:none}.hero-word{font-size:clamp(82px,24vw,160px)}.hero-word-first{top:20%}.hero-word-last{top:49%;-webkit-text-stroke:1px #eef1e5}.hero-portrait-wrap{width:82vw;height:72%;bottom:0}.hero-number{font-size:100vw;top:14%}.hero-role{top:auto;right:20px;bottom:19%;width:145px;font-size:9px}.hero-action{width:88px;height:88px;right:20px;top:39%;font-size:9px}.hero-sidecard{left:20px;width:105px;height:130px;bottom:4%;padding:12px}.hero-sidecard strong{font-size:14px}.hero-status{display:none}.journal{min-height:auto;padding:110px 20px}.journal-sticky{position:relative;top:0;width:100%}.journal-intro{width:100%}.collage{min-height:auto;margin:90px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:55px 18px}.collage-item{position:relative!important;inset:auto!important;width:auto!important;transform:none!important}.collage blockquote{position:relative;inset:auto;width:auto;grid-column:1/-1}.scene{height:900px;align-items:flex-start;padding-top:90px}.scene-copy{width:100%;padding:0 20px}.scene-copy p{width:70%}.scene-art{width:85%;height:58%;right:-16%;bottom:-3%}.work{padding:100px 18px}.work-head{grid-template-columns:1fr;gap:35px}.work-head .section-tag{margin-bottom:20px}.project-card,.project-card:nth-child(5n+1),.project-card:nth-child(5n+2){grid-column:span 6;min-height:500px}.project-image,.project-card:nth-child(n+3) .project-image{height:330px}.services-list{padding:100px 20px}.service-row{grid-template-columns:40px 1fr 32px;padding:25px 0}.service-row p{grid-column:2}.story{grid-template-columns:1fr;min-height:auto;padding:100px 20px}.story-sticky{position:relative;top:0}.story-content{padding:90px 0 0}.follow-cards{grid-template-columns:1fr 1fr}.contact{padding:100px 20px 25px}.contact-title{font-size:25vw}.contact-title span{right:-11vw;width:12vw;font-size:6vw}.contact-bottom{align-items:flex-start;flex-direction:column;gap:45px}.contact footer{flex-direction:column;gap:15px}}
@media(max-width:560px){.rh-menu{padding:24px}.rh-menu>a{grid-template-columns:32px 1fr auto;font-size:14vw}.collage{grid-template-columns:1fr}.scene-copy h2{font-size:24vw}.scene-copy p{width:90%}.project-card,.project-card:nth-child(5n+1),.project-card:nth-child(5n+2){grid-column:1/-1}.project-image,.project-card:nth-child(n+3) .project-image{height:370px}.service-row h3{font-size:28px}.follow-cards{grid-template-columns:1fr}.follow-card{height:220px}.stats{grid-template-columns:1fr}.contact-bottom nav{flex-wrap:wrap}.display{font-size:18vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.cursor-dot{display:none}}