﻿/* Five objects occupy different depths. Labels remain attached to their material. */
.request-field{perspective:1000px;transform-style:preserve-3d;inset:28% 9% 18%}
.request{transform-style:preserve-3d;isolation:isolate}
.request .glass-object{width:100%;height:100%;filter:drop-shadow(0 8px 22px #05112680)}
.request>span:last-child{position:absolute;left:48%;top:45%;margin:0;white-space:nowrap;font-size:clamp(14px,1.25vw,21px);color:#eef6ff;text-shadow:0 2px 10px #010713,0 0 5px #010713;transform:translateZ(18px)}
.request.mail{width:210px;height:200px;left:4%;top:9%}
.request.call{width:150px;height:155px;left:23%;top:55%}
.request.date{width:180px;height:185px;left:45%;top:0}
.request.bill{width:220px;height:225px;right:6%;top:32%}
.request.review{width:145px;height:150px;left:52%;top:65%}
.request.call>span:last-child{left:53%;top:42%}.request.review>span:last-child{top:57%;left:36%}
.working .request>span:last-child{font-size:13px;left:23%;top:78%}
.working .request{filter:none!important}
.task-river{left:8%;top:44%;width:37%;height:160px;max-width:600px}
.task-river p{position:absolute;inset:0;display:flex;flex-direction:column;gap:18px;opacity:0!important;visibility:hidden;margin:0;pointer-events:none;transform:none!important}
.task-river p.is-current{opacity:1!important;visibility:visible;color:#f3f7ff}
.task-river span{font-size:clamp(34px,3.3vw,57px);line-height:1.03;letter-spacing:-.04em}
.task-river small{font-size:clamp(18px,1.5vw,24px);line-height:1.45;max-width:31ch;padding:0;color:#ccddf1}
.task-permission{bottom:15%;max-width:40ch}
.task-position{position:absolute;left:8%;top:37%;display:flex;gap:10px}
.task-position button{min-width:44px;min-height:44px;background:transparent;color:#a6bdd6;font-size:13px;border-bottom:1px solid #536a82;transition:color .18s var(--ease-out),border-color .18s var(--ease-out)}
.task-position button[aria-current]{color:#d7f52a;border-color:#d7f52a}
.task-position button:hover{color:#fff}
.tandem-copy{top:39%;width:42%;max-width:660px}
.tandem-copy p{font-size:clamp(18px,1.48vw,26px);line-height:1.46!important;margin-bottom:22px}
.body-tandem h2{top:15%}.tandem-talk{bottom:12%}
@media(min-width:1500px){.request-field{inset:26% 14% 18%}.request.mail{width:270px;height:260px}.request.bill{width:280px;height:280px}.request.date{width:220px;height:230px}}
@media(max-width:700px){
 .request-field{inset:28% 8% 20%}.request.mail{width:135px;height:135px;left:-3%;top:4%}.request.call{width:105px;height:110px;left:1%;top:55%}.request.date{width:110px;height:115px;left:55%;top:-2%}.request.bill{width:140px;height:150px;right:0;top:36%}.request.review{width:110px;height:110px;left:36%;top:76%}
 .request>span:last-child{font-size:14px;left:30%;top:58%}.request.call>span:last-child{left:35%}.request.review>span:last-child{left:20%}
 .task-position{left:24px;right:24px;top:30%;gap:2px;justify-content:space-between}.task-position button{min-width:44px}
 .task-river{left:24px;top:39%;width:calc(100% - 48px);height:150px}.task-river span{font-size:36px}.task-river small{font-size:17px;max-width:28ch}
 .task-permission{left:24px;bottom:13%;font-size:14px;max-width:30ch}
 .body-tandem h2{top:12%;font-size:43px}.tandem-copy{top:31%;left:24px;width:calc(100% - 48px)}.tandem-copy p{font-size:16px;margin-bottom:17px;max-width:33ch}.tandem-talk{bottom:13%}
}
.motion-paused .request img{transform:none!important}
@media(prefers-reduced-motion:reduce){.request-field{perspective:none}.request{filter:none!important;transform:none!important}.request img{transform:none!important}.task-river p{transition:none}}

