/* =========================================================
   SUPER INTERACTIVE EXPERIENCE LAYER
   Desktop: expressive. Mobile: transform/opacity only.
   ========================================================= */
:root{--ux-acid:#d7ff38;--ux-ease:cubic-bezier(.16,1,.3,1);--ux-shadow:0 22px 70px rgba(16,16,14,.14)}
html.ux-full{--ux-motion-mult:1}html.ux-lite{--ux-motion-mult:.62}
body{overflow-x:hidden}

/* Obvious but lightweight entrance curtain */
.ux-intro-screen{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;background:#11110f;color:#fff;transform:translate3d(0,0,0);will-change:transform;pointer-events:none}
.ux-intro-screen::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--ux-acid);transform:scaleX(.05);transform-origin:left;animation:uxIntroLine .55s var(--ux-ease) forwards}
.ux-intro-brand{display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.04em;text-transform:uppercase}.ux-intro-brand b{width:9px;height:9px;border-radius:50%;background:var(--ux-acid);box-shadow:0 0 0 7px rgba(215,255,56,.12)}
.ux-intro-screen.is-leaving{transform:translate3d(0,-101%,0);transition:transform .72s var(--ux-ease)}
@keyframes uxIntroLine{to{transform:scaleX(1)}}

/* Word reveal */
.ux-word-title .ux-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em 0 .08em;margin:-.06em 0 -.08em}
.ux-word-title .ux-word>span{display:inline-block;transform:translate3d(0,110%,0) rotate(2deg);opacity:.08;transition:transform .9s var(--ux-ease),opacity .6s ease;transition-delay:calc(var(--ux-word-i,0)*55ms)}
.ux-word-title.ux-words-visible .ux-word>span{transform:translate3d(0,0,0) rotate(0);opacity:1}

/* Desktop full experience enhancements */
html.ux-full .site-header{transition:transform .55s var(--ux-ease),background-color .3s ease,box-shadow .35s ease}
html.ux-full .hero-section{perspective:1200px}
html.ux-full.motion-start .hero-copy h1{transform:translate3d(var(--ux-hero-x,0),var(--ux-hero-y,0),0) rotateX(var(--ux-hero-rx,0deg));transition:transform .18s linear,opacity .72s ease}
html.ux-full .visual-card{transition:filter .35s ease,box-shadow .45s var(--ux-ease)}
html.ux-full .drag-stage-wrap:hover .visual-card{filter:saturate(.92) contrast(1.03)}
html.ux-full .visual-card:hover{filter:saturate(1.08)!important;box-shadow:0 28px 70px rgba(17,17,15,.18);z-index:6}

/* Header/nav richer */
.desktop-nav a{position:relative;overflow:hidden}
.desktop-nav a::before{content:"";position:absolute;inset:auto 12px 7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ux-ease)}
.desktop-nav a:hover::before,.desktop-nav a.active::before{transform:scaleX(1);transform-origin:left}
.header-cta,.pill-button,.pricing-cta,.form-submit{position:relative;overflow:hidden;isolation:isolate}
.header-cta::after,.pill-button::after,.pricing-cta::after,.form-submit::after{content:"";position:absolute;top:-70%;left:-35%;width:28%;height:240%;background:rgba(255,255,255,.38);transform:translate3d(-250%,0,0) rotate(18deg);transition:transform .7s var(--ux-ease);z-index:-1}
html.ux-full .header-cta:hover::after,html.ux-full .pill-button:hover::after,html.ux-full .pricing-cta:hover::after,html.ux-full .form-submit:hover::after{transform:translate3d(650%,0,0) rotate(18deg)}

