/**
 * インタラクション
 * トランジション、hover 演出、カーソル、pointer-events。
 * 見た目そのものではなく「操作したときの反応」を扱う。
 */

/**
 * Transitions
 * 遷移の指定だけを持ち、見た目の変化は持たない。
 * hover時の演出は下の Hover セクションのクラスを使う。
 * 「hoverで薄くなる」挙動が欲しい場合は .hover-fade を使う。
 */

/* 速度とイージングは変数で上書きできる。tracking と同じ方式。 */
:root {
  --duration: 200ms;
  --easing: ease;
}

.transition-opacity {
  transition: opacity var(--duration) var(--easing);
}

/* transform / translate / scale / rotate をまとめて対象にする。
 * 16_animations.css が translate を、07_position.css の中央固定が transform を
 * 使うため、両方を並べている。 */
.transition-transform {
  transition:
    transform var(--duration) var(--easing),
    translate var(--duration) var(--easing),
    scale var(--duration) var(--easing),
    rotate var(--duration) var(--easing);
}
.transition-colors {
  transition:
    color var(--duration) var(--easing),
    background-color var(--duration) var(--easing),
    border-color var(--duration) var(--easing);
}
.transition-shadow {
  transition: box-shadow var(--duration) var(--easing);
}
.transition-all {
  transition: all var(--duration) var(--easing);
}

/**
 * Hover
 * .hover-fade は遷移と hover 時の変化をセットで持つ。
 * .hover-zoom は自身に overflow: hidden を持つため、リンク1つに直接付けられる。
 *   ex) <a class="hover-zoom"><img src="..."></a>
 * .hover-shadow-up の浮き上がりは transform を使う。アニメーション側が独立した
 * translate を使うため、両者は打ち消し合わず合成される。
 */
.hover-fade {
  transition: opacity var(--duration) var(--easing);

  &:hover {
    opacity: 0.85;
    text-decoration: none;
  }
}

.hover-zoom {
  overflow: hidden;

  & img,
  & video {
    transition: scale 400ms var(--easing);
  }

  &:hover img,
  &:hover video {
    scale: 1.05;
  }
}

.hover-shadow-up {
  transition:
    box-shadow var(--duration) var(--easing),
    transform var(--duration) var(--easing);

  &:hover {
    transform: translateY(-4px);
    box-shadow:
      0 4px 8px hsl(from var(--shadow-color) h s l / 6%),
      0 8px 16px hsl(from var(--shadow-color) h s l / 12%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hover-zoom img,
  .hover-zoom video,
  .hover-shadow-up {
    transition: none;
  }
  .hover-zoom:hover img,
  .hover-zoom:hover video {
    scale: 1;
  }
  .hover-shadow-up:hover {
    transform: none;
  }
}

/**
 * Pointer Events
 * 装飾レイヤーのクリックを透過させる。-z-1 と対で使うことが多い。
 */
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}

/**
 * Cursor
 */
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}