/* Adjustable backdrop: image opacity, position and loop duration. */
body.bio{
 --energy-base:#030603;
 --energy-opacity:.2;
 --energy-position:70% center;
 --energy-duration:32s;
 isolation:isolate;
 background:var(--energy-base)!important;
}
body.bio::before{
 content:"";position:fixed;inset:-4%;z-index:-1;pointer-events:none;
 background:url('/assets/green-energy-world-v1.webp') var(--energy-position)/cover no-repeat;
 opacity:var(--energy-opacity);transform-origin:75% 60%;
 animation:bio-energy-drift var(--energy-duration) ease-in-out infinite alternate;
}
body.bio .bio-editorial{background:transparent!important}
@keyframes bio-energy-drift{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(1%,-1%,0) scale(1.055)}}
@media(max-width:600px){body.bio{--energy-position:68% center;--energy-opacity:.17}}
@media(prefers-reduced-motion:reduce){body.bio::before{animation:none}}
.bio .bio-story-avatar{position:relative;isolation:isolate;overflow:visible!important}
.bio .bio-story-avatar .bio-profile-photo{position:relative;z-index:1}
.bio .bio-story-avatar .bio-fire-ring{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);pointer-events:none;z-index:0}

body.bio::before{filter:hue-rotate(27deg) saturate(.72)}

/* Fit bio within the visible viewport, with breathing room for the animated ring. */
body.bio.bio-fit-ready{height:100dvh;min-height:0;overflow:hidden}
.bio-fit-ready .bio-editorial{position:fixed!important;left:50%;top:var(--bio-fit-center,50dvh);width:min(440px,calc(100% - 32px))!important;min-height:0!important;height:auto!important;padding:0!important;margin:0!important;transform:translate(-50%,-50%) scale(var(--bio-fit-scale,1));transform-origin:center;justify-content:flex-start}
.bio-fit-ready .bio-editorial .bio-footer{margin-top:var(--bio-footer-gap,24px)!important}
/* Allow the grid to shrink before measuring one-line typography. */
.bio-fit-ready .bio-links{min-width:0;grid-template-columns:minmax(0,1fr)}
.bio-fit-ready .fm-energy-intro,.bio-fit-ready .fm-energy-intro h2{min-width:0;width:100%;max-width:100%}
html:has(body.bio-fit-ready){overflow:hidden;scrollbar-gutter:auto}

/* Restrained rotating gradient, confined to the avatar's narrow outline. */
.bio .bio-story-avatar.bio-gradient-ring{background:#0b2414!important;box-shadow:none!important}
.bio .bio-gradient-ring::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,#143e24,#24864a,#34de71,#91e9af,#34de71,#24864a,#143e24);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:bio-ring-orbit 14s linear infinite;box-shadow:none;filter:none}
@keyframes bio-ring-orbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bio .bio-gradient-ring::before{animation:none}}