/* 03 / The person behind Robot Roo: a dark editorial portrait section that deliberately steps outside the frost theme.
   Overlays sit inside .about-frame, which shares the portrait's 1500x1180 coordinate space, so --x/--y percentages track the face at every size. */
.about-section{--signal:#9ee8f0;--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;position:relative;isolation:isolate;height:clamp(620px,47vw,820px);margin-block:-1px;background:#070707;color:#eef2f3;overflow:hidden}
.about-section:before{content:"";position:absolute;inset:-60px;z-index:3;pointer-events:none;opacity:.08;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:about-grain 1.1s steps(4) infinite}

.about-stage{position:absolute;inset:0;margin:0;z-index:0;overflow:hidden}
.about-frame{--anchor:64%;position:absolute;top:-4%;left:var(--anchor);height:112%;aspect-ratio:1500/1180;transform:translateX(-41%);container-type:size;isolation:isolate;overflow:hidden}
.about-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,#0000 0 2px,#0000002b 2px 3px);-webkit-mask-image:radial-gradient(closest-side at 41% 52%,#000 55%,#0000);mask-image:radial-gradient(closest-side at 41% 52%,#000 55%,#0000)}
.about-photo,.about-glitch{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translate3d(calc(var(--px,0)*-10px),calc(var(--py,0)*-6px),0);transition:transform .7s var(--ease),opacity 1.6s var(--ease)}
.about-glitch{opacity:0;mix-blend-mode:screen;pointer-events:none}
.about-glitch-a{filter:sepia(1) saturate(4) hue-rotate(150deg)}
.about-glitch-b{filter:sepia(1) saturate(5) hue-rotate(-35deg)}
.about-fx{position:absolute;inset:0;pointer-events:none}
.about-numeral,.about-code,.about-tag,.about-id{position:absolute;mix-blend-mode:difference;transition:transform .7s var(--ease),clip-path 1.3s var(--ease),opacity 1s var(--ease)}
.about-scan{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,#9ee8f000,#9ee8f01f 78%,#b4f0f6a6 99%,#9ee8f000);mix-blend-mode:overlay;transform:translateY(-110%);animation:about-scan 7.5s cubic-bezier(.45,0,.55,1) 1s infinite}

.about-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.about-inner a,.about-copy{pointer-events:auto}
.about-copy{max-width:470px}
.about-index{display:flex;align-items:center;gap:14px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8d999e;margin-bottom:32px}
.about-index span{color:var(--signal)}
.about-index i{width:34px;height:1px;background:#ffffff40}
.about-copy h2{font-size:clamp(40px,4vw,60px);line-height:1.04;letter-spacing:-.055em;color:#f3f6f7}
.about-copy h2 em{display:block;color:#8e9ca2;margin-top:.14em;letter-spacing:-.045em}
.about-cursor{display:inline-block;width:.42em;height:.07em;margin-left:.1em;background:var(--signal);animation:about-blink 1.1s steps(1,end) infinite}
/* ASCII ripple (about.js): a scrambled letter keeps its width and its glyph is drawn over it, so the copy never reflows. */
.about-ch{position:relative}
.about-ch[data-g]{visibility:hidden}
.about-ch[data-g]:after{content:attr(data-g);visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);line-height:1;letter-spacing:0}
.about-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;user-select:none}
.about-copy>p{font-size:13px;line-height:1.85;color:#9ba7ac;max-width:395px;margin-top:24px}
.about-copy>p+p{margin-top:12px}
.about-link{margin-top:32px;display:inline-flex;align-items:center;gap:22px;padding:15px 17px 15px 20px;border:1px solid #ffffff3d;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f3f6f7;transition:background .25s,color .25s,border-color .25s}
.about-link:hover{background:#f3f6f7;color:#070707;border-color:#f3f6f7}
.about-link:focus-visible{outline-color:var(--signal)}
.about-link svg{width:15px;height:15px}
.about-readout,.about-page{position:absolute;bottom:32px;display:flex;align-items:center;gap:12px;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7f8b90}
.about-readout{left:0}
.about-readout i{width:84px;height:1px;background:linear-gradient(90deg,var(--signal),#ffffff14)}
.about-dot{width:8px;height:8px;border-radius:50%;background:#f3f6f7;box-shadow:0 0 0 4px #ffffff10,0 0 14px var(--signal)}
.about-page{right:0}
.about-mark{position:absolute;top:30px;font:300 17px/1 var(--mono);color:#ffffff80}
.about-mark-tl{left:0}.about-mark-tr{right:0}
.about-vertical{position:absolute;left:-56px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font:500 9px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:#6a767b}

/* Arrival and glitch states are added by about.js, which drops is-armed once the arrival ends; without it the section renders complete and still. */
.about-section.is-armed .about-photo{opacity:0}
.about-section.is-armed .about-scan{opacity:0}
.about-section.is-armed .about-copy>*{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.about-section.is-live .about-photo{opacity:1}
.about-section.is-live .about-scan{opacity:1;transition:opacity .4s 1.6s}
.about-section.is-live .about-copy>*{opacity:1;transform:none}
.about-section.is-live .about-copy>:nth-child(2){transition-delay:.08s}.about-section.is-live .about-copy>:nth-child(3){transition-delay:.16s}.about-section.is-live .about-copy>:nth-child(4){transition-delay:.22s}.about-section.is-live .about-copy>:nth-child(5){transition-delay:.28s}
.about-section.is-glitching .about-glitch-a{animation:about-glitch-a .5s steps(1,end)}
.about-section.is-glitching .about-glitch-b{animation:about-glitch-b .5s steps(1,end)}
.about-section.is-glitching .about-photo{animation:about-jolt .5s steps(1,end)}

@keyframes about-grain{0%{transform:translate(0,0)}25%{transform:translate(-18px,11px)}50%{transform:translate(13px,-20px)}75%{transform:translate(-9px,-7px)}}
@keyframes about-scan{0%{transform:translateY(-110%)}72%,100%{transform:translateY(470%)}}
@keyframes about-blink{50%{opacity:0}}
@keyframes about-glitch-a{0%{opacity:.6;clip-path:inset(30% 0 54% 0);transform:translateX(-9px)}20%{clip-path:inset(62% 0 24% 0);transform:translateX(7px)}40%{clip-path:inset(12% 0 79% 0);transform:translateX(-4px)}60%{opacity:.4;clip-path:inset(0);transform:translateX(-3px)}80%{opacity:.3;clip-path:inset(44% 0 41% 0);transform:translateX(11px)}100%{opacity:0}}
@keyframes about-glitch-b{0%{opacity:.5;clip-path:inset(47% 0 38% 0);transform:translateX(8px)}25%{clip-path:inset(20% 0 67% 0);transform:translateX(-6px)}50%{opacity:.35;clip-path:inset(0);transform:translateX(3px)}75%{clip-path:inset(69% 0 18% 0);transform:translateX(-10px)}100%{opacity:0}}
@keyframes about-jolt{0%{transform:translateX(3px)}30%{transform:translateX(-2px)}60%,100%{transform:none}}

@media(max-width:1100px){
.about-section{height:auto}
.about-stage{position:relative;inset:auto;height:clamp(440px,64vw,620px)}
.about-frame{--anchor:50%;top:0;height:100%}
.about-inner{height:auto;padding:42px 0 92px}
.about-copy{max-width:560px}
.about-mark,.about-vertical{display:none}
}
@media(max-width:760px){
.about-stage{height:min(118vw,520px)}
.about-inner{padding:34px 0 84px}
.about-index{margin-bottom:24px}
.about-copy h2{font-size:44px}
.about-copy>p{font-size:12.5px}
.about-link{margin-top:28px}
.about-readout i{width:48px}
}
@media(prefers-reduced-motion:reduce){.about-section.is-armed .about-photo,.about-section.is-armed .about-copy>*{opacity:1;transform:none}}

/* Decorative, coherent kernel source and dmesg-style output. Kept outside the face. */
.about-kernel,.about-boot{position:absolute;margin:0;font:400 clamp(11px,1.65cqh,14px)/1.8 var(--mono);letter-spacing:0;text-transform:none;color:#c7d1d5;pointer-events:auto;cursor:default;user-select:none;transform:translate3d(calc(var(--px,0)*8px),calc(var(--py,0)*5px),0);transition:opacity .9s,transform .7s var(--ease);text-shadow:0 1px 8px #000}
.about-kernel{left:54%;top:17%;white-space:pre;opacity:.8}
.kernel-comment{color:#829097}.kernel-keyword{color:#d1b6e5}.kernel-function{color:#9ee8f0}.kernel-string{color:#b2d3b8}
.about-boot{left:14%;top:80%;display:flex;flex-direction:column;font-size:clamp(8px,1.25cqh,11px);opacity:.75}
.boot-line i{font-style:normal;color:#6d838c}.boot-prompt{margin-top:.7em;color:#9ee8f0}.boot-caret{font-weight:400;animation:about-blink 1.1s steps(1,end) infinite}
.about-section.is-armed .about-kernel,.about-section.is-armed .about-boot{opacity:0}
.about-section.is-live .about-kernel{opacity:.8;transition-delay:.35s}
.about-section.is-live .about-boot{opacity:.75;transition-delay:.65s}
.about-section.is-live .boot-line{animation:about-boot-in .7s both}.about-section.is-live .boot-line:nth-child(2){animation-delay:.85s}.about-section.is-live .boot-line:nth-child(3){animation-delay:1.35s}
@keyframes about-boot-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.about-inner{padding-bottom:46px}}
@media(max-width:760px){.about-kernel{left:46.5%;top:6%;font-size:clamp(6px,1.5cqh,9px)}.about-boot{left:16%;top:83%;font-size:clamp(6px,1.5cqh,9px)}.about-inner{padding-bottom:38px}}
@media(prefers-reduced-motion:reduce){.about-section.is-armed .about-kernel{opacity:.8}.about-section.is-armed .about-boot{opacity:.75}.boot-caret,.boot-line{animation:none!important}}
/* About heading, phosphor: a soft cyan glow, faint scanlines through the letters, a slow flicker and a block cursor. Line 2 switches to
   Laydan Mono (JetBrains Mono Medium, loaded by about.js) once the html element has .about-type; until then it keeps the Georgia italic.
   The flicker uses brightness rather than opacity so the copy's arrival fade still applies. */
.about-copy h2{position:relative;text-shadow:0 0 .12em #9ee8f059,0 0 .5em #9ee8f024;animation:about-flicker 5s steps(1) infinite}
.about-copy h2 em{color:#a9c6cc}
.about-copy h2:after{content:"";position:absolute;inset:-.1em -.2em;pointer-events:none;background:repeating-linear-gradient(180deg,#0000 0 2px,#07070759 2px 3px)}
.about-type .about-copy h2 em{font-family:"Laydan Mono",var(--mono);font-style:normal;font-weight:400;font-size:.74em;letter-spacing:-.03em}
.about-cursor{width:.5em;height:.8em;vertical-align:-.06em;margin-left:.12em}
@keyframes about-flicker{0%,100%{filter:none}7%{filter:brightness(.82)}8%{filter:none}52%{filter:brightness(.9)}53%{filter:none}}
@media(prefers-reduced-motion:reduce){.about-copy h2{animation:none}}
/* At least a screen tall on desktop (WEB-059): its height follows the width, so on screens taller than that it ended early and the
   white of How it works showed underneath. The copy stays centred and the portrait scales with the section. */
@media(min-width:1101px){.about-section{height:max(clamp(620px,47vw,820px),100svh)}}