/* ==================================================
   Scroll Action
   一度だけ発火する軽量スクロールアニメーション
================================================== */

/* --------------------------------------------------
   共通
-------------------------------------------------- */
html.js :is(
  .a-fadein,
  .a-toup,
  .a-todown,
  .a-toleft,
  .a-toright,
  .a-fadein--blur,
  .a-blur,
  .a-skew,
  .a-popup,
  .a-shutter
) {
  --a-duration: .9s;
  --a-delay: 0s;
  --a-ease: cubic-bezier(.25, .46, .45, .94);

  transition:
    opacity var(--a-duration) var(--a-ease) var(--a-delay),
    transform var(--a-duration) var(--a-ease) var(--a-delay);
}

/* アニメーション中だけ付与。完了後はJS側で外す */
html.js .e-willchange {
  will-change: opacity, transform;
}

html.js .a-scaledown.e-willchange img,
html.js .a-serial.e-willchange .a-serial__el,
html.js .a-serial--toup.e-willchange .a-serial__el,
html.js .a-serial--skew.e-willchange .a-serial__el {
  will-change: opacity, transform;
}

/* --------------------------------------------------
   遅延
-------------------------------------------------- */
html.js .a-delay05 {
  --a-delay: .5s;
}

html.js .a-delay1 {
  --a-delay: 1s;
}

/* --------------------------------------------------
   フェード
-------------------------------------------------- */
html.js .a-fadein {
  opacity: 0;
}

html.js .a-fadein.e-active {
  opacity: 1;
}

/* --------------------------------------------------
   下から上
-------------------------------------------------- */
html.js .a-toup {
  opacity: 0;
  transform: translateY(50px);
}

html.js .a-toup.e-active {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------
   上から下
-------------------------------------------------- */
html.js .a-todown {
  opacity: 0;
  transform: translateY(-50px);
}

html.js .a-todown.e-active {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------
   左から右
-------------------------------------------------- */
html.js .a-toright {
  opacity: 0;
  transform: translateX(-50px);
}

html.js .a-toright.e-active {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------
   右から左
-------------------------------------------------- */
html.js .a-toleft {
  opacity: 0;
  transform: translateX(50px);
}

html.js .a-toleft.e-active {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------
   ぼかしながら表示
   filterは負荷があるので、大きな要素・大量使用は避ける
-------------------------------------------------- */
html.js .a-fadein--blur {
  opacity: 0;
  filter: blur(10px);

  transition:
    opacity var(--a-duration) var(--a-ease) var(--a-delay),
    filter var(--a-duration) var(--a-ease) var(--a-delay);
}

html.js .a-fadein--blur.e-active {
  opacity: 1;
  filter: blur(0);
}

/* ぼかしだけ解除したい場合 */
html.js .a-blur {
  filter: blur(10px);
  transition:
    filter var(--a-duration) var(--a-ease) var(--a-delay);
}

html.js .a-blur.e-active {
  filter: blur(0);
}

/* --------------------------------------------------
   斜めから出現
-------------------------------------------------- */
html.js .a-skew {
  opacity: 0;
  transform: translateY(50px) skewY(12deg);
}

html.js .a-skew.e-active {
  opacity: 1;
  transform: translateY(0) skewY(0);
}

/* --------------------------------------------------
   ポップアップ
-------------------------------------------------- */
html.js .a-popup {
  opacity: 0;
  transform: scale(.85);
  transform-origin: center;
}

html.js .a-popup.e-active {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------
   画像ズームアウト
   親要素に .a-scaledown を付ける
-------------------------------------------------- */
html.js .a-scaledown {
  overflow: hidden;
}

html.js .a-scaledown picture {
  display: block;
  width: 100%;
  height: 100%;
}

html.js .a-scaledown picture img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity 1s cubic-bezier(.25, .46, .45, .94) .15s,
    transform 1s cubic-bezier(.25, .46, .45, .94) .15s;
}

html.js .a-scaledown.e-active picture img {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------
   シャッター
-------------------------------------------------- */
html.js .a-shutter {
  position: relative;
  overflow: hidden;
  background: #803b2d;
  color: #fff;
}

html.js .a-shutter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/recruit/highschool-assets/img/common/bg--gradation.svg")
    left center / 300% no-repeat;

  transform: translateX(-101%);
  transition: transform .8s cubic-bezier(.77, 0, .175, 1);
  z-index: 1;
}

html.js .a-shutter.u-second::before {
  background-position: left -100px center;
  background-size: 200%;
}

html.js .a-shutter.e-active::before {
  transform: translateX(0);
}

html.js .a-shutter > span {
  position: relative;
  z-index: 2;
  color: #fff;
  transition: color .3s ease .35s;
}

html.js .a-shutter.e-active > span {
  color: #803b2d;
}

/* --------------------------------------------------
   シャッター：黒い面で文字を出現させる
-------------------------------------------------- */
html.js .a-shutter--reveal {
  position: relative;
  display: block;
  width: fit-content;
  overflow: hidden;
  color: #333;
}

html.js .a-shutter--reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #5cc5cb;
  transform: translateX(-101%);
  z-index: 2;
}

html.js .a-shutter--reveal > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  opacity: 0;
}

/* スクロールで発火 */
html.js .a-shutter--reveal.e-active::before {
  animation: shutter-reveal 1s cubic-bezier(.77, 0, .175, 1) forwards;
}

html.js .a-shutter--reveal.e-active > span {
  animation: shutter-text-reveal 1s linear forwards;
}

@keyframes shutter-reveal {
  0% {
    transform: translateX(-101%);
  }

  50% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(101%);
  }
}

@keyframes shutter-text-reveal {
  0%,
  49% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

/* --------------------------------------------------
   文字を順番に表示
   JSで文字を .a-serial__el に分割する前提
-------------------------------------------------- */
html.js :is(
  .a-serial,
  .a-serial--toup,
  .a-serial--skew
) {
  white-space: pre-wrap;
}

html.js .a-serial__el {
  display: inline-block;
  opacity: 0;

  transition:
    opacity .45s cubic-bezier(.25, .46, .45, .94),
    transform .45s cubic-bezier(.25, .46, .45, .94);
}

/* フェードのみ */
html.js .a-serial.e-active .a-serial__el {
  opacity: 1;
}

/* 下から上 */
html.js .a-serial--toup .a-serial__el {
  transform: translateY(15px);
}

html.js .a-serial--toup.e-active .a-serial__el {
  opacity: 1;
  transform: translateY(0);
}

/* 斜めから上 */
html.js .a-serial--skew .a-serial__el {
  transform: translateY(20px) skewY(20deg);
}

html.js .a-serial--skew.e-active .a-serial__el {
  opacity: 1;
  transform: translateY(0) skewY(0);
}

/* --------------------------------------------------
   動きを減らす設定への対応
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js :is(
    .a-fadein,
    .a-toup,
    .a-todown,
    .a-toleft,
    .a-toright,
    .a-fadein--blur,
    .a-blur,
    .a-skew,
    .a-popup,
    .a-shutter,
    .a-scaledown img,
    .a-serial__el
  ) {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}