/* =========================================================
   LUNATe motion effects v4
   - トップコピー3段の順次表示を追加
   - BANDコピーの遅延表示を追加
   - 点滅系ではなく、暗闇から浮かぶ演出に限定
   ========================================================= */

@keyframes lunate-star-drift{
  0%{
    background-position:0 0;
    opacity:.075;
  }
  45%{
    opacity:.145;
  }
  100%{
    background-position:96px -128px;
    opacity:.095;
  }
}

@keyframes lunate-logo-aura{
  0%,100%{
    transform:translate3d(-8px,0,0) scale(.94);
    opacity:.38;
    filter:blur(13px);
  }
  48%{
    transform:translate3d(10px,-3px,0) scale(1.18);
    opacity:.86;
    filter:blur(20px);
  }
}

@keyframes lunate-line-glow{
  0%,100%{
    box-shadow:0 0 0 rgba(126,168,255,0);
    border-bottom-color:rgba(225,235,255,.30);
  }
  50%{
    box-shadow:0 0 24px rgba(126,168,255,.26);
    border-bottom-color:rgba(225,235,255,.60);
  }
}

@keyframes lunate-title-breathe{
  0%,100%{
    text-shadow:
      0 2px 18px rgba(0,0,0,.56),
      0 0 16px rgba(215,228,255,.12);
  }
  50%{
    text-shadow:
      0 2px 18px rgba(0,0,0,.56),
      0 0 32px rgba(155,190,255,.36),
      0 0 62px rgba(80,140,255,.16);
  }
}

@keyframes lunate-moon-breathe{
  0%{
    transform:translate3d(0,0,0) scale(1);
    opacity:.48;
    filter:contrast(1.06) brightness(1);
  }
  100%{
    transform:translate3d(24px,-15px,0) scale(1.055);
    opacity:.70;
    filter:contrast(1.18) brightness(1.12);
  }
}

@keyframes lunate-hero-breathe{
  0%{
    transform:translate3d(0,0,0) scale(1);
    filter:saturate(.92) contrast(1.02) brightness(.96);
  }
  100%{
    transform:translate3d(-18px,-10px,0) scale(1.035);
    filter:saturate(1.06) contrast(1.08) brightness(1.07);
  }
}

@keyframes lunate-hero-light{
  0%,100%{
    opacity:.20;
    transform:translate3d(-10%,0,0) scale(1);
  }
  48%{
    opacity:.58;
    transform:translate3d(8%,-2%,0) scale(1.08);
  }
}

@keyframes lunate-photo-breathe{
  0%,100%{
    box-shadow:0 14px 26px rgba(0,0,0,.25),0 0 0 8px rgba(255,255,255,.018);
  }
  50%{
    box-shadow:0 16px 32px rgba(0,0,0,.30),0 0 20px rgba(126,168,255,.16),0 0 0 8px rgba(255,255,255,.024);
  }
}

body:before{
  animation:lunate-star-drift 34s ease-in-out infinite alternate;
  will-change:background-position, opacity;
}

.logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  isolation:isolate;
}

.logo:before{
  content:"";
  position:absolute;
  left:-32px;
  right:-36px;
  top:-24px;
  bottom:-26px;
  border-radius:999px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 52% 50%, rgba(236,246,255,.62) 0%, rgba(126,168,255,.36) 32%, rgba(75,120,220,.16) 52%, rgba(126,168,255,0) 76%);
  animation:lunate-logo-aura 6.8s ease-in-out infinite;
}

.header .inner{
  animation:lunate-line-glow 8.5s ease-in-out infinite;
}

.page-title,
.hero-v20-title{
  animation:lunate-title-breathe 9s ease-in-out infinite;
}

.hero-small:before{
  animation:lunate-moon-breathe 24s ease-in-out infinite alternate;
  transform-origin:center center;
  will-change:transform, opacity, filter;
}

.hero-v20-visual{
  isolation:isolate;
}

.hero-v20-visual:before{
  background:
    radial-gradient(circle at 18% 24%, rgba(205,225,255,.30) 0%, rgba(126,168,255,.15) 20%, rgba(126,168,255,0) 46%),
    radial-gradient(circle at 58% 18%, rgba(255,255,255,.20) 0%, rgba(126,168,255,.08) 18%, rgba(126,168,255,0) 42%);
  animation:lunate-hero-light 10.5s ease-in-out infinite;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -120px 160px rgba(1,3,7,.42),
    inset 42px 0 90px rgba(1,3,7,.18),
    inset -42px 0 90px rgba(1,3,7,.16);
}

