:root {
  --navy: #0a1f44;
  --yellow: #ffc400;
  --blue: #0095ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: #ffffff;
  color: var(--navy);
  overflow: hidden;
}

/* 中央配置 */
.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ロゴ：ゴシック・太字・斜体でスポーティに */
.logo {
  position: relative;
  z-index: 2;
  font-family: "Bebas Neue", Impact, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 15vw, 9.5rem);
  line-height: 1;
  letter-spacing: .07em;         /* 文字間隔 */
  margin-right: -.07em;           /* 末尾の余白を相殺して中央に揃える */
  scale: 1 .7;                   /* 文字の高さを70%に */
  margin-block: -.15em;          /* 縮めた分の余白を詰める */
  color: var(--navy);
  text-shadow: 4px 4px 0 rgba(0,149,255,.18);
  animation: slidein .9s cubic-bezier(.2,.9,.2,1) both;
}
/* ドットは円形（ブルー1色） */
.logo .dot {
  display: inline-block;
  width: .17em;
  height: .17em;
  margin: 0 .05em;
  border-radius: 50%;
  background: var(--blue);
  text-shadow: none;
}

/* スピードライン */
.speed {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin-top: .6rem;
  transform: skewX(-24deg);
}
.speed b {
  display: block;
  height: 8px;
  border-radius: 2px;
  animation: dash 1s .5s cubic-bezier(.2,.9,.2,1) both;
}
.speed b:nth-child(1) { width: clamp(80px, 22vw, 200px); background: var(--yellow); }
.speed b:nth-child(2) { width: clamp(40px, 11vw, 100px);  background: var(--blue); }
.speed b:nth-child(3) { width: clamp(16px, 4vw, 36px);    background: var(--yellow); }

/* アニメーション */
@keyframes slidein {
  from { transform: translateX(-60px); opacity: 0; }
}
@keyframes dash {
  from { transform: scaleX(0); transform-origin: left; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .speed b { animation: none; }
}