/* Independent foreground geometry gives the continuous scene spatial depth. */
.world-journey{left:65%;width:clamp(340px,70vw,1050px);mask-image:linear-gradient(90deg,transparent,#000 12% 90%,transparent)}
.living-city{background:radial-gradient(ellipse at 90% 20%,#19253b,transparent 65%),radial-gradient(ellipse at 15% 65%,#29101e,transparent 60%),#07080c}
.hero{min-height:650px;padding-bottom:80px}
.hero-content{margin-top:64px;max-width:780px;padding:22px 24px;background:linear-gradient(100deg,#08090ce8,#08090ca3 65%,transparent)}
.hero h1{font-size:clamp(70px,7vw,105px)}
.hero-content,.section-heading{position:relative;z-index:1}
.depth-field{position:absolute;inset:-35px;pointer-events:none;perspective:900px;transform:translate3d(var(--drift-x,0px),var(--drift-y,0px),0);transition:transform .4s ease-out}
.depth-shard{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border:1px solid #fa667a88;background:linear-gradient(135deg,#f3355030,#07080c20);box-shadow:4px 4px 0 #76152a55,0 0 22px #e8273820;animation:shard-drift var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.depth-shard:nth-child(even){border-color:#83caff66;box-shadow:4px 4px 0 #21457755,0 0 22px #168afa25}
@keyframes shard-drift{from{transform:translate3d(0,16px,-40px) rotateX(35deg) rotateY(-25deg) rotateZ(15deg)}to{transform:translate3d(0,-24px,35px) rotateX(60deg) rotateY(40deg) rotateZ(75deg)}}
.core-dock{position:absolute;right:7%;bottom:70px;display:grid;justify-items:center;gap:18px;z-index:2}
.chaos-core{position:relative;display:grid;place-items:center;width:156px;height:156px;border:0;background:radial-gradient(circle,#c71d3438,transparent 70%);color:inherit;perspective:650px;touch-action:manipulation}
.core-space{position:relative;width:64px;height:64px;display:block;transform-style:preserve-3d;animation:core-orbit 14s linear infinite;pointer-events:none}
.core-face{position:absolute;inset:0;border:1px solid #ff8b9b;background:linear-gradient(135deg,#ff556adc,#800e30c9);box-shadow:inset 0 0 20px #ffada955,0 0 18px #f3355022;backface-visibility:visible}
.core-face:nth-child(1){transform:translateZ(32px)}
.core-face:nth-child(2){transform:rotateY(180deg) translateZ(32px)}
.core-face:nth-child(3){transform:rotateY(90deg) translateZ(32px)}
.core-face:nth-child(4){transform:rotateY(-90deg) translateZ(32px)}
.core-face:nth-child(5){transform:rotateX(90deg) translateZ(32px)}
.core-face:nth-child(6){transform:rotateX(-90deg) translateZ(32px)}
@keyframes core-orbit{from{transform:rotateX(-24deg) rotateY(30deg) rotateZ(12deg)}to{transform:rotateX(336deg) rotateY(390deg) rotateZ(12deg)}}
.core-ring{position:absolute;inset:10px;border:1px solid #fe6d8999;border-radius:50%;transform:rotateX(65deg) rotateZ(-25deg);box-shadow:0 0 15px #f3355033;pointer-events:none}
.core-ring--two{inset:0;border-color:#86cfff88;transform:rotateY(68deg) rotateZ(28deg)}
.core-dock p{font:10px var(--mono);letter-spacing:.08em;margin:0;color:#e4b9c7;background:#0b0b1388;padding:8px}
.chaos-core:hover .core-face,.chaos-core:focus-visible .core-face{background:linear-gradient(135deg,#ffa580,#de174c)}
.chaos-wave{position:absolute;inset:18px;border:2px solid #ff6a90;border-radius:50%;opacity:0;pointer-events:none}
.project-card{overflow:visible;transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease-out,box-shadow .2s,border-color .2s}
.project-card:hover,.project-card:focus-visible{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-6px);box-shadow:0 24px 45px #0009,6px 8px 0 #451829}
.project-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,35%),#ff819729,transparent 55%);pointer-events:none;opacity:0;transition:opacity .2s}
.project-card.card-active::before,.project-card:focus-visible::before{opacity:1}
.card-top,.card-copy{transform:translateZ(18px)}
.project-visual{transform:translateZ(28px);margin:0 10px;overflow:hidden}
.project-visual .proof-symbol,.project-visual .sum-formula,.project-visual .bullet-formula{animation:formula-float 6s ease-in-out infinite alternate}
.project-card:nth-child(2) .sum-formula{animation-delay:-2s}
.project-card:nth-child(3) .bullet-formula{animation-delay:-4s}
@keyframes formula-float{from{translate:0 5px}to{translate:0 -7px}}
.skill-grid span{transition:transform .2s,box-shadow .2s}
.skill-grid span:hover{transform:perspective(500px) translateY(-5px) rotateX(12deg);box-shadow:0 8px 0 #40142a}
.city-hidden .depth-field *,.city-hidden .core-space,.city-hidden .project-visual>*{animation-play-state:paused!important}
@media(min-width:1700px){.hero-content{margin-top:72px}.hero{min-height:690px;padding-inline:5.5%}}
@media(max-width:1100px){.hero-content{max-width:700px;margin-top:52px}.core-dock{position:relative;right:auto;bottom:auto;justify-items:start;margin:20px 0 0 24px}.chaos-core{width:120px;height:120px}.core-dock p{margin-left:0}.hero{padding-bottom:45px;min-height:0}}
@media(max-width:760px){.world-journey{left:56%;width:88%;mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent)}.hero-content{margin-top:40px;padding:18px 0}.hero h1{font-size:clamp(69px,17vw,108px)}.hero{padding-bottom:25px}.core-dock{margin:8px 0 15px;grid-template-columns:110px 1fr;align-items:center;gap:10px}.chaos-core{width:110px;height:110px}.core-space{scale:.8}.core-dock p{font-size:9px;line-height:1.6}.depth-shard:nth-child(n+5){display:none}.project-visual{margin-inline:6px}}
@media(hover:none){.project-card,.project-card:hover{transform:none}.card-top,.card-copy,.project-visual{transform:none}}
@media(prefers-reduced-motion:reduce){.depth-field,.chaos-wave{display:none}.core-space{transform:rotateX(-24deg) rotateY(30deg) rotateZ(12deg)}.project-card,.project-card:hover,.project-card:focus-visible{transform:none}.card-top,.card-copy,.project-visual{transform:none}}

/* Charging rises from a slow tremble to a tight vibration, then releases. */
.hero{overflow:clip}
.chaos-core .core-space{translate:var(--shake-x,0px) var(--shake-y,0px)}
.chaos-core .core-ring{scale:var(--ring-scale,1);transition:scale .08s linear,border-color .4s,box-shadow .4s}
.core-charging .core-space{animation-play-state:paused}
.core-charging .core-face{box-shadow:inset 0 0 25px #ffb39677,0 0 calc(12px + var(--charge,0)*32px) #ff365966}
.core-charging .core-ring{border-color:#ffb08a;box-shadow:0 0 calc(12px + var(--charge,0)*18px) #f3355055}
.core-charging .core-ring--two{border-color:#9edfff}
.chaos-ripple{position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:0}
.chaos-ripple i{position:absolute;left:var(--burst-x,50%);top:var(--burst-y,50%);width:160vmax;height:160vmax;margin:-80vmax;border:2px solid #8adcfaaa;border-radius:50%;background:radial-gradient(circle,transparent 64%,#6daeff14 69%,#d5508d20 70%,transparent 71%);opacity:0}
.chaos-release .chaos-ripple{opacity:1}
.chaos-release .chaos-ripple i{animation:chaos-release-wave 1.45s cubic-bezier(.16,.65,.25,1) both}
.chaos-release .chaos-ripple i:last-child{animation-delay:.15s;border-color:#ff7b9855;background:none}
@keyframes chaos-release-wave{0%{transform:scale(.025);opacity:0}12%{opacity:.7}100%{transform:scale(1);opacity:0}}
.chaos-release .core-ring{scale:1;transition:scale 1.3s cubic-bezier(.2,.8,.2,1)}
.chaos-release .core-face{background:linear-gradient(135deg,#b4efff,#297aa9);border-color:#cef6ff;box-shadow:inset 0 0 25px #b3faff77,0 0 30px #6acaff55}
.chaos-release .living-city *,.chaos-release .living-city *::before{animation-play-state:paused!important}
.chaos-release .depth-shard{border-color:#b7edff;box-shadow:0 0 20px #74ceff66}
.chaos-core .core-face{transition:background .35s,border-color .35s,box-shadow .35s}
@media(prefers-reduced-motion:reduce){.chaos-ripple{display:none}.chaos-core .core-space{translate:none}.chaos-core .core-ring{scale:1}}

/* Align the mobile character scene with the introduction below the header. */
@media(max-width:760px){
 .world-journey{top:74px}
 .hero{padding-top:12px}
 .hero-content{margin-top:8px;padding-top:12px}
}