.work { padding-bottom: 0; background: #f5f6fb; }
.work-heading { margin-bottom: 25px; }
.project-scroll { position: relative; margin-top: 34px; background: #e7e8e5; }
.project-stage { position: relative; padding: 100px 0; overflow: hidden; background: linear-gradient(135deg,rgba(244,245,243,.96),rgba(226,229,230,.82)); }
.project-stage__word, .project-stage__top, .project-progress { display: none; }
.project-track { position: relative; z-index: 2; width: var(--shell); display: grid; gap: 90px; margin-inline: auto; }
.project-slide { position: relative; display: flex; align-items: center; flex-direction: column; min-width: 0; }
.project-slide__info { width: min(900px, 100%); display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 20px; }
.project-slide__number { align-self: start; color: #747b7e; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.project-slide__info h3 { grid-column: 1; margin: 9px 0 0; font: 600 clamp(40px, 6vw, 74px)/1 "Manrope"; letter-spacing: -4px; }
.project-slide__tags { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; padding-bottom: 4px; }
.project-slide__tags span { padding: 8px 11px; border: 1px solid rgba(7,18,46,.18); border-radius: 999px; color: #555d62; font-size: 9px; background: rgba(255,255,255,.25); }
.project-media { --view-x: 50%; --view-y: 50%; --media-x: 0px; --media-y: 0px; position: relative; width: min(900px, 100%); height: min(620px, 64vw); display: grid; place-items: center; padding: 0; border: 1px solid rgba(7,18,46,.12); border-radius: 28px; background: #fff; box-shadow: 0 26px 65px rgba(27,30,50,.14); overflow: hidden; isolation: isolate; transition: box-shadow .5s ease, border-color .4s ease; }
.project-media::after { content: ""; position: absolute; z-index: 2; inset: 0; background: radial-gradient(320px circle at var(--view-x) var(--view-y), rgba(255,255,255,.18), transparent 60%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.project-media:hover { border-color: rgba(7,18,46,.22); box-shadow: 0 34px 85px rgba(27,30,50,.22); }
.project-media:hover::after { opacity: 1; }
.project-media__surface { width: 100%; height: 100%; filter: blur(var(--project-blur)); transform: translate3d(var(--media-x), var(--media-y), 0) scale(1); transition: filter .45s ease, transform .85s var(--ease-out); will-change: filter, transform; }
.project-media:hover .project-media__surface { filter: blur(5px) brightness(1.06); transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.045); }
.project-browser { width: 100%; height: 100%; border: 0; border-radius: inherit; background: #fff; box-shadow: none; overflow: hidden; transform: none; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.project-media:hover .project-browser { transform: none; }
.project-screenshot { width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #eef0f5; }
.mediora-screen, .skillsy-screen, .food-screen, .nagrik-screen, .bright-screen { position: relative; height: 380px; padding: 56px 8%; overflow: hidden; }
.mediora-screen { color: #fff; background: radial-gradient(circle at 78% 50%, rgba(99,220,211,.42), transparent 22%), linear-gradient(125deg, #0e3b60, #147f8c); }
.mediora-screen::before { content: "+"; position: absolute; right: 15%; top: 21%; display: grid; place-items: center; width: 105px; height: 105px; color: #a0fff0; font: 200 72px "Manrope"; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.04); }
.mediora-screen > span, .skillsy-screen > span, .nagrik-screen > span, .bright-screen > span { font: 500 clamp(25px, 4vw, 52px)/1.08 "Manrope"; letter-spacing: -2px; }
.mediora-screen span b { color: #9df6e8; font-weight: 600; }
.mediora-screen div { position: absolute; width: 45%; height: 14px; left: 8%; bottom: 60px; border-radius: 5px; background: rgba(255,255,255,.18); box-shadow: 0 26px 0 rgba(255,255,255,.1); }
.skillsy-screen { color: #222946; background: #fff9e9; }
.skillsy-screen b { color: #dc711f; }
.skillsy-screen div { display: flex; gap: 6px; margin-top: 45px; }
.skillsy-screen div i { padding: 7px 11px; border: 1px solid #efc88e; border-radius: 30px; color: #a96824; font-size: 8px; font-style: normal; }
.food-screen { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; background: radial-gradient(circle at 22% 50%, rgba(255,99,47,.25), transparent 27%), #171319; }
.food-screen span { font: 500 clamp(22px, 3vw, 37px)/1.08 "Manrope"; letter-spacing: -1.5px; }
.food-screen b { color: #ff8057; }
.plate { display: grid; place-items: center; width: 120px; height: 120px; border: 1px solid #ff7c58; border-radius: 50%; color: #ff7c58; font: 700 26px "Manrope"; box-shadow: inset 0 0 0 11px #171319, inset 0 0 0 12px rgba(255,124,88,.4), 0 0 40px rgba(255,98,54,.17); }
.nagrik-screen { color: #fff; background: radial-gradient(circle at 80% 40%, rgba(111,190,255,.55), transparent 24%), linear-gradient(135deg, #0d3478, #2369c7); }
.nagrik-screen b { color: #9fd6ff; }
.nagrik-screen small { position: absolute; left: 8%; bottom: 52px; color: #c9ddff; font-size: 10px; }
.nagrik-mark { position: absolute; right: 12%; bottom: 18%; display: grid; place-items: center; width: 120px; height: 120px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font: 600 24px "Manrope"; box-shadow: 0 0 0 25px rgba(255,255,255,.05); }
.bright-screen { color: #153e39; background: radial-gradient(circle at 76% 44%, rgba(96,211,145,.25), transparent 25%), #ecfff3; }
.bright-screen b { color: #13825f; }
.bright-screen > div { display: flex; gap: 10px; margin-top: 48px; }
.bright-screen > div i { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #a9dac0; border-radius: 14px; color: #277f61; font: 600 10px "Manrope"; font-style: normal; }
.project-view { position: absolute; z-index: 3; left: var(--view-x); top: var(--view-y); display: inline-flex; align-items: center; gap: 13px; padding: 15px 21px; border: 1px solid rgba(255,255,255,.92); border-radius: 999px; background: rgba(255,255,255,.62); color: #07122e; font-size: 14px; font-weight: 600; box-shadow: 0 14px 35px rgba(10,15,45,.14); backdrop-filter: blur(15px); opacity: 0; transform: translate(-50%,-44%) scale(.86); transition: opacity .3s ease, transform .55s var(--ease-out), left .18s linear, top .18s linear; pointer-events: none; }
.project-view i { font-size: 17px; font-style: normal; }
.project-media:hover .project-view, .project-media:focus-visible .project-view { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.project-slide__caption { width: min(900px, 100%); margin: 17px 0 0; color: #666e72; font-size: 13px; }
.has-project-motion .project-scroll { height: 500vh; }
.has-project-motion .project-stage { position: sticky; top: 0; width: 100%; height: 100vh; min-height: 650px; padding: 0; }
.has-project-motion .project-stage__word { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(9,12,18,.18); font: 600 clamp(130px, 18vw, 290px)/.8 "Manrope"; letter-spacing: -1.3vw; text-transform: uppercase; white-space: nowrap; filter: blur(calc(4px + var(--word-blur, 0px))); transform: scale(var(--word-scale, 1)); transition: filter .12s linear; pointer-events: none; }
.has-project-motion .project-stage__word span:last-child { color: transparent; -webkit-text-stroke: 2px rgba(9,12,18,.18); }
.has-project-motion .project-stage__top { position: absolute; z-index: 5; top: 31px; left: 38px; right: 38px; display: flex; justify-content: space-between; color: #555d60; font-size: 9px; font-weight: 600; letter-spacing: .11em; }
.has-project-motion .project-stage__top i { margin-left: 7px; font-style: normal; }
.has-project-motion .project-track { width: max-content; height: 100%; display: flex; gap: 0; margin: 0; will-change: transform; }
.has-project-motion .project-slide { flex: 0 0 100vw; width: 100vw; height: 100%; justify-content: center; padding: 8vh 7vw 5vh; }
.has-project-motion .project-slide__info { position: absolute; z-index: 4; top: 9vh; width: min(930px, 72vw); opacity: .12; filter: blur(3px); transform: translateY(28px); transition: opacity .5s ease, filter .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.has-project-motion .project-slide.is-active .project-slide__info { opacity: 1; filter: none; transform: none; }
.has-project-motion .project-slide__info h3 { font-size: clamp(42px, 5vw, 70px); }
.has-project-motion .project-media { z-index: 2; width: min(900px, 62vw); height: min(600px, 58vh); margin-top: 7vh; opacity: .24; filter: blur(8px) saturate(.65); transform: scale(.91); box-shadow: 0 20px 50px rgba(27,30,50,.06); transition: opacity .55s ease, filter .55s ease, transform .7s var(--ease-out), box-shadow .55s ease, border-color .4s ease; }
.has-project-motion .project-slide.is-active .project-media { opacity: 1; filter: none; transform: scale(1); border-color: rgba(7,18,46,.16); box-shadow: 0 34px 90px rgba(27,30,50,.2), 0 0 0 10px rgba(255,255,255,.24); }
.has-project-motion .project-slide.is-active .project-media__surface { filter: none; }
.has-project-motion .project-slide:not(.is-active) .project-media__surface { filter: blur(5px) saturate(.72) brightness(1.08); transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.04); }
.has-project-motion .project-slide__caption { position: absolute; z-index: 4; bottom: 6.5vh; width: min(930px, 72vw); margin: 0; opacity: .12; filter: blur(2px); transform: translateY(16px); transition: opacity .45s ease .08s, filter .45s ease, transform .5s ease .08s; }
.has-project-motion .project-slide.is-active .project-slide__caption { opacity: 1; filter: none; transform: none; }
.has-project-motion .project-progress { position: absolute; z-index: 6; left: 38px; right: 38px; bottom: 26px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #555d60; font: 600 9px "Manrope"; }
.has-project-motion .project-progress > div { height: 1px; background: rgba(7,18,46,.18); overflow: hidden; }
.has-project-motion .project-progress i { display: block; width: 100%; height: 100%; background: #07122e; transform: scaleX(0); transform-origin: left; }