/* /assets/css/motion.css（全文：Home PC boot tokens + header/footer reveal を追加） */
/* =========================================================
   Motion tokens (single source of truth)
   - 時間は「ms」表記。JSもここを参照して同期する。
   ========================================================= */

:root{
  /* -------------------------
     Easing
     ------------------------- */
  --ease: ease;                    /* 汎用 */
  --ease-out: ease-out;            /* フェード系の基本 */
  --ease-inout: ease-in-out;       /* 往復・呼吸系 */

  /* -------------------------
     Global boot / page
     ------------------------- */
  --motion-page-fade: 3000ms;      /* 固定ページ：全体フェード（header/footer等） */
  --motion-site-fade: 1200ms;      /* SP Home：#siteContent一括フェード */
  --motion-site-shift: 12px;       /* SP Home：#siteContentのYシフト量 */
  --motion-page-sky-total: 2500ms; /* 固定ページ：青空が流れて消えるまで */

  /* -------------------------
     UI micro-interaction
     ------------------------- */
  --motion-ui-tap: 120ms;          /* タップ時の微反応 */
  --motion-ui-min: 160ms;
  --motion-ui-fast: 170ms;
  --motion-ui-mid: 220ms;
  --motion-ui-slow: 240ms;
  --motion-ui-fade: 800ms;         /* UIの汎用フェード */

  /* -------------------------
     Menu overlay (SP)
     ------------------------- */
  --motion-menu-fade: 800ms;       /* SPメニュー開閉フェード */
  --motion-menu-link: 400ms;       /* SPメニュー項目の反応 */

  /* -------------------------
     PRESS START (Home) legacy (SP)
     ------------------------- */
  --motion-start-breathe: 2800ms;        /* Start画像の呼吸アニメ */
  --motion-start-blink-step: 240ms;      /* START押下時の点滅：少しゆっくり */
  --motion-start-blink-total: 720ms;     /* = 240ms x 3 */
  --motion-start-fadeout: 1000ms;        /* SP：Startフェードアウト */
  --motion-start-set-started: 250ms;     /* SP：is-started付与までの待ち */

  /* -------------------------
     Home PC boot (bg-over -> cdt / start)
     - 初期表示：bg-over
     - Start     : 1000ms後から1500msで表示
     - クリック : bg-over -> cdt を1000msでクロスフェード
     ------------------------- */
  --motion-home-start-delay: 1000ms;      /* PRESS START 表示開始まで */
  --motion-home-start-fade: 1500ms;       /* PRESS START フェードイン */

  /* HOME staged reveal: delay creates the order; each fade itself stays short. */
  --motion-home-gate-delay: 250ms;
  --motion-home-cover-out: 1000ms;        /* bg-black -> cdt: 250-1250ms */

  --motion-home-header-delay: 850ms;
  --motion-home-header-fade: 700ms;       /* 850-1550ms */
  --motion-home-footer-delay: 1050ms;
  --motion-home-footer-fade: 700ms;       /* 1050-1750ms */

  --motion-home-menu-delay: 1250ms;
  --motion-home-menu-fade: 800ms;         /* PC nav2 / SP MENU: 1250-2050ms */
  --motion-home-latest-delay: 1450ms;
  --motion-home-latest-fade: 800ms;       /* 1450-2250ms */
  --motion-home-updates-delay: 1650ms;
  --motion-home-updates-fade: 800ms;      /* 1650-2450ms */

  --motion-home-reveal-total: 2500ms;     /* is-started-final timing */
  --motion-home-ui-fade: 800ms;           /* compatibility fallback */
  --motion-home-chrome-shift: 4px;        /* subtle vertical reveal */

  /* -------------------------
     Desktop nav (fixed pages) : nav-desktop
     ------------------------- */
  --motion-nav-bounce: 2020ms;            /* nav-desktopのバウンス等 */

  /* -------------------------
     Home nav : nav-desktop2
     ------------------------- */
  --motion-nav2-fade: var(--motion-latest-fade);  /* nav2のフェード（latestと揃える） */

  /* -------------------------
     Latest (Home overlay)
     ------------------------- */
  --motion-latest-fade: 1000ms;           /* Home: START押下から1秒で表示完了 */
  --motion-latest-appear: var(--motion-latest-fade);
  --motion-latest-appear-class: 650ms;    /* appear用クラスを剥がすまで */
  --motion-latest-glint: 1500ms;          /* glintの所要 */
  --motion-latest-glint-delay: 1000ms;    /* glint開始遅延 */
  --motion-latest-float: 4s;              /* 浮遊 */
  --motion-latest-tap-delay: 140ms;       /* タップ→反応までの微ディレイ */
  --motion-latest-swap-buffer: 50ms;      /* show/hide入替のバッファ */


  /* -------------------------
     Fixed pages: fade sequence
     ------------------------- */
  --motion-fixed-fade: 1500ms;            /* 固定ページ：各要素のフェード時間 */
  --motion-fixed-main-delay: 0ms;         /* 固定ページ：main表示開始 */
  --motion-fixed-hf-delay: 800ms;         /* 固定ページ：header/footer表示開始 */
  --motion-fixed-subheader-delay: 1500ms;/* 固定ページ：subheader表示開始 */
  --motion-fixed-shift: 4px;              /* 固定ページ：Yシフト量 */
}

