/* /assets/css/start.css（全文：Home PC bg-over+start タイミング修正 + BFCache/キャッシュ混在対策） */
/* =========================================================
   fudosha.net
   assets/css/start.css
   - Top page: PRESS START button (centered)
   - Home PC: hero/bg-over/start staged fade + cover-out
   - SP: legacy classes is-starting / is-fading / is-started-final を維持
   ========================================================= */

/* =========================
   PRESS START sizing
   ========================= */
:root{
  --press-start-w: calc(300px * var(--pc-ui-scale, 1));
  --press-start-h: calc(35px * var(--pc-ui-scale, 1));
}

@media (max-width: 767px){
  :root{
    --press-start-w: 150px;
    --press-start-h: 30px;
  }
}

/* ---------------------------------------------------------
   SAFETY (Home): .press-start を“デフォルト非表示”にする
   - JS注入直後に一瞬見える事故 / 想定外DOM位置 / BFCache復帰の揺れ を潰す
   - PCは home-boot ルールで制御
   - SPは is-ready で表示（従来の「押す前は見える」を維持）
   --------------------------------------------------------- */
html.js body.is-home #siteMain .press-start{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 767px){
  html.js body.is-home.is-ready #siteMain .press-start{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.press-start{
  position: absolute;
  z-index: 30; /* Home PC boot内で明示的に管理（hero<cover<start） */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;

  width: var(--press-start-w);
  height: var(--press-start-h);
  aspect-ratio: auto;

  /* クリック時ハイライト抑制 */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;

  /* iOS対策：button を確実にタップ対象にする */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.press-start picture{
  display: block;
  width: 100%;
  height: 100%;
}

.press-start img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;

  animation: breathe var(--motion-start-breathe, 2800ms) var(--ease-inout, ease-in-out) infinite;
  will-change: opacity, transform;

  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
  transform-origin: center;
}

@keyframes breathe{
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-1px); }
}

/* クリック後：高速点滅（img側だけ）
   ※終端を opacity:1 にして「点滅の最後で消えたまま」を潰す */
body.is-starting .press-start img{
  animation: startBlink var(--motion-start-blink-step, 170ms) steps(2, end) 3;
}

@keyframes startBlink{
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ---------------------------------------------------------
   SP legacy: クリック後フェード（既存維持）
   --------------------------------------------------------- */
body.is-fading .press-start{
  animation: startFadeOut var(--motion-start-fadeout, 1000ms) ease-out 1 forwards;
  will-change: opacity, transform;
}

@keyframes startFadeOut{
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.985); }
}

body.is-started .press-start{
  pointer-events: none;
}

body.is-started-final .press-start{
  display: none;
}

@media (prefers-reduced-motion: reduce){
  .press-start img{ animation: none; }
}

/* 押下の視覚 */
.press-start:active img{
  transform: scale(0.98);
  filter: brightness(1.55) contrast(1.05);
  opacity: 1;
}

.press-start:focus{ outline: none; }
.press-start:focus-visible img{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0));
}

.press-start picture,
.press-start img{
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* =========================================================
   Home PC boot (hero/bg-over/start)
   - 要求：
     hero   : 0→2000ms
     bg-over: 1000→3000ms
     start  : 2500→4500ms
   - クリックで bg-over + start をフェードアウト（“見える”ように）
   ========================================================= */
.home-cover{
  display: none; /* default: SP含め非表示 */
}

@media (min-width: 768px){

  /* hero-inner を基準箱に（位置崩れ防止） */
  html.js body.is-home.is-home-boot #siteMain .hero-inner{
    position: relative;
  }

  /* hero-keyvisual: 0→2000 */
  html.js body.is-home.is-home-boot #siteMain .hero-keyvisual{
    position: relative;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--motion-home-hero-fade, 2000ms) var(--ease-out, ease-out);
    will-change: opacity;
  }

  html.js body.is-home.is-home-boot.is-ready #siteMain .hero-keyvisual{
    opacity: 1;
  }

  /* bg-over（home-cover）: 1000→3000 */
  html.js body.is-home.is-home-boot #siteMain .hero-inner .home-cover{
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;

    z-index: 20;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transition:
      opacity var(--motion-home-cover-fade, 2000ms) var(--ease-out, ease-out) var(--motion-home-cover-delay, 1000ms),
      visibility 0s linear var(--motion-home-cover-delay, 1000ms);
    will-change: opacity;
  }

  html.js body.is-home.is-home-boot.is-ready #siteMain .hero-inner .home-cover{
    opacity: 1;
    visibility: visible;
  }

  /* start（press-start）: 2500→4500 */
  html.js body.is-home.is-home-boot #siteMain .hero-inner .press-start{
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity var(--motion-home-start-fade, 2000ms) var(--ease-out, ease-out) var(--motion-home-start-delay, 2500ms),
      visibility 0s linear var(--motion-home-start-delay, 2500ms);
    will-change: opacity;
  }

  html.js body.is-home.is-home-boot.is-ready #siteMain .hero-inner .press-start{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* クリック後：bg-over + start をフェードアウト
     重要：ここでは visibility をいじらない（離散プロパティの実装差で“即消え”を起こすことがある）
     完全に消す（display:none）は is-home-boot-opened で行う */
  html.js body.is-home.is-home-boot.is-home-boot-open #siteMain .hero-inner .home-cover,
  html.js body.is-home.is-home-boot.is-home-boot-open #siteMain .hero-inner .press-start{
    opacity: 0;
    pointer-events: none;

    transition:
      opacity var(--motion-home-cover-out, 2000ms) var(--ease-out, ease-out) 0ms;
  }

  /* 完了後：物理的に消す（JSが is-home-boot-opened を“フェード完了後”に付ける） */
  html.js body.is-home.is-home-boot.is-home-boot-opened #siteMain .hero-inner .home-cover,
  html.js body.is-home.is-home-boot.is-home-boot-opened #siteMain .hero-inner .press-start{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce){
  @media (min-width: 768px){
    html.js body.is-home.is-home-boot #siteMain .hero-keyvisual{
      opacity: 1;
      transition: none;
    }
    html.js body.is-home.is-home-boot #siteMain .hero-inner .home-cover{
      opacity: 0;
      visibility: hidden;
      transition: none;
    }
    html.js body.is-home.is-home-boot #siteMain .hero-inner .press-start{
      opacity: 1;
      visibility: visible;
      transition: none;
      pointer-events: auto;
    }
  }
}