:root{color-scheme:dark;font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-synthesis:none;color:#fff;background:#03060c;--ice:#add6ff;--blue:#1169ff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #b6dcff;outline-offset:6px}button{border:0}svg{width:24px;height:24px}::selection{background:#468cff80}button:disabled{opacity:.45}.skip-link{position:fixed;left:15px;top:-80px;z-index:100}.skip-link:focus{top:15px}.atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 44%,#0b1c3a33,transparent 65%),#03060c}.atmosphere i{position:absolute;width:60vw;height:60vw;max-height:900px;border-radius:50%;background:radial-gradient(ellipse,#145add44,#0a358222 40%,transparent 70%);animation:aurora 23s ease-in-out infinite alternate}.atmosphere i:nth-child(1){left:-25%;top:10%}.atmosphere i:nth-child(2){right:-20%;top:30%;background:radial-gradient(ellipse,#166dff50,transparent 65%);animation-delay:-9s}.atmosphere i:nth-child(3){width:40vw;height:40vw;left:30%;top:-30%;opacity:.45;animation-delay:-15s}@keyframes aurora{to{transform:translate3d(15vw,-10vh,0) scale(1.2)}}
.glass{position:relative;isolation:isolate;border:1px solid #ffffff28;background:linear-gradient(140deg,#c8e7ff13,#8abfff06 45%,#d0eaff0e);box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #b0d4ff15,0 12px 40px #0005;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}.glass:before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(180px circle at var(--mx,15%) var(--my,0%),#e3f3ff1f,transparent 80%);z-index:-1}.site-header{position:absolute;top:29px;left:5%;right:5%;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{font-size:28px;font-weight:750;letter-spacing:-2px;width:160px}.wordmark span{font-size:17px;vertical-align:top;display:inline-block;margin:1px 0 0 3px}.main-nav{display:flex;padding:6px;border-radius:100px;gap:5px}.main-nav a{font-size:13px;padding:12px 22px;border-radius:100px;transition:background .3s,color .3s;color:#f4f8ffc4}.main-nav a.active{background:#e5f3ff17;box-shadow:inset 0 1px 0 #fff2;color:white}.main-nav a:hover{background:#f0f7ff1a;color:white}.main-nav a span{margin-left:8px}.header-note{width:160px;text-align:right;font-size:9px;letter-spacing:2px;color:#ffffff70}
.journey{position:relative;height:340svh;min-height:2100px}.scene{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;perspective:1400px}.hero-copy{position:absolute;top:14%;left:5%;right:5%;text-align:center;z-index:3;pointer-events:none;will-change:transform,opacity}.eyebrow{font-size:9px;letter-spacing:3.2px;font-weight:500;display:inline-flex;align-items:center;gap:9px;color:#c9def7b5}.eyebrow i{width:5px;height:5px;background:#83bbff;border-radius:50%;box-shadow:0 0 12px #86baff}.hero-copy h1{font-size:clamp(54px,9.3vw,138px);font-weight:620;letter-spacing:-.075em;line-height:1;margin:18px 0 15px;text-shadow:0 0 65px #a4d1ff12}.hero-copy p{font-size:clamp(15px,1.5vw,20px);letter-spacing:-.3px;font-weight:350;color:#c6d3e7a6;margin:0}.scene-halo{position:absolute;left:50%;top:63%;width:70%;height:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#125fff30,#12438a10 45%,transparent 70%);pointer-events:none}.orbit-line{position:absolute;left:50%;top:74%;width:90%;height:26%;border:1px solid #a3d1ff0b;transform:translate(-50%,-50%) rotateX(75deg);border-radius:50%;pointer-events:none}.work-stage{position:absolute;inset:0;perspective:1400px;touch-action:pan-y;z-index:4;user-select:none}.work-orbit{position:absolute;left:50%;top:57%;width:0;height:0;transform-style:preserve-3d}.work-card{position:absolute;left:0;top:0;width:clamp(185px,21vw,285px);height:clamp(232px,26vw,350px);margin:0;padding:10px;border-radius:25px;transform-style:flat;contain:layout paint style;will-change:transform,opacity;backface-visibility:hidden;background:linear-gradient(145deg,#7595bd44,#1a2b44cc 50%,#6486b33d);border:1px solid #d7ebff5c;box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 1px #deedff26,0 25px 65px #0008,0 0 0 1px #101a2840;text-align:left;overflow:hidden;transition:box-shadow .35s,border-color .35s}.work-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,#ffffff30,transparent 20%,transparent 68%,#c4e3ff15);pointer-events:none;z-index:2}.work-card:hover{border-color:#f3fbffad;box-shadow:inset 0 1px 1px #ffffff90,0 24px 80px #0009,0 0 45px #68aaff20}.work-card .cover{position:relative;width:100%;height:calc(100% - 43px);border-radius:17px;overflow:hidden;background:radial-gradient(circle at 30% 25%,#588bcc,#051229 65%);pointer-events:none}.cover img,.cover video{width:100%;height:100%;object-fit:cover;display:block}.cover .cover-shine{position:absolute;inset:0;background:linear-gradient(130deg,#fff1,transparent 45%);pointer-events:none}.card-caption{display:flex;align-items:center;justify-content:space-between;padding:15px 5px 0;gap:10px;font-size:12px;letter-spacing:-.2px;white-space:nowrap}.card-caption span:first-child{overflow:hidden;text-overflow:ellipsis}.card-caption .card-number{color:#d1e5ff80;font-size:9px;letter-spacing:1px}.card-open{position:absolute;top:22px;right:22px;width:28px;height:28px;border:1px solid #fff5;border-radius:50%;display:grid;place-items:center;background:#060a1630;font-size:12px;opacity:0;transition:opacity .3s}.work-card:hover .card-open,.work-card:focus-visible .card-open{opacity:1}.vortex-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;text-align:center;pointer-events:none;opacity:0;will-change:transform,opacity}.vortex-copy h2{font-size:clamp(48px,7.5vw,108px);line-height:.98;font-weight:500;letter-spacing:-.065em;margin:22px 0}.vortex-copy h2 span{color:#c3d9f9}.vortex-copy p{font-size:15px;font-weight:350;color:#d3e1f39c;margin:0}.carousel-ui{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:14px;will-change:opacity}.selection-caption{font-size:10px;display:flex;gap:24px;color:#c7d9efaa;letter-spacing:.2px}.selection-caption span:last-child{font-variant-numeric:tabular-nums;color:#e8f2ff6b}.carousel-controls{border-radius:100px;display:flex;align-items:center;padding:6px;gap:2px}.carousel-controls button{height:39px;border-radius:100px;background:transparent;display:flex;align-items:center;justify-content:center;gap:11px;transition:background .25s}.carousel-controls button:hover{background:#fff1}.carousel-controls button:not(.open-selected){width:43px}.carousel-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}.carousel-controls .open-selected{font-size:12px;min-width:145px;padding:0 23px}.small-play{font-size:9px}.control-divider{height:16px;width:1px;background:#ffffff1c}.study-note{font-size:9px;color:#c3d4ec70;letter-spacing:.4px}.scene-bottom{position:absolute;left:5%;right:5%;bottom:28px;z-index:10;display:flex;justify-content:space-between;align-items:center;color:#d5e7ff65;font-size:8px;letter-spacing:1.8px}.scene-bottom>span{width:220px}.scroll-cue{display:flex;align-items:center;gap:13px;font-size:8px;color:#d5e7ff8c}.scroll-cue span{font-size:16px;animation:down 2.5s ease-in-out infinite}@keyframes down{50%{transform:translateY(5px)}}.scene-progress{display:flex;align-items:center;justify-content:flex-end;gap:10px}.scene-progress b{font-weight:400;font-size:8px}.scene-progress i{height:1px;width:45px;background:#d7eaff28;position:relative}.scene-progress i:after{content:"";display:block;height:1px;width:calc(var(--progress,0)*100%);background:#d7eaff}.flow-anchor{position:absolute;top:40%;width:1px;height:1px}
.contact{position:relative;min-height:95svh;padding:160px 5% 0;text-align:center;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:linear-gradient(#03060c00,#03060c)}.contact-halo{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);width:1100px;height:700px;background:radial-gradient(ellipse,#1261ff4d,transparent 66%);pointer-events:none;z-index:0}.contact>.eyebrow,.contact>h2,.contact>p,.contact>.socials,.contact>footer{position:relative}.contact h2{font-size:clamp(52px,7.5vw,108px);font-weight:500;letter-spacing:-.065em;line-height:1.02;margin:28px 0 24px}.contact h2 em{font-style:normal;color:#a0c8ff}.contact>p{font-weight:350;color:#d9e7f7a6;font-size:17px}.socials{display:flex;gap:13px;margin:38px 0 110px}.social{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:20px;min-width:208px;text-align:left;transition:transform .3s,border-color .3s,background .3s}.social:hover{transform:translateY(-5px);border-color:#d9eeff66;background-color:#bddfff0d}.social>svg:first-child{width:21px;height:21px}.social>svg:last-child{width:15px;height:15px;opacity:.5;margin-left:auto}.social span{font-size:13px}footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding:30px 0;border-top:1px solid #dcecff12;color:#d3e3f277;font-size:9px;letter-spacing:1.8px}footer a{font-size:11px;color:#fff;letter-spacing:1px}footer a span{margin-left:14px}dialog{position:fixed;width:min(1100px,92vw);max-height:90svh;padding:12px;background:#0e1625e6;border:1px solid #dceeff40;border-radius:27px;box-shadow:0 50px 120px #000a;backdrop-filter:blur(35px);overflow:visible;color:#fff}dialog::backdrop{background:#01040ce0;backdrop-filter:blur(15px)}.preview-stage{height:min(70svh,700px);border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#040810}.preview-stage img,.preview-stage video{width:100%;height:100%;object-fit:contain}.preview-label{text-align:center;font-size:12px;color:#d8e9ffb3;margin:15px 0 5px}.close{position:absolute;right:0;top:-54px;border-radius:50%;width:40px;height:40px;font-size:25px;z-index:2}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);border-radius:100px;padding:16px 25px;font-size:12px;opacity:0;pointer-events:none;z-index:80;transition:.3s}.toast.visible{transform:translate(-50%,0);opacity:1}@media(min-width:1600px){.work-orbit{top:57%}.carousel-ui{bottom:11%}}@media(max-height:760px) and (min-width:701px){.hero-copy{top:15%}.hero-copy h1{font-size:84px;margin:14px 0}.work-card{width:220px;height:272px}.work-orbit{top:57%}.carousel-ui{bottom:7%}.scene-bottom{bottom:19px}}@media(max-width:700px){.site-header{top:20px;left:6%;right:6%}.wordmark{width:auto;font-size:25px}.header-note{display:none}.main-nav{padding:5px;gap:0}.main-nav a{padding:10px 15px;font-size:11px}.journey{height:300svh;min-height:1900px}.scene{min-height:650px}.hero-copy{top:19%}.eyebrow{font-size:7px;letter-spacing:2px}.hero-copy h1{font-size:clamp(40px,11vw,72px);margin:20px 0 14px;letter-spacing:-.065em}.hero-copy p{font-size:14px}.work-orbit{top:58%}.work-card{width:185px;height:235px;padding:8px;border-radius:22px}.work-card .cover{border-radius:15px;height:calc(100% - 39px)}.card-caption{font-size:10px;padding:13px 4px 0}.card-caption .card-number{font-size:8px}.carousel-ui{bottom:14%;gap:15px}.carousel-controls .open-selected{min-width:135px}.scene-bottom{left:6%;right:6%;bottom:25px;font-size:6px;letter-spacing:1px}.scene-bottom>span{width:auto}.scene-bottom>span:first-child{display:none}.scroll-cue{font-size:7px}.scene-progress b{font-size:7px}.scene-progress i{width:30px}.vortex-copy h2{font-size:52px}.vortex-copy p{font-size:12px}.contact{padding:120px 6% 0;min-height:90svh}.contact h2{font-size:clamp(46px,11vw,72px)}.contact>p{font-size:14px}.socials{flex-direction:column;width:100%;max-width:360px;margin:30px 0 80px;gap:11px}.social{padding:20px 24px;border-radius:20px;min-width:0}.social span{font-size:14px}footer{font-size:7px;letter-spacing:1px}footer a{font-size:9px}footer>span:nth-child(2){display:none}.atmosphere i{width:150vw;height:120vw;filter:none}.atmosphere i:nth-child(1){left:-80%;top:25%}.atmosphere i:nth-child(2){right:-80%;top:40%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.atmosphere i,.scroll-cue span{animation:none}.journey{height:auto;min-height:0}.scene{position:relative;height:900px}.work-stage{touch-action:pan-y}.flow-anchor{display:none}.vortex-copy{display:none}}

/* Moving cards use a cached glass-like surface; no live backdrop capture during scroll. */
.video-placeholder:after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:23px;color:#e1f0ffb3}
.atmosphere i{will-change:transform}.scene-halo,.contact-halo{contain:paint}
/* Five compact front cards. The hidden rear cards remain available through the carousel. */
.work-card{width:clamp(140px,16.3vw,235px);height:clamp(190px,20.5vw,292px);padding:8px;border-radius:21px}.work-card .cover{border-radius:14px;height:calc(100% - 38px)}.card-caption{padding:13px 4px 0;font-size:10px}.work-orbit{top:59%}.carousel-ui{bottom:13%;gap:0}.carousel-controls .open-selected{width:43px;min-width:43px;padding:0}.carousel-controls{gap:9px;padding:6px}.carousel-controls button:not(.open-selected){width:39px}.small-play{font-size:11px}.language-switch{width:128px;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border-radius:100px}.language-switch button{background:none;font-size:10px;letter-spacing:1px;border-radius:30px;padding:10px 12px;color:#d2e0f492}.language-switch button[aria-pressed=true]{background:#d9edff18;color:#fff;box-shadow:inset 0 1px 0 #fff2}.language-switch>span{height:12px;width:1px;background:#fff2}.wordmark{width:128px}.main-nav a>span:first-child{margin-left:0}.hero-copy h1{position:relative;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;font-weight:700;color:#f3f7ff;text-shadow:0 2px 1px #2b76d7a0}.hero-copy h1:after{content:attr(data-glow);position:absolute;inset:0;pointer-events:none;color:#72baff;text-shadow:0 0 12px #1687ff,0 0 30px #1875ff99;opacity:0;animation:title-pulse 6s ease-in-out infinite;will-change:opacity}.hero-copy .specialties{font-size:11px;letter-spacing:4px;color:#bccfe4b3;line-height:1.7}.atmosphere i{animation:aurora 23s ease-in-out infinite alternate,blue-pulse 9s ease-in-out infinite;will-change:transform,opacity}.atmosphere i:nth-child(2){animation-delay:-9s,-3s}.atmosphere i:nth-child(3){animation-delay:-15s,-6s}.cosmic-orb{position:absolute;width:390px;height:390px;left:-100px;top:-240px;border-radius:50%;border:1px solid #368cff66;background:radial-gradient(circle at 70% 70%,#030911 50%,#124a8666 75%,#84d8ff70 98%);box-shadow:0 0 70px #1066f31a}.light-arc{position:absolute;width:140vw;height:45vw;border:1px solid #348dff55;border-radius:50%;box-shadow:0 -1px 8px #168aff1c;pointer-events:none}.arc-one{top:33%;left:-75%;transform:rotate(25deg)}.arc-two{top:38%;right:-78%;transform:rotate(-28deg);border-color:#419aff7a}@keyframes title-pulse{0%,100%{opacity:.05}50%{opacity:.6}}@keyframes blue-pulse{0%,100%{opacity:.45}50%{opacity:1}}
.scroll-cue .cue-text{font-size:8px;animation:none}
@media(max-height:760px) and (min-width:701px){.work-card{width:clamp(140px,16vw,215px);height:250px}.work-orbit{top:59%}.carousel-ui{bottom:10%}}
@media(max-width:700px){.site-header{flex-wrap:wrap;gap:15px}.wordmark{width:auto}.main-nav{order:3;width:100%;justify-content:center}.main-nav a{padding:10px 18px}.language-switch{width:auto;gap:2px;padding:3px}.language-switch button{padding:8px 10px}.hero-copy{top:23%}.hero-copy h1{font-size:11vw}.hero-copy .specialties{font-size:8px;letter-spacing:1.3px}.work-card{width:clamp(65px,19.5vw,135px);height:clamp(100px,27vw,180px);padding:4px;border-radius:12px}.work-card .cover{border-radius:8px;height:calc(100% - 19px)}.card-caption{font-size:6px;padding:6px 1px 0;gap:2px}.card-caption .card-number{font-size:5px}.work-orbit{top:56%}.carousel-ui{bottom:24%}.card-open{top:9px;right:9px;width:17px;height:17px;font-size:8px}.cosmic-orb{width:230px;height:230px;left:-105px;top:-150px}.light-arc{width:190vw;height:85vw}.arc-one{left:-130%}.arc-two{right:-130%}.scroll-cue .cue-text{font-size:7px}}
@media(prefers-reduced-motion:reduce){.hero-copy h1:after,.atmosphere i{animation:none}.hero-copy h1:after{opacity:.15}}

/* Landscape work, with a 16:9 cover and a narrow caption strip. */
.work-card{width:clamp(160px,18.2vw,280px);height:auto;aspect-ratio:1.48;padding:8px;border-radius:19px}
.work-card .cover{height:auto;aspect-ratio:16/9;border-radius:12px}.card-caption{padding:9px 3px 0;font-size:10px}.card-open{top:16px;right:16px}
.work-anchor{position:absolute;top:24svh;width:1px;height:1px;pointer-events:none}
.work-stage{transition:transform .5s ease}.scene.work-focused .hero-copy{opacity:0!important}.scene.work-focused .work-stage{transform:translateY(-6svh)}.scene.work-focused .carousel-ui{bottom:20%}
/* Keep glass highlights without recapturing a full-screen video backdrop on zoom. */
dialog,dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}.glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:700px){.work-card{width:clamp(90px,29vw,185px);height:auto;aspect-ratio:1.38;padding:4px;border-radius:11px}.work-card .cover{height:auto;aspect-ratio:16/9;border-radius:7px}.card-caption{font-size:6px;padding:5px 1px 0}.card-open{top:8px;right:8px}.scene.work-focused .carousel-ui{bottom:28%}}
@media(prefers-reduced-motion:reduce){.work-stage{transition:none}}

/* Native image cursor stays in sync through page zoom, dialogs and fullscreen. */
@media(hover:hover) and (pointer:fine){html,body,body *,dialog,dialog *,video,video:fullscreen,video::-webkit-media-controls-panel,video::-webkit-media-controls-play-button,video::-webkit-media-controls-timeline{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2238%22%20viewBox%3D%220%200%2030%2038%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%2370b7ff%22%20stop-opacity%3D%22.45%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eff8ff%22%20stop-opacity%3D%22.85%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M4%203%2025%2022%2015%2023%2011%2034%204%203Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%2313253e%22%20stroke-opacity%3D%22.8%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%203%2025%2022%2015%2023%2011%2034%204%203Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%23e2f1ff%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 4 3,auto!important}}

.site-header{position:fixed}.work-heading{position:absolute;top:27%;left:5%;right:5%;text-align:center;font-size:clamp(26px,4vw,48px);font-weight:500;letter-spacing:-.045em;opacity:0;pointer-events:none;transition:opacity .3s}.work-focused .work-heading{opacity:1}.work-focused[data-phase="vortex"] .work-heading{opacity:0}

/* Only the hovered video card gets a decoder; its cached cover remains underneath. */
.cover .hover-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#040810;pointer-events:none;opacity:0;transition:opacity .15s}
.preview-playing .hover-preview{opacity:1}.preview-playing .card-open{opacity:0}.preview-playing .video-placeholder:after{display:none}
@media(prefers-reduced-motion:reduce){.cover .hover-preview{transition:none}}

.custom-copy{white-space:pre-line}.hero-copy h1{overflow-wrap:anywhere}
/* Stationary letters emerge from darkness in a freshly shuffled order. */
.site-intro{display:none}.intro-pending{background:#000}.intro-pending body{overflow:hidden}.intro-pending .site-intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000;pointer-events:auto;isolation:isolate;overflow:hidden}
.intro-word{display:flex;align-items:center;justify-content:center;margin:0;padding:0 6vw;font-size:clamp(14px,calc(140vw / var(--name-length,9)),150px);font-weight:700;letter-spacing:-.065em;line-height:1.2;color:#edf6ff;white-space:nowrap}
.intro-word span{display:inline-block;opacity:0;transform:none;text-shadow:0 0 24px #3289ff66;will-change:opacity}
.intro-playing .intro-word span{animation:intro-ignite 1.2s cubic-bezier(.4,0,.2,1) both;animation-delay:var(--ignite-delay,0ms)}
.intro-glow{display:none}.intro-pending .site-shell{opacity:0;visibility:hidden}.intro-revealing .site-shell{visibility:visible;animation:portfolio-arrive 2.4s cubic-bezier(.4,0,.2,1) both}.intro-revealing .site-intro{pointer-events:none;animation:intro-depart 1.7s ease-in-out both}
@keyframes intro-ignite{from{opacity:0}to{opacity:1}}@keyframes intro-depart{to{opacity:0;visibility:hidden}}@keyframes portfolio-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none!important}.intro-pending body{overflow:auto}.intro-pending .site-shell{opacity:1;visibility:visible;animation:none}}
/* Category wheels unfold into concentric rings, without backdrop capture. */
.category-bar{position:absolute;left:6%;right:6%;top:39%;z-index:16;display:flex;gap:9px;justify-content:safe center;overflow-x:auto;scrollbar-width:thin;padding:8px 4px;max-height:66px;will-change:opacity}.category-pill{flex-shrink:0;border-radius:50px;padding:10px 17px;display:flex;align-items:center;gap:10px;font-size:11px;white-space:nowrap}.category-pill[aria-pressed=true]{background:#377cdf40;border-color:#91c6ff90;box-shadow:inset 0 1px 0 #d8ecff55,0 0 22px #2988ff20}.category-pill small{font-size:9px;opacity:.55}.category-empty{position:absolute;left:5%;right:5%;top:58%;text-align:center;font-size:13px;color:#d3e4f0aa;z-index:4;pointer-events:none}.category-empty[hidden]{display:none}.work-orbit{top:64%}.tunnel-ring{position:absolute;left:0;top:0;border:1px solid #78bfff5c;border-radius:50%;pointer-events:none;will-change:transform,opacity;opacity:0;box-shadow:0 0 22px #1f79ff0d}.tunnel-ring>span{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-size:10px;letter-spacing:1.4px;color:#d1e8ff;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scene.work-focused .category-bar{top:35%}.scene.work-focused .work-heading{top:24%}@media(max-width:700px){.category-bar{top:39%;left:4%;right:4%;justify-content:flex-start;max-height:59px}.category-pill{padding:9px 13px;font-size:10px}.work-orbit{top:60%}.tunnel-ring>span{font-size:8px;top:-19px}.scene.work-focused .category-bar{top:36%}.scene.work-focused .work-heading{top:28%}}

/* Centered overview, with categories radiating out to either side. */
.category-bar{display:block;max-height:80px;padding:13px 8px;scrollbar-width:none}.category-bar::-webkit-scrollbar{display:none}.category-rail{display:grid;align-items:center;gap:10px;width:max-content;min-width:100%;margin-inline:auto}.category-side{display:flex;align-items:center;gap:10px;width:max-content}.category-left{justify-self:end}.category-right{justify-self:start}.category-pill{transition:transform .3s,border-color .3s,background-color .3s;min-height:42px}.category-pill.all-works{justify-self:center}.category-pill:hover,.category-pill:focus-visible{transform:translateY(-5px);border-color:#d9eeff66;background-color:#bddfff0d}.category-pill[aria-pressed=true]:hover{border-color:#d9eeff99;background-color:#bddfff0d}
@media(max-width:700px){.category-bar{max-height:75px;padding:12px 5px}.category-rail,.category-side{gap:8px}.category-pill{min-height:38px}}
@media(prefers-reduced-motion:reduce){.category-pill{transition:none}.category-pill:hover,.category-pill:focus-visible{transform:none}}

.category-rail{justify-content:center}

/* Solid card surface: overlapping rings must occlude each other. */
.work-card{background-color:#122033}

/* Optical scene: ribbed sculpture behind the work, refractive lenses over the name. */
.atmosphere{background:#02050b}.atmosphere i,.cosmic-orb,.light-arc{display:none}#kinetic-background{position:absolute;inset:0;width:100%;height:100%;display:block}#title-lenses{position:absolute;inset:0;width:100%;height:100%;z-index:13;pointer-events:none}.journey{height:340svh;min-height:2100px}.scene-halo{opacity:.35}.orbit-line{display:none}.tunnel-ring{border-color:#89c7ff25;box-shadow:none}.vortex-copy{max-width:65vw;margin-inline:auto}.vortex-copy h2{font-size:clamp(40px,6vw,86px)}.optical-fallback .atmosphere{background:radial-gradient(ellipse at 50% 60%,#14396b70,transparent 60%),#03060c}.optical-fallback .atmosphere i{display:block}
@media(max-width:700px){.journey{height:300svh;min-height:1900px}.vortex-copy{max-width:82vw}.vortex-copy h2{font-size:42px}#title-lenses{z-index:13}}

.optical-fallback #kinetic-background,.optical-fallback #title-lenses{display:none}

.scene.work-focused #title-lenses{opacity:0}

/* Neutral refraction, tactile spheres, and a deliberately short pointer trace. */
.sphere-handles{position:absolute;inset:0;z-index:14;pointer-events:none}.sphere-handles[hidden]{display:none}.sphere-handle{position:absolute;left:0;top:0;border-radius:50%;padding:0;border:0;background:transparent;pointer-events:auto;touch-action:none;will-change:transform}.sphere-handle:focus-visible{outline:1px solid #a4dbff;outline-offset:4px}.sphere-handle.dragging{box-shadow:0 0 18px #79c5ff22}.scene.work-focused .sphere-handles{display:none}.neon-trail{position:fixed;left:0;top:0;width:160px;height:160px;z-index:95;pointer-events:none;contain:strict}.vortex-copy h2 span,.contact h2 em,.contact h2 .text-accent,.text-accent{font-style:normal;color:#8bc4ff;text-shadow:0 0 32px #238eff25}@media(prefers-reduced-motion:reduce){.neon-trail{display:none}.journey{height:auto;min-height:0}}

/* Live compositor lenses: all page content, images and video are refracted in place. */
#title-lenses{display:none!important}.sphere-filter-defs{position:fixed;left:0;top:0;pointer-events:none;overflow:hidden}.sphere-handles{position:fixed;inset:0;z-index:60;pointer-events:none}.scene.work-focused .sphere-handles{display:block}.sphere-handle{background:transparent;border:1px solid #d6ecff5c;box-shadow:inset 0 0 1px 1px #e1f3ff3b,inset -3px -4px 7px #16273b26,0 3px 14px #0002;isolation:isolate;overflow:hidden;transition:box-shadow .2s}.sphere-handle::before,.sphere-handle::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}.sphere-handle::before{background:radial-gradient(ellipse at 25% 15%,#ffffff38,transparent 27%),radial-gradient(ellipse at 75% 85%,#e0f4ff20,transparent 30%);box-shadow:inset 1px 2px 3px #ffffff57,inset -1px -1px 2px #b4d7ff35}.sphere-handle::after{inset:5% 12% 70%;border-top:1px solid #ffffff75;transform:rotate(-22deg);filter:blur(.3px)}.sphere-handle.dragging{box-shadow:inset 0 0 1px 1px #e1f3ff80,0 0 18px #79c5ff20}/* Spheres inherit the same reveal as the page; no separate visibility gate or fade. */

/* A continuous liquid lens: soft reflection bands, without a hard highlight cut. */
.sphere-handle::after{inset:2% 12% 68%;border:0;background:radial-gradient(ellipse at 40% 0%,#ffffff5c,transparent 65%);transform:rotate(-22deg);filter:blur(1.5px)}

/* Real video bends through a short refractive glass morph, then returns to native rendering. */
.liquid-source{visibility:hidden!important}.liquid-player-defs{position:absolute;width:0;height:0;pointer-events:none;overflow:hidden}
#preview{transform-origin:center;isolation:isolate}#preview.liquid-transition{will-change:transform;border-color:#dcf0ffb0;background:#111b2bd9;box-shadow:inset 0 1px 2px #fff9,inset 0 -2px 6px #70baff55,0 35px 110px #0009;backdrop-filter:none}
.liquid-transition .preview-stage{border-radius:inherit;will-change:filter}.liquid-sheen{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:radial-gradient(ellipse at 0 0,#fff9,transparent 35%),conic-gradient(from 140deg at 50% 50%,transparent 15%,#3beaffaa 22%,#ff50ce99 25%,transparent 34%,transparent 63%,#ffedaaaa 68%,#7bdcffaa 73%,transparent 83%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:5px;box-shadow:inset 0 0 18px #e6f6ff66}
.preview-stage{position:relative}.liquid-transition::backdrop{animation:liquid-backdrop-in .55s ease both}.liquid-closing::backdrop{animation:liquid-backdrop-out .56s ease both}
@keyframes liquid-backdrop-in{from{background:#01040c00}to{background:#01040ce0}}@keyframes liquid-backdrop-out{from{background:#01040ce0}to{background:#01040c00}}
@media(prefers-reduced-motion:reduce){.liquid-transition::backdrop{animation:none!important}}

.liquid-source.liquid-source-returning{visibility:visible!important;opacity:var(--liquid-return,0)!important}.liquid-return-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#040810;pointer-events:none;z-index:3}.liquid-closing{pointer-events:none}.liquid-closing::backdrop{animation-duration:.72s}

/* The settled player keeps a thin, live refractive rim; video stays unfiltered. */
#preview{background:linear-gradient(135deg,#6e88a633,#0b1221a8 35%,#497caa26);border-color:#d5edff52;box-shadow:inset 0 1px 1px #fff7,inset 0 -1px 1px #8cd6ff3b,0 35px 110px #0009}
.player-glass-frame{position:absolute;inset:0;padding:10px;border-radius:inherit;pointer-events:none;z-index:4;backdrop-filter:url("#liquid-frame-refraction");-webkit-backdrop-filter:url("#liquid-frame-refraction");mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;background:radial-gradient(ellipse at 8% 0%,#fff7,transparent 45%),conic-gradient(from 145deg,#bcecff1f,#58dfff4d 12%,#ff8ac930 18%,transparent 30%,#fff3 50%,#598fff4d 66%,#ffc5ee38 70%,transparent 85%);box-shadow:inset 0 1px 2px #fff8,inset 1px -1px 2px #77c6ff50}
.liquid-transition .player-glass-frame{backdrop-filter:none;-webkit-backdrop-filter:none}.liquid-transition .preview-stage{contain:paint}.liquid-transition .preview-label{opacity:.65}
@media(prefers-reduced-motion:reduce){.player-glass-frame{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Filter only four narrow strips instead of the full player-sized backdrop. */
.player-glass-frame{backdrop-filter:none;-webkit-backdrop-filter:none}.glass-edge{position:absolute;pointer-events:none;backdrop-filter:url("#liquid-frame-refraction");-webkit-backdrop-filter:url("#liquid-frame-refraction");background:#d2edff05}.edge-top,.edge-bottom{left:0;right:0;height:13px}.edge-top{top:0}.edge-bottom{bottom:0}.edge-left,.edge-right{top:0;bottom:0;width:13px}.edge-left{left:0}.edge-right{right:0}.liquid-transition .glass-edge{backdrop-filter:none;-webkit-backdrop-filter:none}@media(prefers-reduced-motion:reduce){.glass-edge{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Larger home cards keep landscape covers; tunnel scale is set independently. */
.work-card{width:clamp(230px,24.5vw,370px)}
@media(max-width:700px){.work-card{width:clamp(140px,42vw,225px)}}

/* Keep the larger carousel clear of both category pills and its controls. */
.showreel-card{border-color:#a1d5ffb3;box-shadow:inset 0 1px 1px #ffffff70,0 0 28px #4b9fff26,0 25px 65px #0008}.showreel-card .card-number{color:#a9d7ff;letter-spacing:1.5px}
.carousel-ui{bottom:8%}
@media(max-height:760px) and (min-width:701px){.category-bar{top:35%}.hero-copy{top:12%}.carousel-ui{bottom:6%}}
@media(max-width:700px){.carousel-ui{bottom:8%}}

/* Original holographic emblem, with a light sweep confined to its glass. */
.holographic-wordmark{display:flex;align-items:center;mix-blend-mode:screen;flex-shrink:0}
.holographic-wordmark .logo-art{position:relative;display:block;width:96px;height:64px;margin:0;overflow:hidden;transition:transform .45s ease;vertical-align:initial;font-size:0}
.logo-art img{position:absolute;width:116px;height:116px;max-width:none;left:-10px;top:-25px;object-fit:contain;pointer-events:none;user-select:none}
.logo-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 32%,#75d9ff80 43%,#fff 48%,#ecc5ffad 51%,transparent 61%);background-size:260% 100%;mix-blend-mode:screen;mask:url('/assets/brand/malofilov-holographic.png') -10px -25px / 116px 116px no-repeat luminance;-webkit-mask-image:url('/assets/brand/malofilov-holographic.png');-webkit-mask-size:116px 116px;-webkit-mask-position:-10px -25px;-webkit-mask-repeat:no-repeat;mask-mode:luminance;animation:emblem-light 6s ease-in-out infinite}
.holographic-wordmark:hover .logo-art{transform:scale(1.05)}
.holographic-wordmark:focus-visible{outline:2px solid #a0d4ff;outline-offset:5px;border-radius:10px}
@keyframes emblem-light{0%,12%{background-position:150% 50%;opacity:0}24%{opacity:.85}60%{opacity:.75}76%,100%{background-position:-80% 50%;opacity:0}}
@media(max-width:700px){.holographic-wordmark .logo-art{width:84px;height:56px}.logo-art img{width:100px;height:100px;left:-8px;top:-21px}.logo-art:after{mask-size:100px 100px;mask-position:-8px -21px;-webkit-mask-size:100px 100px;-webkit-mask-position:-8px -21px}}
@media(prefers-reduced-motion:reduce){.logo-art:after{animation:none;opacity:0}.holographic-wordmark .logo-art{transition:none}}
.logo-art img{mask:url('/assets/brand/malofilov-holographic.png') center / 100% 100% no-repeat luminance;mask-mode:luminance}