/* UGC ads: a giant iPhone leaning against the studio's concrete wall like a floor mirror, beside a doorway niche
   (wall-door.webp). Measured on the 1536 x 1024 plate (assets/architecture/provenance.json): the niche's lit edge runs
   786-1044 x 166-844, the column of form-tie holes left of it sits at x 717 (y 248, 423, 660, 789), the wall meets the
   floor at y 865. The phone stands on the floor just proud of the wall (base y 882), covers the lower three tie holes,
   and its right edge reaches half way across the lit opening (x 915); it tilts back 11 degrees against the wall. The
   headline is lettered onto the bare wall (multiplied into the concrete) with the SNAP button set into the concrete below
   it; on phones the headline sits above and the crop centres on the phone and the doorway. */
.ugc-window{position:relative;container-type:inline-size}
.ugc-stage{container-type:inline-size;overflow:hidden}
.ugc-sign{position:absolute;z-index:1;left:5.4cqw;top:9.6cqw;width:40cqw;color:#1b2420;mix-blend-mode:multiply;pointer-events:none}
.ugc-sign .eyebrow{font-size:max(10px,.95cqw);letter-spacing:.14em;margin:0 0 1.7cqw;opacity:.8}
.ugc-sign h2{font-size:5.1cqw;line-height:.98;letter-spacing:-.045em;margin:0}
.ugc-sign h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.025em}

.ugc-lean{position:absolute;left:42.96%;bottom:13.87%;height:54%;aspect-ratio:9/19.5;isolation:isolate}
/* Its shadow on the wall: the light rakes in from the right, and the base stands off the wall more than the top. */
.ugc-cast{position:absolute;inset:3% 4% 0 0;border-radius:12%/5.5%;background:#1a140f;opacity:.58;filter:blur(.9cqw);transform-origin:50% 0;transform:translateX(-12%) skewX(-10deg)}
/* Where it meets the polished floor. */
.ugc-lean:after{content:'';position:absolute;z-index:-1;left:-5%;right:-9%;bottom:-2.4%;height:4.6%;border-radius:50%;background:radial-gradient(closest-side,#000000c0,#0000);filter:blur(.35cqw)}
.ugc-phone{position:absolute;inset:0;box-sizing:border-box;padding:.44cqw;border-radius:14%/6.45%;transform-origin:50% 100%;transform:perspective(130cqw) rotateX(11deg);
  background:linear-gradient(150deg,#48484c,#141416 38%,#0c0c0d 62%,#2e2e32);
  box-shadow:inset 0 0 0 .14cqw #a3a3a9,inset 0 0 0 .27cqw #1a1a1c,inset -.2cqw 0 .55cqw -.1cqw #ffc27a66,.55cqw 0 1.5cqw -.5cqw #ffb45e45,0 .9cqw 1.2cqw -.7cqw #000e,0 2.4cqw 3.2cqw -1.6cqw #0009}
/* The side buttons: action and volume on the left, the side button on the right. */
.ugc-phone:before,.ugc-phone:after{content:'';position:absolute;width:.2cqw;border-radius:.12cqw;background:#5c5c61}
.ugc-phone:before{left:-.15cqw;top:17%;height:19%;background:linear-gradient(#5c5c61 0 22%,transparent 22% 34%,#5c5c61 34% 64%,transparent 64% 72%,#5c5c61 72%)}
.ugc-phone:after{right:-.15cqw;top:26%;height:10%}
.ugc-screen{position:relative;height:100%;overflow:hidden;border-radius:12.6%/5.8%;background:#000;isolation:isolate;cursor:pointer}
.ugc-screen video{display:block;width:100%;height:100%;object-fit:cover}
.ugc-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,#ffffff17 0 20%,transparent 36%)}
.ugc-island{position:absolute;z-index:2;top:1.35%;left:50%;width:32%;height:4.3%;transform:translateX(-50%);border-radius:999px;background:#000}
/* Waiting for a tap (the browser refused to play): a play mark. */
.ugc-phone.is-waiting .ugc-screen:before{content:'';position:absolute;z-index:2;left:50%;top:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#000a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/55% no-repeat;backdrop-filter:blur(4px)}
.ugc-sound{position:absolute;z-index:3;right:5%;bottom:3%;display:flex;align-items:center;gap:.4em;padding:.45em .75em;border:0;border-radius:999px;background:#0000008c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 max(10px,.8cqw)/1 Mono,monospace;letter-spacing:.04em;cursor:pointer}
.ugc-sound svg{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ugc-sound .ugc-speaker{fill:currentColor;stroke:none}
.ugc-sound[aria-pressed="true"] .ugc-mute,.ugc-sound[aria-pressed="false"] .ugc-waves{display:none}
.ugc-sound:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* SNAP: a big matte disc set into the concrete under the headline, in a machined recess. It plays the ad on the phone in
   a loop (with sound: a deliberate press); while it plays, a warm ring glows like the doorway's cove light. */
.ugc-snap{--d:8.4cqw;position:absolute;z-index:2;left:5.5%;top:53.5%;width:var(--d);height:var(--d);padding:0;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 64% 28%,#4a4a45 0,#2c2c29 42%,#1c1c1a 100%);color:#ebe6dc;font-family:inherit;font-weight:600;font-size:calc(var(--d)*.155);letter-spacing:.24em;text-indent:.24em;
  box-shadow:0 0 0 calc(var(--d)*.07) #00000024,0 0 0 calc(var(--d)*.078) #ffffff1c,inset 0 calc(var(--d)*.03) calc(var(--d)*.05) #ffffff1f,inset 0 calc(var(--d)*-.04) calc(var(--d)*.07) #0000008c,0 calc(var(--d)*.05) calc(var(--d)*.11) #00000059;
  transition:transform .12s ease,box-shadow .35s ease;-webkit-tap-highlight-color:transparent}
.ugc-snap-face{display:block;text-shadow:0 -1px 0 #0009}
.ugc-snap:active{transform:translateY(calc(var(--d)*.015)) scale(.985)}
.ugc-snap[aria-pressed="true"]{box-shadow:0 0 0 calc(var(--d)*.07) #00000024,0 0 0 calc(var(--d)*.078) #ffb45e,0 0 calc(var(--d)*.25) #ffb45e80,inset 0 calc(var(--d)*.02) calc(var(--d)*.04) #ffffff14,inset 0 calc(var(--d)*-.03) calc(var(--d)*.06) #0000008c}
.ugc-snap:focus-visible{outline:2px solid #1b2420;outline-offset:calc(var(--d)*.12)}

@media(max-width:700px){
  .ugc-sign{position:static;width:auto;padding:0 var(--gutter) 22px;mix-blend-mode:normal}
  .ugc-sign .eyebrow{font-size:11px;margin-bottom:12px}
  .ugc-sign h2{font-size:clamp(40px,11.5vw,56px)}
  /* The phone and the doorway, centred and large: the plate is drawn 2.5x the screen's width around x 52%, so it shows
     x 32-72% of it; the SNAP button moves onto the concrete left of the phone. */
  .ugc-room .ugc-stage{width:250%;margin-left:-80%}
  .ugc-snap{--d:7.6cqw;left:calc(38.3% - var(--d)/2);top:44%}
  .ugc-sound{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.ugc-screen video{transition:none}}