/* Technologies IA · homepage cinematic sections (ported from /preview-cinematic/, approved by Maria 2026-10-20).
   SCOPED to #agents, #work, #process only — hero, header, footer and other sections are untouched. No Lenis. */
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
#agents,#work,#process{--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--ease:cubic-bezier(.16,1,.3,1);--glow:rgba(220,203,177,.55)}
#agents em.sf,#work em.sf,#process em.sf{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
#agents h2 em.sf,#process h2 em.sf{color:var(--taupe)}#work h2 em.sf{color:var(--sand)}

/* pills inside these sections: arrow slide (same as preview) */
#agents .pill,#work .pill{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s}
#agents .pill i,#work .pill i{transition:transform .5s var(--ease)}
#agents .pill:hover i,#work .pill:hover i{transform:translateX(3px) rotate(-45deg)}
#agents .pill:hover{box-shadow:0 14px 34px -14px rgba(46,46,42,.55)}
#work .pill.l:hover{box-shadow:0 0 0 6px rgba(220,203,177,.12),0 18px 40px -16px rgba(220,203,177,.6)}

/* scroll reveals (only armed when JS adds .cine-on to <html>, so no-JS = visible) */
.cine-on #agents .rv,.cine-on #work .rv,.cine-on #process .rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.cine-on #agents .rv.in,.cine-on #work .rv.in,.cine-on #process .rv.in{opacity:1;transform:none}

/* 1 · Agents: horizontal pinned showcase */
#agents .card{transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .4s}
#agents .card .img img{transition:transform 1.2s var(--ease)}
#agents .card:hover{transform:translateY(-6px);background:#f2ece2;box-shadow:0 0 0 1px rgba(168,147,122,.25),0 30px 60px -30px rgba(168,147,122,.75),0 0 60px -10px var(--glow)}
#agents .card:hover .img img{transform:scale(1.06)}
#agents .hs-progress{display:none}
#agents.pinned{padding:0}
#agents.pinned .pin-outer{position:relative}
#agents.pinned .pin-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
#agents.pinned .pin-sticky>.w{width:100%;padding-top:72px;padding-bottom:72px}
#agents.pinned .head{margin-bottom:40px}
#agents.pinned .cards6{display:flex;gap:22px;width:max-content;will-change:transform}
#agents.pinned .card{width:min(360px,27vw);flex:none}
#agents.pinned .card .img{height:clamp(170px,24vh,230px)}
#agents.pinned .hs-progress{display:block;height:2px;background:rgba(46,46,42,.12);border-radius:2px;margin-top:30px;max-width:420px;overflow:hidden}
#agents.pinned .hs-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--taupe),var(--sand));transform-origin:0 50%;transform:scaleX(0)}
#agents.pinned .roster-note{margin-top:18px!important}

/* 2 · Real systems: grain + dashboard-reveal bento */
#work.grain{position:relative;overflow:hidden;isolation:isolate}
#work.grain::after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.06;mix-blend-mode:screen;z-index:0;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:cine-grain 1.2s steps(6) infinite}
#work.grain>.w{position:relative;z-index:1}
@keyframes cine-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
#work .pc.bento{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:230px 200px;perspective:1400px}
#work .pc.bento .p{height:auto}
#work .pc.bento .p:nth-child(1){grid-row:span 2}
#work .pc.bento .p:nth-child(4){grid-column:span 2}
.cine-on #work .pc.bento .p{transform:rotateX(14deg) translateY(40px) scale(.96);filter:blur(8px);opacity:0;transition:transform 1.3s var(--ease),filter 1.3s var(--ease),opacity 1.1s var(--ease),box-shadow .6s;transition-delay:calc(var(--d,0)*120ms)}
.cine-on #work .pc.bento.in .p{transform:none;filter:none;opacity:1}
#work .pc.bento .p img{transition:transform 1.4s var(--ease)}
#work .pc.bento .p:hover img{transform:scale(1.05)}
#work .pc.bento .p:hover{box-shadow:0 0 0 1px rgba(220,203,177,.35),0 0 70px -12px rgba(220,203,177,.45)}
#work .pc.bento .p::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,240,215,.22) 48%,transparent 62%);transform:translateX(-120%);transition:transform 1.6s var(--ease) .35s}
#work .pc.bento.in .p::before{transform:translateX(120%)}
#work .pc.bento .cap{z-index:2}

/* 3 · Stats counters + name ticker */
#work .stats3 b{font-variant-numeric:tabular-nums}
#work .marquee{overflow:hidden;margin-top:28px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#work .marquee .chips{margin-top:0;flex-wrap:nowrap;width:max-content;animation:cine-marq 38s linear infinite}
#work .marquee:hover .chips{animation-play-state:paused}
#work .marquee .chip{white-space:nowrap}
@keyframes cine-marq{to{transform:translateX(-50%)}}

/* 4 · Process: glowing connector */
#process .steps{position:relative}
#process .steps .line{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(46,46,42,.14);grid-column:1/-1;padding:0!important;border:0!important}
#process .steps .line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--sand),var(--taupe));transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 14px 1px var(--glow);transition:transform .2s linear}
#process .steps>div:not(.line){border-top-color:transparent;position:relative}
#process .steps>div:not(.line)::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#e8dfd1;transition:background .5s,box-shadow .5s}
#process .steps>div.lit::before{background:var(--taupe);box-shadow:0 0 0 4px rgba(220,203,177,.45),0 0 18px var(--glow)}
#process .steps b{font-family:var(--serif);font-style:italic;font-size:22px;font-weight:400;color:var(--taupe)}

@media(max-width:1000px){#work .pc.bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}#work .pc.bento .p{height:260px}#work .pc.bento .p:nth-child(1){grid-row:auto}#work .pc.bento .p:nth-child(4){grid-column:auto}
 #process .steps .line{display:none}#process .steps>div:not(.line){border-top-color:rgba(46,46,42,.2)}#process .steps>div:not(.line)::before{display:none}}
@media(max-width:600px){#work .pc.bento{grid-template-columns:1fr}#work .pc.bento .p{height:240px}}

/* Reduced motion: static and fully visible */
@media (prefers-reduced-motion: reduce){
 #agents *,#work,#work *,#work::after,#process *,#process *::before{animation:none!important;transition:none!important}
 #agents .rv,#work .rv,#process .rv,#work .pc.bento .p{opacity:1!important;transform:none!important;filter:none!important}
 #work .pc.bento .p::before{display:none}
 #work .marquee .chips{flex-wrap:wrap;width:auto}#work .marquee{-webkit-mask:none;mask:none}#work .marquee .chips [aria-hidden]{display:none}
 #process .steps .line i{transform:none!important}
}