/* Presentation layer for the bright theme. The html element carries class fx and data-theme=bright in the markup; this is the only theme. */
/* Registered colours can be transitioned, so the whole page cross-fades between chapters. */
@property --bg{syntax:'<color>';inherits:true;initial-value:#04060a}
@property --ink{syntax:'<color>';inherits:true;initial-value:#f4f6f8}
@property --ac{syntax:'<color>';inherits:true;initial-value:#9fdcf3}
@property --l1{syntax:'<color>';inherits:true;initial-value:#2e80d6}
@property --l2{syntax:'<color>';inherits:true;initial-value:#169696}
@property --l3{syntax:'<color>';inherits:true;initial-value:#5c78e6}
@property --gf{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.06)}

html.fx{
  --bg:#04060a;--ink:#f4f6f8;--ac:#9fdcf3;
  --l1:#2e80d6;--l2:#169696;--l3:#5c78e6;
  --gf:rgba(255,255,255,.06);      /* glass fill */
  --hi:.16;                        /* top-edge highlight alpha */
  --sa:.72;                        /* shadow alpha */
  --mm:52%;                        /* strength of the accent on second headline lines */
  --la:1;                          /* ambient light strength */
  --gl-o:.22;                      /* WebGL layer opacity */
  --t1:var(--ink);
  --t2:color-mix(in srgb,var(--ink) 84%,transparent);
  --t3:color-mix(in srgb,var(--ink) 74%,transparent);
  --line-c:color-mix(in srgb,var(--ink) 12%,transparent);
  --glass-line:color-mix(in srgb,var(--ink) 12%,transparent);
  --glass-shadow:inset 0 1px 0 rgb(255 255 255 / var(--hi)),0 30px 70px -34px rgb(0 0 0 / var(--sa));
  --blur:blur(22px) saturate(165%);
  --ease:cubic-bezier(.16,1,.3,1);
  --blue:var(--ac);--blue2:var(--ac);--green:var(--ac);
  --line:var(--line-c);--chrome-solid:var(--bg);
  background:var(--bg);
  transition:--bg .9s cubic-bezier(.4,0,.2,1),--ink .9s cubic-bezier(.4,0,.2,1),--ac .9s cubic-bezier(.4,0,.2,1),--gf .9s ease,--l1 1.2s ease,--l2 1.2s ease,--l3 1.2s ease;
}

/* Bright: black, yellow and cobalt taken from the artwork. Paper is the default; dark and cobalt are chapters. */
html.fx[data-theme="bright"],html.fx[data-theme="bright"] :is(.hero-journey,.evolution){
  --bg:#f3f2ed;--ink:#0b0b0d;--ac:#1c3cff;
  --l1:#ffc81e;--l2:#3a6bff;--l3:#6fc6ff;
  --gf:rgba(255,255,255,.62);--hi:.95;--sa:.2;--mm:100%;--la:.8;--gl-o:0;
}
html.fx[data-theme="bright"]:is([data-chapter="orchestration"],[data-chapter="stack"],[data-chapter="contact"]),
html.fx[data-theme="bright"] .orchestration{
  --bg:#0a0a0c;--ink:#f7f6f1;--ac:#ffd02e;
  --l1:#ffb400;--l2:#2f55ff;--l3:#ff8a00;
  --gf:rgba(255,255,255,.07);--hi:.16;--sa:.72;--mm:100%;--la:.9;--gl-o:.2;
}
html.fx[data-theme="bright"][data-chapter="amb"]{
  --bg:#1a2fe0;--ink:#ffffff;--ac:#ffd84a;
  --l1:#5f8dff;--l2:#0a1899;--l3:#7fd4ff;
  --gf:rgba(255,255,255,.13);--hi:.3;--sa:.45;--la:1;--gl-o:.25;
}
/* The opening sequence owns its colours, so a paper sheet can rise over a dark hero. */
html.fx[data-theme="bright"] :is(.hero-journey,.evolution,.orchestration){
  --t1:var(--ink);
  --t2:color-mix(in srgb,var(--ink) 84%,transparent);
  --t3:color-mix(in srgb,var(--ink) 74%,transparent);
  --line-c:color-mix(in srgb,var(--ink) 12%,transparent);
  --glass-line:color-mix(in srgb,var(--ink) 12%,transparent);
  --glass-shadow:inset 0 1px 0 rgb(255 255 255 / var(--hi)),0 30px 70px -34px rgb(0 0 0 / var(--sa));
  --blue:var(--ac);--blue2:var(--ac);--green:var(--ac);--line:var(--line-c);--chrome-solid:var(--bg);
  color:var(--ink);
}
html.fx[data-theme="bright"] .hero-sticky{background:radial-gradient(52% 62% at 76% 46%,color-mix(in srgb,var(--l1) 26%,transparent),transparent 72%),radial-gradient(46% 56% at 0% 100%,color-mix(in srgb,var(--l2) 16%,transparent),transparent 72%),var(--bg)}
html.fx[data-theme="bright"] .evolution{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 -30px 80px -30px rgb(0 0 0 / .22),inset 0 1px 0 #fff}
html.fx[data-theme="bright"] .orchestration{background:radial-gradient(46% 34% at 50% 34%,color-mix(in srgb,var(--l1) 15%,transparent),transparent 72%),radial-gradient(80% 44% at 50% 104%,color-mix(in srgb,var(--l2) 26%,transparent),transparent 72%),var(--bg)}
html.fx[data-theme="bright"] .orchestration::before{display:none}
/* Iris: the dark stage grows out of the "AI Systems" stop. */
.fx-iris{display:none}
html.fx[data-theme="bright"] .fx-iris{display:block;position:absolute;inset:0;z-index:5;background:#0a0a0c;clip-path:circle(var(--ir,0px) at var(--ix,80%) var(--iy,90%));pointer-events:none}
html.fx[data-theme="bright"] .system-surface{box-shadow:var(--glass-shadow),0 0 0 6px color-mix(in srgb,var(--ac) 16%,transparent),0 0 40px color-mix(in srgb,var(--ac) 45%,transparent)}

html.fx body{background:var(--bg);color:var(--ink)}
html.fx #webgl{opacity:var(--gl-o);transition:opacity .9s ease}
html.fx ::selection{background:color-mix(in srgb,var(--ac) 30%,transparent);color:var(--ink)}
html.fx :focus-visible{outline-color:var(--ac)}

/* Ambient light: three soft sources that move with the chapter. */
.fx-ambient{display:none}
html.fx .fx-ambient{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict;opacity:var(--la);transition:opacity .9s ease}
html.fx .fx-ambient i{position:absolute;left:0;top:0;width:78vmax;height:78vmax;border-radius:50%;will-change:transform,opacity;opacity:0}
html.fx .fx-ambient .a1{background:radial-gradient(closest-side,color-mix(in srgb,var(--l1) 36%,transparent),color-mix(in srgb,var(--l1) 14%,transparent) 42%,color-mix(in srgb,var(--l1) 3%,transparent) 72%,transparent)}
html.fx .fx-ambient .a2{background:radial-gradient(closest-side,color-mix(in srgb,var(--l2) 28%,transparent),color-mix(in srgb,var(--l2) 11%,transparent) 42%,color-mix(in srgb,var(--l2) 3%,transparent) 72%,transparent)}
html.fx .fx-ambient .a3{background:radial-gradient(closest-side,color-mix(in srgb,var(--l3) 24%,transparent),color-mix(in srgb,var(--l3) 9%,transparent) 42%,color-mix(in srgb,var(--l3) 2%,transparent) 72%,transparent)}
html.fx .page-vignette{background:radial-gradient(circle at 70% 30%,transparent 0 34%,color-mix(in srgb,var(--bg) 22%,transparent) 62%,color-mix(in srgb,var(--bg) 60%,transparent) 100%)}

/* Sections let the light through; hairlines fade at the ends. */
html.fx :is(.evolution,.orchestration,.amb,.work,.experience,.stack,.contact){background:transparent;border-top-color:transparent}
html.fx :is(.orchestration,.amb,.work,.experience,.stack,.contact)::before{content:"";position:absolute;top:0;left:var(--page-gutter);right:var(--page-gutter);height:1px;background:linear-gradient(90deg,transparent,var(--line-c) 22%,var(--line-c) 78%,transparent);pointer-events:none}
html.fx .hero-bottom-fade{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 14%,transparent) 38%,color-mix(in srgb,var(--bg) 58%,transparent) 73%,color-mix(in srgb,var(--bg) 94%,transparent))}
html.fx .hero-floor{background:radial-gradient(ellipse,rgb(0 0 0 / calc(var(--sa)*.75)),transparent 72%)}

/* Text hierarchy: three levels derived from the ink colour. */
html.fx :is(.brand,.hero-fact strong,.path-stop strong,.evolution-note strong,.agent-label strong,.amb-story strong,.memory-core strong,.memory-node strong,.orchestrator-title strong,.work-body h3,.role h3,.stack-card h3,.contact-link,.fineprint strong,.system-source,.system-target strong,.work-toggle){color:var(--t1)}
html.fx :is(.lede,.hero-sub,.hero-fact span,.path-stop span,.evolution-note,.system-copy p,.agent-label p,.amb-story span,.amb-story-note,.memory-node span,.work-body p,.work-field dd,.role p,.stack-card p,.experience-intro p,.fineprint,.topbar nav a,.text-link,.language-switch button){color:var(--t2)}
html.fx :is(.path-stop small,.role-time,.work-meta span,.work-field dt,#work .work-source,.contact-link small,.memory-core span,.orchestrator-title span,.system-target span,.hero-status,.progress-rail,.scroll-note){color:var(--t3)}
html.fx .work-meta span+span:before{color:var(--t3)}
html.fx :is(.section-index,.eyebrow,.work-tag,#work .work-kicker,.amb-story small,.memory-node small,.agent-label small,.work-disclosure-heading){color:var(--ac)}
html.fx :is(.hero-status,.progress-rail,.scroll-note){font-size:11px}
html.fx .status-rule,html.fx .rail{background:var(--line-c)}

/* Type: heavier display weight, looser tracking so letters stop touching. */
html.fx :is(.hero-copy h1,.section-title,.system-copy h2,.amb-copy h2,.contact h2){font-weight:580;color:var(--ink)}
html.fx body:not(.lang-zh) :is(.hero-copy h1,.contact h2){letter-spacing:-.046em}
html.fx body:not(.lang-zh) :is(.section-title,.system-copy h2,.amb-copy h2){letter-spacing:-.042em}
html.fx :is(.section-title,.system-copy h2) .muted,html.fx .contact h2 span:not(.fx-w),html.fx .amb-copy h2 span:not(.fx-w){color:color-mix(in srgb,var(--ac) var(--mm),transparent)}
html.fx .hero-sub{font-weight:400}
html.fx .hero-sub .accent{color:var(--ink);font-weight:520}

/* Split words: rise and sharpen in sequence. */
html.fx .fx-w{display:inline-block;opacity:0;translate:0 .38em;filter:blur(6px);transition:opacity .5s var(--ease),translate .7s var(--ease),filter .5s var(--ease);transition-delay:calc(var(--i)*30ms + var(--d,0ms));will-change:opacity,translate,filter}
html.fx .fx-in .fx-w{opacity:1;translate:0 0;filter:none}
html.fx .hero-copy h1 .fx-w{background:linear-gradient(180deg,var(--ink) 55%,color-mix(in srgb,var(--ink) 72%,var(--ac)) 135%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
html.fx .fx-lw{opacity:clamp(.46,calc((var(--p,1)*(var(--n) + 5) - var(--i))/5),1)}

/* Load choreography. Runs only once the page script is alive; without script the hero is static. */
@keyframes fx-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes fx-figure{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
@keyframes fx-drop{from{opacity:0;translate:-50% -18px}to{opacity:1;translate:-50% 0}}
html.fx.js .eyebrow{animation:fx-rise .9s var(--ease) .05s both}
html.fx.js .hero-sub{animation:fx-rise 1s var(--ease) .32s both}
html.fx.js .hero-actions{animation:fx-rise 1s var(--ease) .44s both}
html.fx.js .hero-facts{animation:fx-rise 1s var(--ease) .56s both}
html.fx.js .hero-figure{animation:fx-figure 1.5s var(--ease) .1s both}

/* Navigation: a floating glass capsule that appears and narrows on scroll. */
html.fx .topbar{top:14px;left:50%;right:auto;translate:-50% 0;width:min(1320px,calc(100% - 32px));height:58px;padding:0 10px 0 24px;border-radius:999px;border:1px solid transparent;transition:width .7s var(--ease),background .4s ease,border-color .4s ease,box-shadow .4s ease;animation:fx-drop .9s var(--ease) both}
html.fx .topbar.scrolled{height:58px;width:min(1000px,calc(100% - 32px));background:linear-gradient(180deg,var(--gf),color-mix(in srgb,var(--gf) 45%,transparent)),color-mix(in srgb,var(--bg) 52%,transparent);border-color:var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
html.fx .topbar nav{position:relative;gap:2px}
html.fx .topbar nav a{position:relative;z-index:1;min-height:38px;padding:0 14px;border-radius:999px;font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:500}
html.fx .topbar nav a:hover,html.fx .topbar nav a.active{color:var(--ink)}
html.fx .fx-navpill{position:absolute;left:0;top:50%;height:38px;margin-top:-19px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);opacity:0;transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s ease;pointer-events:none}
html.fx .topbar .nav-cta{margin-left:8px;border:0;background:var(--ink);color:var(--bg)!important;font-weight:600;padding:0 16px}
html.fx .language-switch{min-height:40px;border-color:transparent;background:color-mix(in srgb,var(--ink) 7%,transparent);backdrop-filter:none}
html.fx .language-switch button{min-height:34px}
html.fx .language-switch button.active{background:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink)}

/* Buttons */
html.fx .primary-btn{background:var(--ink);color:var(--bg);box-shadow:0 2px 6px rgb(0 0 0 / calc(var(--sa)*.5)),0 16px 44px -12px color-mix(in srgb,var(--ac) 60%,transparent);transition:translate .5s var(--ease),box-shadow .5s var(--ease),scale .2s ease}
html.fx .primary-btn:hover{background:var(--ink);translate:0 -2px;box-shadow:0 4px 10px rgb(0 0 0 / calc(var(--sa)*.5)),0 24px 60px -10px color-mix(in srgb,var(--ac) 85%,transparent)}
html.fx .primary-btn:active{background:var(--ink);translate:0 0;scale:.98}
html.fx .text-link{min-height:48px;padding:0 22px;border:1px solid var(--glass-line);border-radius:999px;background:var(--gf);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgb(255 255 255 / var(--hi));font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;transition:border-color .3s ease,translate .5s var(--ease),color .3s ease}
html.fx .text-link:hover{border-color:var(--ac);color:var(--ink);translate:0 -2px}

/* Glass recipe */
html.fx :is(.hero-facts,.orchestrator-title,.agent-label,.memory-node,.work-card,.stack-card,.timeline,.contact-links){border:1px solid var(--glass-line);background:linear-gradient(180deg,var(--gf),color-mix(in srgb,var(--gf) 45%,transparent));box-shadow:var(--glass-shadow)}
html.fx :is(.orchestrator-title,.agent-label,.memory-node,.work-card,.stack-card,.timeline,.contact-links){backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}

/* Hero */
html.fx .hero-facts{gap:0;padding:18px 22px;border-radius:20px}
html.fx .hero-fact{padding:0 18px;border-right-color:var(--line-c)}
html.fx .hero-fact:first-child{padding-left:0}
html.fx .hero-figure{filter:saturate(1.04) contrast(1.03) drop-shadow(0 18px 26px rgb(0 0 0 / calc(var(--sa)*.6)))}
html.fx .hero-ring{border-color:var(--line-c);box-shadow:none}
html.fx .hero-ring:before,html.fx .hero-ring:after{border-color:color-mix(in srgb,var(--ink) 7%,transparent)}
html.fx .rail i{background:var(--ac);box-shadow:0 0 12px color-mix(in srgb,var(--ac) 60%,transparent)}
/* Hero recedes into depth while the next sheet rises over it. */
html.fx .fx-exit .hero-copy{translate:0 calc(var(--hx)*-46px);scale:calc(1 - var(--hx)*.05);filter:none;transform-origin:left center}
html.fx .fx-exit .hero-visual{scale:calc(1 - var(--hx)*.06);filter:opacity(calc(1 - var(--hx)*.28))}

/* Evolution: a frosted sheet with rounded shoulders. */
html.fx .evolution{border-radius:44px 44px 0 0;border-top:1px solid var(--glass-line);background:linear-gradient(180deg,var(--gf),transparent 300px),linear-gradient(180deg,color-mix(in srgb,var(--bg) 76%,transparent),color-mix(in srgb,var(--bg) 40%,transparent) 70%,transparent);backdrop-filter:blur(34px) saturate(150%);-webkit-backdrop-filter:blur(34px) saturate(150%);box-shadow:0 -40px 90px -30px rgb(0 0 0 / var(--sa)),inset 0 1px 0 rgb(255 255 255 / var(--hi))}
@media(min-width:921px) and (min-height:741px) and (prefers-reduced-motion:no-preference){
  html.fx.js .hero-journey{margin-bottom:-26vh}
}
html.fx .career-path:before{background:var(--line-c)}
html.fx .career-path:after{content:"";position:absolute;left:5%;right:5%;top:9px;height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 25%,transparent),var(--ac));transform-origin:left;transform:scaleX(var(--cp,1))}
html.fx .path-stop:before{border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:var(--bg);box-shadow:none;transition:background .5s ease,box-shadow .5s ease,border-color .5s ease}
html.fx .path-stop.fx-lit:before{background:var(--ac);border-color:var(--ac);box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 16%,transparent)}
html.fx .path-stop :is(small,strong,span){transition:opacity .6s ease}
html.fx .career-path.fx-track .path-stop:not(.fx-lit) :is(small,span),html.fx .career-path.fx-track .path-stop:not(.fx-lit):not(:last-child) strong{opacity:.42}
html.fx .evolution-note{border-top-color:var(--line-c)}
@media(max-width:920px){html.fx .career-path:after{display:none}}

/* Orchestration */
html.fx .system-surface{background:linear-gradient(180deg,var(--gf),color-mix(in srgb,var(--gf) 45%,transparent)),color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--glass-shadow);border-color:var(--ac)!important}
html.fx .orchestrator-title{border-color:color-mix(in srgb,var(--ac) 40%,transparent)}
html.fx .orchestrator-halo{background:radial-gradient(circle,color-mix(in srgb,var(--ac) 24%,transparent),color-mix(in srgb,var(--ac) 7%,transparent) 45%,transparent 74%);opacity:.8}
html.fx .orchestrator-img{filter:saturate(1.04) drop-shadow(0 20px 46px rgb(0 0 0 / calc(var(--sa)*.7)))}
html.fx .connection-svg path{stroke:var(--ac);stroke-width:1.4;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ac) 60%,transparent))}
html.fx .connection-svg .ghost{stroke:var(--line-c);filter:none}
html.fx .agent img{filter:saturate(1.04) contrast(1.02) drop-shadow(0 14px 26px rgb(0 0 0 / calc(var(--sa)*.6)));transition:translate .7s var(--ease)}
html.fx .agent:hover img{translate:0 -8px}
html.fx .agent-light{background:radial-gradient(circle,color-mix(in srgb,var(--l1) 26%,transparent),color-mix(in srgb,var(--l1) 7%,transparent) 40%,transparent 74%);opacity:.5;transition:opacity .5s ease}
html.fx .agent:hover .agent-light{opacity:1}
html.fx .agent-label{left:5px;right:5px;border-radius:16px;padding:12px 12px 10px;transition:border-color .4s ease}
html.fx .agent:hover .agent-label{border-color:var(--ac)}
html.fx .agent-label small:before{background:var(--ac)}

/* AMB */
html.fx .amb-story{gap:6px}
html.fx .amb-story li{padding:10px 14px;border-left:0;border-radius:14px;border:1px solid transparent;transition:opacity .6s ease,background .6s ease,border-color .6s ease}
html.fx .amb[data-story-step] .amb-story li{opacity:.62}
html.fx .amb[data-story-step="1"] .amb-story li:nth-child(1),html.fx .amb[data-story-step="2"] .amb-story li:nth-child(2),html.fx .amb[data-story-step="3"] .amb-story li:nth-child(3){opacity:1;background:linear-gradient(180deg,var(--gf),color-mix(in srgb,var(--gf) 45%,transparent));border-color:color-mix(in srgb,var(--ac) 55%,transparent);box-shadow:var(--glass-shadow)}
html.fx .memory-haze{background:radial-gradient(circle,color-mix(in srgb,var(--l1) 26%,transparent),color-mix(in srgb,var(--l1) 8%,transparent) 34%,transparent 70%)}
html.fx .memory-orbit{border-color:var(--line-c)}
html.fx .memory-core{background:radial-gradient(circle at 34% 26%,rgb(255 255 255 / .34),rgb(255 255 255 / .06) 36%,color-mix(in srgb,var(--bg) 40%,transparent) 72%);border-color:color-mix(in srgb,var(--ac) 55%,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -18px 34px color-mix(in srgb,var(--ac) 14%,transparent),0 0 70px color-mix(in srgb,var(--ac) 22%,transparent)}
html.fx .memory-core:before{border-color:color-mix(in srgb,var(--ac) 30%,transparent)}
html.fx .memory-core:after{border-color:var(--line-c)}
html.fx .memory-node{border-radius:16px;transition:opacity .6s ease,border-color .6s ease,box-shadow .6s ease,scale .8s var(--ease)}
html.fx .amb[data-story-step] .memory-node.is-active{border-color:var(--ac);scale:1.06;box-shadow:var(--glass-shadow),0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent),0 24px 60px -18px color-mix(in srgb,var(--ac) 55%,transparent)}
html.fx .amb-svg .base{stroke:var(--line-c)}
html.fx .amb-svg .memory-route{stroke:var(--ac);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ac) 70%,transparent));transition:opacity .6s ease}

