/* ===== Page Transition (lightweight) ===== */

/* JSが効いてる時だけ有効化するためのゲート */
html.rs-pt.rs-pt-js body{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}

html.rs-pt.rs-pt-js.rs-pt-ready body{
  opacity: 1;
  transform: translate3d(0,0,0);
}

html.rs-pt.rs-pt-js.rs-pt-leave body{
  opacity: 0;
  transform: translate3d(0,-10px,0);
}


/* トランジション（GPUに優しい） */
html.rs-pt body{
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}

/* 上部の薄いロードライン（おしゃれ用：不要なら削除OK） */
html.rs-pt::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: rgba(255,255,255,.65);
  opacity: 0;
  z-index: 999999;
  pointer-events: none;
  transition: width .28s ease, opacity .18s ease;
}
html.rs-pt.rs-pt-leave::before{
  width: 100%;
  opacity: 1;
}

/* 動きを減らす */
@media (prefers-reduced-motion: reduce){
  html.rs-pt body{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  html.rs-pt::before{ display:none !important; }
}

/* =========================
   iPhone-like Loader
   ========================= */
/* =========================
   iOS-like Loader (white)
   ========================= */

.rs-loader{
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

/* 初回表示中（rs-pt-ready前） or 遷移中（rs-pt-leave）に表示 */
/* 初回：load完了（rs-loader-done）まで表示 */
html.rs-pt.rs-pt-js:not(.rs-loader-done) .rs-loader,
html.rs-pt.rs-pt-js.rs-pt-leave .rs-loader{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



/* 背景：白いブラー（iOSっぽい） */
.rs-loader__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* 中央ピル：薄いグレー＋繊細な影 */
.rs-loader__panel{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  box-shadow:
    0 16px 40px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* スピナー：iOS風（グレーの点） */
.rs-loader__spinner{
  width: 26px;
  height: 26px;
  position: relative;
}

.rs-loader__spinner span{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 999px;
  background: rgba(60,60,67,.72); /* iOSっぽいグレー */
  transform: rotate(calc(var(--i) * 30deg)) translate3d(0, -11px, 0);
  opacity: .22;
  animation: rs-ios-dot 1s linear infinite;
  animation-delay: calc(var(--i) * -0.0833s);
}

@keyframes rs-ios-dot{
  0%   { opacity: 1; }
  100% { opacity: .22; }
}

/* テキスト：黒寄せ */
.rs-loader__text{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(60,60,67,.92);
  white-space: nowrap;
}

/* …の点滅もグレー */
.rs-loader__dots{
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  transform: translate3d(0, 1px, 0);
}
.rs-loader__dots span{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(60,60,67,.72);
  opacity: .25;
  animation: rs-dots 1s ease-in-out infinite;
}
.rs-loader__dots span:nth-child(2){ animation-delay: .12s; }
.rs-loader__dots span:nth-child(3){ animation-delay: .24s; }

@keyframes rs-dots{
  0%, 80%, 100% { opacity: .25; transform: translate3d(0,0,0); }
  40% { opacity: 1; transform: translate3d(0,-2px,0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rs-loader, .rs-loader__spinner span, .rs-loader__dots span{
    transition: none !important;
    animation: none !important;
  }
}