/* The opening is a personal title sequence. No competing central illustration. */
.project-brand{position:relative;display:block;object-fit:contain;max-width:70%;transition:transform .35s ease}
.project:hover .project-brand{transform:translateY(-4px)}
.eastweb-brand{display:flex;flex-direction:column;align-items:center;gap:13px}
.eastweb-brand img{display:block;width:133px;height:133px;object-fit:contain}
.eastweb-brand>span{font:600 32px/1.1 Arial,sans-serif;letter-spacing:-1.2px;color:#e7edf0}
.eastweb-brand .brand-dot{color:#03b0e9}
.raymia-brand{width:174px;height:220px}
.shargh-project .project-visual{background:radial-gradient(ellipse at 50% 75%,#003d4a55,#101817 75%)}
.raymia-project .project-visual{background:radial-gradient(ellipse at 50% 75%,#17444066,#0e1418 75%)}
.presence{height:100svh;min-height:880px;max-height:1200px;background:#090b0c;display:flex;align-items:center;justify-content:center;padding:150px 5% 125px}
.presence .hero-copy{padding:0;margin:0;width:auto;max-width:72%;text-align:center;position:relative;z-index:2}
.stage-light{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 37%,#d0ab6b13,transparent 49%),linear-gradient(110deg,transparent 27%,#cda96906 40%,transparent 53%),linear-gradient(250deg,transparent 27%,#cda96906 40%,transparent 53%)}
.stage-light:after{content:'';position:absolute;left:20%;right:20%;top:11%;height:1px;background:linear-gradient(90deg,transparent,#dfbb7b60,transparent);box-shadow:0 0 70px 8px #ddbe8510}
.stage-lines{position:absolute;inset:0;pointer-events:none;z-index:-1}
.stage-lines i{position:absolute;top:12%;bottom:14%;width:1px;background:linear-gradient(transparent,#dfbb7b12,transparent)}
.stage-lines i:nth-child(1){left:19%}.stage-lines i:nth-child(2){left:35%}.stage-lines i:nth-child(3){right:35%}.stage-lines i:nth-child(4){right:19%}
#presence-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.opening-label{position:absolute;top:130px;left:5.2%;font:8px Arial,sans-serif;letter-spacing:2px;color:#929181;display:flex;align-items:center;gap:12px}
.opening-label .live-dot{width:4px;height:4px}
.hero-prelude{font-size:12px;color:#c6b38c;font-weight:400;letter-spacing:.3px;margin-bottom:18px}
.presence h1{font-size:clamp(82px,10.4vw,158px);line-height:1.2;font-weight:800;letter-spacing:-5px;margin:0;position:relative}
.presence h1 .name-line{display:block;color:var(--ink);will-change:transform,opacity;position:relative}
.presence h1 .first-name{font-weight:450;font-size:.77em;line-height:1.3}
.presence h1 .last-name{color:var(--gold);padding:0 20px 14px;background:linear-gradient(115deg,#a2824b 5%,#f1d8a2 40%,#dfbb7b 65%,#aa8749 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 70px #c9a9660d}
.name-period{position:absolute;left:-5px;bottom:10px;font-size:.5em;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.latin-name{font:10px Arial,sans-serif;letter-spacing:6px;color:#aaa89c;margin-top:8px}
.latin-name strong{font-weight:400;color:#e2d5b9}
.hero-statement{font-size:16px;color:#a6a79c;line-height:2;margin:26px 0 25px;font-weight:300}
.hero-statement strong{font-weight:450;color:#e5e3d9}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:26px}
.hero-actions .button{font-size:12px;min-height:49px;padding:12px 24px;gap:24px}



.identity-note{position:absolute;top:45%;z-index:2;font-size:11px;width:180px;text-align:right}
.note-engineer{right:6.5%}.note-maker{left:6.5%;text-align:left}
.note-index{display:block;font:8px Arial,sans-serif;letter-spacing:2px;color:#a18b64;margin-bottom:16px}
.identity-note>strong{font-size:22px;font-weight:450;color:#d3d4c9}
.identity-note p{font-size:11px;color:#8e968b;line-height:2.2;margin-top:7px}
.identity-note i{display:block;width:33px;height:1px;background:#dfbb7b60;margin-top:24px}
.note-maker i{margin-right:auto}
.name-backdrop{position:absolute;bottom:60px;width:100%;left:0;text-align:center;font:800 clamp(60px,12.2vw,220px)/1 Arial,sans-serif;letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1px #c5b78f0e;z-index:-1;pointer-events:none}
.presence .hero-bottom{bottom:27px}
.presence .scroll-cue{font-size:10px}
.intro-playing .hero-prelude{animation:identity-arrive .9s .05s both}
.intro-playing .first-name{animation:name-arrive 1.35s .15s both}
.intro-playing .last-name{animation:name-arrive 1.5s .32s both}
.intro-playing .latin-name{animation:identity-arrive 1s .65s both}
.intro-playing .hero-statement{animation:identity-arrive 1s .85s both}
.intro-playing .hero-actions{animation:identity-arrive 1s 1.05s both}
.intro-playing .identity-note{animation:identity-arrive 1.2s 1.15s both}
.intro-playing .stage-light{animation:stage-arrive 2s ease-out both}
.stage-light:after{animation:light-breathe 8s ease-in-out infinite alternate}
.presence.motion-paused *,.presence.motion-paused *:after,.presence.offstage *,.presence.offstage *:after,.presence.tab-hidden *,.presence.tab-hidden *:after{animation-play-state:paused!important}
.presence.motion-paused .hero-copy>*,.presence.motion-paused .name-line,.presence.motion-paused .identity-note{animation:none;opacity:1;transform:none;filter:none}
@keyframes name-arrive{from{opacity:0;transform:translateY(32px) scale(1.04);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes identity-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes stage-arrive{from{opacity:.2;transform:scaleX(.6)}to{opacity:1;transform:scaleX(1)}}
@keyframes light-breathe{from{opacity:.35;transform:scaleX(.8)}to{opacity:1;transform:scaleX(1.1)}}
@media(min-width:1700px){.presence .hero-copy{margin:0}.identity-note{width:220px}.note-engineer{right:12%}.note-maker{left:12%}}
@media(max-width:1100px){.presence{min-height:820px;padding-top:160px;padding-bottom:125px}.presence .hero-copy{margin:0;width:auto;max-width:70%}.presence h1{font-size:clamp(90px,12vw,130px)}.identity-note{width:140px}.note-engineer{right:4%}.note-maker{left:4%}.identity-note>strong{font-size:17px}.identity-note p{font-size:10px}.note-index{font-size:7px;letter-spacing:1px}.hero-statement{font-size:14px}.latin-name{font-size:8px;letter-spacing:4px}}
@media(max-width:760px){.presence{height:auto;min-height:830px;max-height:none;padding:160px 7% 190px;display:block}.presence .hero-copy{max-width:100%;width:100%;padding:0;margin:0}.opening-label{top:105px;left:7%;font-size:6px;letter-spacing:1.5px}.hero-prelude{font-size:10px;margin-bottom:24px}.presence h1{font-size:clamp(79px,17vw,122px);letter-spacing:-3px;line-height:1.2}.presence h1 .first-name{font-size:.8em}.presence h1 .last-name{padding:0 8px 12px;width:max-content;margin:auto}.name-period{left:-6px;bottom:9px}.latin-name{font-size:7px;letter-spacing:3px;margin-top:10px}.hero-statement{font-size:13px;margin:24px 0}.hero-actions{gap:20px}.hero-actions .button{font-size:10px;gap:15px;padding:11px 14px;min-height:46px}.identity-note{top:auto;bottom:91px;width:43%;padding-top:15px;border-top:1px solid #dfbb7b25}.note-engineer{right:7%}.note-maker{left:7%}.note-index{font-size:6px;margin-bottom:8px}.identity-note>strong{font-size:15px}.identity-note p{font-size:10px;line-height:1.9;margin-top:4px}.identity-note i{display:none}.name-backdrop{bottom:57px;font-size:13vw;-webkit-text-stroke-color:#c5b78f0a}.presence .hero-bottom{bottom:22px;left:7%;right:7%}.presence .scroll-cue{font-size:8px}.presence #motion-toggle{font-size:8px}.stage-lines i:nth-child(2),.stage-lines i:nth-child(3){display:none}}
@media(max-width:370px){.presence{padding-inline:5%;min-height:820px}.presence h1{font-size:75px}.hero-actions{gap:13px}.hero-actions .button{padding-inline:11px}.hero-statement{font-size:12px}}
@media(prefers-reduced-motion:reduce){.presence *, .presence *:after{animation:none!important;transition:none!important}.presence .name-line{will-change:auto}}

/* Portrait-led chapter: the person occupies the cinematic foreground. */
.portrait-scene{min-height:930px;padding:170px 8% 185px;justify-content:flex-start}
.portrait-scene .hero-copy{width:44%;max-width:44%;text-align:right;margin:0;padding:0}
.portrait-scene h1{font-size:clamp(90px,9.2vw,144px);letter-spacing:-4px}
.portrait-scene h1 .last-name{padding-right:0;padding-left:16px;width:max-content}
.portrait-scene .name-period{left:-8px}
.portrait-scene .hero-prelude{font-size:13px;margin-bottom:18px}
.portrait-scene .latin-name{letter-spacing:4px;font-size:9px;text-align:right}
.portrait-scene .hero-statement{font-size:14px;line-height:2.1;margin:27px 0}
.portrait-scene .hero-actions{justify-content:flex-start;gap:23px}
.hero-portrait{position:absolute;left:7%;top:130px;bottom:0;width:49%;margin:0;z-index:0;pointer-events:none;mask-image:linear-gradient(#000 0%,#000 70%,transparent 99%)}
.hero-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;filter:saturate(.72) contrast(1.06);transform-origin:50% 65%}
.portrait-aura{position:absolute;left:3%;top:80px;width:55%;height:75%;z-index:-1;background:radial-gradient(ellipse at 51% 44%,#c9953b21,transparent 66%);filter:blur(16px)}
.portrait-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#090b0c 0%,#090b0c00 24%),linear-gradient(270deg,#090b0c00 43%,#090b0c00 58%,#090b0c22 100%)}
.portrait-scene #presence-canvas{z-index:1;opacity:.7}
.portrait-scene .stage-light{background:radial-gradient(ellipse at 29% 35%,#aa81301c,transparent 49%),linear-gradient(120deg,transparent 10%,#a9854708 28%,transparent 43%)}
.portrait-scene .stage-light:after{left:8%;right:55%}
.portrait-scene .stage-lines{opacity:.4}
.portrait-scene .name-backdrop{z-index:0;bottom:55px;font-size:12.1vw;-webkit-text-stroke-color:#dfbb7b0b}
.portrait-scene .hero-bottom{z-index:3}
.portrait-scene .identity-note{top:auto;bottom:105px;width:180px;border-top:1px solid #dfbb7b25;padding-top:15px}
.portrait-scene .note-engineer{right:8%}
.portrait-scene .note-maker{right:27%;left:auto;text-align:right}
.portrait-scene .note-index{font-size:7px;margin-bottom:9px}
.portrait-scene .identity-note>strong{font-size:17px}
.portrait-scene .identity-note p{font-size:10px;margin-top:3px}
.portrait-scene .identity-note i{display:none}
.portrait-credit{position:absolute;bottom:135px;left:8%;display:flex;align-items:center;gap:18px;font-size:13px;z-index:2;color:#c9c7b8;direction:ltr}
.portrait-credit small{display:block;font:7px Arial;letter-spacing:2px;color:#8a8d80;margin-top:8px}
.credit-rule{width:37px;height:1px;background:var(--gold)}
.intro-playing .hero-portrait img{animation:portrait-arrive 2.3s ease-out both}
.intro-playing .portrait-credit{animation:identity-arrive 1s 1.4s both}
.portrait-scene.intro-playing .first-name{animation-delay:.4s}
.portrait-scene.intro-playing .last-name{animation-delay:.6s}
.portrait-scene.motion-paused .hero-portrait img,.portrait-scene.motion-paused .portrait-credit{animation:none;opacity:1;transform:none}
@keyframes portrait-arrive{from{opacity:.15;transform:scale(1.045) translateY(14px)}to{opacity:1;transform:none}}
.globe-map{height:500px;overflow:hidden}
#world-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;mask-image:radial-gradient(ellipse,#000 45%,transparent 74%)}
.world-fallback{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 75% 20%,#e9c274,#423621 20%,#090b0c 70%);box-shadow:2px -3px 22px #dfbb7b30;z-index:-1}
.globe-ready .world-fallback{display:none}
.globe-map .planet{z-index:2;text-shadow:0 2px 8px #000}
.globe-map .planet-vision{top:7%;right:19%}
.globe-map .planet-shargh{top:55%;right:0}
.globe-map .planet-raymia{top:68%;left:0}
.globe-map .map-index{bottom:10px}
@media(min-width:1700px){.portrait-scene{padding-right:12%}.portrait-scene .hero-copy{margin:0}.portrait-scene .note-engineer{right:12%}.portrait-scene .note-maker{right:29%}.hero-portrait{left:10%;width:44%}}
@media(max-width:1100px) and (min-width:761px){.portrait-scene{min-height:870px;padding-right:6%;padding-left:6%;padding-top:155px}.portrait-scene .hero-copy{max-width:47%;width:47%}.portrait-scene h1{font-size:clamp(85px,9.7vw,110px)}.hero-portrait{left:0;width:53%;top:150px}.portrait-scene .hero-statement{font-size:12px}.portrait-scene .hero-actions{gap:15px}.portrait-scene .hero-actions .button{font-size:10px;padding:12px 16px;gap:16px}.portrait-scene .identity-note{width:155px}.portrait-scene .note-engineer{right:6%}.portrait-scene .note-maker{right:27%}.portrait-credit{left:5%;font-size:11px}.globe-map{height:440px}}
@media(max-width:760px){.portrait-scene{height:auto;min-height:1060px;padding:465px 7% 220px;display:block}.hero-portrait{top:115px;left:7%;bottom:auto;width:86%;height:620px;mask-image:linear-gradient(#000 0%,#000 50%,transparent 98%)}.hero-portrait img{object-position:center top;filter:saturate(.75) contrast(1.03)}.portrait-aura{left:0;top:100px;width:100%;height:570px}.portrait-shade{background:linear-gradient(0deg,#090b0c 0%,#090b0c00 48%),linear-gradient(0deg,#090b0c00 30%,#090b0c00 60%)}.portrait-scene .hero-copy{max-width:100%;width:100%;text-align:right;padding:0;margin:0}.portrait-scene .hero-prelude{font-size:10px;margin-bottom:6px;text-shadow:0 1px 15px #000}.portrait-scene h1{font-size:clamp(77px,18vw,115px);line-height:1.12;letter-spacing:-3px;text-shadow:0 2px 45px #090b0c80}.portrait-scene h1 .first-name{font-size:.7em}.portrait-scene h1 .last-name{margin:0;padding-bottom:7px}.portrait-scene .latin-name{font-size:7px;letter-spacing:2.8px;margin-top:8px}.portrait-scene .hero-statement{font-size:12px;margin:20px 0}.portrait-scene .hero-actions{gap:20px}.portrait-scene .hero-actions .button{font-size:10px;gap:18px;padding:11px 17px}.portrait-scene .identity-note{bottom:85px;width:40%;padding-top:13px}.portrait-scene .note-engineer{right:7%}.portrait-scene .note-maker{right:auto;left:7%;text-align:left}.portrait-scene .identity-note>strong{font-size:14px}.portrait-scene .identity-note p{font-size:9px}.portrait-scene .note-index{font-size:6px;letter-spacing:1px}.portrait-credit{display:none}.portrait-scene .name-backdrop{bottom:40px}.portrait-scene .opening-label{font-size:6px;letter-spacing:1px}.globe-map{height:370px}.globe-map .planet-vision{right:12%}.globe-map .planet-raymia{left:-2%}.globe-map .planet-shargh{right:-2%}.globe-map .planet span{font-size:11px}}
@media(max-width:370px){.portrait-scene{padding-top:430px;min-height:1020px}.hero-portrait{top:125px;height:550px;left:3%;width:94%}.portrait-scene h1{font-size:73px}.portrait-scene .hero-actions{gap:15px}.portrait-scene .hero-actions .button{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.portrait-scene .hero-portrait img{animation:none!important;opacity:1;transform:none}.portrait-scene .portrait-credit{animation:none!important}}
@media(max-width:760px){.hero-portrait{mask-image:none}.hero-portrait img{height:auto;mask-image:linear-gradient(#000 0%,#000 64%,transparent 99%)}}