/* Panels: hover, pointer light and lit edge. */
html.fx :is(.work-card,.stack-card,.timeline,.contact-links){position:relative}
html.fx :is(.work-card,.stack-card){transition:opacity 1s var(--ease),transform 1.2s var(--ease),border-color .4s ease}
html.fx :is(.work-card,.stack-card,.timeline,.contact-links)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / calc(.06 + var(--hi)*.3)),transparent 62%);opacity:0;transition:opacity .5s ease;pointer-events:none}
html.fx :is(.work-card,.stack-card,.timeline,.contact-links)::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),var(--ac),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .5s ease;pointer-events:none}
html.fx :is(.work-card,.stack-card,.timeline,.contact-links):hover::after,html.fx :is(.work-card,.stack-card,.timeline,.contact-links):hover::before{opacity:1}
html.fx :is(.work-card,.stack-card,.timeline,.contact-links)>*{position:relative;z-index:1}

/* Work */
html.fx #work .work-grid{gap:20px}
html.fx #work .work-card{border-radius:26px;padding:26px}
html.fx #work .work-card[data-work="agents"]{border-radius:36px;padding:44px 48px;align-items:center}
html.fx .work-card:hover,html.fx .work-card:focus-visible{color:inherit}
html.fx .work-art{overflow:visible}
html.fx .work-art:after{display:none}
html.fx .work-art .art-halo{background:radial-gradient(circle,color-mix(in srgb,var(--l2) 34%,transparent),color-mix(in srgb,var(--l2) 9%,transparent) 44%,transparent 72%);filter:blur(22px)}
html.fx .work-art img{filter:saturate(1.04) drop-shadow(0 26px 40px rgb(0 0 0 / calc(var(--sa)*.7 + .12)));transition:translate .9s var(--ease),scale .9s var(--ease)}
html.fx .work-card:hover .work-art img{translate:0 -6px;scale:1.03}
html.fx .work-card .work-go{color:var(--ac);border-bottom-color:color-mix(in srgb,var(--ac) 45%,transparent)}
html.fx .work-toggle{border-color:color-mix(in srgb,var(--ac) 40%,transparent);background:color-mix(in srgb,var(--ac) 8%,transparent)}
html.fx .work-toggle:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ink)}
html.fx .work-toggle[aria-expanded="true"]{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 18%,transparent)}
html.fx .work-region{border-top-color:var(--line-c)}
html.fx .work-source a{color:var(--ac)}
html.fx #work .work-card[data-reveal]:nth-child(3){transition-delay:.1s}