/* =========================================================
   Fixed pages: full-viewport sky pass (CSS only)
   - トップ（main）と data-page を持たない secret は対象外
   - 既存背景の上、header / main / footer の下に2.5秒だけ敷く
   ========================================================= */
body[data-page]:not([data-page="main"]){
  position: relative;
  isolation: isolate;
}

/*
   Page backdrop settings
   ======================
   Change a page's backdrop only in this section.  Every page receives a
   default daytime sky; page-specific rows below override just that page.
   BENMI begins in the light theme and crossfades to Black Edition in JS, so
   its night backdrop must be selected before that transition starts.
*/
body[data-page]:not([data-page="main"]){
  --page-sky-image: url("/soz/backdrop/page-sky2.webp?v=20260911-final-01");
  --page-sky-tint: linear-gradient(rgba(180, 225, 248, 0.06), rgba(23, 133, 204, 0.04));
  --page-sky-position: center;
  --page-sky-size: cover;
}

body[data-page="benmi"],
body[data-page]:not([data-page="main"])[data-theme="black"]{
  --page-sky-image: url("/soz/backdrop/page-black.webp?v=20260911-final-01");
  --page-sky-tint: linear-gradient(rgba(8, 24, 58, 0.06), rgba(0, 0, 0, 0.18));

  /* The moon in the square night image sits in the upper-left quadrant.
     With cover+center it is cropped out on both wide PC and tall SP screens.
     Bias the crop toward the upper-left so the moon remains visible while
     preserving the existing full-viewport flow animation. */
  --page-sky-position: 100% 18%;

  /* Square artwork is intentionally larger than the pseudo-element.
     This creates crop room on BOTH axes, so X/Y background-position
     works on landscape PC and portrait SP alike. */
  --page-sky-size: 140vmax auto;
}

/* Individual page assignments — edit only these rows when artwork changes. */
body[data-page="works"]:not([data-theme="black"]){
  --page-sky-image: url("/soz/backdrop/page-cloud.webp");
  --page-sky-tint: linear-gradient(rgba(180, 225, 248, 0.06), rgba(23, 133, 204, 0.04));
  --page-sky-position: center;
  --page-sky-size: cover;
}
body[data-page="benly"]:not([data-theme="black"]){
  --page-sky-image: url("/soz/backdrop/page-cloud2.webp");
  --page-sky-tint: linear-gradient(rgba(91, 127, 170, 0.08), rgba(43, 55, 69, 0.12));
  --page-sky-position: 100% 18%;
  --page-sky-size: 140vmax auto;
}
body[data-page="library"]:not([data-theme="black"]){
  --page-sky-image: url("/soz/backdrop/page-dawn.webp");
  --page-sky-tint: linear-gradient(rgba(91, 127, 170, 0.08), rgba(43, 55, 69, 0.12));
  --page-sky-position: 100% 18%;
  --page-sky-size: 140vmax auto;
}


/* Black Edition: on portrait SP, keep a little more of the image's left side
   because cover crops the square artwork horizontally. */
@media (max-width: 767px){
  body[data-page="benmi"],
  body[data-page]:not([data-page="main"])[data-theme="black"]{
    --page-sky-position: 26% 45%;
  }
  body:is([data-page="benly"],[data-page="library"]):not([data-theme="black"]){
    --page-sky-position: 26% 45%;
  }

  /* page-cloud2.webp is a wide 3042x1541 image.  The desktop-oriented
     140vmax auto sizing leaves uncovered bands on a portrait viewport.
     Fill the SP viewport on BENLY while preserving the PC composition and
     the separate LIBRARY backdrop sizing. */
  body[data-page="benly"]:not([data-theme="black"]){
    --page-sky-size: cover;
  }
}

body[data-page]:not([data-page="main"])::before{
  content: "";
  position: fixed;
  inset: -8vmax -12vmax;
  z-index: -1;
  pointer-events: none;

  background-image: var(--page-sky-tint), var(--page-sky-image);
  background-repeat: no-repeat;

  /* Tint always covers the viewport; only the artwork is repositioned. */
  background-position: center, var(--page-sky-position, center);
  background-size: cover, var(--page-sky-size, cover);

  opacity: 0;
  transform: translate3d(-5%, 0, 0) scale(1.06);
  transform-origin: center;
  will-change: opacity, transform;
}

