/* ==========================================================================
   KEYFRAME — Motion layer
   Works together with kf-motion.js. Everything here is only active when
   <html> has the class "kf-m" (added by the inline snippet in <head>),
   so without JavaScript the site looks exactly as before.
   ========================================================================== */

/* ---------- 2. Scroll progress + film grain ---------- */
.kf-prog{position:fixed;top:0;left:0;height:2px;width:100%;background:#FF5A3C;transform-origin:left;transform:scaleX(0);z-index:103;pointer-events:none}
.kf-m .hero::after{content:"";position:absolute;inset:-50%;z-index:1;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:kfGrain .5s steps(4) infinite}
@keyframes kfGrain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(4%,2%)}}

/* ---------- 3. Nav entrance ---------- */
.kf-m nav{transform:translateY(-100%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.kf-m.kf-ready nav{transform:none}

/* ---------- 4. HERO ---------- */
.kf-m .hbg{transform:scale(1.18);transition:transform 2.6s cubic-bezier(.2,.8,.2,1)}
.kf-m.kf-ready .hbg{transform:scale(1.02)}
.kf-m .hc{will-change:transform}
/* split text: words are masks, chars move inside them */
.kw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .02em .06em;margin:-.12em -.02em -.06em;white-space:nowrap}
.kc{display:inline-block;will-change:transform}
h1 .kw,h1 .kc,.ctitle .kw,.ctitle .kc{color:inherit}
h1 span.kf-sweep,.ctitle span.kf-ul{color:var(--t)}
.kf-m h1 .kc{transform:translateY(115%) rotate(8deg);opacity:0;filter:blur(6px);transition:transform 1s cubic-bezier(.2,.9,.25,1),opacity .6s,filter .8s}
.kf-m h1.in .kc{transform:none;opacity:1;filter:none}
/* light sweep across the orange words, after they land */
.kf-m h1 span.kf-sweep .kc{animation:kfGlint 5s infinite;animation-delay:calc(2.4s + var(--i) * .045s)}
@keyframes kfGlint{0%,9%,100%{color:var(--t);text-shadow:none}4%{color:#ffe3da;text-shadow:0 0 18px rgba(255,120,90,.9)}}
.kf-m .hsub,.kf-m .hcta>a,.kf-m .hscr{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.kf-m .hscr{transform:translateX(-50%) translateY(24px)}
.kf-m .hc.in2 .hsub,.kf-m .hc.in2 .hcta>a{opacity:1;transform:none}
.kf-m .hc.in2 .hcta>a:nth-child(2){transition-delay:.12s}
.kf-m .hero.in2 .hscr{opacity:1;transform:translateX(-50%);transition-delay:.5s}
/* buttons: orange fill slides in */
.kf-m .bp,.kf-m .bo,.kf-m .ncta{position:relative;overflow:hidden;z-index:0}
.kf-m .bp::before,.kf-m .ncta::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.kf-m .bp:hover,.kf-m .ncta:hover{background:var(--t)}
.kf-m .bp:hover::before,.kf-m .ncta:hover::before{transform:none}
.kf-m .bo::before{content:"";position:absolute;inset:0;background:var(--t);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.kf-m .bo:hover{color:var(--w);border-color:var(--t)}
.kf-m .bo:hover::before{transform:scaleX(1);transform-origin:left}

/* ---------- 5. Eyebrow labels: decoding text + drawn line ---------- */
.kf-m .kf-scr{position:relative}
.kf-m .lbl.kf-scr,.kf-m .eyb.kf-scr{padding-left:0;transition:padding-left .8s cubic-bezier(.2,.8,.2,1)}
.kf-m .lbl.kf-scr::before,.kf-m .eyb.kf-scr::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--t);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.kf-m .lbl.kf-scr.in,.kf-m .eyb.kf-scr.in{padding-left:42px}
.kf-m .lbl.kf-scr.in::before,.kf-m .eyb.kf-scr.in::before{width:30px}
#contact .lbl.kf-scr.in{padding-left:0}
#contact .lbl.kf-scr::before{display:none}

/* ---------- 6. H2 headings: words rise out of masks ---------- */
.kf-m h2 .kc{transform:translateY(110%);transition:transform .95s cubic-bezier(.2,.9,.25,1)}
.kf-m h2.in .kc{transform:none}
.kf-m .ctitle span.kf-ul{position:relative;display:inline-block}
.kf-m .ctitle span.kf-ul::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.08em;background:var(--t);transform:scaleX(0);transform-origin:left;transition:transform 1s .9s cubic-bezier(.7,0,.2,1)}
.kf-m .ctitle.in span.kf-ul::after{transform:scaleX(1)}

/* ---------- 7. Generic fade-up ---------- */
.kf-m .kf-up{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1)}
.kf-m .kf-up.in{opacity:1;transform:none}

/* ---------- 8. Portfolio cards ---------- */
.kf-m .grid{perspective:1400px}
.kf-m .card{background:transparent}
.kf-m .card .ci{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1);transition-delay:inherit}
.kf-m .card .ci img{transform:scale(1.35);transition:transform 1.6s cubic-bezier(.2,.8,.2,1),filter .35s}
.kf-m .card.in .ci{clip-path:inset(0 0 0 0)}
.kf-m .card.in .ci img{transform:scale(1)}
.kf-m .card.in:hover .ci img{transform:scale(1.08);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .35s}
.kf-m .card .cd{opacity:0;transform:translateY(16px);transition:opacity .6s .5s,transform .6s .5s cubic-bezier(.2,.8,.2,1)}
.kf-m .card.in .cd{opacity:1;transform:translateY(4px)}
.kf-m .card.in:hover .cd{transform:none;transition-delay:0s}
/* tilt container + glare */
.kf-m .card.kf-tilt{transform-style:preserve-3d;backface-visibility:hidden;outline:1px solid transparent;will-change:transform}
.kf-m .card .kf-in{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kf-m .card .kf-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,140,110,.35),transparent 55%);mix-blend-mode:screen;z-index:3}
.kf-m .card:hover .kf-glare{opacity:1}
/* orange frame corners on hover — viewfinder look */
.kf-m .card .kf-vf{position:absolute;inset:10px;pointer-events:none;z-index:4;opacity:0;transform:scale(1.06);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);
  background:
   linear-gradient(var(--t),var(--t)) top left/18px 2px,linear-gradient(var(--t),var(--t)) top left/2px 18px,
   linear-gradient(var(--t),var(--t)) top right/18px 2px,linear-gradient(var(--t),var(--t)) top right/2px 18px,
   linear-gradient(var(--t),var(--t)) bottom left/18px 2px,linear-gradient(var(--t),var(--t)) bottom left/2px 18px,
   linear-gradient(var(--t),var(--t)) bottom right/18px 2px,linear-gradient(var(--t),var(--t)) bottom right/2px 18px;background-repeat:no-repeat}
