@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;600&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f5f0;--text:#0a0a0a;--accent:#0a0a0a;--muted:#888}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{background:var(--bg);color:var(--text);cursor:default;font-family:Inter,sans-serif;overflow-x:hidden}#intro-fog-container{z-index:2000;background:silver;justify-content:center;align-items:center;width:100%;height:100vh;transition:opacity .8s,visibility .8s;display:flex;position:fixed;top:0;left:0}#intro-fog-container.hidden{opacity:0;visibility:hidden;pointer-events:none}#vanta-bg{z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0;-webkit-mask-image:linear-gradient(90deg,#0000 20%,#000 70%);mask-image:linear-gradient(90deg,#0000 20%,#000 70%)}.intro-title-wrap{z-index:10;text-align:center}#intro-title{letter-spacing:1.5vw;color:#111;cursor:pointer;font-family:Montserrat,sans-serif;font-size:clamp(3rem,8vw,6rem);font-weight:100;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),text-shadow .4s}#intro-title:hover{text-shadow:0 15px 50px #0000004d;transform:scale(1.08)}.transition-overlay.active{pointer-events:all}.bush-element{width:350px;height:350px;transform:translate(-50%, -50%) rotate(var(--rot,0deg)) scale(0);opacity:0;z-index:1;filter:drop-shadow(0 4px 12px #0000004d);background-image:url(/bush.png);background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute}.bush-element.visible{opacity:1;transform:translate(-50%, -50%) rotate(var(--rot,0deg)) scale(var(--scale,1));transition:opacity .35s ease-out,transform .55s cubic-bezier(.1,1,.3,1)}.bush-element.hiding{opacity:0;transform:translate(-50%, -50%) rotate(var(--rot,0deg)) scale(0);transition:opacity .15s ease-in,transform .25s cubic-bezier(.6,-.28,.74,.05)}#main-portfolio{opacity:0;transition:opacity 1.2s}#main-portfolio.visible{opacity:1}#three-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}#content{z-index:1;position:relative}.cursor{background:var(--text);pointer-events:none;z-index:9999;mix-blend-mode:difference;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:fixed}.cursor.hover{transform:scale(4)}.cursor-ring{border:1.5px solid var(--text);pointer-events:none;z-index:9998;mix-blend-mode:difference;border-radius:50%;width:48px;height:48px;transition:transform .3s,opacity .3s;position:fixed}.cursor-ring.hover{opacity:.3;transform:scale(2)}header{z-index:100;mix-blend-mode:difference;justify-content:space-between;align-items:center;width:100%;padding:1.5rem 3rem;display:flex;position:fixed;top:0;left:0}.logo{color:#fff;letter-spacing:-.02em;text-transform:uppercase;font-size:1rem;font-weight:700}nav a{color:#fff;letter-spacing:.02em;text-transform:uppercase;margin-left:2.5rem;font-size:.8rem;font-weight:500;text-decoration:none;position:relative}nav a:after{content:"";background:#fff;width:0;height:1px;transition:width .4s cubic-bezier(.25,1,.5,1);position:absolute;bottom:-4px;left:0}nav a:hover:after{width:100%}.hero{scroll-snap-align:start;flex-direction:column;justify-content:center;height:100svh;padding:0 3rem;display:flex;position:relative}.hero-title{letter-spacing:-.05em;font-size:clamp(3rem,12vw,11rem);font-weight:900;line-height:.9;overflow:hidden}.hero-title span{display:inline-block;transform:translateY(120%)}.hero-title.visible span{animation:1s cubic-bezier(.25,1,.5,1) forwards slideUp}.hero-title.line2 span{animation-delay:.15s}.hero-year{letter-spacing:-.05em;-webkit-text-stroke:2px var(--text);color:#0000;margin-top:-.1em;font-size:clamp(3rem,12vw,11rem);font-weight:900;line-height:.9;overflow:hidden}.hero-year span{display:inline-block;transform:translateY(120%)}.hero-year.visible span{animation:1s cubic-bezier(.25,1,.5,1) .3s forwards slideUp}.hero-nav-line{background:var(--text);transform-origin:0;width:100%;height:1px;margin:1.2rem 0 .8rem;transform:scaleX(0)}.hero-nav-line.visible{animation:1.2s cubic-bezier(.25,1,.5,1) .6s forwards lineGrow}.hero-sub{opacity:0;justify-content:space-between;align-items:flex-start;display:flex}.hero-sub.visible{animation:1s .8s forwards fadeIn}.hero-sub-nav{text-transform:uppercase;letter-spacing:.02em;gap:3rem;font-size:.8rem;font-weight:500;display:flex}.hero-description{opacity:0;color:#333;max-width:520px;margin-top:3rem;font-size:1.05rem;font-weight:400;line-height:1.6}.hero-description.visible{animation:1s 1s forwards fadeIn}.scroll-indicator{text-transform:uppercase;letter-spacing:.15em;opacity:0;align-items:center;gap:1rem;font-size:.7rem;display:flex;position:absolute;bottom:2rem;left:3rem}.scroll-indicator.visible{animation:1s 1.5s forwards fadeIn}.scroll-line{background:var(--text);width:40px;height:1px;position:relative;overflow:hidden}.scroll-line:after{content:"";background:var(--muted);width:100%;height:100%;animation:2s infinite scrollAnim;position:absolute;top:0;left:-100%}section{padding:8rem 3rem;position:relative}.section-label{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-bottom:1rem;font-size:.7rem}.section-title{letter-spacing:-.04em;margin-bottom:3rem;font-size:clamp(2rem,5vw,4.5rem);font-weight:800;line-height:1.05}.work-showcase{border-radius:20px;gap:2rem;height:70vh;min-height:500px;display:flex}.work-showcase.full-screen{border-radius:0;gap:0;height:100svh;margin:0}.work-thumbnails{scrollbar-width:none;flex-direction:column;flex-shrink:0;gap:1rem;width:80px;display:flex}.work-showcase.full-screen .work-thumbnails{background:var(--bg);z-index:10;align-items:center;width:100px;padding:3rem 1rem}.work-thumbnails::-webkit-scrollbar{display:none}.work-thumb{aspect-ratio:1;cursor:pointer;background:#0000000d;border:2px solid #0000;border-radius:12px;width:100%;transition:all .3s;position:relative;overflow:hidden}.work-thumb img{object-fit:cover;filter:grayscale()opacity(.5);width:100%;height:100%;transition:filter .3s,transform .3s}.work-thumb:hover img{filter:grayscale(50%)opacity(.8);transform:scale(1.05)}.work-thumb.active{border-color:var(--text)}.work-thumb.active img{filter:grayscale(0%)opacity()}.empty-thumb{background:var(--text);opacity:.1;width:100%;height:100%}.snap-section{scroll-snap-align:start;height:100svh;padding:0!important}.work-preview-container{background:var(--text);border-radius:24px;flex-grow:1;position:relative;overflow:hidden;box-shadow:inset 0 0 50px #00000080}.work-showcase.full-screen .work-preview-container{border-radius:0}.preview-item{opacity:0;pointer-events:none;cursor:pointer;align-items:flex-end;width:100%;height:100%;padding:3rem;transition:none;display:flex;position:absolute;top:0;left:0}.preview-item.active{opacity:1;pointer-events:auto;z-index:10}.preview-bg{object-fit:cover;z-index:1;filter:brightness(.6);width:100%;height:100%;transition:transform 6s linear;position:absolute;top:0;left:0}.preview-item.active .preview-bg{animation:10s forwards bgZoom;transform:scale(1.05)}@keyframes bgZoom{to{transform:scale(1.1)}}.preview-placeholder{z-index:1;background:linear-gradient(135deg,#111,#333);width:100%;height:100%;position:absolute;top:0;left:0}.preview-overlay{z-index:2;color:var(--bg);position:relative}.preview-meta{text-transform:uppercase;letter-spacing:.1em;color:#f5f5f0b3;margin-bottom:.5rem;font-size:.8rem}.preview-title{letter-spacing:-.02em;margin-bottom:.5rem;font-size:clamp(2rem,4vw,4rem);font-weight:800}.preview-cat{opacity:.8;font-size:1rem}.about-grid{grid-template-columns:1fr 1fr;align-items:start;gap:6rem;display:grid}.about-text{color:#333;max-width:600px;font-size:1.15rem;line-height:1.8}.about-stats{grid-template-columns:1fr 1fr;gap:3rem;display:grid}.stat-item{border-top:1px solid var(--text);padding-top:1rem}.stat-number{letter-spacing:-.04em;font-size:3rem;font-weight:900;line-height:1}.stat-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:.5rem;font-size:.75rem}.marquee-section{border-top:1px solid #0000001a;border-bottom:1px solid #0000001a;padding:4rem 0;overflow:hidden}.marquee-track{white-space:nowrap;animation:20s linear infinite marquee;display:flex}.marquee-item{letter-spacing:-.04em;-webkit-text-stroke:1.5px var(--text);color:#0000;flex-shrink:0;padding:0 2rem;font-size:clamp(3rem,7vw,6rem);font-weight:900}.marquee-item.filled{color:var(--text);-webkit-text-stroke:none}.philosophy{max-width:900px;padding:10rem 3rem}.philosophy-text{color:#222;font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:400;line-height:1.7}.philosophy-text em{color:var(--text);font-style:italic;font-weight:600}.contact{flex-direction:column;justify-content:center;min-height:80vh;padding:8rem 3rem;display:flex}.contact-title{letter-spacing:-.05em;font-size:clamp(3rem,10vw,9rem);font-weight:900;line-height:.95}.contact-title a{color:var(--text);text-decoration:none;transition:opacity .3s;position:relative}.contact-title a:hover{opacity:.5}.contact-info{text-transform:uppercase;letter-spacing:.1em;gap:4rem;margin-top:4rem;font-size:.8rem;display:flex}.contact-info a{color:var(--text);text-decoration:none;position:relative}.contact-info a:after{content:"";background:var(--text);transform-origin:100%;width:100%;height:1px;transition:transform .4s cubic-bezier(.25,1,.5,1);position:absolute;bottom:-3px;left:0;transform:scaleX(0)}.contact-info a:hover:after{transform-origin:0;transform:scaleX(1)}footer{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border-top:1px solid #0000001a;justify-content:space-between;padding:2rem 3rem;font-size:.7rem;display:flex}.reveal{opacity:0;transition:opacity .8s cubic-bezier(.25,1,.5,1),transform .8s cubic-bezier(.25,1,.5,1);transform:translateY(60px)}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes slideUp{to{transform:translateY(0)}}@keyframes lineGrow{to{transform:scaleX(1)}}@keyframes fadeIn{to{opacity:1}}@keyframes scrollAnim{0%{left:-100%}to{left:100%}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes shrinkHole{0%{transform:translate(-50%,-50%)scale(80)}to{transform:translate(-50%,-50%)scale(1)}}.tutorial-overlay-wrapper{z-index:100;cursor:pointer;opacity:0;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.work-showcase.fully-visible .tutorial-overlay-wrapper{opacity:1;pointer-events:auto}.tutorial-hole{will-change:transform;border-radius:50%;width:90px;height:90px;position:absolute;top:82px;left:50px;transform:translate(-50%,-50%)scale(80);box-shadow:0 0 0 9999px #000000d9}.work-showcase.fully-visible .tutorial-hole{animation:1.5s cubic-bezier(.25,1,.5,1) forwards shrinkHole}.tutorial-text{color:#fff;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;opacity:0;text-shadow:0 4px 20px #000c;font-size:2.5rem;font-weight:900;position:absolute;top:50%;left:calc(100% + 30px);transform:translateY(-50%)}.work-showcase.fully-visible .tutorial-text{animation:.5s 1.5s forwards fadeIn}@media (width<=768px){header{padding:1rem 1.5rem}nav a{margin-left:1.5rem;font-size:.7rem}.hero{padding:0 1.5rem}section{padding:5rem 1.5rem}.work-showcase{flex-direction:column;height:auto}.work-thumbnails{flex-direction:row;width:100%;overflow-x:auto}.work-thumb{flex-shrink:0;width:60px;height:60px}.work-preview-container{height:400px}.work-showcase.fully-visible .tutorial-hole{animation:1.5s cubic-bezier(.25,1,.5,1) forwards shrinkHoleMobile;top:46px;left:48px}@keyframes shrinkHoleMobile{0%{transform:translate(-50%,-50%)scale(80)}to{transform:translate(-50%,-50%)scale(.8333)}}.about-grid{grid-template-columns:1fr;gap:3rem}.contact{padding:5rem 1.5rem}.contact-info{flex-direction:column;gap:1.5rem}footer{flex-direction:column;gap:1rem}.hero-sub{flex-direction:column;gap:0}.hero-sub-nav{gap:1.5rem}.cursor,.cursor-ring{display:none}#intro-title{letter-spacing:1vw;font-size:10vw}.bush-element{width:200px;height:200px}.work-showcase.full-screen .work-thumbnails,.work-thumbnails{z-index:50;scrollbar-width:none;background:#fffffff2;flex-direction:row;align-items:flex-start;gap:12px;width:100%;padding:12px 16px;display:flex;position:relative;overflow:auto hidden}.work-thumbnails::-webkit-scrollbar{display:none}.work-thumb{border-radius:14px;flex-shrink:0;min-width:64px;min-height:64px}}