@charset "utf-8";
/* CSS Document */

/* =========================================================
   STAGE EFFECT
   軽量版・PC / スマホ対応
========================================================= */

#stage-effect {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  background: #05000d;
}

/* コンテンツをエフェクトより前面へ */
#wrapper {
  position: relative;
  z-index: 1;
}


/* =========================================================
   SPOTLIGHT
========================================================= */

#stage-effect .beam {
  position: absolute;

  top: -40%;
  left: 50%;

  width: 18vw;
  height: 150vh;

  transform-origin: 50% 0;

  opacity: 0.8;

  filter: blur(5px);

  will-change: transform;
}


/* 色 */

#stage-effect .beam:nth-child(1) {
  background: linear-gradient(
    to bottom,
    rgba(255,0,130,0.9),
    rgba(255,0,130,0.3) 45%,
    transparent 100%
  );

  animation: beam01 5s ease-in-out infinite alternate;
}

#stage-effect .beam:nth-child(2) {
  background: linear-gradient(
    to bottom,
    rgba(0,180,255,0.9),
    rgba(0,180,255,0.3) 45%,
    transparent 100%
  );

  animation: beam02 6s ease-in-out infinite alternate;
}

#stage-effect .beam:nth-child(3) {
  background: linear-gradient(
    to bottom,
    rgba(180,0,255,0.9),
    rgba(180,0,255,0.3) 45%,
    transparent 100%
  );

  animation: beam03 8s ease-in-out infinite alternate;
}

#stage-effect .beam:nth-child(4) {
  background: linear-gradient(
    to bottom,
    rgba(0,255,140,0.9),
    rgba(0,255,140,0.3) 45%,
    transparent 100%
  );

  animation: beam04 6s ease-in-out infinite alternate;
}

#stage-effect .beam:nth-child(5) {
  background: linear-gradient(
    to bottom,
    rgba(255,220,0,0.9),
    rgba(255,220,0,0.3) 45%,
    transparent 100%
  );

  animation: beam05 9s ease-in-out infinite alternate;
}


/* =========================================================
   BEAM MOVEMENT
========================================================= */

@keyframes beam01 {
  0% {
    transform: translateX(-32vw) rotate(-40deg);
  }

  100% {
    transform: translateX(25vw) rotate(25deg);
  }
}

@keyframes beam02 {
  0% {
    transform: translateX(-15vw) rotate(-12deg);
  }

  100% {
    transform: translateX(35vw) rotate(40deg);
  }
}

@keyframes beam03 {
  0% {
    transform: translateX(20vw) rotate(18deg);
  }

  100% {
    transform: translateX(-25vw) rotate(-50deg);
  }
}

@keyframes beam04 {
  0% {
    transform: translateX(35vw) rotate(25deg);
  }

  100% {
    transform: translateX(-20vw) rotate(-18deg);
  }
}

@keyframes beam05 {
  0% {
    transform: translateX(-35vw) rotate(-25deg);
  }

  100% {
    transform: translateX(15vw) rotate(18deg);
  }
}


/* =========================================================
   AMBIENT LIGHT
   ※ blurを使わずradial-gradientだけで表現
========================================================= */

#stage-effect .ambient {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,0,120,0.3),
      transparent 70%
    ),
    radial-gradient(
      circle at 80% 25%,
      rgba(0,150,255,0.3),
      transparent 70%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(150,0,255,0.3),
      transparent 80%
    );

  animation: ambientMove 12s ease-in-out infinite alternate;
}


@keyframes ambientMove {
  0% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}


/* =========================================================
   STAGE LIGHTS
========================================================= */

#stage-effect .lights {
  position: absolute;
  inset: 0;

  display: grid;

  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);

  padding: 3vh 4vw;
}


/* ひとつひとつの光 */

#stage-effect .lights {
  position: absolute;
  inset: 0;

  display: grid;

  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);

  padding: 3vh 4vw;
}


/* 大きめのステージライト */

#stage-effect .light {
  width: 10px;
  height: 10px;

  justify-self: center;
  align-self: center;

  border-radius: 50%;

  background: #fff;

  opacity: 0.5;

  /*
    大きさ・輝きを前回寄りに
    ただしshadowは5段→3段に減らして軽量化
  */
  box-shadow:
    0 0 7px rgba(255,255,255,1),
    0 0 20px currentColor,
    0 0 45px currentColor;

  animation:
    lightBlink var(--duration) ease-in-out infinite alternate;

  animation-delay: var(--delay);
}


@keyframes lightBlink {

  0% {
    opacity: 0.25;
    transform: scale(0.3);
  }

  45% {
    opacity: 0.55;
    transform: scale(1.3);
  }

  55% {
    opacity: 1;
    transform: scale(1.7);
  }

  100% {
    opacity: 0.35;
    transform: scale(0.5);
  }

}


/* =========================================================
   CENTER LIGHT
========================================================= */

#stage-effect .center-light {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 30vw;
  height: 30vw;

  max-width: 400px;
  max-height: 400px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255,255,255,0.10) 0%,
    rgba(180,80,255,0.06) 60%,
    transparent 70%
  );

  animation: centerPulse 5s ease-in-out infinite alternate;
}


@keyframes centerPulse {

  0% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(0.85);
  }

  100% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.15);
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 810px) {

  #stage-effect {
    height: 100vh;
    height: 100dvh;
  }


  /* ビームを細くして負荷軽減 */

  #stage-effect .beam {
    width: 24vw;
    height: 140vh;

    opacity: 0.45;
  }


  /* ライトを少なく */

  #stage-effect .lights {

    /* スマホは16個 */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

    padding: 4vh 5vw;
  }


  #stage-effect .light {

    /*
      スマホでも光源そのものは大きめ
    */
    width: 7px;
    height: 7px;

    box-shadow:
      0 0 6px rgba(255,255,255,1),
      0 0 18px currentColor,
      0 0 38px currentColor;
  }

}


  /* 中央光も小さく */

  #stage-effect .center-light {
    width: 45vw;
    height: 45vw;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  #stage-effect .beam,
  #stage-effect .ambient,
  #stage-effect .light,
  #stage-effect .center-light,
  #stage-effect .flash {
    animation: none !important;
  }

}