/* 登場アニメーション（v3.0.0） */

:root {
  --e-slam: cubic-bezier(.2, .9, .25, 1.35);
  --e-settle: cubic-bezier(.22, 1, .36, 1);
  --e-quiet: cubic-bezier(.22, .61, .36, 1);
}

/* ── トップ: ロゴ叩きつけ ── */
@keyframes top-logo-slam {
  0%   { opacity: 0; transform: scale(2.3) rotate(10deg); }
  38%  { opacity: 1; transform: scale(1.03) rotate(-3.8deg); }
  62%  { opacity: 1; transform: scale(.982) rotate(-1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(-2.4deg); }
}

@keyframes top-impact-ring {
  0%   { opacity: .55; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes top-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes top-favicon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes top-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@keyframes app-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2px, 1px); }
  75%      { transform: translate(2px, -1px); }
}

.top-hero-logo {
  opacity: 0;
  animation: top-logo-slam .4s var(--e-slam) .06s both;
}

.top-hero-logo-wrap {
  position: relative;
  display: inline-block;
}

.top-hero-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 2px solid rgba(180, 100, 220, .35);
  opacity: 0;
  pointer-events: none;
  animation: top-impact-ring .28s ease-out .38s both;
}

.top-hero-favicon {
  opacity: 0;
  animation: top-fade-up 1.1s var(--e-settle) .5s both,
             top-favicon-float 4.2s ease-in-out 1.6s infinite;
}

.top-hero-cta {
  opacity: 0;
  animation: top-fade-up 1.1s var(--e-settle) .5s both;
}

.top-hero-invite {
  opacity: 0;
  animation: top-fade-up 1.1s var(--e-settle) .5s both;
}

.top-guide .section-title,
#guide-sections .guide-phase:first-child {
  opacity: 0;
  animation: top-fade-up 1.1s var(--e-settle) .5s both;
}

.top-scroll-cue {
  animation: top-scroll-bounce 1.6s ease-in-out infinite;
}

#app.top-impact-shake {
  animation: app-shake .12s ease-out .38s both;
}

/* ── 画面入場 ── */
.screen-enter {
  animation: top-fade-up .28s var(--e-settle) both;
}

/* ── スクロール登場 ── */
html.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--e-settle), transform .8s var(--e-settle);
}

html.js-anim [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* ── スロット段階登場 ── */
.slot-stagger {
  opacity: 0;
  transform: translateY(16px);
  animation: top-fade-up .35s var(--e-settle) both;
}

/* ── reduced motion ── */
body.top-anim-done .top-hero-logo,
body.top-anim-done .top-hero-favicon,
body.top-anim-done .top-hero-cta,
body.top-anim-done .top-hero-invite,
body.top-anim-done .top-guide .section-title,
body.top-anim-done #guide-sections .guide-phase:first-child {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .top-hero-logo,
  .top-hero-favicon,
  .top-hero-cta,
  .top-hero-invite,
  .top-guide .section-title,
  #guide-sections .guide-phase:first-child,
  .top-scroll-cue,
  .top-hero-logo-wrap::after,
  #app.top-impact-shake,
  .screen-enter,
  .slot-stagger {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.js-anim [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}