/* Experience */
html.fx .timeline{border-radius:28px;padding:6px 30px}
html.fx .role{border-bottom-color:var(--line-c)}
html.fx .role:last-child{border-bottom:0}
html.fx .role-mark{border-color:var(--ac);transition:background .4s ease,box-shadow .4s ease}
html.fx .role:hover .role-mark{background:var(--ac);box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 18%,transparent)}

/* Stack */
html.fx .stack-grid{gap:20px}
html.fx .stack-card{border-radius:26px;padding:26px 28px}
html.fx .stack-art:before{background:radial-gradient(circle,color-mix(in srgb,var(--l2) 34%,transparent),color-mix(in srgb,var(--l2) 8%,transparent) 45%,transparent 72%)}
html.fx .stack-art img{filter:saturate(1.04) drop-shadow(0 16px 30px rgb(0 0 0 / calc(var(--sa)*.6 + .1)));transition:translate .8s var(--ease),scale .8s var(--ease)}
html.fx .stack-card:hover .stack-art img{translate:0 -5px;scale:1.05}
html.fx .stack-card[data-reveal]:nth-child(2){transition-delay:.08s}
html.fx .stack-card[data-reveal]:nth-child(3){transition-delay:.16s}
html.fx .stack-card[data-reveal]:nth-child(4){transition-delay:.24s}

