/* ============================================================
   Портрет във формата на логото (наклоненият квадрат на plabo) или „хапче“
   (вертикално, обло отгоре и отдолу, наклонено). Маската бавно се полюшва, тънък контур
   в цвета на стаята се изрисува и се движи в обратна посока; с мишката снимката и контурът
   се разминават на различна дълбочина. По желание отгоре цъфти цвете.
     --lgp-w     ширина (по подразбиране min(640px, 60svh))
     --lgp-line  цвят на контура (цветът на стаята)
   ============================================================ */

.pfx.lgpb { position: relative; aspect-ratio: 176 / 180; width: var(--lgp-w, min(640px, 60svh)); max-width: 100%; }
.pfx .lgp { position: absolute; inset: 0; }
[data-js] .pfx [data-rv='lgp'] { opacity: 1; transform: none; filter: none; }

/* маската: идва отдалече и завъртяна, после се полюшва */
.pfx .lgp-mask { position: absolute; inset: 0; transition: transform 1.8s var(--ease-out, ease-out), opacity 1s var(--ease, ease); clip-path: polygon(35.2% 0%, 99.4% 33.9%, 63.6% 99.4%, 0% 65.6%); animation: lgp-sway 14s ease-in-out infinite alternate; }
[data-js] .pfx .lgp:not([data-in]) .lgp-mask { opacity: 0; transform: scale(.55) rotate(-28deg); }
@keyframes lgp-sway {
  0% { clip-path: polygon(35.2% 0%, 99.4% 33.9%, 63.6% 99.4%, 0% 65.6%); }
  50% { clip-path: polygon(29.9% 4%, 95.2% 29%, 68.9% 95.6%, 4.2% 70.5%); }
  100% { clip-path: polygon(41% .8%, 98.8% 39.5%, 57.9% 98.5%, .7% 59.9%); }
}
.pfx .lgp-mask img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; object-position: var(--lgp-pos, 50% 22%); }

/* контурът (дебелината се пази еднаква с --u, виж logo-portrait.js) */
.pfx .lgp-line { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.pfx .lgp-line :is(polygon, rect) { fill: none; stroke: var(--lgp-line, var(--room, #2AC4EA)); stroke-width: calc(1.4 * var(--u, 1)); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-io, ease-in-out) .8s; transform-box: view-box; transform-origin: 50% 50%; }
.pfx .lgp-line polygon { animation: lgp-line 18s ease-in-out infinite alternate; }
.pfx .lgp-line rect { animation: lgp-line-pill 18s ease-in-out infinite alternate; }
.pfx .lgp[data-in] .lgp-line :is(polygon, rect), html:not([data-js]) .pfx .lgp-line :is(polygon, rect) { stroke-dashoffset: 0; }
@keyframes lgp-line { from { transform: translate(5%, -4%) rotate(4deg) scale(1.04); } to { transform: translate(-4%, 5%) rotate(-7deg) scale(1.02); } }
@keyframes lgp-line-pill { from { transform: translate(4%, -2%) rotate(3deg); } to { transform: translate(-3%, 3%) rotate(-4deg); } }

/* „хапче“: наклонено под ъгъл и леко се полюшва; снимката вътре стои права */
.pfx .lgp.is-pill .lgp-mask { clip-path: none; animation: none; }
.pfx .lgp-pill { position: absolute; left: 50%; top: 50%; width: 68%; height: 117%; border-radius: 999px; overflow: hidden; transform: translate(-50%, -50%) rotate(-16deg); animation: lgp-pill 14s ease-in-out infinite alternate; }
.pfx .lgp-pill-in { position: absolute; inset: -12% -24%; transform: rotate(16deg); animation: lgp-pill-in 14s ease-in-out infinite alternate; }
.pfx .lgp-pill-in img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--lgp-pos, 50% 26%); }
@keyframes lgp-pill { from { transform: translate(-50%, -50%) rotate(-16deg); } to { transform: translate(-50%, -50%) rotate(-11deg); } }
@keyframes lgp-pill-in { from { transform: rotate(16deg); } to { transform: rotate(11deg); } }

/* цветето над портрета */
.pfx.lgpb .fl.lgp-fl { position: absolute; z-index: 2; right: -5%; top: -33%; width: 50%; height: auto; --flw: 1.5; }

/* движи се само докато се вижда */
.pfx.lgpb :is(.lgp-mask, .lgp-pill, .lgp-pill-in, .lgp-line polygon, .lgp-line rect) { animation-play-state: paused; }
.pfx.lgpb[data-vis] :is(.lgp-mask, .lgp-pill, .lgp-pill-in, .lgp-line polygon, .lgp-line rect) { animation-play-state: running; }
.pfx.lgpb .lgp.is-pill .lgp-mask { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .pfx .lgp-mask, .pfx .lgp-line polygon, .pfx .lgp-line rect, .pfx .lgp-pill, .pfx .lgp-pill-in { animation: none; }
}