:root {
  --bg: #000000;
  --text: #f5f8ff;
  --muted: #bcc7d6;
  --cyan: #a8efff;
  font-family: "Avenir Next", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 黒背景にロゴ＋COMING SOON を画面中央配置、著作権表記を最下部に置く */
.teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  /* viewport-fit=cover なので、下端はホームインジケータ分を足して確保する */
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* 上下 auto マージンで余白を等分＝著作権表記より上の領域で中央寄せ。フロー内に留めることで、
   低背ビューポートでは余白が 0 に潰れるだけになり、絶対配置のような重なりが起こらない */
.teaser-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: auto 0;
}

.teaser-logo {
  width: min(72vw, 420px);
  height: auto;
  filter: drop-shadow(0 0 16px rgba(157, 233, 255, 0.25))
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}

.coming-soon {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.5em;
  /* 末尾の字間ぶん右に寄るのを打ち消す。折り返した場合は 1 行目にしか効かないので
     text-align でも中央を担保する */
  text-indent: 0.5em;
  text-align: center;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(168, 239, 255, 0.45);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.teaser-copyright {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 767px) {
  .teaser-logo {
    width: min(78vw, 320px);
  }
}

/* 狭幅（ページズーム等で実効ビューポートが 340px を割る場合）。COMING SOON は
   letter-spacing 0.5em ＋ 11 文字で最小幅が大きく、そのままだと横にはみ出す */
@media (max-width: 339px) {
  .coming-soon {
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon {
    animation: none;
  }
}