/* In-place image detail: no image-opening controls or modal affordances. */
body.pf-system.pf-unified[data-portfolio] :is(.zoom,.image-button) {
  cursor: default !important; display: block; overflow: hidden; padding: 0 !important;
  border: 0 !important; min-height: 0 !important; line-height: 0;
}
body.pf-system.pf-unified[data-portfolio] :is(.zoom,.image-button)::after { display: none !important; }
body.pf-system.pf-unified[data-portfolio] img[data-pf-image-zoom] {
  cursor: default; transform-origin: var(--image-x,50%) var(--image-y,50%);
  transition: scale .55s cubic-bezier(.2,.7,.2,1);
}
@media(hover:hover) and (pointer:fine) {
  body.pf-system.pf-unified[data-portfolio] img[data-pf-image-zoom]:hover { scale: 1.045; }
}
body.pf-system.pf-unified[data-portfolio] :is(.pf-image-frame,.screen-thumbnail) { overflow: hidden; }
@media(prefers-reduced-motion:reduce) {
  body.pf-system.pf-unified[data-portfolio] img[data-pf-image-zoom] { transition: none !important; }
}

/* Clipping contains artwork detail without adding scrollbars. */
body.pf-system.pf-unified[data-portfolio] .pf-image-frame { overflow: clip !important; }

/* Recorded evidence waits behind a project-colored play control until the visitor starts it. */
body.pf-system.pf-unified[data-portfolio] .pf-video-frame {
  position: relative; overflow: clip; background: #07090c; line-height: 0;
}
body.pf-system.pf-unified[data-portfolio] .pf-video-frame > video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #07090c;
}
body.pf-system.pf-unified[data-portfolio] .pf-video-host { position: relative; }
body.pf-system.pf-unified[data-portfolio] .pf-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 88px !important; height: 88px !important;
  min-height: 0 !important; margin: -44px 0 0 -44px !important; padding: 0 !important; border: 0 !important;
  border-radius: 50% !important; cursor: pointer; display: grid; place-items: center; line-height: 0;
  color: var(--project-on-color) !important; background: var(--project-color) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.22);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease, box-shadow .35s ease;
}
body.pf-system.pf-unified[data-portfolio] .pf-play::before,
body.pf-system.pf-unified[data-portfolio] .pf-play::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--project-color); opacity: 0; pointer-events: none;
  animation: pf-play-ring 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
body.pf-system.pf-unified[data-portfolio] .pf-play::after { animation-delay: 1.3s; }
body.pf-system.pf-unified[data-portfolio] .pf-play svg {
  position: relative; width: 36px; height: 36px; margin-left: 1px; fill: currentColor;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
body.pf-system.pf-unified[data-portfolio] :is(.pf-video-frame,.pf-video-host):hover .pf-play,
body.pf-system.pf-unified[data-portfolio] .pf-play:focus-visible {
  transform: scale(1.08); box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 10px color-mix(in srgb, var(--project-color) 22%, transparent);
}
body.pf-system.pf-unified[data-portfolio] .pf-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
body.pf-system.pf-unified[data-portfolio] [data-pf-playing] .pf-play {
  opacity: 0; pointer-events: none; transform: scale(.7); transition-duration: .25s;
}
@keyframes pf-play-ring {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media(max-width:700px) {
  body.pf-system.pf-unified[data-portfolio] .pf-play { width: 64px !important; height: 64px !important; margin: -32px 0 0 -32px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-play svg { width: 26px; height: 26px; margin-left: 1px; }
}
@media(prefers-reduced-motion:reduce) {
  body.pf-system.pf-unified[data-portfolio] .pf-play::before,
  body.pf-system.pf-unified[data-portfolio] .pf-play::after { animation: none; }
  body.pf-system.pf-unified[data-portfolio] .pf-play { transition: opacity .2s; }
  body.pf-system.pf-unified[data-portfolio] :is(.pf-video-frame,.pf-video-host):hover .pf-play { transform: none; }
}