/* INVITO photobooth: the special section (Round 15). Three variants in
   templates/photobooth.html, one shown (assets/sp-old/sp.js). Everything here is
   scoped under .pbsp so the template's own rules stay untouched. */
.pbsp{position:relative;width:100%;text-align:center;color:var(--cream);
  --pbx:cubic-bezier(.16,1,.3,1);padding:0 0 clamp(6px,2vw,14px)}
.pbsp>.rule{margin-bottom:clamp(14px,3.6vw,22px)}
.pbsp-h{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}
.pbsp-tg{font:400 clamp(26px,7.4vw,31px)/1.05 var(--f-script);color:var(--champ);direction:ltr;letter-spacing:0}
.pbsp-t{font:400 clamp(28px,7.8vw,36px)/1.12 var(--f-he);color:var(--cream);letter-spacing:0;text-wrap:balance;margin:0}
html[lang=ru] .pbsp-t,html[lang=en] .pbsp-t{font-family:var(--f-serif);font-weight:500}
.pbsp .lm{display:block;overflow:hidden;padding-bottom:.08em}
.pbsp .lm>span{display:block}
.pbsp-st{position:relative;margin:0 auto;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pbsp-sw{position:relative;display:grid;min-height:66px;margin-top:6px}
.pbsp-sw>*{grid-area:1/1;align-self:start}
.pbsp-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;
  font:400 clamp(16px,4.4vw,18px)/1.35 var(--f-he);color:var(--champ)}
.pbsp-cta i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--champ);animation:pbspBl 1.4s ease-in-out infinite}
@keyframes pbspBl{50%{opacity:.25}}
.pbsp-ok{visibility:hidden;opacity:0;font:400 16px/1.45 var(--f-he);color:rgba(243,233,220,.78)}
.pbsp-ok b{display:block;font:400 clamp(21px,5.8vw,25px)/1.25 var(--f-he);color:var(--cream)}
.pbsp-ok small{display:block;margin-top:2px;font-size:14px;color:rgba(216,203,180,.7)}
.pbsp-lnk{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;background:none;border:0;cursor:pointer;
  font:400 15px/1 var(--f-he);color:var(--champ);text-decoration:underline;text-decoration-color:rgba(216,203,180,.45);text-underline-offset:5px}
.pbsp button:focus-visible,.pbsp [role=button]:focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:10px}

/* the machine, shared by a and c: the template's own silver plate */
.pbsp-m{position:absolute;left:50%;top:0;width:var(--mw);height:calc(var(--mw) / .5967);transform:translateX(-50%)}
.pbsp-m>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pbsp-lt{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,250,236,.55) 50%,rgba(255,250,236,0) 62%) 100% 0/300% 100% no-repeat;
  -webkit-mask:url(/assets/photobooth/machine.webp) center/100% 100% no-repeat;mask:url(/assets/photobooth/machine.webp) center/100% 100% no-repeat}
.pbsp-fl{position:absolute;left:10%;right:10%;top:12%;bottom:12%;border-radius:42%;pointer-events:none;opacity:0;z-index:5;
  background:radial-gradient(closest-side,#fff,rgba(255,255,255,.85) 45%,rgba(255,255,255,0))}
.pbsp-press{position:absolute;left:50%;top:89.9%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:6;cursor:pointer;background:none;border:0;padding:0}
.pbsp-press::before{content:'';position:absolute;inset:20%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9);animation:pbspPr 1.9s var(--pbx) infinite}
.pbsp-press.used::before{animation:none;opacity:0}
@keyframes pbspPr{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.8);opacity:0}}
.pbsp-slot{position:absolute;left:21%;width:58%;top:28.6%;height:1.6%;border-radius:4px;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,236,200,.9),rgba(255,236,200,0))}

