/* Layers on top of css/base.css and marginalia/style.css (both linked from
   generator.html first), so this page matches the rest of the app. */

/* — Hero — */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* The nav is a sidebar (desktop) / bottom tab bar (phones), so the hero
     only needs breathing room. */
  padding: 4rem 3rem;
  background: var(--bg);
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 80% at 0% 100%, rgba(61, 158, 138, 0.22) 0%, transparent 70%);
  animation: hueShift 40s linear infinite;
}

@keyframes hueShift {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: -1;
}

.hero-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
  animation: fadeUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0.05s both;
}

/* — Name display — */
.name-display {
  margin-bottom: 2.75rem;
}

.band-name {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(3.25rem, 8vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--text);
}

.word {
  display: inline-block;
  white-space: nowrap;
}

.char-mask {
  display: inline-block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: bottom;
}

.char {
  display: inline-block;
  /* WebKit clips a filtered element's ink to its box; at line-height .92 the
     descenders poke out, so pad the box over them (negative margin cancels
     the layout change). Same fix as the home hero. */
  padding: 0.1em 0.05em 0.3em;
  margin: -0.1em -0.05em -0.3em;
  animation: charReveal 0.65s cubic-bezier(0.15, 1, 0.3, 1) both;
}

.going-back .char {
  animation-name: charRevealBack;
}

/* — Controls — */
.controls {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.counter {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.55;
  min-height: 1em;
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.arrow-btn {
  font-family: 'Oxygen', sans-serif;
  font-size: 1rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition: color 0.18s;
  line-height: 1;
  opacity: 0.5;
}

.arrow-btn:hover { color: var(--text); opacity: 1; }
.arrow-btn:disabled { opacity: 0.2; cursor: default; }

.generate-btn {
  font-family: 'Oxygen', sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 0.2rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  font-weight: 300;
}

.generate-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.hint {
  font-size: 0.6875rem;
  color: var(--muted);
  opacity: 0.45;
  letter-spacing: 0.02em;
}

.hint--mobile { display: none; }

kbd {
  font-family: 'Oxygen', sans-serif;
  font-size: 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.04);
}

/* — Animations — */
@keyframes charReveal {
  from { opacity: 0; transform: translateY(110%);  filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

@keyframes charRevealBack {
  from { opacity: 0; transform: translateY(-110%); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

@keyframes charExit {
  from { opacity: 1; transform: translateY(0);     filter: blur(0); }
  to   { opacity: 0; transform: translateY(-110%); filter: blur(8px); }
}

@keyframes charExitBack {
  from { opacity: 1; transform: translateY(0);     filter: blur(0); }
  to   { opacity: 0; transform: translateY(110%);  filter: blur(8px); }
}

/* — Dark mode (base handles tokens & nav) — */
@media (prefers-color-scheme: dark) {
  kbd {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* — Mobile (nav handled by base) — */
@media (max-width: 768px) {
  .hint--desktop { display: none; }
  .hint--mobile  { display: block; }

  .hero {
    cursor: pointer;
    padding: 3rem 1.5rem;
  }

  .controls-row {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* Phones: centre the hero in the space above the floating tab bar. */
@media (max-width: 768px) {
  .hero { padding-bottom: calc(3rem + var(--tabbar-clear)); }
}