@charset "UTF-8";

/* =========================================================
   TOP reveal
   既存レイアウトを壊さないように、.tr-reveal が付いた要素だけ動かす
========================================================= */

.tr-reveal {
  opacity: 0;
  transform: translate3d(0, var(--tr-distance, 0px), 0);
  filter: blur(var(--tr-blur, 0px));
  transition-property: opacity, transform, filter;
  transition-duration: var(--tr-duration, 900ms);
  transition-delay: var(--tr-delay, 0ms);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.tr-reveal[data-tr-kind='text'] {
  --tr-distance: 0px;
  --tr-blur: 10px;
  --tr-duration: 820ms;
}

.tr-reveal[data-tr-kind='media'] {
  --tr-distance: 48px;
  --tr-blur: 0px;
  --tr-duration: 980ms;
}

.tr-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* hover系との干渉を減らす */
.entrance-card.tr-reveal,
.gassan-link-card.tr-reveal,
.gassan-sns-link.tr-reveal,
.gn-listItem.tr-reveal {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 念のため、ボタンやリンクが隠れている間もレイアウトが崩れにくいように */
.gn-listItem.tr-reveal {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .tr-reveal,
  .tr-reveal[data-tr-kind='text'],
  .tr-reveal[data-tr-kind='media'] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}