/* Start the moving backdrop only after all page fragments are mounted.
   common.js adds this class at the same moment as is-ready, so the
   moving backdrop and the fixed-page fade sequence share one timeline. */
body.is-page-sky-active[data-page]:not([data-page="main"])::before{
  animation: pageSkyFlow var(--motion-page-sky-total) cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes pageSkyFlow{
  0%{
    opacity: 0;
    transform: translate3d(-5%, 0, 0) scale(1.06);
  }
  10%{
    opacity: .92;
  }
  68%{
    opacity: .86;
  }
  100%{
    opacity: 0;
    transform: translate3d(5%, 0, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce){
  body[data-page]:not([data-page="main"])::before{
    transform: none;
  }
  body.is-page-sky-active[data-page]:not([data-page="main"])::before{
    animation: pageSkyReduced 450ms ease-out both;
  }
}

@keyframes pageSkyReduced{
  0%{ opacity: .55; }
  100%{ opacity: 0; }
}

/* =========================================================
   HOME: staged chrome reveal (PC + SP)
   - cdt is exposed first by the black gate
   - logo/header follows, footer slightly later
   ========================================================= */
@media (min-width: 768px){
  html.js body.is-home #siteHeader{
    position: relative;
    z-index: 2000;
  }
}

html.js body.is-home:not(.is-started) #siteHeader{
  opacity: 0;
  transform: translateY(calc(var(--motion-home-chrome-shift, 4px) * -1));
  pointer-events: none;
}
html.js body.is-home:not(.is-started) #siteFooter{
  opacity: 0;
  transform: translateY(var(--motion-home-chrome-shift, 4px));
  pointer-events: none;
}

html.js body.is-home.is-started #siteHeader{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-home-header-fade, 700ms) var(--ease-out, ease-out) var(--motion-home-header-delay, 850ms),
    transform var(--motion-home-header-fade, 700ms) var(--ease-out, ease-out) var(--motion-home-header-delay, 850ms);
  will-change: opacity, transform;
  pointer-events: auto;
}

html.js body.is-home.is-started #siteFooter{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-home-footer-fade, 700ms) var(--ease-out, ease-out) var(--motion-home-footer-delay, 1050ms),
    transform var(--motion-home-footer-fade, 700ms) var(--ease-out, ease-out) var(--motion-home-footer-delay, 1050ms);
  will-change: opacity, transform;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  html.js body.is-home #siteHeader,
  html.js body.is-home #siteFooter{
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
}

/* =========================================================
   Fixed pages: staged fade-in sequence
   ========================================================= */

/* 初期：隠す（layoutは確保） */
html.js body[data-page]:not([data-page="main"]) #siteMain,
html.js body[data-page]:not([data-page="main"]) #siteHeader,
html.js body[data-page]:not([data-page="main"]) #siteFooter,
html.js body[data-page]:not([data-page="main"]) #siteSubHeader{
  opacity: 0;
  transform: translateY(var(--motion-fixed-shift));
  transition:
    opacity var(--motion-fixed-fade) var(--ease-out),
    transform var(--motion-fixed-fade) var(--ease-out);
  will-change: opacity, transform;
  pointer-events: none;
}

/* 表示：要素ごとに delay を振る */
html.js body.is-ready[data-page]:not([data-page="main"]) #siteMain{
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--motion-fixed-main-delay);
  pointer-events: auto;
}

html.js body.is-ready[data-page]:not([data-page="main"]) #siteHeader,
html.js body.is-ready[data-page]:not([data-page="main"]) #siteFooter{
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--motion-fixed-hf-delay);
  pointer-events: auto;
}

html.js body.is-ready[data-page]:not([data-page="main"]) #siteSubHeader{
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--motion-fixed-subheader-delay);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  html.js body[data-page]:not([data-page="main"]) #siteMain,
  html.js body[data-page]:not([data-page="main"]) #siteHeader,
  html.js body[data-page]:not([data-page="main"]) #siteFooter,
  html.js body[data-page]:not([data-page="main"]) #siteSubHeader{
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
}

/* =========================================================
   Fixed pages: ensure header/footer interactions
   ========================================================= */
html.js body[data-page]:not([data-page="main"]) #siteHeader .site-header,
html.js body[data-page]:not([data-page="main"]) #siteFooter .site-footer{
  pointer-events: none;
}

html.js body.is-ready[data-page]:not([data-page="main"]) #siteHeader .site-header,
html.js body.is-ready[data-page]:not([data-page="main"]) #siteFooter .site-footer{
  pointer-events: auto;
}