/* Portrait and career disclosures: stable hit areas, independently moving planes. */
.intro-portrait { position: relative; isolation: isolate; width: 100%; max-width: 640px; min-width: 0; aspect-ratio: 1.05; justify-self: end; }
.portrait-plane { position: absolute; inset: 22% 21% 21%; z-index: 2; }
.portrait-trigger { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--surface); color: #fff; cursor: pointer; text-align: left; box-shadow: 0 35px 55px -35px #000; transform: perspective(1100px) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg)); }
.portrait-trigger img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; clip-path: polygon(0 0,95% 0,100% 10%,100% 100%,5% 100%,0 90%); }
.portrait-action { position: absolute; display: flex; justify-content: space-between; gap: 10px; inset: auto 0 0; padding: 22px 18px 12px; background: linear-gradient(transparent,#000b); font: 500 10px/1.6 var(--sans); letter-spacing: .12em; }
.portrait-action > span { font-size: 22px; line-height: 1; transition: rotate .5s ease; }
[data-portrait-open="true"] .portrait-action > span { rotate: 45deg; }
.portrait-trigger:focus-visible, .career-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.portrait-orbit { position: absolute; inset: 17% 0; border: 1px solid var(--line); pointer-events: none; }
.portrait-orbit-back { transform: perspective(900px) rotateY(calc(var(--depth-ry,0deg) * -2)) rotate(-9deg); clip-path: polygon(0 0,100% 0,100% 38%,62% 38%,62% 100%,0 100%); }
.portrait-orbit-front { inset: 22% 12% 18% -2%; transform: rotate(8deg); border-color: color-mix(in srgb,var(--ink) 10%,transparent); }
.portrait-orbit::after { content: ""; position: absolute; width: 28px; height: 28px; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); inset: -1px auto auto -1px; }
.portrait-abilities { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s; }
[data-portrait-open="true"] .portrait-abilities { opacity: 1; visibility: visible; }
.ability-labels { list-style: none; margin: 0; padding: 0; }
.ability-labels li { position: absolute; font: 500 clamp(18px,1.7vw,26px)/1.3 var(--sans); letter-spacing: -.035em; opacity: 0; transform: perspective(700px) translate3d(0,22px,-48px) rotateX(12deg) scale(.91); transform-origin: center; transition: opacity .3s ease, transform .65s cubic-bezier(.2,.8,.2,1); transition-delay: 0s; }
.ability-labels .ability-parallax { pointer-events: auto; }
[data-portrait-open="true"] .ability-labels li { opacity: 1; transform: perspective(700px) translate3d(0,0,0) rotateX(0) scale(1); transition-delay: var(--ability-enter-delay,0ms); }
/* One readable entrance sequence, replayed on every reveal. Closing has no delay. */
.ability-fx { --ability-enter-delay: 0ms; }
.ability-vfx { --ability-enter-delay: 180ms; }
.ability-lighting { --ability-enter-delay: 360ms; }
.ability-lookdev { --ability-enter-delay: 540ms; }
.ability-cfx { --ability-enter-delay: 720ms; }
.ability-groom { --ability-enter-delay: 900ms; }
.text-selection-active .ability-labels li { transition: none; }
.ability-labels span { display: block; }
.ability-fx { top: 4%; left: 5%; --ability-color: var(--skill-fx); --drift-x: 5px; --drift-y: -6px; }
.ability-vfx { top: 1%; right: 3%; --ability-color: var(--skill-vfx); --drift-x: -5px; --drift-y: 5px; --drift-duration: 9s; --drift-delay: -3s; }
.ability-cfx { top: 45%; right: 0; --ability-color: var(--skill-character); --drift-x: -3px; --drift-y: -4px; --drift-duration: 10s; --drift-delay: -5s; }
.ability-lookdev { bottom: 26%; left: 0; --ability-color: var(--skill-light); --drift-x: 3px; --drift-y: 5px; --drift-duration: 11s; --drift-delay: -4s; }
.ability-groom { bottom: 19%; right: 1%; --ability-color: var(--skill-character); --drift-x: -4px; --drift-y: 4px; --drift-duration: 9.5s; --drift-delay: -2s; }
.ability-lighting { bottom: 0; left: 20%; --ability-color: var(--skill-light); --drift-x: 4px; --drift-y: -3px; --drift-duration: 12s; --drift-delay: -6s; }
.intro-career { padding-bottom: 0; }
.intro-career-stage { position: relative; isolation: isolate; padding-block: 0 290px; }
.career-invitation { position: absolute; top: 30px; left: 0; font: 500 clamp(24px,2.5vw,36px)/1.35 var(--sans); letter-spacing: -.045em; transition: opacity .3s; }
.career-invitation > span { color: var(--muted); font-size: .68em; letter-spacing: -.025em; }
.intro-career-stage:not([data-active-reveal=""]) .career-invitation { opacity: 0; }
.intro-career-stage .intro-facts { margin: 0; }
.intro-career-stage .intro-fact { display: block; padding: 0; opacity: calc(1 - var(--card-recede,0) * .38); }
.career-card-plane { position: relative; isolation: isolate; display: grid; grid-template-rows: 25px 165px minmax(65px,auto) 65px 40px; min-width: 0; height: 100%; margin: 0; padding: 26px; transform: perspective(1200px) translate3d(0,calc(var(--card-recede,0) * 16px - var(--card-hover,0) * 9px),calc(var(--card-hover,0) * 48px - var(--card-recede,0) * 155px)); transform-origin: 50% 50%; }
.intro-career-stage .intro-fact::before, .intro-career-stage .intro-fact::after { content: none; }
.intro-career-stage .intro-facts dd[data-selectable] { font-size: clamp(96px,10.5vw,158px); }
.intro-career-stage .career-action { grid-row: 5; grid-column: 1 / -1; font: inherit; letter-spacing: normal; margin-top: 12px; }
.career-trigger { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font: 500 12px/1.4 var(--sans); letter-spacing: .025em; text-align: left; cursor: pointer; }
.career-trigger > span { color: var(--ink); font-size: 22px; line-height: 1; transition: rotate .45s ease; }
.career-trigger[aria-expanded="true"] { color: var(--ink); }
.career-trigger[aria-expanded="true"] > span { rotate: 45deg; }
.career-cloud { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.career-cloud[aria-hidden="false"] { opacity: 1; visibility: visible; }
.career-cloud > h3 { position: absolute; top: 14px; margin: 0; left: 0; font: 500 clamp(26px,2.8vw,42px)/1.2 var(--display); letter-spacing: -.025em; }
.career-cloud-top, .career-cloud-bottom { position: absolute; left: 0; right: 0; }
.career-cloud-top { top: clamp(112px,10vw,132px); }
.career-cloud-bottom { bottom: 10px; }
.career-cloud-band { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 52px 42px; margin: 0; padding: 20px 25px; }
.career-cloud-band li { position: relative; transform: translate3d(var(--cloud-x,0px),calc(var(--cloud-y,0px) + 24px),0) scale(calc(var(--cloud-scale,1) * .94)); transform-origin: 50% 50%; transition: transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--reveal-order,0) * 18ms); }
.career-cloud-bottom .career-cloud-band li { transform: translate3d(var(--cloud-x,0px),calc(var(--cloud-y,0px) - 24px),0) scale(calc(var(--cloud-scale,1) * .94)); }
.career-cloud[aria-hidden="false"] .career-cloud-band li { transform: translate3d(var(--cloud-x,0px),var(--cloud-y,0px),0) scale(var(--cloud-scale,1)); }
.career-cloud-band li[data-cloud-depth="near"] { z-index: 3; }
.career-cloud-band li[data-cloud-depth="middle"] { z-index: 2; opacity: .94; }
.career-cloud-band li[data-cloud-depth="far"] { z-index: 1; opacity: .84; }
.career-cloud[aria-hidden="false"] li, .career-cloud[aria-hidden="false"] > h3 { pointer-events: auto; }
.career-cloud-band span[data-selectable] { display: block; }
.career-software { justify-content: space-around; gap: 50px 34px; }
.career-software li { font: 500 clamp(27px,3.1vw,48px)/1.35 var(--display); letter-spacing: -.02em; }
.career-software li::before { content: ""; position: absolute; bottom: -9px; width: 35px; height: 1px; background: currentColor; opacity: .45; }
.career-cloud-software .career-cloud-bottom { bottom: 60px; }
.career-companies { gap: 52px 42px; padding-inline: 25px; }
.career-companies li { font: 500 clamp(18px,1.5vw,24px)/1.4 var(--sans); letter-spacing: -.03em; max-width: 250px; }
.career-companies li:nth-child(3n) { font-family: var(--display); font-size: clamp(20px,1.9vw,29px); letter-spacing: 0; }
.career-companies li::after { content: ""; display: block; width: 18px; height: 1px; margin-top: 3px; background: currentColor; opacity: .4; }
.career-cloud-companies .career-cloud-bottom { bottom: 34px; }
/* Measured, stable scatter: positions stay fixed while each text layer moves. */
@media screen and (min-width: 761px) and (hover: hover) {
  .intro-career-stage[data-company-scatter] {
    padding-top: 0;
    padding-bottom: max(290px,calc(var(--company-bottom-height,0px) + 82px));
  }
  .intro-career-stage[data-company-scatter] .career-story { min-height: max(430px,calc(clamp(112px,10vw,132px) + var(--company-top-height,0px) + 48px)); }
  .intro-career-stage[data-company-scatter] .career-companies {
    position: relative; display: block; padding: 0; height: var(--scatter-height,0px);
  }
  .intro-career-stage[data-company-scatter] .career-companies li {
    position: absolute; width: max-content; left: var(--scatter-left,0px); top: var(--scatter-top,0px);
    --cloud-x: 0px !important; --cloud-y: 0px !important;
  }
}
.career-flags { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 22px; }
.career-flags li { display: grid; grid-template-rows: 70px auto; gap: 10px; text-align: center; }
.career-flags .intro-flag-mount { height: 70px; }
.career-flags img { width: 88px; height: 62px; max-width: 100%; object-fit: contain; }
.career-flags .intro-country-name { color: var(--ink); font-size: 12px; line-height: 1.4; }
.career-cloud-countries .career-cloud-bottom { bottom: 37px; }
@media (hover:hover) and (pointer:fine) {
  html:not(.motion-paused):not(.text-selection-active) .career-flags li:hover .intro-flag-mount { transform: translateY(-6px) scale(1.4); }
  .career-flags li:hover { z-index: 2; }
}
@media (max-width: 760px) and (hover:hover) and (pointer:fine) {
  html:not(.motion-paused):not(.text-selection-active) .career-flags li:hover .intro-flag-mount { transform: translateY(-4px) scale(1.15); }
}
/* The invitation is read in three layers without losing its sentence. */
#choose-world .choice-heading h2 { max-width: 100%; }
#choose-world .choice-heading h2 .choice-title-prefix,
#choose-world .choice-heading h2 .choice-title-suffix { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); font: 500 clamp(25px,3vw,46px)/1.3 var(--sans); letter-spacing: -.04em; }
#choose-world .choice-heading h2 .choice-title-suffix { margin-top: 20px; margin-left: clamp(0px,4vw,60px); font-size: clamp(20px,2.2vw,34px); color: var(--muted); }
#choose-world .choice-heading h2 .choice-title-main { background: linear-gradient(110deg,var(--film-accent),var(--game-accent)); background-clip: text; -webkit-text-fill-color: transparent; }
.motion-paused .portrait-abilities, .motion-paused .ability-labels li, .motion-paused .career-cloud, .motion-paused .career-cloud-band li, .motion-paused .career-trigger > span, .motion-paused .portrait-action > span, .motion-paused .intro-career-stage .intro-fact { transition: none; }
@media (min-width: 761px) and (max-width: 1100px) {
  .intro-person-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .intro-career-stage { padding-block: 0 350px; }
  .intro-career-stage[data-company-scatter] { padding-top: 0; padding-bottom: max(350px,calc(var(--company-bottom-height,0px) + 82px)); }
  .intro-career-stage .career-story { min-height: max(440px,calc(clamp(112px,10vw,132px) + var(--company-top-height,0px) + 48px)); }
  .career-card-plane { padding: 20px; grid-template-rows: 25px 140px 75px 60px 42px; }
  .career-companies { gap: 48px 38px; padding-inline: 20px; }
  .career-cloud-companies .career-cloud-bottom { bottom: 38px; }
  .career-flags { gap: 14px; }
  .career-flags .intro-country-name { font-size: 11px; }
  .career-flags img { width: 76px; height: 56px; }
  .ability-labels li { font-size: 16px; }
  }
