.wall{width:1920px;height:1080px;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));background:linear-gradient(180deg,#51276d 3.565%,#171437 56.71%);background-size:100% 100%}.wall::before{display:none}.head{left:548.123px;top:69px;width:823px;max-width:none;text-align:center;text-shadow:none;pointer-events:none}.head h1{font:400 83.229px/95.358px Ghanachocolate,serif;letter-spacing:-3.814px;background:linear-gradient(111deg,#ffe7d5 12.884%,#ca90c0 64.147%,#d67dff 103.62%);background-clip:text;color:transparent}.head p{display:none}
.wall-spark{position:absolute;z-index:21;pointer-events:none;overflow:hidden;mix-blend-mode:color-dodge;opacity:.8}.wall-spark img{position:absolute;width:522.5%;height:493.7%;max-width:none;left:-211.25%;top:-196.46%}
#shade{background:rgba(8,11,32,.58);backdrop-filter:blur(12px)}#flyer{width:798.667px;border-radius:22px}#flyer .f-in{border-radius:22px;box-shadow:0 0 0 3px #fffffff2,0 30px 60px #0a0e284d;background-size:cover}#flyer:not(.landing) .f-in{animation:sway 4.4s ease-in-out infinite}#flyer .f-txt{font-family:'Noto Sans KR',sans-serif;font-weight:700;line-height:1.25;letter-spacing:-.03em;text-shadow:none}#flyer .f-veil{background:linear-gradient(180deg,#12173373,transparent 38%)}#flyer .f-ph{border:6px solid white;border-radius:4px;box-shadow:0 12px 24px #0a0e2840}#flyer .f-emo{filter:none}
.tile.me{box-shadow:0 0 0 2px #eee1fa,0 0 34px #e9e1facc}.tile.beam::after{background:linear-gradient(180deg,transparent,#e9e1fa88,transparent)}#floor,#rise,#burst,#rays{display:none}
.head{left:460px;width:1000px}.head h1{white-space:nowrap}
.soft-video-wall .head{z-index:32}
.soft-video-wall .head h1{filter:drop-shadow(0 3px 8px #050716cc)}
.wall-title-shade{display:none;position:absolute;inset:0 0 auto;height:340px;z-index:19;pointer-events:none;background:linear-gradient(180deg,#070b20b3 0%,#070b2073 62%,transparent 100%)}
.soft-video-wall .wall-title-shade{display:block}

/* Arrival, destination cue and continuous landing into the mosaic. */
#flyer.show{animation-duration:.9s}
#flyer.landing .f-in{transition:transform .3s ease;transform:rotate(0)}
.tile.destination{z-index:9;box-shadow:inset 0 0 0 2px #fff,0 0 30px #e9d1ff;outline:2px solid #eee1fa;outline-offset:5px}
.tile.mycard{transition:transform 1.4s cubic-bezier(.22,.7,.25,1),box-shadow 1.4s ease}
.tile.settled{z-index:10;transform:none;box-shadow:inset 0 0 0 1px #fff,0 0 18px #e9d1ff}
.original-card{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1;transition:opacity 1.4s ease;pointer-events:none}
.original-card.blend{opacity:0}
.artwork-slots{display:block!important}.artwork-slots .tile{position:absolute;background-image:none;border:1px solid #ffffff47}
.artwork-slots .tile::before{display:none}.artwork-slots .tile.destination{outline-offset:0;outline-width:1px}
#flyer.landing .f-in{border-radius:0;box-shadow:none;transition:transform .3s ease,border-radius 1.3s ease}
/* The video and its poster cover the entire stage without a mask. */
#wallMotion{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;overflow:hidden}
#wallMotion.active{opacity:1}
#wallMotion::before{content:'';position:absolute;inset:0;background:url('../videos/wall-background-poster.jpg') center/cover no-repeat;filter:blur(var(--video-blur,1.5px)) brightness(var(--video-brightness,.85))}
#wallVideo{position:relative;display:block;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(var(--video-blur,1.5px)) brightness(var(--video-brightness,.85))}
#wallMotion.playing #wallVideo{opacity:1}
.soft-video-wall .artwork-slots .tile.destination{box-shadow:inset 0 0 0 2px #fff,0 0 30px #e9d1ff}
.soft-video-wall .tile.mycard{opacity:var(--card-opacity,.72);transition:opacity 1.4s ease,border-color 1.4s ease,transform 1.4s cubic-bezier(.22,.7,.25,1),box-shadow 1.4s ease}
.soft-video-wall .tile.mycard.recent{opacity:.96;border-color:#fff;box-shadow:0 0 0 1px #ffffffb3,0 0 22px #ffffff66}
.soft-video-wall .tile.mycard.settled{opacity:1}

/* Real 3D voxel environment, rendered only when its view changes. */
#wall3d{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;background:#4ba5c5 url('../img/wall-voxel-poster.png') center/cover no-repeat}
#wall3d.active{display:block}
#wall3d canvas{display:block;width:100%;height:100%;opacity:0}
#wall3d.ready canvas{opacity:1}
.voxel-wall .head{z-index:20;top:53px}
.voxel-wall .head h1{font-size:66px;line-height:1.2;letter-spacing:-2px;color:#fff4d9;background:none;filter:drop-shadow(0 3px 3px #234d6399)}
.voxel-wall .wall-title-shade{display:block;height:270px;background:linear-gradient(180deg,#244b655c,transparent)}
.voxel-wall .wall-spark{display:none}
.voxel-wall .tile.mycard{opacity:var(--card-opacity,.72);transition:opacity 1.4s ease,border-color 1.4s ease,transform 1.4s cubic-bezier(.22,.7,.25,1),box-shadow 1.4s ease}
.voxel-wall .tile.mycard.recent{opacity:.96;border-color:#fff;box-shadow:0 0 0 1px #ffffffb3,0 0 22px #ffffff66}
.voxel-wall .tile.mycard.settled{opacity:1}
.window-wall .artwork-slots .tile{border:0;box-shadow:none}
/* Camera projection updates must be immediate, including when an idle tour ends.
   Only the separate flyer animates into a pane; attached cards never tween position. */
.window-wall .artwork-slots .tile.mycard{background-size:100% 100%;opacity:.94;transition:opacity 1.4s ease,border-color 1.4s ease,box-shadow 1.4s ease}
.window-wall .artwork-slots .tile.destination{outline:1px solid #ffe3ad;box-shadow:0 0 14px #ffd39b;animation:window-target .55s ease-in-out infinite alternate}
.window-wall .artwork-slots .tile.settled{opacity:1;box-shadow:0 0 0 1px #ffe5bd,0 0 12px #ffd59b}
.window-wall .original-card{background-size:100% 100%}
.window-wall .tile.window-attached::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#fff8d9aa 48%,transparent 80%);animation:window-contact .6s ease-out forwards}
@keyframes window-target{from{filter:brightness(1)}to{filter:brightness(1.3)}}
@keyframes window-contact{from{opacity:.9}to{opacity:0}}
.window-wall #flyer:not(.landing) .f-in{box-shadow:0 0 0 3px #fff,0 0 18px #fffffff2,0 0 40px #ffffffb3,0 0 70px #edf5ff80,0 30px 60px #0a0e284d}
.window-wall .tile.window-border-glint::after{content:'';position:absolute;inset:-2px;z-index:2;pointer-events:none;border:3px solid #fff;box-shadow:0 0 10px #fff,0 0 24px #ffffffe6,0 0 42px #edf5ffb3,inset 0 0 8px #fff;animation:window-border-glint 1s ease-in-out infinite}
@keyframes window-border-glint{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes window-border-fade{0%,25%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.window-wall .tile.window-border-glint::after{animation:window-border-fade var(--glint-duration,7s) ease-out both}}
@media(prefers-reduced-motion:reduce){.window-wall .artwork-slots .tile.destination{animation:none}}
.window-wall.camera-moving .tile.mycard{transition:none}
.window-wall .head,.window-wall .wall-title-shade{transition:opacity 1.2s ease}
.window-wall.camera-close .head{opacity:0;transition-duration:.15s}
.window-wall.camera-close .wall-title-shade{opacity:0;transition-duration:.15s}
.weather-credit{position:absolute;right:24px;bottom:16px;z-index:8;color:#ffffffb3;font:12px/1.4 var(--font);text-decoration:none;text-shadow:0 1px 4px #000}
