/* 첫 화면 — 시작 장면 + 가운데 작품 줄 */
.home{overflow:hidden;height:100dvh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── 시작 장면 ── */
#intro{display:none}
.intro-on #intro{display:grid;position:fixed;inset:0;z-index:40;place-items:center;background:var(--bg);
  transition:opacity .8s ease,visibility 0s linear .8s}
.intro-logo,.intro-line{grid-area:1/1}
.intro-logo img{width:min(360px,44vw);height:auto;clip-path:inset(0 100% 0 0);animation:write 1.4s cubic-bezier(.55,.05,.3,1) .2s forwards;
  transition:opacity .6s ease,filter .6s ease}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.intro-line{margin:0;padding:0 16px;max-width:760px;text-align:center;font-size:12px;line-height:1.45}
.intro-line .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(2px);
  transition:opacity .7s ease,filter .7s ease,transform .7s ease}
.s-words .intro-logo img{opacity:0;filter:blur(8px)}
.s-words .intro-line .w{opacity:1;filter:none;transform:none}
.s-leave #intro{opacity:0;visibility:hidden}

/* 시작 장면 동안 위아래 띠 숨김 */
.intro-on .ui{opacity:0}
.ui{transition:opacity .8s ease .3s}

/* ── 작품 줄 ── */
.reel{position:fixed;inset:0;perspective:1400px;outline:none;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.reel.drag{cursor:grabbing}
.item{position:absolute;left:50%;top:50%;height:min(46vh,30vw);transform-origin:50% 50%;
  transition:transform 1.6s cubic-bezier(.65,0,.35,1),opacity 1.2s ease,filter 1.2s ease;will-change:transform}
.item img{height:100%;width:auto;max-width:none;pointer-events:none;-webkit-user-drag:none}
.item.far{opacity:0;pointer-events:none}
.item:not(.center){filter:saturate(.85)}
.intro-on .item{opacity:0;transform:translate(-50%,-50%) scale(.2)!important}

@media (max-width:720px){
  .item{height:min(40vh,50vw)}
}
@media (prefers-reduced-motion:reduce){
  .item{transition:none}
}