@media (max-width: 760px), (hover: none) {
  .intro-portrait { max-width: 560px; justify-self: center; }
  .intro-career-stage { display: grid; grid-template-columns: minmax(0,1fr); padding-block: 0 20px; gap: 20px; }
  .intro-career-stage .career-story { min-height: 0; }
  .career-invitation { top: 12px; font-size: 23px; }
  .intro-career-stage:not([data-active-reveal=""]) .career-invitation { opacity: 1; }
  .intro-career-stage .intro-facts { display: contents; }
  .intro-career-stage .intro-fact { opacity: 1 !important; }
  .career-card-plane { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: 25px 84px 50px 40px; padding: 22px; column-gap: 18px; transform: none; }
  .intro-career-stage .intro-fact-caption { grid-column: 1 / -1; }
  .intro-career-stage .intro-facts dd[data-selectable] { grid-column: 1; grid-row: 2 / 4; font-size: 104px; }
  .intro-career-stage .intro-facts dt { grid-column: 2; grid-row: 2; font-size: 16px; }
  .intro-career-stage .intro-fact-diagram { grid-column: 2; grid-row: 3; }
  .intro-career-stage .career-action { grid-column: 1 / -1; grid-row: 4; }
  .intro-career-stage .intro-fact-echo { top: 22%; left: 14%; right: auto; font-size: 150px; }
  [data-career-card="software"] { order: 1; } #career-panel-software { order: 2; }
  [data-career-card="companies"] { order: 3; } #career-panel-companies { order: 4; }
  [data-career-card="countries"] { order: 5; } #career-panel-countries { order: 6; }
  .career-cloud { position: relative; inset: auto; display: none; padding: 18px 8px 35px; border-bottom: 1px solid var(--line); }
  .career-cloud[aria-hidden="false"] { display: block; }
  .career-cloud > h3 { position: relative; inset: auto; font-size: 32px; margin-bottom: 54px; }
  .career-cloud-band { padding: 0; }
  .career-cloud-band li { --cloud-x: 0px !important; --cloud-y: 0px !important; --cloud-scale: 1 !important; opacity: 1 !important; }
  .career-cloud-top, .career-cloud-bottom { position: relative; inset: auto !important; }
  .career-cloud-bottom { margin-top: 28px; }
  .career-software { justify-content: space-between; }
  .career-software li { font-size: 28px; }
  .career-companies { justify-content: flex-start; gap: 20px 23px; padding: 0; }
  .career-companies li { font-size: 18px; }
  .career-companies li:nth-child(3n) { font-size: 25px; }
  .career-flags { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 14px; }
  .career-cloud-countries .career-cloud-bottom { margin-top: 24px; }
    .ability-labels li { font-size: clamp(16px,4vw,23px); }
  #choose-world .choice-heading h2 .choice-title-main { font-size: clamp(56px,15.5vw,118px); }
  #choose-world .choice-heading h2 .choice-title-prefix { font-size: 25px; }
  #choose-world .choice-heading h2 .choice-title-suffix { font-size: 20px; margin-left: 15px; }
}
@media (max-width: 360px) {
  .career-card-plane { padding: 19px; gap: 12px; }
  .intro-career-stage .intro-facts dd[data-selectable] { font-size: 89px; }
    .ability-labels li { font-size: 15px; }
  .ability-lighting { left: 8%; }
}
@media print {
  .career-cloud-band li { --cloud-x: 0px !important; --cloud-y: 0px !important; --cloud-scale: 1 !important; opacity: 1 !important; }
  .portrait-orbit, .portrait-action, .career-trigger, .career-invitation { display: none; }
  .portrait-abilities, .career-cloud { position: relative; opacity: 1; visibility: visible; display: block; }
  .career-cloud-top, .career-cloud-bottom, .career-cloud > h3 { position: relative; inset: auto; }
  .intro-career-stage, .intro-career-stage[data-company-scatter] { padding: 0; }
}