/* Contact */
html.fx .contact-links{border-radius:28px;padding:10px 28px 26px;gap:0}
html.fx .contact-link{border-bottom-color:var(--line-c);transition:color .3s ease,border-color .3s ease,padding .5s var(--ease)}
html.fx .contact-link:hover{color:var(--ink);border-color:var(--ink);padding-left:8px}
html.fx .contact h2 .fx-w{padding-bottom:.06em}

/* Reveal: longer travel, calmer curve. */
html.fx [data-reveal]{transform:translateY(28px) scale(.99);transition:opacity .6s var(--ease),transform .8s var(--ease)}
html.fx [data-reveal].visible{transform:none}

/* Language and theme changes cross-fade. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* Compact layouts: keep the capsule and the glass, drop the pinned effects. */
@media(max-width:760px),(max-height:600px){
  html.fx .topbar,html.fx .topbar.scrolled{top:10px;width:calc(100% - 20px);height:56px!important;padding:0 8px 0 18px!important;background:linear-gradient(180deg,var(--gf),color-mix(in srgb,var(--gf) 45%,transparent)),color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%)}
  html.fx .topbar nav a[href="#amb"]{font-size:13.5px;letter-spacing:0}
  html.fx .topbar .nav-cta{padding:0 14px;font-size:13px}
  html.fx .fx-navpill{display:none}
  html.fx body{background:var(--bg)}
  html.fx .evolution{border-radius:30px 30px 0 0}
  html.fx .hero-facts{padding:4px 18px!important;border:1px solid var(--glass-line)!important}
  html.fx .hero-fact{padding:14px 0!important;border-bottom-color:var(--line-c)}
  html.fx .hero-fact:last-child{border-bottom:0}
  html.fx #work .work-card,html.fx #work .work-card:last-child{border-radius:24px!important;background:var(--gf)!important;border-width:1px!important;padding:22px!important}
  html.fx .stack-card{border-radius:22px!important;background:var(--gf)!important;padding:18px!important}
  html.fx .timeline{padding:2px 20px;border-radius:22px}
  html.fx .contact-links{padding:6px 20px 22px;border-radius:22px}
  html.fx .agent{border-color:var(--glass-line)!important;background:var(--gf)!important}
  html.fx .agent-label{border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  html.fx .memory-node{background:var(--gf)}
  html.fx .text-link{min-height:46px;padding:0 18px}
}

