/* ヒーローとマーキーの表示をまとめる。
   base.css の後に読み込む。 */
/* Hero */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100svh;
  overflow: clip;
  padding: clamp(7rem, 14vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5.5rem);
  isolation: isolate;
  background: var(--deep);
}
.hero-ignition {
  --intro-reveal-x: 50%;
  --intro-reveal-y: 50%;
  --intro-reveal-radius: 0px;
  position: absolute;
  z-index: 20;
  inset: 0;
  display: none;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.hero-ignition::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #050B18;
}
.hero-ignition.is-revealing::before {
  -webkit-mask-image: radial-gradient(
    circle at var(--intro-reveal-x) var(--intro-reveal-y),
    transparent 0,
    transparent var(--intro-reveal-radius),
    rgb(0 0 0 / 0.32) calc(var(--intro-reveal-radius) + clamp(1.5rem, 4vw, 4rem)),
    #000 calc(var(--intro-reveal-radius) + clamp(7rem, 16vw, 15rem))
  );
  mask-image: radial-gradient(
    circle at var(--intro-reveal-x) var(--intro-reveal-y),
    transparent 0,
    transparent var(--intro-reveal-radius),
    rgb(0 0 0 / 0.32) calc(var(--intro-reveal-radius) + clamp(1.5rem, 4vw, 4rem)),
    #000 calc(var(--intro-reveal-radius) + clamp(7rem, 16vw, 15rem))
  );
}
.intro-ready .hero-ignition { display: block; }
.intro-complete .hero-ignition { display: none !important; }
.hero-ignition-bloom,
.hero-ignition-orb {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}
.hero-ignition-bloom {
  z-index: 1;
  width: clamp(5rem, 8vw, 8rem);
  background: radial-gradient(
    circle,
    rgb(242 250 255 / 0.7) 0%,
    rgb(77 232 255 / 0.34) 9%,
    rgb(77 232 255 / 0.12) 30%,
    rgb(167 139 250 / 0.045) 52%,
    transparent 74%
  );
  filter: blur(10px);
  mix-blend-mode: screen;
}
.hero-ignition-orb {
  z-index: 2;
  width: clamp(0.58rem, 0.8vw, 0.82rem);
  border: 1px solid rgb(242 250 255 / 0.88);
  background: var(--foam);
  box-shadow:
    0 0 12px var(--glow-cyan),
    0 0 28px var(--glow-cyan),
    0 0 4rem rgb(77 232 255 / 0.84);
}
.hero-media {
  position: absolute;
  z-index: -4;
  inset: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 11 24 / 0.88) 0%, rgb(5 11 24 / 0.4) 42%, rgb(5 11 24 / 0.08) 72%),
    linear-gradient(0deg, rgb(5 11 24 / 0.94) 0%, transparent 53%, rgb(5 11 24 / 0.2) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: -20%;
  right: -10%;
  bottom: 36%;
  left: 24%;
  opacity: 0.5;
  mix-blend-mode: screen;
  transform: rotate(-8deg);
  transform-origin: top;
  background: linear-gradient(102deg, transparent 28%, rgb(143 216 240 / 0.19) 46%, transparent 58%);
  pointer-events: none;
}
.hero-station {
  position: absolute;
  z-index: 4;
  top: clamp(1.4rem, 4vw, 2.6rem);
  right: var(--gutter);
  left: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  color: rgb(242 250 255 / 0.7);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
}
.hero-station span:last-child { color: var(--glow-cyan); }
.hero-particles {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.motion .hero-particles { display: block; }
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 60rem;
}
.hero-kicker {
  color: var(--glow-cyan);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.hero-name {
  margin-top: 0.85rem;
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0.07em;
  text-shadow: 0 0 12px rgb(77 232 255 / 0.34), 0 0 28px rgb(77 232 255 / 0.2);
  white-space: nowrap;
}
.logo-wave {
  position: relative;
  display: inline-block;
}
.logo-wave::after {
  content: "";
  position: absolute;
  right: -0.04em;
  bottom: -0.12em;
  left: -0.04em;
  height: 0.22rem;
  border-radius: 100%;
  background: linear-gradient(90deg, var(--glow-cyan), var(--glow-pink));
  box-shadow: 0 0 12px var(--glow-cyan), 0 0 28px rgb(255 158 216 / 0.46);
  transform: rotate(-2deg) skewX(-18deg);
}
.hero-catch {
  margin-top: 1.25rem;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-wrap: balance;
}
.hero-role {
  margin-top: 0.7rem;
  color: rgb(242 250 255 / 0.72);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.split-line { overflow: hidden; }
.scroll-cue {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: clamp(2.2rem, 6vh, 4rem);
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  color: rgb(242 250 255 / 0.7);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(var(--glow-cyan), transparent);
}
.bubble-cursor {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: none;
  width: 1.1rem;
  aspect-ratio: 1;
  border: 1px solid rgb(77 232 255 / 0.84);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--glow-cyan), 0 0 28px rgb(77 232 255 / 0.46);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Velocity marquee */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgb(77 232 255 / 0.28);
  background: #071126;
  color: rgb(242 250 255 / 0.72);
}
.marquee-loop {
  display: flex;
  width: max-content;
  padding-block: 1.2rem;
  animation: marquee-loop 28s linear infinite;
  transform-origin: center;
}
.motion .marquee-loop { animation: none; }
.marquee-loop span {
  flex: none;
  padding-right: 0.85em;
  font-family: var(--mono);
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
@keyframes marquee-loop { to { transform: translateX(-50%); } }