/* Role families carry colour; the surrounding page stays black and white. */
#about {
  --skill-fx: #ff8e9e;
  --skill-vfx: #8edca9;
  --skill-light: #edd58e;
  --skill-character: #9ecfff;
  --skill-composite: #c6b2ff;
  --skill-code: #89ded5;
}
[data-theme="light"] #about {
  --skill-fx: #b62442;
  --skill-vfx: #216f42;
  --skill-light: #7b590b;
  --skill-character: #1c6099;
  --skill-composite: #7144a5;
  --skill-code: #136d67;
}
[data-tone="fx"], [data-tone="red"] { color: var(--skill-fx); }
[data-tone="vfx"], [data-tone="green"] { color: var(--skill-vfx); }
[data-tone="light"], [data-tone="gold"] { color: var(--skill-light); }
[data-tone="character"], [data-tone="blue"] { color: var(--skill-character); }
[data-tone="composite"], [data-tone="violet"] { color: var(--skill-composite); }
[data-tone="code"], [data-tone="cyan"] { color: var(--skill-code); }
.ability-labels li { color: var(--ability-color,var(--ink)); }
.ability-labels .ability-fx, .ability-labels .ability-vfx {
  font: 500 clamp(58px,6.2vw,96px)/1 var(--display);
  letter-spacing: -.035em;
}
.ability-labels .ability-lighting-main { font: 500 clamp(44px,4.6vw,72px)/1.08 var(--display); letter-spacing: -.025em; }
.ability-labels .ability-lighting-rest { font: 500 clamp(15px,1.5vw,22px)/1.5 var(--sans); letter-spacing: -.025em; }
.portrait-orbit { inset: 17% 15% 16%; }
.portrait-orbit-front { inset: 25% 14% 18% 17%; }
.ability-drift { animation: ability-float var(--drift-duration,8s) ease-in-out var(--drift-delay,0s) infinite alternate; }
.intro-portrait .ability-drift { animation-play-state: paused !important; }
.intro-portrait:is([data-portrait-open="true"],[data-portrait-present="true"]) .ability-drift { animation-play-state: var(--life-state,paused) !important; }
.intro-portrait .ability-labels li:hover .ability-drift,
.text-selection-active .intro-portrait .ability-drift,
.motion-paused .intro-portrait .ability-drift,
.tab-inactive .intro-portrait .ability-drift { animation-play-state: paused !important; }
@keyframes ability-float {
  from { transform: translate3d(calc(var(--drift-x,4px) * -.5),calc(var(--drift-y,4px) * -.5),0); }
  to { transform: translate3d(var(--drift-x,4px),var(--drift-y,4px),0); }
}
.career-cloud-software .career-cloud-bottom { bottom: 65px; }
.career-cloud-software .career-cloud-bottom .career-software { max-width: 850px; margin-inline: auto; }
.career-cloud-software .career-cloud-bottom li { font-family: var(--sans); font-size: clamp(28px,3.1vw,46px); }
/* Three edge environments share a stationary clear area behind all card planes. */
.artist-intro { isolation: isolate; }
.career-atmosphere {
  --career-quiet-start: max(0px,calc(var(--career-reading-left,4.5vw) - 22px));
  --career-quiet-end: min(100%,calc(var(--career-reading-right,95.5vw) + 22px));
  position: absolute; inset: 0 auto 0 var(--career-bleed-left,calc((100% - 100vw) / 2)); width: var(--career-bleed-width,100vw); z-index: -2; overflow: hidden; pointer-events: none; user-select: none;
  mask-image: linear-gradient(transparent,#000 10%,#000 90%,transparent);
}
.career-atmosphere-content {
  position: absolute; inset: 0;
  mask-image: linear-gradient(90deg,#000,transparent var(--career-quiet-start),transparent var(--career-quiet-end),#000),linear-gradient(#000 calc(var(--career-cards-top,380px) - 110px),transparent calc(var(--career-cards-top,380px) - 55px),transparent calc(var(--career-cards-bottom,850px) + 55px),#000 calc(var(--career-cards-bottom,850px) + 110px));
  mask-composite: add;
}
.career-continuity { position: absolute; inset: 0; color: var(--ink); opacity: .075; mask-image: linear-gradient(90deg,#000,transparent 30%,transparent 70%,#000); }
.career-continuity i { position: absolute; inset: 2% auto 2% -8%; width: 28%; border: 1px solid; transform: skewY(-14deg) translateX(calc(var(--depth-x,0px) * -.3)); }
.career-continuity i + i { inset: 2% -8% 2% auto; transform: skewY(14deg) translateX(calc(var(--depth-x,0px) * .3)); }
.career-continuity i::after { content: ""; position: absolute; inset: 12% 25%; border: 1px solid; transform: skewY(8deg); }
.career-environment { position: absolute; inset: 0; opacity: 0; transform: scale(.975); transition: opacity 1s ease,transform 1.4s cubic-bezier(.22,.7,.2,1); }
.career-environment::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 48%,color-mix(in srgb,currentColor 13%,transparent),transparent 32%),radial-gradient(ellipse at 100% 58%,color-mix(in srgb,currentColor 10%,transparent),transparent 32%); }
.career-environment-idle { color: var(--ink); }
.career-environment-software { color: var(--skill-code); }
.career-environment-companies { color: var(--skill-character); }
.career-environment-countries { color: var(--skill-light); }
[data-career-environment=""] .career-environment-idle,
[data-career-environment="software"] .career-environment-software,
[data-career-environment="companies"] .career-environment-companies,
[data-career-environment="countries"] .career-environment-countries { opacity: 1; transform: scale(1); }
.career-env-side { position: absolute; top: var(--career-art-y,65%); width: clamp(390px,44vw,860px); aspect-ratio: 5 / 7; transform: translateY(-50%); transition: top .85s cubic-bezier(.2,.7,.2,1); }
.career-environment-idle .career-env-side { top: 50%; height: 88%; aspect-ratio: auto; }
.career-environment-idle { transition: opacity 1s ease,transform 1.4s cubic-bezier(.22,.7,.2,1),color .8s ease; }
#about:has([data-intro-glyph="eye"][data-glyph-open="true"]) .career-environment-idle { color: var(--skill-light); }
#about:has([data-intro-glyph="mind"][data-glyph-open="true"]) .career-environment-idle { color: var(--skill-character); }
#about:has([data-intro-glyph="artist"][data-glyph-open="true"]) .career-environment-idle { color: var(--skill-fx); }
#about:has([data-intro-glyph="technical"][data-glyph-open="true"]) .career-environment-idle { color: var(--skill-code); }
.career-env-left { left: -9%; --env-direction: 1; }
.career-env-right { right: -9%; --env-direction: -1; }
.career-env-depth { position: absolute; inset: 0; transform: translate3d(calc(var(--depth-x,0px) * var(--env-direction)),calc(var(--depth-scroll,0px) * -.5 + var(--depth-y,0px) * var(--env-direction)),0); }
.career-environment-software .career-env-depth { transform: translate3d(calc(var(--depth-x,0px) * var(--env-direction) * -1.5),calc(var(--depth-scroll,0px) * .9 - var(--depth-y,0px) * 1.8),0); }
.career-environment-companies .career-env-depth { transform: translate3d(calc(var(--depth-x,0px) * var(--env-direction) * 1.8),calc(var(--depth-scroll,0px) * -.65 + var(--depth-y,0px) * 1.2),0); }
.career-environment-countries .career-env-depth { transform: translate3d(calc(var(--depth-x,0px) * var(--env-direction) * -.8),calc(var(--depth-scroll,0px) * .5 - var(--depth-y,0px)),0) rotate(calc(var(--depth-rx,0deg) * var(--env-direction) * 2)); }
.career-idle-fold { position: absolute; inset: 12% 22%; border: 1px solid color-mix(in srgb,currentColor 12%,transparent); background: linear-gradient(110deg,transparent,color-mix(in srgb,currentColor 3%,transparent),transparent); transform: skewY(-28deg); animation: career-fold-drift 18s ease-in-out infinite alternate; }
.career-idle-fold-back { inset: 17% 33% 7% 11%; opacity: .45; animation-direction: alternate-reverse; }
.career-env-right .career-idle-fold { rotate: 180deg; }
.career-tech-stack { position: absolute; inset: 5% 8%; transform: perspective(900px) rotateY(calc(var(--env-direction) * 24deg)) rotateZ(calc(var(--env-direction) * -19deg)); }
.career-tech-stack i { --plane: 0; position: absolute; inset: calc(12% + var(--plane) * 9%) 8% calc(43% - var(--plane) * 9%); border: 1px solid color-mix(in srgb,currentColor 34%,transparent); background: linear-gradient(130deg,color-mix(in srgb,currentColor 5%,transparent),transparent 60%); animation: career-plane-travel 9s ease-in-out infinite alternate; animation-delay: calc(var(--plane) * -1.6s); }
.career-tech-stack i:nth-child(2) { --plane: 1; }
.career-tech-stack i:nth-child(3) { --plane: 2; }
.career-tech-stack i:nth-child(4) { --plane: 3; }
.career-tech-stack i::after { content: ""; position: absolute; inset: 15%; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .16; }
.career-tech-scan { position: absolute; left: 8%; right: 8%; height: 1px; top: 15%; background: linear-gradient(90deg,transparent,currentColor,transparent); opacity: .5; box-shadow: 0 0 18px currentColor; animation: career-scan-travel 10s ease-in-out infinite; }
.career-network { display: block; width: 100%; height: 100%; overflow: visible; }
.career-env-right .career-network { rotate: 180deg; }
.career-network path,.career-network circle { vector-effect: non-scaling-stroke; }
.career-network-drift { animation: career-network-drift 16s ease-in-out infinite alternate; }
.career-env-right .career-network-drift { animation-delay: -8s; }
.career-network-lines { stroke: currentColor; stroke-width: 1; opacity: .24; }
.career-network-route { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 6 94; stroke-linecap: round; opacity: .65; animation: career-network-route 18s linear infinite; }
.career-network-nodes { fill: currentColor; opacity: .4; }
.career-network-echo { stroke: currentColor; opacity: .18; animation: career-network-echo 7s ease-in-out infinite alternate; }
.career-orbital { position: absolute; inset: 18% 2%; transform: rotate(calc(var(--env-direction) * -26deg)); }
.career-orbital i { position: absolute; inset: 4%; border: 1px solid color-mix(in srgb,currentColor 35%,transparent); border-radius: 50%; }
.career-orbital i:nth-child(2) { inset: 4% 28%; animation: career-meridian-turn 20s ease-in-out infinite alternate; }
.career-orbital i:nth-child(3) { inset: 28% 4%; animation: career-latitude-turn 15s ease-in-out infinite alternate; }
.career-orbital i:nth-child(4) { inset: -8%; border-style: dashed; opacity: .35; animation: career-orbit-turn 70s linear infinite; }
.career-orbit-traveller { position: absolute; inset: 4%; border: 1px solid transparent; border-top-color: currentColor; border-radius: 50%; opacity: .5; animation: career-orbit-turn 28s linear infinite; }
.career-orbit-traveller::after { content: ""; position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 16px currentColor; }
.career-env-right .career-orbit-traveller { animation-direction: reverse; animation-delay: -14s; }
/* Hidden environments stay still; active ones inherit visibility and Pause. */
.career-atmosphere .career-environment *,.career-atmosphere .career-environment *::after { animation-play-state: paused !important; }
[data-career-environment=""] .career-environment-idle *,
[data-career-environment="software"] .career-environment-software *,
[data-career-environment="companies"] .career-environment-companies *,
[data-career-environment="countries"] .career-environment-countries * { animation-play-state: var(--life-state,paused) !important; }
.text-selection-active .career-atmosphere { --life-state: paused; }
.motion-paused .career-environment,.motion-paused .career-env-side { transition: none; }
.motion-paused .career-env-depth { transform: none; }
@keyframes career-fold-drift { from { transform: skewY(-28deg) translateY(-10px); } to { transform: skewY(-24deg) translateY(10px); } }
@keyframes career-plane-travel { from { transform: translate3d(0,-14px,0); } to { transform: translate3d(calc(var(--env-direction) * 14px),18px,0); } }
@keyframes career-scan-travel { 0%,100% { top: 16%; opacity: .1; } 50% { top: 82%; opacity: .5; } }
@keyframes career-network-drift { from { transform: translate(-8px,9px); } to { transform: translate(12px,-9px); } }
@keyframes career-network-route { to { stroke-dashoffset: -100; } }
@keyframes career-network-echo { from { stroke-width: 1; opacity: .12; } to { stroke-width: 1.5; opacity: .3; } }
@keyframes career-meridian-turn { from { transform: scaleX(.65); } to { transform: scaleX(1.5); } }
@keyframes career-latitude-turn { from { transform: scaleY(.8); } to { transform: scaleY(1.4); } }
@keyframes career-orbit-turn { to { transform: rotate(360deg); } }
[data-theme="light"] .career-environment { filter: saturate(.85); }
/* A still hit area contains a rear frame, surface and raised foreground. */
.intro-career-stage .intro-fact { --career-direction: 1; --career-accent: var(--skill-code); }
.intro-career-stage .intro-fact-teams { --career-direction: -.7; --career-accent: var(--skill-character); }
.intro-career-stage .intro-fact-countries { --career-direction: .85; --career-accent: var(--skill-light); }
.intro-career-stage .career-card-plane::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; border: 1px solid;
  clip-path: polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  background: linear-gradient(135deg,color-mix(in srgb,var(--career-accent) calc(7% + var(--card-hover,0) * 23%),var(--bg)),color-mix(in srgb,var(--career-accent) calc(var(--card-hover,0) * 9%),var(--bg)) 85%);
  border-color: color-mix(in srgb,var(--career-accent) calc(23% + var(--card-hover,0) * 47%),transparent);
  transform: perspective(1200px) translate3d(calc(var(--depth-x,0px) * .2 + var(--card-mx,0) * 6px),calc(var(--depth-scroll,0px) * .18 * var(--career-direction) - var(--card-hover,0) * 10px),0) rotateX(calc(var(--depth-rx,0deg) * .5 + var(--card-rx,0deg) * .8)) rotateY(calc(var(--depth-ry,0deg) * .5 + var(--card-ry,0deg) * .8)) scale(calc(1 + var(--card-hover,0) * .035));
}
.intro-career-stage .career-card-plane::after {
  content: ""; position: absolute; inset: 5px; z-index: -3; pointer-events: none; border: 1px solid;
  border-color: color-mix(in srgb,var(--career-accent) 34%,transparent);
  transform: perspective(1200px) translate3d(calc(var(--depth-x,0px) * -.45 - var(--card-mx,0) * 26px),calc(var(--depth-scroll,0px) * -.35 * var(--career-direction) + var(--card-hover,0) * 19px),0) rotateX(calc(var(--card-rx,0deg) * -.8)) rotateY(calc(var(--card-ry,0deg) * -.8));
  opacity: calc(.35 + var(--card-hover,0) * .4);
}
.career-card-frame {
  position: absolute; inset: 12px; z-index: 0; pointer-events: none;
  color: var(--career-accent);
  background: linear-gradient(currentColor,currentColor) left top / 30px 1px no-repeat,linear-gradient(currentColor,currentColor) left top / 1px 30px no-repeat,linear-gradient(currentColor,currentColor) right bottom / 30px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom / 1px 30px no-repeat;
  opacity: calc(.35 + var(--card-hover,0) * .35);
  transform: perspective(1100px) translate3d(calc(var(--depth-x,0px) * .35 + var(--card-mx,0) * 15px),calc(var(--depth-scroll,0px) * .3 * var(--career-direction) - var(--card-hover,0) * 16px + var(--card-my,0) * 9px),0) rotateX(calc(var(--card-rx,0deg) * .5)) rotateY(calc(var(--card-ry,0deg) * .5));
}
.intro-career-stage .intro-facts dd[data-selectable] {
  color: color-mix(in srgb,var(--career-accent) calc(var(--card-hover,0) * 65%),var(--ink));
  transform: perspective(1000px) translate3d(calc(var(--card-mx,0) * 24px),calc(var(--card-my,0) * 13px - var(--card-hover,0) * 16px),0) rotateX(calc(var(--card-rx,0deg) * .45)) rotateY(calc(var(--card-ry,0deg) * .45)) scale(calc(1 + var(--card-hover,0) * .075));
}
.intro-career-stage .intro-facts dt { transform: translate3d(calc(var(--card-mx,0) * 7px),calc(var(--depth-scroll,0px) * .08 * var(--career-direction) - var(--card-hover,0) * 4px),0); }
.intro-career-stage .intro-fact-echo { -webkit-text-stroke-color: var(--career-accent); transform: translate3d(calc(var(--card-mx,0) * -32px),calc(var(--card-my,0) * -19px + var(--card-hover,0) * 12px),0); opacity: calc(.17 + var(--card-hover,0) * .15); }
.intro-career-stage .intro-fact-diagram { stroke: var(--career-accent); transform: perspective(800px) translate3d(calc(var(--depth-x,0px) * -.6 - var(--card-mx,0) * 16px),calc(var(--depth-scroll,0px) * -.14 * var(--career-direction) - var(--depth-y,0px) * .5 - var(--card-my,0) * 9px),0) rotateX(calc(var(--card-rx,0deg) * -.8)); }
.intro-career-stage .intro-fact-diagram circle { fill: var(--career-accent); }
.intro-career-stage .intro-diagram-trace { stroke: var(--career-accent); }
.motion-paused #about .intro-fact { --card-recede: 0 !important; }
.motion-paused .career-card-plane { transform: none; }
@media (max-width: 760px), (hover: none) {
  .career-atmosphere-content { mask-image: linear-gradient(90deg,#000,transparent 16%,transparent 84%,#000); }
  .career-env-side { width: 330px; opacity: .65; }
  .career-env-left { left: -180px; }
  .career-env-right { right: -180px; }
  .career-card-frame { inset: 9px; opacity: .3; }
}
@media print { .career-atmosphere, .career-card-frame { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .ability-labels .ability-fx, .ability-labels .ability-vfx { font-size: 6.2vw; }
  .ability-labels .ability-lighting-main { font-size: 4.5vw; }
  .ability-labels .ability-lighting-rest { font-size: 13px; }
  .portrait-action { font-size: 8px; padding-inline: 10px; letter-spacing: .04em; }
}
@media (max-width: 760px), (hover: none) {
  .ability-labels .ability-fx, .ability-labels .ability-vfx { font-size: clamp(52px,15vw,82px); }
  .ability-labels .ability-lighting-main { font-size: clamp(37px,11vw,60px); }
  .ability-labels .ability-lighting-rest { font-size: 15px; }
  .ability-lighting { left: 20%; }
  .portrait-action { padding: 18px 9px 10px; font-size: 8px; letter-spacing: .03em; }
  .portrait-action > span { font-size: 18px; }
  .career-software { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px 14px; }
  .career-cloud-software .career-cloud-bottom li { font-size: 25px; }
  .career-cloud-software .career-cloud-bottom { margin-top: 35px; }
}
@media (max-width: 360px) {
  .ability-labels .ability-fx, .ability-labels .ability-vfx { font-size: 47px; }
  .ability-labels .ability-lighting-main { font-size: 35px; }
  .ability-labels .ability-lighting-rest { font-size: 13px; }
}