/* ==========================================================
   omiso-motion.css — おみそと晩酌 モダンモーション一式
   omiso-motion.js とセットで使用。
   ポイント:
   - 変えるのは opacity / transform / filter だけ。
     max-width や margin には一切触れないので、既存の
     幅指定・レイアウトと衝突しません(!important も不使用)。
   - html.omiso-motion が付いた時だけ非表示状態が有効になる
     ため、JSオフの環境でもコンテンツは普通に見えます。
   ========================================================== */

:root {
  --omiso-rose: #9B3A6B;
  --omiso-teal: #48D2DB;
  --omiso-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ふわっと減速するease-out */
  --omiso-duration: 0.7s;
}

/* ----------------------------------------------------------
   1. スクロール出現(ふわっと + わずかなブラー解除)
   ---------------------------------------------------------- */
html.omiso-motion [data-reveal] {
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity var(--omiso-duration) var(--omiso-ease),
    transform var(--omiso-duration) var(--omiso-ease),
    filter var(--omiso-duration) var(--omiso-ease);
  will-change: opacity, transform, filter;
}
html.omiso-motion [data-reveal="up"]    { transform: translateY(28px); }
html.omiso-motion [data-reveal="left"]  { transform: translateX(-32px); }
html.omiso-motion [data-reveal="right"] { transform: translateX(32px); }
html.omiso-motion [data-reveal="zoom"]  { transform: scale(0.94); }

html.omiso-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ----------------------------------------------------------
   2. スマートヘッダー(すりガラス化 + 出し入れ)
   .omiso-glass-ready はJSが自動付与。
   ヘッダーが position: fixed / sticky であることが前提。
   静的配置の場合は下の「position: sticky」のコメントを外す。
   ---------------------------------------------------------- */
.omiso-glass-ready {
  /* position: sticky; top: 0; z-index: 100; */
  transition:
    transform 0.4s var(--omiso-ease),
    background-color 0.4s ease,
    box-shadow 0.4s ease,
    backdrop-filter 0.4s ease;
}
.omiso-glass-ready.is-scrolled {
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 2px 20px rgba(155, 58, 107, 0.10);
}
.omiso-glass-ready.is-hidden {
  transform: translateY(-110%);
}

/* ----------------------------------------------------------
   3. 読了プログレスバー(記事ページ)
   ---------------------------------------------------------- */
.omiso-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--omiso-rose), var(--omiso-teal));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ----------------------------------------------------------
   4. ホバー・マイクロインタラクション
   カードやリンク画像に .omiso-lift を付けるだけで有効。
   記事一覧のカードに付けるのがおすすめ。
   ---------------------------------------------------------- */
.omiso-lift {
  transition:
    transform 0.35s var(--omiso-ease),
    box-shadow 0.35s var(--omiso-ease);
}
.omiso-lift:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 28px rgba(155, 58, 107, 0.14),
    0 4px 10px rgba(72, 210, 219, 0.10);
}

/* カード内サムネイルのゆっくりズーム(.omiso-lift の中の img) */
.omiso-lift img {
  transition: transform 0.6s var(--omiso-ease);
}
.omiso-lift:hover img {
  transform: scale(1.04);
}

/* リンクの下線がスッとのびるアニメーション(任意で .omiso-link) */
.omiso-link {
  background-image: linear-gradient(90deg, var(--omiso-rose), var(--omiso-teal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.35s var(--omiso-ease);
  text-decoration: none;
}
.omiso-link:hover {
  background-size: 100% 2px;
}

/* ----------------------------------------------------------
   5. ページ読み込み時のヒーローひと呼吸(CSSのみ)
   ヒーロー要素に .omiso-hero-in を付けると使えます
   ---------------------------------------------------------- */
@keyframes omisoHeroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.omiso-motion .omiso-hero-in {
  animation: omisoHeroIn 0.9s var(--omiso-ease) both;
}
html.omiso-motion .omiso-hero-in > * {
  animation: omisoHeroIn 0.9s var(--omiso-ease) both;
}
html.omiso-motion .omiso-hero-in > *:nth-child(2) { animation-delay: 0.12s; }
html.omiso-motion .omiso-hero-in > *:nth-child(3) { animation-delay: 0.24s; }
html.omiso-motion .omiso-hero-in > *:nth-child(4) { animation-delay: 0.36s; }

/* ----------------------------------------------------------
   6. アクセシビリティ: 動きを減らす設定を尊重
   (JS側でも停止しますが、CSSでも二重に保険)
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.omiso-motion [data-reveal],
  .omiso-glass-ready,
  .omiso-lift,
  .omiso-lift img,
  html.omiso-motion .omiso-hero-in,
  html.omiso-motion .omiso-hero-in > * {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}