:root{
 --bg:#ffffff;
 --ink:#111;
 --muted:#666;
 --banner:#111;
 --banner-ink:#fff;

}

.stage{
  overflow: visible;   /* 縦にはみ出す分は見せる */
}

.reel{
 position:relative;
 padding: 12px 0 120px; 
 overflow:visible;
 user-select:none;
 touch-action:pan-y;
}

.track{
 display:flex;
 gap:45px;
 will-change:transform;
 touch-action:manipulation;
 backface-visibility:hidden;
 transform:translateZ(0);
 overflow: visible; 
}


/* ====== カード（外側は overflow:visible で全身のはみ出しを許可） ====== */
.card{
 position:relative;
 background:transparent;
 flex:0 0 auto;
 width:clamp(220px,18vw,320px);
 aspect-ratio:9/16;
 transform-origin:50% 90%;
 transition:box-shadow .3s ease;
 overflow:visible;
}

.card.is-center{
 filter:none
}
.card__link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* クリップ領域：背景や桜・胸上など通常要素はここに入れて角丸を効かせる */
.card__clip{
 position:absolute;
 inset:0;
 background:var(--card-bg,#fff);
 overflow:hidden;
 box-shadow:0 2px 6px rgba(0,0,0,.08)
 z-index:2;
}

.card.is-center .card__clip{
 box-shadow:0 10px 24px rgba(0,0,0,.15)
}

.card__media{
 position:absolute;
 inset:0
}

.card__media img{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover
}


/* レイヤーの基礎 */
.layer{
 position:absolute;
 inset:0;
 pointer-events:none
}


/* 胸から上（カード内・クリップの中） */
.layer--char{
 display:grid;
 place-items:center;
 transform:translateY(8px) scale(.96);
 filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));
 transition:opacity .25s ease, transform .45s cubic-bezier(.22,.7,.26,1.1);
 z-index:2
}

.char-img{
 width:78%;
 max-width:240px;
 aspect-ratio:3/4;
 object-fit:cover;
 border-radius:18px;
 object-position:center 20%
}


/* 小物（桜＆クラッカー） - クリップ内 */
.layer--props{
 position:absolute;
 inset:0;
 z-index:3;
}

.layer--props-out{
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: visible;   /* 念のため明示 */
}

.prop{
 position:absolute;
 opacity:0;
 transform:translateY(10px) scale(.92);
 transition:opacity .3s ease, transform .45s cubic-bezier(.22,.8,.2,1)
}

.prop img{
 display:block;
 height:auto
}

.sakura img{
 width:60px;
}

/* 位置（カード座標系） */
.sakura-1{
 left:-5%;
 top:8%;
}

.sakura-2{
 left:42%;
 top:5%;
}

.sakura-3{
 right:-2%;
 top:14%;
}

.cracker-l{
 left:-4%;
 bottom:-5%;
 z-index: 6;
}

.cracker-r{
 right:-4%;
 bottom:-5%;
 z-index: 6;
}

.cracker-l img{
 width:140px;
 transform:rotate(-0deg);
 z-index: 10;
}

.cracker-r img{
 width:140px;
 transform:rotate(0deg);
 z-index: 10;
}


/* 合格バッジ（最前面に来る） */
.badge{
 position:absolute;
 left:50%;
 bottom:10px;
 transform:translateX(-50%);
 min-width:70%;
 max-width:88%;
 padding:.5rem .8rem;
 border-radius:999px;
 background:var(--banner);
 color:var(--banner-ink);
 text-align:center;
 font-weight:800;
 letter-spacing:.03em;
 opacity:0;
 translate:0 8px;
 z-index:7
}

.badge small{
display:block;
font-weight:700;
opacity:.9
}

.badge strong{
display:block;
font-size:1rem
}


/* 全身レイヤー（カードの外へはみ出す。バッジより奥、胸上より手前） */
.layer--full{
 position:absolute;
 left:50%;
 transform:translate(-50%, 10px) scale(.95);
 width:80%;
 z-index:5;
 user-select: none;
 filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));
 overflow:visible;
}

.full-img{
width:100%;
height:auto;
object-fit:contain
}

.layer--full{
opacity:0;
 transition:opacity .25s ease, transform .5s cubic-bezier(.22,.8,.2,1)
}


/* 中央演出：桜はポップ位置にスナップ（上に流れない）、その後ゆらぎだけ */
.card.is-center .layer--char{
opacity:0;
 transform:translateY(0) scale(.98)
}
.card.is-center .prop{
opacity:1;
 transform:translateY(-4px) scale(1);
}

.card.is-center .prop.s-float-a{
animation:prop-float-a 3200ms ease-in-out .4s infinite alternate
}

.card.is-center .prop.s-float-b{
animation:prop-float-b 3500ms ease-in-out .5s infinite alternate
}

.card.is-center .prop.s-float-c{
animation:prop-float-c 3000ms ease-in-out .6s infinite alternate
}

.card.is-center .badge{
opacity:1;
translate:0 0;
 transition:opacity .4s ease .2s, translate .4s ease .2s
}

.card.is-center .layer--full{
opacity:1;
 transform:translate(-50%, 0) scale(1.02)
}


/* バウンス本体（外側のカードに） */
.card.is-center{
animation:card-bounce-enter 700ms cubic-bezier(.25,.85,.2,1.2) both, card-bounce-idle 2200ms ease-in-out 800ms infinite alternate
}

@keyframes card-bounce-enter{
0%{
transform:translateY(14px) scale(.96,.98)
}
38%{
transform:translateY(-12px) scale(1.04,.97)
}
58%{
transform:translateY(5px) scale(.99,1.02)
}
78%{
transform:translateY(-3px) scale(1.02,.99)
}
100%{
transform:translateY(0) scale(1,1)
}

}

@keyframes card-bounce-idle{
0%{
transform:translateY(0) scale(1)
}
100%{
transform:translateY(-5px) scale(1.01,.995)
}

}

/* ふよふよ揺れ（基準は -4px で停留。上に流れ続けない） */
@keyframes prop-float-a{
0%{
transform:translateY(-4px)
}
100%{
transform:translateY(-9px)
}

}

@keyframes prop-float-b{
0%{
transform:translateY(-4px)
}
100%{
transform:translateY(-10px)
}

}

@keyframes prop-float-c{
0%{
transform:translateY(-4px)
}
100%{
transform:translateY(-8px)
}
}



/* スマホ “のぞき見” 調整 */
@media (max-width:640px){
 .reel{
padding:16px 6vw
}
 .track{
gap:4vw
}
 .card{
width:76vw
}
 
}