/* The ShootLight phone rig, copied verbatim from shootlightapp.com's hero, with that page's own
   app screenshots in public/img/shootlight. Only the scaling at narrow widths is ours. */
/* HERO phone rig (reused composition, fixed-size so overlap is stable) */
  .sslw-stage {position: relative; min-width: 0; height: 620px; perspective: 1500px; display: flex; align-items: center; justify-content: center;}
.sslw-rig {position: relative; width: 500px; height: 600px; transform-style: preserve-3d; will-change: transform; transition: transform .12s ease-out; --rig-scale: 1;}
.sslw-rig::after {content: ""; position: absolute; z-index: 0; bottom: 4px; left: 50%;
    width: 340px; height: 60px; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 70%);
    filter: blur(8px); pointer-events: none;}
.sslw-phone {--w: 262px; position: absolute; width: var(--w); height: calc(var(--w) * 2.0533);
    border-radius: calc(var(--w) * 0.16); padding: calc(var(--w) * 0.037);
    background: linear-gradient(150deg, #3a3f49 0%, #16181d 44%, #08090c 100%);
    transform-origin: center;}
.sslw-phone::before {content: ""; position: absolute; inset: calc(var(--w) * 0.01); border-radius: calc(var(--w) * 0.14);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.07) inset; pointer-events: none; z-index: 6;}
.sslw-screen {position: relative; height: 100%; border-radius: calc(var(--w) * 0.127); overflow: hidden; background: #05070c; box-shadow: 0 0 0 2px #000 inset;}
.sslw-screen img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;}
.sslw-screen::after {content: ""; position: absolute; inset: 0; z-index: 8;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.05; mix-blend-mode: overlay; pointer-events: none;}
.sslw-island {position: absolute; top: calc(var(--w) * 0.05); left: 50%; transform: translateX(-50%);
    width: calc(var(--w) * 0.327); height: calc(var(--w) * 0.09); background: #000; border-radius: calc(var(--w) * 0.05); z-index: 9;}
.sslw-phone--front {--w: 262px; z-index: 4; left: 58px; bottom: 30px;
    transform: rotateY(-14deg) rotateX(3deg) rotateZ(1deg) translateZ(55px);
    box-shadow: 0 2px 0 1px rgba(255,255,255,0.10) inset, 0 46px 92px rgba(0,0,0,0.5), -34px 34px 90px rgba(212,175,87,0.14);}
.sslw-phone--rear {--w: 196px; z-index: 2; right: 26px; top: 2px;
    transform: rotateY(-13deg) rotateX(3deg) rotateZ(2.5deg) translateZ(-45px);
    box-shadow: 0 2px 0 1px rgba(255,255,255,0.08) inset, 0 30px 70px rgba(0,0,0,0.5);}
.sslw-phone--rear::after {content: ""; position: absolute; inset: 0; z-index: 10; border-radius: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(11,18,40,0.28)); pointer-events: none;}
.sslw-phone--back {--w: 168px; z-index: 1; left: -58px; top: 96px;
    transform: rotateY(-16deg) rotateX(3deg) rotateZ(-4deg) translateZ(-70px);
    box-shadow: 0 2px 0 1px rgba(255,255,255,0.07) inset, 0 26px 60px rgba(0,0,0,0.5);}
.sslw-phone--back::after {content: ""; position: absolute; inset: 0; z-index: 10; border-radius: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(11,18,40,0.42)); pointer-events: none;}
.sslw-rig {--rig-scale: 0.88;}
.sslw-stage {height: 560px;}
.sslw-stage {order: 2;}
.sslw-stage {height: 540px;}
.sslw-rig {--rig-scale: 0.82;}
.sslw-stage {height: 430px;}
.sslw-rig {--rig-scale: 0.62;}
.sslw-stage {height: 380px;}
.sslw-rig {--rig-scale: 0.54;}
.sslw-rig {transition: none !important;}

/* ours: fit the rig to this site's column */
.sslw-stage { height: auto; padding: 10px 0; }
.sslw-rig { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--rig-fit, 1)); transform-origin: center center; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 1240px) { .sslw-rig { --rig-fit: .86; } .sslw-stage { height: 560px; } }
@media (max-width: 1040px) { .sslw-rig { --rig-fit: .72; } .sslw-stage { height: 480px; } }
@media (max-width: 760px) { .sslw-rig { --rig-fit: .58; } .sslw-stage { height: 400px; } }
@media (prefers-reduced-motion: reduce) { .sslw-rig { transition: none; } }