.hero-v20-visual img{
  animation:lunate-hero-breathe 32s ease-in-out infinite alternate;
  transform-origin:center center;
  will-change:transform, filter;
}

.photo{
  animation:lunate-photo-breathe 10s ease-in-out infinite;
}

.photo img,
.member img,
.gallery-main img,
.gallery-side img{
  backface-visibility:hidden;
}



/* =========================================================
   v7: top copy staged reveal
   「月の」がゆっくり出終わってから「裏側で」、その後「鳴る音」を浮かび上がらせる
   ========================================================= */
@keyframes lunate-copy-rise{
  0%{
    opacity:0;
    transform:translate3d(0,22px,0);
    filter:blur(7px);
    text-shadow:0 0 0 rgba(126,168,255,0);
  }
  62%{
    opacity:1;
    filter:blur(.4px);
    text-shadow:0 0 28px rgba(170,204,255,.30);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}

@keyframes lunate-copy-afterglow{
  0%,100%{
    opacity:.10;
    transform:translate3d(-10%,2%,0) scale(.94);
  }
  50%{
    opacity:.36;
    transform:translate3d(8%,-3%,0) scale(1.08);
  }
}

.hero-v20-title .hero-title-line{
  opacity:0;
  transform:translate3d(0,22px,0);
  filter:blur(7px);
  animation:lunate-copy-rise 1.65s cubic-bezier(.16,.68,.16,1) forwards;
  will-change:opacity, transform, filter;
}

.hero-v20-title .line-1{animation-delay:.30s;}
.hero-v20-title .line-2{animation-delay:2.05s;}
.hero-v20-title .line-3{animation-delay:3.80s;}

.hero-v20-copy:before{
  content:"";
  position:absolute;
  left:-12%;
  top:4%;
  width:74%;
  height:52%;
  pointer-events:none;
  z-index:-1;
  border-radius:999px;
  background:radial-gradient(circle at 48% 50%, rgba(220,238,255,.40) 0%, rgba(126,168,255,.18) 38%, rgba(126,168,255,0) 74%);
  filter:blur(28px);
  opacity:.10;
  animation:lunate-copy-afterglow 8.4s ease-in-out 3.1s infinite;
}

/* =========================================================
   v7: scroll reveal for BAND concept copy
   v8: QWHD初期表示では出さず、少しスクロールしてから「そう・・・・新月のような存在」を遅れて出す
   ========================================================= */
@keyframes lunate-concept-delay-reveal{
  0%{
    opacity:0;
    transform:translate3d(0,18px,0);
    filter:blur(9px);
    letter-spacing:.16em;
  }
  68%{
    opacity:1;
    filter:blur(.5px);
    text-shadow:
      0 0 24px rgba(126,168,255,.32),
      0 0 54px rgba(126,168,255,.16);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
    letter-spacing:.045em;
  }
}


.concept-reveal-trigger{
  display:block;
  width:1px;
  height:1px;
  margin-top:16px;
  pointer-events:none;
}

.js-motion .band-copy-title .concept-reveal-delay{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,18px,0);
  filter:blur(9px);
  font-size:39px;
}

.js-motion .band-copy-title.is-inview .concept-reveal-delay{
  animation:lunate-concept-delay-reveal 1.35s cubic-bezier(.16,.72,.18,1) .58s forwards;
}

.band-copy-title .concept-reveal-delay{
  font-size:39px;
}

.band-copy-title{
  position:relative;
  isolation:isolate;
}

.band-copy-title:after{
  content:"";
  position:absolute;
  left:-10%;
  bottom:18%;
  width:72%;
  height:34%;
  pointer-events:none;
  z-index:-1;
  border-radius:999px;
  background:radial-gradient(circle at 52% 50%, rgba(126,168,255,.22) 0%, rgba(126,168,255,.09) 38%, rgba(126,168,255,0) 72%);
  filter:blur(24px);
  opacity:0;
  transform:translate3d(-8%,6%,0) scale(.88);
  transition:opacity 1.2s ease .9s, transform 1.6s ease .9s;
}

.band-copy-title.is-inview:after{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

@media(max-width:640px){
  body:before{
    animation-duration:44s;
  }

  .logo:before{
    left:-22px;
    right:-22px;
    top:-16px;
    bottom:-18px;
    opacity:.86;
  }

  .hero-v20-visual img{
    animation-duration:42s;
  }

  .photo{
    animation:none;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}


/* v5 reduced motion fallback */
@media(prefers-reduced-motion:reduce){
  .hero-v20-title .hero-title-line,
  .js-motion .band-copy-title .concept-reveal-delay{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .hero-v20-copy:before,
  .band-copy-title:after{
    display:none !important;
  }
}