/* ===== Real-paper pass: photographed textures, torn edges, tape, objects, motion ===== */
:root{--tx-paper:url(../tex/paper.jpg);--tx-crumple:url(../tex/crumple.jpg);--tx-ink:url(../tex/ink.jpg);--edge:clamp(46px,6.2vw,96px)}
/* which paper each surface is made of */
.hero,.hero .under,.state,.phero,main>section.sec.orange{--bgc:var(--orange);--bgt:var(--tx-crumple);--bgs:1100px;--bgb:multiply}
.letter,.desks,.route,main>section.sec.paper{--bgc:var(--paper);--bgt:var(--tx-paper);--bgs:760px;--bgb:multiply}
.insights,main>section.sec.pl{--bgc:var(--paper-l);--bgt:var(--tx-crumple);--bgs:1300px;--bgb:multiply}
.choose,.ring-us,main>section.sec.ink{--bgc:var(--ink);--bgt:var(--tx-ink);--bgs:900px;--bgb:normal}
main>section[class],.hero .under{background-color:var(--bgc);background-image:var(--bgt);background-size:var(--bgs);background-blend-mode:var(--bgb)}
/* the old vector teeth give way to the photographed-style tear */
.teeth{display:none!important}
.edge{position:absolute;left:0;right:0;bottom:calc(-1 * var(--edge) + 1px);height:var(--edge);z-index:6;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(251,247,236,.92)) drop-shadow(0 11px 9px rgba(20,18,16,.34))}
.edge>i{position:absolute;inset:0;background-color:var(--bgc);background-image:var(--bgt);background-size:var(--bgs);background-blend-mode:var(--bgb);background-position:0 100%;-webkit-mask:url(../tex/tear.png) var(--mx0,0) 0/var(--mw,100%) 100% repeat-x;mask:url(../tex/tear.png) var(--mx0,0) 0/var(--mw,100%) 100% repeat-x}
.edge.flip>i{transform:scaleX(-1)}
.choose .edge,.ring-us .edge,.sec.ink .edge{filter:drop-shadow(0 2px 0 rgba(241,235,221,.25)) drop-shadow(0 11px 9px rgba(0,0,0,.45))}
/* real masking tape */
.rtape{position:absolute;z-index:4;width:var(--tw,clamp(70px,8vw,120px));height:auto;pointer-events:none;transform:rotate(var(--tr,-8deg));filter:drop-shadow(0 1px 1px rgba(20,18,16,.25));opacity:.93}
.cut .rtape{top:18%;left:2%;z-index:5}
.tape{background:none!important;clip-path:none!important;box-shadow:none!important;mix-blend-mode:normal!important;height:auto!important;aspect-ratio:3/1;background-image:var(--tapeimg)!important;background-size:contain!important;background-repeat:no-repeat!important}
/* collage objects */
.obj{position:absolute;z-index:7;pointer-events:none;filter:drop-shadow(0 14px 12px rgba(20,18,16,.35));will-change:transform}
.obj img{display:block;width:100%;height:auto}
.obj.marker{width:clamp(150px,17vw,240px);left:calc(100% - 120px);top:calc(4% + var(--p,0) * 78%);transform:rotate(calc(-32deg + var(--p,0) * 22deg));transform-origin:20% 30%}
.obj.stampo{width:clamp(80px,7.5vw,118px);opacity:0;transition:opacity .25s}
.obj.stampo.on{opacity:1}
.plane img{display:block;width:100%;height:auto;filter:drop-shadow(4px 8px 4px rgba(20,18,16,.28))}
.plane{width:clamp(70px,8vw,118px)!important}
/* motion: cut-outs feel loosely pinned and drift with the pointer */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cut img{translate:calc(var(--mx,0) * var(--dp,7px)) calc(var(--my,0) * var(--dp,7px));transition:translate .5s cubic-bezier(.2,.8,.2,1)}
  .cut:nth-of-type(2n) img{--dp:-6px}
  .cut img{animation:loose 7s ease-in-out infinite alternate}
  .cut:nth-of-type(3n) img{animation-duration:9s;animation-delay:-3s}
}
@keyframes loose{from{rotate:-.7deg}to{rotate:.8deg}}
@media(max-width:820px){.obj.marker,.obj.stampo{display:none}}
html[data-mode=agency] main>section[class],html[data-mode=agency] .hero .under,html[data-mode=agency] .edge>i{background-image:none!important}
html[data-mode=agency] .rtape,html[data-mode=agency] .obj{display:none!important}
.cut img.rtape{position:absolute;height:auto!important;width:var(--tw,clamp(64px,6vw,96px))!important;max-width:none;top:23%;left:-13%;filter:drop-shadow(0 1px 1px rgba(20,18,16,.25))!important;animation:none!important;translate:none!important;rotate:none!important;transform:rotate(var(--tr,-10deg))}