/* FV：間取り（部屋＝写真）・光・言葉の部屋。位置と大きさは js/plan.js が毎フレーム入れる */

/* 光：ひらいた部屋の足もとに、朝の色がたまる */
.glow{position:absolute;left:0;top:0;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;pointer-events:none;z-index:1;opacity:0;background:var(--glow);transition:opacity 1.6s ease;will-change:transform}

.gone .glow{opacity:0!important;transition:opacity .5s ease}   /* MESSAGEへ進む時は、光を先にしまう */

/* 間取り */
.plan{position:absolute;inset:0;z-index:2}
.cell{position:absolute;left:0;top:0;border-radius:var(--radius);overflow:hidden;background:var(--tile);will-change:transform,width,height;transition:box-shadow 1.1s ease}
.cell img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.3);opacity:0;transition:transform 2s var(--ease),opacity 1.3s ease}
.strip .cell img{height:107%}                 /* PIXTAプレビューの下端の番号帯を隠す（原版に替えたら js/config.js で外す） */
.cell.on img{transform:scale(1.075)}
.cell img.show{opacity:1}

/* ひらいていない部屋は、うすい白の幕で一歩下がる */
.cell::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.lit .cell::after{opacity:.15}

/* 光があたって、ひらいた部屋 */
.cell.f{box-shadow:0 34px 80px -34px rgba(150,110,30,.45);z-index:3}
.cell.f img{transform:scale(1)}
.lit .cell.f::after{opacity:0}
.cell::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(104deg,rgba(255,244,220,0) 36%,rgba(255,240,208,.42) 50%,rgba(255,244,220,0) 64%);transform:translateX(-110%)}
.cell.f::before{animation:light-pass 1.9s var(--ease-io) .25s both}   /* ひらいた写真を、朝の光が一度横切る */
@keyframes light-pass{to{transform:translateX(110%)}}

/* 言葉の部屋（左下）：Wellness Design. ／ 旗 ／ 床の金の線 */
.copy{position:absolute;left:0;top:0;z-index:6;pointer-events:none;will-change:transform}
.disp-wrap{position:relative;display:inline-block;vertical-align:top;transform-origin:left bottom}
.disp{display:block;font-family:var(--disp);font-weight:var(--disp-weight);font-size:var(--fs);line-height:.9;letter-spacing:var(--disp-spacing)}
.catch{margin-top:calc(var(--fs)*.16 + 6px);font-weight:var(--jp-weight);font-size:clamp(14px,calc(var(--fs)*.19),22px);letter-spacing:.16em;white-space:nowrap}
.floor{margin-top:calc(var(--fs)*.14 + 6px);height:1px;background:linear-gradient(90deg,rgba(172,135,0,.9),rgba(201,162,74,.75) 60%,rgba(172,135,0,0));transform-origin:left}

/* 文字の器：g などの下がりが欠けないよう、下に余白を持たせて切る */
.ch{display:inline-block;overflow:clip;overflow-clip-margin:0;vertical-align:bottom;padding:0 .02em .26em;margin:0 -.02em -.26em}
.ch>i{display:inline-block;font-style:normal;padding-bottom:.28em;margin-bottom:-.28em}
.w1 .ch{padding-bottom:.02em;margin-bottom:-.02em}                    /* Wellness は線の高さから立ち上がる */
.op-skip .ch,.op-done .ch{overflow:visible}
.w2 .ch>i{background:var(--light-text);background-size:700% 100%;background-position:calc(var(--k,0)*16%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}

@media (prefers-reduced-motion:reduce){.cell.f::before{animation:none}}