/* Entrance study: center-out framing and a single, gentle depth change. */
.personal-refined .portrait-entrance-layer { width: 100%; height: 100%; transform-origin: 50% 38%; }
html[data-portrait-intro=waiting] .personal-refined .portrait-window,
html[data-portrait-intro=waiting] .personal-refined .personal-portrait figcaption { opacity: 0; }
html[data-portrait-intro=playing] .personal-refined .portrait-window {
  animation: portrait-frame-in 1850ms cubic-bezier(.16, 1, .3, 1) both;
}
html[data-portrait-intro=playing] .personal-refined .portrait-entrance-layer {
  animation: portrait-focus-in 2150ms cubic-bezier(.18, .8, .22, 1) both;
  will-change: transform;
}
html[data-portrait-intro=playing] .personal-refined .personal-portrait figcaption {
  animation: portrait-caption-in 700ms 850ms ease-out both;
}
@keyframes portrait-frame-in {
  0% { clip-path: inset(18% 20% 24% 20% round 45%); opacity: 0; }
  15% { opacity: 1; }
  100% { clip-path: inset(0% 0% 0% 0% round 0%); opacity: 1; }
}
@keyframes portrait-focus-in {
  0% { transform: scale(1.16); filter: blur(4px); }
  55% { filter: blur(0px); }
  100% { transform: scale(1); filter: blur(0px); }
}
@keyframes portrait-caption-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes portrait-soft-in { from { opacity: 0; } to { opacity: 1; } }
html[data-portrait-intro=playing] .personal-refined[data-motion=subtle] .portrait-window {
  animation: portrait-soft-in 700ms ease-out both;
}
html[data-portrait-intro=playing] .personal-refined[data-motion=subtle] .portrait-entrance-layer { animation: none; will-change: auto; }
html[data-portrait-intro=playing] .personal-refined[data-motion=subtle] .personal-portrait figcaption {
  animation: portrait-caption-in 400ms 150ms ease-out both;
}
html[data-portrait-intro] .personal-refined[data-motion=off] .portrait-window,
html[data-portrait-intro] .personal-refined[data-motion=off] .portrait-entrance-layer,
html[data-portrait-intro] .personal-refined[data-motion=off] .personal-portrait figcaption,
html[data-portrait-intro] .personal-refined.mini .portrait-window,
html[data-portrait-intro] .personal-refined.mini .personal-portrait figcaption {
  animation: none; opacity: 1; transform: none; filter: none; clip-path: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-portrait-intro] .personal-refined .portrait-window,
  html[data-portrait-intro] .personal-refined .portrait-entrance-layer,
  html[data-portrait-intro] .personal-refined .personal-portrait figcaption {
    animation: none !important; opacity: 1; transform: none; filter: none; clip-path: none;
  }
}