/* Motion restored from K3's sequence, with LC-selected studies and no simulated generation. */
.cv{will-change:transform,opacity}
.scene{transition:opacity .9s ease,visibility 0s linear .9s}
.scene:not(.on){visibility:hidden}
.scene.on{visibility:visible;transition-delay:0s}
.scene .part{opacity:0;transform:translateY(18px) scale(.975);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.scene.on .part{opacity:1;transform:translateY(0) scale(1)}
.scene.on .p1{transition-delay:.1s}.scene.on .p2{transition-delay:.25s}.scene.on .p3{transition-delay:.4s}.scene.on .p4{transition-delay:.7s}.scene.on .p5{transition-delay:.95s}
.scene.on .col.r .p4{transition-delay:3s}.scene.on .col.r .p5{transition-delay:3.4s}
.hero-step{padding:10px 12px;font-size:13px}
.col.l .prompt{flex:0 0 auto}.col.l .th{flex:1 1 auto}
.flow-wire{position:absolute;left:14.5%;right:14.5%;top:55%;height:1px;background:linear-gradient(90deg,#ffffff18,#ffffff70,#ffffff18);opacity:0;pointer-events:none}
.flow-wire::after{content:'';position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:#ddd;box-shadow:0 0 12px #fff}
.scene.on .flow-wire{animation:k3-wire 5.5s ease .4s both}
.scene.on .flow-wire::after{animation:k3-flow 4s cubic-bezier(.4,0,.2,1) .6s both}
.scene.on .ctr .cur{animation:k3-pointer 3.2s cubic-bezier(.22,1,.36,1) 2.5s both}
.scene.on .ctr .cur.c2{animation-delay:3s}
.ctr .cur::before{display:block!important;content:'';left:-8px;top:-10px;width:14px;height:18px;border:0!important;background:inherit;clip-path:polygon(0 0,100% 72%,48% 76%,28% 100%);transform:rotate(-14deg)}
@keyframes k3-wire{0%{opacity:0}20%,85%{opacity:1}100%{opacity:.2}}
@keyframes k3-flow{0%{left:0;opacity:0}15%{opacity:1}100%{left:100%;opacity:0}}
@keyframes k3-pointer{0%{opacity:0;transform:translate(-24px,24px)}20%{opacity:1}70%,100%{opacity:1;transform:translate(8px,-8px)}}
.hero-mobile-info{display:none}
.hero .head>.eyebrow{animation:k3-copy .7s ease both}.hero .head>h1{animation:k3-copy .8s ease .12s both}.hero .head>.sub{animation:k3-copy .8s ease .3s both}
.cv{top:282px}
.scene.on .p1{transition-delay:1.2s}.scene.on .p2{transition-delay:1.6s}.scene.on .p3{transition-delay:2.2s}
.scene.on .col.r .p4{transition-delay:5.7s}.scene.on .col.r .p5{transition-delay:6.1s}
.scene.on .ctr .res{transition-delay:3.9s}
.scene.on .ctr .cur{animation-delay:4.2s}.scene.on .ctr .cur.c2{animation-delay:4.6s}
.scene.on .flow-wire{animation-delay:2.5s}.scene.on .flow-wire::after{animation-delay:2.7s}
.flow-caption{position:absolute;top:-25px;left:16.5%;width:67%;text-align:center;font-size:11px;letter-spacing:.08em;color:#bbb}
.story-label{position:absolute;left:14px;top:14px;font-size:10px;letter-spacing:.08em;background:#1119;color:#fff;padding:5px 9px;border-radius:99px}
.more-label{font-size:10px;letter-spacing:.06em;padding:10px;flex:0 0 auto}
.mood-typing{display:block;margin-top:8px;white-space:nowrap;overflow:hidden;width:0;font-weight:400;color:#ccc}
.scene.on .mood-typing{animation:k3-type 1.2s steps(20,end) 2s forwards}
.hero .cta{animation:k3-copy .7s ease 6.1s both}
/* The complete introduction runs once. Later scenes keep the composition populated. */
.hero.has-played .scene.on .p1{transition-delay:.1s}.hero.has-played .scene.on .p2{transition-delay:.25s}.hero.has-played .scene.on .p3{transition-delay:.4s}
.hero.has-played .scene.on .col.r .p4{transition-delay:2.8s}.hero.has-played .scene.on .col.r .p5{transition-delay:3.2s}
.hero.has-played .scene.on .ctr .res{transition-delay:1.4s}
.hero.has-played .scene.on .ctr .cur{animation-delay:2.8s}.hero.has-played .scene.on .ctr .cur.c2{animation-delay:3.2s}
.hero.has-played .scene.on .flow-wire{animation-delay:.7s}.hero.has-played .scene.on .flow-wire::after{animation-delay:.9s}
@keyframes k3-copy{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes k3-type{to{width:100%}}
.scene .ctr .res{opacity:0;animation:none;transition:opacity .7s ease}
.scene.on .ctr .res{opacity:1;animation:none;transition:opacity 1.6s ease 1.6s}
.scene .ctr .kb{transform:scale(1.02);transition:transform 1s ease}
.scene.on .ctr .kb{transform:scale(1.1);transition:transform 10s ease-out}
.scene.standalone.on .ctr .res{transition-delay:0s}
.scene .cur{pointer-events:none;box-shadow:0 3px 18px #0002}
.scene.on .ctr .cur.c1{transition-delay:2.6s}.scene.on .ctr .cur.c2{transition-delay:3.1s}
.tc .im{transition:opacity 1.15s ease,transform 7s ease-out;transform:scale(1.02)}
.tc .im.on{transform:scale(1.09)}.tc:hover .im.on{transform:scale(1.14)}
.motion-ready .rv{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s cubic-bezier(.22,1,.36,1)}
.motion-ready .rv.in{opacity:1;transform:none}
.show .b{animation:wipe 10s ease-in-out infinite alternate;transition:none}
.show .ln{animation:ln 10s ease-in-out infinite alternate;transition:none}
.show .b,.show .ln{animation-play-state:paused}
.show.in-view .b,.show.in-view .ln{animation-play-state:running}
.show.is-manual .b{animation:none;clip-path:inset(0 0 0 var(--compare,50%))}
.show.is-manual .ln{animation:none;left:var(--compare,50%)}
.show input[type=range]{touch-action:pan-y}
.word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.word-mask>span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .85s ease;transition-delay:calc(var(--word-index)*75ms)}
.demo.in .word-mask>span,.closing.in .word-mask>span{transform:translateY(0);opacity:1}
.demo .ttl>.sub,.demo .ttl>.btn{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.demo.in .ttl>.sub{opacity:1;transform:none;transition-delay:.5s}
.demo.in .ttl>.btn{opacity:1;transform:none;transition-delay:.8s}
.demo .box{opacity:0;transform:translateY(22px);transition:opacity .9s ease .35s,transform .9s ease .35s}
.demo.in .box{opacity:1;transform:none}
.demo .ln2{transition:opacity .65s ease,transform .65s ease}
.demo .thumbs div{background:#363636}
.closing .pair{opacity:0;transform:translateY(18px);transition:opacity .8s ease .45s,transform .8s ease .45s}
.closing.in .pair{opacity:1;transform:none}
.work-grid figure{background:#e9e7e3;border-radius:14px;overflow:hidden}
.work-grid a{display:block;overflow:hidden;background:#d8d6d0;aspect-ratio:3/2}
.work-grid img{height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.22,1,.36,1),opacity .6s ease;opacity:0}
.work-grid img.loaded{opacity:1}.work-grid a:hover img{transform:scale(1.035)}
.work-grid figcaption{padding:14px 16px!important}
.motion-paused .show .b,.motion-paused .show .ln{animation-play-state:paused!important}
.motion-paused .hero .head>*,.motion-paused .hero .cta,.motion-paused .scene.on .part{opacity:1!important;transform:none!important}
.motion-paused .mood-typing{width:100%}
/* Essential information is available in the first paint; detail motion follows. */
.hero:not(.has-played) .scene.on .ctr.part{opacity:1;transform:none;transition:none}
.hero .head>.eyebrow,.hero .head>h1,.hero .head>.sub,.hero .cta{animation:none;opacity:1;transform:none}
.hero:not(.has-played) .scene.on .ctr .res{opacity:1;transition:none}
.hero:not(.has-played) .scene.on .col .part{animation:k3-copy .6s ease .15s both}
.hero:not(.has-played) .scene.on .col .p2{animation-delay:.3s}
.hero:not(.has-played) .scene.on .col.r .p4{animation-delay:.65s}
.hero:not(.has-played) .scene.on .col.r .p5{animation-delay:.85s}
.hero:not(.has-played) .scene.on .ctr .kb{animation:k3-first-zoom 9s ease-out both}
.hero .cta{animation-delay:.7s}
.motion-ready .work-grid figure.rv{opacity:1;transform:none;transition:none}
.work-grid figure.rv img{transform:translateY(12px) scale(1.02)}
.work-grid figure.rv.in img.loaded{opacity:1;transform:none}
.work-grid figure.rv img:not(.loaded){opacity:0}
.cv{bottom:160px}
@keyframes k3-first-zoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@media(max-width:900px){.scene .cur{font-size:10px;padding:3px 8px}.show .tx{bottom:60px}.cap .d{max-width:340px;margin:4px auto 0}.show .tg{max-width:44%;letter-spacing:.04em}.dots{gap:3px}.dots button{width:26px;padding:8px 3px}.dots button span{width:20px}}
@media(max-width:900px){.hero-mobile-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:absolute;left:14px;right:14px;top:214px;font-size:12px;line-height:1.3;color:#d1d1d4}.hero-mobile-info span{border-top:1px solid #ffffff35;padding-top:8px}.cv{top:286px}.flow-wire{display:none}.hero .sub{font-size:14px;max-width:330px}.hero-mobile-info span:first-child::after{content:'A finished design image.';display:block;font-size:10px;color:#aaa;margin-top:3px}}
@media(max-width:900px){.hero-mobile-info{top:220px;font-size:11px;gap:10px}.cv{top:300px;bottom:168px}.flow-caption{display:none}.hero .eyebrow{font-size:9px;max-width:330px;margin-left:auto;margin-right:auto}.cap .t{font-size:14px;max-width:340px;margin:auto;line-height:1.3}.cap .d{font-size:9px}.story-label{font-size:8px;padding:4px 7px;left:8px;top:8px}}
@media(max-width:900px){.cv{bottom:180px}}
@media(prefers-reduced-motion:reduce){
 .cv{will-change:auto;transform:translateX(-50%)!important;opacity:1!important}
 #heroHead{opacity:1!important}.motion-ready .rv,.word-mask>span,.demo .ttl>.sub,.demo .ttl>.btn,.demo .box,.closing .pair{opacity:1!important;transform:none!important;transition:none!important}
 .scene.on .part,.scene.on .ctr .res{opacity:1!important;transform:none!important}
 .scene.on .ctr .kb{transform:none!important}.show .b{animation:none!important;clip-path:inset(0 0 0 50%)}.show .ln{animation:none!important;left:50%}.work-grid img{transition:none}
 .mood-typing{width:100%}
}