/* Preference modes: solid surfaces, no moving light. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html.fx :is(.topbar.scrolled,.evolution,.work-card,.stack-card,.timeline,.contact-links,.memory-node,.memory-core,.agent-label,.orchestrator-title,.system-surface,.text-link,.hero-facts){background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--t3)}
  html.fx .fx-ambient{display:none}
}
@media(prefers-reduced-motion:reduce){
  html.fx{transition:none}
  html.fx :is(.eyebrow,.hero-sub,.hero-actions,.hero-facts,.hero-figure,.topbar){animation:none}
  html.fx .fx-w{opacity:1;translate:none;filter:none}
  html.fx .fx-lw{opacity:1}
}

/* Heavier weight is wider: bring display sizes down a step. */
html.fx .section-title{font-size:clamp(44px,5.3vw,82px)}
html.fx .amb-copy h2{font-size:clamp(46px,5.4vw,80px)}
html.fx .amb[data-story-step] .amb-story li{opacity:.72}
html.fx .amb[data-story-step] .memory-node{opacity:.8}
html.fx .amb[data-story-step] .memory-node.is-active{opacity:1}
html.fx .amb-copy h2>.fx-w,html.fx .contact h2>.fx-w{color:var(--ink)}
html.fx :is(.contact h2,.amb-copy h2) span .fx-w{color:inherit}

