:root {
  --fg: #fffef0;
  --bg: #000;
  --muted: #bfbfb0;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--fg);
  display: grid;
  place-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial,
    "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "MS PGothic", sans-serif;
  line-height: 1.5;
  overflow: hidden;
}

/* bg-video */
.bg-video { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.bg-video video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(0.5);
}

/* overlay */
.overlay {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0.6) 100%
  );
}

@media (prefers-reduced-motion: reduce) { .bg-video { display: none; } }

/* contents */
.wrap {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px; animation: fadeIn 800ms ease both;
}
img.logo { max-width: 300px; width: min(60vw, 300px); height: auto; image-rendering: -webkit-optimize-contrast; }
p.tagline { font-size: 14px; margin-top: 20px; color: var(--fg); letter-spacing: 0.35em; text-transform: lowercase; opacity: 0.9; }

/* footer */
.footer {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 10px;
}

/* SNS icon (common) */
.social-links { display: flex; gap: 20px; }
.social-links a {
  color: var(--fg);
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-links a:hover { opacity: 0.75; transform: translateY(-1px); }
.social-links svg { width: 100%; height: 100%; display: block; }

/* SNS scale */
.x-icon svg {
  transform: scale(0.75);
  transform-origin: center;
  transform-box: fill-box;
}
.icon-instagram svg {
  transform: scale(0.95);
  transform-origin: center;
  transform-box: fill-box;
}
.icon-youtube svg {
  transform: scale(1.00);
  transform-origin: center;
  transform-box: fill-box;
}

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

@media (prefers-reduced-motion: reduce) {
  .wrap { animation: none; }
  .social-links a { transition: none; }
}