/* Motion language: guiding light, wind and constellations. */
:root{--motion-gold:#f0d99f;--motion-ease:cubic-bezier(.2,.75,.2,1)}
.page-leaving body{animation:codex-page-out 240ms ease-in both;pointer-events:none}

/* Celestial World Gate: the portfolio opens as a world, then hands the scene
   to the existing portrait materialization rather than replacing it. */
body.codex-intro-running{overflow:hidden}
.celestial-gate{
  --gate-exit-duration:2500ms;
  --gate-opening-duration:2180ms;
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff8df;
  background:#071827;
  isolation:isolate;
}
.gate-scenery{
  position:absolute;
  inset:-5%;
  z-index:-5;
  background:
    linear-gradient(180deg,rgba(11,31,55,.34),rgba(4,20,34,.82)),
    url('../landscape.png') center 30%/cover no-repeat;
  opacity:.72;
  transform:scale(1.08);
  animation:gate-scenery-breathe 13s ease-in-out infinite alternate;
}
.gate-starfield{
  position:absolute;
  inset:0;
  z-index:-4;
  opacity:.42;
  background:
    radial-gradient(circle at 50% 42%,rgba(126,222,244,.18),transparent 36%),
    radial-gradient(circle,#fff5c8 0 1px,transparent 1.7px) 0 0/113px 97px;
  animation:gate-stars-idle 10s ease-in-out infinite alternate;
}
.gate-cloud{
  position:absolute;
  z-index:-3;
  width:78vw;
  height:28vh;
  border-radius:50%;
  pointer-events:none;
  opacity:.36;
  background:
    radial-gradient(ellipse at 18% 58%,rgba(207,231,236,.45),transparent 27%),
    radial-gradient(ellipse at 43% 42%,rgba(213,232,234,.34),transparent 31%),
    radial-gradient(ellipse at 72% 63%,rgba(181,216,226,.28),transparent 29%);
  will-change:transform,opacity;
}
.gate-cloud-far{top:12%;left:-22%;animation:gate-cloud-far-idle 18s ease-in-out infinite alternate}
.gate-cloud-near{right:-24%;bottom:10%;transform:scale(1.18);animation:gate-cloud-near-idle 15s ease-in-out infinite alternate}
.gate-structure{
  position:relative;
  width:clamp(260px,25vw,390px);
  height:min(64vh,620px);
  min-height:440px;
  perspective:1500px;
  transform:translateY(-4vh);
  transform-style:preserve-3d;
  filter:drop-shadow(0 26px 48px rgba(0,10,19,.62));
  will-change:transform;
}
.gate-frame{
  position:absolute;
  inset:-15px;
  z-index:4;
  border:2px solid rgba(240,218,158,.68);
  border-radius:48% 48% 14px 14px;
  box-shadow:
    inset 0 0 0 8px rgba(14,52,66,.76),
    inset 0 0 0 10px rgba(228,205,143,.2),
    0 0 28px rgba(116,213,236,.15);
  pointer-events:none;
}
.gate-frame::before,.gate-frame::after{
  content:'';
  position:absolute;
  top:48%;
  width:56px;
  height:56px;
  border:1px solid rgba(239,216,153,.55);
  background:rgba(8,35,49,.82);
  transform:translateY(-50%) rotate(45deg);
  box-shadow:inset 0 0 0 7px rgba(104,206,230,.055),0 0 16px rgba(114,217,242,.12);
}
.gate-frame::before{left:-43px}
.gate-frame::after{right:-43px}
.gate-crown{
  position:absolute;
  z-index:7;
  top:-35px;
  left:50%;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  color:#f5dda2;
  border:1px solid rgba(242,219,156,.7);
  background:#0b2b3c;
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 22px rgba(123,221,243,.22);
}
.gate-crown::first-letter{transform:rotate(-45deg)}
.gate-door{
  position:absolute;
  z-index:2;
  top:2%;
  bottom:2%;
  width:48%;
  overflow:hidden;
  border:1px solid rgba(232,209,149,.44);
  background:
    linear-gradient(90deg,rgba(255,245,206,.08),transparent 22% 78%,rgba(255,245,206,.06)),
    radial-gradient(circle at 50% 42%,rgba(62,150,173,.16),transparent 34%),
    linear-gradient(180deg,#153f50,#0a293a 58%,#071f30);
  box-shadow:inset 0 0 36px rgba(2,16,27,.56);
  backface-visibility:hidden;
  will-change:transform;
}
.gate-door-left{left:2%;border-radius:100% 0 2px 10px;transform-origin:left center}
.gate-door-right{right:2%;border-radius:0 100% 10px 2px;transform-origin:right center}
.gate-door i{
  position:absolute;
  top:35%;
  width:96px;
  aspect-ratio:1;
  border:1px solid rgba(234,212,151,.42);
  transform:rotate(45deg);
  box-shadow:inset 0 0 0 13px rgba(102,210,233,.04);
}
.gate-door-left i{right:-49px}
.gate-door-right i{left:-49px}
.gate-door i::before,.gate-door i::after{
  content:'';
  position:absolute;
  inset:14px;
  border:1px solid rgba(121,217,238,.22);
  border-radius:50%;
}
.gate-door i::after{inset:32px;border-radius:0;border-color:rgba(244,220,157,.46)}
.gate-seam{
  position:absolute;
  z-index:3;
  top:9%;
  bottom:5%;
  left:50%;
  width:1px;
  background:linear-gradient(transparent,#f8e9b4 18% 78%,transparent);
  box-shadow:0 0 8px rgba(255,236,177,.62);
  transform:translateX(-50%) scaleY(.72);
  opacity:.55;
}
.gate-sigil{
  position:absolute;
  z-index:8;
  left:50%;
  top:43%;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 16px rgba(243,217,151,.38));
}
.gate-sigil i{position:absolute;inset:0;border:1px solid rgba(241,215,151,.7);border-radius:50%;animation:gate-ring 1.3s var(--motion-ease) both}
.gate-sigil i:nth-child(2){inset:13px;border-style:dashed;animation-delay:130ms;animation-direction:reverse}
.gate-sigil i:nth-child(3){inset:27px;border-radius:0;transform:rotate(45deg);animation-delay:240ms}
.gate-sigil span{font-size:27px;color:#f5dda2;animation:gate-star 1.2s 320ms var(--motion-ease) both}
.gate-threshold{
  position:absolute;
  z-index:9;
  left:50%;
  top:50%;
  width:clamp(70px,9vw,150px);
  height:76vh;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scaleX(.04);
  background:radial-gradient(ellipse at center,#fffef0 0 14%,#fff4c8 38%,rgba(154,226,241,.52) 66%,transparent 78%);
  box-shadow:0 0 36px 14px rgba(255,238,177,.38),0 0 100px 45px rgba(134,224,242,.16);
  will-change:transform,opacity;
}
.gate-copy{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:clamp(24px,4vh,48px);
  width:min(92vw,560px);
  display:grid;
  justify-items:center;
  text-align:center;
  transform:translateX(-50%);
  pointer-events:none;
}
.gate-kicker{margin:0 0 6px;font-size:9px;letter-spacing:4.6px;color:#d1e3e2;animation:gate-copy 650ms 320ms both}
.gate-copy>strong{font:500 29px var(--serif);letter-spacing:7px;animation:gate-copy 650ms 410ms both}
.gate-instruction{display:flex;align-items:center;gap:11px;margin:9px 0 0;color:rgba(231,241,238,.8);font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;animation:gate-copy 650ms 500ms both,gate-enter-prompt 2.6s 1.3s ease-in-out infinite}
.gate-instruction span{color:#f3d998;font-size:7px;filter:drop-shadow(0 0 5px rgba(243,217,152,.5))}
.gate-enter{
  position:absolute;
  z-index:10;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:transparent;
  cursor:pointer;
}
.gate-enter-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.gate-enter:focus-visible{outline:0}
.celestial-gate:has(.gate-enter:focus-visible) .gate-instruction{color:#fff3c8;text-shadow:0 0 12px rgba(123,221,242,.42)}
.celestial-gate:has(.gate-enter:hover) .gate-sigil{filter:drop-shadow(0 0 24px rgba(243,217,151,.58))}
.gate-enter:disabled{cursor:default;pointer-events:none}
.gate-skip{position:absolute;right:24px;bottom:20px;z-index:14;border:0;background:transparent;color:rgba(218,231,230,.72);font:500 10px var(--sans);letter-spacing:1px;padding:12px;cursor:pointer}
.gate-skip:is(:hover,:focus-visible){color:#fff0bd}
.gate-resonating .gate-copy{animation:gate-copy-dismiss 280ms ease-in both}
.gate-resonating .gate-skip{opacity:0;transition:opacity 180ms ease}
.gate-resonating .gate-sigil{animation:gate-sigil-resonance 420ms cubic-bezier(.2,.8,.2,1) both}
.gate-resonating .gate-frame{animation:gate-frame-resonance 420ms ease-out both}
.gate-opening{animation:celestial-gate-departure var(--gate-opening-duration) linear both}
.gate-opening .gate-structure{animation:gate-camera-cross var(--gate-opening-duration) cubic-bezier(.46,.02,.78,.46) both}
.gate-opening .gate-door-left{animation:gate-door-left-open 820ms 230ms cubic-bezier(.2,.72,.2,1) both}
.gate-opening .gate-door-right{animation:gate-door-right-open 820ms 230ms cubic-bezier(.2,.72,.2,1) both}
.gate-opening .gate-sigil{animation:gate-sigil-release 480ms ease-out both}
.gate-opening .gate-seam{animation:gate-seam-awaken 920ms 80ms ease-out both}
.gate-opening .gate-threshold{animation:gate-threshold-pass 1450ms 470ms cubic-bezier(.22,.72,.2,1) both}
.gate-opening .gate-scenery{animation:gate-world-approach var(--gate-opening-duration) cubic-bezier(.3,.2,.75,.7) both}
.gate-opening .gate-cloud-far{animation:gate-cloud-part-left 1500ms ease-in both}
.gate-opening .gate-cloud-near{animation:gate-cloud-part-right 1500ms ease-in both}

/* Repeated scenic crops create a lightweight layered landscape. */
.scene-depth{position:absolute;inset:-16px;pointer-events:none;background-image:url('../landscape.png');background-repeat:no-repeat;background-size:cover;transition:translate 1.2s ease-out;will-change:translate}
.scene-sky{z-index:-2;background-position:50% 20%;opacity:.22;filter:blur(1px) saturate(1.12);-webkit-mask-image:linear-gradient(#000 0 36%,transparent 68%);mask-image:linear-gradient(#000 0 36%,transparent 68%)}
.scene-foreground{z-index:-1;background-position:50% 72%;opacity:.2;filter:saturate(1.08) contrast(1.04);-webkit-mask-image:linear-gradient(transparent 55%,#000 83%);mask-image:linear-gradient(transparent 55%,#000 83%)}

/* Persistent chapter compass. */
.chapter-nav{position:fixed;z-index:20;right:24px;top:50%;display:grid;gap:14px;transform:translateY(-50%)}
.chapter-nav a{position:relative;width:13px;height:13px;border:1px solid #ead69a88;transform:rotate(45deg);background:#153b4baa;box-shadow:0 0 0 0 #edd99a00;transition:transform 280ms var(--motion-ease),background 280ms ease,box-shadow 280ms ease}
.chapter-nav a:after{content:'';position:absolute;inset:3px;background:#f1d99b;opacity:0;transition:opacity 260ms ease}
.chapter-nav a.active{background:#426b6c;box-shadow:0 0 0 5px #ead69a18,0 0 14px #edd99a55;transform:rotate(45deg) scale(1.14)}
.chapter-nav a.active:after{opacity:1}
.chapter-nav span{position:absolute;right:24px;top:-3px;color:#f8edce;background:#153847dd;border:1px solid #ddc99138;padding:5px 8px;font-size:8px;letter-spacing:1px;text-transform:uppercase;opacity:0;transform:rotate(-45deg) translateX(6px);transform-origin:right center;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease}
.chapter-nav a:hover span,.chapter-nav a:focus-visible span{opacity:1;transform:rotate(-45deg) translateX(0)}

.sound-toggle{border:1px solid #f0e1b73d;background:#153e4a24;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#f8e7bd;transition:background 240ms ease,box-shadow 240ms ease,color 240ms ease}
.sound-toggle[aria-pressed=true]{background:#668b7d52;color:#fff1b7;box-shadow:0 0 18px #d7c58444}
.sound-toggle span{font-size:14px;line-height:1}
.landscape{transition:transform 900ms ease-out,filter 600ms ease,opacity 600ms ease;will-change:transform}
.portrait-window .portrait-crossfade{position:absolute;inset:0;pointer-events:none;z-index:2}
.brand{position:relative;overflow:hidden}
.brand:after{content:'';position:absolute;top:-30%;bottom:-30%;width:34px;left:-55px;background:linear-gradient(90deg,transparent,#fff7d999,transparent);transform:skewX(-18deg);animation:brand-glint 7s 1.6s ease-in-out infinite;pointer-events:none}
.sparkle{animation:star-drift 12s ease-in-out infinite;will-change:transform,opacity}
.sparkle:nth-child(2){animation-delay:-3s}.sparkle:nth-child(3){animation-delay:-7s}.sparkle:nth-child(4){animation-delay:-5s}.sparkle:nth-child(5){animation-delay:-9s}
.orbit:after{animation:ornament-glow 6s ease-in-out infinite}
.portrait-card:before{animation:portrait-aura 7s ease-in-out infinite}
.portrait-card,.vision{transition:translate 650ms ease-out}
.portrait-window img{transition:transform 700ms var(--motion-ease),filter 400ms ease,opacity 260ms ease}
.profile-trigger{overflow:hidden;isolation:isolate}
.profile-trigger:after{content:'';position:absolute;inset:-1px;background:linear-gradient(90deg,transparent,#f5dfa744,transparent);opacity:0;transform:translateX(-130%);transition:transform 650ms var(--motion-ease),opacity 90ms ease;pointer-events:none}

/* The same gold trace marks chapters, selections and progress. */
.section-heading,.case-section-heading,.case-story-title{position:relative}
.section-heading:after,.case-section-heading:after,.case-story-title:after{content:'';position:absolute;left:0;bottom:-15px;width:72px;height:1px;background:linear-gradient(90deg,transparent,var(--motion-gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform 850ms var(--motion-ease);box-shadow:0 0 10px #f0d99f88}
.section-heading:has(.motion-seen):after,.case-section-heading:has(.motion-seen):after,.case-story-title.motion-seen:after{transform:scaleX(1)}
.about-tags .tag.motion-seen{animation:codex-stamp 420ms var(--motion-ease) both}
.signature.motion-seen{animation:signature-write 900ms 180ms var(--motion-ease) both}

/* Character Archive replaces the static biography column. */
.character-archive{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;min-height:310px;padding:24px;border:1px solid #d8c88b55;background:linear-gradient(135deg,#153847d9,#1d4a55b8);box-shadow:inset 0 0 40px #071d2a36,0 20px 55px #061a2825;position:relative;overflow:hidden}
.character-archive:after{content:'✦';position:absolute;right:18px;top:13px;color:#e9d39775;font-size:16px;animation:ornament-glow 6s ease-in-out infinite}
.archive-tabs{display:flex;flex-direction:column;border-right:1px solid #d8c88b38;padding-right:18px}
.archive-tabs button{border:0;border-bottom:1px solid #d8c88b24;background:transparent;color:#b9cdca;text-align:left;padding:13px 7px;font-size:10px;letter-spacing:.6px;transition:color 220ms ease,padding-left 280ms var(--motion-ease),background 220ms ease}
.archive-tabs button[aria-selected=true]{color:#ffeab8;padding-left:17px;background:linear-gradient(90deg,#ead29516,transparent)}
.archive-tabs button[aria-selected=true]:before{content:'✦';margin-left:-12px;margin-right:6px;color:#efd798}
.archive-panels{align-self:center;min-width:0}
.archive-panel{margin:0}.archive-panel p{font-size:13px!important;line-height:1.95!important;margin:0 0 18px!important}
.archive-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 0}
.archive-facts div{border-top:1px solid #d9ca9b3d;padding-top:10px}.archive-facts dt{font-size:8px;text-transform:uppercase;letter-spacing:1.3px;color:#e5cd96}.archive-facts dd{margin:5px 0 0;font-size:11px;color:#d6e3df}
.archive-link{display:inline-flex;align-items:center;gap:14px;border:0;border-bottom:1px solid #d9c58c66;background:transparent;color:#f2dda8;padding:8px 0;font-size:10px;font-weight:600}

/* Navigation star glides between chapters. */
.desktop-nav{position:relative}
.desktop-nav a.active:after{display:none}
.nav-guide{position:absolute;left:0;bottom:-17px;width:12px;height:12px;color:var(--light-gold);opacity:0;transform:translateX(calc(var(--guide-x,0px) - 6px));transition:transform 420ms var(--motion-ease),opacity 200ms ease;pointer-events:none}
.nav-guide:before{content:'✦';position:absolute;inset:0;font-size:11px;filter:drop-shadow(0 0 7px #fff1b5)}

/* Skills read as linked constellation nodes. */
.talent-grid{position:relative;isolation:isolate}
.talent-grid{padding:72px 34px 26px;gap:52px!important;background:radial-gradient(circle at 50% 42%,#9acbbb14,transparent 34%)}
.talent-grid:before{content:'';position:absolute;left:16.5%;right:16.5%;top:123px;height:1px;background:linear-gradient(90deg,transparent,#e5cc9466 12%,#e5cc9466 88%,transparent);z-index:-1;box-shadow:0 0 8px #e5cc9440}
.talent-grid:after{content:'';position:absolute;left:50%;top:37px;width:270px;height:270px;border:1px solid #e5cc942a;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 55px #9bcfbe0d;z-index:-2}
.talent-card:nth-child(2){transform:translateY(-54px)}
.talent-card:nth-child(2):hover{transform:translateY(-60px)}
.skill-detail{position:relative;overflow:hidden}.skill-detail:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,#f1dda412,transparent);animation:skill-current 5s ease-in-out infinite;pointer-events:none}
.talent-card:before{content:'';position:absolute;bottom:0;left:20px;right:20px;height:2px;background:linear-gradient(90deg,transparent,var(--motion-gold),transparent);transform:scaleX(0);transition:transform 330ms var(--motion-ease);box-shadow:0 0 12px #f0d99f88}
.work-card:before,.case-features article:before{content:'';position:absolute;inset:0;background:radial-gradient(220px circle at var(--pointer-x,-100px) var(--pointer-y,-100px),#f6e3a519,transparent 65%);opacity:0;transition:opacity 260ms ease;pointer-events:none}
.talent-card[aria-selected=true]:before{transform:scaleX(1)}
.talent-card[aria-selected=true] .talent-icon{animation:node-awaken 600ms var(--motion-ease)}
.talent-card[aria-selected=true] .talent-arrow{filter:drop-shadow(0 0 8px #f0d99faa)}

/* Project cards behave like selectable archive panels. */
.work-card,.talent-card,.case-features article{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform 320ms var(--motion-ease),box-shadow 320ms ease,border-color 320ms ease}
.work-card{--project-accent:#f0d99f;--tilt-x:0deg;--tilt-y:0deg}
.work-card-erp{--project-accent:#9ed7c1}.work-card-ai{--project-accent:#a9bdf3}.work-card-chat{--project-accent:#a8d8b4}.work-card-mlbb{--project-accent:#dab5ef}
.work-card:after{content:'';position:absolute;inset:8px;background:linear-gradient(var(--project-accent),var(--project-accent)) left top/22px 1px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) left top/1px 22px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) right top/22px 1px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) right top/1px 22px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) left bottom/22px 1px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) left bottom/1px 22px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) right bottom/22px 1px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) right bottom/1px 22px no-repeat;opacity:0;transform:scale(.985);transition:opacity 320ms ease,transform 450ms var(--motion-ease);pointer-events:none;z-index:3}
.work-card.motion-seen:after{animation:archive-frame 720ms 180ms var(--motion-ease) both}
.work-art img{transition:transform 650ms var(--motion-ease),filter 400ms ease}
.work-link svg,.case-text-link span,.case-back span{transition:transform 240ms var(--motion-ease)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:after{content:'';position:absolute;inset:-2px;background:linear-gradient(105deg,transparent 28%,#fff9dc88 48%,transparent 68%);transform:translateX(-140%);transition:transform 650ms var(--motion-ease);pointer-events:none}
.portfolio-page .works-section{padding-top:80px;padding-bottom:120px}
.portfolio-page .works-grid{display:grid;grid-template-columns:1fr;gap:16vh}
.portfolio-page .works-grid .work-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);min-height:min(690px,78vh);position:sticky;top:88px;border-color:#ddca9663;background:linear-gradient(135deg,#102e3bd9,#183f4bc7);backdrop-filter:blur(14px);box-shadow:0 28px 85px #04172570}
.portfolio-page .work-card:nth-child(even){grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr)}
.portfolio-page .work-card:nth-child(even) .work-art{grid-column:2}.portfolio-page .work-card:nth-child(even) .work-body{grid-column:1;grid-row:1}
.portfolio-page .work-art{height:auto;min-height:100%;padding:clamp(22px,4vw,54px)}
.portfolio-page .work-body{justify-content:center;padding:clamp(34px,5vw,76px)}
.portfolio-page .work-body h3{font-size:clamp(30px,3vw,48px);font-weight:400;margin-bottom:18px}
.portfolio-page .work-body p{font-size:13px;max-width:490px;line-height:2;min-height:0}
.portfolio-page .work-category{font-size:9px;letter-spacing:2px}.portfolio-page .work-tech span{font-size:10px;padding:6px 10px}
.portfolio-page .work-link{font-size:11px;padding-top:18px}
.work-chapter-number{position:absolute;right:28px;top:21px;z-index:4;color:var(--project-accent);font:400 13px var(--serif);letter-spacing:3px;text-shadow:0 0 12px currentColor}
.work-chapter-number:before{content:'DOMAIN / ';font:8px var(--sans);letter-spacing:1.5px;color:#d6dfd9aa}

/* The cinematic journey owns the single travelling ley line. */
.journey-list{position:relative}
.journey-list:before,.journey-list:after{content:none}
.journey-node{transition:background-color 350ms ease,box-shadow 350ms ease,transform 350ms var(--motion-ease)}
.journey-item.motion-seen .journey-node{box-shadow:0 0 0 5px #e9d49816,0 0 18px #e9d49855;transform:rotate(45deg) scale(1.04)}
/* Dialogs feel connected to their triggers. */
.dialog[open]{animation:dialog-arrive 360ms var(--motion-ease)}
.dialog[open]::backdrop{animation:backdrop-arrive 320ms ease-out}
.dialog-close{transition:transform 220ms ease,background-color 220ms ease}
.project-illustration{position:relative;overflow:hidden}
.project-illustration>a{position:relative;display:block;overflow:hidden}
.project-illustration:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,#fff2b744 45%,#fff9ddaa 50%,#fff2b744 55%,transparent 75%);transform:translateX(-140%);pointer-events:none;mix-blend-mode:screen}
.project-illustration.flow-playing:after{animation:flow-scan 1.7s .25s var(--motion-ease) both}
.flow-pulse{position:absolute;left:var(--pulse-x);top:var(--pulse-y);width:12px;height:12px;border-radius:50%;background:#fff3be;box-shadow:0 0 0 0 #f5df9d99,0 0 16px #fff0ad;opacity:0;transform:translate(-50%,-50%) scale(.3);pointer-events:none;z-index:2}
.project-illustration.flow-playing .flow-pulse{animation:data-pulse 700ms var(--pulse-delay) var(--motion-ease) both}
.flow-replay{border:0;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:3px;font:inherit;padding:0;margin-left:12px}

/* Case studies open as chapters; gallery geometry stays stable. */
.case-page{--chapter-accent:#9ed7c1}
.erp-page{--chapter-accent:#9ed7c1}.mlbb-page{--chapter-accent:#d9b7ef}
.case-hero{position:relative;overflow:hidden}
.case-hero:after{content:'';position:absolute;width:46vw;height:46vw;max-width:650px;max-height:650px;right:-18vw;top:-22vw;border:1px solid #f0d99f20;border-radius:50%;box-shadow:0 0 80px #e7d19b0d;animation:case-orbit 24s linear infinite;pointer-events:none}
.case-summary-mark,.case-closing-star{animation:ornament-glow 5.5s ease-in-out infinite}
.case-image-stage,.mlbb-screen-stage{position:relative;overflow:hidden}
.case-image-stage:after,.mlbb-screen-stage:after{content:'';position:absolute;inset:8px;background:linear-gradient(var(--chapter-accent),var(--chapter-accent)) left top/28px 1px no-repeat,linear-gradient(var(--chapter-accent),var(--chapter-accent)) left top/1px 28px no-repeat,linear-gradient(var(--chapter-accent),var(--chapter-accent)) right top/28px 1px no-repeat,linear-gradient(var(--chapter-accent),var(--chapter-accent)) right top/1px 28px no-repeat,linear-gradient(var(--chapter-accent),var(--chapter-accent)) left bottom/28px 1px no-repeat,linear-gradient(var(--chapter-accent),var(--chapter-accent)) left bottom/1px 28px no-repeat,linear-gradient(var(--chapter-accent),var(--chapter-accent)) right bottom/28px 1px no-repeat,linear-gradient(var(--chapter-accent),var(--chapter-accent)) right bottom/1px 28px no-repeat;box-shadow:inset 0 0 34px #061e2d22;opacity:.68;pointer-events:none;z-index:2}
.case-image-stage img,.mlbb-screen-stage img{transition:transform 600ms var(--motion-ease),opacity 250ms ease}
.case-gallery.motion-seen .case-image-stage:after,.mlbb-screen.motion-seen .mlbb-screen-stage:after{animation:case-frame-draw 800ms 180ms var(--motion-ease) both}
.erp-page .case-image-stage:before{content:'';position:absolute;left:6%;right:6%;height:1px;top:12%;z-index:3;background:linear-gradient(90deg,transparent,#9ed7c199,transparent);box-shadow:0 0 12px #9ed7c177;opacity:0;pointer-events:none}
.erp-page .case-gallery.motion-seen .case-image-stage:before{animation:erp-scan 2.8s 650ms var(--motion-ease) both}
.case-page:not(.erp-page):not(.mlbb-page) .case-image-stage:before{content:'•••';position:absolute;right:26px;top:24px;z-index:3;color:#a8d8b4;letter-spacing:5px;font-size:13px;text-shadow:0 0 10px #a8d8b4;opacity:0;pointer-events:none}
.case-page:not(.erp-page):not(.mlbb-page) .case-gallery.motion-seen .case-image-stage:before{animation:message-status 1.6s 650ms ease-in-out both}
.mlbb-screen:nth-child(2) .mlbb-screen-stage:before{content:'+36';position:absolute;right:10%;top:17%;z-index:3;padding:7px 13px;border:1px solid #d9b7ef88;border-radius:999px;background:#243a4ee6;color:#ebd4f7;font:700 13px var(--sans);box-shadow:0 0 22px #c89ce655;opacity:0;pointer-events:none}
.mlbb-screen:nth-child(2).motion-seen .mlbb-screen-stage:before{animation:score-awaken 750ms 650ms var(--motion-ease) both}
.gallery-exit{opacity:0!important;transform:translateX(var(--gallery-exit,-16px)) scale(.992)!important}
.gallery-enter{animation:gallery-enter 430ms var(--motion-ease)}
.case-gallery-controls button{position:relative;transition:color 240ms ease,background-color 240ms ease,transform 240ms var(--motion-ease)}
.case-gallery-controls button[aria-pressed=true]:after{content:'';position:absolute;left:10px;right:10px;bottom:4px;height:1px;background:var(--motion-gold);box-shadow:0 0 9px #f0d99f99;animation:trace-in 420ms var(--motion-ease)}
.case-feature-number{transition:color 260ms ease,text-shadow 260ms ease}
.case-features article:hover .case-feature-number{color:var(--chapter-accent);text-shadow:0 0 12px color-mix(in srgb,var(--chapter-accent) 65%,transparent)}
.theme-wash{position:fixed;z-index:9999;right:18px;top:28px;width:36px;height:36px;border-radius:50%;background:#f9eac2;pointer-events:none;mix-blend-mode:soft-light}

/* The final chapter gathers distant stars toward its central symbol. */
.contact>:not(.contact-star){position:relative;z-index:1}
.contact-star{position:absolute;left:50%;top:27%;width:4px;height:4px;border-radius:50%;background:#fff0ad;box-shadow:0 0 12px #f5dda2;opacity:0;transform:translate(var(--star-x),var(--star-y));pointer-events:none;z-index:0}
.contact.contact-awake .contact-star{animation:stars-converge 1.15s var(--star-delay) var(--motion-ease) both}
.contact.contact-awake .contact-symbol{animation:final-star 1.2s 650ms var(--motion-ease) both}
.portfolio-page .contact{padding-top:110px;padding-bottom:105px;background:linear-gradient(#071a2bd9,#0b2538e8),url('../landscape.png') center 62%/cover no-repeat}
.portfolio-page .contact:before{background:radial-gradient(circle at 50% 28%,#879dd02b,transparent 52%),radial-gradient(circle,#fff5c8 0 1px,transparent 1.7px) 0 0/103px 89px;opacity:.7}
.portfolio-page .contact h2{font-size:clamp(38px,4vw,60px)}

@media(hover:hover) and (pointer:fine){
  .work-card:hover{transform:perspective(1000px) translateY(-6px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
  .talent-card:hover{transform:translateY(-6px)}
  .work-card:hover:before,.case-features article:hover:before{opacity:1}
  .work-card:hover:after{opacity:.88;transform:scale(1)}
  .work-card:hover .work-art img{transform:scale(1.035);filter:saturate(1.04)}
  .work-card:hover .work-link svg,.case-text-link:hover span{transform:translateX(5px)}
  .dialog-close:hover{transform:rotate(90deg);background:#e5cc9420}
  .mlbb-screen:hover .mlbb-screen-stage img{transform:scale(1.018)}
  .portrait-card:hover .portrait-window>img:not(.portrait-crossfade){filter:saturate(1.03)}
  .profile-trigger:is(:hover,:focus-visible):after{opacity:1;transform:translateX(140%)}
  .btn:hover:after{transform:translateX(140%)}
}

@keyframes star-drift{0%,100%{transform:translate3d(0,0,0);opacity:.45}50%{transform:translate3d(10px,-18px,0);opacity:.9}}
@keyframes ornament-glow{0%,100%{opacity:.55;filter:drop-shadow(0 0 3px #f2d99855)}50%{opacity:1;filter:drop-shadow(0 0 12px #f2d998bb)}}
@keyframes portrait-aura{0%,100%{box-shadow:0 0 0 #f0d99c00}50%{box-shadow:0 0 25px #f0d99c22}}
@keyframes node-awaken{0%{transform:scale(.9);box-shadow:0 0 0 #f0d99f00}55%{transform:scale(1.08);box-shadow:0 0 22px #f0d99f66}100%{transform:scale(1)}}
@keyframes dialog-arrive{from{opacity:0;transform:scale(.965) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes flow-scan{0%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
@keyframes case-orbit{to{transform:rotate(360deg)}}
@keyframes gallery-enter{from{opacity:0;transform:translateX(var(--gallery-enter,16px)) scale(.992)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes trace-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mobile-link-arrive{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes brand-glint{0%,72%,100%{transform:translateX(0) skewX(-18deg);opacity:0}78%{opacity:.75}90%{transform:translateX(260px) skewX(-18deg);opacity:0}}
@keyframes codex-stamp{0%{opacity:0;transform:scale(1.08)}65%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes signature-write{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-6px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0)}}
@keyframes archive-frame{from{opacity:0;transform:scale(.97)}to{opacity:.55;transform:scale(1)}}
@keyframes data-pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.3);box-shadow:0 0 0 0 #f5df9daa}45%{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 12px #f5df9d00,0 0 18px #fff0ad}100%{opacity:.35;transform:translate(-50%,-50%) scale(.55)}}
@keyframes stars-converge{0%{opacity:0;transform:translate(var(--star-x),var(--star-y)) scale(.5)}35%{opacity:.9}100%{opacity:0;transform:translate(0,0) scale(1.5)}}
@keyframes final-star{0%{filter:drop-shadow(0 0 0 #f4dda100);transform:scale(.86)}55%{filter:drop-shadow(0 0 22px #f4dda1cc);transform:scale(1.16)}100%{filter:drop-shadow(0 0 8px #f4dda177);transform:scale(1)}}
@keyframes codex-page-out{to{opacity:0;filter:blur(4px);transform:scale(.995)}}
@keyframes codex-page-in{from{opacity:0;filter:blur(5px);transform:scale(1.008)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes case-frame-draw{from{opacity:0;transform:scale(.96)}to{opacity:.68;transform:scale(1)}}
@keyframes erp-scan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:.8}100%{opacity:0;transform:translateY(430px)}}
@keyframes message-status{0%{opacity:0;transform:translateY(8px)}35%,72%{opacity:1;transform:translateY(0)}100%{opacity:.35}}
@keyframes score-awaken{0%{opacity:0;transform:translateY(12px) scale(.75)}62%{opacity:1;transform:translateY(-3px) scale(1.08)}100%{opacity:.9;transform:translateY(0) scale(1)}}
@keyframes gate-ring{from{opacity:0;scale:.62}to{opacity:1;scale:1}}
@keyframes gate-star{from{opacity:0;scale:.2;rotate:-45deg}60%{opacity:1;scale:1.25;rotate:8deg}to{opacity:1;scale:1;rotate:0}}
@keyframes gate-copy{from{opacity:0;transform:translateY(10px);letter-spacing:8px}to{opacity:1;transform:translateY(0)}}
@keyframes gate-copy-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes gate-copy-dismiss{to{opacity:0;transform:translate(-50%,-8px)}}
@keyframes gate-enter-prompt{0%,100%{opacity:.62;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes gate-scenery-breathe{from{transform:scale(1.08) translate3d(-.5%,0,0)}to{transform:scale(1.115) translate3d(.6%,-.4%,0)}}
@keyframes gate-stars-idle{from{opacity:.28;transform:translate3d(0,4px,0)}to{opacity:.5;transform:translate3d(7px,-9px,0)}}
@keyframes gate-cloud-far-idle{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(7%,-8px,0)}}
@keyframes gate-cloud-near-idle{from{transform:translate3d(3%,0,0) scale(1.18)}to{transform:translate3d(-7%,-10px,0) scale(1.2)}}
@keyframes gate-sigil-resonance{0%{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 16px rgba(243,217,151,.38))}58%{transform:translate(-50%,-50%) scale(1.16);filter:drop-shadow(0 0 34px rgba(255,231,164,.92))}100%{transform:translate(-50%,-50%) scale(1.04);filter:drop-shadow(0 0 24px rgba(121,224,247,.74))}}
@keyframes gate-frame-resonance{0%{filter:brightness(1)}70%{filter:brightness(1.7);box-shadow:inset 0 0 0 8px rgba(14,52,66,.76),inset 0 0 0 10px rgba(228,205,143,.42),0 0 42px rgba(116,213,236,.38)}100%{filter:brightness(1.25)}}
@keyframes celestial-gate-departure{0%,70%{opacity:1}100%{opacity:0}}
@keyframes gate-camera-cross{0%{transform:translateY(-4vh) scale(1)}28%{transform:translateY(-3vh) scale(1.07)}100%{transform:translateY(1vh) scale(4.35)}}
@keyframes gate-door-left-open{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(-88deg);filter:brightness(1.28)}}
@keyframes gate-door-right-open{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(88deg);filter:brightness(1.28)}}
@keyframes gate-sigil-release{0%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}}
@keyframes gate-seam-awaken{0%{opacity:.45;transform:translateX(-50%) scale(.65,.7)}50%{opacity:1;transform:translateX(-50%) scale(7,1)}100%{opacity:0;transform:translateX(-50%) scale(30,1)}}
@keyframes gate-threshold-pass{0%{opacity:0;transform:translate(-50%,-50%) scale(.04,.8)}20%{opacity:.82;transform:translate(-50%,-50%) scale(.18,1)}58%{opacity:1;transform:translate(-50%,-50%) scale(2.8,1.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(14,1.55)}}
@keyframes gate-world-approach{from{transform:scale(1.08)}to{transform:scale(1.24)}}
@keyframes gate-cloud-part-left{to{opacity:0;transform:translate3d(-38%,-5%,0) scale(1.1)}}
@keyframes gate-cloud-part-right{to{opacity:0;transform:translate3d(38%,4%,0) scale(1.3)}}
@keyframes skill-current{0%,100%{transform:translateX(-130%)}50%{transform:translateX(130%)}}
@keyframes talent-lock-in{0%{opacity:0;background:radial-gradient(circle at var(--focus-x) var(--focus-y),#baf4ff 0 2%,transparent 5%)}45%{opacity:1}100%{opacity:1}}
@keyframes talent-ray-awaken{0%{stroke-dashoffset:1;stroke-width:1.2;opacity:.2}55%{stroke-dashoffset:0;stroke-width:3;opacity:1}100%{stroke-dashoffset:0;stroke-width:1.2;opacity:1}}
@keyframes talent-satellite-awaken{0%{transform:scale(.35);filter:brightness(1)}55%{transform:scale(1.35);filter:brightness(2.1)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes talent-node-bloom{0%{transform:scale(.75)}55%{transform:scale(1.4);filter:brightness(1.9)}100%{transform:scale(1)}}

@media(max-width:800px){
  .gate-cloud-far{display:none}
  .gate-cloud-near{width:108vw;right:-42%;opacity:.28}
  .gate-structure{width:min(62vw,300px);height:min(57vh,500px);min-height:360px;transform:translateY(-5vh)}
  .gate-frame{inset:-10px}
  .gate-frame::before,.gate-frame::after{width:38px;height:38px}
  .gate-frame::before{left:-29px}.gate-frame::after{right:-29px}
  .gate-crown{top:-26px;width:44px;height:44px}
  .gate-copy{bottom:18px}
  .gate-instruction{margin-top:7px;font-size:9px}
  .gate-skip{right:10px;bottom:8px}
  .gate-opening .gate-door-left{animation-duration:560ms;animation-delay:130ms}
  .gate-opening .gate-door-right{animation-duration:560ms;animation-delay:130ms}
  .gate-opening .gate-threshold{animation-duration:980ms;animation-delay:260ms}
  .gate-opening .gate-cloud-near{animation-duration:980ms}
  .talent-grid:before,.journey-list:before,.journey-list:after{display:none}
  .case-hero:after{width:85vw;height:85vw;right:-55vw;top:-25vw}
  .chapter-nav{display:none}
  .character-archive{grid-template-columns:1fr;gap:16px;padding:19px;min-height:0}
  .archive-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #d8c88b38;padding:0 0 7px;scrollbar-width:none}
  .archive-tabs::-webkit-scrollbar{display:none}.archive-tabs button{flex:0 0 auto;white-space:nowrap;padding:10px 12px}
  .archive-tabs button[aria-selected=true]{padding-left:20px}
  .archive-facts{grid-template-columns:1fr}
  .talent-grid{padding:18px 0 0;gap:13px!important;background:none}
  .talent-grid:after{display:none}.talent-card:nth-child(2),.talent-card:nth-child(2):hover{transform:none}
  .portfolio-page .works-grid{gap:32px}
  .portfolio-page .works-grid .work-card,.portfolio-page .work-card:nth-child(even){display:grid;grid-template-columns:1fr;min-height:0;position:relative;top:auto}
  .portfolio-page .work-card:nth-child(even) .work-art,.portfolio-page .work-card:nth-child(even) .work-body{grid-column:auto;grid-row:auto}
  .portfolio-page .work-art{height:300px;min-height:0;padding:20px}
  .portfolio-page .work-body{padding:27px 24px 25px}
  .portfolio-page .work-body h3{font-size:26px}.portfolio-page .work-body p{font-size:12px}
}
@media(min-width:801px) and (max-width:1100px){.journey-list:before,.journey-list:after{left:187px}}
@media(max-width:600px){
  .desktop-nav.open a{animation:mobile-link-arrive 360ms var(--motion-ease) both}
  .desktop-nav.open a:nth-child(2){animation-delay:45ms}
  .desktop-nav.open a:nth-child(3){animation-delay:90ms}
  .desktop-nav.open a:nth-child(4){animation-delay:135ms}
  .nav-guide{display:none}
  .sound-toggle{width:31px;height:31px;border-color:#f0e1b72f}.sound-toggle span{font-size:12px}
  .gate-sigil{width:88px;height:88px}.gate-sigil i:nth-child(2){inset:10px}.gate-sigil i:nth-child(3){inset:22px}.gate-sigil span{font-size:23px}
  .gate-copy>strong{font-size:24px;letter-spacing:6px}.gate-kicker{font-size:7px;letter-spacing:3.2px}.gate-instruction{font-size:8px;letter-spacing:1px}
  .scene-depth{display:none}
  .portfolio-page .work-art{height:235px}.work-chapter-number{right:19px;top:14px}
  .portfolio-page .contact{padding-top:80px;padding-bottom:76px}
}
@media(hover:none),(pointer:coarse){
  .work-card:hover,.talent-card:hover,.btn:hover{transform:none}
  .work-card:before,.case-features article:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .landscape{transform:none!important}
  .project-illustration:after,.theme-wash{display:none}
  .contact-star,.flow-pulse{display:none}
  .celestial-gate{display:none}.scene-depth{display:none}
}