/*
==================================================
AWARA MIKUNI LIONS CLUB
GLOBAL MOTION CSS v1.0

全ページ共通
・フェードイン
・スクロール表示
・カードホバー
・画像ホバー
・ボタンホバー
・動きを減らす設定に対応
==================================================
*/

/*
----------------------------------------
01 | HERO ANIMATION
----------------------------------------
*/

@keyframes amlc-hero-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
----------------------------------------
02 | SCROLL REVEAL
----------------------------------------

JavaScriptが有効な場合のみ
非表示からのアニメーションを使用。

JSが動かない環境では、
最初から通常表示される。
----------------------------------------
*/

@media (prefers-reduced-motion: no-preference) {

  html.amlc-motion-ready [data-amlc-reveal] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);

    transition:
      opacity .7s ease,
      transform .7s
        cubic-bezier(.22, 1, .36, 1);

    transition-delay:
      var(--amlc-motion-delay, 0ms);
  }

  html.amlc-motion-ready
  [data-amlc-reveal].amlc-is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /*
  TOP HERO
  */

  #amlc-top05 .am05-hero__content {
    animation:
      amlc-hero-enter
      .9s ease-out both;
  }

  #amlc-top05 .am05-hero__serve {
    animation:
      amlc-hero-enter
      1.1s .15s ease-out both;
  }

}

/*
----------------------------------------
03 | BUTTONS & CARDS
----------------------------------------
*/

@media (hover: hover) and (pointer: fine) {

  /*
  TOP BUTTON
  */

  #amlc-top05 .am05-button {
    transition:
      transform .3s ease,
      background-color .3s ease,
      color .3s ease,
      box-shadow .3s ease;
  }

  #amlc-top05 .am05-button:hover {
    transform: translateY(-3px);
    box-shadow:
      0 8px 20px rgba(8,46,97,.16);
  }

  /*
  TOP ACTIVITY CARD
  */

  #amlc-top05 .am05-action-card,
  #amlc-top05 .am05-activity-card {
    transition:
      transform .35s ease,
      box-shadow .35s ease;
  }

  #amlc-top05 .am05-action-card:hover,
  #amlc-top05 .am05-activity-card:hover {
    transform: translateY(-6px);

    box-shadow:
      0 12px 28px rgba(8,46,97,.13);
  }

  /*
  TOP CARD PHOTO
  */

  #amlc-top05 .am05-action-card__photo img {
    transition: transform .6s ease;
  }

  #amlc-top05
  .am05-action-card:hover
  .am05-action-card__photo img {
    transform: scale(1.05);
  }

  /*
  MEMBERS PHOTO
  */

  #amlc-top05 .am05-members__photo img {
    transition: transform .65s ease;
  }

  #amlc-top05 .am05-members__photo:hover img {
    transform: scale(1.04);
  }

  /*
  REPORT LIST
  */

  #amlc-top05 .am05-report {
    transition:
      background-color .3s ease,
      transform .3s ease;
  }

  #amlc-top05 .am05-report:hover {
    transform: translateX(4px);
    background: #eaf3fc;
  }

  /*
  04 COMMON COMPONENTS
  既存の色・サイズは変更しない
  */

  .amlc-button {
    transition:
      transform .3s ease,
      box-shadow .3s ease;
  }

  .amlc-button:hover {
    transform: translateY(-2px);
  }

}

/*
----------------------------------------
04 | ACCESSIBILITY
----------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

  html.amlc-motion-ready [data-amlc-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  #amlc-top05 .am05-hero__content,
  #amlc-top05 .am05-hero__serve {
    animation: none !important;
  }

  #amlc-top05 .am05-button,
  #amlc-top05 .am05-action-card,
  #amlc-top05 .am05-activity-card,
  #amlc-top05 .am05-report,
  .amlc-button {
    transition: none !important;
  }
}

/*
----------------------------------------
05 | PRINT
----------------------------------------
*/

@media print {

  html.amlc-motion-ready [data-amlc-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

}