/* prints: one element that leaves the slot already printed and is then pulled out */
.pbsp-pr{position:absolute;left:50%;z-index:8;visibility:hidden;background:linear-gradient(180deg,#fbf8f2,#efe8dc);
  transform-origin:50% 100%;will-change:transform}
.pbsp-pr::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(90,60,40,.12)}
.pbsp-sh{position:absolute;left:50%;z-index:7;opacity:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(8,0,3,.62),rgba(8,0,3,0))}
.pbsp-stub{font:500 10.5px/1 var(--f-serif);letter-spacing:.16em;color:#4a3d34;text-align:center;padding:10px 4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir=rtl] .pbsp-stub{font-family:var(--f-he);letter-spacing:.04em;font-size:12px}

/* a: the mission strip */
.pbsp-a .pbsp-st{width:min(340px,100%)}
.pbsp-a .pbsp-pr{width:172px;padding:8px 8px 0}
.pbsp-fr{position:relative;aspect-ratio:4/3;margin-bottom:6px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(95% 95% at 50% 38%,#43120f 0,#1d0609 70%,#100204)}
.pbsp-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.pbsp-fr>div{position:relative;padding:0 10px}
.pbsp-fr svg{width:22px;height:22px;margin:0 auto 6px;fill:none;stroke:var(--champ);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;display:block}
.pbsp-fr b{display:block;font:400 17px/1.25 var(--f-he);color:var(--cream);text-wrap:balance}
html[lang=en] .pbsp-fr b,html[lang=ru] .pbsp-fr b{font-family:var(--f-serif);font-weight:600;font-size:16.5px}

/* the enamel plaque on the plate in a: names, a count, three bulbs that light per flash */
.pbsp-plq{position:absolute;left:18%;right:18%;top:41%;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.pbsp-plq span{font:400 clamp(17px,4.8vw,21px)/1.2 var(--f-he);color:#5b4636;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbsp-plq em{font:600 11px/1 var(--f-serif);font-style:normal;letter-spacing:.3em;color:#8a7867;direction:ltr}
.pbsp-plq p{display:flex;gap:12px;margin:2px 0 0}
.pbsp-bulb{position:relative;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffaf2,#d9cfc0 60%,#9c9284);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 3px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.6)}
.pbsp-bulb b{position:absolute;inset:0;border-radius:50%;opacity:0;background:radial-gradient(circle at 45% 40%,#fffbe6,#ffd36b 50%,#c7871c);
  box-shadow:0 0 0 4px rgba(255,214,120,.18),0 0 0 9px rgba(255,214,120,.08)}

/* b: shake the photo */
.pbsp-b .pbsp-st{width:min(340px,100%);touch-action:none}
.pbsp-line{position:absolute;left:-24px;right:-24px;top:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(216,203,180,.6) 20%,rgba(216,203,180,.6) 80%,transparent)}
.pbsp-card{position:absolute;left:50%;top:20px;width:264px;margin-left:-132px;padding:12px 12px 0;transform-origin:50% 0;cursor:grab;
  background:linear-gradient(180deg,#fbf8f3,#efe8dc)}
.pbsp-cs{position:absolute;left:50%;top:44px;width:300px;height:330px;margin-left:-150px;pointer-events:none;transform-origin:50% 0;
  background:radial-gradient(48% 46% at 50% 54%,rgba(8,0,3,.55),rgba(8,0,3,0))}
.pbsp-clip{position:absolute;left:50%;top:-15px;width:28px;height:32px;margin-left:-14px;border-radius:5px 5px 2px 2px;z-index:2;
  background:linear-gradient(90deg,#7d766c,#f4f0ea 42%,#cfc8bd 58%,#8e877c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.6)}
.pbsp-ph{position:relative;width:240px;height:180px;overflow:hidden;background:#1d1a18}
.pbsp-ph canvas,.pbsp-ph>i,.pbsp-ph>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.pbsp-ph>img{object-fit:cover}
.pbsp-fog{background:radial-gradient(120% 100% at 50% 40%,#e9e2d5,#cbc2b2)}
.pbsp-tint{background:linear-gradient(160deg,#4a2a1e,#2a1a14);mix-blend-mode:multiply;opacity:0}
.pbsp-gl{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%)}
.pbsp-cap{height:62px;display:grid;place-items:center;font:400 24px/1 var(--f-script);color:#5b4636;white-space:nowrap;overflow:hidden}
html[dir=rtl] .pbsp-cap,html[lang=ru] .pbsp-cap{font:400 20px/1 var(--f-he)}
.pbsp-cap span{opacity:0}
.pbsp-meter{position:absolute;left:50%;bottom:4px;width:180px;margin-left:-90px;height:2px;background:rgba(216,203,180,.2);border-radius:2px;overflow:hidden}
.pbsp-meter i{display:block;height:100%;width:100%;background:var(--champ);transform-origin:right;transform:scaleX(0)}
html[dir=ltr] .pbsp-meter i{transform-origin:left}
.pbsp-shk{position:absolute;left:50%;top:150px;width:330px;margin-left:-165px;display:flex;justify-content:space-between;pointer-events:none;z-index:3}
.pbsp-shk svg{width:26px;height:26px;fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}

/* c: catch the kiss */
.pbsp-c .pbsp-st{width:min(340px,100%)}
.pbsp-live{position:absolute;left:15%;width:70%;top:35.5%;aspect-ratio:4/3;z-index:2;overflow:hidden;background:#0c0a09;cursor:pointer;
  box-shadow:0 0 0 2px #2b2622,0 0 0 3px rgba(255,255,255,.35),inset 0 0 0 1px rgba(0,0,0,.5)}
.pbsp-live img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform-origin:50% 45%}
.pbsp-live img.on{opacity:1}
.pbsp-live::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(90% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.5))}
.pbsp-on{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;z-index:3;opacity:0;pointer-events:none}
.pbsp-blk{position:absolute;inset:0;background:#0c0a09;z-index:2;pointer-events:none}
.pbsp-rec{position:absolute;left:15%;right:15%;top:69.5%;z-index:2;display:flex;align-items:center;justify-content:space-between;direction:ltr;pointer-events:none}
.pbsp-rec span{display:flex;align-items:center;gap:6px;font:600 11px/1 var(--f-serif);letter-spacing:.22em;color:#5b4636}
.pbsp-rec span i{width:7px;height:7px;border-radius:50%;background:#b0182f;animation:pbspBl 1s steps(2) infinite}
.pbsp-lamp{position:relative;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffaf2,#d9cfc0 60%,#9c9284);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 3px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.6)}
.pbsp-lamp svg{position:absolute;left:7px;top:8px;width:16px;height:15px;fill:#8d7f72}
.pbsp-lamp b{position:absolute;inset:0;border-radius:50%;opacity:0;background:radial-gradient(circle at 45% 40%,#ffd9dc,#e0485d 55%,#9e1a30)}
.pbsp-lamp b svg{fill:#fff4f4}
.pbsp-lamp em{position:absolute;left:-26px;top:-26px;width:82px;height:82px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,92,118,.55),rgba(255,92,118,0))}
.pbsp-c .pbsp-pr{width:min(250px,74%);padding:10px 10px 0}
.pbsp-c .pbsp-pr img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pbsp-hit{position:absolute;right:-12px;top:-14px;width:58px;height:58px;z-index:2;opacity:0}
html[dir=ltr] .pbsp-hit{right:auto;left:-12px}
.pbsp-note{display:block;margin-top:4px;font-size:13.5px;color:rgba(216,203,180,.66)}

/* Aref Ruqaa is a display script: small Arabic lines read better in the system face */
html[lang=ar] .pbsp-ok small,html[lang=ar] .pbsp-note,html[lang=ar] .pbsp-stub{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.pbsp-cta i,.pbsp-press::before,.pbsp-rec span i{animation:none}}