/*
Theme Name: SWELL CHILD
Template: swell
Version: 1.0
*/

/* =========================================================
  COMRADE TOP（SWELL）
  - TOPのみ：ヘッダー下の残り領域で 2枚を縦並びセンター
  - 画像インライン幅(px)をCSSで上書きしてレスポンシブ化
  - フッター/コピーライト非表示
  - ロゴのCLS（読み込み時に一瞬デカい）を抑止
  - ロゴ色アニメ（PNGマスク）維持：黒→グレー→黒
  - 動きなし：上品フェードのみ（1.0s）
========================================================= */

/* ====== 調整用 ====== */
:root{
  --comrade-header-h: 110px; /* ヘッダー高さ（必要なら変更） */
  --comrade-gap: 22px;

  /* ロゴ最大幅（PC） */
  --comrade-logo-w: 463px;

  /* ロゴ比率（1024x256 = 4:1） */
  --comrade-logo-ar: 4 / 1;
}

/* =========================================================
  TOPのみ：全画面固定
========================================================= */
body.home,
body.front-page{
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
}

/* SWELLの幅制限を解除して「基準を画面」にする */
body.home .l-container,
body.home .l-content,
body.front-page .l-container,
body.front-page .l-content{
  max-width: none !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* メイン領域を「ヘッダー下〜画面下」に固定 */
body.home .l-main,
body.front-page .l-main{
  position: fixed !important;
  top: var(--comrade-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  overflow: hidden;
  display: flex;
}

/* 中央寄せの土台 */
body.home .post_content,
body.home .entry-content,
body.home .p-entry__body,
body.front-page .post_content,
body.front-page .entry-content,
body.front-page .p-entry__body{
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--comrade-gap);
  text-align: center;
}

/* figureもセンター基準に */
body.home figure.wp-block-image,
body.front-page figure.wp-block-image{
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

/* 上のアート画像（wp-image-68想定） */
body.home img.wp-image-68,
body.front-page img.wp-image-68{
  display: block;
  margin: 0 auto !important;

  width: min(500px, 92vw) !important; /* インライン幅を上書き */
  height: auto !important;

  /* 2枚並ぶ前提で「高さを食いすぎない」 */
  max-height: calc(100dvh - var(--comrade-header-h) - 220px);
  object-fit: contain;
}

/* =========================================================
  ロゴ：CLS（読み込み時に一瞬デカい）対策 “最短・最強”
  - figure.comrade-logo に「先に箱」を確保（aspect-ratio）
  - img のインライン style（width:295px）を 100% で潰す
  - is-resized が勝っても必ずこの箱が勝つように !important
========================================================= */

/* ロゴ用の箱（先に高さを確保して跳ねを止める） */
body.home figure.comrade-logo,
body.front-page figure.comrade-logo{
  width: min(var(--comrade-logo-w), 86vw) !important;
  max-width: min(var(--comrade-logo-w), 86vw) !important;
  aspect-ratio: var(--comrade-logo-ar);
  display: block;
  margin: 0 auto !important;

  /* Gutenbergが変な幅計算しても崩れないように */
  flex: 0 0 auto !important;
}

/* クリックリンク（a）も箱いっぱいに */
body.home figure.comrade-logo > a,
body.front-page figure.comrade-logo > a{
  display: block;
  width: 100%;
  height: 100%;
}

/* imgは「箱に100%」で固定（インラインwidth:295pxを完全に殺す） */
body.home figure.comrade-logo img,
body.front-page figure.comrade-logo img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  object-fit: contain;
}

/* Gutenberg is-resized の影響を完全遮断（保険） */
body.home figure.wp-block-image.is-resized.comrade-logo,
body.front-page figure.wp-block-image.is-resized.comrade-logo{
  width: min(var(--comrade-logo-w), 86vw) !important;
  max-width: min(var(--comrade-logo-w), 86vw) !important;
}

/* =========================================================
  ロゴ色アニメ（PNG MASK）※figure.comrade-logo のみ
  - パターン：黒 → グレー → 黒（フェード）
========================================================= */

figure.comrade-logo{
  position: relative;
}

/* 元PNGは見せない（ただし箱は確保されるのでCLSしない） */
figure.comrade-logo img{
  opacity: 0;
}

/* 色レイヤー（ロゴ形状はマスクで切り抜く） */
figure.comrade-logo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;

  background:#000;
  animation: comradeLogoColor 6.0s ease-in-out infinite;

  -webkit-mask-image: url("https://demo01.inconnectzero.net/wp-content/uploads/2026/01/Comrade_logo-2-1024x256.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("https://demo01.inconnectzero.net/wp-content/uploads/2026/01/Comrade_logo-2-1024x256.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* 黒→グレー→黒（自然に） */
@keyframes comradeLogoColor{
  0%   { background:#000; }
  45%  { background:#bdbdbd; } /* グレー（好みで濃さ調整OK） */
  100% { background:#000; }
}

@media (prefers-reduced-motion: reduce){
  figure.comrade-logo::before{
    animation:none;
    background:#000;
  }
}

/* =========================================================
  フッター／コピーライト（保険）
========================================================= */
body.home .l-footer,
body.front-page .l-footer,
body.home .c-copyright,
body.front-page .c-copyright{
  display: none !important;
}

/* =========================================================
  上品フェード（動きなし）1.0秒
  - ページ読み込みごとに毎回入る
  - body に is-loaded が付与される前提（functions.php の JS）
========================================================= */

/* 初期：うっすら（完全0だと「消えた？」に見えることがある） */
body.home .l-main,
body.front-page .l-main{
  opacity: 0.01;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

/* load後：表示 */
body.is-loaded.home .l-main,
body.is-loaded.front-page .l-main{
  opacity: 1;
}

/* 動きを減らす設定の人には即表示 */
@media (prefers-reduced-motion: reduce){
  body.home .l-main,
  body.front-page .l-main{
    opacity: 1 !important;
    transition: none !important;
  }
}

/* =========================================================
  SP調整
========================================================= */
@media (max-width: 768px){
  :root{
    --comrade-header-h: 90px;
    --comrade-logo-w: 520px; /* SPは少し大きく */
  }

  body.home img.wp-image-68,
  body.front-page img.wp-image-68{
    width: min(500px, 88vw) !important;
    max-height: calc(100dvh - var(--comrade-header-h) - 200px);
  }
}

/* =========================================================
  COMRADE – Artwork & Logo
  上品フェードのみ（動きなし）
  ・アートワーク＋ロゴを同時にフェード
  ・毎回フェード
  ・duration: 1.0s
========================================================= */

/* 初期状態：ほんのり非表示 */
body.home .wp-image-68,
body.home figure.comrade-logo,
body.front-page .wp-image-68,
body.front-page figure.comrade-logo{
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

/* 読み込み完了後：表示 */
body.is-loaded.home .wp-image-68,
body.is-loaded.home figure.comrade-logo,
body.is-loaded.front-page .wp-image-68,
body.is-loaded.front-page figure.comrade-logo{
  opacity: 1;
}

/* ロゴ色レイヤー（PNGマスク）も同調させる */
body.home figure.comrade-logo::before,
body.front-page figure.comrade-logo::before{
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-loaded.home figure.comrade-logo::before,
body.is-loaded.front-page figure.comrade-logo::before{
  opacity: 1;
}

/* アクセシビリティ：動きを減らす設定の人は即表示 */
@media (prefers-reduced-motion: reduce){
  body.home .wp-image-68,
  body.home figure.comrade-logo,
  body.front-page .wp-image-68,
  body.front-page figure.comrade-logo,
  body.home figure.comrade-logo::before,
  body.front-page figure.comrade-logo::before{
    opacity: 1 !important;
    transition: none !important;
  }
}

/* =========================================
   COMRADE – 同時フェード表示（ラグ解消）
   - アートワーク
   - ロゴ
   - ロゴ色アニメ
   を完全に同期
========================================= */

/* ---------- 初期状態：すべて止める ---------- */

/* アートワーク（上の画像） */
body.home img.wp-image-68,
body.front-page img.wp-image-68{
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ロゴ（figure） */
body.home figure.comrade-logo,
body.front-page figure.comrade-logo{
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ロゴ色アニメ：初期は停止 */
figure.comrade-logo::before{
  animation-play-state: paused;
}

/* ---------- 読み込み完了：同時に開始 ---------- */

body.is-loaded.home img.wp-image-68,
body.is-loaded.front-page img.wp-image-68{
  opacity: 1;
}

body.is-loaded.home figure.comrade-logo,
body.is-loaded.front-page figure.comrade-logo{
  opacity: 1;
}

/* ロゴ色アニメもここで同時スタート */
body.is-loaded figure.comrade-logo::before{
  animation-play-state: running;
}

/* =========================================
   COMRADE – 毎回フェード（完全同期）
   - アートワーク
   - ロゴ
   - ロゴ色アニメ
   を毎回同時にフェード表示
========================================= */

/* ===============================
   初期状態（ページ描画直後）
   =============================== */

/* アートワーク */
body.home img.wp-image-68,
body.front-page img.wp-image-68{
  opacity: 0;
}

/* ロゴ */
body.home figure.comrade-logo,
body.front-page figure.comrade-logo{
  opacity: 0;
}

/* ロゴ色アニメは最初は止める */
figure.comrade-logo::before{
  animation-play-state: paused;
}

/* ===============================
   読み込み完了後（毎回）
   =============================== */

body.is-loaded.home img.wp-image-68,
body.is-loaded.front-page img.wp-image-68{
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-loaded.home figure.comrade-logo,
body.is-loaded.front-page figure.comrade-logo{
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ロゴ色アニメも同時に開始 */
body.is-loaded figure.comrade-logo::before{
  animation-play-state: running;
}

/* ===============================
   動きを減らす設定の人には即表示
   =============================== */
@media (prefers-reduced-motion: reduce){
  body.home img.wp-image-68,
  body.front-page img.wp-image-68,
  body.home figure.comrade-logo,
  body.front-page figure.comrade-logo{
    opacity: 1 !important;
    transition: none !important;
  }

  figure.comrade-logo::before{
    animation: none !important;
    background: #000;
  }
}

/* =========================================
   COMRADE：White → float-up reveal（上品）
   - 初期：白に溶ける
   - 1.0sで浮かび上がる
   - ロゴ色アニメは“出現後”に開始（同時ズレ対策）
========================================= */

/* 調整（好みで） */
:root{
  --reveal-dur: 1s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-rise: 10px; /* 浮かび上がり量 */
}

/* 初期状態（ロード前）
   - アート画像（1枚目のimg）とロゴ（comrade-logo）を同じ動きに */
body.home img.wp-image-68,
body.front-page img.wp-image-68,
body.home figure.comrade-logo,
body.front-page figure.comrade-logo{
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  filter: blur(3px);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform, filter;
}

/* 読み込み後：浮かび上がる */
body.is-loaded.home img.wp-image-68,
body.is-loaded.front-page img.wp-image-68,
body.is-loaded.home figure.comrade-logo,
body.is-loaded.front-page figure.comrade-logo{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ロゴの色アニメ（マスク）を “出現後” に開始
   → iPhoneでロゴだけ遅れて見える問題を軽減 */
body.home figure.comrade-logo::before,
body.front-page figure.comrade-logo::before{
  /* 既存の comradeLogoColor を使う想定 */
  animation-delay: var(--reveal-dur);
}

/* 動きを減らす設定の人は即表示（上品に） */
@media (prefers-reduced-motion: reduce){
  body.home img.wp-image-68,
  body.front-page img.wp-image-68,
  body.home figure.comrade-logo,
  body.front-page figure.comrade-logo{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.home figure.comrade-logo::before,
  body.front-page figure.comrade-logo::before{
    animation-delay: 0s !important;
  }
}

body.is-loaded.home figure.comrade-logo,
body.is-loaded.front-page figure.comrade-logo{
  filter: blur(0) drop-shadow(0 0 10px rgba(0,0,0,.06));
}