/**
 * President Slash Transition
 * 社長斬撃ページ遷移演出
 *
 * 仕様：
 * 1. 社長動画を現在ページ上に透過表示
 * 2. 斬ったタイミングで白い線が出る
 * 3. 白い線が斜め方向のまま、ぬるっと面として広がる
 * 4. 同じ角度で青い面が広がる
 * 5. 次ページ側で青い幕が斬線を境にゆっくり開く
 * 6. 入口幕表示中は下のリンクを押せないようにする
 * v6: 入口クリックブロックを短縮。入口幕は残してもクリックは早めに解除。
 * v9: JS側でクリック捕捉条件と遷移保険を修正。CSSはv8ベース。
 *
 * 重要：
 * height をアニメーションさせず、transform: scaleY() で動かす。
 * これにより、動き始めのカクつき・一瞬止まる感じを抑える。
 */

/* ================================
   Config
================================ */

:root {
  --cclb-pslash-cut-angle: 45deg;

  --cclb-pslash-white: #fff;
  --cclb-pslash-blue: #013478;

  --cclb-pslash-z-exit: 2147483000;
  --cclb-pslash-z-enter: 2147482999;

  /* 動き出しも終わりもゆっくり。カクッとしにくい */
  --cclb-pslash-spread-easing: cubic-bezier(.65, 0, .35, 1);
  --cclb-pslash-open-easing: cubic-bezier(.65, 0, .35, 1);

  /* ここを大きくする */
  --cclb-pslash-white-spread-duration: 1s;
  --cclb-pslash-blue-spread-duration: 1s;
  --cclb-pslash-open-duration: 1s;

  --cclb-pslash-line-scale: 0.005;
}

/* 遷移中だけスクロール停止 */
body.cclb-pslash-body-lock {
  overflow: hidden !important;
}

/* 演出要素内だけ box-sizing を固定 */
#cclb-pslash-transition,
#cclb-pslash-transition *,
#cclb-pslash-transition *::before,
#cclb-pslash-transition *::after,
#cclb-pslash-entrance,
#cclb-pslash-entrance *,
#cclb-pslash-entrance *::before,
#cclb-pslash-entrance *::after {
  box-sizing: border-box;
}

/* ================================
   EXIT
================================ */

#cclb-pslash-transition {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--cclb-pslash-z-exit) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

#cclb-pslash-transition.cclb-pslash--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}

#cclb-pslash-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover;
  opacity: 0;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

#cclb-pslash-transition:not(.cclb-pslash--video-on) #cclb-pslash-video {
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}

#cclb-pslash-transition.cclb-pslash--video-on #cclb-pslash-video {
  visibility: visible !important;
  opacity: 0;
  animation: cclbPslashVideoEnter 0.18s ease-out forwards;
}

/* 白い線 → 白い面 */
#cclb-pslash-transition .cclb-pslash-line {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 5 !important;

  width: 360vmax;
  height: 360vmax;

  background: var(--cclb-pslash-white) !important;
  transform:
    translate(-50%, -50%)
    rotate(var(--cclb-pslash-cut-angle))
    scaleY(var(--cclb-pslash-line-scale));
  transform-origin: center center;

  opacity: 0;
  pointer-events: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

#cclb-pslash-transition.cclb-pslash--cut .cclb-pslash-line {
  animation:
    cclbPslashWhiteSpread var(--cclb-pslash-white-spread-duration)
    var(--cclb-pslash-spread-easing)
    forwards;
}

/* 青い線 → 青い面 */
#cclb-pslash-transition .cclb-pslash-white-cover {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 6 !important;

  width: 360vmax;
  height: 360vmax;

  background: var(--cclb-pslash-blue) !important;
  transform:
    translate(-50%, -50%)
    rotate(var(--cclb-pslash-cut-angle))
    scaleY(var(--cclb-pslash-line-scale));
  transform-origin: center center;

  opacity: 0;
  pointer-events: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

#cclb-pslash-transition.cclb-pslash--cover .cclb-pslash-white-cover {
  animation:
    cclbPslashBlueSpread var(--cclb-pslash-blue-spread-duration)
    var(--cclb-pslash-spread-easing)
    forwards;
}

/* 旧ページ側の青幕上に出す、控えめなローディング表示 */
#cclb-pslash-transition .cclb-pslash-loading {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 20 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;

  color: rgba(255, 255, 255, .9) !important;
  font-family: inherit !important;
  font-size: clamp(10px, 1.1vw, 13px) !important;
  font-weight: 500 !important;
  letter-spacing: .28em !important;
  line-height: 1 !important;

  opacity: 0;
  transform: translate3d(-50%, -44%, 0);
  pointer-events: none !important;
  user-select: none !important;
  will-change: opacity, transform;
}

