@charset "UTF-8";

/*
 * 追加アニメーション専用ファイル
 * 却下時はindex.htmlからこのファイルとanimation.jsの読み込みを削除してください。
 */

@keyframes motion-header-drop {
  from { opacity:0; transform:translateY(-100%); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes motion-hero-copy {
  from { opacity:0; transform:translate3d(-70px,18px,0) skewX(-3deg); filter:blur(6px); }
  to { opacity:1; transform:none; filter:blur(0); }
}
@keyframes motion-hero-person {
  from { opacity:0; transform:translate3d(80px,35px,0) scale(.92); filter:blur(5px); }
  to { opacity:1; transform:none; filter:blur(0); }
}
@keyframes motion-line-pulse {
  0%,100% { transform:translateX(-50%) scaleX(1); filter:drop-shadow(0 0 0 rgba(215,157,20,0)); }
  50% { transform:translateX(-50%) scaleX(1.35); filter:drop-shadow(0 0 7px rgba(215,157,20,.55)); }
}
@keyframes motion-arrow {
  0%,100% { transform:translateY(-50%) translateX(0); }
  50% { transform:translateY(-50%) translateX(9px); }
}
@keyframes motion-arrow-left {
  0%,100% { transform:translateY(-50%) translateX(0); }
  50% { transform:translateY(-50%) translateX(-9px); }
}
@keyframes motion-shimmer {
  from { transform:translateX(-145%) skewX(-22deg); }
  to { transform:translateX(280%) skewX(-22deg); }
}

.motion-enabled .header { animation:motion-header-drop .75s cubic-bezier(.2,.85,.25,1) both; }
.motion-enabled .hero__message { animation:motion-hero-copy 1.15s .18s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .hero__portrait { animation:motion-hero-person 1.25s .32s cubic-bezier(.16,1,.3,1) both; will-change:transform; }
.motion-enabled .hero__background img { transition:transform .25s linear; will-change:transform; }
.motion-enabled .renewal-hero h1 { animation:motion-hero-copy 1.15s .2s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .renewal-hero__inner p { animation:motion-hero-copy 1.15s .38s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .renewal-hero__portrait { animation:motion-hero-person 1.25s .32s cubic-bezier(.16,1,.3,1) both; }

/* スクロールで現れる要素 */
.motion-enabled .motion-item { opacity:0; transform:translate3d(0,70px,0) scale(.96); filter:blur(5px); transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .7s ease; }
.motion-enabled .motion-item--left { transform:translate3d(-80px,20px,0) rotate(-1.5deg); }
.motion-enabled .motion-item--right { transform:translate3d(80px,20px,0) rotate(1.5deg); }
.motion-enabled .motion-item.motion-in { opacity:1; transform:none; filter:blur(0); }
.motion-enabled .motion-delay-1 { transition-delay:.08s; }
.motion-enabled .motion-delay-2 { transition-delay:.16s; }
.motion-enabled .motion-delay-3 { transition-delay:.24s; }
.motion-enabled .motion-delay-4 { transition-delay:.32s; }

.motion-enabled .section-title::after { transform-origin:center; animation:motion-line-pulse 2.4s ease-in-out infinite; }
.motion-enabled .blog-card,.motion-enabled .activity-card,.motion-enabled .supporter__link { will-change:transform; }
.motion-enabled .blog-card:hover { transform:translateY(-14px) scale(1.025) rotate(.2deg); box-shadow:0 24px 48px rgba(2,25,61,.2); }
.motion-enabled .activity-card:hover { transform:translateY(-8px); box-shadow:0 22px 44px rgba(2,25,61,.2); }
/* 差し替え画像の表示を保つため、活動一覧の背景画像はhoverで拡大しない */
.motion-enabled .activity-card:hover .activity-card__visual img { transform:none; }
.motion-enabled .activity-card__arrow { animation:motion-arrow 1.5s ease-in-out infinite; }
.motion-enabled .activity-card--right .activity-card__arrow { animation-name:motion-arrow-left; }

/* ボタンを横切る光 */
.motion-enabled .button,.motion-enabled .blog__button,.motion-enabled .supporter__link { position:relative; overflow:hidden; }
.motion-enabled .button::before,.motion-enabled .blog__button::before,.motion-enabled .supporter__link::before { content:""; position:absolute; z-index:3; top:-25%; bottom:-25%; left:0; width:22%; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-145%) skewX(-22deg); }
.motion-enabled .button:hover::before,.motion-enabled .blog__button:hover::before,.motion-enabled .supporter__link:hover::before { animation:motion-shimmer .75s ease-out; }
.motion-enabled .supporter__link:hover { transform:translateY(-9px) scale(1.025); filter:brightness(1.08) saturate(1.08); box-shadow:0 18px 35px rgba(2,25,61,.22); }
.motion-enabled .sns__link:hover { transform:translateY(-9px) rotate(8deg) scale(1.14); }
.motion-enabled .renewal-title::after { transform-origin:center; animation:motion-line-pulse 2.4s ease-in-out infinite; }
.motion-enabled .policy-card:hover,.motion-enabled .social-button:hover { transform:translateY(-10px); box-shadow:0 20px 38px rgba(2,25,61,.16); }
.motion-enabled .policy-card:hover em,.motion-enabled .social-button:hover .social-button__arrow { transform:translateX(7px); }

@media (prefers-reduced-motion:reduce) {
  .motion-enabled *,.motion-enabled *::before,.motion-enabled *::after { animation:none!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .motion-enabled .motion-item { opacity:1; transform:none; filter:none; }
}