/* V45.4 • Editorial HUD & Persian-first design language */
:root{--noir:#0d1429;--paper:#fff5e9;--cyan:#78e8e0;--pink:#f89cbd;--muted-text:#d6dfed}
html:lang(fa) body{font-family:"Vazirmatn","Noto Sans Arabic","Noto Sans Arabic UI",Tahoma,system-ui,sans-serif;letter-spacing:0}
html:lang(fa) .page-title,html:lang(fa) .hero-panel h1,html:lang(fa) .portfolio-section h2{letter-spacing:-.025em;line-height:1.2}
html:lang(fa) .header,html:lang(fa) .topbar{direction:rtl}
html:lang(fa) .logo,html:lang(fa) .brand{letter-spacing:0}
html:lang(fa) .main-nav,html:lang(fa) .nav{letter-spacing:0;gap:clamp(12px,1.7vw,27px)}
html:lang(fa) .main-nav a,html:lang(fa) .nav a,html:lang(fa) .btn,html:lang(fa) .tool,html:lang(fa) .icon-button{font-family:inherit;font-size:13px;letter-spacing:0}
html:lang(fa) .hero-panel{right:clamp(18px,5vw,90px);left:auto;text-align:right;direction:rtl}
html:lang(fa) .dialogue{left:clamp(15px,5vw,90px);right:auto;direction:rtl;text-align:right;grid-template-columns:47px 1fr}
html:lang(fa) .dialogue p{font-family:inherit;font-size:14px;line-height:1.8;font-weight:650}
html:lang(fa) .dialogue-title{font-family:inherit;letter-spacing:0;font-size:11px}
html:lang(fa) .tiny-location{right:clamp(14px,5vw,90px);left:auto;letter-spacing:0}
html:lang(fa) .world-hud{direction:rtl}
html:lang(fa) .map-panel{left:clamp(15px,5vw,90px);right:auto;text-align:right}
html:lang(fa) .map-links button{text-align:right;font-family:inherit;letter-spacing:0}
html:lang(fa) .hotspot{text-align:center;font-family:inherit}
html:lang(fa) .hotspot b,html:lang(fa) .hotspot small{font-family:inherit}
html:lang(fa) .portfolio-section{text-align:right;direction:rtl}
html:lang(fa) .portfolio-heading p{line-height:1.9}
html:lang(fa) .project-card>span:last-child{line-height:1.75}
html:lang(fa) .project-card b,html:lang(fa) .primary-action,html:lang(fa) .outline-action,html:lang(fa) .section-kicker{font-family:inherit;letter-spacing:0}
html:lang(fa) .interior-shell,html:lang(fa) .v453-room{direction:rtl;text-align:right}
html:lang(fa) .interior-info h2,html:lang(fa) .v453-room-aside h2{line-height:1.25;letter-spacing:0}
html:lang(fa) .case-overlay{direction:rtl;text-align:right}
html:lang(fa) .case-body p{line-height:1.85}
html:lang(fa) .section-body,html:lang(fa) .footer{text-align:right;direction:rtl}
html:lang(fa) .page-title{font-size:clamp(38px,6vw,84px)}
html:lang(fa) .page-desc{line-height:1.85;max-width:680px}
html:lang(fa) .content-card p,html:lang(fa) .detail-panel p{line-height:1.9}
html:lang(fa) .field label,html:lang(fa) .form-step,html:lang(fa) .step-tabs span{font-family:inherit;letter-spacing:0}
html:lang(fa) .form-grid{direction:rtl}
html:lang(fa) input[type=email],html:lang(fa) input[type=url]{direction:ltr;text-align:left}
/* Art direction: reduce HUD noise, keep readable click targets */
.topbar,.header{box-shadow:0 5px 28px #050a1d30;border-color:#ffffff28}
.hero-panel{background:linear-gradient(115deg,#0c173be9,#121b3cdd);padding:clamp(20px,2.5vw,32px);border:1px solid #acb1d355;border-radius:18px;backdrop-filter:blur(8px);width:min(455px,42vw);box-shadow:0 18px 44px #07112570}
.hero-panel h1{font-size:clamp(44px,5vw,76px);margin:16px 0}
.hero-panel p{font-size:clamp(14px,1.1vw,17px)}
.dialogue{border:1px solid #fff0e0;box-shadow:0 14px 40px #090d2870;border-radius:12px;width:min(320px,34vw)}
.portrait{border-radius:8px}
.world-hud{bottom:15px}
.world-progress{border-color:#9ea7d055;backdrop-filter:blur(9px);min-width:175px}
.world-controls button{min-height:44px;min-width:50px;border-color:#92a9cf55}
.hotspot{animation:none;min-width:120px;max-width:180px;padding:8px 11px;border-width:1px;box-shadow:0 4px 20px #080c2ca3}
.hotspot:focus-visible{outline:3px solid #ffcc85}
.portfolio-section{background:#fff3e6;padding-inline:max(5vw,20px)}
.portfolio-heading{gap:28px}.portfolio-section h2{font-size:clamp(40px,5.5vw,85px)}
.project-card{border-radius:14px;overflow:hidden;background:#fffaf2;box-shadow:0 10px 22px #44304c12}
.project-card:hover{box-shadow:0 16px 28px #44304c28}
.project-visual{height:245px;font-size:0!important;background-size:cover!important;background-position:center!important}
.project-visual i{background:#fff6e9e8;color:#172238;padding:7px 10px;border-radius:5px;font-size:11px}
.livora-card .project-visual{background-image:url('../assets/v454/livora-pixel.webp')!important}
.belsino-card .project-visual{background-image:url('../assets/v454/belsino-pixel.webp')!important}
.caat-card .project-visual{background-image:url('../assets/v454/caat-pixel.webp')!important}
.content-card{border-color:#7184a444}.content-card:hover{border-color:#f7a4c3}
.card-art{background-size:cover!important;background-position:center!important}
.content-card[href*='livora'] .card-art{background-image:url('../assets/v454/livora-pixel.webp')!important}
.content-card[href*='belsino'] .card-art{background-image:url('../assets/v454/belsino-pixel.webp')!important}
.content-card[href*='caat'] .card-art{background-image:url('../assets/v454/caat-pixel.webp')!important}
.content-card[href*='openjarvis'] .card-art{background-image:url('../assets/v454/lab-pixel.webp')!important}
.card-art b{background:#121d3edb;border:1px solid #ffffff45;padding:5px 14px;border-radius:6px;font-size:30px}
.card-art:before{display:none}
/* Showcase labels are clearly illustrative, never presented as product screenshots */
.content-card .card-art:after{content:'CONCEPT ART';position:absolute;left:9px;bottom:9px;background:#111b34db;padding:3px 8px;font:700 10px monospace;color:#fff4e8}
html:lang(fa) .content-card .card-art:after{content:'تصویرسازی مفهومی';font-family:inherit}
.v453-room-aside{background:#121d37}
.v453-room-aside p{font-size:15px;line-height:1.85}
.v453-room-hud strong{background:#0e1a3df3}
.v453-room-aside h2{font-size:clamp(30px,2.8vw,44px)}
/* Ship It! game — simulation, interaction and state design */
.ship-garage{color:#f7f0eb;background:linear-gradient(135deg,#101a37,#191431 68%,#0c2436);border:1px solid #7185b4;border-radius:16px;overflow:hidden;max-width:860px;box-shadow:0 25px 70px #080c1e70}
.ship-garage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:clamp(17px,4vw,28px);background:repeating-linear-gradient(135deg,#ffffff05 0 6px,transparent 6px 24px)}
.ship-garage-head h3{font-size:clamp(23px,3.2vw,36px);margin:8px 0;letter-spacing:0}
.ship-garage-head p{max-width:56ch;line-height:1.7;color:#d1dded;font-size:14px}
.ship-kicker{color:#7be6e1;font:800 11px monospace;letter-spacing:.1em}
.ship-best{flex:none;padding:8px 11px;background:#2b264d;border:1px solid #eea6c9;border-radius:9px;color:#ffc2da;font:800 12px monospace}
.ship-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 18px 16px}
.ship-milestone{border-bottom:4px solid #4f5980;color:#a5b5d2;display:flex;align-items:center;gap:8px;padding:11px 5px;font-size:12px}
.ship-milestone span{display:grid;place-items:center;width:27px;height:27px;background:#313756;border-radius:7px;flex:none}
.ship-milestone.current{border-color:#ff93bd;color:#fff7ef}.ship-milestone.complete{border-color:#a9ef80;color:#c9efc4}
.ship-main{background:#121d3cf5;padding:clamp(15px,3vw,25px);min-height:260px}.ship-instructions{font-size:15px;color:#d9e2f2;line-height:1.85;margin:0 0 18px}
.ship-process{list-style:none;padding:0;display:grid;gap:9px;counter-reset:mission}
.ship-process-row{display:flex;align-items:center;gap:13px;background:#1b2a4a;border:1px solid #5b729c;border-radius:9px;padding:8px 12px;min-height:61px}
.ship-process-row strong{flex:1;font-size:14px;line-height:1.6}.ship-step-index{color:#ffb2ca;font-weight:900;font-family:monospace}
.ship-step-ctrl{display:flex;gap:5px}.ship-arrow,.ship-test-button{border:1px solid #8d9ec2;background:#354466;color:#fff7e6;min-width:40px;min-height:40px;border-radius:7px;cursor:pointer}
.ship-arrow:hover,.ship-test-button:hover{background:#506083}
.ship-switches,.ship-tests{display:grid;gap:10px;margin-bottom:18px}
.ship-switch{display:flex;gap:13px;align-items:center;padding:14px 16px;border:1px solid #596c91;background:#1d2a49;border-radius:10px;cursor:pointer}
.ship-switch.enabled{border-color:#7be7cd;background:#203d48}.ship-switch.unsafe.enabled{border-color:#ff818f;background:#4d2638}
.ship-switch input{width:20px;height:20px;accent-color:#a7f384;flex:none}
.ship-switch span{display:grid;gap:5px}.ship-switch small{color:#c6d5e6;line-height:1.55}
.ship-test{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1c2948;border:1px solid #5c759a;padding:13px;border-radius:10px}
.ship-test.passed{border-color:#88dfc8}.ship-test>div{display:grid;gap:5px;flex:1}.ship-test small{color:#b3c9dd;line-height:1.6}
.ship-main-button{background:#a7f37f;color:#10233b;border:0;border-radius:8px;min-height:48px;padding:12px 24px;font-weight:900;margin-top:12px;cursor:pointer;box-shadow:4px 4px 0 #264a4d}
.ship-main-button:hover{background:#c1ff9a}.ship-flash{padding:10px 14px;border-radius:7px;margin-bottom:12px}.ship-flash.good{background:#1b5846;color:#d0ffed}.ship-flash.warn{background:#633449;color:#ffe2e4}
.ship-victory{font-size:65px;color:#b8ee86;text-align:center}.ship-release-log{display:grid;gap:7px;background:#142b38;border:1px solid #6cbaa9;padding:15px;border-radius:9px;margin-top:14px}
.ship-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 21px;border-top:1px solid #4a5d80;gap:10px}.ship-footer small{color:#b2c4de}.ship-reset{border:1px solid #f8a3bb;color:#ffe0ed;background:transparent;padding:8px 13px;border-radius:6px;cursor:pointer}
#shipRestart{display:none}
@media(max-width:920px){.hero-panel{width:min(440px,49vw)}.dialogue{width:min(265px,32vw)}.project-grid{gap:12px}.v453-room-aside{padding:24px}}
@media(max-width:720px){.hero-panel{top:112px;left:14px!important;right:14px!important;width:auto;max-width:calc(100vw - 28px);padding:18px 19px}.hero-panel h1{font-size:clamp(35px,10vw,54px)}.hero-panel p{font-size:13px;max-width:42ch}.dialogue{top:auto;bottom:128px;left:14px!important;right:14px!important;width:auto;max-width:340px;padding:8px;grid-template-columns:40px 1fr}.portrait{height:43px;font-size:20px}.dialogue p{font-size:12px;line-height:1.55}.scroll-cue{margin-top:15px}.hero-actions{margin-top:15px}.world-hud{bottom:8px;left:8px;right:8px;flex-wrap:wrap;justify-content:center}.world-progress{flex:1;min-width:140px}.world-controls{display:flex;gap:3px}.world-controls button{padding:10px 8px;font-size:10px;min-width:36px}.tiny-location{display:none}.project-grid{grid-template-columns:1fr}.project-visual{height:220px}.portfolio-heading{align-items:start;flex-direction:column}.ship-garage-head{flex-direction:column}.ship-process-row{gap:8px}.ship-milestone{font-size:11px}.ship-test{flex-wrap:wrap}.ship-test button{width:100%}}
@media(max-width:420px){.hero-panel h1{font-size:35px;margin:9px 0}.hero-panel .eyebrow{font-size:9px}.hero-panel{top:88px}.dialogue{bottom:116px;max-width:calc(100vw - 28px)}.world-controls button{font-size:9px}.world-progress{padding:7px 9px}.portfolio-section h2{font-size:42px}.ship-garage-head h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.hero-panel,.dialogue,.project-card,.ship-garage *{animation:none!important;transition:none!important}}
/* Unified 300ms room transitions; independent of scrolling or game state */
.v454-door-transition{position:fixed;inset:0;z-index:145;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none;overflow:hidden}
.v454-door-transition i{background:linear-gradient(145deg,#272144,#aa598b);transform:scale(.02);opacity:0;transform-origin:center}
.v454-door-transition.v454-animate i{animation:v454-fade 335ms ease-out both;animation-delay:calc((var(--i) % 8) * 12ms)}
@keyframes v454-fade{0%{opacity:.85;transform:scale(1.04)}54%{opacity:.8}100%{transform:scale(.03);opacity:0}}
@media(prefers-reduced-motion:reduce){.v454-door-transition{display:none}}