/* Source: current live Ilumax homepage project-art, lightSweep and screenFloat.
   Original brand effects are retained at the user's explicit request. */
.work-visual{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:1.6;background:#101010;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .8s var(--work-delay,0ms),transform .6s var(--ease)}
.work-plane{width:100%;height:100%}
.work-visual .work-plane img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top;transition:transform 1s;-webkit-user-drag:none;user-select:none}
.work-visual:hover .work-plane img{transform:scale(1.025)}
.work-visual:after{content:'';position:absolute;inset:-100%;pointer-events:none;z-index:2;background:linear-gradient(115deg,transparent 42%,#ffffff12 49%,transparent 56%);transform:translateX(-60%);animation:lightSweep 10s ease-in-out infinite}
@keyframes lightSweep{0%,35%{transform:translateX(-60%)}75%,100%{transform:translateX(60%)}}
@keyframes screenFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.work-visual.work-wait{opacity:0;transform:translateY(26px)}
.work-visual.work-motion-paused:after,.work-motion-paused.live-work-feature .work-plane img{animation-play-state:paused!important}
.work-action{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 12px;background:#0b0d0feb;border:1px solid #ffffff32;backdrop-filter:blur(8px);border-radius:7px;font-size:13px;font-weight:600;color:#f3f5f4;pointer-events:none}
.work-action svg{width:18px;height:18px;margin-left:auto}
.work-visual:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
.project-card .work-plane img{object-fit:contain;object-position:center}
.live-work-feature{height:470px;aspect-ratio:auto;background:radial-gradient(ellipse at 30% 45%,#263034,#0a0c0d 65%);display:flex;align-items:center;padding:45px;perspective:1200px}
.feature-project>div{min-width:0}.feature-project .live-work-feature{aspect-ratio:auto;width:100%;min-width:0}
.live-work-feature .work-plane{position:static}
.live-work-feature .work-plane img{width:64%;height:auto;max-height:365px;object-fit:contain;position:absolute;right:35px;top:45px;transform:rotateY(-12deg) rotateX(6deg);border:1px solid #ffffff55;border-radius:7px;box-shadow:-20px 30px 60px #0009;animation:screenFloat 10s ease-in-out infinite}
.live-work-feature:hover .work-plane img{transform:rotateY(-12deg) rotateX(6deg)}
.live-work-feature .live-mrn-label{position:absolute;z-index:1;left:45px;top:105px}
.live-mrn-label>span{display:block;font-size:75px;letter-spacing:-.08em;font-weight:600}
.live-mrn-label small{display:block;font-size:12px;max-width:130px;line-height:1.7;color:#aaa}
.live-work-feature .work-action{left:24px;right:auto;bottom:22px;background:none;border:0;backdrop-filter:none;padding:0;font-size:13px;color:#aaa;min-height:32px}
.project-feature-image.work-visual{width:100%;max-height:730px;aspect-ratio:1.6}
.project-feature-image .work-plane img{object-fit:contain;object-position:center}
.suite-icon-stack{display:grid;grid-template-columns:repeat(2,26px);gap:2px;flex-shrink:0;width:54px;height:54px}
.hero-route-link .suite-icon-stack img{width:26px;height:26px;object-fit:contain}
.media-viewer{color:#f3f5f4;background:#101619;border:1px solid #ffffff30;border-radius:16px;width:min(1120px,calc(100vw - 40px));max-height:calc(100dvh - 40px);padding:24px;overflow:auto;box-shadow:0 30px 100px #0009}
.media-viewer::backdrop{background:#05090de6;backdrop-filter:blur(8px)}
.viewer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.viewer-head h2{font-size:30px;margin:0}.viewer-close{display:flex;gap:16px;align-items:center;min-height:44px;padding:8px 14px;background:#1b272c;color:#f3f5f4;border-radius:8px}
#media-stage{display:flex;align-items:center;justify-content:center;min-width:0;background:#080c0e;border-radius:8px;overflow:hidden}
#media-stage img{display:block;max-width:100%;width:auto;max-height:calc(100dvh - 205px);object-fit:contain}
.viewer-foot{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-top:15px}
#media-caption{margin:0;color:#aab3b6;font-size:13px;line-height:1.5}.viewer-foot a{font-size:14px;white-space:nowrap}
.motion-off .work-visual{transform:none!important;opacity:1!important;transition:none!important}.motion-off .live-work-feature img{translate:0 0!important}.motion-off .work-wait{opacity:1!important}
@media(max-width:600px){.work-visual{transform:none!important}.live-work-feature{height:330px;padding:25px}.live-work-feature .work-plane img{width:83%;right:8%;top:110px;max-height:190px}.live-work-feature .live-mrn-label{left:25px;top:25px}.live-mrn-label>span{font-size:40px}.live-mrn-label small{max-width:none;font-size:12px}.live-work-feature .work-action{bottom:12px;left:16px;font-size:12px}.suite-icon-stack{grid-template-columns:repeat(2,21px);width:44px;height:44px}.hero-route-link .suite-icon-stack img{width:21px;height:21px}.project-feature-image.work-visual{aspect-ratio:1.4}.media-viewer{padding:16px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:12px}.viewer-head h2{font-size:25px}.viewer-foot{display:block}.viewer-foot a{display:inline-block;margin-top:12px}#media-stage img{max-height:calc(100dvh - 240px)}}
@media(prefers-reduced-motion:reduce){.work-visual{transform:none!important;opacity:1!important;transition:none!important}.work-visual:after{animation:none!important;display:none}.live-work-feature img{animation:none!important;translate:0 0!important}}

/* The live MRN preview's moving perspective grid. */
.live-work-grid{position:absolute;inset:-40%;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:50px 50px;transform:perspective(500px) rotateX(60deg);animation:gridDrift 18s linear infinite;mask-image:linear-gradient(transparent,#000,transparent)}
@keyframes gridDrift{to{background-position:0 50px,0 50px}}
.work-motion-paused .live-work-grid{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.live-work-grid{animation:none!important}}

#media-stage video{display:block;width:100%;max-height:calc(100dvh - 205px);object-fit:contain;background:#080c0e}
@media(max-width:600px){#media-stage video{max-height:calc(100dvh - 240px)}}
