/* A tighter display crop focuses on the face and academic dress. */
.about-media.portrait-reveal { position: relative; isolation: isolate; padding: 12px 24px; }
.about-media.portrait-reveal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center,#b1d8df18,transparent 68%); pointer-events: none; }
.portrait-window { display: block; position: relative; height: clamp(220px,34dvh,320px); width: auto; max-width: 100%; aspect-ratio: 4 / 5; overflow: hidden; margin-inline: auto; border-radius: 4px; }
.about-media.portrait-reveal .portrait-window img { position: absolute; width: 200%; max-width: none; height: 200%; left: -42%; top: -53%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; border-radius: 0; }
.portrait-stars { position: absolute; inset: 0; pointer-events: none; }
.portrait-stars i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #daeff2; box-shadow: 0 0 12px #b8dfe8; opacity: .32; }
.portrait-stars i::after { content: ""; position: absolute; inset: -4px; background: #daeff2; clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }
.portrait-stars i:nth-child(1) { left: 12%; top: 24%; --delay: 0s; }
.portrait-stars i:nth-child(2) { left: 27%; top: 8%; --delay: .14s; }
.portrait-stars i:nth-child(3) { right: 18%; top: 17%; --delay: .28s; }
.portrait-stars i:nth-child(4) { right: 9%; top: 59%; --delay: .42s; }
.portrait-stars i:nth-child(5) { right: 24%; bottom: 6%; --delay: .56s; }
.portrait-stars i:nth-child(6) { left: 16%; bottom: 15%; --delay: .7s; }
.portrait-reveal.is-prepared:not(.has-entered) img,.portrait-reveal.is-prepared:not(.has-entered) .portrait-stars i { opacity: 0; }
.portrait-reveal.has-entered img { animation: portrait-appear .7s ease-out .85s both; }
.portrait-reveal.has-entered .portrait-stars i { animation: portrait-star 1.2s ease-out var(--delay) both; }
@keyframes portrait-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes portrait-star { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: .9; transform: scale(1.15); } 100% { opacity: .32; transform: scale(.8); } }
@media (max-width:650px) { .about-media.portrait-reveal { padding-block: 14px; } .portrait-window { height: auto; width: min(90%,240px); } }
@media (prefers-reduced-motion:reduce) { .portrait-reveal img,.portrait-reveal .portrait-stars i { animation: none !important; transform: none !important; } .portrait-reveal img { opacity: 1 !important; } }