/* Directional movement and light. No shake, camera jitter or oscillating images. */
.scroll-reveal{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.scroll-reveal.is-revealed{opacity:1;transform:none}
.work-image,.piece-image{isolation:isolate}.work-image:after,.piece-image:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--hover-x,50%) var(--hover-y,50%),#b9b0ff23,transparent 65%);box-shadow:inset 0 0 0 1px #ffffff00;opacity:0;transition:opacity .4s}.work-card:hover .work-image:after,.piece:hover .piece-image:after{opacity:1}.work-arrow{transition:transform .35s,background .35s}.work-card:hover .work-arrow{transform:translate(3px,-3px);background:#bba8ff22}.piece-control{transition:transform .3s,background .3s}.piece:hover .piece-control{transform:scale(1.08);background:#b7acff40}.design-preview:hover img{transform:none!important}
.intro-replay{display:inline-flex;margin-top:20px;padding:7px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);font-size:11px;letter-spacing:0}.intro-replay:hover{color:var(--text)}
.creative-intro{position:fixed;inset:0;z-index:99;display:grid;place-items:center;pointer-events:none;background:#090b10ef;animation:intro-depart 1.4s ease both;backdrop-filter:blur(12px)}.intro-scene{width:310px;text-align:center}.intro-scene>p{font-size:12px;color:#cdd1dc;letter-spacing:.3px;margin-top:30px}.intro-slate{width:268px;height:172px;position:relative;margin:auto;perspective:500px;filter:drop-shadow(0 15px 28px #0008)}.slate-arm{position:absolute;top:0;left:0;width:100%;height:34px;border:1px solid #e1e4ea99;border-radius:5px 5px 0 0;background:repeating-linear-gradient(125deg,#f0f1f2 0 26px,#20242d 27px 53px);transform-origin:6px 30px;animation:slate-clap .8s cubic-bezier(.2,.8,.2,1) both;z-index:2}.slate-board{position:absolute;inset:37px 0 0;background:linear-gradient(145deg,#353944,#14161d);border:1px solid #e1e4ea50;border-radius:0 0 7px 7px;text-align:left;padding:18px 22px;color:#eee}.slate-board>span{font-size:14px;font-weight:500;letter-spacing:2px}.slate-board>div{display:grid;grid-template-columns:1fr 45px;gap:5px 16px;border-top:1px solid #fff3;margin-top:12px;padding-top:10px}.slate-board small{font-size:7px;color:#a9b0c4;grid-row:1}.slate-board b{font-size:13px;font-weight:400}.slate-record{position:absolute;right:18px;top:20px;width:5px;height:5px;background:#f06779;border-radius:50%;box-shadow:0 0 11px #f0677988;animation:rec-on .8s ease both}
.photo-stage{height:170px;position:relative}.studio-light{position:absolute;top:10px;width:66px;height:66px;border-radius:8px;border:2px solid #929bad;background:linear-gradient(135deg,#fafaff,#bdc9e3);box-shadow:0 0 0 6px #1a1d27,0 0 30px #d8dfff00;animation:light-on .7s ease both}.studio-light.left{left:3px;transform:rotate(-12deg)}.studio-light.right{right:3px;transform:rotate(12deg);animation-delay:.2s}.studio-light:after{content:"";position:absolute;width:4px;height:85px;top:65px;left:29px;background:#727b90;box-shadow:15px 77px 0 -1px #727b90,-15px 77px 0 -1px #727b90}.photo-aperture{position:absolute;left:119px;top:66px;width:72px;height:72px;border:2px solid #98b5ff;border-radius:50%;box-shadow:0 0 40px #a2b5ff22;animation:aperture-reveal .9s ease both}.photo-aperture i{position:absolute;left:22px;top:8px;width:30px;height:44px;border:1px solid #b5c6f9;clip-path:polygon(0 0,100% 0,100% 80%,0 40%);transform-origin:14px 27px}.photo-aperture i:nth-child(2){transform:rotate(60deg)}.photo-aperture i:nth-child(3){transform:rotate(120deg)}.photo-aperture i:nth-child(4){transform:rotate(180deg)}.photo-aperture i:nth-child(5){transform:rotate(240deg)}.photo-aperture i:nth-child(6){transform:rotate(300deg)}
.design-stage{position:relative;width:210px;height:150px;margin:auto;border:1px solid #8cafee66;display:grid;place-items:center}.design-stage>span{font-size:86px;letter-spacing:-7px;font-weight:300;color:#c5b1ff;animation:type-set .8s cubic-bezier(.2,.7,.2,1) both}.design-guides{position:absolute;inset:-16px;border:1px dashed #b4b5d936;background:linear-gradient(90deg,transparent 49.8%,#9ab3eb38 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#9ab3eb38 50%,transparent 50.2%)}.design-stage>i{position:absolute;bottom:-26px;left:64px;width:21px;height:21px;border-radius:50%;background:#95c2ff;animation:swatch-in .7s ease both}.design-stage>i:nth-last-child(2){left:94px;background:#b39eff;animation-delay:.12s}.design-stage>i:last-child{left:124px;background:#ddceff;animation-delay:.24s}
.web-stage{width:280px;height:170px;margin:auto;position:relative;border:1px solid #b4c2e867;border-radius:8px;background:#181c28;overflow:hidden}.web-chrome{height:23px;display:flex;gap:5px;align-items:center;padding:0 10px;border-bottom:1px solid #b4c2e824}.web-chrome i{width:5px;height:5px;border-radius:50%;background:#8899bb}.web-layout{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px}.web-layout span{height:34px;border-radius:3px;background:linear-gradient(120deg,#536da0,#83719e);animation:layout-build .75s ease both}.web-layout span:first-child{grid-column:span 2;height:55px}.web-layout span:nth-child(2){animation-delay:.12s}.web-layout span:nth-child(3){animation-delay:.24s}.web-layout span:last-child{height:6px;width:65px;animation-delay:.3s}.design-pointer{position:absolute;right:32px;top:90px;width:11px;height:15px;clip-path:polygon(0 0,100% 70%,48% 70%,30% 100%);background:white;animation:pointer-place 1s ease both}
.social-stage{width:240px;height:180px;margin:auto;position:relative}.social-phone{position:absolute;left:20px;top:0;width:100px;height:178px;border-radius:15px;border:2px solid #aeb9d5;background:#1e2537;padding:19px 8px 8px;transform:rotate(-7deg);animation:phone-in .75s ease both}.social-phone>i{position:absolute;top:7px;left:35px;width:27px;height:3px;border-radius:5px;background:#919fbb}.social-phone>div{height:90px;border-radius:6px;background:linear-gradient(145deg,#5a8eba,#b299d0)}.social-phone>span{display:block;width:62px;height:4px;background:#c5cfe94c;border-radius:5px;margin-top:8px}.social-phone>span:nth-last-child(2){width:44px}.social-phone>b{position:absolute;right:8px;bottom:9px;font-size:13px;color:#b0ded2}.social-card{position:absolute;right:0;top:34px;width:122px;background:#242c42;border:1px solid #b4c2e86b;padding:14px;border-radius:8px;text-align:left;font-size:20px;color:#dee7fa;line-height:1.3;animation:swatch-in .85s ease both}.social-card>em{color:#baa2f1}
@keyframes intro-depart{0%{opacity:0}10%,68%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes slate-clap{0%,24%{transform:rotate(-24deg)}58%,100%{transform:rotate(0)}}@keyframes rec-on{0%,45%{opacity:0}65%,100%{opacity:1}}@keyframes light-on{0%{opacity:.2;filter:brightness(.5)}45%,65%{opacity:1;filter:brightness(1.3);box-shadow:0 0 0 6px #1a1d27,0 0 80px 30px #d8dfff50}100%{opacity:1;filter:brightness(1);box-shadow:0 0 0 6px #1a1d27,0 0 50px #d8dfff33}}@keyframes aperture-reveal{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}@keyframes type-set{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}@keyframes swatch-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}@keyframes layout-build{0%{opacity:0;transform:scaleX(.7);transform-origin:left}100%{opacity:1;transform:scaleX(1)}}@keyframes pointer-place{0%{opacity:0;transform:translate(24px,24px)}100%{opacity:1;transform:none}}@keyframes phone-in{0%{opacity:0;transform:translateY(16px) rotate(-7deg)}100%{opacity:1;transform:rotate(-7deg)}}
.has-timeline{padding-bottom:88px}.portfolio-timeline{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:14;width:min(980px,calc(100% - 36px));height:68px;display:flex;align-items:center;gap:17px;padding:10px 16px;border:1px solid #a9b3d33b;border-top-color:#d3dcff66;border-radius:13px;background:color-mix(in srgb,var(--bg),transparent 12%);box-shadow:inset 0 1px 0 #d9e1ff14,0 8px 26px #0003;backdrop-filter:blur(22px)}.timeline-controls{display:flex;gap:4px}.timeline-controls button{width:29px;height:32px;border:0;border-radius:5px;display:grid;place-items:center;background:none;color:var(--muted)}.timeline-controls button:hover{background:#a8baff20;color:var(--text)}.timeline-controls svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}.timeline-track{display:block;position:relative;flex:1;height:43px}.timeline-label{font-size:8px;letter-spacing:.4px;color:var(--muted);position:absolute;top:-2px;left:0}.timeline-frames{position:absolute;left:0;right:0;bottom:0;height:27px;display:flex;gap:2px;border-top:2px solid #a6bbf2;overflow:hidden;border-radius:2px}.timeline-frames img{width:11.12%;min-width:0;height:100%;object-fit:cover;opacity:.7}.timeline-track input{appearance:none;-webkit-appearance:none;width:100%;position:absolute;inset:10px 0 0;height:33px;margin:0;background:none;z-index:2;cursor:ew-resize}.timeline-track input::-webkit-slider-runnable-track{height:27px;background:none}.timeline-track input::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:36px;background:#c1b2ff;margin-top:-6px;box-shadow:0 0 7px #bdb2ff9f;border-radius:1px}.timeline-track input::-moz-range-track{height:27px;background:none}.timeline-track input::-moz-range-thumb{width:3px;height:34px;background:#c1b2ff;border:0;border-radius:1px}.timeline-playhead{position:absolute;top:9px;height:6px;width:9px;background:#d1c5ff;clip-path:polygon(0 0,100% 0,50% 100%);left:calc(var(--scroll-progress,0%) - 3px);pointer-events:none}.timeline-position{font:10px ui-monospace,monospace;color:var(--muted);width:30px;text-align:right}body:has(dialog[open]) .portfolio-timeline{visibility:hidden}
@media(max-width:700px){.portfolio-timeline{bottom:8px;width:calc(100% - 16px);gap:9px;padding:8px 10px;height:61px}.timeline-controls{gap:0}.timeline-controls button{width:25px}.timeline-position{font-size:9px;width:27px}.timeline-label{font-size:7px}.creative-intro{backdrop-filter:blur(8px)}}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;transform:none;transition:none}.creative-intro{display:none}.work-arrow,.piece-control{transition:none}}

.contact-intro-stage{height:150px;display:grid;place-items:center;position:relative;border:1px solid #c8c7ed44;border-radius:10px;background:linear-gradient(140deg,#222940,#151923)}.contact-intro-stage>span{font-size:35px;font-weight:300;color:#d7d1f5;animation:type-set .85s ease both}.contact-intro-stage>i{position:absolute;top:18px;right:20px;width:7px;height:7px;border-radius:50%;background:#f26c7b;box-shadow:0 0 15px #f26c7b77;animation:rec-on .8s ease both}

/* The entrance opens the page itself. No replay UI, no shake. */
.intro-replay{display:none}.creative-intro{background:none;backdrop-filter:none;animation:none;isolation:isolate}.creative-intro:before,.creative-intro:after{content:"";position:absolute;top:0;bottom:0;width:50.1%;background:var(--bg);z-index:-1;animation:curtain-open 1.3s cubic-bezier(.4,0,.2,1) both}.creative-intro:before{left:0;--curtain-direction:-101%}.creative-intro:after{right:0;--curtain-direction:101%}.intro-scene{animation:scene-open 1.3s ease both}.entrance-reveal{animation:content-uncover 1.3s cubic-bezier(.2,.7,.2,1) both}.intro-scene>p{color:var(--text)}
@keyframes curtain-open{0%,26%{transform:translateX(0)}100%{transform:translateX(var(--curtain-direction))}}@keyframes scene-open{0%{opacity:0}14%,48%{opacity:1}80%,100%{opacity:0}}@keyframes content-uncover{0%,25%{clip-path:inset(0 0 22% 0);opacity:.15}100%{clip-path:inset(0);opacity:1}}
.intro-camera{position:relative;width:240px;height:135px;border:1px solid #9daef0;border-radius:15px;margin:auto;background:linear-gradient(140deg,#344169,#151923);box-shadow:0 0 65px #9ab8ff25}.intro-camera:before{content:"";position:absolute;top:-16px;left:23px;width:65px;height:20px;background:#425378;border-radius:5px}.intro-camera>i{position:absolute;left:90px;top:24px;width:85px;height:85px;border:9px solid #526795;border-radius:50%;background:radial-gradient(circle,#abc4ff 0 9%,#182439 10% 34%,#6a77af 35% 42%,#152034 43%);animation:aperture-reveal .8s both}.intro-camera>b{position:absolute;top:18px;right:16px;width:6px;height:6px;border-radius:50%;background:#ff7187;box-shadow:0 0 14px #ff7187}.intro-camera>span{position:absolute;left:14px;bottom:19px;font-size:8px;color:#b0bfdc}
.has-timeline{padding-bottom:132px}.portfolio-timeline{height:auto;min-height:108px;display:block;width:min(1080px,calc(100% - 30px));padding:9px 14px}.timeline-lanes{display:flex;gap:6px;padding-bottom:7px;border-bottom:1px solid var(--line)}.timeline-lanes button{background:none;border:0;padding:5px 10px;border-radius:5px;font-size:11px;color:var(--muted)}.timeline-lanes button[aria-pressed=true]{background:#a8baff26;color:var(--text)}.timeline-bottom{display:flex;align-items:center;gap:10px;padding-top:6px}.timeline-track{height:48px;min-width:0}.timeline-label{position:static;display:block;font-size:9px}.timeline-frames{position:static;display:flex;height:28px;margin-top:3px;gap:2px;border:0;overflow:hidden}.timeline-frames button{border:0;padding:0;position:relative;flex:1;min-width:0;height:28px;background:#1b2233;overflow:hidden;color:#fff;cursor:pointer}.timeline-frames button[aria-pressed=true]{box-shadow:inset 0 0 0 2px #bda7ff}.timeline-frames img{position:absolute;inset:0;width:100%;height:100%;opacity:.4;object-fit:cover}.timeline-frames span{position:relative;display:block;font-size:8px;padding:7px 2px;white-space:nowrap;text-align:center}.timeline-track input{position:relative;inset:auto;width:100%;height:10px;display:block;z-index:2;margin:0;cursor:ew-resize}.timeline-track input::-webkit-slider-runnable-track{height:2px;background:#a6bafc55}.timeline-track input::-webkit-slider-thumb{height:13px;width:4px;margin-top:-5px}.timeline-track input::-moz-range-track{height:2px;background:#a6bafc55}.timeline-track input::-moz-range-thumb{height:13px;width:4px}.timeline-position{font-family:inherit;font-size:10px;line-height:1.3;width:80px;text-align:right}.work-index{scroll-margin-top:24px}
@media(max-width:700px){.portfolio-timeline{width:calc(100% - 16px);padding:8px}.timeline-lanes{justify-content:space-between;gap:0}.timeline-lanes button{font-size:10px;padding:5px 7px}.timeline-controls button{width:23px;min-height:36px}.timeline-position{display:none}.timeline-frames span{font-size:7px}.timeline-bottom{gap:7px}.has-timeline{padding-bottom:132px}}
@media(prefers-reduced-motion:reduce){.entrance-reveal{animation:none}}

/* Real client marks reveal once as the collaboration strip enters view. */
.client-logo{position:relative;padding:10px;border-radius:14px;text-decoration:none;isolation:isolate;transition-delay:var(--logo-delay,0ms)}.client-logo:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse,#99b8ff1c,#bc9aff0b 50%,transparent 75%);opacity:0;transition:opacity .35s ease}.client-logo img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.logo-link-hint{position:absolute;bottom:-15px;font-size:11px;letter-spacing:.015em;color:var(--muted);opacity:0;transform:translateY(3px);transition:opacity .3s ease,transform .3s ease}.client-logo:hover:before,.client-logo:focus-visible:before{opacity:1}.client-logo:hover img,.client-logo:focus-visible img{transform:scale(1.035)}.client-logo:hover .logo-link-hint,.client-logo:focus-visible .logo-link-hint{opacity:1;transform:none}.client-logo:focus-visible{outline:2px solid var(--accent);outline-offset:5px}@media(prefers-reduced-motion:reduce){.client-logo,.client-logo img,.logo-link-hint,.client-logo:before{transition:none}.client-logo:hover img,.client-logo:focus-visible img{transform:none}}
/* Scroll through real work, then let the selected post open onto the page. */
.intro-social .intro-scene{width:min(400px,85vw);height:390px;overflow:visible;position:relative}.intro-social .intro-scene>p{position:absolute;left:0;right:0;bottom:-38px;font-size:13px;letter-spacing:0}.social-feed-intro{height:390px;width:100%;background:#15151c;border:1px solid #b1b5d740;border-radius:16px;overflow:hidden;box-shadow:0 25px 90px #0005;animation:feed-arrive .3s ease both}.intro-feed-header{height:57px;display:flex;align-items:center;padding:0 18px;gap:10px;color:#f2f1f8}.intro-feed-header b{font-size:12px;font-weight:500}.intro-feed-header>span:last-child{margin-left:auto;font-size:8px;color:#b5b8c9}.intro-feed-avatar{width:23px;height:23px;border-radius:50%;background:linear-gradient(130deg,#9ac7ff,#c3a7ff)}.intro-feed-scroll{animation:feed-scroll-open 1.3s cubic-bezier(.25,.7,.3,1) both}.intro-feed-post{padding:0 18px 12px;position:relative}.intro-feed-post img{width:100%;height:252px;object-fit:cover;border-radius:5px}.intro-feed-post>span{display:block;text-align:left;font-size:9px;color:#d8d9e7;margin-top:8px}.feed-opening-post{transform-origin:center 35%;animation:feed-post-open 1.3s cubic-bezier(.25,.7,.3,1) both}.intro-social{animation:social-intro-dismiss 1.5s ease both}@keyframes feed-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes feed-scroll-open{0%,12%{transform:translateY(0)}58%,100%{transform:translateY(-282px)}}@keyframes feed-post-open{0%,60%{transform:scale(1);opacity:1}88%{transform:scale(1.6);opacity:1}100%{transform:scale(2.4);opacity:0}}@keyframes social-intro-dismiss{0%,72%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.social-feed-intro,.intro-feed-scroll,.feed-opening-post,.intro-social{animation:none!important}}
/* These covers open to the actual page underneath, timed to each creative action. */
.intro-home:before,.intro-home:after,.intro-photo:before,.intro-photo:after,.intro-video:before,.intro-video:after,.intro-social:before,.intro-social:after{display:none}.intro-home,.intro-photo,.intro-video,.intro-social{animation:none!important}.intro-home .intro-scene,.intro-photo .intro-scene,.intro-video .intro-scene,.intro-social .intro-scene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;animation:none!important}
@property --aperture-size{syntax:'<length>';inherits:false;initial-value:0px}.aperture-page-cover{position:absolute;inset:0;background:#090a0f;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--aperture-size),#000 calc(var(--aperture-size) + 2px));mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--aperture-size),#000 calc(var(--aperture-size) + 2px));animation:aperture-page-open 2.1s cubic-bezier(.6,0,.15,1) both}.camera-shell{position:absolute;left:50%;top:50%;width:330px;height:205px;margin-left:-165px;margin-top:-102px;border-radius:24px;background:linear-gradient(130deg,#3a3c49,#101218 68%);border:1px solid #c3cae355;box-shadow:inset 0 1px 0 #fff3,0 30px 80px #0007;transform-origin:50% 50%;animation:camera-push-through 2.1s cubic-bezier(.6,0,.15,1) both}.camera-top{position:absolute;left:34px;top:-18px;width:78px;height:22px;background:#2e3240;border-radius:7px 7px 0 0;border-top:1px solid #9ea7c34d}.camera-wordmark{position:absolute;bottom:25px;left:15px;color:#bdc5dc;font-size:8px;letter-spacing:1.5px}.camera-indicator{position:absolute;top:25px;right:26px;width:5px;height:5px;background:#ea6575;border-radius:50%;box-shadow:0 0 8px #f4557480}.camera-lens{position:absolute;width:145px;height:145px;left:50%;top:50%;margin:-72px 0 0 -72px;border:15px solid #202534;border-radius:50%;box-shadow:0 0 0 1px #99b1f077,0 0 0 6px #07080d,0 0 0 7px #94a1c733,inset 0 0 12px #000;overflow:hidden;background:#060911}.lens-glass{position:absolute;inset:10%;border:1px solid #779bd082;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#9ac7ff33,transparent 50%),radial-gradient(ellipse at 72% 75%,#b4a0ff35,transparent 55%);box-shadow:inset 0 0 20px #151c46}.lens-blades{position:absolute;inset:0;animation:aperture-blades-open 2.1s cubic-bezier(.6,0,.15,1) both}.lens-blades i{position:absolute;inset:-20%;background:linear-gradient(130deg,#505b71,#1c2331 50%);clip-path:polygon(50% 50%,57% 0,100% 0,100% 30%,62% 58%);transform:rotate(calc(var(--blade)*40deg));box-shadow:inset 0 0 1px #adbbd3}.photo-page-cover{position:absolute;inset:0;background:#080a0f;animation:photography-expose-page 1.8s ease both}.photography-rig{position:absolute;width:min(700px,90vw);height:300px;left:50%;top:50%;transform:translate(-50%,-50%);animation:photography-rig-out 1.8s ease both}.softbox{position:absolute;top:0;width:125px;height:165px;background:linear-gradient(135deg,#242a3b,#11151f);border:1px solid #929bbb70;border-radius:14px;box-shadow:0 15px 40px #0007}.softbox-left{left:0;transform:rotate(-16deg)}.softbox-right{right:0;transform:rotate(16deg)}.softbox i{position:absolute;inset:9px;border-radius:8px;background:linear-gradient(140deg,#8c93ac,#cad5ee);animation:softbox-fire 1.8s ease both}.softbox:after{content:'';position:absolute;left:50%;top:100%;height:135px;width:3px;background:#66708b}.photography-rig>span{position:absolute;top:135px;left:25%;right:25%;text-align:center;color:#eeeef6;font-size:22px;font-weight:300;letter-spacing:-.5px}.photo-exposure{position:absolute;inset:0;background:#eef5ff;animation:photographic-flash 1.8s ease both}.intro-active-photo.intro-content-live main{animation:develop-photography .7s ease both}
.slate-reveal-panel{position:absolute;left:0;width:100%;height:50.1%;background:#080a0f;box-shadow:0 0 35px #0005}.slate-reveal-top{top:0;animation:slate-upper-reveal 1.95s cubic-bezier(.65,0,.15,1) both}.slate-reveal-bottom{bottom:0;animation:slate-lower-reveal 1.95s cubic-bezier(.65,0,.15,1) both}.production-slate{position:absolute;width:360px;height:233px;left:50%;top:50%;margin:-116px 0 0 -180px;filter:drop-shadow(0 20px 50px #0007);animation:slate-to-page 1.95s cubic-bezier(.65,0,.15,1) both}.production-clapper{height:45px;border-radius:7px 7px 0 0;border:1px solid #eee8;background:repeating-linear-gradient(125deg,#edf1f8 0 36px,#1a1e28 37px 72px);transform-origin:6px 42px;animation:production-clap 1.95s ease both;position:relative;z-index:2}.production-board{background:linear-gradient(145deg,#303642,#0e1119);height:188px;padding:25px 32px;color:#eceff8;box-sizing:border-box;border:1px solid #eee6;border-radius:0 0 10px 10px}.production-board>span{font-size:17px;letter-spacing:4px}.production-board>div{display:grid;grid-template-columns:90px 1fr;gap:15px;border-top:1px solid #fff3;padding-top:20px;margin-top:20px}.production-board small{font-size:8px;color:#a8b3ce}.production-board b{font-weight:400;font-size:14px}
.feed-page-cover{position:absolute;inset:0;background:var(--bg);animation:feed-page-reveal 2.5s ease both}.social-app-intro{position:absolute;left:50%;top:50%;width:360px;height:500px;margin:-250px 0 0 -180px;border-radius:15px;background:#fff;color:#101017;border:1px solid #d8dce6;overflow:hidden;box-shadow:0 35px 100px #0003;animation:feed-app-expand 2.5s cubic-bezier(.65,0,.15,1) both}.social-app-header{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;position:relative;z-index:2}.social-app-header>span{font-size:19px;font-weight:600;letter-spacing:-.8px}.social-app-intro svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;fill:none}.social-app-viewport{height:407px;overflow:hidden}.social-app-scroll{animation:actual-feed-scroll 2.5s cubic-bezier(.25,.65,.25,1) both}.feed-post{width:100%;margin:0;background:#fff}.feed-post>header{height:45px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:11px}.feed-post>header>span:last-child{margin-left:auto;font-size:12px}.feed-client-avatar{height:22px;width:22px;border-radius:50%;border:1px solid #8064c2;background:radial-gradient(circle,#dce6ff,#b6a2dd)}.feed-post>img{width:100%;height:255px;object-fit:cover;display:block}.feed-post-actions{display:flex;align-items:center;gap:12px;padding:11px 14px 3px}.feed-post-actions .feed-bookmark{margin-left:auto}.feed-post>p{font-size:10px;line-height:1.4;text-align:left;margin:7px 14px 14px}.social-app-tabbar{height:42px;border-top:1px solid #ddd;display:flex;align-items:center;justify-content:space-around;background:#fff;position:relative;z-index:2}.feed-nav-reel{border:1px solid #111;border-radius:4px;height:20px;width:20px;font-size:16px;line-height:18px}.feed-nav-avatar{width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,#9ac7ff,#c3a7ff)}.social-post-fullscreen{position:absolute;left:50%;top:50%;width:360px;height:255px;transform:translate(-50%,-50%);overflow:hidden;opacity:0;animation:post-becomes-page 2.5s cubic-bezier(.65,0,.15,1) both}.social-post-fullscreen>img{width:100%;height:100%;object-fit:cover}.intro-active-social.intro-content-live main{animation:feed-content-resolve .75s cubic-bezier(.2,.7,.2,1) both}
@keyframes aperture-page-open{0%,38%{--aperture-size:0px}54%{--aperture-size:14vmin}100%{--aperture-size:145vmax}}@keyframes camera-push-through{0%{opacity:0;transform:scale(.9)}12%,32%{opacity:1;transform:scale(1)}65%{opacity:1;transform:scale(7)}88%,100%{opacity:0;transform:scale(17)}}@keyframes aperture-blades-open{0%,35%{transform:rotate(0) scale(1)}70%,100%{transform:rotate(55deg) scale(2.5);opacity:0}}@keyframes photography-expose-page{0%,47%{opacity:1}66%,100%{opacity:0}}@keyframes softbox-fire{0%,35%{filter:brightness(.4);box-shadow:none}46%,54%{filter:brightness(2.5);box-shadow:0 0 90px 50px #edf4ff88}70%,100%{filter:brightness(1);box-shadow:none}}@keyframes photographic-flash{0%,41%{opacity:0}49%{opacity:.9}65%,100%{opacity:0}}@keyframes photography-rig-out{0%{opacity:0}15%,48%{opacity:1}65%,100%{opacity:0}}@keyframes develop-photography{from{filter:brightness(1.5);opacity:.4}to{filter:brightness(1);opacity:1}}@keyframes production-clap{0%,12%{transform:rotate(-26deg)}28%,38%{transform:rotate(0)}65%,100%{transform:translateY(-35vh) rotate(-7deg);opacity:0}}@keyframes slate-upper-reveal{0%,37%{transform:translateY(0)}100%{transform:translateY(-101%)}}@keyframes slate-lower-reveal{0%,37%{transform:translateY(0)}100%{transform:translateY(101%)}}@keyframes slate-to-page{0%{opacity:0;transform:scale(.94)}13%,38%{opacity:1;transform:scale(1)}78%,100%{opacity:0;transform:translateY(38vh) scale(1.15)}}@keyframes actual-feed-scroll{0%,12%{transform:translateY(0)}48%,100%{transform:translateY(-370px)}}@keyframes feed-app-expand{0%{opacity:0;transform:translateY(18px)}10%,55%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:0;transform:scale(1.2)}100%{opacity:0}}@keyframes post-becomes-page{0%,51%{opacity:0;width:360px;height:255px;border-radius:0}56%{opacity:1;width:360px;height:255px}75%{opacity:1;width:100vw;height:100vh}98%,100%{opacity:0;width:100vw;height:100vh}}@keyframes feed-page-reveal{0%,72%{opacity:1}96%,100%{opacity:0}}@keyframes feed-content-resolve{from{opacity:.2;filter:blur(5px);transform:scale(.99)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@media(max-width:500px){.social-app-intro{width:320px;margin-left:-160px}.production-slate{width:310px;margin-left:-155px}.production-board{padding:25px}.softbox{width:80px;height:110px}.photography-rig{height:230px}.photography-rig>span{top:140px;font-size:20px}}
@media(prefers-reduced-motion:reduce){.intro-active main{animation:none!important}}

/* The camera approaches while six blades open in one continuous reveal. */
@property --lens-gap{syntax:'<length>';inherits:false;initial-value:0px}
.aperture-page-cover{animation:aperture-page-open 1.85s linear both}
.camera-shell{animation:camera-push-through 1.85s linear both;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--lens-gap),#000 calc(var(--lens-gap) + 1px));mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--lens-gap),#000 calc(var(--lens-gap) + 1px))}
.lens-blades{animation:none;transform:none;overflow:visible}
.lens-blades i{inset:-12%;clip-path:polygon(50% 50%,35% 0,100% 0,100% 47%,67% 64%);background:linear-gradient(135deg,#c0c8d8 0%,#727d95 4%,#343e54 24%,#151c2c 80%);transform-origin:50% 50%;animation:individual-lens-blade 1.85s cubic-bezier(.3,.1,.35,1) both;opacity:1}
@keyframes individual-lens-blade{0%{transform:rotate(calc(var(--blade)*40deg)) translateY(0) rotate(0)}35%{transform:rotate(calc(var(--blade)*40deg)) translateY(-8px) rotate(5deg)}64%{transform:rotate(calc(var(--blade)*40deg)) translateY(-51px) rotate(24deg)}100%{transform:rotate(calc(var(--blade)*40deg)) translateY(-105px) rotate(34deg)}}
@keyframes camera-push-through{0%{opacity:0;transform:scale(.9);--lens-gap:0px}10%{opacity:1;transform:scale(1.06);--lens-gap:0px}30%{opacity:1;transform:scale(1.75);--lens-gap:1px}50%{opacity:1;transform:scale(3.4);--lens-gap:10px}70%{opacity:1;transform:scale(6.8);--lens-gap:40px}88%{opacity:1;transform:scale(12);--lens-gap:180px}100%{opacity:0;transform:scale(20);--lens-gap:500px}}
@keyframes aperture-page-open{0%{--aperture-size:0px}28%{--aperture-size:0px}46%{--aperture-size:3vmin}62%{--aperture-size:24vmin}78%{--aperture-size:65vmax}100%{--aperture-size:145vmax}}
.scroll-reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:0ms}
.scroll-reveal.is-revealed{opacity:1;transform:none;transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal[data-reveal-exit=above]:not(.is-revealed){transform:translate3d(0,-10px,0)}
.scroll-reveal:focus-within{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.creative-intro{display:none}.camera-shell,.lens-blades i,.aperture-page-cover{animation:none}.scroll-reveal{opacity:1;transform:none;transition:none}}

/* Clear glass with edge reflections; the work underneath supplies the colour. */
.portfolio-timeline{isolation:isolate;background:linear-gradient(135deg,#ffffff16,#ffffff06 48%,#ffffff12);border:1px solid #ffffff45;border-top-color:#ffffff86;border-bottom-color:#ffffff1f;border-radius:23px;backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);box-shadow:inset 0 1px 1px #ffffff70,inset 1px 0 1px #ffffff25,inset 0 -1px 1px #ffffff20,0 12px 36px #0003}
.portfolio-timeline:before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(110deg,#ffffff18,transparent 25%,transparent 65%,#ffffff0a);box-shadow:inset 0 0 18px #ffffff0a}
.timeline-lanes{border-color:#ffffff24}.timeline-lanes button{border:1px solid transparent;border-radius:999px}.timeline-lanes button[aria-pressed=true]{background:linear-gradient(135deg,#ffffff22,#a8bbff15);border-color:#ffffff48;box-shadow:inset 0 1px 0 #ffffff4d;color:var(--text)}
.timeline-controls button{border-radius:9px;transition:background .25s,box-shadow .25s;color:var(--text)}.timeline-controls button:hover{background:#ffffff18;box-shadow:inset 0 1px 0 #ffffff40}
.timeline-track input::-webkit-slider-thumb{width:8px;border-radius:8px;background:#e9edff;border:1px solid #ffffff;box-shadow:0 0 0 2px #ffffff18,0 1px 5px #0003}.timeline-track input::-moz-range-thumb{width:8px;border-radius:8px;background:#e9edff;border:1px solid #ffffff;box-shadow:0 0 0 2px #ffffff18,0 1px 5px #0003}
:root[data-theme=light] .portfolio-timeline{background:linear-gradient(135deg,#ffffff9c,#ffffff55 48%,#ffffff77);border-color:#ffffffad;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #ffffffb0,0 12px 36px #20273f17}
:root[data-theme=light] .timeline-lanes{border-color:#18214418}:root[data-theme=light] .timeline-lanes button[aria-pressed=true]{background:linear-gradient(135deg,#ffffffbf,#afc6ff55);border-color:#ffffffdb;box-shadow:inset 0 1px 0 white}
:root[data-theme=light] .timeline-track input::-webkit-slider-thumb{background:#6678bd;border-color:#fff}
@supports not(backdrop-filter:blur(1px)){.portfolio-timeline{background:var(--bg)}}

/* Selected client images scroll into a preview of this actual page, which expands. */
.social-app-intro,.feed-page-cover,.social-app-scroll,.social-post-fullscreen{animation-duration:3.4s}
.feed-post{height:370px;overflow:hidden}.feed-post>header{height:40px}.feed-post .feed-work-image{width:100%;height:250px;object-fit:contain;background:#11151d}
.feed-client-avatar{display:flex!important;align-items:center;justify-content:center;background:#eef0f4!important;overflow:hidden}.feed-client-avatar img{width:90%!important;height:75%!important;object-fit:contain!important;filter:brightness(0)!important}
.feed-site-preview{height:250px;overflow:hidden;background:var(--bg)}.feed-site-preview iframe{width:100%;height:100%;border:0;pointer-events:none}
.social-post-fullscreen iframe{display:block;width:100%;height:100%;border:0;pointer-events:none;background:var(--bg)}
@keyframes actual-feed-scroll{0%,10%{transform:translateY(0)}27%,35%{transform:translateY(-370px)}58%,100%{transform:translateY(-740px)}}
@keyframes feed-app-expand{0%{opacity:0;transform:translateY(18px)}10%,66%{opacity:1;transform:translateY(0) scale(1)}76%{opacity:0;transform:scale(1.1)}100%{opacity:0}}
@keyframes post-becomes-page{0%,63%{opacity:0;width:360px;height:250px;border-radius:0}68%{opacity:1;width:360px;height:250px}90%,100%{opacity:1;width:100vw;height:100vh}}
@keyframes feed-page-reveal{0%,88%{opacity:1}100%{opacity:0}}
@media(max-width:500px){.social-post-fullscreen{width:320px}@keyframes post-becomes-page{0%,63%{opacity:0;width:320px;height:250px}68%{opacity:1;width:320px;height:250px}90%,100%{opacity:1;width:100vw;height:100vh}}}

/* The growing post starts at the same rectangle as the preview in the feed. */
@keyframes post-becomes-page{0%,63%{opacity:0;top:calc(50% - 35px);width:360px;height:250px;border-radius:0}68%{opacity:1;top:calc(50% - 35px);width:360px;height:250px}90%,100%{opacity:1;top:50%;width:100vw;height:100vh}}
@media(max-width:500px){@keyframes post-becomes-page{0%,63%{opacity:0;top:calc(50% - 35px);width:320px;height:250px}68%{opacity:1;top:calc(50% - 35px);width:320px;height:250px}90%,100%{opacity:1;top:50%;width:100vw;height:100vh}}}

/* The sculpted full-frame body and layered RF zoom lens stay aligned to the reveal. */
.camera-shell{width:380px;height:250px;margin-left:-190px;margin-top:-125px;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 28px 35px #0007)}
.r6-body{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.camera-lens{width:176px;height:176px;margin:-88px 0 0 -88px;border:15px solid #17191d;box-shadow:0 0 0 1px #585b60,0 0 0 4px #141518,0 0 0 5px #be2932,0 0 0 9px #090a0c,0 0 0 10px #63666b,inset 0 0 0 1px #a9afb65c,inset 0 0 12px #000;background:radial-gradient(ellipse at 38% 30%,#183134,#060911 70%)}
.camera-lens:before{content:'';position:absolute;inset:0;border:3px solid #6d757d55;border-radius:50%;z-index:3;pointer-events:none}
.lens-barrel-mark{position:absolute;left:0;right:0;top:2px;font:5px Arial,sans-serif;letter-spacing:.8px;color:#afb5bc;text-align:center;z-index:4}
.lens-glass{inset:8%;border-color:#72939180;background:radial-gradient(ellipse at 28% 25%,#c6ffed27,transparent 43%),radial-gradient(ellipse at 75% 78%,#8c7ade3b,transparent 48%);box-shadow:inset 0 0 12px #a9c6d126,inset 0 0 30px #0009}
.lens-blades i{clip-path:polygon(50% 50%,43% 0,100% 0,100% 30%,66% 59%)}

/* A continuous thumbnail rail settles into each selected industry. */
.timeline-track{height:auto}.timeline-frames{height:58px;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:5px calc(50% - 46px);scroll-snap-type:x proximity;border-radius:10px}.timeline-frames::-webkit-scrollbar{display:none}.timeline-frames button{flex:0 0 92px;min-width:92px;height:46px;border-radius:8px;scroll-snap-align:center;transition:transform .36s cubic-bezier(.2,.8,.2,1),box-shadow .36s,filter .36s;transform:scale(.91);filter:brightness(.75)}.timeline-frames button[aria-pressed=true]{transform:scale(1);filter:brightness(1);box-shadow:inset 0 0 0 1px #e6e0ff,0 2px 9px #0004}.timeline-frames img{opacity:.6}.timeline-frames span{font-size:9px;padding:16px 3px;text-shadow:0 1px 5px #000}.timeline-track input{margin-top:3px}.has-timeline{padding-bottom:166px}.timeline-label{margin-bottom:2px}.timeline-bottom{align-items:center}.timeline-controls{flex-shrink:0}@media(max-width:700px){.timeline-frames{height:54px;gap:8px;padding-inline:calc(50% - 42px)}.timeline-frames button{flex-basis:84px;min-width:84px;height:42px}.timeline-frames span{font-size:8px;padding-top:14px}.has-timeline{padding-bottom:166px}}

/* Lightly tinted glass keeps controls readable over both bright and dark work. */
.portfolio-timeline{background:linear-gradient(135deg,#18202ee6,#131a27db 55%,#20263ae3);backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);color:#f8faff}
.timeline-lanes{border-color:#ffffff30;gap:7px}.timeline-lanes button{color:#edf1fa;font-size:13px;font-weight:500;padding:8px 13px;min-height:40px}.timeline-lanes button[aria-pressed=true]{color:#fff;background:#afc0fa30;border-color:#c7d5ff85}.timeline-label,.timeline-position{color:#e2e8f5;font-size:11px}.timeline-controls button{color:#f8faff;min-width:44px;min-height:44px}.timeline-controls svg{width:18px;height:18px}.timeline-frames{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain}.timeline-frames.is-dragging,.timeline-frames.is-dragging button{cursor:grabbing}.timeline-frames img{pointer-events:none;-webkit-user-drag:none;opacity:.8}.timeline-frames span{color:#fff;font-size:10px;font-weight:600;background:linear-gradient(transparent,#000b);text-shadow:0 1px 3px #000}.timeline-frames button{filter:none}.timeline-track input{height:24px;touch-action:none}.timeline-track input::-webkit-slider-runnable-track{height:3px;background:#d5dffa60}.timeline-track input::-webkit-slider-thumb{height:20px;width:10px;margin-top:-8px}.timeline-track input::-moz-range-track{height:3px;background:#d5dffa60}.timeline-track input::-moz-range-thumb{height:20px;width:10px}.has-timeline{padding-bottom:196px}.has-timeline .chat-launch{bottom:195px}
:root[data-theme=light] .portfolio-timeline{background:linear-gradient(135deg,#f4f7ffef,#e9eff9e3 55%,#f6f3ffeb);color:#172035;border-color:#ffffffd9}
:root[data-theme=light] .timeline-lanes{border-color:#26395530}:root[data-theme=light] .timeline-lanes button{color:#25334b}:root[data-theme=light] .timeline-lanes button[aria-pressed=true]{color:#101e36;background:#a7b7ec42;border-color:#879bd58c}:root[data-theme=light] .timeline-label,:root[data-theme=light] .timeline-position{color:#33445c}:root[data-theme=light] .timeline-controls button{color:#1a2b45}:root[data-theme=light] .timeline-track input::-webkit-slider-runnable-track{background:#4b63934d}:root[data-theme=light] .timeline-track input::-moz-range-track{background:#4b63934d}
@media(max-width:700px){.timeline-lanes{gap:1px}.timeline-lanes button{font-size:11px;padding:8px 5px;min-height:40px}.timeline-controls{gap:0;flex-wrap:wrap;width:88px}.timeline-controls button{min-width:44px;width:44px;min-height:44px}.timeline-frames span{font-size:9px}.timeline-label{font-size:10px}.portfolio-timeline{padding:8px 9px}.has-timeline .chat-launch{bottom:190px}}

/* Editing ruler and centered playhead preserve the spaced, rounded clip cards. */
.timeline-edit-lane{position:relative;overflow:hidden;border-radius:8px;background:#00000012}.timeline-ruler{height:22px;overflow:hidden;border-bottom:1px solid #ffffff24;position:relative;background:repeating-linear-gradient(90deg,transparent 0 9px,#b6c4df40 9px 10px) left bottom/100% 5px no-repeat}.timeline-ruler-marks{position:relative;height:100%;will-change:transform}.timeline-ruler-marks span{position:absolute;top:2px;transform:translateX(-50%);font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#d9e2f4;padding:0 4px;background:#263043}.timeline-playhead{position:absolute;top:17px;bottom:0;left:50%;width:1px;background:#c3a7ff;pointer-events:none;z-index:5;box-shadow:0 0 3px #0005}.timeline-playhead:before{content:'';position:absolute;left:-4px;top:-3px;width:9px;height:8px;background:#c3a7ff;clip-path:polygon(0 0,100% 0,100% 45%,50% 100%,0 45%)}.timeline-frames button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #c3a7ff,0 2px 9px #0004;outline:1px solid #c3a7ff;outline-offset:-1px}.timeline-frames button:after{content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;background:#5f91d9;z-index:3;pointer-events:none}.timeline-track input::-webkit-slider-thumb{border-radius:2px;background:#c3a7ff;width:4px;box-shadow:none}.timeline-track input::-moz-range-thumb{border-radius:2px;background:#c3a7ff;width:4px;box-shadow:none}.has-timeline{padding-bottom:218px}.has-timeline .chat-launch{bottom:217px}:root[data-theme=light] .timeline-ruler{border-color:#24395130}:root[data-theme=light] .timeline-ruler-marks span{color:#43536b;background:#eef2fa}:root[data-theme=light] .timeline-playhead{background:#8064b1}:root[data-theme=light] .timeline-playhead:before{background:#8064b1}@media(max-width:700px){.has-timeline .chat-launch{bottom:212px}}

.timeline-edit-lane>.timeline-playhead{height:auto;clip-path:none;top:17px;bottom:0;left:50%;width:1px;border-radius:0}

/* One more post, with a complete portrait composition in the Reels frame. */
.social-app-intro,.feed-page-cover,.social-app-scroll,.social-post-fullscreen{animation-duration:5.2s}
.feed-reel-post{background:#090a0d;padding:0;position:relative}.feed-reel-media{position:relative;width:100%;height:370px;overflow:hidden;background:#090a0d}
.feed-reel-media>img{width:100%;height:100%;display:block;object-fit:contain}.feed-reel-media:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}
.feed-reel-label{position:absolute;left:16px;top:14px;color:#fff;font-size:16px;font-weight:600;text-shadow:0 1px 6px #0009}.feed-reel-play{position:absolute;right:17px;top:14px;color:white;font-size:20px}
.feed-reel-actions{position:absolute;right:5px;bottom:46px;z-index:2;color:#fff}.feed-reel-actions .feed-post-actions{flex-direction:column;gap:18px;padding:10px}.feed-reel-actions svg{filter:drop-shadow(0 1px 3px #0009)}.feed-reel-actions .feed-bookmark{display:none}
.feed-reel-credit{position:absolute;left:14px;right:45px;bottom:18px;z-index:2;color:#fff;font-size:11px;line-height:1.4;text-shadow:0 1px 4px #0008}.feed-reel-credit .feed-client-avatar{display:inline-flex!important;vertical-align:middle;margin-right:7px}.feed-reel-credit p{font-size:10px;margin:7px 0 0}
@keyframes actual-feed-scroll{0%,8%{transform:translateY(0)}24%,32%{transform:translateY(-370px)}49%,57%{transform:translateY(-740px)}74%,100%{transform:translateY(-1110px)}}
@keyframes feed-app-expand{0%{opacity:0;transform:translateY(18px)}8%,78%{opacity:1;transform:translateY(0) scale(1)}86%,100%{opacity:0;transform:scale(1.1)}}
@keyframes post-becomes-page{0%,76%{opacity:0;top:calc(50% - 35px);width:360px;height:250px;border-radius:0}80%{opacity:1;top:calc(50% - 35px);width:360px;height:250px}96%,100%{opacity:1;top:50%;width:100vw;height:100vh}}
@keyframes feed-page-reveal{0%,92%{opacity:1}100%{opacity:0}}
@media(max-width:500px){@keyframes post-becomes-page{0%,76%{opacity:0;top:calc(50% - 35px);width:320px;height:250px}80%{opacity:1;top:calc(50% - 35px);width:320px;height:250px}96%,100%{opacity:1;top:50%;width:100vw;height:100vh}}}

/* A shared clip lane and playhead, with a compact transport bar on every screen. */
.timeline-bottom{display:grid;grid-template-columns:auto minmax(0,1fr) 80px;gap:12px}
.timeline-controls{display:flex;flex-wrap:nowrap;gap:2px;width:auto;align-items:center}
.timeline-controls button{width:36px;min-width:36px;height:40px;min-height:40px;flex:none}
.timeline-controls [data-timeline=back]{margin-left:6px;border-left:1px solid var(--line);border-top-left-radius:0;border-bottom-left-radius:0}
.timeline-track{min-width:0}.timeline-scrub-area{position:relative;min-width:0}
.timeline-scrub-area>.timeline-playhead{height:auto;clip-path:none;top:17px;bottom:0;left:50%;width:1.5px;border-radius:0;background:#c3a7ff;box-shadow:0 0 3px #0005;pointer-events:none;z-index:5}
.timeline-scrub-area>.timeline-playhead:before{left:-4px;top:-5px;width:9px;height:10px;background:#c3a7ff;clip-path:polygon(0 0,100% 0,100% 45%,50% 100%,0 45%)}
.portfolio-timeline .timeline-track .timeline-scrub-area input[type=range]::-webkit-slider-thumb{width:16px;height:24px;margin-top:-10px;background:transparent;border:0;box-shadow:none}
.portfolio-timeline .timeline-track .timeline-scrub-area input[type=range]::-moz-range-thumb{width:16px;height:24px;background:transparent;border:0;box-shadow:none}
.timeline-scrub-area:has(input:focus-visible)>.timeline-playhead{box-shadow:0 0 0 3px #c3a7ff33}
:root[data-theme=light] .timeline-scrub-area>.timeline-playhead,:root[data-theme=light] .timeline-scrub-area>.timeline-playhead:before{background:#8064b1}
@media(max-width:700px){
 .timeline-bottom{grid-template-columns:minmax(0,1fr) 176px;gap:2px 6px;align-items:center}
 .timeline-controls{grid-column:2;grid-row:1;justify-content:flex-end;gap:2px}
 .timeline-controls button{width:40px;min-width:40px;height:44px;min-height:44px}
 .timeline-track{display:contents}
 .timeline-label{grid-column:1;grid-row:1;display:flex;align-items:center;min-height:44px;margin:0;font-size:10px}
 .timeline-scrub-area{grid-column:1/-1;grid-row:2;width:100%}
 .timeline-position{display:none}
}

.has-timeline .chat-launch{bottom:244px}.has-timeline .chat-panel{bottom:300px;max-height:calc(100dvh - 316px)}

/* Native finger scrolling, including when the gesture begins on a thumbnail. */
.timeline-frames,.timeline-frames button,.timeline-frames span{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}.timeline-frames button{user-select:none;-webkit-user-select:none}

/* The editing timeline is an in-page browser beneath the work. */
.portfolio-timeline-inline{position:relative;inset:auto;left:auto;bottom:auto;transform:none;z-index:1;margin:32px auto 72px;width:min(1080px,calc(100% - 48px));}
.has-timeline{padding-bottom:0}
.has-timeline .chat-launch{bottom:24px}
.has-timeline .chat-panel{bottom:84px;max-height:calc(100dvh - 108px)}
@media(max-width:700px){.portfolio-timeline-inline{width:calc(100% - 32px);margin:24px auto 48px}.has-timeline .chat-launch{bottom:16px}.has-timeline .chat-panel{bottom:76px;max-height:calc(100dvh - 92px)}}

/* One continuous feed scroll, followed by a single expansion of the loaded page. */
.intro-social-continuous,.intro-social-continuous .feed-page-cover,.intro-social-continuous .social-app-intro,.intro-social-continuous .social-app-scroll,.intro-social-continuous .social-post-fullscreen{animation:none!important}
.intro-social-continuous{background:transparent!important;backdrop-filter:none!important;opacity:1!important;visibility:visible!important}
.intro-social-continuous .feed-page-cover{opacity:1}.intro-social-continuous .social-app-intro{opacity:1;transform:none}
.intro-social-continuous .social-post-fullscreen{opacity:0;position:absolute;transform:none;pointer-events:none}
.intro-social-continuous [data-intro-expanding=true],.intro-social-continuous [data-intro-expanding=true] .live-feed-site-post,.intro-social-continuous [data-intro-expanding=true] .live-feed-website{background:transparent!important}
.intro-social-continuous [data-intro-expanding=true] .live-feed-website iframe{opacity:0}
.intro-social-continuous [data-intro-expanding=true] .live-feed-site-post>header,.intro-social-continuous [data-intro-expanding=true] .live-feed-site-post>.live-feed-actions,.intro-social-continuous [data-intro-expanding=true] .live-feed-site-post>p{background:#fff}
.feed-page-preview{display:block;width:100%;height:100%;border:0;background:var(--bg);pointer-events:none}
.intro-active-social.intro-content-live main{animation:none!important;filter:none!important;transform:none!important;opacity:1!important}
.intro-social-continuous .feed-site-preview{position:relative}
/* The app chrome has its own rows; site-footer spacing never enters the frame. */
.intro-social-continuous .intro-scene{display:grid;place-items:center;z-index:1}
.intro-social-continuous .social-app-intro{position:relative;left:auto;top:auto;margin:0;width:min(360px,calc(100vw - 36px));height:min(548px,calc(100dvh - 56px));display:grid;grid-template-rows:50px minmax(0,1fr) 52px;border-radius:24px;border-color:#d5d7e080;box-shadow:0 24px 70px #18203926,inset 0 1px 0 #fff}
.intro-social-continuous .social-app-header{height:auto;border-bottom:1px solid #ececf0;padding:0 18px}
.intro-social-continuous .social-app-viewport{height:auto;min-height:0;overflow:hidden}
.intro-social-continuous .social-app-scroll{will-change:transform}
.social-app-tabbar{height:auto;min-height:0;margin:0;padding:0;display:flex;align-items:center;justify-content:space-around;gap:0;flex-wrap:nowrap;color:#101017;background:#fff;border-top:1px solid #ececf0}
.social-app-tabbar>svg:first-child{color:#8064b1}



/* Mouse editing keeps a movable playhead; native touch keeps the centered rail. */
.portfolio-timeline[data-timeline-input=desktop] .timeline-frames{padding:5px 8px;scroll-snap-type:none;cursor:default}
.portfolio-timeline[data-timeline-input=desktop] .timeline-frames button{cursor:default}
.portfolio-timeline[data-timeline-input=desktop] .timeline-ruler{cursor:ew-resize}
.portfolio-timeline[data-timeline-input=desktop] .timeline-scrub-area{padding-bottom:12px}
.portfolio-timeline[data-timeline-input=desktop] .timeline-scrub-area>.timeline-playhead{left:0;pointer-events:auto;cursor:ew-resize;touch-action:none}
.portfolio-timeline[data-timeline-input=desktop] .timeline-playhead:after{content:'';position:absolute;top:-12px;bottom:0;left:-10px;width:22px;background:transparent}
.portfolio-timeline[data-timeline-input=desktop] .timeline-playhead.is-offscreen{visibility:hidden}
.portfolio-timeline[data-timeline-input=desktop] .timeline-scrub-area input[type=range]{position:absolute;left:0;bottom:0;width:1px;height:1px;margin:0;clip-path:inset(50%);overflow:hidden}
.portfolio-timeline[data-timeline-input=desktop] .timeline-scrub-area.is-scrubbing,.portfolio-timeline[data-timeline-input=desktop] .timeline-scrub-area.is-scrubbing *{cursor:ew-resize!important;user-select:none}


/* A short touch handoff keeps the same rail available after the results jump. */
.portfolio-timeline-inline.touch-timeline-docked{position:fixed;top:var(--touch-timeline-top);left:var(--touch-timeline-left);bottom:auto;width:var(--touch-timeline-width);margin:0;transform:none;z-index:40;opacity:1;transition:opacity .15s ease}
.portfolio-timeline-inline.touch-timeline-docked.touch-timeline-returning{opacity:0}
.timeline-touch-placeholder{pointer-events:none;visibility:hidden;flex:none}
@media(prefers-reduced-motion:reduce){.portfolio-timeline-inline.touch-timeline-docked{transition:none}}

/* The running industry tour uses a small, deliberately expandable control. */
.timeline-mini-controls{display:none}
.portfolio-timeline-inline.timeline-tour-mini{min-height:0;height:auto;position:fixed;top:auto;bottom:20px;left:50%;width:min(288px,calc(100% - 32px));margin:0;padding:4px 6px 4px 12px;transform:translateX(-50%);border-radius:999px;z-index:40;box-shadow:0 8px 28px #0002}
.timeline-tour-mini>.timeline-lanes,.timeline-tour-mini>.timeline-bottom{display:none}
.timeline-tour-mini>.timeline-mini-controls{display:flex;align-items:center;gap:4px;min-height:44px}
.timeline-mini-controls button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer;min-height:44px;padding:0 8px;border-radius:999px}
.timeline-mini-controls [data-tour-expand]{flex:1;min-width:0;justify-content:flex-start}
.timeline-mini-controls [data-tour-stop]{flex:none;width:44px;background:var(--surface);border:1px solid var(--line)}
.timeline-mini-controls svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.timeline-mini-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.timeline-mini-controls .timeline-mini-chevron{width:14px;margin-left:auto}
.timeline-mini-controls button:hover{background:var(--surface)}
.timeline-mini-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:700px){.portfolio-timeline-inline.timeline-tour-mini{bottom:calc(84px + env(safe-area-inset-bottom,0px));width:min(264px,calc(100% - 32px))}}

.production-slate{animation:slate-to-page 1.65s cubic-bezier(.22,.7,.2,1) both}
.production-clapper{animation:production-clap 1.65s cubic-bezier(.35,0,.75,1) both;transform-origin:8px 43px}
.production-clapper::after{content:"";position:absolute;left:3px;bottom:-5px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#8a94a2 65%,#313943);box-shadow:0 1px 3px #0008}
.production-board{position:relative;padding-top:38px;background:linear-gradient(135deg,#2c3038,#11141a)}
.production-board::before{content:"";position:absolute;top:0;left:0;right:0;height:16px;background:repeating-linear-gradient(125deg,#edf1f8 0 36px,#1a1e28 37px 72px);border-top:1px solid #fff4}
.production-board>div{padding-top:14px;margin-top:14px;gap:12px}
.slate-reveal-top,.slate-reveal-bottom{animation-duration:1.65s}
@keyframes production-clap{0%,20%{transform:rotate(-24deg)}34%,100%{transform:rotate(0)}}
@keyframes slate-to-page{0%{opacity:0;transform:translateY(12px) scale(.98)}14%,47%{opacity:1;transform:translateY(0) scale(1)}78%,100%{opacity:0;transform:translateY(28px) scale(.98)}}
@keyframes slate-upper-reveal{0%,46%{transform:translateY(0)}100%{transform:translateY(-101%)}}
@keyframes slate-lower-reveal{0%,46%{transform:translateY(0)}100%{transform:translateY(101%)}}

/* The nine blades themselves uncover the page. No separately animated circular hole. */
.intro-home .aperture-page-cover{inset:auto;left:50%;top:50%;width:220vmax;height:220vmax;transform:translate(-50%,-50%);background:none;mask:none;-webkit-mask:none;animation:none;overflow:visible}
.aperture-page-cover polygon{fill:url(#page-blade-metal);stroke:#5c6470;stroke-width:.12;transform-box:view-box;transform-origin:50% 50%;animation:page-aperture-blade 1850ms cubic-bezier(.32,0,.25,1) both}
.intro-home .camera-shell{--lens-gap:73px;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 73px,#000 74px);mask-image:radial-gradient(circle at 50% 50%,transparent 0 73px,#000 74px)}
.intro-home .lens-blades{display:none}
@keyframes page-aperture-blade{0%,34%{transform:rotate(calc(var(--blade)*40deg)) translateX(0) rotate(0deg)}60%{transform:rotate(calc(var(--blade)*40deg)) translateX(10px) rotate(4deg)}80%{transform:rotate(calc(var(--blade)*40deg)) translateX(40px) rotate(14deg)}100%{transform:rotate(calc(var(--blade)*40deg)) translateX(85px) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.aperture-page-cover polygon{animation:none}}

@property --camera-window{syntax:'<length>';inherits:false;initial-value:0px}
.intro-home .camera-surround{position:absolute;inset:0;background:#090a0f;mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--camera-window),#000 calc(var(--camera-window) + 1px));-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--camera-window),#000 calc(var(--camera-window) + 1px));animation:camera-surround-zoom 1850ms linear both}
/* This boundary follows the physical lens exactly. The polygon blades control the reveal inside it. */
@keyframes camera-surround-zoom{0%{--camera-window:65.7px}10%{--camera-window:77.38px}30%{--camera-window:127.75px}50%{--camera-window:248.2px}70%{--camera-window:496.4px}88%{--camera-window:876px}100%{--camera-window:1460px}}
@media(prefers-reduced-motion:reduce){.camera-surround{animation:none}}

html:has(>body.intro-active-social){overflow-anchor:none}