/* Homepage hero motion: scattered work pulled into Noveo, 3D screen on scroll, live notifications */
.hero-shot{perspective:1600px}
.hero-shot .tilt{position:relative;transform-style:preserve-3d;transform-origin:50% 0;will-change:transform;
  transform:rotateX(calc(var(--tx,0) * 1deg)) rotateY(calc(var(--ty,0) * 1deg)) scale(var(--ts,1));transition:transform .25s ease-out}
.hero-shot .frame{position:relative;overflow:hidden;border-radius:18px;transition:filter .9s ease,opacity .9s ease,box-shadow .9s ease}
.hero-shot .frame::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent,rgba(255,246,168,.28),transparent);transform:skewX(-12deg)}
.hm .hero-shot .frame{filter:blur(6px) saturate(.4);opacity:.35}
.hm.lit .hero-shot .frame{filter:none;opacity:1;box-shadow:0 0 0 2px rgba(247,220,20,.9),0 0 90px rgba(247,220,20,.35)}
.hm.lit .hero-shot .frame::after{animation:shine 1.3s ease .15s}
@keyframes shine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
.hm.done .hero-shot .frame{box-shadow:0 0 0 1px rgba(247,220,20,.25),0 40px 120px rgba(0,0,0,.6);transition:box-shadow 1.6s ease}
.spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,30%),rgba(247,220,20,.09),transparent 70%)}
.hero:hover .spot{opacity:1}
.bits{position:absolute;inset:0;pointer-events:none;z-index:2}
.bit{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;background:rgba(28,28,32,.92);border:1px solid #34343b;
  color:#E4E4E7;font:600 13.5px var(--f);white-space:nowrap;box-shadow:0 14px 40px rgba(0,0,0,.45);opacity:0;
  transform:rotate(var(--r)) scale(.85);translate:calc(var(--mx,0) * var(--z) * 1px) calc(var(--my,0) * var(--z) * 1px);transition:translate .4s ease-out}
.bits.go .bit{animation:bitIn .8s cubic-bezier(.2,.7,.2,1) var(--d) forwards, bitFloat 3.4s ease-in-out calc(var(--d) + .8s) infinite alternate}
.bit i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--pri-s);color:var(--pri);font-style:normal;font-size:15px}
.bit small{display:block;font-weight:500;color:#8B8B96;font-size:11.5px;margin-top:1px}
@keyframes bitIn{to{opacity:1;transform:rotate(var(--r)) scale(1)}}
@keyframes bitFloat{from{margin-top:0}to{margin-top:-12px}}
.hm.pull .bit{animation:none;opacity:0;translate:0 0;transform:translate(var(--px),var(--py)) rotate(0) scale(.2);
  transition:transform .85s cubic-bezier(.6,0,.3,1) var(--o),opacity .5s ease calc(var(--o) + .4s)}
.toasts{position:absolute;left:-26px;top:9%;z-index:4;display:flex;flex-direction:column;gap:10px;width:300px;pointer-events:none}
.toast{display:flex;gap:11px;align-items:center;padding:11px 14px;border-radius:14px;background:rgba(24,24,27,.94);backdrop-filter:blur(8px);
  border:1px solid #34343b;box-shadow:0 18px 50px rgba(0,0,0,.55);color:#F4F4F5;font:600 13.5px/1.35 var(--f);
  animation:tIn .55s cubic-bezier(.2,.8,.2,1.2) both}
.toast i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--pri);color:#141416;font-style:normal;font-size:15px;font-weight:800}
.toast small{display:block;color:#8B8B96;font-weight:500;font-size:12px}
.toast.out{animation:tOut .45s ease forwards}
@keyframes tIn{from{opacity:0;transform:translateX(-30px) scale(.92)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}
@media (max-width:760px){.toasts{left:8px;top:auto;bottom:22%;width:230px}.toast{font-size:12.5px;padding:9px 11px}}
@media (prefers-reduced-motion:reduce){.bits,.spot{display:none}.hero-shot .tilt{transform:none!important;transition:none}.hm .hero-shot .frame{filter:none;opacity:1}.toast{animation:none}}