/* styles/hero.css — Hero section.
   Extracted from the former single-file monolith. */

/* ─── HERO ───────────────────────────────────────────────── */
    .hero {
      position: relative;
      min-height: 100dvh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
      overflow: hidden;
    }

/* Full-bleed image behind everything */
    .hero-image-panel {
      position: absolute;
      inset: 0;
      min-height: unset;
      z-index: 0;
    }

.hero-image-panel img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: brightness(0.96) contrast(1.02);
    }

/* Dark gradient on right side so text is readable */
    .hero-image-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to left, rgba(18,15,12,0.88) 0%, rgba(18,15,12,0.60) 40%, rgba(18,15,12,0.08) 65%, transparent 80%),
        linear-gradient(to top, var(--color-bg) 0%, transparent 12%);
    }

.hero-content-panel {
      grid-column: 2;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: var(--space-32) var(--space-10) var(--space-16);
    }

.hero-eyebrow {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-6);
    }

.hero-title {
      font-family: var(--font-display);
      font-size: var(--text-hero);
      font-weight: 300;
      line-height: 0.95;
      margin-bottom: var(--space-4);
      color: var(--color-text);
    }

.hero-title em {
      font-style: italic;
      color: var(--color-gold-light);
      display: block;
    }

.hero-subtitle {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: var(--space-8);
    }

.hero-album-vol {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-1);
      margin-top: calc(var(--space-1) * -1);
    }

.hero-album-sub {
      font-family: var(--font-body);
      font-size: 0.65rem;
      letter-spacing: 0.55em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: var(--space-5);
    }

.hero-tagline {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 400;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-6);
    }

.hero-actions {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
    }

.hero-actions--stack {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

.hero-scroll {
      position: absolute;
      bottom: var(--space-8);
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      color: var(--color-text-faint);
      font-size: var(--text-xs);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      animation: scrollBounce 2.5s ease-in-out infinite;
    }

.hero-scroll svg { width: 20px; height: 20px; }

/* Hero title/eyebrow/subtitle: hidden on desktop (image has them baked in), shown on mobile */
    .hero-text-mobile-only { display: none; }

/* Warm gradient between hero and first section */
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(to bottom, transparent, var(--color-bg));
      z-index: 1;
      pointer-events: none;
    }

/* ── Hero section: subtitle/tagline refinements ── */
    .hero-album-sub {
      font-family: var(--font-body);
      font-size: 0.65rem;
      letter-spacing: 0.5em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: var(--space-4);
    }

.hero-tagline {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      letter-spacing: 0.12em;
      color: var(--color-text-muted);
      margin-bottom: var(--space-8);
      font-style: italic;
    }

/* ── Continuous World: sections flow into each other ── */
    /* No hard borders between sections — use overlapping gradients */

    /* Hero — full bleed, cinematic */
    .hero {
      background: transparent;
      min-height: 100svh;
    }

.hero-image-panel img {
      filter: brightness(1.0) contrast(1.0);
    }

.hero-image-panel::after {
      background:
        linear-gradient(to left,  rgba(24,20,16,0.90) 0%, rgba(24,20,16,0.55) 38%, rgba(24,20,16,0.05) 62%, transparent 78%),
        linear-gradient(to bottom, rgba(24,20,16,0.5) 0%, transparent 15%),
        linear-gradient(to top,    #1a1714 0%, transparent 18%);
    }

/* Hero content — more open, better centered */
    .hero-content-panel {
      padding: var(--space-32) var(--space-12) var(--space-20);
      justify-content: center;
    }

/* ── Hero title — more dramatic sizing ── */
    .hero-title {
      font-size: clamp(3.5rem, 8vw, 9rem);
      font-weight: 300;
      letter-spacing: -0.02em;
    }

/* ── Scroll indicator — more visible ── */
    .hero-scroll {
      color: rgba(212,174,82,0.5);
    }

.hero-scroll svg { stroke: rgba(212,174,82,0.5); }