/* popouts3: motion-graphic callouts that fly out of the scroll video panel into the empty space (desktop >= 1100px). */
.po-layer{position:fixed;inset:0;z-index:48;pointer-events:none;display:none}
@media (min-width:1100px){.po-layer{display:block}}
.po-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.po-line{fill:none;stroke:var(--po,#0ff);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);opacity:.9;filter:drop-shadow(0 0 6px var(--po,#0ff));transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1) var(--ld,.2s),opacity .4s}
.po-dot{fill:var(--po,#0ff);filter:drop-shadow(0 0 8px var(--po,#0ff));opacity:0;transition:opacity .3s .5s}
.po-on .po-line{stroke-dashoffset:0}
.po-on .po-dot{opacity:1}
.po-card{--po:#0ff;position:absolute;left:0;top:0;width:var(--w,240px);padding:12px 14px;color:#f4f4f4;background:linear-gradient(160deg,rgba(8,8,12,.88),rgba(18,10,34,.82));border:1px solid var(--po);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 28px color-mix(in srgb,var(--po) 35%,transparent),inset 0 0 22px color-mix(in srgb,var(--po) 10%,transparent);backdrop-filter:blur(8px);font-family:var(--sw-font-body,"Familjen Grotesk",sans-serif);opacity:0;transform:translate3d(var(--fx,200px),var(--fy,0),0) scale(.62) rotate(calc(var(--rot,0deg) + 8deg));transform-origin:100% 50%;transition:transform .26s cubic-bezier(.4,0,1,1),opacity .16s;pointer-events:none;will-change:transform,opacity}
.po-card::before{content:"";position:absolute;inset:-1px;pointer-events:none;border:1px solid transparent;border-top-color:#fff;border-left-color:#fff;width:14px;height:14px}
.po-on .po-card{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(var(--rot,0deg));pointer-events:auto;transition:transform .8s cubic-bezier(.16,1,.3,1) var(--d,0s),opacity .45s var(--d,0s)}
.po-card.po-float{animation:po-bob 5.5s ease-in-out infinite;animation-delay:calc(var(--d,0s) + 1s)}
@keyframes po-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.po-tag{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--po);font:700 .62rem/1 var(--sw-font-body,sans-serif);letter-spacing:.16em;text-transform:uppercase}
.po-tag i{width:7px;height:7px;border-radius:50%;background:var(--po);box-shadow:0 0 10px var(--po);animation:po-pulse 1.4s ease-in-out infinite}
@keyframes po-pulse{50%{opacity:.35;transform:scale(.7)}}
.po-h{margin:0;font:700 1.15rem/.95 var(--sw-font-display,"Bricolage Grotesque",sans-serif);letter-spacing:-.03em;text-transform:uppercase}
.po-p{margin:6px 0 0;color:#b8b3c7;font-size:.8rem;line-height:1.4}
.po-big{display:block;font:700 2.6rem/.9 var(--sw-font-display,sans-serif);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--po)}
.po-vid{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0 0 8px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0}
.po-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.po-vid span{position:absolute;right:6px;bottom:6px;padding:4px 7px;background:var(--po);color:#000;font:700 .58rem/1 var(--sw-font-body,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.po-pipe{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.po-step{flex:1;min-width:0;padding:7px 4px;text-align:center;border:1px solid rgba(255,255,255,.22);font:700 .56rem/1 var(--sw-font-body,sans-serif);letter-spacing:.1em;color:#f4f4f4;text-transform:uppercase;position:relative;overflow:hidden}
.po-step.act{border-color:var(--po);color:#000;background:var(--po);box-shadow:0 0 14px var(--po)}
.po-arr{color:var(--po);font-size:.7rem}
.po-type{display:block;min-height:2.4em;margin-top:9px;padding:8px;border:1px dashed rgba(255,255,255,.28);color:#f4f4f4;font:600 .72rem/1.35 ui-monospace,Menlo,monospace}
.po-type b{display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--po);animation:po-blink 1s steps(1) infinite}
@keyframes po-blink{50%{opacity:0}}
.po-sw{display:flex;gap:6px;margin-top:8px}
.po-sw span{flex:1;height:34px;position:relative;background:var(--c);animation:po-sw 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.18s)}
.po-sw span::after{content:attr(data-h);position:absolute;left:3px;bottom:2px;font:700 .5rem/1 ui-monospace,Menlo,monospace;color:#000;mix-blend-mode:difference;color:#fff}
@keyframes po-sw{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.35)}}
.po-split{display:block;font:700 1.5rem/.9 var(--sw-font-display,sans-serif);letter-spacing:-.04em;text-transform:uppercase}
.po-split em{font-style:normal;color:var(--po)}
.po-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.po-list a{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:30px;padding:0 9px;color:#f4f4f4;text-decoration:none;border:1px solid rgba(255,255,255,.2);font:700 .66rem/1 var(--sw-font-body,sans-serif);letter-spacing:.1em;text-transform:uppercase;transition:background-color .2s,color .2s,border-color .2s}
.po-list a:hover,.po-list a:focus-visible{background:var(--po);color:#000;border-color:var(--po)}
.po-mail{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;margin-top:8px;padding:0 10px;cursor:pointer;color:#000;background:var(--po);border:0;font:700 .7rem/1 var(--sw-font-body,sans-serif);letter-spacing:.06em}
.po-mail:focus-visible,.po-vid:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .po-card,.po-line,.po-dot{transition:opacity .3s!important;transform:none!important}
  .po-on .po-card{transform:none!important}
  .po-card.po-float,.po-tag i,.po-sw span,.po-type b{animation:none!important}
}