:root {
  --navy: #0a1f44;
  --orange: #ff5a1f;
  --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: "Barlow Condensed", Impact, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.5rem, 15vw, 9.5rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--navy);
  text-shadow: 4px 4px 0 rgba(0,149,255,.18);
  animation: slidein .9s cubic-bezier(.2,.9,.2,1) both;
}
.logo .dot { color: var(--orange); }

/* スピードライン */
.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(--orange); }
.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(--navy); }

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

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