/* Homepage portfolio */
.home-portfolio{border-top:1px solid var(--line)}
.home-portfolio-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.45fr);gap:70px;align-items:end;margin-top:34px}
.home-portfolio-head h2{margin:0;font-size:clamp(58px,7.5vw,112px);line-height:.84;letter-spacing:-.072em;font-weight:500}.home-portfolio-head>div{max-width:430px;justify-self:end}.home-portfolio-head p{font-size:17px;line-height:1.45;letter-spacing:-.025em;color:#4b4943}
.home-portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:62px}.home-portfolio-card{position:relative;grid-column:span 4;min-height:600px;overflow:hidden;background:#d8d6d0;color:#fff;isolation:isolate}.home-portfolio-main{grid-column:span 8;min-height:720px}.home-portfolio-media{position:absolute;inset:0}.home-portfolio-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.58))}.home-portfolio-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ux-ease),filter .55s ease}.home-portfolio-no{position:absolute;top:18px;left:18px;z-index:2;font-size:11px;letter-spacing:.08em}.home-portfolio-meta{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px}.home-portfolio-meta span{grid-column:1/-1;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.78}.home-portfolio-meta h3{margin:0;font-size:clamp(34px,4.4vw,64px);line-height:.9;letter-spacing:-.06em;font-weight:500}.home-portfolio-meta i{font-style:normal;width:48px;height:48px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;font-size:20px;transition:transform .45s var(--ux-ease),background .25s ease,color .25s ease}.home-portfolio-card::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle 260px at var(--ux-px,50%) var(--ux-py,50%),rgba(255,255,255,.18),transparent 55%);opacity:0;transition:opacity .3s ease;pointer-events:none}
html.ux-full .home-portfolio-card:hover::before{opacity:1}html.ux-full .home-portfolio-card:hover img{transform:scale(1.045)}html.ux-full .home-portfolio-card:hover i{transform:rotate(45deg);background:#fff;color:#111}

/* Portfolio page */
.portfolio-hero{padding-bottom:64px}.portfolio-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.45fr);gap:70px;align-items:end;padding-top:36px}.portfolio-eyebrow{font-size:10px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:24px;color:#65635d}.portfolio-hero h1{margin:0;font-size:clamp(90px,13.5vw,205px);line-height:.69;letter-spacing:-.09em;font-weight:500}.portfolio-hero h1>span,.portfolio-hero h1 .muted{color:#97948d}.portfolio-hero-copy{max-width:470px;justify-self:end;padding-bottom:12px}.portfolio-hero-copy p{font-size:clamp(17px,1.5vw,22px);line-height:1.35;letter-spacing:-.03em;color:#44423d;margin:0 0 28px}
.portfolio-hero-visual{position:relative;height:min(72vh,800px);min-height:600px;margin-top:70px;overflow:hidden;background:#11110f;border-radius:2px;perspective:1300px}.portfolio-float{position:absolute;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.22);will-change:transform;transition:box-shadow .45s ease}.portfolio-float img{width:100%;height:100%;object-fit:cover}.pf-a{width:41%;height:70%;left:9%;top:14%;z-index:2}.pf-b{width:24%;height:58%;right:10%;top:7%;z-index:4;transform:rotate(4deg)}.pf-c{width:25%;height:36%;right:25%;bottom:7%;z-index:3;transform:rotate(-3deg)}.pf-d{width:18%;height:30%;left:39%;top:5%;z-index:5;transform:rotate(-5deg)}.portfolio-orbit{position:absolute;width:46vw;max-width:680px;aspect-ratio:1;border:1px solid rgba(215,255,56,.28);border-radius:50%;right:-12%;bottom:-42%;animation:uxOrbit 16s linear infinite}.portfolio-orbit::before,.portfolio-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.portfolio-orbit::before{inset:12%}.portfolio-orbit::after{inset:27%}.portfolio-orbit span{position:absolute;top:10%;left:18%;width:12px;height:12px;border-radius:50%;background:var(--ux-acid);box-shadow:0 0 0 10px rgba(215,255,56,.08)}@keyframes uxOrbit{to{transform:rotate(360deg)}}
.portfolio-intro{border-top:1px solid var(--line)}.portfolio-intro-grid{display:grid;grid-template-columns:1.25fr .45fr;gap:70px;align-items:end;margin-top:34px}.portfolio-intro h2{margin:0;font-size:clamp(60px,7.9vw,118px);line-height:.84;letter-spacing:-.074em;font-weight:500}.portfolio-intro p{margin:0;max-width:460px;justify-self:end;font-size:17px;line-height:1.48;color:#494740}
.portfolio-showcase{display:grid;gap:80px}.portfolio-case{position:relative;overflow:hidden;background:#d7d5cf}.portfolio-case-link{display:block;position:relative;min-height:680px;color:#fff;isolation:isolate;overflow:hidden}.portfolio-case-hero .portfolio-case-link{min-height:min(88vh,980px)}.portfolio-case-media{position:absolute;inset:0}.portfolio-case-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 20%,rgba(0,0,0,.68) 100%)}.portfolio-case-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ux-ease),filter .5s ease}.portfolio-case-index{position:absolute;z-index:2;top:24px;left:24px;font-size:11px;letter-spacing:.1em}.portfolio-case-content{position:absolute;z-index:2;left:28px;bottom:28px;max-width:70%}.portfolio-case-content span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.76}.portfolio-case-content h2{margin:8px 0 10px;font-size:clamp(54px,8vw,124px);line-height:.78;letter-spacing:-.08em;font-weight:500}.portfolio-case-content p{max-width:550px;margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.84)}.portfolio-case-arrow{position:absolute;right:28px;bottom:28px;z-index:2;width:70px;height:70px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;font-size:24px;transition:transform .55s var(--ux-ease),background .25s ease,color .25s ease}.portfolio-case-glow{position:absolute;z-index:1;width:420px;height:420px;border-radius:50%;left:var(--ux-px,50%);top:var(--ux-py,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(215,255,56,.22),rgba(215,255,56,0) 68%);opacity:0;pointer-events:none;transition:opacity .3s ease}.portfolio-duo{display:grid;grid-template-columns:1.08fr .92fr;gap:12px;align-items:start}.portfolio-duo .portfolio-case-link{min-height:760px}.portfolio-duo .portfolio-case-offset{margin-top:110px}.portfolio-duo-reverse{grid-template-columns:.92fr 1.08fr}.portfolio-duo-reverse .portfolio-case:first-child{order:2}.portfolio-duo-reverse .portfolio-case:last-child{order:1}.portfolio-case-wide .portfolio-case-link{min-height:720px}
html.ux-full .portfolio-case:hover img{transform:scale(1.045)}html.ux-full .portfolio-case:hover .portfolio-case-arrow{transform:rotate(45deg) scale(1.04);background:#fff;color:#111}html.ux-full .portfolio-case:hover .portfolio-case-glow{opacity:1}
.portfolio-manifesto{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}.portfolio-manifesto-track{display:flex;align-items:center;gap:34px;width:max-content;font-size:clamp(34px,5vw,76px);font-weight:500;line-height:1;letter-spacing:-.055em;white-space:nowrap;animation:uxPortfolioTicker 25s linear infinite}.portfolio-manifesto-track i{font-style:normal;font-size:.32em;color:#8b8982}@keyframes uxPortfolioTicker{to{transform:translate3d(-50%,0,0)}}

/* Extra interaction polish */
html.ux-full [data-ux-case]{transform-style:preserve-3d}.ux-case-active{box-shadow:var(--ux-shadow)}
html.ux-full .section-label{transition:letter-spacing .35s var(--ux-ease),color .3s ease}html.ux-full .section-label:hover{letter-spacing:.11em;color:#111}
html.ux-full .creator-quote,html.ux-full .pricing-card,html.ux-full .engagement-cards article{transition:transform .55s var(--ux-ease),box-shadow .55s var(--ux-ease),background-color .3s ease}
html.ux-full .creator-quote:hover,html.ux-full .pricing-card:hover,html.ux-full .engagement-cards article:hover{transform:translate3d(0,-6px,0);box-shadow:0 24px 65px rgba(17,17,15,.09)}

/* Performance containment */
.home-portfolio,.portfolio-intro,.portfolio-showcase,.portfolio-manifesto{content-visibility:auto;contain-intrinsic-size:1px 900px}

@media(max-width:991px){.home-portfolio-head,.portfolio-hero-grid,.portfolio-intro-grid{grid-template-columns:1fr;gap:30px}.home-portfolio-head>div,.portfolio-hero-copy,.portfolio-intro p{justify-self:start}.home-portfolio-grid{grid-template-columns:1fr 1fr}.home-portfolio-card,.home-portfolio-main{grid-column:auto;min-height:520px}.home-portfolio-main{grid-column:1/-1;min-height:640px}.portfolio-hero-visual{min-height:520px}.portfolio-case-content{max-width:80%}.portfolio-duo,.portfolio-duo-reverse{grid-template-columns:1fr 1fr}.portfolio-duo .portfolio-case-offset{margin-top:70px}}
@media(max-width:767px){
  .ux-intro-screen{display:none!important}.ux-word-title .ux-word>span{transition-duration:.55s}.home-portfolio{padding-top:86px}.home-portfolio-head h2{font-size:clamp(48px,15vw,74px)}.home-portfolio-grid{display:block;margin-top:38px}.home-portfolio-card,.home-portfolio-main{display:block;min-height:0;aspect-ratio:.84;margin-bottom:12px}.home-portfolio-main{aspect-ratio:1.05}.home-portfolio-meta h3{font-size:38px}.home-portfolio-meta i{width:42px;height:42px}
  .portfolio-hero{padding-bottom:28px}.portfolio-hero-grid{padding-top:25px}.portfolio-hero h1{font-size:clamp(76px,24vw,112px)}.portfolio-hero-copy p{font-size:17px}.portfolio-hero-visual{height:470px;min-height:0;margin-top:40px}.pf-a{width:58%;height:64%;left:5%;top:18%}.pf-b{width:34%;height:46%;right:4%;top:7%}.pf-c{width:34%;height:31%;right:8%;bottom:6%}.pf-d{display:none}.portfolio-orbit{animation:none;width:90vw;opacity:.6}
  .portfolio-intro h2{font-size:clamp(50px,15vw,76px)}.portfolio-showcase{gap:12px}.portfolio-case-link,.portfolio-case-hero .portfolio-case-link,.portfolio-case-wide .portfolio-case-link,.portfolio-duo .portfolio-case-link{min-height:0;aspect-ratio:.82}.portfolio-case-hero .portfolio-case-link,.portfolio-case-wide .portfolio-case-link{aspect-ratio:1.02}.portfolio-duo,.portfolio-duo-reverse{display:block}.portfolio-duo .portfolio-case-offset{margin-top:12px}.portfolio-duo-reverse .portfolio-case:first-child,.portfolio-duo-reverse .portfolio-case:last-child{order:initial}.portfolio-case-content{left:18px;bottom:18px;max-width:78%}.portfolio-case-content h2{font-size:clamp(42px,13vw,64px)}.portfolio-case-content p{display:none}.portfolio-case-arrow{right:16px;bottom:16px;width:48px;height:48px;font-size:18px}.portfolio-case-index{top:16px;left:16px}.portfolio-manifesto-track{animation:none;font-size:34px;transform:none;flex-wrap:wrap;width:auto;justify-content:center;padding:0 16px;white-space:normal}.portfolio-manifesto-track span:nth-of-type(n+4),.portfolio-manifesto-track i:nth-of-type(n+4){display:none}
  .home-portfolio,.portfolio-intro,.portfolio-showcase,.portfolio-manifesto{content-visibility:visible;contain:none}
}
@media(max-width:0px){.ux-intro-screen{display:none!important}.ux-word-title .ux-word>span{transform:none!important;opacity:1!important;transition:none!important}.portfolio-orbit,.portfolio-manifesto-track{animation:none!important}}

/* Section-level ambient entrance. Kept intentionally subtle so child reveals remain primary. */
.motion-init .ux-section-auto{opacity:.985;transform:translate3d(0,18px,0);transition:opacity .8s ease,transform .9s var(--ux-ease)}
.motion-init .ux-section-auto.ux-section-in{opacity:1;transform:translate3d(0,0,0)}
.ux-index-pop{animation:uxIndexPop .42s var(--ux-ease)}
@keyframes uxIndexPop{0%{transform:translate3d(0,9px,0);opacity:.2}100%{transform:translate3d(0,0,0);opacity:1}}
@media(max-width:767px){.motion-init .ux-section-auto{opacity:1;transform:none;transition:none}.ux-index-pop{animation:none}}

/* Supporting copy/component reveals added only by JS, so no-JS content stays visible. */
.ux-auto-reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .62s ease,transform .78s var(--ux-ease);transition-delay:var(--ux-auto-delay,0ms)}
.ux-auto-reveal.ux-auto-in{opacity:1;transform:translate3d(0,0,0)}
html.ux-full .work-card,html.ux-full .collection-card,html.ux-full .prompt-card{backface-visibility:hidden}
@media(max-width:767px){.ux-auto-reveal{opacity:1;transform:none;transition:none}}

/* CSS-only desktop motion: remains visible even before pointer interactions begin. */
@media (min-width:992px){
  .drag-stage-wrap::before{content:"";position:absolute;z-index:5;top:-8%;bottom:-8%;left:-28%;width:18%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-12deg) translate3d(-160%,0,0);animation:uxStageScan 9s ease-in-out 1.3s infinite;will-change:transform}
  .stage-label{animation:uxStageLabel 2.8s ease-in-out infinite}
  .big-link i{animation:uxArrowBreathe 3.8s ease-in-out infinite}
}
@keyframes uxStageScan{0%,62%{transform:skewX(-12deg) translate3d(-160%,0,0);opacity:0}70%{opacity:1}90%,100%{transform:skewX(-12deg) translate3d(900%,0,0);opacity:0}}
@keyframes uxStageLabel{0%,100%{box-shadow:0 0 0 0 rgba(17,17,15,0)}50%{box-shadow:0 0 0 7px rgba(17,17,15,.055)}}
@keyframes uxArrowBreathe{0%,100%{box-shadow:0 0 0 0 rgba(17,17,15,0)}50%{box-shadow:0 0 0 8px rgba(17,17,15,.045)}}