/* ---------- Parallax layers ---------- */
@media(min-width:921px) and (min-height:741px){
  html.fx .hero-visual{perspective:1100px}
  html.fx .hero-figure{transform-origin:50% 78%;transform:translateX(-50%) translate3d(0,var(--hero-figure-depth,0px),0) rotateY(calc(var(--px,0)*15deg)) rotateX(calc(var(--py,0)*-9deg))}
  html.fx .hero-ring{translate:calc(var(--px,0)*18px) calc(var(--py,0)*11px)}
}
html.fx .work-art img{translate:0 calc(var(--par,0)*-22px)}
html.fx .work-card:hover .work-art img{translate:0 calc(var(--par,0)*-22px - 6px)}
html.fx .stack-art img{translate:0 calc(var(--par,0)*-12px)}
html.fx .stack-card:hover .stack-art img{translate:0 calc(var(--par,0)*-12px - 5px)}
.fx-ghost{display:none}
html.fx .fx-ghost{display:block;position:absolute;right:-1vw;top:2vh;z-index:-1;font-size:clamp(200px,30vw,460px);line-height:.8;font-weight:700;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 7%,transparent);translate:0 calc(var(--par,0)*140px);pointer-events:none;user-select:none}
@media(max-width:760px){html.fx .fx-ghost{font-size:52vw;top:1vh}}
@media(prefers-reduced-motion:reduce){html.fx :is(.hero-figure,.hero-ring,.fx-ghost,.work-art img,.stack-art img){translate:none}}

