/* 【悪い例】8カット40秒を全編の背景に敷き、全画面に文字を重ねた版。
   ・読ませる区間が無い（ずっと動いている）
   ・文字は面を挟まず、映像に直接重ねている
   ・カットの尺が全部同じ（120svh）＝リズムが無い
   良い例は preview/ を見ること。 */
:root{
  --ink:#f2f7fb;
  --ink-dim:rgba(242,247,251,.70);
  --ground:#0B1F35;
  --accent:#8CC63F;
  --col:470px;
  --pad:clamp(20px,5.5vw,34px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--ground);color:var(--ink);
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.ambient{position:fixed;inset:0;z-index:0;background:var(--ground)}
.stage{
  position:fixed;top:0;left:50%;
  width:min(100%,var(--col));height:100%;
  transform:translateX(-50%);
  z-index:1;overflow:hidden;
  box-shadow:0 0 60px 20px rgba(11,31,53,.55);
}
.hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.stage.has-video .hero{display:block}
.stage.has-video .layer{display:none}
.layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;will-change:opacity}
.layer:first-of-type{opacity:1}
.shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,14,26,.28) 0%,rgba(4,14,26,0) 26%,rgba(4,14,26,0) 52%,rgba(4,14,26,.70) 100%);
}

main{position:relative;z-index:2}
.scene{position:relative}
.scene.film{min-height:var(--len,120svh)}
.hold{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 var(--pad) 12svh;
}
/* 面を挟まず、映像に直接重ねている（ここが悪い） */
.copy{width:min(100%,var(--col));text-align:left;container-type:inline-size}

.line{
  font-size:clamp(21px, calc(100cqi / 14.7), 30px);
  line-height:1.75;letter-spacing:.03em;font-weight:700;
  text-shadow:0 2px 18px rgba(2,10,20,.8);
  text-wrap:balance;
}
.btn{
  display:block;width:100%;margin-top:20px;text-align:center;
  padding:16px 14px;border-radius:999px;
  background:var(--accent);color:#0B1F35;
  font-size:16px;line-height:1.5;letter-spacing:.02em;font-weight:700;text-decoration:none;
  white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.note{margin-top:10px;font-size:12px;line-height:1.75;letter-spacing:.03em;color:var(--ink-dim);text-shadow:0 2px 12px rgba(2,10,20,.8)}

.scrollhint{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:4;font-size:10px;letter-spacing:.22em;color:var(--ink-dim);
  display:flex;align-items:center;gap:8px;transition:opacity .4s;pointer-events:none;
}
.scrollhint span{display:block;width:1px;height:26px;background:linear-gradient(180deg,transparent,var(--ink-dim))}
[data-anim]{will-change:opacity,transform,filter}
@media (prefers-reduced-motion:reduce){[data-anim]{opacity:1!important;transform:none!important;filter:none!important}}