/* Outcome Intelligence — video-as-landing (Portal Studio "Live Mask" modality).
   A loading icon, then snip1 plays once, then snip2 loops. The video is the whole
   page: fixed portrait aspect, centered, black around. Two segment-carved button
   hotspots (Get in touch / Signal) ride the video with glow + spring + bloom. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: 'Inter Tight', system-ui, sans-serif; }

#stage { position: fixed; inset: 0; background: #000; display: grid; place-items: center; overflow: hidden; }

/* The frame is the video's exact aspect (608:1080). It contains within the viewport:
   full height on a tall desktop (black bars left/right), clamped by width on mobile. */
#frame {
  position: relative;
  aspect-ratio: 608 / 1080;
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100vw;
}
#frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;                /* frame IS 608:1080, so fill == no distortion */
  opacity: 0;
  transition: opacity .45s ease;
  background: #000;
}
#vidIntro { z-index: 2; }
#vidLoop  { z-index: 1; }

#overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }

#spinner { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; transition: opacity .4s ease; }
#spinner.gone { opacity: 0; pointer-events: none; }
.spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: #4ef08a; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the segment-carved buttons */
.glow { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.glow.git { fill: #5ef08a; filter: drop-shadow(0 0 16px #35d07a) drop-shadow(0 0 34px #22c55e); }
.glow.sig { fill: #eafff2; filter: drop-shadow(0 0 14px #bafcd2) drop-shadow(0 0 30px #6ee7a8); }
.hit { fill: transparent; pointer-events: auto; cursor: pointer; transform-box: fill-box; transform-origin: center; }
.bloom { fill: url(#bloomGrad); pointer-events: none; }