/* =========================================
   assets/page-transition.css
   Page Transition (Cross-Page, entry reveals content)
   退出: 白(空色)→車 / 入口: パネルを開きながら下のページを見せる
   ========================================= */

/* ---- グローバル変数（好みの色に変更可） ---- */
:root{
  --pt-panel-bg:    #e6f4ff;       /* 入口で割れる上下パネルの色 */
  --pt-backdrop-bg: #e6f4ff;       /* 退出時に被せる全画面の幕の色 */
  --pt-drive-duration: 1.0s;       /* 出口の車（JSで上書き可） */
  --pt-open-duration:  1.0s;       /* 入口のオープン基準値（JSで上書き可） */
  --pt-white-fade:     0.25s;      /* 白(幕)フェード */
  --pt-ease: cubic-bezier(.22,.61,.36,1);

  --pt-car-width: 15vw;
  --pt-car-max:   260px;

  --pt-start-x: 120vw;             /* 車: 右外 → 左外 */
  --pt-end-x:   -10vw;
}

/* ---- オーバーレイ全体 ---- */
.pt-overlay{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2147483640;
  display:none;
}
/* 退出アニメ中と入口準備中は表示 */
body.pt-active .pt-overlay,
html.pt-enter .pt-overlay{ display:block; }

/* 全画面の幕（出口で使用） */
.pt-overlay::before{
  content:"";
  position:fixed; inset:0;
  background: var(--pt-backdrop-bg);
  z-index:1;
  opacity:1;
  transition:opacity var(--pt-white-fade) linear;
}
/* 退出時：白(幕)を消す */
body.pt-active.pt-reveal .pt-overlay::before{ opacity:0; }
/* 入口時：最初から幕OFF（パネルの隙間から下のページを見せる） */
html.pt-enter .pt-overlay::before{ opacity:0 !important; }

/* ---- 上下パネル土台 ---- */
.pt-panels{
  position:fixed; inset:0;
  display:grid; grid-template-rows:1fr 1fr;
  z-index:2;
  contain:layout;
}

/* ---- パネル本体 ---- */
.pt-panel{
  background:var(--pt-panel-bg);
  transform:translate3d(0,0,0);
  transition:transform var(--pt-open-duration) var(--pt-ease);
  will-change:transform;
  backface-visibility:hidden;
}
/* 中央の線を出さない（ボーダー/シャドウ無効） */
.pt-panel--top,
.pt-panel--bottom{ border:0; box-shadow:none; }

/* オープン（通常） */
body.pt-open .pt-panel--top,
html.pt-enter body.pt-open .pt-panel--top{ transform:translate3d(0,-100%,0); }

body.pt-open .pt-panel--bottom,
html.pt-enter body.pt-open .pt-panel--bottom{ transform:translate3d(0,100%,0); }

/* オープン（競合時の強制フォールバック: vh で押し切り） */
body.pt-open.pt-open-force .pt-panel--top,
html.pt-enter body.pt-open.pt-open-force .pt-panel--top{ transform:translate3d(0,-100vh,0) !important; }

body.pt-open.pt-open-force .pt-panel--bottom,
html.pt-enter body.pt-open.pt-open-force .pt-panel--bottom{ transform:translate3d(0,100vh,0) !important; }

/* ---- 車（出口のみ表示） ---- */
.pt-car{
  position:fixed; top:50%; left:0;
  width:var(--pt-car-width); max-width:var(--pt-car-max);
  transform:translate(var(--pt-start-x), -50%);
  will-change:transform;
  z-index:3;
  pointer-events:none;
}
html.pt-enter .pt-car{ display:none; }

@keyframes pt-drive{
  0%{   transform:translate(var(--pt-start-x), -50%); }
  100%{ transform:translate(var(--pt-end-x),   -50%); }
}
body.pt-drive .pt-car{
  animation:pt-drive var(--pt-drive-duration) var(--pt-ease) forwards;
}

/* ---- 共通：演出中はスクロール禁止 ---- */
body.pt-lock{ overflow:hidden; touch-action:none; }

/* ---- 入口：本文の可視化制御 ---- */
html.pt-enter body > *:not(.pt-overlay){ visibility:hidden; }   /* 準備中は非表示 */
html.pt-enter.pt-ready body > *:not(.pt-overlay){ visibility:visible; } /* JSで可視化 */

/* ---- 動きを減らす配慮（必要なら有効化）
@media (prefers-reduced-motion:reduce){
  .pt-car,.pt-panel{ animation:none !important; transition:none !important; }
}
*/

/* === car: bigger on tablet/mobile & fully off-screen path === */
:root{
  /* PC（デフォルト） */
  --pt-car-width: 26vw;      /* 15vw → 26vw に拡大 */
  --pt-car-max:   520px;     /* 260px → 520px */
  --pt-car-scale: 1.20;      /* 画像に余白が多い時の見かけ拡大 */
  /* 端から端まで確実に走り抜けて消えるように、開始/終了Xを広げる */
  --pt-start-x: 135vw;       /* 120vw → 135vw（右の外もっと奥） */
  --pt-end-x:   -45vw;       /* -10vw → -45vw（左の外もっと奥） */
}

/* タブレット（〜1024px） */
@media (max-width:1024px){
  :root{
    --pt-car-width: 32vw;
    --pt-car-max:   460px;
    --pt-car-scale: 1.28;
    --pt-start-x:   140vw;
    --pt-end-x:     -55vw;
  }
}

/* モバイル（〜768px） */
@media (max-width:768px){
  :root{
    --pt-car-width: 38vw;
    --pt-car-max:   380px;
    --pt-car-scale: 1.35;
    --pt-start-x:   145vw;
    --pt-end-x:     -60vw;
  }
}

/* 走行アニメに scale を反映（上書き版） */
.pt-car{
  position:fixed; top:50%; left:0;
  width:var(--pt-car-width); max-width:var(--pt-car-max);
  transform:translate(var(--pt-start-x), -50%) scale(var(--pt-car-scale));
  transform-origin:center center;
  will-change:transform;
  z-index:3; pointer-events:none;
}
@keyframes pt-drive{
  0%{   transform:translate(var(--pt-start-x), -50%) scale(var(--pt-car-scale)); }
  100%{ transform:translate(var(--pt-end-x),   -50%) scale(var(--pt-car-scale)); }
}

/* ==== Car size: actual-pixel feel with clamp (override) ==== */
:root{
  --pt-car-px: 720px;   /* 見せたい実効幅(px)をここで調整 */
  --pt-car-scale: 1;    /* 等倍（keyframes/transformもこの変数を参照） */
}

.pt-car{
  /* 既存 width/max-width を打ち消して、実寸寄りに */
  width: clamp(360px, var(--pt-car-px), 90vw) !important;
  max-width: none !important;
}

/* 画像が <img> の場合に“親幅ぴったり”で出す保険 */
.pt-car img{
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}

/* 端末別に実効幅だけ微調整（任意） */
@media (max-width:1024px){
  :root{ --pt-car-px: 640px; }
}
@media (max-width:768px){
  :root{ --pt-car-px: 520px; }
}