/* ========================================
   Hero — orbs canvas + title + meta-bar
   ======================================== */

/* WebGL canvas stays fixed behind everything as you scroll.
   background: var(--bg) prevents the black flash on first paint. */
#gl {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  background: var(--bg);
}

/* Soft halo behind the orbs. No z-index — source order (canvas → glow → hero)
   keeps the halo behind the hero text. */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 78% 48%, rgba(93, 201, 188, 0.42), transparent 65%),
    radial-gradient(ellipse 35% 35% at 88% 30%, rgba(168, 229, 222, 0.30), transparent 70%);
  filter: blur(20px);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 68px var(--pad-x) 28px;
}

/* Text reveal cascade — elements fade in from the left on load */
.hero .label,
.hero .hero-title-img,
.hero .title-block .sub,
.hero .hero-subtitle-img,
.hero .meta-bar {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--dur-slow) ease, transform 0.9s var(--ease-out);
}
.hero.is-ready .label              { opacity: 1; transform: none; transition-delay: .25s; }
.hero.is-ready .hero-title-img     { opacity: 1; transform: none; transition-delay: .45s; }
.hero.is-ready .title-block .sub   { opacity: 1; transform: none; transition-delay: .70s; }
.hero.is-ready .hero-subtitle-img  { opacity: 1; transform: none; transition-delay: .70s; }
.hero.is-ready .meta-bar           { opacity: 1; transform: none; transition-delay: 1.10s; }

/* Top label — small status text with pulsing dot */
.label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.label::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--accent);
}
.label .blink {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: var(--radius-circle);
  animation: blink 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px var(--accent-bright);
}
@keyframes blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Title block */
.title-block {
  align-self: center;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}

.hero-title-img {
  width: clamp(200px, 42vw, 560px);
  height: auto;
  display: block;
  flex-shrink: 0;
  margin-bottom: 24px;
}

.hero-subtitle-img {
  width: clamp(100px, 13vw, 180px);
  height: auto;
  flex-shrink: 0;
  display: block;
}

/* Meta-bar at hero bottom — companies list + key info */
.meta-bar {
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.meta-bar .companies-label {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.meta-bar .companies-list {
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -.005em;
  /* keep-all: don't break inside a company name at intermediate widths. */
  word-break: keep-all;
  overflow-wrap: normal;
}
.meta-bar .companies-list li { display: inline; }
.meta-bar .companies-list li:not(:last-child)::after {
  content: " · ";
  color: var(--ink-mute);
}

.meta-bar dl {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 28px;
  text-align: right;
}
.meta-bar dt {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.meta-bar dd {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.meta-bar dd small {
  display: block;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
  letter-spacing: 0;
}