/* ---------- Rest portal: opens where the cursor comes to rest ---------- */
.fx-rest{display:none}
@media all{
  html.fx .fx-rest{display:block;position:fixed;left:0;top:0;width:136px;height:136px;margin:-68px 0 0 -68px;z-index:55;pointer-events:none;translate:var(--rx,-300px) var(--ry,-300px)}
  html.fx .fx-rest>*{position:absolute;inset:0;border-radius:50%}
  html.fx .fx-rest-halo{inset:-46px;background:radial-gradient(circle,color-mix(in srgb,var(--l1) 55%,transparent),color-mix(in srgb,var(--l2) 18%,transparent) 45%,transparent 70%);opacity:0;scale:.4;transition:opacity .18s ease,scale .18s ease}
  html.fx .fx-rest-disc{overflow:hidden;background:radial-gradient(90% 70% at 50% 108%,#ffd02e,rgba(255,180,0,.35) 45%,#0b0b12 78%);box-shadow:0 26px 50px -16px rgb(0 0 0 / .55),inset 0 2px 0 rgb(255 255 255 / .35),inset 0 -14px 26px rgb(0 0 0 / .45);scale:0;opacity:0;transition:scale .16s cubic-bezier(.5,0,.8,.3),opacity .16s ease}
  /* The ring is a conic highlight masked to a 2px band, so light travels round the rim. */
  html.fx .fx-rest-ring{inset:-5px;padding:2px;background:conic-gradient(from 0deg,rgb(255 255 255 / .95),rgb(255 255 255 / .15) 25%,#ffd02e 50%,rgb(255 255 255 / .15) 75%,rgb(255 255 255 / .95));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);scale:.2;opacity:0;transition:scale .16s ease,opacity .16s ease;animation:fx-ring-spin 5s linear infinite}
  @keyframes fx-ring-spin{to{rotate:360deg}}
  html.fx .fx-rest-ripple{border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);opacity:0}
  html.fx .fx-rest-peek{position:absolute;left:50%;bottom:0;width:168px;margin-left:-84px;transform:translateY(105%);transform-origin:50% 85%;transition:transform .14s ease}
  html.fx .fx-rest-peek img{display:block;width:100%;margin-bottom:-104px}
  html.fx .fx-rest-peek svg{display:block;width:84px;margin:0 auto -6px}
  html.fx[data-mascot="robot"] .fx-rest-peek img,html.fx:not([data-mascot="robot"]) .fx-rest-peek svg{display:none}
  /* Open: spring out, then the figure rises and nods. About 750ms end to end. */
  html.fx .fx-rest[data-open="true"] .fx-rest-halo{opacity:1;scale:1;transition:opacity .5s ease,scale .7s cubic-bezier(.16,1,.3,1)}
  html.fx .fx-rest[data-open="true"] .fx-rest-disc{scale:1;opacity:1;transition:scale .56s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
  html.fx .fx-rest[data-open="true"] .fx-rest-ring{scale:1;opacity:1;transition:scale .62s cubic-bezier(.34,1.56,.64,1) .04s,opacity .3s ease}
  html.fx .fx-rest[data-open="true"] .fx-rest-ripple{animation:fx-ripple .9s cubic-bezier(.16,1,.3,1) .08s}
  @keyframes fx-ripple{from{opacity:.7;scale:.7}to{opacity:0;scale:1.9}}
  html.fx .fx-rest[data-open="true"] .fx-rest-peek{transform:translateY(0);transition:transform .58s cubic-bezier(.34,1.56,.64,1) .16s;animation:fx-nod .5s cubic-bezier(.34,1.56,.64,1) .68s}
  html.fx[data-mascot="robot"] .fx-rest[data-open="true"] .fx-rest-peek{animation:none}
  html.fx .fx-rest[data-open="true"] .fx-hat{animation:fx-tip .52s cubic-bezier(.34,1.56,.64,1) .68s}
  html.fx .fx-hat{transform-box:fill-box;transform-origin:10% 100%}
  @keyframes fx-nod{40%{rotate:-9deg}100%{rotate:0deg}}
  @keyframes fx-tip{45%{transform:rotate(-32deg) translateY(-3px)}100%{transform:none}}
}
@media(prefers-reduced-motion:reduce){html.fx .fx-rest{display:none}}

/* ---------- 02 -> 03: iris transition. The dark stage opens from the "AI Systems" stop. ---------- */
html.fx[data-theme="bright"] .evolution{overflow:clip}
html.fx[data-theme="bright"] .fx-iris{inset:auto;left:var(--ix,80%);top:var(--iy,90%);width:calc(var(--iR,1000px)*2);height:calc(var(--iR,1000px)*2);margin:calc(var(--iR,1000px)*-1) 0 0 calc(var(--iR,1000px)*-1);border-radius:50%;clip-path:none;background:#0a0a0c;box-shadow:0 0 0 3px #ffd02e,0 0 90px 24px rgba(255,208,46,.5);transform:scale(.0001);will-change:transform;backface-visibility:hidden}
.fx-iris-cap{display:none}
html.fx[data-theme="bright"] .fx-iris-cap{display:block;position:absolute;left:0;right:0;top:calc(var(--iy,90%) + 21vh - .5em);z-index:6;text-align:center;font-size:clamp(56px,8.4vw,128px);line-height:1;font-weight:600;letter-spacing:-.045em;color:#f7f6f1;opacity:0;pointer-events:none;will-change:transform,opacity;background:linear-gradient(180deg,#fff 30%,#ffd02e 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.lang-zh .fx-iris-cap{letter-spacing:-.02em}
/* The flying capsule is retired in this theme; both labels stay in place. */
html.fx[data-theme="bright"] .system-object-layer{display:none!important}
html.fx[data-theme="bright"] .system-motion .path-stop:last-child strong,html.fx[data-theme="bright"] .system-motion .orchestrator-title{opacity:1}
html.fx[data-theme="bright"] .system-motion .path-stop:last-child:before{opacity:1}
html.fx[data-theme="bright"] .path-stop:last-child.fx-lit:before{background:#ffd02e;border-color:#ffd02e;box-shadow:0 0 0 5px rgba(255,208,46,.28),0 0 22px rgba(255,208,46,.9)}
@media(max-width:920px),(max-height:740px),(prefers-reduced-motion:reduce){html.fx[data-theme="bright"] :is(.fx-iris,.fx-iris-cap){display:none}}
@media(min-width:921px) and (min-height:741px) and (prefers-reduced-motion:no-preference){
  /* Room below the timeline, so the iris finishes before the next scene arrives. */
  html.fx.js[data-theme="bright"] .evolution{padding-bottom:calc(var(--section-space) + 18vh)}
}
html.fx[data-theme="bright"] .evolution{margin-bottom:-1px}


/* ---------- AMB: a wired network. Current Context is the hub; cables run to each memory. ---------- */
html.fx[data-theme="bright"] .amb :is(.memory-node,.memory-core){background:linear-gradient(180deg,#ffffff,#edf1fc)!important;border:1px solid #fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 26px 50px -22px rgba(3,8,70,.75)}
html.fx[data-theme="bright"] .amb :is(.memory-node,.memory-core) strong{color:#0b0b0d!important;text-shadow:none}
html.fx[data-theme="bright"] .amb .memory-node span{color:#41465c!important}
html.fx[data-theme="bright"] .amb :is(.memory-node small,.memory-core span){color:#1c3cff!important;font-weight:650;opacity:1}
html.fx[data-theme="bright"] .amb .memory-core:before,html.fx[data-theme="bright"] .amb .memory-core:after{display:none}
.fx-net{display:none}
/* Pinned desktop story */
html.fx[data-theme="bright"] .amb[data-story-step] :is(.amb-svg,.pulse-dot,.memory-orbit){display:none}
html.fx[data-theme="bright"] .amb[data-story-step] .fx-net{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-haze{left:50%;top:50%;background:radial-gradient(circle,rgba(150,180,255,.4),rgba(110,150,255,.12) 38%,transparent 70%)}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-core{left:calc(50% - 124px);top:calc(50% - 62px);width:248px;height:124px;transform:none;border-radius:24px;z-index:6;box-shadow:0 0 0 3px #ffd84a,0 0 0 12px rgba(255,216,74,.16),0 34px 60px -20px rgba(3,8,70,.85),0 0 70px rgba(255,216,74,.4);opacity:var(--en,1);scale:calc(.9 + var(--en,1)*.1)}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-core strong{font-size:23px;letter-spacing:-.025em}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-core span{font-size:11px;letter-spacing:.14em;margin-top:8px}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-node{width:224px;min-width:0;padding:16px 18px 18px;border-radius:18px;z-index:6;right:auto;bottom:auto;scale:1;opacity:calc(var(--en,1)*.62);translate:calc((1 - var(--en,1))*var(--dx,0px)) calc((1 - var(--en,1))*var(--dy,0px));transition:opacity .55s ease,box-shadow .55s ease,border-color .55s ease;will-change:opacity,translate}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-node span{height:auto;margin-top:5px;overflow:visible;opacity:1;font-size:13px}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-node strong{font-size:19px;letter-spacing:-.02em}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-node small{display:flex;align-items:center;gap:8px;margin-bottom:8px}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-node small:before{content:"";width:8px;height:8px;border-radius:50%;background:#1c3cff;box-shadow:0 0 0 4px rgba(28,60,255,.16)}
html.fx[data-theme="bright"] .amb[data-story-step] .n1{left:0;top:7%;--dx:70px;--dy:60px}
html.fx[data-theme="bright"] .amb[data-story-step] .n2{left:calc(100% - 224px);top:7%;--dx:-70px;--dy:60px}
html.fx[data-theme="bright"] .amb[data-story-step] .n3{left:0;top:auto;bottom:7%;--dx:70px;--dy:-60px}
html.fx[data-theme="bright"] .amb[data-story-step] .n4{left:calc(100% - 224px);top:auto;bottom:7%;--dx:-70px;--dy:-60px}
html.fx[data-theme="bright"] .amb[data-story-step] .n5{left:calc(50% - 112px);top:0;--dx:0px;--dy:70px}
/* Selected card: full strength, yellow ring, breathing halo. */
@keyframes fx-halo{from{box-shadow:0 0 0 3px #ffd84a,0 0 0 8px rgba(255,216,74,.3),0 30px 56px -20px rgba(3,8,70,.85),0 0 40px rgba(255,216,74,.45)}to{box-shadow:0 0 0 3px #ffd84a,0 0 0 18px rgba(255,216,74,0),0 30px 56px -20px rgba(3,8,70,.85),0 0 70px rgba(255,216,74,.75)}}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-node.is-active{opacity:var(--en,1);border-color:#ffd84a;animation:fx-halo 1.5s ease-out infinite}
html.fx[data-theme="bright"] .amb[data-story-step] .memory-node.is-active small:before{background:#ffb400;box-shadow:0 0 0 4px rgba(255,180,0,.28)}
/* Cables */
.fx-net .c-base{fill:none;stroke:rgba(255,255,255,.42);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--en,1))}
.fx-net .c-live{fill:none;stroke:#ffd84a;stroke-width:3.5;stroke-linecap:round;opacity:0;transition:opacity .55s ease;filter:drop-shadow(0 0 6px rgba(255,216,74,.9))}
.fx-net .c-port{fill:#1a2fe0;stroke:rgba(255,255,255,.75);stroke-width:2;opacity:var(--en,1);transition:fill .5s ease,stroke .5s ease}
.fx-net .c-pulse{fill:#fff;opacity:0;transition:opacity .4s ease;filter:drop-shadow(0 0 7px #ffd84a)}
.memory-stage[data-active="n1"] .fx-net [data-for="n1"] .c-live,.memory-stage[data-active="n5"] .fx-net [data-for="n5"] .c-live,.memory-stage[data-active="n2"] .fx-net [data-for="n2"] .c-live{opacity:1}
.memory-stage[data-active="n1"] .fx-net [data-for="n1"] .c-pulse,.memory-stage[data-active="n5"] .fx-net [data-for="n5"] .c-pulse,.memory-stage[data-active="n2"] .fx-net [data-for="n2"] .c-pulse{opacity:1}
.memory-stage[data-active="n1"] .fx-net [data-for="n1"] .c-port,.memory-stage[data-active="n5"] .fx-net [data-for="n5"] .c-port,.memory-stage[data-active="n2"] .fx-net [data-for="n2"] .c-port{fill:#ffd84a;stroke:#fff}
/* Unpinned layouts: the hub becomes a card at the top of the list. */
html.fx[data-theme="bright"] .amb:not([data-story-step]) .memory-core{width:100%!important;height:auto!important;border-radius:20px;padding:22px 18px;margin:0 0 14px!important;box-shadow:0 0 0 3px #ffd84a,0 24px 50px -18px rgba(3,8,70,.8)}
@media(prefers-reduced-motion:reduce){html.fx .amb .memory-node.is-active{animation:none}.fx-net .c-pulse{display:none}}
/* Every story step stays fully legible; the active one is marked by its panel, not by dimming the others. */
html.fx .amb[data-story-step] .amb-story li{opacity:1}

/* The "AI Systems" stop stays above the growing disc and switches to light type once the disc is behind it. */
html.fx[data-theme="bright"] .career-path .path-stop:last-child :is(small,strong,span){position:relative;z-index:7;mix-blend-mode:difference;color:#fff!important;opacity:1!important}
html.fx[data-theme="bright"] .career-path .path-stop:last-child small{color:rgba(255,255,255,.72)!important}
html.fx[data-theme="bright"] .career-path .path-stop:last-child span{color:rgba(255,255,255,.82)!important}
/* Navigation tucks away while reading downward and returns on any upward scroll, so it never sits over a heading. */
html.fx .topbar{transition:width .7s var(--ease),background .4s ease,border-color .4s ease,box-shadow .4s ease,transform .5s var(--ease)}
html.fx .topbar.fx-nav-hide:not(:focus-within){transform:translateY(-150%)}
@media(prefers-reduced-motion:reduce){html.fx .topbar{transition:none}}

/* Text the disc is about to reach fades out first, so nothing is ever cut in half. */
html.fx.js[data-theme="bright"] :is(.evolution-grid,.path-stop:not(:last-child)){opacity:clamp(0,calc(1 - var(--fd,0)),1)}
@media(max-width:920px),(max-height:740px),(prefers-reduced-motion:reduce){html.fx.js[data-theme="bright"] :is(.evolution-grid,.path-stop:not(:last-child)){opacity:1}}
@media(max-width:760px){html.fx .hero-copy h1{font-size:clamp(44px,12.4vw,70px)!important}}

/* ---------- Later scenes settle centred. Native scroll-snap, switched on by site-fx.js only inside this zone, so the pinned scenes above stay free. ---------- */
@media(min-width:921px) and (min-height:741px) and (prefers-reduced-motion:no-preference){
  html.fx.fx-snap{scroll-snap-type:y mandatory}
  html.fx :is(.work-head,.work-card,.experience,.stack,.contact){scroll-snap-align:center;scroll-snap-stop:always}
}

/* Hero to Evolution: a shorter pinned stretch, so the next sheet arrives sooner. */
@media(min-width:921px) and (min-height:741px) and (prefers-reduced-motion:no-preference){
  html.fx.js .hero-journey{min-height:150vh}
}