/* ============================================================
   de-base.css — YAMATO Design Engine 基盤スタイル
   依存ゼロ。design-engine.js とセットで使う。
   CSS変数ファースト設計。JS が --de-* 変数を書き込み、CSSが描画する。
   ============================================================ */

:root {
  /* 触感の勘所（2026 Design Engineer の肌感覚をSoT化） */
  --de-micro: 160ms;                                   /* tap/scale フィードバック */
  --de-hover: 240ms;                                   /* hover 遷移 */
  --de-ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);    /* Linear系の満足感 */
  --de-ease-snap:   cubic-bezier(0.32, 0.72, 0, 1);    /* キビキビ */
  --de-ease-back:   cubic-bezier(0.68, -0.6, 0.32, 1.6); /* 跳ね（overshoot） */
}

/* ---- 1. Proximity / Dock magnification ---- */
.de-proximity {
  transform: scale(var(--de-scale, 1)) translate(var(--de-tx, 0), var(--de-ty, 0));
  transition: transform 90ms linear;       /* 短いlinearで物体っぽく */
  will-change: transform;
}

/* ---- 2. Magnetic（ボタンが軽く吸い寄せられる） ---- */
.de-magnetic {
  transform: translate(var(--de-tx, 0), var(--de-ty, 0));
  transition: transform 120ms var(--de-ease-smooth);
  will-change: transform;
}

/* ---- 3. Tilt（3D傾き） + Glow ---- */
.de-tilt {
  perspective: 1200px;
}
.de-tilt-inner {
  transform: rotateX(var(--de-rx, 0deg)) rotateY(var(--de-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 120ms var(--de-ease-smooth);
}

/* ---- 4. Spotlight card（境界グラデ追従） ---- */
.de-spotlight {
  position: relative;
  overflow: hidden;
  --de-mx: 50%;
  --de-my: 50%;
  --de-glow: rgba(255, 255, 255, 0.08);   /* 既定はごく薄く */
}
.de-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--de-mx) var(--de-my),  /* 大きく柔らかい光に */
    var(--de-glow),
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.55s ease;            /* ゆっくり灯る */
  pointer-events: none;
}
.de-spotlight:hover::before { opacity: 1; }

/* ---- 6. Scroll reveal（CSS Scroll-driven。非対応ブラウザはJS .de-in で代替） ---- */
.de-reveal {
  opacity: 0;
  transform: translateY(20px);    /* 控えめな上移動のみ。scale/blurは使わない */
}
@supports (animation-timeline: view()) {
  .de-reveal {
    animation: de-reveal-kf 1.1s var(--de-ease-smooth) both;
    animation-timeline: view();
    animation-range: entry 8% cover 42%;
  }
}
.de-reveal.de-in {  /* JSフォールバック（IntersectionObserver） */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s var(--de-ease-smooth),
              transform 0.9s var(--de-ease-smooth);
}
@keyframes de-reveal-kf {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 7. Text stagger（文字/単語ごと出現） ---- */
.de-stagger-unit {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(10px);   /* にじむ程度に控えめ */
  white-space: pre;        /* 半角スペース保持 */
}
.de-stagger.de-in .de-stagger-unit {
  animation: de-stagger-kf 0.95s var(--de-ease-smooth) both;
  animation-delay: var(--de-delay, 0ms);
}
@keyframes de-stagger-kf {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ---- View Transitions のデフォルトカーブ ---- */
::view-transition-group(*) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- アクセシビリティ：動きを減らす設定を尊重 ---- */
@media (prefers-reduced-motion: reduce) {
  .de-proximity, .de-magnetic, .de-tilt-inner {
    transform: none !important;
    transition: none !important;
  }
  .de-reveal, .de-stagger-unit {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
  .de-spotlight::before { display: none; }
  ::view-transition-group(*) { animation-duration: 0.01ms; }
}