/* Separate DEV-only gallery layer; remove this file and script to restore the grid. */
.work:has(.screening-room){padding:90px 0 40px;background:#111210;overflow:hidden;scroll-margin-top:78px}
.work:has(.screening-room)>.section-head,.work:has(.screening-room)>.arik-profile,.work:has(.screening-room)>.arik-viral,.work:has(.screening-room)>.more{margin-left:4.3%;margin-right:4.3%}
.work:has(.screening-room)>.section-head{align-items:center;gap:24px;margin-bottom:38px}
.screening-room{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 40%,#292a252b,transparent 65%);padding-bottom:28px}
.room-topline{display:flex;justify-content:space-between;align-items:center;margin:0 4.3%;padding:22px 0;border-top:1px solid #ffffff20;color:#93938a;font-size:10px;letter-spacing:2px}
.room-topline i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#ee641b;box-shadow:0 0 15px #ee641b;margin-right:10px;vertical-align:middle}
.room-stage.grid{display:block;position:relative;height:clamp(320px,42vw,570px);margin:0;perspective:1200px;perspective-origin:50% 48%;transform-style:preserve-3d;touch-action:pan-y;cursor:grab;user-select:none;z-index:2}
.room-stage.is-dragging,.room-stage.is-dragging button{cursor:grabbing}
/* Keep the stage plane from intercepting hits on screens translated behind it. */
.room-stage.grid{pointer-events:none}
.room-stage .project{pointer-events:auto}
.room-stage .project,.room-stage .project:first-child{position:absolute;left:50%;top:48%;width:var(--screen-width,58%);margin:0;transform-origin:center;will-change:transform;backface-visibility:hidden}
.room-stage .project[hidden]{display:none!important}
.room-stage .project>button{display:block;width:100%;padding:0;text-align:left;cursor:pointer;border-radius:10px;background:#181916;box-shadow:0 24px 55px #0008;overflow:hidden;outline-offset:7px}
.room-stage .picture{aspect-ratio:16/9;border-radius:10px;outline:1px solid #ffffff24;outline-offset:-1px;background:#252620}
.room-stage .picture img{width:100%;height:100%;object-fit:cover;filter:none;transition:none;pointer-events:none;will-change:transform}
.room-stage .picture:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 45%);pointer-events:none}
.room-stage .number{top:18px;left:20px;font-size:10px;letter-spacing:2px;z-index:2;background:#0003;padding:5px 8px;border-radius:2px}
.room-stage .project-meta{display:none}
.room-stage .play{z-index:3;left:24px;bottom:24px;width:48px;height:48px;color:#f4ebd9;border:1px solid #ffffff85;background:#1118;backdrop-filter:blur(8px);font-size:14px;opacity:0;transition:opacity .3s,background .3s}
.room-stage .is-current .play{opacity:1}
.room-stage .is-current button:hover .play{background:#ee641b;border-color:#ee641b}
.room-stage .is-current .play:after{content:'WATCH FILM';position:absolute;left:64px;white-space:nowrap;letter-spacing:2px;font-size:10px;color:#fff}
.room-floor{position:absolute;z-index:-1;left:-30%;right:-30%;top:38%;height:65%;background-image:linear-gradient(#d8dfc510 1px,transparent 1px),linear-gradient(90deg,#d8dfc510 1px,transparent 1px);background-size:70px 70px;transform:perspective(450px) rotateX(65deg);mask-image:radial-gradient(ellipse,#0007,transparent 63%);pointer-events:none}
.room-controls{position:relative;display:flex;align-items:center;justify-content:center;gap:45px;margin:4px auto 24px;padding:0 4.3%;max-width:1000px;z-index:3}
.room-controls>button{width:52px;height:52px;flex-shrink:0;border:1px solid #ffffff38;border-radius:50%;background:transparent;color:#f4ebd9;font-size:22px;cursor:pointer;transition:background .2s,opacity .2s}
.room-controls>button:hover:not(:disabled){background:#ee641b;border-color:#ee641b}
.room-controls>button:disabled{opacity:.23;cursor:default}
.room-caption{flex:1;text-align:center;min-width:0;max-width:640px}
.room-caption .room-index{color:#ee641b;font-size:11px;letter-spacing:3px}
.room-caption h3{margin:12px 0 10px;font-size:clamp(18px,2.3vw,30px);line-height:1.25;font-weight:400;text-wrap:balance;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.room-type{color:#a4a59b;font-size:10px;letter-spacing:2px}
.room-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:25px auto 0;max-width:90%}
.room-dots button{width:36px;height:38px;border:0;border-top:1px solid #ffffff30;background:transparent;color:#8d9085;font-size:9px;cursor:pointer;transition:border-color .2s,color .2s}
.room-dots button[aria-pressed=true]{border-top:2px solid #ee641b;color:#f4ebd9}
.room-dots button:hover{color:#fff;border-color:#f4ebd9}
#player[open]{animation:room-player-in .45s cubic-bezier(.2,.75,.25,1)}
#player::backdrop{background:#080907ed;backdrop-filter:blur(14px)}
@keyframes room-player-in{from{opacity:0;transform:translateY(25px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .work:has(.screening-room){padding-top:46px;scroll-margin-top:65px}
 .work:has(.screening-room)>.section-head{align-items:flex-start;flex-direction:column;gap:22px;margin-bottom:25px}
 .work:has(.screening-room) .filters{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:5px}
 .work:has(.screening-room) .filters button{min-height:44px;text-align:center}
 .room-topline{font-size:8px;letter-spacing:1.3px;padding:18px 0}
 .room-hint{font-size:0}.room-hint:after{content:'SWIPE TO EXPLORE';font-size:8px}
 .room-stage.grid{height:clamp(235px,64vw,420px);perspective:850px}
 .room-stage .project>button,.room-stage .picture{border-radius:6px}
 .room-stage .number{top:10px;left:10px;font-size:8px}
 .room-stage .play{width:35px;height:35px;left:14px;bottom:14px;font-size:10px}
 .room-stage .is-current .play:after{left:47px;font-size:8px}
 .room-controls{gap:14px;margin-top:10px}
 .room-controls>button{width:40px;height:40px;font-size:18px}
 .room-caption h3{font-size:18px;min-height:3.75em;margin:9px 0}
 .room-type{font-size:8px;letter-spacing:1px}
 .room-dots{gap:1px;margin-top:16px}.room-dots button{width:29px;height:40px}
}
@media(prefers-reduced-motion:reduce){#player[open]{animation:none}.room-stage .picture img{will-change:auto}}
/* Lightweight glass: static reflections and painted shadows, no full-card blur. */
.screening-room{background:radial-gradient(ellipse at 50% 48%,#55594b38,transparent 68%)}
.room-stage .project>button{padding:9px;border:1px solid #f1f4e04f;background:linear-gradient(135deg,#ffffff24,#ffffff07 42%,#ffffff13);border-radius:18px;box-shadow:inset 0 1px 0 #ffffff60,inset 0 -1px 0 #ffffff18,0 30px 45px -18px #000b,0 8px 14px -8px #000a}
.room-stage .picture{border-radius:11px;outline-color:#ffffff36}
.room-stage .picture:after{background:linear-gradient(125deg,#ffffff17,transparent 35%,transparent 70%,#ffffff08),linear-gradient(0deg,#0008,transparent 45%)}
.room-stage .project:after{content:'';position:absolute;left:8%;right:8%;bottom:-39px;height:32px;border-radius:50%;background:radial-gradient(ellipse,#0008 0%,#0003 40%,transparent 72%);transform:scaleX(1.1);pointer-events:none}
.room-controls>button,.room-dots{background:linear-gradient(135deg,#ffffff13,#ffffff04);border:1px solid #ffffff30;box-shadow:inset 0 1px 0 #ffffff29,0 8px 24px #0002}
.room-dots{width:fit-content;padding:5px 14px;border-radius:28px}
@media(max-width:700px){.room-stage .project>button{padding:6px;border-radius:12px}.room-stage .picture{border-radius:7px}.room-stage .project:after{bottom:-26px;height:24px}}
/* Local floating-screen study: soft ground contact, no blur/compositing loop. */
.screening-room{background:radial-gradient(ellipse at 50% 57%,#66695746,transparent 72%)}
.room-stage.grid:before{content:'';position:absolute;left:0;right:0;bottom:-4%;height:35%;background:radial-gradient(ellipse at 50% 52%,#aaa68b19,transparent 70%);pointer-events:none}
.room-stage .project>button{box-shadow:inset 0 1px 0 #ffffff60,inset 0 -1px 0 #ffffff18,0 8px 18px -12px #0009}
.room-stage .project:after{left:-3%;right:-3%;bottom:-76px;height:52px;border-radius:50%;background:radial-gradient(ellipse at center,#000b 0%,#0008 22%,#0004 44%,#0001 61%,transparent 74%);transform:scaleX(1.06);pointer-events:none}
@media(max-width:700px){.room-stage .project:after{left:0;right:0;bottom:-48px;height:34px}}
.room-controls{margin-top:40px}
@media(max-width:700px){.room-controls{margin-top:30px}}
/* Local floor reflection: the same thumbnail, mirrored and vertically compressed. */
.room-stage .project:before{content:'';position:absolute;left:10px;right:10px;top:calc(100% + 22px);height:28%;background-image:var(--reflection-image);background-size:100% 100%;background-repeat:no-repeat;transform:scaleY(-1);opacity:.25;mask-image:linear-gradient(to top,#000 0%,#0009 30%,transparent 95%);border-radius:10px;pointer-events:none}
.room-stage .project:after{opacity:.45}
.room-controls{margin-top:120px}
@media(max-width:700px){.room-stage .project:before{left:7px;right:7px;top:calc(100% + 15px);height:26%;opacity:.22}.room-controls{margin-top:65px}}
/* Avoid hover filter/backdrop compositing seams on transformed film screens. */
.room-stage .project button:hover img{filter:none}
.room-stage .picture{isolation:isolate;clip-path:inset(0 round 11px)}
.room-stage .play{backdrop-filter:none;background:#161713e8}
.room-stage .project button:hover .play{transform:none}
/* Isolate each screen plane: angled siblings must not slice through its pixels. */
.room-stage.grid{transform-style:flat}
.room-stage .project{transform-style:flat;isolation:isolate}
