/* FV案A — 参考画像忠実の紫転調（ダーク×グランジ×大級数タイポ） */

.hero-a {
  min-height: 100svh;
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px clamp(20px, 6vw, 80px) 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(124, 58, 237, .38), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(217, 70, 239, .22), transparent 65%),
    linear-gradient(160deg, #0b0713 20%, #1b1029 55%, #0b0713 90%);
}

/* 斜めのスラッシュ装飾（参考画像のピンクの走り線） */
.hero-a::before {
  content: "";
  position: absolute; left: -10%; top: 52%;
  width: 70%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: rotate(-8deg);
  box-shadow: 0 0 24px rgba(217, 70, 239, .8);
}

.hero-a__frame {
  position: absolute; inset: 0; pointer-events: none;
  font-size: 10px; letter-spacing: .3em; color: rgba(182, 169, 209, .55);
}
.hero-a__frame .tl { position: absolute; top: 92px; left: clamp(20px, 6vw, 80px); }
.hero-a__frame .tr { position: absolute; top: 92px; right: clamp(20px, 6vw, 80px); text-align: right; }
.hero-a__frame .br { position: absolute; bottom: 24px; right: clamp(20px, 6vw, 80px); text-align: right; }

.hero-a__copy {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(40px, 8.4vw, 104px);
  line-height: 1.28;
  letter-spacing: .02em;
  max-width: 14em;
  text-shadow: 0 0 60px rgba(124, 58, 237, .45);
}
.hero-a__copy .stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(243, 239, 250, .85);
}
.hero-a__copy .glow {
  background: linear-gradient(95deg, var(--brand-bright) 10%, var(--accent) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(168, 85, 247, .55));
}

.hero-a__sub {
  margin-top: 36px;
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--text-dim);
  max-width: 34em;
}
.hero-a__sub strong { color: var(--text); font-weight: 700; }

.hero-a__slogans {
  position: absolute; right: clamp(20px, 6vw, 80px); bottom: clamp(96px, 15vh, 150px);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(13px, 1.6vw, 17px);
}
.hero-a__slogans span {
  background: rgba(11, 7, 19, .75);
  border-left: 3px solid var(--accent);
  padding: 6px 14px;
}
.hero-a__slogans span em { font-style: normal; color: var(--accent); }
@media (max-width: 900px) { .hero-a__slogans { position: static; align-items: flex-start; margin-top: 40px; } .hero-a__slogans span { border-left-color: var(--brand-bright); } }

.hero-a__en {
  position: absolute; left: clamp(20px, 6vw, 80px); bottom: 28px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 30px);
  letter-spacing: .06em;
  color: #fff;
  transform: rotate(-2deg);
}
.hero-a__en span { color: var(--accent); }

.hero-a__scroll {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .4em; color: var(--text-dim);
  writing-mode: vertical-rl;
  padding-bottom: 44px;
}
.hero-a__scroll::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--brand-bright), transparent);
  animation: scrollline 1.8s ease-in-out infinite;
}
@keyframes scrollline { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 640px) { .hero-a__scroll { display: none; } }