/* animations-v4.css — 動き（2026-09-13 / CTO・テーマ ver4.0）
   方針: 「静かな確信」。1回きりの登場と、指を置いたときの反応だけ。常時動くものは置かない。
   すべての動きはこのファイルと js/animations-v4.js・js/animations-head-v4.js に閉じています。
   止める場合は functions.php の OW_ANIMATIONS を false にする（3ファイルの読み込みを外すだけ）。

   前提: <html class="js"> が付いているときだけ初期状態を「見えない」にする。
         JavaScript無効・印刷・「視差効果を減らす」設定では、最初から全部見える。 */

/* ===== 1. スクロールで現れる（.reveal は animations.js が付与。HTMLは触らない） ===== */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--i, 0) * 70ms);   /* 兄弟要素は70msずつ遅らせる（最大6つ） */
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }

  /* 緑の罫線が左から引かれる（見出し付きカードの上罫） */
  html.js .rule-top { border-top-color: transparent !important; position: relative; }
  html.js .rule-top::before {
    content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
    background: var(--green); transform: scaleX(0); transform-origin: left center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1) .12s;
  }
  html.js .rule-top.is-visible::before { transform: scaleX(1); }

  /* 事実ストリップの金の縦罫が上から引かれる */
  html.js .facts-strip > div { border-left-color: transparent; position: relative; }
  html.js .facts-strip > div::before {
    content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
    background: var(--gold); transform: scaleY(0); transform-origin: top center;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1) .15s;
  }
  html.js .facts-strip > div.is-visible::before { transform: scaleY(1); }

  /* ===== 2. ページを開いた瞬間の登場（トップのヒーロー／下層のページ見出し） ===== */
  html.js .hero-copy > * { opacity: 0; animation: ow-rise .7s cubic-bezier(.22, .61, .36, 1) forwards; }
  html.js .hero-eyebrow { animation-delay: .05s; }
  html.js .hero h1      { animation-delay: .15s; }
  html.js .hero-lead    { animation-delay: .27s; }
  html.js .hero-actions { animation-delay: .38s; }
  html.js .hero-note    { animation-delay: .48s; }
  html.js .hero-photo   { opacity: 0; animation: ow-photo .9s ease-out .2s forwards; }

  html.js .page-head .breadcrumb { opacity: 0; animation: ow-rise .6s cubic-bezier(.22, .61, .36, 1) .05s forwards; }
  html.js .page-head h1          { opacity: 0; animation: ow-rise .6s cubic-bezier(.22, .61, .36, 1) .15s forwards; }
  html.js .page-head .page-lead  { opacity: 0; animation: ow-rise .6s cubic-bezier(.22, .61, .36, 1) .27s forwards; }

  /* スマホの固定CTAは少し遅れて下から現れる */
  @media (max-width: 700px) {
    html.js .mobile-cta { animation: ow-slide-up .5s ease-out .6s both; }
  }
}

@keyframes ow-rise     { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ow-photo    { from { opacity: 0; transform: scale(1.02); }       to { opacity: 1; transform: none; } }
@keyframes ow-slide-up { from { transform: translateY(100%); }              to { transform: none; } }
@keyframes ow-fade     { from { opacity: 0; transform: translateY(-4px); }  to { opacity: 1; transform: none; } }

/* ===== 3. 指を置いたときの反応（マウス操作の端末のみ） ===== */
.button .icon, .text-link .icon, .mobile-cta .icon { transition: transform .25s ease; }
.faq summary .icon { transition: transform .3s ease; }               /* ＋ が × に回る */
.faq details[open] > p { animation: ow-fade .35s ease-out; }          /* 回答がふわりと出る */
.product { transition: transform .4s ease, box-shadow .4s ease; }
.product-photo { overflow: hidden; }
.product-photo img { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.docs-cover img { transition: transform .5s ease; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover .icon, .text-link:hover .icon { transform: translateX(3px); }
  .product:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(38, 50, 43, .10); }
  .product:hover .product-photo img { transform: scale(1.03); }
  .docs:hover .docs-cover img { transform: translateY(-2px) rotate(-1deg); }
}

/* ===== 4. スクロール中のヘッダー（影が付く） ===== */
.site-header { transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(38, 50, 43, .08); }

/* ===== 6. ページ遷移の演出（animations-head.js が判定、animations.js が表示） ===== */
/* 判定直後〜JSが覆いを作るまでの一瞬を、生成り色で覆っておく（本文のチラ見え防止） */
html.ow-intro-pending::before, html.ow-logo-pending::before {
  content: ""; position: fixed; inset: 0; z-index: 9998; background: #f5f0e8;
}
/* 覆いが出ている間はスクロールを止め、ヒーロー等の登場アニメを待たせる */
html.ow-hold { overflow: hidden; }
html.ow-hold .hero-copy > *, html.ow-hold .hero-photo,
html.ow-hold .page-head .breadcrumb, html.ow-hold .page-head h1, html.ow-hold .page-head .page-lead,
html.ow-hold .mobile-cta { animation-play-state: paused; }

.ow-overlay {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: #f5f0e8; opacity: 1; transition: opacity .7s ease;
}
.ow-overlay.ow-enter { opacity: 0; transition-duration: .28s; }   /* クリック元でのフェードイン用 */
.ow-overlay.is-out   { opacity: 0; pointer-events: none; }         /* フェードアウト */

/* 初回訪問: CEO提供の「HP遷移時」画像（ロゴ・キャッチ入りの茶室）を全画面に */
.ow-intro { background: #2b3a2c; }
.ow-full { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .4s ease; }
.ow-intro.is-ready .ow-full { opacity: 1; }
.ow-full img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  animation: ow-drift 3.8s ease-out forwards;   /* 3秒の表示＋フェードの間、ごく僅かに寄り続ける */
}
/* 縦画面（スマホ・タブレット縦）: 縦長の「HP遷移時_モバイル」画像を使い（picture で切替）、画面いっぱいに表示。
   ロゴとキャッチは画像の上寄り（高さの30〜45%）にあるため、少し上を基準に切り抜く（2026-09-13 CEO指示） */
@media (orientation: portrait) {
  .ow-full img { object-position: 50% 40%; }
}
@keyframes ow-drift { from { transform: scale(1.04); } to { transform: scale(1); } }

/* サイト内の移動: ロゴ */
.ow-logo img {
  width: min(62vw, 300px); height: auto; mix-blend-mode: multiply;
  animation: ow-logo-in .45s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes ow-logo-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html::before, .ow-overlay { display: none !important; }
}

/* ===== 5. 印刷時は必ず全部見せる ===== */
@media print {
  html.js .reveal, html.js .hero-copy > *, html.js .hero-photo,
  html.js .page-head .breadcrumb, html.js .page-head h1, html.js .page-head .page-lead {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  html.js .rule-top { border-top-color: var(--green) !important; }
  html.js .facts-strip > div { border-left-color: var(--gold); }
}