/* Keep the original portrait-and-biography layout, with a quieter depth layer. */
.about-main{--about-glow:#00deed;--about-secondary:#a88aef;--timeline-progress:0}
.about-panel{position:relative;isolation:isolate;background:linear-gradient(145deg,#122737b0,#161425c9 65%),var(--card);border-color:#8eb3d02e;box-shadow:0 24px 75px #00000026;backdrop-filter:blur(14px)}
.about-panel::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 8% 5%,#00deed12,transparent 54%),radial-gradient(ellipse at 97% 90%,#ad8afe12,transparent 53%);animation:about-ambient 12s ease-in-out infinite alternate}
.about-panel::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(340px circle at var(--pointer-x,25%) var(--pointer-y,20%),color-mix(in srgb,var(--about-glow) 10%,transparent),transparent 80%);opacity:0;transition:opacity .5s ease}
.about-panel.has-pointer::after{opacity:1}
.about-copy{min-width:0}
.about-copy h1{background:linear-gradient(110deg,var(--text) 20%,#c3f5ff 58%,#d5c9ff);background-clip:text;-webkit-background-clip:text;color:transparent}
.about-copy h2{letter-spacing:.015em}
.about-main .bio{position:relative;background:#0c17266b;border-color:#a6d6e524;border-left:2px solid color-mix(in srgb,var(--cyan) 48%,transparent);font-style:normal;box-shadow:inset 0 1px 0 #ffffff05}
.about-main .portrait::before{border-color:#af97e77a;box-shadow:0 0 40px -16px #ab8dfc55;animation:portrait-frame 9s ease-in-out infinite alternate}
.about-main .portrait::after{border-color:#63e7f170;animation:portrait-frame-outer 12s ease-in-out infinite alternate}
.about-main .portrait img{box-shadow:0 12px 36px #00deed19;transition:transform .5s ease,box-shadow .5s ease}
.about-main .portrait>span{display:inline-flex;align-items:center;gap:7px;backdrop-filter:blur(10px);padding:5px 12px;white-space:nowrap}
.about-main .portrait .dot{position:static;width:6px;height:6px;padding:0;border:0;background:var(--cyan);box-shadow:0 0 9px color-mix(in srgb,var(--cyan) 65%,transparent);animation:about-status 3s ease-in-out infinite}
.about-main .tag{border:1px solid color-mix(in srgb,currentColor 16%,transparent);transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease}
.about-main .timeline-section{position:relative}
.about-main .timeline-section>.eyebrow{display:inline-flex;align-items:center;gap:9px}
.about-main .timeline-section>h2{letter-spacing:-.02em}
.about-main .timeline::before{opacity:.22}
.about-main .timeline-progress{position:absolute;top:0;bottom:50px;left:10px;width:2px;border-radius:2px;pointer-events:none;background:linear-gradient(var(--cyan),var(--purple),var(--green));box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 30%,transparent);transform:scaleY(var(--timeline-progress));transform-origin:top;transition:transform .22s ease-out}
.about-main .timeline-item{background:linear-gradient(135deg,#122034b0,#151626b8),var(--card);border-color:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 8px 30px #00000012;backdrop-filter:blur(12px);transition:border-color .4s ease,box-shadow .4s ease,background-color .4s ease,transform .4s ease}
.about-main .timeline-item::before{transition:box-shadow .4s ease,background-color .4s ease}
.about-main .timeline-item.is-current{border-color:color-mix(in srgb,var(--accent) 42%,transparent);box-shadow:0 8px 35px color-mix(in srgb,var(--accent) 8%,transparent)}
.about-main .timeline-item.is-current::before{background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent),0 0 20px color-mix(in srgb,var(--accent) 42%,transparent);animation:timeline-node 3.8s ease-in-out infinite}
.about-main .timeline-label{border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.about-main .about-reveal{--reveal-delay:0ms}
.about-main.motion-ready .about-reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease var(--reveal-delay),transform .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay)}
.about-main.motion-ready .about-reveal.is-visible{opacity:1;transform:translateY(0)}
.about-main .portrait.about-reveal{--reveal-delay:70ms}
.about-main .about-tags.about-reveal{--reveal-delay:90ms}
.about-main .about-copy h1.about-reveal{--reveal-delay:120ms}
.about-main .about-copy h2.about-reveal{--reveal-delay:160ms}
.about-main .bio.about-reveal{--reveal-delay:200ms}
@keyframes about-ambient{from{opacity:.55}to{opacity:1}}
@keyframes portrait-frame{from{transform:rotate(1deg)}to{transform:rotate(-2deg)}}
@keyframes portrait-frame-outer{from{transform:rotate(8deg)}to{transform:rotate(4deg)}}
@keyframes about-status{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes timeline-node{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent),0 0 16px color-mix(in srgb,var(--accent) 35%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 13%,transparent),0 0 24px color-mix(in srgb,var(--accent) 50%,transparent)}}
body.light .about-main{--about-glow:#0c85bc;--about-secondary:#8572c7}
body.light .about-panel{background:linear-gradient(145deg,#fffffff0,#f2f8ffd9);border-color:#ffffffde;box-shadow:0 20px 60px #295a881f}
body.light .about-panel::before{background:radial-gradient(ellipse at 8% 5%,#5cbffb12,transparent 54%),radial-gradient(ellipse at 97% 90%,#a6a3ea12,transparent 53%)}
body.light .about-copy h1{background-image:linear-gradient(110deg,#12345c,#176080 65%,#63558d)}
body.light .about-main .bio{background:#ffffff9c;border-color:#cadfe8;border-left-color:#72add0}
body.light .about-main .portrait img{border-color:#fff;box-shadow:0 12px 30px #318bc32b}
body.light .about-main .portrait::before{border-color:#8874bf55;box-shadow:0 0 40px -16px #7970c833}
body.light .about-main .portrait::after{border-color:#1385b866}
body.light .about-main .portrait>span{background:#ffffffdf;border-color:#8bbbd58c;color:#235578}
body.light .about-main .timeline-item{background:linear-gradient(140deg,#fffffff0,#f4f9ffe0);border-color:color-mix(in srgb,var(--accent) 22%,#e2edf5);box-shadow:0 8px 28px #295a8812}
body.light .about-main .timeline-item.is-current{border-color:color-mix(in srgb,var(--accent) 44%,#e2edf5);box-shadow:0 10px 30px #295a881b}
@media(hover:hover) and (pointer:fine){
  .about-main .portrait:hover img{transform:translateY(-4px);box-shadow:0 18px 45px color-mix(in srgb,var(--cyan) 20%,transparent)}
  .about-main .tag:hover{transform:translateY(-3px);box-shadow:0 5px 18px color-mix(in srgb,currentColor 12%,transparent)}
  .about-main .timeline-item.is-visible:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:0 12px 35px color-mix(in srgb,var(--accent) 12%,transparent)}
}
@media(max-width:767px){
  .about-panel{backdrop-filter:blur(8px)}
  .about-main .timeline-progress{left:7px}
  .about-main .portrait>span{padding:4px 10px}
  .about-main .bio{font-size:15px;line-height:1.9}
  .about-main.motion-ready .about-reveal{transform:translateY(16px)}
  .about-main.motion-ready .about-reveal.is-visible{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .about-main.motion-ready .about-reveal{opacity:1;transform:none}
  .about-panel.has-pointer::after{opacity:0}
}