.kf-m .card:hover .kf-vf{opacity:1;transform:none}
.kf-m .card .cp svg{transform:scale(.5);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.kf-m .card:hover .cp svg{transform:scale(1)}
.kf-m .fb{position:relative;overflow:hidden;transition:color .3s,border-color .3s}

/* ---------- 9. Image wipe reveal (About / Studio) ---------- */
.kf-m .kf-wipe{position:relative;overflow:hidden}
.kf-m .kf-wipe img{transform:scale(1.25);transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.kf-m .kf-wipe::after{content:"";position:absolute;inset:0;background:var(--t);transform:scaleX(0);transform-origin:left;z-index:2}
.kf-m .kf-wipe>*{visibility:hidden}
.kf-m .kf-wipe.in::after{animation:kfWipe 1.3s cubic-bezier(.77,0,.18,1) forwards}
.kf-m .kf-wipe.in>*{animation:kfShow 0s .65s forwards}
.kf-m .kf-wipe.in img{transform:scale(1.12)}
@keyframes kfWipe{0%{transform:scaleX(0);transform-origin:left}49.9%{transform:scaleX(1);transform-origin:left}50%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes kfShow{to{visibility:visible}}

/* ---------- 10. Expertise — words light up while scrolling ---------- */
.kf-m .exp p .kx{opacity:.18;transition:opacity .25s,color .25s}
.kf-m .exp p .kx.on{opacity:1}

/* ---------- 11. Stats ---------- */
.kf-m .stat{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.kf-m .stat.in{opacity:1;transform:none}
.kf-m .stat .snum{display:inline-block}
.kf-m .stat.done .snum{animation:kfPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes kfPop{40%{transform:scale(1.12)}}

/* ---------- 12. Services ---------- */
.kf-m .srv{opacity:0;transform:translateY(50px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1),border-color .3s}
.kf-m .srv.in{opacity:1;transform:none}
.kf-m .srv .sb{width:0;transition:width .8s .35s cubic-bezier(.7,0,.2,1)}
.kf-m .srv.in .sb{width:26px}
.kf-m .srv.in:hover .sb{width:64px;transition-delay:0s}
.kf-m .srv .sn{transform:translateX(30px);opacity:0;transition:transform 1s .2s cubic-bezier(.2,.8,.2,1),opacity 1s .2s,color .4s}
.kf-m .srv.in .sn{transform:none;opacity:1}
.kf-m .srv:hover .sn{color:rgba(255,90,60,.22)}
.kf-m .srv::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(255,90,60,.07),transparent 70%);transform:translateY(100%);transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:-1}
.kf-m .srv{z-index:0}
.kf-m .srv:hover::before{transform:none}

/* ---------- 13. Marquee band ---------- */
.kf-mq{overflow:hidden;background:var(--w);padding:20px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);user-select:none}
.kf-mq .trk{display:flex;width:max-content;will-change:transform}
.kf-mq span{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3vw,38px);line-height:1;letter-spacing:1px;white-space:nowrap;padding-right:.5em;color:transparent;-webkit-text-stroke:1px rgba(240,237,232,.4)}
.kf-mq span.f{color:var(--t);-webkit-text-stroke:0}
.kf-mq span.d{color:var(--t);-webkit-text-stroke:0;font-size:.6em;vertical-align:middle;padding-right:.8em}

/* ---------- 14. Custom cursor (desktop only) ---------- */
.kf-cur{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--t);transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .3s,opacity .3s;display:flex;align-items:center;justify-content:center;mix-blend-mode:normal}
.kf-cur b{font:500 10px/1 var(--fb);letter-spacing:2px;color:#fff;opacity:0;transition:opacity .2s;text-transform:uppercase}
.kf-cur.play{width:84px;height:84px;margin:-42px 0 0 -42px}
.kf-cur.play b{opacity:1}
.kf-cur.link{width:40px;height:40px;margin:-20px 0 0 -20px;background:rgba(255,90,60,.25)}
.kf-cur.hide{opacity:0}
/* EN marquee: solid white words, dot centred */
.kf-mq.solid .trk{align-items:center}
.kf-mq.solid span{color:#F0EDE8;-webkit-text-stroke:0}
.kf-mq.solid span.f{color:var(--t)}
.kf-mq.solid span{padding-right:0}
.kf-mq.solid span.d{display:inline-block;font-size:clamp(22px,3vw,38px);width:.17em;height:.17em;padding:0;margin:0 .55em;border-radius:50%;background:var(--t);overflow:hidden;text-indent:-9999px;flex:none;transform:translateY(-.04em)}
/* EN: no circle — only a "PLAY" tag that appears over portfolio cards */
.kf-cur.kf-tag{width:auto;height:auto;margin:14px 0 0 14px;background:none;border-radius:0;opacity:0;transition:opacity .25s}
.kf-cur.kf-tag.play{width:auto;height:auto;margin:14px 0 0 14px;opacity:1}
.kf-cur.kf-tag.link{width:auto;height:auto;margin:14px 0 0 14px;background:none}
.kf-cur.kf-tag b{display:flex;align-items:center;gap:7px;background:var(--t);color:#fff;padding:8px 13px 8px 10px;font-size:10px;letter-spacing:2.5px;opacity:1;transform:scale(.8);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.kf-cur.kf-tag.play b{transform:none}
.kf-cur.kf-tag svg{width:11px;height:11px}

/* ---------- 15. Lightbox entrance ---------- */
.kf-m .lb.open .lbf{animation:kfLb .7s cubic-bezier(.2,.8,.2,1)}
.kf-m .lb.open .lbt{animation:kfFadeUp2 .7s .1s both}
@keyframes kfLb{from{clip-path:inset(50% 0 50% 0);transform:scale(.96)}to{clip-path:inset(0);transform:none}}
@keyframes kfFadeUp2{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Mobile tuning ---------- */
@media(max-width:960px){
  .kf-mq{padding:14px 0}
  .kf-m .lbl.kf-scr.in,.kf-m .eyb.kf-scr.in{padding-left:34px}
  .kf-m .lbl.kf-scr.in::before,.kf-m .eyb.kf-scr.in::before{width:22px}
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce){
  .kf-cur,.kf-m .hero::after{display:none!important}
  .kf-m *,.kf-m *::before,.kf-m *::after{transition:none!important;animation:none!important}
}