/* Photo to AI: real iOS frame animation with persistent white touch indicator */
#pg-ios-photo-ai-site .pg-photo-phone-screen{position:relative;overflow:hidden;background:#0a0c12}
#pg-ios-photo-ai-site .pg-demo-real-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
#pg-ios-photo-ai-site .pg-photo-tap{position:absolute!important;z-index:40!important;display:block!important;width:11px!important;height:11px!important;box-sizing:border-box;border:1px solid #fff!important;border-radius:50%!important;background:#fff!important;opacity:1!important;pointer-events:none!important;transform:translate(-50%,-50%)!important;box-shadow:0 0 0 2px #ffffff38,0 1px 5px #000a!important;transition:left .55s ease,top .55s ease!important;animation:none!important}
#pg-ios-photo-ai-site .pg-photo-tap.pg-demo-click{animation:pgRealTap .55s ease .53s 1!important}
@keyframes pgRealTap{0%,100%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(.72)}}
#pg-ios-photo-ai-site .pg-demo-chatgpt{position:absolute;inset:0;background:#000;color:white;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:center;overflow:hidden}
#pg-ios-photo-ai-site .pg-demo-chat-status{padding:17px 12px 10px;text-align:left;font-size:13px}
#pg-ios-photo-ai-site .pg-demo-browser-app{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;font-size:14px}
#pg-ios-photo-ai-site .pg-demo-browser-app span{background:#50b8ff;border-radius:22px;padding:6px 17px;color:white}
#pg-ios-photo-ai-site .pg-demo-chat-bar{display:flex;align-items:center;justify-content:space-between;margin:14px 12px;font-size:15px}
#pg-ios-photo-ai-site .pg-demo-chat-bar span{padding:9px 12px;background:#202020;border-radius:22px;font-size:12px}
#pg-ios-photo-ai-site .pg-demo-chat-question{position:absolute;top:43%;left:0;right:0;font-size:clamp(16px,4vw,23px)}
#pg-ios-photo-ai-site .pg-demo-chat-input{position:absolute;top:54%;left:4%;right:4%;background:#252525;border-radius:22px;padding:12px;color:#f8f8f8}
#pg-ios-photo-ai-site .pg-demo-chat-line{display:flex;gap:8px;align-items:center;font-size:13px;text-align:left;min-height:29px}
#pg-ios-photo-ai-site .pg-demo-chat-line>div{flex:1}
#pg-ios-photo-ai-site .pg-demo-attachments{text-align:left}
#pg-ios-photo-ai-site .pg-demo-attachment{width:65px;height:105px;object-fit:cover;border-radius:9px;margin-bottom:9px;border:1px solid #666}
#pg-ios-photo-ai-site .pg-demo-chat-bottom{position:absolute;bottom:3%;left:20%;right:20%;border:1px solid #444;border-radius:24px;padding:9px;background:#151515;font-size:13px}
@media(prefers-reduced-motion:reduce){#pg-ios-photo-ai-site .pg-photo-tap{transition:none!important;animation:none!important}}

/* Deliberate cursor movement to match the long-form reference demo. */
#pg-ios-photo-ai-site .pg-photo-tap{
 transition:left 1.1s cubic-bezier(.24,.62,.22,1),top 1.1s cubic-bezier(.24,.62,.22,1)!important;
}
#pg-ios-photo-ai-site .pg-photo-tap.pg-demo-click{animation:pgRealTap .6s ease 1!important}
#pg-ios-photo-ai-site .pg-demo-typing{
 position:absolute;left:8%;top:54%;width:80%;z-index:12;text-align:left;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:#f7f8fa;font-size:12px;line-height:1.5;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){#pg-ios-photo-ai-site .pg-photo-tap{transition:none!important}}
/* Keep touch cursor mounted while screenshot frames change. */
#pg-ios-photo-ai-site .pg-demo-stage-viewport{position:absolute;inset:0;overflow:hidden}
#pg-ios-photo-ai-site .pg-demo-stage-viewport .pg-demo-real-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
#pg-ios-photo-ai-site .pg-demo-stage-viewport .pg-demo-chatgpt{position:absolute;inset:0}

/* Cursor movement is controlled by smooth curved Web Animations, not simultaneous CSS transitions. */
#pg-ios-photo-ai-site .pg-photo-tap{
  transition:none!important;
  width:11px!important;height:11px!important;opacity:1!important;
  will-change:left,top,transform;
}
#pg-ios-photo-ai-site .pg-photo-tap.pg-demo-click{
  animation:pgCursorPress .44s cubic-bezier(.2,.6,.2,1) 1!important;
}
@keyframes pgCursorPress{
  0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 2px #ffffff38,0 1px 5px #000a}
  45%{transform:translate(-50%,-50%) scale(.8);box-shadow:0 0 0 5px #ffffff4a,0 1px 5px #000a}
}
@media(prefers-reduced-motion:reduce){#pg-ios-photo-ai-site .pg-photo-tap{animation:none!important;transition:none!important}}

/* Add context textbox in frame 10 spans approximately x=8–92%, y=60–72%. */
#pg-ios-photo-ai-site .pg-demo-typing{
 left:10.5%!important;top:61.6%!important;width:79%!important;
 padding:0!important;text-align:left!important;line-height:1.4!important;
 color:#f6f7f9!important;font-size:12px!important;
}

/* Cover the screen-recording indicator in every real demo frame, including the
   Photo Library's embedded screenshot, without covering the white tap cursor. */
#pg-ios-photo-ai-site .pg-demo-stage-viewport::after{
  content:"";position:absolute;left:50%;top:2.2%;width:39%;height:4.3%;
  transform:translateX(-50%);background:#000;border-radius:999px;
  z-index:25;pointer-events:none;
}

/* Clean black Dynamic Island covers recording indicator in all demo screenshot frames. */
#pg-ios-photo-ai-site .pg-photo-phone-screen::after{content:"";position:absolute;top:2.15%;left:50%;transform:translateX(-50%);width:37%;height:4.15%;border-radius:999px;background:#000;z-index:25;pointer-events:none}