/* ============================================================
   占術ラボ ストア共通 モーション / フォーカス / タップ領域 CSS
   ------------------------------------------------------------
   監査で確定した「上品で控えめなモーション」を全ページ共通で適用する。
   各ページの <head> で下記のように読み込む想定（読み込み順はページ側の
   インライン<style>より後）。
     <link rel="stylesheet" href="/assets/store-motion.css?v=20260730a">
   ページ側の :root で定義済みの --gold 等の CSS変数をそのまま参照する
   （このファイル単体では変数を再定義しない）。

   方針:
   - 派手にしない。不透明度・微小な移動・低速回転・穏やかなグロー中心。
   - keyframesアニメーションは @media (prefers-reduced-motion: no-preference)
     の中でのみ発火させる。ホバー等のtransitionはreduce時にtransition:noneや
     display:noneで明示的に無効化する。
   ============================================================ */

/* ------------------------------------------------------------
   (a) ヒーロー入場演出
   .store-hero配下の主要要素を0.08s刻みでフェード+わずかに上昇させながら表示する。
   ------------------------------------------------------------ */
@keyframes heroUp{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: no-preference){
  .store-hero .celestial,
  .store-hero .brand-eng,
  .store-hero h1,
  .store-hero .sub,
  .store-hero .hero-cta,
  .store-hero .trust{
    animation:heroUp .7s ease both;
  }
  .store-hero .celestial{animation-delay:0s}
  .store-hero .brand-eng{animation-delay:.08s}
  .store-hero h1{animation-delay:.16s}
  .store-hero .sub{animation-delay:.24s}
  .store-hero .hero-cta{animation-delay:.32s}
  .store-hero .trust{animation-delay:.4s}
}

/* ------------------------------------------------------------
   (b) 黄道リングの低速回転 / 月の明滅
   .moonはbox-shadowのみをアニメーションし、既存のtransform（中央配置の
   translate）は上書きしない＝位置ずれを起こさない。
   ------------------------------------------------------------ */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes moonGlow{
  0%,100%{box-shadow:0 0 40px rgba(232,207,145,.45),0 0 90px rgba(201,164,92,.25)}
  50%{box-shadow:0 0 56px rgba(232,207,145,.65),0 0 108px rgba(201,164,92,.4)}
}
@media (prefers-reduced-motion: no-preference){
  .zodiac.r2{animation:spin 140s linear infinite}
  .zodiac.r3{animation:spin 100s linear infinite reverse}
  .ticks{animation:spin 220s linear infinite}
  .moon{animation:moonGlow 6s ease-in-out infinite}
}

/* ------------------------------------------------------------
   (c) reveal-on-scroll
   store.js の initReveal() が IntersectionObserver で .is-visible を
   付与する。IntersectionObserver非対応 / reduced-motion時はJS側で即時
   .is-visible を付与するが、CSS側でも reduce時は常時表示にしておく
   （JSが動く前の一瞬の非表示状態を作らない保険）。
   ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------------
   (d) カタログ絞り込みのトランジション
   (e) 商品カードホバー
   .prod-cardは.revealの対象にもなるため、同一要素に付与された場合は
   ここで定義するtransition（カード固有の.25s）が後勝ちで優先される
   （.reveal記述より後段に置くことで意図的にそうしている）。
   ------------------------------------------------------------ */
.prod-card{transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.prod-card.is-hidden{opacity:0;transform:scale(.96);pointer-events:none}
.prod-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(8,11,31,.5);border-color:var(--gold)}
@media (prefers-reduced-motion: reduce){
  .prod-card{transition:none}
  .prod-card:hover{transform:none}
}

/* ------------------------------------------------------------
   (f) カート件数バッジのバンプ
   store.js の updateBadges() が件数増加時に .bump を付与する
   （reflowでアニメーションを再始動させる）。
   ------------------------------------------------------------ */
@keyframes badgePop{
  0%{transform:scale(1)}
  40%{transform:scale(1.35)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: no-preference){
  .cart-count.bump{animation:badgePop .4s ease}
}

/* ------------------------------------------------------------
   (g) CTAシャイン
   hover / focus-visible時に光帯が一度だけ流れる。overflow:hiddenで
   ボタン外にはみ出させない。
   ------------------------------------------------------------ */
.cta{overflow:hidden}
.cta::before{
  content:"";
  position:absolute;
  top:-10%;
  left:-60%;
  width:34%;
  height:120%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);
  pointer-events:none;
}
@keyframes sheen{
  from{left:-60%}
  to{left:130%}
}
@media (prefers-reduced-motion: no-preference){
  .cta:hover::before,.cta:focus-visible::before{animation:sheen .9s ease}
}
@media (prefers-reduced-motion: reduce){
  .cta::before{display:none}
}

/* ------------------------------------------------------------
   (h) フォーカス可視化（a11y）
   既存の `:hover,:focus-visible{...outline:none}` をfocus-visible時のみ
   明確なリングで上書きする。同specificityでの後勝ちに依存せず、
   !importantで確実に既存のoutline:noneへ勝つ。
   ------------------------------------------------------------ */
.card-btn-add:focus-visible,
.main-nav a:focus-visible,
.faq summary:focus-visible,
.car-btn:focus-visible,
.chip:focus-visible{
  outline:2px solid var(--gold-bright) !important;
  outline-offset:2px;
}

/* ------------------------------------------------------------
   (i) タップ領域の拡張
   ------------------------------------------------------------ */
.car-dot{position:relative}
.car-dot::before{content:"";position:absolute;inset:-10px}
.cart-remove::before{content:"";position:absolute;inset:-10px}
.chip{padding:11px 20px}

/* ------------------------------------------------------------
   (j) .features のタブレット2カラム（600〜879px）
   880px以上は既存スタイルの3カラムのまま。
   ------------------------------------------------------------ */
@media(min-width:600px) and (max-width:879px){
  .features{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------
   (k) スムーズスクロールのガード
   各ページ側の無条件 html{scroll-behavior:smooth} は別作業で削除される
   想定。ここでreduced-motion時は無効になる版を定義する。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
