/* Camera "money gun": pixel camera that follows the pointer, pixel flash burst, disposable prints. Used by any
   [data-shoot] section (creators hero, production network closing section). Behaviour in /js/camera.js. */
[data-shoot] { position: relative; overflow: hidden; isolation: isolate; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.cr-prints { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Disposable camera prints: even white border, warm film grade baked into the image, orange date stamp */
.cr-print { position: absolute; left: 0; top: 0; padding: 7px; background: #FFFEFB; border-radius: 3px;
  box-shadow: 0 16px 34px -14px rgba(27, 27, 27, .45), 0 0 0 1px rgba(27, 27, 27, .04); will-change: transform; }
.cr-print img { display: block; width: 170px; height: auto; border-radius: 1px; }
.cr-print.tall img { width: 124px; }
.cr-date { position: absolute; right: 14px; bottom: 11px; font: 700 11px/1 "Courier New", ui-monospace, monospace; letter-spacing: .06em; color: #FF8A2A;
  text-shadow: 0 0 4px rgba(255, 120, 30, .7); }


/* The camera is the cursor: JS moves the wrapper so the lens front (--mx, --my) sits on the pointer, then rotates and
   mirrors it around that point. It never takes clicks, so the button and links under it still work. */
.cr-cam { --mx: 50%; --my: 57.7%; position: absolute; z-index: 3; left: 0; top: 0; width: 204px; padding: 0; background: none; border: 0; pointer-events: none; will-change: transform; }
.cr-cam { transition: opacity .08s ease-out; }
[data-shoot].cam-off .cr-cam { opacity: 0; transition-duration: .18s; }
[data-shoot].cam-off { cursor: auto; }
.cr-cam:focus-visible { outline: 2px solid var(--purple); outline-offset: 6px; border-radius: 16px; }
.cr-cam-body { position: relative; display: block; transform-origin: var(--mx) var(--my); will-change: transform; filter: drop-shadow(0 6px 0 rgba(27, 27, 27, .14)); }
.cr-cam-body svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cr-cam-body.kick { animation: crKick .14s ease-out; }
@keyframes crKick { 40% { translate: -8px 2px; } }
/* Pixel flash burst: beside the camera at its flash window, hidden until a shot; each shot flashes it in steps */
.cr-spark { position: absolute; left: 100%; top: 26%; width: 84px; height: 84px; margin: -42px 0 0 -10px; overflow: visible; pointer-events: none; opacity: 0; image-rendering: pixelated; }
.cr-spark.on { animation: crSpark .26s steps(3, end); }
@keyframes crSpark { 0% { opacity: 1; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.2); } }
/* Held down: the burst stays up and flickers in pixel steps until the mouse is released */
.cr-spark.firing { opacity: 1; animation: crSparkHold .22s steps(2, jump-none) infinite; }
@keyframes crSparkHold { 0% { transform: scale(.85) rotate(0deg); } 100% { transform: scale(1.15) rotate(45deg); } }
/* Fine pointers: the camera stands in for the cursor across the hero */
@media (hover: hover) and (pointer: fine) { [data-shoot] { cursor: none; } [data-shoot] a, [data-shoot] button { cursor: pointer; } }
.cr-cam-hint { position: absolute; z-index: 3; left: 50%; bottom: 56px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--label); transition: opacity .4s; pointer-events: none; }
.cr-cam-hint svg { width: 16px; height: 16px; }
.cr-cam-hint.gone { opacity: 0; }

@media (max-width: 960px) {
  .cr-cam { width: 150px; }
  .cr-cam-hint { bottom: 24px; }
  .cr-print { padding: 5px; }
  .cr-print img { width: 118px; }
  .cr-print.tall img { width: 86px; }
  .cr-date { right: 10px; bottom: 8px; font-size: 9px; }
}

/* Production network closing section: taller so there is room to shoot around the copy */
/* Runs down over the footer's white lip (with the lip's rounded corners) so the camera and prints clip at the black footer */
.pn-shoot { padding-top: 160px; padding-bottom: 233px; margin-bottom: -34px; z-index: 2; border-radius: 0 0 32px 32px; }
@media (max-width: 960px) { .pn-shoot { padding-bottom: 220px; margin-bottom: -21px; border-radius: 0 0 20px 20px; } }
.pn-shoot .h2, .pn-shoot .lead, .pn-shoot .hero-actions { position: relative; z-index: 1; }
/* Prints may leave the section through the top; sides and bottom stay clipped (clip-path), the camera stays inside its own clip */
.pn-shoot { overflow-x: clip; overflow-y: visible; }
.pn-shoot .cr-prints { clip-path: inset(-100vh 0 0 0); }
.cr-camclip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 3; }