@charset "UTF-8";

/* ==========================================================================
   ページ演出アニメーション
   ・初回表示時：カード枠→左右カラム→KV→バッジ/ナビの順にポップイン/スライドイン
   ・常時：星のきらめき、ロケット/UFOの浮遊、惑星の揺れ、CTAの呼吸のような拡縮
   style.css を上書きしないよう、position/top/left 等は据え置きで
   transform・opacity のみをアニメーションさせる
   ========================================================================== */

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-70px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(70px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-12deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes dropIn {
  0% {
    opacity: 0;
    transform: translateY(-34px);
  }
  60% {
    opacity: 1;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.92);
  }
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(-4deg);
  }
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}

@keyframes ringWiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

/* ---- 全体の骨格：枠→左右カラム→中央 ---- */
.l-card-frame {
  animation: fadeScaleIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.l-side-left {
  animation: slideInLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.l-side-right {
  animation: slideInRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.c-kv {
  animation: popIn 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}

/* KVが出そろってから下部コンテンツをフェードアップ。
   fill-mode は backwards（遅延中だけ0%を適用し、終了後は素の状態に戻す）。
   both だと終了後も transform が残り、合成レイヤー化したまま固定されてしまう */
.c-schedule {
  animation: riseIn 0.85s ease-out 1.8s backwards;
}

/* ---- KV上のバッジ・メニュー ---- */
.c-menu-btn {
  animation: popIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both,
    breathe 3.2s ease-in-out 2.7s infinite;
}

.c-kv__rainbow {
  animation: fadeScaleIn 0.85s ease-out 1.55s both;
}

.c-kv__badge-faq {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s backwards;
}

.c-kv__badge-tickets {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s backwards;
}

/* ---- 左カラムの装飾・コンテンツ ---- */
.deco-planet {
  animation: popIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both,
    floatY 4s ease-in-out 2s infinite;
}

.deco-bottom-left {
  animation: popIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}

.deco-stars {
  animation: twinkle 3.4s ease-in-out 1.8s infinite;
}

.deco-ufo {
  animation: floatY 4.4s ease-in-out 1.8s infinite;
}

/* 左カラムの風船（fv_item07〜10）。fv_item10（balloon04）のみ登場後は固定、他はふわふわ浮遊 */
.deco-balloon01 {
  animation: popIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s both,
    floatY 4.4s ease-in-out 1.8s infinite;
}

.deco-balloon02 {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both,
    floatY 4s ease-in-out 2s infinite;
}

.deco-balloon03 {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s both,
    floatY 3.8s ease-in-out 2.2s infinite;
}

.deco-balloon04 {
  animation: popIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}

.side-logo {
  animation: dropIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

.side-line {
  animation: fadeScaleIn 0.7s ease-out both;
}

.side-line:nth-of-type(1) {
  animation-delay: 1.05s;
}

.side-line:nth-of-type(2) {
  animation-delay: 1.4s;
}

.share-block {
  animation: riseIn 0.85s ease-out 1.25s both;
}

.share-list a:hover {
  animation: none;
}

/* ---- 右カラムの装飾・ナビ・CTA ---- */
.deco-sparkle {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both,
    twinkle 2.9s ease-in-out 1.55s infinite;
}

.deco-rocket {
  animation: slideInLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both,
    floatY 5s ease-in-out 1.8s infinite;
}

.deco-title {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

/* 右カラムの風船（fv_item11〜14）。fv_item14（balloon08）のみ登場後は固定、他はふわふわ浮遊 */
.deco-balloon05 {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s both,
    floatY 4.2s ease-in-out 1.8s infinite;
}

.deco-balloon06 {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both,
    floatY 4.6s ease-in-out 2s infinite;
}

.deco-balloon07 {
  animation: popIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s both,
    floatY 3.8s ease-in-out 2.2s infinite;
}

.deco-balloon08 {
  animation: popIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s both;
}

.g-nav ul li {
  animation: slideInRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.g-nav ul li:nth-child(1) {
  animation-delay: 1s;
}

.g-nav ul li:nth-child(2) {
  animation-delay: 1.15s;
}

.g-nav ul li:nth-child(3) {
  animation-delay: 1.3s;
}

.g-nav ul li:nth-child(4) {
  animation-delay: 1.45s;
}

.g-nav ul li:nth-child(5) {
  animation-delay: 1.6s;
}

.g-nav ul li:nth-child(6) {
  animation-delay: 1.75s;
}

.g-nav ul li:nth-child(7) {
  animation-delay: 1.9s;
}

.g-nav li.is-current a::before {
  animation: ringWiggle 3.4s ease-in-out 2.6s infinite;
  transform-origin: center;
}

.cta-list .cta-btn {
  animation: popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.cta-list .cta-btn:nth-child(1) {
  animation-delay: 1.8s;
}

.cta-list .cta-btn:nth-child(2) {
  animation-delay: 2s;
}

.cta-list .cta-btn:hover {
  animation-play-state: paused;
}

/* ---- 下部コンテンツ：各セクションの見出し・コンテンツをスクロールでフェードアップ ----
   IntersectionObserver（main.js）が要素に .js-reveal を付与し、画面に入ったら
   .is-inview を追加する。一度表示された要素は監視を外すため戻りアニメーションはしない */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 動きを抑えたい環境への配慮 ---- */
@media (prefers-reduced-motion: reduce) {
  .l-card-frame,
  .l-side-left,
  .l-side-right,
  .c-kv,
  .c-schedule,
  .c-menu-btn,
  .c-kv__rainbow,
  .c-kv__badge-faq,
  .c-kv__badge-tickets,
  .deco-planet,
  .deco-bottom-left,
  .deco-stars,
  .deco-ufo,
  .deco-balloon01,
  .deco-balloon02,
  .deco-balloon03,
  .deco-balloon04,
  .deco-balloon05,
  .deco-balloon06,
  .deco-balloon07,
  .deco-balloon08,
  .side-logo,
  .side-line,
  .share-block,
  .deco-sparkle,
  .deco-rocket,
  .deco-title,
  .g-nav ul li,
  .g-nav li.is-current a::before,
  .cta-list .cta-btn,
  .js-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}