/* ============================================================
   REAL VALUE 縦流しレール: エンドレス化 (2026-09-25)
   旧方式は img 30枚を -50% 送りでループしていたため、1周分の長さが
   画面の高さより短い端末 (スマホで約720px) ではループの継ぎ目で途切れていた。
   → 縦向きロゴ1枚をタイルとして repeat-y で敷き詰め、
     高さ「画面 + タイル2枚分」の帯をタイル1枚分だけ送ってループする。
     画面の高さに関係なく、常に途切れずロゴが並ぶ。
   ============================================================ */
.rv-studio-rail{
  --rail-logo-w:20px;                        /* ロゴの太さ (レール幅方向) */
  --rail-tile:calc(var(--rail-logo-w) * 6.2); /* ロゴ1個 + 余白の縦ピッチ (SVG の縦横比と一致) */
}
.rv-studio-rail-track{
  position:absolute;
  left:0; right:0;
  top:calc(var(--rail-tile) * -1);
  height:calc(100% + var(--rail-tile) * 2);
  padding:0;
  background:url("./assets/common/logo-rail.v2026092501.svg") center top / var(--rail-logo-w) var(--rail-tile) repeat-y;
  opacity:.75;
  filter:brightness(1.1);
  will-change:transform;
  backface-visibility:hidden;
}
.rv-studio-rail-left .rv-studio-rail-track{
  animation:rv-rail-loop-up 2.1s linear infinite;
}
.rv-studio-rail-right .rv-studio-rail-track{
  animation:rv-rail-loop-down 2.5s linear infinite;
}
@keyframes rv-rail-loop-up{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(0,calc(var(--rail-tile) * -1),0); }
}
@keyframes rv-rail-loop-down{
  from{ transform:translate3d(0,calc(var(--rail-tile) * -1),0); }
  to  { transform:translate3d(0,0,0); }
}
@media (max-width: 800px){
  .rv-studio-rail{ --rail-logo-w:8px; }
  .rv-studio-rail-left .rv-studio-rail-track{ animation-duration:1.65s; }
  .rv-studio-rail-right .rv-studio-rail-track{ animation-duration:1.95s; }
}
@media (max-width: 480px){
  .rv-studio-rail{ --rail-logo-w:7px; }
  .rv-studio-rail-left .rv-studio-rail-track{ animation-duration:1.5s; }
  .rv-studio-rail-right .rv-studio-rail-track{ animation-duration:1.8s; }
}
@media (hover:none) and (pointer:coarse){
  .rv-studio-rail-track{ filter:none; opacity:.8; }
}
@media (prefers-reduced-motion: reduce){
  .rv-studio-rail-track{ animation:none !important; }
}