/* Glass treatment; the original photo remains alongside the generated portrait. */
.hero .kinetic-word{display:block;min-width:0;width:100%;height:1.16em;white-space:nowrap}
.hero #hero-word{will-change:auto;transition:none;vertical-align:top}
@media(min-width:1000px){
  .hero{grid-template-columns:1.05fr 1fr;gap:40px}
  .portrait-stage{max-width:600px;padding:5px}
}
.glass-portrait{aspect-ratio:.88;background:#101827;isolation:isolate;border-color:#c3b4f75c;box-shadow:0 28px 90px #0008,0 0 45px #6875c518,inset 0 1px #fff5}
.glass-portrait>img{object-position:50% 56%;filter:brightness(1.22) saturate(.74) contrast(1.03);transform:scale(1.045)}
.glass-portrait>img[src$="portrait-developer-it.webp"]{object-position:50% 46%;filter:brightness(1.04) saturate(.9);transform:scale(1.025)}
.glass-portrait:after{z-index:1;background:linear-gradient(180deg,#111b3533 0%,transparent 28%,transparent 52%,#080e24a8 79%,#080c1df5 100%);box-shadow:inset 0 0 0 5px #b6c5ff08,inset 0 1px 1px #fff8}
.portrait-glare{z-index:2;background:radial-gradient(ellipse 65% 50% at var(--shine-x) var(--shine-y),#c4d8ff35,transparent 72%),linear-gradient(115deg,transparent 30%,#b9afff0a 44%,#edfcff15 48%,transparent 53%);opacity:.16}
.glass-portrait.is-lit .portrait-glare{opacity:.8}
.glass-portrait.is-lit{box-shadow:0 28px 90px #0008,0 0 45px #9a7ee52a,inset 0 1px #fff7}
.portrait-sheen{position:absolute;inset:-70%;z-index:2;pointer-events:none;opacity:0;transform:translateX(-48%) rotate(-18deg);background:linear-gradient(90deg,transparent 40%,#c8b7ff06 45%,#e9f5ff33 49%,#ffffff40 50%,#a5c5ff13 52%,transparent 58%);mix-blend-mode:screen}
.portrait-arrived .portrait-sheen{animation:portrait-first-reflection 1.9s .25s ease-in-out both}
.portrait-sparkles{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.portrait-sparkles i{position:absolute;width:12px;height:12px;filter:drop-shadow(0 0 6px #b8cfff)}
.portrait-sparkles i:before,.portrait-sparkles i:after{content:"";position:absolute;inset:5px 0;background:linear-gradient(90deg,transparent,#f0f4ff,transparent);border-radius:50%}
.portrait-sparkles i:after{transform:rotate(90deg)}
.portrait-sparkles i:nth-child(1){top:8%;right:5%;transform:scale(.8)}
.portrait-sparkles i:nth-child(2){top:64%;left:3%;transform:scale(.6)}
.portrait-sparkles i:nth-child(3){bottom:5%;right:8%;transform:scale(.5)}
.glass-portrait.is-lit .portrait-sparkles{opacity:.85}
.glass-portrait figcaption{z-index:4;left:27px;right:24px;bottom:25px}
.glass-portrait figcaption small{color:#c3cbe4}
@keyframes portrait-first-reflection{
  0%{opacity:0;transform:translateX(-48%) rotate(-18deg)}
  20%{opacity:.65}
  75%{opacity:.45}
  100%{opacity:0;transform:translateX(48%) rotate(-18deg)}
}
@media(min-width:641px) and (max-width:900px){
  .glass-portrait{aspect-ratio:.76}
  .glass-portrait>img{object-position:47% 56%}
}
@media(max-width:640px){
  .glass-portrait{aspect-ratio:.94}
  .glass-portrait>img{object-position:50% 57%;transform:scale(1.025)}
  .glass-portrait figcaption{left:23px;bottom:23px}
}
@media(prefers-reduced-motion:reduce){
  .glass-portrait{transform:none!important;transition:none}
  .portrait-sheen,.portrait-sparkles,.portrait-glare{display:none}
}