/* ═══════════════════════════════════════════════════════════════
   Rundes Profilfoto mit Auftritt
   Beim Erscheinen öffnet sich das Bild kreisförmig aus der Mitte,
   ein goldener Ring dreht sich in Position, ein Lichtstreif läuft
   einmal durch. Beim Scrollen schwebt das Bild minimal nach.
   ═══════════════════════════════════════════════════════════════ */

.port{
  position:relative;
  width:min(340px,100%);
  aspect-ratio:1;
  margin:0 auto;
}

/* Goldring, leicht abgesetzt */
.port__ring{
  position:absolute;inset:-14px;border-radius:50%;
  border:1.5px solid var(--g2);
  opacity:0;transform:scale(.92) rotate(-24deg);
  transition:opacity .9s var(--e-out) .3s, transform 1.2s var(--e-out) .3s;
  pointer-events:none;
}
/* zweiter, feiner Ring für Tiefe */
.port__ring::after{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  border:1px solid var(--gline);
}
.port.in .port__ring{opacity:.9;transform:none}

/* Bild öffnet sich kreisförmig */
.port__box{
  position:absolute;inset:0;display:block;overflow:hidden;
  border-radius:50%;background:var(--linen);
  box-shadow:0 24px 60px -30px rgba(47,38,28,.45);
  clip-path:circle(0% at 50% 50%);
  transition:clip-path 1.2s var(--e-out);
}
.port.in .port__box{clip-path:circle(50% at 50% 50%)}

.port__box img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);
  transition:transform 1.7s var(--e-out);
}
.port.in .port__box img{transform:scale(1)}

/* Lichtstreif, läuft einmal durch */
.port__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 32%,rgba(255,251,242,.42) 50%,transparent 68%);
  transform:translateX(-130%);
}
.port.in .port__sheen{animation:portSheen 1.5s var(--e) 1s 1 forwards}
@keyframes portSheen{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* Ruhiger Schwebe-Versatz beim Scrollen (von motion.js gesetzt) */
.port.in .port__box{transform:translateY(var(--py,0px))}
.port.in .port__ring{transform:translateY(calc(var(--py,0px) * -.4))}

@media (max-width:760px){
  .port{width:min(236px,66vw)}
  .port__ring{inset:-10px}
  .port__ring::after{inset:-9px}
}

@media (prefers-reduced-motion:reduce){
  .port__box{clip-path:none}
  .port__box img{transform:none}
  .port__ring{opacity:.9;transform:none}
  .port__sheen{display:none}
  .port.in .port__box,.port.in .port__ring{transform:none}
}