/* ===========================================================
   pages/home.css — トップページ固有
   =========================================================== */

/* --- ヒーロー ---------------------------------------------- */

.p-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--h-header) + var(--sp-3xl));
  padding-bottom: var(--sp-3xl);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .p-hero {
    padding-top: calc(var(--h-header-lg) + var(--sp-3xl));
  }
}

/* 背景（グリッド＋グロー） */
.p-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.p-hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}

.p-hero__glow {
  position: absolute;
  top: -18%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--c-accent) 32%, transparent) 0%,
    transparent 62%
  );
  filter: blur(20px);
  opacity: 0.75;
}

.p-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-lg);
}

.p-hero__label {
  color: color-mix(in srgb, var(--c-accent) 65%, #fff);
}

.p-hero__title {
  max-width: 18ch;
}

.p-hero__title em {
  font-style: normal;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--c-accent) 55%, #fff) 0%,
    var(--c-accent-art) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 日本語は1文字=1em なので ch ではなく em で行長を決める（約38文字/行） */
.p-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--c-ink-inverse-mute);
  max-width: 38em;
}

.p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.p-hero .c-btn--outline {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.p-hero .c-btn--outline:hover {
  background-color: #fff;
  color: var(--c-bg-dark);
  border-color: #fff;
}

/* スクロール誘導 */
.p-hero__scroll {
  position: absolute;
  bottom: var(--sp-xl);
  left: 50%;
  translate: -50% 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  color: var(--c-ink-faint);
}

@media (min-width: 768px) {
  .p-hero__scroll {
    display: flex;
  }
}

.p-hero__scroll-label {
  font-family: var(--ff-en);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
}

.p-hero__scroll-line {
  width: 1px;
  height: 56px;
  background-color: currentColor;
  opacity: 0.4;
  transform-origin: top;
  animation: hero-scroll 2.4s var(--ease-in-out) infinite;
}

@keyframes hero-scroll {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  40% {
    transform: scaleY(1);
    opacity: 0.5;
  }
  100% {
    transform: scaleY(1) translateY(56px);
    opacity: 0;
  }
}

/* --- About 抜粋 -------------------------------------------- */

.p-about-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  align-items: flex-start;
  color: var(--c-ink-mute);
}

.p-about-body .t-lead {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}