.ha-projects {
    position: relative;
    overflow: clip;
    isolation: isolate;
    min-height: 100svh;
    padding: clamp(88px, 8vw, 140px) 0 clamp(76px, 7vw, 112px);
    color: #f5f0ec;
    background: radial-gradient(ellipse at 50% 43%, #241015 0%, #100c0f 28%, #08080b 66%);
}
.ha-projects::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,46,61,.6), transparent); }
.ha-projects::after { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 53%, transparent 11%, rgba(8,8,11,.55) 72%); }
.ha-projects-universe { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.ha-projects-inner { position: relative; z-index: 2; width: min(100%, 1600px); margin: 0 auto; }
.ha-projects-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; padding: 0 clamp(26px, 5vw, 70px); }
.ha-projects-code { display: block; margin-bottom: 19px; color: #f42e3d; font: 500 11px/1 monospace; letter-spacing: .22em; }
.ha-projects-heading h2 { margin: 0; color: #f5f0ec; font: 700 clamp(52px, 6.4vw, 104px)/.9 'Syne', sans-serif; letter-spacing: -.08em; }
.ha-projects-heading h2 span { color: #f42e3d; }
.ha-projects-controls { display: flex; align-items: center; gap: 22px; padding-bottom: 9px; }
.ha-projects-controls button { display: grid; place-items: center; width: 49px; height: 49px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #f5f0ec; background: rgba(255,255,255,.02); font: 400 25px/1 'Syne', sans-serif; cursor: pointer; transition: border-color .3s, background .3s, transform .3s; }
.ha-projects-controls button:hover, .ha-projects-controls button:focus-visible { border-color: #f42e3d; background: rgba(244,46,61,.15); transform: scale(1.08); outline: none; }
.ha-projects-count { min-width: 69px; color: #817b80; white-space: nowrap; font: 600 12px/1 monospace; letter-spacing: .06em; text-align: center; }
.ha-projects-count strong { color: #f5f0ec; font-weight: 700; font-size: 17px; }.ha-projects-count i { margin: 0 8px; color: #f42e3d; font-style: normal; }
.ha-projects-stage { position: relative; height: clamp(550px, 57vw, 740px); margin-top: clamp(8px, 2.5vw, 30px); perspective: 1600px; outline: none; touch-action: pan-y; cursor: grab; }
.ha-projects-stage:active { cursor: grabbing; }.ha-projects-stage:focus-visible { outline: 1px solid #f42e3d; outline-offset: -5px; }
.ha-projects-horizon { position: absolute; z-index: 0; left: -10%; right: -10%; top: 38%; height: 48%; border-top: 1px solid rgba(244,46,61,.14); transform: perspective(800px) rotateX(67deg); background: repeating-linear-gradient(90deg, transparent 0 105px, rgba(244,46,61,.11) 106px 107px), repeating-linear-gradient(0deg, transparent 0 70px, rgba(244,46,61,.10) 71px 72px); mask-image: linear-gradient(180deg, #000, transparent 88%); pointer-events: none; }
.ha-projects-deck { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.ha-project-card { position: absolute; z-index: 1; top: 47%; left: 50%; width: min(70vw, 970px); height: min(38vw, 530px); min-height: 420px; transform-style: preserve-3d; transform-origin: center; will-change: transform, opacity; cursor: pointer; pointer-events: auto; }
.ha-project-card:not(:first-child) { opacity: 0; visibility: hidden; }
.ha-project-depth { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.ha-project-poster { position: relative; overflow: hidden; width: 100%; height: 100%; border: 1px solid rgba(255,255,255,.19); background: radial-gradient(circle at 50% 42%, #5e1420 0, #220e14 32%, #09090c 75%); box-shadow: 0 55px 110px rgba(0,0,0,.65), inset 0 0 80px rgba(244,46,61,.08); }
.ha-project-poster::before { content: ''; position: absolute; inset: 4.5%; border: 1px solid rgba(255,255,255,.15); pointer-events: none; }
.ha-project-poster::after { content: ''; position: absolute; inset: 0; opacity: .33; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px 5px); pointer-events: none; }
.ha-project-grid { position: absolute; inset: 0; opacity: .3; background: linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.18) 50%, transparent 50.1%), linear-gradient(0deg, transparent 49.9%, rgba(255,255,255,.18) 50%, transparent 50.1%), repeating-linear-gradient(90deg, transparent 0 68px, rgba(255,255,255,.08) 69px 70px); transform: perspective(900px) rotateX(25deg) scale(1.3); }
.ha-project-architecture { position: absolute; inset: 0; pointer-events: none; }
.ha-project-architecture i { position: absolute; display: block; width: 35%; aspect-ratio: 1; border: 1px solid rgba(244,46,61,.35); border-radius: 50%; top: 13%; left: 33%; box-shadow: 0 0 90px rgba(244,46,61,.12); }
.ha-project-architecture i:nth-child(2) { width: 47%; left: 26.5%; top: 1%; border-style: dashed; opacity: .6; }
.ha-project-architecture i:nth-child(3) { width: 22%; left: 39.5%; top: 26%; border-color: rgba(255,255,255,.35); }
.ha-project-poster-top, .ha-project-poster-bottom { position: absolute; z-index: 4; left: 7%; right: 7%; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.7); font: 500 11px/1 monospace; letter-spacing: .18em; }
.ha-project-poster-top { top: 8%; }.ha-project-poster-bottom { bottom: 8%; font-size: 13px; }
.ha-project-poster-bottom span:last-child { color: #f42e3d; font-size: 22px; }
.ha-project-mark { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; color: #f5f0ec; font: 800 clamp(150px, 20vw, 300px)/1 'Syne', sans-serif; letter-spacing: -.12em; text-shadow: 0 25px 55px rgba(0,0,0,.7), 0 0 55px rgba(244,46,61,.3); transform: translateX(-.05em); }
.ha-project-edgeline { position: absolute; z-index: 2; top: 0; bottom: 0; left: 7%; width: 1px; background: linear-gradient(transparent, rgba(244,46,61,.6), transparent); }
.ha-project-meta { position: absolute; display: flex; align-items: center; gap: 17px; top: calc(100% + 24px); left: 0; right: 0; color: #9f999c; font: 600 11px/1 'Poppins', sans-serif; letter-spacing: .14em; white-space: nowrap; }
.ha-project-meta span:first-child { color: #f42e3d; font-family: monospace; }.ha-project-meta span:last-child { margin-left: auto; }
.ha-project-meta h3 { overflow: hidden; margin: 0; color: #f5f0ec; font: 700 clamp(25px, 2.4vw, 40px)/1 'Syne', sans-serif; letter-spacing: -.04em; text-overflow: ellipsis; }
.ha-project-card[data-variant="1"] .ha-project-poster { background: radial-gradient(circle at 50% 46%, #f2ece8 0, #c8b9ba 38%, #413638 100%); }.ha-project-card[data-variant="1"] .ha-project-mark { color: #161215; text-shadow: 0 25px 35px rgba(0,0,0,.2); }.ha-project-card[data-variant="1"] .ha-project-poster-top, .ha-project-card[data-variant="1"] .ha-project-poster-bottom { color: #25191d; }.ha-project-card[data-variant="1"] .ha-project-grid { opacity: .55; }.ha-project-card[data-variant="1"] .ha-project-poster::before { border-color: rgba(35,25,29,.28); }
.ha-project-card[data-variant="2"] .ha-project-poster { background: radial-gradient(circle at 68% 35%, #ab2334 0, #48121c 31%, #0d090c 78%); }.ha-project-card[data-variant="2"] .ha-project-architecture { transform: translateX(17%) rotate(28deg); }.ha-project-card[data-variant="2"] .ha-project-mark { color: transparent; -webkit-text-stroke: 2px #f5f0ec; text-shadow: none; }
.ha-project-card[data-variant="3"] .ha-project-poster { background: linear-gradient(132deg, #09090c 12%, #302025 50%, #09090c 88%); }.ha-project-card[data-variant="3"] .ha-project-architecture { transform: translateX(-25%) scale(1.3); }.ha-project-card[data-variant="3"] .ha-project-mark { color: #f42e3d; text-shadow: 0 0 45px rgba(244,46,61,.3); }
.ha-projects-rail { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0 clamp(26px, 5vw, 70px); border-top: 1px solid rgba(255,255,255,.18); }.ha-projects-rail::-webkit-scrollbar { display: none; }
.ha-projects-rail button { position: relative; flex: 1 0 105px; display: grid; gap: 11px; min-width: 0; padding: 22px 12px 13px; border: 0; color: #757074; background: transparent; text-align: left; cursor: pointer; transition: color .3s; }
.ha-projects-rail button::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: #f42e3d; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ha-projects-rail button:hover, .ha-projects-rail button:focus-visible, .ha-projects-rail button[aria-current="true"] { color: #f5f0ec; outline: none; }.ha-projects-rail button[aria-current="true"]::before { transform: scaleX(1); }
.ha-projects-rail button span { color: #f42e3d; font: 500 10px/1 monospace; letter-spacing: .06em; }.ha-projects-rail button b { font: 700 11px/1 'Syne', sans-serif; letter-spacing: .02em; }
@media (max-width: 900px) { .ha-projects { padding: 88px 0 70px; }.ha-projects-heading { align-items: start; }.ha-projects-heading h2 { font-size: clamp(46px, 7.5vw, 75px); }.ha-projects-stage { height: 620px; }.ha-project-card { width: min(79vw, 770px); height: 430px; min-height: 0; }.ha-project-mark { font-size: clamp(145px, 27vw, 240px); }.ha-projects-rail button { flex-basis: 96px; } }
@media (max-width: 620px) { .ha-projects { min-height: 0; padding: 75px 0 80px; }.ha-projects-heading { display: block; padding: 0 6%; }.ha-projects-code { font-size: 9px; }.ha-projects-heading h2 { font-size: clamp(45px, 12vw, 68px); }.ha-projects-controls { justify-content: flex-end; margin-top: 32px; padding: 0; }.ha-projects-controls button { width: 42px; height: 42px; }.ha-projects-stage { height: 445px; margin-top: 10px; }.ha-project-card { top: 43%; width: 82vw; height: 295px; }.ha-project-mark { font-size: 30vw; }.ha-project-meta { top: calc(100% + 17px); gap: 8px; font-size: 9px; }.ha-project-meta h3 { font-size: 25px; }.ha-project-meta span:last-child { display: none; }.ha-projects-rail { margin: 0 6%; }.ha-projects-rail button { flex: 0 0 100px; padding: 17px 5px 12px; } }
@media (prefers-reduced-motion: reduce) { .ha-projects-controls button, .ha-projects-rail button, .ha-projects-rail button::before { transition: none; } }

/* One cinematic frame in the same night sky as the hero and open source section. */
.ha-projects { --ha-project-pulse: 0; margin-top: -1px; background: #08080b; }
.ha-projects::before { display: none; }
.ha-projects::after { background: radial-gradient(ellipse at 50% 58%, rgba(244,46,61,calc(var(--ha-project-pulse) * .15)), transparent 52%), linear-gradient(180deg, #08080b 0%, transparent 24%, transparent 78%, #08080b 100%); }
.ha-projects-stage { cursor: default; }
.ha-projects-stage:active { cursor: default; }
.ha-projects-stage::before { content: attr(data-project); position: absolute; z-index: 0; top: 22%; left: 50%; width: max-content; max-width: 100%; color: transparent; -webkit-text-stroke: 1px rgba(244,46,61,.13); font: 800 clamp(110px, 16vw, 250px)/1 'Syne', sans-serif; letter-spacing: -.09em; transform: translateX(-50%) scaleX(1.05); pointer-events: none; opacity: .72; }
.ha-projects-horizon { top: 50%; border-color: rgba(244,46,61,.07); opacity: .55; }
.ha-project-card { cursor: default; }
.ha-projects-rift { position: absolute; z-index: 35; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.ha-project-fragment { position: absolute; z-index: 1; margin: 0; transform-origin: center; pointer-events: none; will-change: transform, opacity, filter; }
.ha-project-fragment[data-variant="1"] { background: radial-gradient(circle at 50% 46%, #f2ece8 0, #c8b9ba 38%, #413638 100%); }
.ha-project-fragment[data-variant="1"] .ha-project-mark { color: #161215; text-shadow: 0 25px 35px rgba(0,0,0,.2); }
.ha-project-fragment[data-variant="1"] .ha-project-poster-top, .ha-project-fragment[data-variant="1"] .ha-project-poster-bottom { color: #25191d; }
.ha-project-fragment[data-variant="2"] { background: radial-gradient(circle at 68% 35%, #ab2334 0, #48121c 31%, #0d090c 78%); }
.ha-project-fragment[data-variant="2"] .ha-project-mark { color: transparent; -webkit-text-stroke: 2px #f5f0ec; text-shadow: none; }
.ha-project-fragment[data-variant="3"] { background: linear-gradient(132deg, #09090c 12%, #302025 50%, #09090c 88%); }
.ha-project-fragment[data-variant="3"] .ha-project-mark { color: #f42e3d; text-shadow: 0 0 45px rgba(244,46,61,.3); }
.ha-project-glyph { position: absolute; z-index: 5; color: #f42e3d; font: 700 14px/1 monospace; text-shadow: 0 0 12px rgba(244,46,61,.8); will-change: transform, opacity; }
.ha-project-glyph:nth-of-type(3n) { color: #f5f0ec; text-shadow: 0 0 9px rgba(255,255,255,.55); }
@media (max-width: 620px) { .ha-projects-stage::before { top: 24%; font-size: 24vw; } }

/* Project screens and the adjacent frames replace the typographic concept posters. */
.ha-projects { padding-top: clamp(78px, 7vw, 110px); }
.ha-projects-heading { align-items: center; }
.ha-projects-heading h2 { font-size: clamp(45px, 5.6vw, 88px); line-height: .98; letter-spacing: -.07em; }
.ha-projects-heading h2 span { color: #f42e3d; }
.ha-projects-heading h2 em { color: #f5f0ec; font-style: normal; }
.ha-projects-stage { margin-top: 15px; }
.ha-projects-stage::before { top: 31%; font-size: clamp(100px, 13vw, 190px); -webkit-text-stroke-color: rgba(244,46,61,.09); }
.ha-project-poster { background: #101016; border-color: rgba(255,255,255,.16); box-shadow: 0 36px 85px rgba(0,0,0,.58), 0 0 55px rgba(244,46,61,.08); }
.ha-project-poster::before, .ha-project-poster::after { display: none; }
.ha-project-screen { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ha-project-grid { z-index: 2; opacity: .22; background: linear-gradient(0deg, rgba(2,2,3,.9), transparent 37%, transparent 70%), repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.018) 6px 7px); transform: none; }
.ha-project-identity { position: absolute; z-index: 4; left: 5%; bottom: 7%; display: flex; align-items: center; gap: 20px; padding: 9px 24px 9px 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(7,7,10,.78); backdrop-filter: blur(15px); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.ha-project-logo { display: block; width: clamp(68px, 6vw, 95px); height: clamp(68px, 6vw, 95px); object-fit: contain; }
.ha-project-identity span { color: #fff; font: 800 clamp(22px, 2.6vw, 40px)/1 'Syne', sans-serif; letter-spacing: -.05em; }
.ha-project-edgeline { left: auto; right: 0; width: 2px; background: linear-gradient(transparent, #f42e3d, transparent); }
.ha-project-card[data-variant="1"] .ha-project-poster, .ha-project-card[data-variant="2"] .ha-project-poster, .ha-project-card[data-variant="3"] .ha-project-poster { background: #101016; }
.ha-projects-peek { position: absolute; z-index: 3; top: 43%; width: clamp(180px, 20vw, 320px); height: clamp(120px, 12vw, 194px); padding: 0; border: 1px solid rgba(255,255,255,.18); background: #090a0d; color: #f5f0ec; cursor: pointer; overflow: hidden; box-shadow: 0 25px 65px rgba(0,0,0,.5); transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .4s, border-color .4s; }
.ha-projects-peek img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) brightness(.5); transform: scale(1.1); transition: filter .6s, transform .65s; }
.ha-projects-peek span { position: absolute; left: 17px; bottom: 14px; color: #fff; font: 700 10px/1 monospace; letter-spacing: .15em; text-shadow: 0 2px 10px #000; }
.ha-projects-peek:hover img, .ha-projects-peek:focus-visible img { filter: blur(1px) brightness(.8); transform: scale(1.05); }
.ha-projects-peek:hover, .ha-projects-peek:focus-visible { border-color: #f42e3d; outline: none; }
.ha-projects-peek-prev { left: 1%; transform: perspective(800px) rotateY(17deg) scale(.84); opacity: .42; }
.ha-projects-peek-next { right: 1%; transform: perspective(800px) rotateY(-17deg) scale(.93); opacity: .62; }
.ha-projects-peek-prev:hover, .ha-projects-peek-prev:focus-visible { transform: perspective(800px) rotateY(9deg) scale(.91); opacity: .9; }
.ha-projects-peek-next:hover, .ha-projects-peek-next:focus-visible { transform: perspective(800px) rotateY(-9deg) scale(1); opacity: .95; }
.ha-projects-rift { z-index: 30; perspective: 1200px; }
.ha-project-pixel { position: absolute; display: block; background-repeat: no-repeat; transform-style: preserve-3d; will-change: transform, opacity; }
.ha-projects-particles { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.ha-projects-particles i { position: absolute; top: -30px; left: var(--x); width: var(--size); height: var(--size); border-radius: 50%; background: #f42e3d; box-shadow: 0 0 14px 2px rgba(244,46,61,.55); opacity: 0; }
.ha-projects-particles i:nth-child(1) { --x: 8%; --size: 3px; }.ha-projects-particles i:nth-child(2) { --x: 15%; --size: 2px; }.ha-projects-particles i:nth-child(3) { --x: 23%; --size: 4px; }.ha-projects-particles i:nth-child(4) { --x: 31%; --size: 2px; }.ha-projects-particles i:nth-child(5) { --x: 38%; --size: 3px; }.ha-projects-particles i:nth-child(6) { --x: 47%; --size: 2px; }.ha-projects-particles i:nth-child(7) { --x: 55%; --size: 3px; }.ha-projects-particles i:nth-child(8) { --x: 62%; --size: 2px; }.ha-projects-particles i:nth-child(9) { --x: 70%; --size: 4px; }.ha-projects-particles i:nth-child(10) { --x: 78%; --size: 2px; }.ha-projects-particles i:nth-child(11) { --x: 87%; --size: 3px; }.ha-projects-particles i:nth-child(12) { --x: 94%; --size: 2px; }
.ha-projects-universe { opacity: .3; }
@media (max-width: 1100px) { .ha-projects-peek { width: 190px; height: 120px; }.ha-projects-peek-prev { left: -8%; }.ha-projects-peek-next { right: -8%; } }
@media (max-width: 620px) { .ha-projects-heading h2 { font-size: clamp(42px, 11vw, 65px); }.ha-projects-stage { height: 445px; }.ha-project-identity { gap: 8px; padding: 5px 12px 5px 5px; }.ha-project-logo { width: 43px; height: 43px; }.ha-project-identity span { font-size: 19px; }.ha-projects-peek { top: 74%; width: 130px; height: 78px; }.ha-projects-peek-prev { left: -10%; }.ha-projects-peek-next { right: -10%; }.ha-projects-peek span { font-size: 8px; left: 10px; bottom: 7px; } }
@media (prefers-reduced-motion: reduce) { .ha-projects-peek, .ha-projects-peek img { transition: none; } }

/* The gallery is a world of full-size screens, with depth instead of thumbnails. */
.ha-projects { background: radial-gradient(ellipse at 50% 54%, #190e12 0, #08080b 55%, #08080b 100%); }
.ha-projects-stage { height: clamp(550px, 43vw, 720px); margin-top: clamp(12px, 2vw, 28px); perspective: 1700px; }
.ha-projects-deck { z-index: 4; }
.ha-project-card { top: 47%; width: min(65vw, 1000px); height: min(36vw, 555px); min-height: 390px; }
.ha-project-card[aria-hidden="true"] { cursor: pointer; }
.ha-project-card[aria-hidden="false"] { cursor: crosshair; }
.ha-project-card:hover .ha-project-poster { border-color: rgba(244,46,61,.55); box-shadow: 0 40px 110px rgba(0,0,0,.7), 0 0 50px rgba(244,46,61,.13); }
.ha-project-poster { transition: border-color .35s, box-shadow .35s; }
.ha-projects-portal { position: absolute; z-index: 1; left: 50%; top: 47%; width: min(55vw, 700px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; background: radial-gradient(circle, transparent 25%, rgba(244,46,61,.08) 34%, transparent 67%); box-shadow: 0 0 100px 10px rgba(244,46,61,.04); pointer-events: none; }
.ha-projects-portal i { position: absolute; inset: 13%; border: 1px solid rgba(244,46,61,.22); border-radius: 50%; }
.ha-projects-portal i:nth-child(2) { inset: 27%; border-color: rgba(255,255,255,.16); }
.ha-projects-portal i:nth-child(3) { inset: 43%; background: #f42e3d; border: none; box-shadow: 0 0 85px 25px rgba(244,46,61,.28); }
.ha-projects-universe { opacity: .75; }
.ha-projects-horizon { opacity: .42; }
.ha-projects-stage::before { top: 19%; opacity: .38; }
.ha-projects-particles i { z-index: 2; }
.ha-scroll-constellation { position: fixed; z-index: 60; top: 18vh; right: 17px; width: 24px; height: 64vh; pointer-events: none; opacity: 0; }
.ha-scroll-path { position: absolute; top: 0; bottom: 0; left: 11px; width: 1px; background: linear-gradient(180deg, transparent, rgba(244,46,61,.36) 20%, rgba(244,46,61,.36) 80%, transparent); }
.ha-scroll-core, .ha-scroll-satellite { position: absolute; z-index: 2; top: 0; left: 6px; width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: #f42e3d; box-shadow: 0 0 17px rgba(244,46,61,.8), 0 0 36px rgba(244,46,61,.4); }
.ha-scroll-satellite { left: 9px; width: 5px; height: 5px; border: none; opacity: .85; }
.ha-scroll-satellite:last-child { background: #fff; box-shadow: 0 0 12px #fff; }
@media (max-width: 900px) { .ha-project-card { width: 75vw; height: 47vw; min-height: 340px; }.ha-projects-stage { height: 600px; } }
@media (max-width: 620px) { .ha-projects-stage { height: 425px; }.ha-project-card { top: 43%; width: 82vw; height: 270px; min-height: 0; }.ha-projects-portal { width: 85vw; }.ha-projects-stage::before { top: 24%; }.ha-scroll-constellation { right: 5px; opacity: .45; } }
.ha-project-inspect { position: absolute; z-index: 6; top: 5%; right: 5%; display: grid; place-items: center; width: 45px; height: 45px; padding: 0; border: 1px solid rgba(255,255,255,.5); color: #fff; background: rgba(8,8,11,.65); backdrop-filter: blur(12px); font: 28px/1 'Syne', sans-serif; cursor: pointer; transition: background .3s, border-color .3s, transform .3s; }
.ha-project-inspect:hover, .ha-project-inspect:focus-visible { border-color: #f42e3d; background: #f42e3d; transform: scale(1.08); outline: none; }
.ha-projects-dialog { position: fixed; inset: 0; width: min(92vw, 1520px); max-width: none; max-height: none; margin: auto; padding: 3vw; overflow: visible; border: 0; color: #fff; background: transparent; perspective: 1400px; }
.ha-projects-dialog::backdrop { background: rgba(2,2,4,.94); backdrop-filter: blur(18px); }
.ha-projects-dialog-world { position: relative; transform-style: preserve-3d; border: 1px solid rgba(244,46,61,.45); background: #08080b; box-shadow: 0 0 100px rgba(244,46,61,.2), 0 40px 130px #000; }
.ha-projects-dialog-screen { display: block; width: 100%; max-height: 76vh; aspect-ratio: 1.75; object-fit: contain; }
.ha-projects-dialog-name { position: absolute; left: 4%; bottom: 5%; display: flex; align-items: center; gap: 20px; padding: 11px 24px 11px 11px; border: 1px solid rgba(255,255,255,.35); background: rgba(4,4,7,.82); backdrop-filter: blur(20px); }
.ha-projects-dialog-name img { width: clamp(48px, 5vw, 90px); height: clamp(48px, 5vw, 90px); }
.ha-projects-dialog-name strong { font: 800 clamp(22px, 3.5vw, 55px)/1 'Syne', sans-serif; letter-spacing: -.05em; }
.ha-projects-dialog-close { position: absolute; z-index: 5; top: -17px; right: -17px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: #f42e3d; font: 32px/1 'Syne', sans-serif; cursor: pointer; }
.ha-projects-dialog-close:hover, .ha-projects-dialog-close:focus-visible { background: #fff; color: #111; outline: none; }
@media (max-width: 620px) { .ha-project-inspect { width: 33px; height: 33px; font-size: 21px; }.ha-projects-dialog { width: 94vw; padding: 0; }.ha-projects-dialog-close { top: -17px; right: -4px; width: 39px; height: 39px; font-size: 25px; }.ha-projects-dialog-name { padding: 5px 10px 5px 5px; gap: 8px; }.ha-projects-dialog-name img { width: 34px; height: 34px; }.ha-projects-dialog-name strong { font-size: 18px; } }
@media (max-width: 620px) { .ha-projects-stage { height: 675px; }.ha-projects-portal { top: 56%; } }
.ha-projects-stage, .ha-projects-stage img { user-select: none; -webkit-user-drag: none; }

/* A single rapid depth jump replaces side-to-side project travel. */
.ha-projects-jump { position: absolute; z-index: 25; inset: -10% -3%; overflow: hidden; pointer-events: none; visibility: hidden; opacity: 0; isolation: isolate; }
.ha-projects-jump-core, .ha-projects-jump-streaks, .ha-projects-jump-shutter { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform-origin: 50% 47%; }
.ha-projects-jump-core { background: radial-gradient(circle at 50% 47%, #f7e9e9 0 1.5%, #f42e3d 2.5%, rgba(244,46,61,.5) 4%, rgba(244,46,61,.16) 13%, transparent 36%); filter: blur(1px); mix-blend-mode: screen; }
.ha-projects-jump-streaks { background: repeating-conic-gradient(from 0deg at 50% 47%, transparent 0deg 8deg, rgba(244,46,61,.02) 8.3deg, rgba(255,233,235,.45) 8.5deg, transparent 8.75deg 17deg); mask-image: radial-gradient(circle at 50% 47%, transparent 0 6%, #000 16%, transparent 65%); mix-blend-mode: screen; }
.ha-projects-jump[data-variant="1"] .ha-projects-jump-streaks { background: repeating-conic-gradient(from 11deg at 50% 47%, transparent 0deg 5deg, rgba(255,255,255,.5) 5.2deg, rgba(244,46,61,.16) 5.5deg, transparent 5.8deg 12deg); }
.ha-projects-jump[data-variant="2"] .ha-projects-jump-streaks { background: repeating-conic-gradient(from -14deg at 50% 47%, transparent 0deg 12deg, rgba(244,46,61,.55) 12.2deg, rgba(255,255,255,.3) 12.4deg, transparent 12.6deg 21deg); }
.ha-projects-jump-shutter { background: radial-gradient(ellipse at 50% 47%, #08080b 0 22%, rgba(8,8,11,.97) 36%, rgba(8,8,11,.4) 73%, transparent 100%); }
.ha-projects-stage.is-jumping .ha-projects-deck { pointer-events: none; }
.ha-projects-stage.is-jumping::before { opacity: 0; }
.ha-scroll-continuum { position: fixed; z-index: 18; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .75; mix-blend-mode: screen; }
@media (max-width: 620px) { .ha-scroll-continuum { opacity: .48; } }
@media (prefers-reduced-motion: reduce) { .ha-scroll-continuum, .ha-projects-jump { display: none; } }