#cclb-pslash-transition .cclb-pslash-loading__text {
  display: block !important;
  padding-left: .28em !important;
}

#cclb-pslash-transition .cclb-pslash-loading__line {
  position: relative !important;
  display: block !important;
  width: 64px !important;
  height: 1px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .28) !important;
  transform: skewX(-35deg);
}

#cclb-pslash-transition .cclb-pslash-loading__line::before {
  content: "";
  position: absolute !important;
  left: -40% !important;
  top: 0 !important;
  width: 40% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, .95) !important;
  animation: cclbPslashLoadingLine 1.15s ease-in-out infinite;
}

#cclb-pslash-transition.cclb-pslash--cover .cclb-pslash-loading {
  /*
   * iOS Safariでは location.href 実行後に旧ページ側の描画が止まりやすい。
   * そのため遅延アニメーションにせず、青幕表示と同時にほぼ即表示する。
   */
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}


/* ================================
   ENTER
================================ */

#cclb-pslash-entrance {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--cclb-pslash-z-enter) !important;
  /* 基本はクリックを通す。最初の短い時間だけJS側のblocking classで止める */
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

#cclb-pslash-entrance.cclb-pslash-entrance--blocking {
  pointer-events: auto !important;
}

/*
 * 青い幕全体を斬線角度で回転させる。
 * その中で上下2枚に分けることで、実画面では斬線に沿って開く。
 */
#cclb-pslash-entrance .cclb-pslash-split-stage {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 360vmax !important;
  height: 360vmax !important;

  transform:
    translate(-50%, -50%)
    rotate(var(--cclb-pslash-cut-angle));
  transform-origin: center center;

  pointer-events: none !important;
  overflow: hidden !important;
  will-change: transform;
  backface-visibility: hidden;
}

#cclb-pslash-entrance .cclb-pslash-split-piece {
  position: absolute !important;
  left: 0 !important;

  width: 100% !important;
  height: 50.25% !important;

  background: var(--cclb-pslash-blue) !important;
  pointer-events: none !important;
  will-change: transform;
  backface-visibility: hidden;
}

#cclb-pslash-entrance .cclb-pslash-split-piece--upper {
  top: 0 !important;
  animation:
    cclbPslashSplitUpperOpen var(--cclb-pslash-open-duration)
    var(--cclb-pslash-open-easing)
    forwards;
}

#cclb-pslash-entrance .cclb-pslash-split-piece--lower {
  bottom: 0 !important;
  animation:
    cclbPslashSplitLowerOpen var(--cclb-pslash-open-duration)
    var(--cclb-pslash-open-easing)
    forwards;
}

/* ================================
   Animations
================================ */

@keyframes cclbPslashVideoEnter {
  from {
    opacity: 0;
    transform: scale(1.015);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*
 * scaleYで広げる。
 * 中間キーフレームを置かず、最初から最後まで連続的に動かす。
 */
@keyframes cclbPslashWhiteSpread {
  from {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--cclb-pslash-cut-angle))
      scaleY(var(--cclb-pslash-line-scale));
  }

  to {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--cclb-pslash-cut-angle))
      scaleY(1);
  }
}

@keyframes cclbPslashBlueSpread {
  from {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--cclb-pslash-cut-angle))
      scaleY(var(--cclb-pslash-line-scale));
  }

  to {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--cclb-pslash-cut-angle))
      scaleY(1);
  }
}

/*
 * 次ページ側。
 * これも停止区間なしで最初から連続的に開く。
 */
@keyframes cclbPslashSplitUpperOpen {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -116%, 0);
  }
}

@keyframes cclbPslashSplitLowerOpen {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 116%, 0);
  }
}

@keyframes cclbPslashLoadingIn {
  from {
    opacity: 0;
    transform: translate3d(-50%, -40%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
  }
}

@keyframes cclbPslashLoadingLine {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(350%, 0, 0);
  }
}


/* ================================
   Reduced Motion
================================ */

@media (prefers-reduced-motion: reduce) {
  #cclb-pslash-transition,
  #cclb-pslash-entrance {
    display: none !important;
  }

  body.cclb-pslash-body-lock {
    overflow: auto !important;
  }
}


/* ================================
   Loading Toggle
   LOADING表示のON/OFF
   none = 非表示
   flex = 表示
================================ */

:root {
  --cclb-pslash-loading-display: none;
}

#cclb-pslash-transition .cclb-pslash-loading {
  display: var(--cclb-pslash-loading-display, flex) !important;
}